From 919738cdda7a99c61164ccac5754fe939c25fb6b Mon Sep 17 00:00:00 2001 From: Janicki Artur Date: Tue, 7 Aug 2018 09:25:50 +0200 Subject: [PATCH 1/1] add delete tag, improve detail attributes and modify collection panel Feature #13854 Arvados-DCO-1.1-Signed-off-by: Janicki Artur --- .../details-attribute/details-attribute.tsx | 9 ++++--- .../collection-panel-action.ts | 18 ++++++++++++- .../collection-panel-reducer.ts | 5 ++-- .../collection-panel/collection-panel.tsx | 25 ++++++++++++------- 4 files changed, 42 insertions(+), 15 deletions(-) diff --git a/src/components/details-attribute/details-attribute.tsx b/src/components/details-attribute/details-attribute.tsx index 56da6c17..f9a5b05a 100644 --- a/src/components/details-attribute/details-attribute.tsx +++ b/src/components/details-attribute/details-attribute.tsx @@ -6,6 +6,7 @@ import * as React from 'react'; 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'; @@ -35,19 +36,21 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ interface DetailsAttributeDataProps { label: string; + classLabel?: string; value?: string | number; + classValue?: string; link?: string; children?: React.ReactNode; } type DetailsAttributeProps = DetailsAttributeDataProps & WithStyles; -export const DetailsAttribute = withStyles(styles)(({ label, link, value, children, classes }: DetailsAttributeProps) => +export const DetailsAttribute = withStyles(styles)(({ label, link, value, children, classes, classLabel, classValue }: DetailsAttributeProps) => - {label} + {label} { link ? {value} - : + : {value} {children} } diff --git a/src/store/collection-panel/collection-panel-action.ts b/src/store/collection-panel/collection-panel-action.ts index f389dc4d..f9994d73 100644 --- a/src/store/collection-panel/collection-panel-action.ts +++ b/src/store/collection-panel/collection-panel-action.ts @@ -17,7 +17,9 @@ export const collectionPanelActions = unionize({ 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; @@ -60,3 +62,17 @@ export const createCollectionTag = (data: TagProperty) => })); }); }; + +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 diff --git a/src/store/collection-panel/collection-panel-reducer.ts b/src/store/collection-panel/collection-panel-reducer.ts index ac07ae37..44b77898 100644 --- a/src/store/collection-panel/collection-panel-reducer.ts +++ b/src/store/collection-panel/collection-panel-reducer.ts @@ -20,6 +20,7 @@ export const collectionPanelReducer = (state: CollectionPanelState = initialStat 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) }) }); diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx index c6554f9c..aac5661e 100644 --- a/src/views/collection-panel/collection-panel.tsx +++ b/src/views/collection-panel/collection-panel.tsx @@ -17,12 +17,13 @@ import { CollectionResource } from '../../models/collection'; 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 = (theme: ArvadosTheme) => ({ card: { - marginBottom: '20px' + marginBottom: theme.spacing.unit * 2 }, iconHeader: { fontSize: '1.875rem', @@ -37,6 +38,9 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ fontSize: '1.125rem', color: theme.palette.grey["500"], cursor: 'pointer' + }, + value: { + textTransform: 'none' } }); @@ -79,13 +83,16 @@ export const CollectionPanel = withStyles(styles)( - + + - + @@ -100,7 +107,7 @@ export const CollectionPanel = withStyles(styles)( { tags.map(tag => { return ; }) } @@ -122,6 +129,10 @@ export const CollectionPanel = withStyles(styles)( ; } + handleDelete = (uuid: string) => () => { + this.props.dispatch(deleteCollectionTag(uuid)); + } + componentWillReceiveProps({ match, item, onItemRouteChange }: CollectionPanelProps) { if (!item || match.params.id !== item.uuid) { onItemRouteChange(match.params.id); @@ -135,8 +146,4 @@ export const CollectionPanel = withStyles(styles)( 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 -- 2.30.2