[TGA-45] Support multi-select with AuthorProfile fields (#11)

* [TGA-45] Support multi-select with AuthorProfile fields * fix(build) Update server requirements * run black utility * fix: Flake8 and black issues * disable client package-lock.json * fix(ci/client): Disable package-lock cache
superdesk · Jul 27, 2023 · 92c7452 · 92c7452
1 parent 792d37d
commit 92c7452
Show file tree

Hide file tree

Showing 25 changed files with 542 additions and 14,696 deletions.
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -13,7 +13,7 @@ jobs:
     steps:
     - uses: actions/checkout@v2
     - uses: actions/setup-python@v2
-    - run: pip install black
+    - run: pip install black~=23.0
     - run: black --diff .
 
   flake8:

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -33,8 +33,8 @@ jobs:
         python -m pip install --upgrade pip wheel setuptools
         pip install -r dev-requirements.txt
 
-    - name: nosetests
-      run: nosetests tests
+    - name: pytest
+      run: pytest --log-level=ERROR --disable-warnings
 
     - name: initialize data
       run: python manage.py app:initialize_data
@@ -53,8 +53,6 @@ jobs:
     - uses: actions/setup-node@v3
       with:
         node-version: 14.x
-        cache: 'npm'
-        cache-dependency-path: client/package-lock.json
 
     - run: git config --global url."https://git@".insteadOf git://
 

diff --git a/client/.npmrc b/client/.npmrc
@@ -1 +1 @@
-package-lock=true
+package-lock=false
diff --git a/client/extensions/tga-author-profile-fields/src/components/vocab/editor.tsx b/client/extensions/tga-author-profile-fields/src/components/vocab/editor.tsx
@@ -1,10 +1,33 @@
 import * as React from 'react';
 
-import {ILiveResourcesProps, IRestApiResponse, IVocabulary} from 'superdesk-api';
+import {ILiveResourcesProps, IRestApiResponse, IVocabulary, IVocabularyItem, IEditorComponentProps} from 'superdesk-api';
 import {superdesk} from '../../superdesk';
-import {IVocabularyFieldProps} from './interfaces';
+import {IVocabularyFieldConfig} from './interfaces';
 
-import {Select, Option} from "superdesk-ui-framework/react";
+import {Select, Option, MultiSelect, Label} from 'superdesk-ui-framework/react';
+
+type IVocabularyFieldValue = IVocabularyItem | Array<IVocabularyItem> | null | undefined;
+type IVocabularyFieldProps = IEditorComponentProps<IVocabularyFieldValue, IVocabularyFieldConfig>
+
+function getValueAsArray(value: IVocabularyFieldValue): Array<IVocabularyItem> {
+    if (value == null) {
+        return [];
+    } else if (!Array.isArray(value)) {
+        return [value];
+    }
+
+    return value;
+}
+
+function getValueAsDictionary(value: IVocabularyFieldValue): IVocabularyItem | null {
+    if (value == null) {
+        return null;
+    } else if (Array.isArray(value)) {
+        return value[0];
+    }
+
+    return value;
+}
 
 
 export class VocabularyField extends React.PureComponent<IVocabularyFieldProps> {
@@ -22,14 +45,43 @@ export class VocabularyField extends React.PureComponent<IVocabularyFieldProps>
             <WithLiveResources resources={resources}>
                 {(resourcesResponse) => {
                     const vocab = resourcesResponse[0] as IRestApiResponse<IVocabulary>;
+                    const isMultiSelect = vocab._items[0].selection_type === 'multi selection';
                     const items = vocab._items[0].items;
 
-                    return (
+                    return isMultiSelect ? (
+                        <MultiSelect
+                            value={getValueAsArray(this.props.value)}
+                            options={items}
+                            placeholder={'Select an item'}
+                            optionLabel={(item) => item?.name || ''}
+                            onChange={(newValues) => {
+                                this.props.setValue(newValues);
+                            }}
+                            filter={true}
+                            labelHidden={true}
+                            label={'CV Items'}
+                            inlineLabel={true}
+                            itemTemplate={(item) => (
+                                <div
+                                    className="sd-container sd-container--gap-medium"
+                                    style={{maxWidth: '600px'}} // Define max-width, so SDGs will fit in screen
+                                >
+                                    <Label
+                                        text={item.qcode}
+                                        style="translucent"
+                                    />
+                                    <span className="sd-text__normal sd-whitespace--normal">
+                                        {item.name}
+                                    </span>
+                                </div>
+                            )}
+                        />
+                    ) : (
                         <Select
                             onChange={(qcode) => {
                                 this.props.setValue(items.find((item) => item.qcode === qcode));
                             }}
-                            value={this.props.value?.qcode}
+                            value={getValueAsDictionary(this.props.value)?.qcode}
                             inlineLabel={true}
                             label={'CV Item'}
                             labelHidden={true}

diff --git a/client/extensions/tga-author-profile-fields/src/components/vocab/interfaces.ts b/client/extensions/tga-author-profile-fields/src/components/vocab/interfaces.ts
@@ -1,9 +1,5 @@
-import {IEditorComponentProps, IVocabularyItem} from 'superdesk-api';
-
 export interface IVocabularyFieldConfig {
     vocabulary_name: string;
     allow_freetext: boolean;
     exclude_from_content_api: boolean;
 }
-
-export type IVocabularyFieldProps = IEditorComponentProps<IVocabularyItem | null | undefined, IVocabularyFieldConfig>;
diff --git a/client/extensions/tga-author-profile-fields/src/components/vocab/preview.tsx b/client/extensions/tga-author-profile-fields/src/components/vocab/preview.tsx
@@ -1,14 +1,34 @@
 import * as React from 'react';
 
 import {IPreviewComponentProps, IVocabularyItem} from 'superdesk-api';
+import {SimpleList, SimpleListItem, Label} from 'superdesk-ui-framework/react';
 
-export class VocabularyPreview extends React.PureComponent<IPreviewComponentProps<IVocabularyItem>> {
+export class VocabularyPreview extends React.PureComponent<IPreviewComponentProps<IVocabularyItem | Array<IVocabularyItem>>> {
     render() {
         return (
             <div className="form__row form__row--small-padding">
-                <p className="sd-text__normal">
-                    {this.props.value.name}
-                </p>
+                {!Array.isArray(this.props.value) ? (
+                    <p className="sd-text__normal">
+                        {this.props.value.name}
+                    </p>
+                ) : (
+                    <SimpleList>
+                        {this.props.value.map((value) => (
+                            <SimpleListItem>
+                                {value.qcode == null ? null : (
+                                    <Label
+                                        text={value.qcode}
+                                        style="translucent"
+                                    />
+                                )}
+                                <p className="sd-text__normal sd-whitespace--normal">
+                                    {value.name}
+                                </p>
+
+                            </SimpleListItem>
+                        ))}
+                    </SimpleList>
+                )}
             </div>
         );
     }

diff --git a/client/extensions/tga-author-profile-fields/src/components/vocab/typeaheadEditor.tsx b/client/extensions/tga-author-profile-fields/src/components/vocab/typeaheadEditor.tsx
@@ -1,12 +1,14 @@
 import * as React from 'react';
 
-import {ILiveResourcesProps, IRestApiResponse, IVocabulary, IVocabularyItem} from 'superdesk-api';
+import {ILiveResourcesProps, IRestApiResponse, IVocabulary, IVocabularyItem, IEditorComponentProps} from 'superdesk-api';
 import {superdesk} from '../../superdesk';
-import {IVocabularyFieldProps} from './interfaces';
 
-import {Autocomplete} from "superdesk-ui-framework/react";
+import {Autocomplete} from 'superdesk-ui-framework/react';
+import {IVocabularyFieldConfig} from "./interfaces";
 
 
+type IVocabularyFieldValue = IVocabularyItem | null | undefined;
+type IVocabularyFieldProps = IEditorComponentProps<IVocabularyFieldValue, IVocabularyFieldConfig>
 const NEW_ITEM_PREFIX = '_new:';
 
 export class VocabularyTypeaheadField extends React.PureComponent<IVocabularyFieldProps> {