Planning authoring-react fields

client/components/fields/editor/CustomVocabularies.tsx

@@ -9,14 +9,16 @@ import {getVocabularyItemFieldTranslated} from '../../../utils/vocabularies';
 import {arrayToTree} from 'superdesk-core/scripts/core/helpers/tree';
 import {TreeSelect} from 'superdesk-ui-framework/react';
 
-interface IProps extends IEditorFieldProps {
+export interface ICustomVocabulariesProps extends IEditorFieldProps {
     schema?: IProfileSchemaTypeList;
+}
+
+interface IReduxStateProps {
     vocabularies: Array<IVocabulary>;
-    popupContainer?(): HTMLElement;
-    onPopupOpen?(): void;
-    onPopupClose?(): void;
 }
 
+type IProps = ICustomVocabulariesProps & IReduxStateProps;
+
 const mapStateToProps = (state) => ({
     vocabularies: state.customVocabularies,
 });
@@ -93,4 +95,5 @@ class CustomVocabulariesComponent extends React.PureComponent<IProps> {
     }
 }
 
-export const EditorFieldCustomVocabularies = connect(mapStateToProps)(CustomVocabulariesComponent);
+export const EditorFieldCustomVocabularies =
+    connect<IReduxStateProps, {}, ICustomVocabulariesProps>(mapStateToProps)(CustomVocabulariesComponent);

client/components/planning-editor-standalone/profile.ts

