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

@@ -2,10 +2,8 @@ import {OrderedMap} from 'immutable';
 
 import {
     IAuthoringFieldV2,
-    ICommonFieldConfig,
     IContentProfileV2,
-    IDateFieldConfig,
-    IDropdownConfigManualSource,
+    IDateTimeFieldConfig,
     IDropdownConfigVocabulary,
     IEditor3Config,
     IVocabularyItem,
@@ -41,6 +39,47 @@ 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,
+    };
+
+    const field: IAuthoringFieldV2 = {
+        id: options.id,
+        name: options.label,
+        fieldType: 'datetime',
+        fieldConfig: {
+            ...config,
+            required: options.required,
+        },
+    };
+
+    return field;
+}
+
 interface IFieldDefinition {
     fieldId: string;
     getField: (options: {required: boolean, id: string}) => IAuthoringFieldV2;
@@ -87,6 +126,11 @@ export function getFieldDefinitions(): IFieldDefinitions {
         getField: ({required, id}) => getTextFieldConfig({id: id, label: gettext('Headline'), required: required}),
     });
 
+    result.push({
+        fieldId: 'planning_date',
+        getField: ({required, id}) => getDateTimeField({id: id, label: gettext('Planning date'), required: required}),
+    });
+
     result.push({
         fieldId: 'files',
         getField: ({required, id}) => {
@@ -147,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);
@@ -165,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}),
@@ -285,4 +340,17 @@ export function getProfile() {
 //     };
 
 //     profileV2.header = profileV2.header.set(categoryField.id, categoryField);
-// }
+// }
+//     else {
+//         skipped.push(fieldId);
+//     }
+// }
+
+//     profileV2.header.forEach((item) => {
+//         item.fieldConfig.width = 100;
+//     });
+
+//     console.log('skipped -------------------------------- ', skipped, superdeskApi.entities.vocabulary.getAll());
+
+//     return profileV2;
+// }

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,