show selected custom CVs values in preview (#3278)

* display cv values in preview if enabled in profile

SDANSA-362

scripts/apps/archive/directives/MediaPreview.ts

@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import {checkRenditions} from 'apps/authoring/authoring/controllers/AssociationController';
+import {IArticleField} from 'superdesk-api';
 
 /**
  * @ngdoc directive
@@ -25,20 +26,28 @@ export function MediaPreview(api, $rootScope, desks, superdesk, content, storage
         link: function(scope, elem) {
             const PREVIEW_HEADER_STATE = 'item_preview:header_state';
 
+            const setSubjectPreviewFields = () => {
+                scope.subjectPreviewFields = content.previewFields(scope.editor, scope.fields)
+                    .filter((field: IArticleField) => field.field_type == null);
+            };
+
             scope.checkRenditions = checkRenditions;
             scope.previewState = {toggleHeader: false};
             if (scope.selected.preview.profile) {
                 content.getType(scope.selected.preview.profile)
                     .then((type) => {
                         scope.editor = content.editor(type);
                         scope.fields = content.fields(type);
+                        setSubjectPreviewFields();
                     });
             } else {
                 content.getCustomFields().then(() => {
                     scope.editor = content.editor(null, scope.selected.preview.type);
                     scope.fields = content.fields({editor: scope.editor});
+                    setSubjectPreviewFields();
                 });
             }
+
             // prevent dragging from preview
             elem.on('dragstart', () => false);
 

scripts/apps/archive/views/preview.html

@@ -45,6 +45,9 @@
               <span ng-if="item._type === 'archived'" class="stage" tooltip="{{:: 'Archived from' | translate}} {{deskName}} / {{ stage }}" tooltip-placement="bottom" ng-show="stage"><b>{{:: 'Archived from' | translate}} {{deskName}}</b> / {{ stage }}</span>
               <span ng-if="item._type !== 'archived'" class="stage" tooltip="{{deskName}} / {{ stage }}" tooltip-placement="bottom" ng-show="stage"><b>{{deskName}}</b> / {{ stage }}</span>
             </div>
+            <div class="preview-header__flex-row preview-header__flex-row--single-line" ng-if="subjectPreviewFields.length">
+              <sd-preview-subject item="item" fields="subjectPreviewFields"></sd-preview-subject>
+            </div>
           </div>
           <div class="preview-header__side-block">
             <div class="preview-header__flex-row" ng-if="item.type === 'text'">

scripts/apps/authoring/authoring/authoring-custom-field.spec.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import {mount} from 'enzyme';
 import {AuthoringCustomField} from './authoring-custom-field';
-import {ICustomFieldType, IEditorComponentProps, IArticle} from 'superdesk-api';
+import {ICustomFieldType, IEditorComponentProps, IArticle, IVocabulary} from 'superdesk-api';
 import {registerInternalExtension, unregisterInternalExtension} from 'core/helpers/register-internal-extension';
 import {testArticle} from 'test-data/test-article';
 import {testVocabulary} from 'test-data/test-vocabulary';
-import {IVocabulary} from 'superdesk-interfaces/Vocabulary';
 
 const vocabularyId = 'vocabulary_id';
 

scripts/apps/authoring/authoring/authoring-custom-field.tsx

@@ -2,14 +2,13 @@ import React from 'react';
 import {get, throttle, Cancelable} from 'lodash';
 
 import {getField} from 'apps/fields';
-import {IArticle} from 'superdesk-api';
-import {IVocabulary} from 'superdesk-interfaces/Vocabulary';
+import {IArticle, IArticleField} from 'superdesk-api';
 
 interface IProps {
     item: IArticle;
-    field: IVocabulary;
+    field: IArticleField;
     editable: boolean;
-    onChange: (field: IVocabulary, value: any) => any;
+    onChange: (field: IArticleField, value: any) => any;
 }
 
 // IProps['onChange'] updates the item asynchronously
@@ -25,7 +24,7 @@ function getValue(props: IProps) {
 }
 
 export class AuthoringCustomField extends React.PureComponent<IProps, IState> {
-    onChangeThrottled: ((field: IVocabulary, value: any) => void) & Cancelable;
+    onChangeThrottled: ((field: IArticleField, value: any) => void) & Cancelable;
 
     // IProps['item'] is mutated when updating so prevProps from `componentDidUpdate`
     // can't be used to compare the previous value. This property is used instead.
@@ -40,7 +39,7 @@ export class AuthoringCustomField extends React.PureComponent<IProps, IState> {
 
         this.lastPropsValue = this.state.value;
 
-        this.onChangeThrottled = throttle((field: IVocabulary, value: any) => {
+        this.onChangeThrottled = throttle((field: IArticleField, value: any) => {
             this.props.onChange(field, value);
         }, 300, {leading: false});
 

scripts/apps/authoring/authoring/preview-custom-field.tsx

@@ -2,12 +2,11 @@ import React from 'react';
 import {get, isEmpty} from 'lodash';
 
 import {getField} from 'apps/fields';
-import {IArticle} from 'superdesk-api';
-import {IVocabulary} from 'superdesk-interfaces/Vocabulary';
+import {IArticle, IArticleField} from 'superdesk-api';
 
 interface IProps {
     item: IArticle;
-    field: IVocabulary;
+    field: IArticleField;
 }
 
 export class PreviewCustomField extends React.PureComponent<IProps> {

scripts/apps/relations/directives/RelatedItemsDirective.ts

@@ -1,16 +1,14 @@
-import {get} from 'lodash';
 import {getSuperdeskType} from 'core/utils';
 import {gettext} from 'core/utils';
 import {AuthoringWorkspaceService} from 'apps/authoring/authoring/services/AuthoringWorkspaceService';
-import {IArticle} from 'superdesk-api';
-import {IVocabulary} from 'superdesk-interfaces/Vocabulary';
+import {IArticle, IArticleField} from 'superdesk-api';
 import {IDirectiveScope} from 'types/Angular/DirectiveScope';
 
 const ARCHIVE_TYPES = ['archive', 'published'];
 const isInArchive = (item: IArticle) => item._type != null && ARCHIVE_TYPES.includes(item._type);
 
 interface IScope extends IDirectiveScope<void> {
-    field: IVocabulary;
+    field: IArticleField;
     editable: boolean;
     item: IArticle;
     loading: boolean;

scripts/apps/relations/services/RelationsService.ts

@@ -1,7 +1,6 @@
 import {pickBy, zipObject} from 'lodash';
-import {IArticle} from 'superdesk-api';
+import {IArticle, IArticleField} from 'superdesk-api';
 import {isPublished} from 'apps/archive/utils';
-import {IVocabulary} from 'superdesk-interfaces/Vocabulary';
 
 const RELATED_LINK_KEYS = 2; // links only have _id and type keys (and some old ones only _id)
 const isLink = (association) => association != null && Object.keys(association).length <= RELATED_LINK_KEYS;
@@ -59,7 +58,7 @@ export function RelationsService(mediaIdGenerator, api, $q) {
         };
     };
 
-    this.itemHasAllowedStatus = function(item: IArticle, field: IVocabulary) {
+    this.itemHasAllowedStatus = function(item: IArticle, field: IArticleField) {
         const ALLOWED_WORKFLOWS = field?.field_options?.allowed_workflows || this.getDefaultAllowedWorkflows();
 
         return (ALLOWED_WORKFLOWS.published === true && isPublished(item)) ||

scripts/apps/search/components/preview-subject.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {IArticle, IArticleField} from 'superdesk-api';
+
+interface IProps {
+    item: IArticle;
+    fields: Array<IArticleField>;
+}
+
+export class PreviewSubject extends React.PureComponent<IProps> {
+    render() {
+        if (this.props.item.subject == null) {
+            return null;
+        }
+
+        const subjects = [];
+
+        this.props.fields.forEach((field) => {
+            this.props.item.subject
+                .filter((subj) => subj.scheme === field._id && subj.name)
+                .forEach((subj) => {
+                    subjects.push(
+                        <span key={subj.scheme + ':' + subj.qcode}
+                            className="tag-label"
+                            title={subj.name} // longer names might not fit the area
+                        >{subj.name}</span>,
+                    );
+                });
+        });
+
+        if (subjects.length === 0) {
+            return null;
+        }
+
+        return subjects;
+    }
+}

scripts/apps/search/directives/SavedSearchEditOwnSubscription.ts

@@ -1,8 +1,7 @@
 import {ISavedSearch, updateSubscribers, unsubscribeUser, IUserSubscription} from '../SavedSearch';
 import {IDirectiveScope} from 'types/Angular/DirectiveScope';
 import {CronTimeInterval} from 'types/DataStructures/TimeInterval';
-import {IUser} from 'superdesk-api';
-import {IVocabulary} from 'superdesk-interfaces/Vocabulary';
+import {IUser, IVocabulary} from 'superdesk-api';
 
 interface IScope extends IDirectiveScope<void> {
     vocabularies: Array<IVocabulary>;

scripts/apps/search/index.ts

@@ -10,6 +10,7 @@ import {gettext} from 'core/utils';
 import {MultiActionBarReact} from 'apps/monitoring/MultiActionBarReact';
 import {reactToAngular1} from 'superdesk-ui-framework';
 import {SearchPanelWidgets} from './components/search-panel-widgets';
+import {PreviewSubject} from './components/preview-subject';
 
 angular.module('superdesk.apps.search.react', [
     'superdesk.apps.highlights',
@@ -83,6 +84,13 @@ angular.module('superdesk.apps.search', [
         ),
     )
 
+    .component('sdPreviewSubject',
+        reactToAngular1(
+            PreviewSubject,
+            ['item', 'fields', 'editor'],
+        ),
+    )
+
     .directive('sdMultiActionBar', directive.MultiActionBar)
     .directive('sdRawSearch', directive.RawSearch)
     .directive('sdRepoDropdown', directive.RepoDropdown)

scripts/apps/vocabularies/controllers/VocabularyConfigController.ts

@@ -1,5 +1,5 @@
 import {MEDIA_TYPES, MEDIA_TYPE_KEYS, DEFAULT_SCHEMA, VOCABULARY_SELECTION_TYPES} from '../constants';
-import {IVocabulary, IVocabularyTag} from 'superdesk-interfaces/Vocabulary';
+import {IVocabulary, IVocabularyTag} from 'superdesk-api';
 import {IDirectiveScope} from 'types/Angular/DirectiveScope';
 import {remove, reduce} from 'lodash';
 import {gettext} from 'core/utils';

scripts/apps/vocabularies/controllers/VocabularyEditController.ts

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import {MEDIA_TYPES, MEDIA_TYPE_KEYS, VOCABULARY_SELECTION_TYPES, IVocabularySelectionTypes} from '../constants';
 import {gettext} from 'core/utils';
 import {getFields} from 'apps/fields';
-import {IVocabulary} from 'superdesk-interfaces/Vocabulary';
+import {IVocabulary} from 'superdesk-api';
 import {IScope as IScopeConfigController} from './VocabularyConfigController';
 
 VocabularyEditController.$inject = [

scripts/apps/vocabularies/custom-field-configs.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {IVocabulary} from 'superdesk-interfaces/Vocabulary';
+import {IVocabulary} from 'superdesk-api';
 import {getField} from 'apps/fields';
 
 export class CustomFieldConfigs extends React.PureComponent<{vocabulary: IVocabulary, onChange(config): void}> {

scripts/apps/workspace/content/directives/ContentProfileSchemaEditor.ts

@@ -1,11 +1,12 @@
 import {includes} from 'lodash';
 import {getLabelForFieldId} from '../../helpers/getLabelForFieldId';
 import {appConfig} from 'appConfig';
+import {IArticleField} from 'superdesk-api';
 
 interface IScope extends ng.IScope {
     getEditor3FormattingOptions: (fieldName: string) => Array<string>;
     model: any;
-    fields: any;
+    fields: {[key: string]: IArticleField};
     form: any;
     formattingOptions: Array<string>;
     schemaKeysOrdering: any;
@@ -23,6 +24,7 @@ interface IScope extends ng.IScope {
     onOrderUpdate(locals: { key: string; }): any;
     onDrag(locals: { start: number; end: number; key: string; }): any;
     onToggle(locals: { key: string; dest: string; position: string; }): any;
+    showPreviewConfig(field: IArticleField): boolean;
 }
 
 const HAS_PLAINTEXT_FORMATTING_OPTIONS = Object.freeze({
@@ -197,6 +199,10 @@ export function ContentProfileSchemaEditor(vocabularies) {
             vocabularies.getVocabularies().then((vocabulariesCollection) => {
                 scope.label = (id) => getLabelForFieldId(id, vocabulariesCollection);
             });
+
+            // enable preview config for CVs
+            // we display other fields by default already
+            scope.showPreviewConfig = (field) => field != null && field.field_type == null;
         },
     };
 }

scripts/apps/workspace/content/services/ContentService.ts

@@ -2,8 +2,8 @@ import * as constant from '../constants';
 import {get, omit, isEmpty, zipObject} from 'lodash';
 import {gettext} from 'core/utils';
 import {isMediaEditable} from 'core/config';
-import {IArticle} from 'superdesk-api';
 import {appConfig} from 'appConfig';
+import {IArticle, IContentProfileEditorConfig, IArticleField} from 'superdesk-api';
 
 /**
  * @ngdoc service
@@ -271,6 +271,13 @@ export function ContentService(api, templates, desks, packages, archiveService,
         return this._fields ? this._fields.filter((field) => !!editor[field._id]) : [];
     };
 
+    /**
+     * Get fields with preview enabled
+     */
+    this.previewFields = (editor: IContentProfileEditorConfig, fields: Array<IArticleField>): Array<IArticleField> =>
+        editor == null || fields == null ? []
+            : fields.filter((field) => editor[field._id] != null && editor[field._id].preview);
+
     /**
      * Get profiles selected for given desk
      *

scripts/apps/workspace/content/views/schema-editor.html

@@ -57,6 +57,11 @@
                         </select>
                     </div>
 
+                    <div class="field" ng-if="showPreviewConfig(fields[id])">
+                        <label translate>Show in preview</label>
+                        <div sd-check ng-model="model.editor[id].preview"></div>
+                    </div>
+
                     <div class="field" ng-if="model.schema[id].type === 'string'">
                         <label translate>Clean Pasted HTML</label>
                         <div sd-check ng-model="model.editor[id].cleanPastedHTML"></div>

scripts/apps/workspace/helpers/getTypeForFieldId.ts

@@ -1,4 +1,4 @@
-import {IVocabulary} from 'superdesk-interfaces/Vocabulary';
+import {IArticleField} from 'superdesk-api';
 import {gettext} from 'core/utils';
 
 const TYPE_LABEL = {
@@ -9,15 +9,15 @@ const TYPE_LABEL = {
     related_content: gettext('related content'),
 };
 
-export const getLabelForType = (fieldType: IVocabulary['field_type']) => {
+export const getLabelForType = (fieldType: IArticleField['field_type']) => {
     if (TYPE_LABEL.hasOwnProperty(fieldType)) {
         return TYPE_LABEL[fieldType];
     }
 
     return gettext('custom vocabulary');
 };
 
-export const getTypeForFieldId = (fieldId, vocabularies: Array<IVocabulary>) => {
+export const getTypeForFieldId = (fieldId, vocabularies: Array<IArticleField>) => {
     const vocabulary = vocabularies.find((obj) => obj._id === fieldId);
 
     if (vocabulary && vocabulary.field_type) {