@@ -39,6 +39,29 @@ function getTextFieldConfig(options: {id: string; label: string, required: boole
     return field;
 }
 
+function getCustomVocabulariesConfig(options: {
+    id: string;
+    label: string;
+    required: boolean;
+    vocabIds: Array<string>
+}): IAuthoringFieldV2 {
+    const customVocabulariesConfig = {
+        vocabularyIds: options.vocabIds,
+    };
+
+    const field: IAuthoringFieldV2 = {
+        id: options.id,
+        name: options.label,
+        fieldType: 'custom_vocabularies',
+        fieldConfig: {
+            required: options.required,
+            ...customVocabulariesConfig,
+        },
+    };
+
+    return field;
+}
+
 function getDateTimeField(options: {id: string; label: string, required: boolean}): IAuthoringFieldV2 {
     const config: IDateTimeFieldConfig = {
         allowSeconds: false,
@@ -168,6 +191,7 @@ export function getFieldDefinitions(): IFieldDefinitions {
 }
 
 export function getProfile() {
+    const {gettext} = superdeskApi.localization;
     const planningProfile = planningApi.contentProfiles.get('planning');
     const planningGroups = getEditorFormGroupsFromProfile(planningProfile);
     const planningFieldIds = Object.values(planningGroups).flatMap(({fields}) => fields);
@@ -186,7 +210,17 @@ export function getProfile() {
     for (const fieldId of planningFieldIds) {
         const required = planningProfile.schema?.[fieldId]?.required ?? false;
 
-        if (fieldDefinitions[fieldId] != null) {
+        if (fieldId === 'custom_vocabularies') {
+            profileV2.header = profileV2.header.set(
+                fieldId,
+                getCustomVocabulariesConfig({
+                    id: fieldId,
+                    label: gettext('Custom Vocabularies'),
+                    required: required,
+                    vocabIds: planningProfile.schema?.[fieldId]?.vocabularies,
+                })
+            );
+        } else if (fieldDefinitions[fieldId] != null) {
             profileV2.header = profileV2.header.set(
                 fieldId,
                 fieldDefinitions[fieldId].getField({id: fieldId, required: required}),

client/extension_bridge.ts

@@ -18,6 +18,7 @@ import {isContentLinkToCoverageAllowed} from './utils/archive';
 import PlanningDetailsWidget, {getItemPlanningInfo} from './components/PlanningDetailsWidget';
 import {AttachmentsInputStandalone} from './components/AttachmentsInputStandalone';
 import {IPropsAttachmentsEditorStandalone} from './components/AttachmentsInputStandalone.interface';
+import {EditorFieldCustomVocabularies, ICustomVocabulariesProps} from './components/fields/editor/CustomVocabularies';
 
 // KEEP IN SYNC WITH client/planning-extension/src/extension_bridge.ts
 interface IExtensionBridge {
@@ -54,6 +55,7 @@ interface IExtensionBridge {
         };
 
         components: {
+            EditorFieldCustomVocabularies: React.ComponentType<ICustomVocabulariesProps>;
             EditorFieldVocabulary: React.ComponentType<IEditorFieldVocabularyProps>;
             PlanningDetailsWidget: React.ComponentType<{item: {assignment_id: string}}>;
             AttachmentsInputStandalone: React.ComponentType<IPropsAttachmentsEditorStandalone>;
@@ -98,6 +100,7 @@ export const extensionBridge: IExtensionBridge = {
             isContentLinkToCoverageAllowed,
         },
         components: {
+            EditorFieldCustomVocabularies,
             EditorFieldVocabulary,
             PlanningDetailsWidget,
             AttachmentsInputStandalone,

client/planning-extension/src/authoring-react-fields/custom-vocabularies/editor.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import {IEditorComponentProps} from 'superdesk-api';
+import {extensionBridge} from '../../extension_bridge';
+import {ICustomVocabulariesValueOperational} from './interfaces';
+import {ICustomVocabulariesConfig} from '.';
+import {cloneDeep, set} from 'lodash';
+
+type IProps = IEditorComponentProps<ICustomVocabulariesValueOperational, ICustomVocabulariesConfig, never>;
+
+export class Editor extends React.PureComponent<IProps> {
+    render() {
+        const Container = this.props.container;
+        const {EditorFieldCustomVocabularies} = extensionBridge.ui.components;
+
+        return (
+            <Container>
+                <EditorFieldCustomVocabularies
+                    field='custom_vocabularies'
+                    item={this.props.item}
+                    onChange={(fieldPath, value) => {
+                        const valueCopy = cloneDeep(this.props.value ?? []);
+
+                        if (typeof fieldPath == 'string') {
+                            set(valueCopy, fieldPath, value);
+                        }
+
+                        this.props.onChange(valueCopy);
+                    }}
+                    schema={{
+                        required: this.props.config.required ?? false,
+                        vocabularies: this.props.config.vocabularyIds,
+                        type: 'list',
+                    }}
+                />
+            </Container>
+        );
+    }
+}

client/planning-extension/src/authoring-react-fields/custom-vocabularies/index.ts

@@ -0,0 +1,34 @@
+import {ICommonFieldConfig, ICustomFieldType, IDropdownValue, IVocabulary} from 'superdesk-api';
+import {gettext} from 'superdesk-core/scripts/core/utils';
+import {Editor} from './editor';
+import {Preview} from './preview';
+import {ICustomVocabulariesValueOperational} from './interfaces';
+
+export interface ICustomVocabulariesConfig extends ICommonFieldConfig {
+    vocabularyIds: Array<IVocabulary['_id']>;
+    multiple: boolean;
+    filter?(vocabulary: any): boolean;
+}
+
+interface CustomVocabulariesFieldType extends ICustomFieldType<
+    ICustomVocabulariesValueOperational,
+    ICustomVocabulariesValueOperational,
+    ICustomVocabulariesConfig,
+    never
+> { }
+
+export function getCustomVocabulariesField(): CustomVocabulariesFieldType {
+    const field: CustomVocabulariesFieldType = {
+        id: 'custom_vocabularies',
+        generic: true,
+        label: gettext('Custom Vocabularies'),
+        editorComponent: Editor,
+        previewComponent: Preview,
+        hasValue: (valueOperational: IDropdownValue) => Array.isArray(valueOperational)
+            ? valueOperational.length > 0
+            : valueOperational != null,
+        getEmptyValue: () => [],
+    };
+
+    return field;
+}

client/planning-extension/src/authoring-react-fields/custom-vocabularies/interfaces.ts

@@ -0,0 +1,6 @@
+import {ICommonFieldConfig, IVocabulary} from 'superdesk-api';
+
+export type ICustomVocabulariesValueOperational = Array<IVocabulary['_id']>;
+export type ICustomVocabulariesValueStorage = ICustomVocabulariesValueOperational;
+export type ICustomVocabulariesFieldUserPreferences = never;
+export type ICustomVocabulariesFieldConfig = ICommonFieldConfig;

client/planning-extension/src/authoring-react-fields/custom-vocabularies/preview.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import {IPreviewComponentProps} from 'superdesk-api';
+import {ICustomVocabulariesValueOperational} from './interfaces';
+import {ICustomVocabulariesConfig} from '.';
+
+type IProps = IPreviewComponentProps<ICustomVocabulariesValueOperational, ICustomVocabulariesConfig>;
+
+export class Preview extends React.PureComponent<IProps> {
+    render() {
+        // not implemented
+        return null;
+    }
+}

client/planning-extension/src/extension.ts

@@ -21,6 +21,7 @@ import {
 } from './planning-details-widget';
 import {getAttachmentsField} from './authoring-react-fields/planning-attachments';
 import {AssignmentsCountTracker} from './assignments-overview/hiddenAssignmentsList';
+import {getCustomVocabulariesField} from './authoring-react-fields/custom-vocabularies';
 
 function onSpike(superdesk: ISuperdesk, item: IArticle) {
     const {gettext} = superdesk.localization;
@@ -255,6 +256,7 @@ const extension: IExtension = {
                 globalMenuHorizontal: [AssignmentsCountTracker, ...(displayTopbarWidget ? [AssignmentsList] : [])],
                 customFieldTypes: [
                     getAttachmentsField(),
+                    getCustomVocabulariesField(),
                 ],
             },
         };

client/planning-extension/src/extension_bridge.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {IArticle, IVocabularyItem} from 'superdesk-api';
 import {IAssignmentItem, IEditorFieldProps, IPlanningAppState, IPlanningItem} from '../../interfaces';
 import {IPropsAttachmentsEditorStandalone} from '../../components/AttachmentsInputStandalone.interface';
+import {ICustomVocabulariesProps} from '../../components/fields/editor/CustomVocabularies';
 
 interface IEditorFieldVocabularyProps extends IEditorFieldProps {
     options: Array<any>;
@@ -47,6 +48,7 @@ interface IExtensionBridge {
             isContentLinkToCoverageAllowed(item: IArticle): boolean;
         };
         components: {
+            EditorFieldCustomVocabularies: React.ComponentType<ICustomVocabulariesProps>;
             EditorFieldVocabulary: React.ComponentType<IEditorFieldVocabularyProps>;
             PlanningDetailsWidget: React.ComponentType<{item: {assignment_id: string}}>;
             AttachmentsInputStandalone: React.ComponentType<IPropsAttachmentsEditorStandalone>;