import Typography from '@material-ui/core/Typography';
import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
import { ArvadosTheme } from '../../common/custom-theme';
+import * as classnames from "classnames";
type CssRules = 'attribute' | 'label' | 'value' | 'link';
interface DetailsAttributeDataProps {
label: string;
+ classLabel?: string;
value?: string | number;
+ classValue?: string;
link?: string;
children?: React.ReactNode;
}
type DetailsAttributeProps = DetailsAttributeDataProps & WithStyles<CssRules>;
-export const DetailsAttribute = withStyles(styles)(({ label, link, value, children, classes }: DetailsAttributeProps) =>
+export const DetailsAttribute = withStyles(styles)(({ label, link, value, children, classes, classLabel, classValue }: DetailsAttributeProps) =>
<Typography component="div" className={classes.attribute}>
- <Typography component="span" className={classes.label}>{label}</Typography>
+ <Typography component="span" className={classnames([classes.label, classLabel])}>{label}</Typography>
{ link
? <a href={link} className={classes.link} target='_blank'>{value}</a>
- : <Typography component="span" className={classes.value}>
+ : <Typography component="span" className={classnames([classes.value, classValue])}>
{value}
{children}
</Typography> }
LOAD_COLLECTION_TAGS: ofType<{ uuid: string }>(),
LOAD_COLLECTION_TAGS_SUCCESS: ofType<{ tags: TagResource[] }>(),
CREATE_COLLECTION_TAG: ofType<{ data: any }>(),
- CREATE_COLLECTION_TAG_SUCCESS: ofType<{ tag: TagResource }>()
+ CREATE_COLLECTION_TAG_SUCCESS: ofType<{ tag: TagResource }>(),
+ DELETE_COLLECTION_TAG: ofType<{ uuid: string }>(),
+ DELETE_COLLECTION_TAG_SUCCESS: ofType<{ uuid: string }>()
}, { tag: 'type', value: 'payload' });
export type CollectionPanelAction = UnionOf<typeof collectionPanelActions>;
}));
});
};
+
+export const deleteCollectionTag = (uuid: string) =>
+ (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+ dispatch(collectionPanelActions.DELETE_COLLECTION_TAG({ uuid }));
+ return services.linkService
+ .delete(uuid)
+ .then(tag => {
+ dispatch(collectionPanelActions.DELETE_COLLECTION_TAG_SUCCESS({ uuid: tag.uuid }));
+ dispatch(snackbarActions.OPEN_SNACKBAR({
+ message: "Tag has been successfully deleted.",
+ hideDuration: 2000
+ }));
+ });
+ };
\ No newline at end of file
collectionPanelActions.match(action, {
default: () => state,
LOAD_COLLECTION_SUCCESS: ({ item }) => ({ ...state, item }),
- LOAD_COLLECTION_TAGS_SUCCESS: ({ tags }) => ({...state, tags}),
- CREATE_COLLECTION_TAG_SUCCESS: ({ tag }) => ({...state, tags: [...state.tags, tag] })
+ LOAD_COLLECTION_TAGS_SUCCESS: ({ tags }) => ({...state, tags }),
+ CREATE_COLLECTION_TAG_SUCCESS: ({ tag }) => ({...state, tags: [...state.tags, tag] }),
+ DELETE_COLLECTION_TAG_SUCCESS: ({ uuid }) => ({...state, tags: state.tags.filter(tag => tag.uuid !== uuid) })
});
import * as CopyToClipboard from 'react-copy-to-clipboard';
import { TagResource } from '../../models/tag';
import { CollectionTagForm } from './collection-tag-form';
+import { deleteCollectionTag } from '../../store/collection-panel/collection-panel-action';
-type CssRules = 'card' | 'iconHeader' | 'tag' | 'copyIcon';
+type CssRules = 'card' | 'iconHeader' | 'tag' | 'copyIcon' | 'value';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
card: {
- marginBottom: '20px'
+ marginBottom: theme.spacing.unit * 2
},
iconHeader: {
fontSize: '1.875rem',
fontSize: '1.125rem',
color: theme.palette.grey["500"],
cursor: 'pointer'
+ },
+ value: {
+ textTransform: 'none'
}
});
<CardContent>
<Grid container direction="column">
<Grid item xs={6}>
- <DetailsAttribute label='Collection UUID' value={item && item.uuid}>
+ <DetailsAttribute classValue={classes.value}
+ label='Collection UUID'
+ value={item && item.uuid}>
<CopyToClipboard text={item && item.uuid}>
<CopyIcon className={classes.copyIcon} />
</CopyToClipboard>
</DetailsAttribute>
+ <DetailsAttribute label='Number of files' value='14' />
<DetailsAttribute label='Content size' value='54 MB' />
- <DetailsAttribute label='Owner' value={item && item.ownerUuid} />
+ <DetailsAttribute classValue={classes.value} label='Owner' value={item && item.ownerUuid} />
</Grid>
</Grid>
</CardContent>
{
tags.map(tag => {
return <Chip key={tag.etag} className={classes.tag}
- onDelete={handleDelete}
+ onDelete={this.handleDelete(tag.uuid)}
label={renderTagLabel(tag)} />;
})
}
</div>;
}
+ handleDelete = (uuid: string) => () => {
+ this.props.dispatch<any>(deleteCollectionTag(uuid));
+ }
+
componentWillReceiveProps({ match, item, onItemRouteChange }: CollectionPanelProps) {
if (!item || match.params.id !== item.uuid) {
onItemRouteChange(match.params.id);
const renderTagLabel = (tag: TagResource) => {
const { properties } = tag;
return `${properties.key}: ${properties.value}`;
-};
-
-const handleDelete = () => {
- alert('tag has been deleted');
};
\ No newline at end of file