Add to workflow UX improvements (#1978)

superdesk · May 2, 2024 · bc73e1e · bc73e1e
1 parent 4010167
commit bc73e1e
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 5 deletions.
diff --git a/client/actions/multiSelect.ts b/client/actions/multiSelect.ts
@@ -8,6 +8,7 @@ import {MULTISELECT, ITEM_TYPE, MODALS} from '../constants';
 import eventsUi from './events/ui';
 import planningUi from './planning/ui';
 import {getItemType, gettext, getItemInArrayById, getErrorMessage, lockUtils} from '../utils';
+import {planningApi} from '../superdeskApi';
 
 /**
  * Action Dispatcher to select an/all Event(s)
@@ -180,6 +181,12 @@ const downloadEvents = (url, data) => {
     req.send(JSON.stringify(data));
 };
 
+const bulkAddPlanningCoveragesToWorkflow = (items) => (
+    (dispatch) => planningApi.planning.coverages.bulkAddCoverageToWorkflow(items)
+        .then(() => dispatch({
+            type: MULTISELECT.ACTIONS.DESELECT_ALL_PLANNINGS,
+        }))
+);
 
 const exportAsArticle = (items = [], download) => (
     (dispatch, getState, {api, notify, gettext, superdesk, $location, $interpolate, desks}) => {
@@ -312,6 +319,7 @@ const self = {
     itemBulkSpikeModal,
     itemBulkUnSpikeModal,
     exportAsArticle,
+    bulkAddPlanningCoveragesToWorkflow,
 };
 
 export default self;
diff --git a/client/components/Coverages/CoverageItem.tsx b/client/components/Coverages/CoverageItem.tsx
@@ -7,7 +7,7 @@ import {IContactItem, IG2ContentType, IPlanningCoverageItem, IPlanningItem} from
 
 import * as selectors from '../../selectors';
 import * as actions from '../../actions';
-import {WORKFLOW_STATE} from '../../constants';
+import {COVERAGES, WORKFLOW_STATE} from '../../constants';
 import {
     getCreator,
     getItemInArrayById,
@@ -20,6 +20,7 @@ import {getUserInterfaceLanguageFromCV} from '../../utils/users';
 import {Item, Column, Row, Border, ActionMenu} from '../UI/List';
 import {StateLabel, InternalNoteLabel} from '../../components';
 import {CoverageIcons} from './CoverageIcons';
+import {Label} from 'superdesk-ui-framework';
 
 interface IProps {
     coverage: IPlanningCoverageItem;
@@ -39,6 +40,7 @@ interface IProps {
 }
 
 interface IState {
+    addedToWorkflow: boolean;
     userAssigned?: IUser;
     deskAssigned?: IDesk;
     coverageProvider?: string;
@@ -70,6 +72,7 @@ export class CoverageItemComponent extends React.Component<IProps, IState> {
             coverageDateText: '',
             internalNoteFieldPrefix: '',
             coverageInWorkflow: false,
+            addedToWorkflow: false,
         };
 
         this.updateViewAttributes = this.updateViewAttributes.bind(this);
@@ -120,6 +123,7 @@ export class CoverageItemComponent extends React.Component<IProps, IState> {
             userAssigned: null,
             displayContentType: '',
             coverageDateText: '',
+            addedToWorkflow: coverage.workflow_status === COVERAGES.WORKFLOW_STATE.ACTIVE,
         };
 
         if (!isPreview) {
@@ -220,7 +224,7 @@ export class CoverageItemComponent extends React.Component<IProps, IState> {
                     </span>
                 )}
 
-                <span className="grid">
+                <span className="grid sd-gap--x-small">
                     <InternalNoteLabel
                         item={item}
                         prefix={`${this.state.internalNoteFieldPrefix}.planning.`}
@@ -230,6 +234,14 @@ export class CoverageItemComponent extends React.Component<IProps, IState> {
                             `${this.state.internalNoteFieldPrefix}.workflow_status` : 'state'}
                         showHeaderText={false}
                     />
+                    {this.state.addedToWorkflow && (
+                        <div>
+                            <Label
+                                text={gettext('Added to workflow')}
+                                type="success"
+                            />
+                        </div>
+                    )}
                     <StateLabel
                         item={this.state.coverageInWorkflow ? get(coverage, 'assigned_to', {}) : coverage}
                         fieldName={this.state.coverageInWorkflow ? 'state' : 'workflow_status'}

diff --git a/client/components/MultiSelectActions.tsx b/client/components/MultiSelectActions.tsx
@@ -8,7 +8,6 @@ import {eventUtils, planningUtils, gettext} from '../utils';
 import {MAIN} from '../constants';
 import {SlidingToolBar} from './UI/SubNav';
 import {Button} from './UI';
-import {planningApi} from '../superdeskApi';
 
 export class MultiSelectActionsComponent extends React.PureComponent {
     constructor(props) {
@@ -95,7 +94,7 @@ export class MultiSelectActionsComponent extends React.PureComponent {
                     key={0}
                     hollow={true}
                     onClick={() => {
-                        planningApi.planning.coverages.bulkAddCoverageToWorkflow(this.getItemList());
+                        this.props.addToWorkflow(this.getItemList());
                     }}
                     text={gettext('Add to workflow')}
                 />
@@ -274,6 +273,7 @@ MultiSelectActionsComponent.propTypes = {
     selectedEvents: PropTypes.array,
     selectAllEvents: PropTypes.func,
     deSelectAllEvents: PropTypes.func,
+    addToWorkflow: PropTypes.func,
     selectedPlannings: PropTypes.array,
     selectAllPlannings: PropTypes.func,
     deSelectAllPlannings: PropTypes.func,
@@ -312,6 +312,7 @@ const mapDispatchToProps = (dispatch) => ({
     spikeItems: (items) => dispatch(actions.multiSelect.itemBulkSpikeModal(items)),
     unspikeItems: (items) => dispatch(actions.multiSelect.itemBulkUnSpikeModal(items)),
     exportAsArticle: (items, download) => dispatch(actions.multiSelect.exportAsArticle(items, download)),
+    addToWorkflow: (items) => dispatch(actions.multiSelect.bulkAddPlanningCoveragesToWorkflow(items)),
 });
 
 

diff --git a/client/utils/planning.ts b/client/utils/planning.ts
@@ -1224,7 +1224,9 @@ function getCoverageIcon(
 }
 
 function getCoverageIconColor(coverage: IPlanningCoverageItem): string {
-    if (get(coverage, 'assigned_to.state') === ASSIGNMENTS.WORKFLOW_STATE.COMPLETED) {
+    if (coverage.workflow_status === COVERAGES.WORKFLOW_STATE.ACTIVE) {
+        return 'var(--sd-colour-success)';
+    } else if (get(coverage, 'assigned_to.state') === ASSIGNMENTS.WORKFLOW_STATE.COMPLETED) {
         return 'var(--sd-colour-success)';
     } else if (isCoverageDraft(coverage) || get(coverage, 'workflow_status') === COVERAGES.WORKFLOW_STATE.ACTIVE) {
         return 'var(--sd-colour-highlight)';