//
// SPDX-License-Identifier: AGPL-3.0
-import * as React from 'react';
+import React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
-import { formValueSelector } from 'redux-form';
-import { withStyles, StyleRulesCallback, WithStyles, Chip } from '@material-ui/core';
-import { RootState } from '~/store/store';
-import { removePropertyFromCreateProjectForm, PROJECT_CREATE_FORM_NAME } from '~/store/projects/project-create-actions';
-import { ArvadosTheme } from '~/common/custom-theme';
+import {
+ withStyles,
+ StyleRulesCallback,
+ WithStyles,
+} from '@material-ui/core';
+import { RootState } from 'store/store';
+import { removePropertyFromCreateProjectForm, PROJECT_CREATE_FORM_SELECTOR, ProjectProperties } from 'store/projects/project-create-actions';
+import { ArvadosTheme } from 'common/custom-theme';
+import { getPropertyChip } from '../resource-properties-form/property-chip';
type CssRules = 'tag';
});
interface CreateProjectPropertiesListDataProps {
- properties: any;
+ properties: ProjectProperties;
}
interface CreateProjectPropertiesListActionProps {
- handleDelete: (key: string) => void;
+ handleDelete: (key: string, value: string) => void;
}
-const selector = formValueSelector(PROJECT_CREATE_FORM_NAME);
const mapStateToProps = (state: RootState): CreateProjectPropertiesListDataProps => {
- const properties = selector(state, 'properties');
+ const properties = PROJECT_CREATE_FORM_SELECTOR(state, 'properties');
return { properties };
};
const mapDispatchToProps = (dispatch: Dispatch): CreateProjectPropertiesListActionProps => ({
- handleDelete: (key: string) => dispatch<any>(removePropertyFromCreateProjectForm(key))
+ handleDelete: (key: string, value: string) => dispatch<any>(removePropertyFromCreateProjectForm(key, value))
});
-type CreateProjectPropertiesListProps = CreateProjectPropertiesListDataProps &
+type CreateProjectPropertiesListProps = CreateProjectPropertiesListDataProps &
CreateProjectPropertiesListActionProps & WithStyles<CssRules>;
-export const CreateProjectPropertiesList = connect(mapStateToProps, mapDispatchToProps)(
- withStyles(styles)(
- ({ classes, handleDelete, properties }: CreateProjectPropertiesListProps) =>
- <div>
- { properties &&
- Object.keys(properties).map(k => {
- return <Chip key={k} className={classes.tag}
- onDelete={() => handleDelete(k)}
- label={`${k}: ${properties[k]}`} />;
- })}
- </div>
- ));
\ No newline at end of file
+const List = withStyles(styles)(
+ ({ classes, handleDelete, properties }: CreateProjectPropertiesListProps) =>
+ <div>
+ {properties &&
+ Object.keys(properties).map(k =>
+ Array.isArray(properties[k])
+ ? (properties[k] as string[]).map((v: string) =>
+ getPropertyChip(
+ k, v,
+ () => handleDelete(k, v),
+ classes.tag))
+ : getPropertyChip(
+ k, (properties[k] as string),
+ () => handleDelete(k, (properties[k] as string)),
+ classes.tag))
+ }
+ </div>
+);
+
+export const CreateProjectPropertiesList = connect(mapStateToProps, mapDispatchToProps)(List);
\ No newline at end of file