Dateline field implemented in React

scripts/apps/authoring-react/data-layer.ts

@@ -17,7 +17,7 @@ import {generatePatch} from 'core/patch';
 import {appConfig} from 'appConfig';
 import {getLabelNameResolver} from 'apps/workspace/helpers/getLabelForFieldId';
 import {AutoSaveHttp} from './auto-save-http';
-import {omit} from 'lodash';
+import {isObject, omit} from 'lodash';
 import {AUTOSAVE_TIMEOUT} from 'core/constants';
 import {sdApi} from 'api';
 import {getArticleAdapter} from './article-adapter';
@@ -257,6 +257,15 @@ export const authoringStorageIArticle: IAuthoringStorage<IArticle> = {
 
             let diff = generatePatch(original, _current);
 
+            // Object patching is overriding fields of object type with diff.
+            // If we make changes to such a field it is not saved correctly.
+            // So we need to add all fields which are of object type to the diff object.
+            Object.keys(diff).forEach((key) => {
+                if (isObject(diff[key])) {
+                    diff[key] = _current[key];
+                }
+            });
+
             // when object has changes, send entire object to avoid server dropping keys
             if (diff.fields_meta != null) {
                 diff.fields_meta = _current.fields_meta;

scripts/apps/authoring-react/field-adapters/dateline.ts

@@ -0,0 +1,26 @@
+import {
+    IArticle,
+    IAuthoringFieldV2,
+    IFieldAdapter,
+} from 'superdesk-api';
+import {gettext} from 'core/utils';
+
+export const dateline: IFieldAdapter<IArticle> = {
+    getFieldV2: () => {
+        const fieldV2: IAuthoringFieldV2 = {
+            id: 'dateline',
+            name: gettext('Dateline'),
+            fieldType: 'dateline',
+            fieldConfig: null,
+        };
+
+        return fieldV2;
+    },
+
+    retrieveStoredValue: (item: IArticle) => item.dateline,
+
+    storeValue: (value, article) => ({
+        ...article,
+        dateline: value,
+    }),
+};

scripts/apps/authoring-react/field-adapters/index.tsx

@@ -47,6 +47,7 @@ import {ContentState, convertToRaw, RawDraftContentState} from 'draft-js';
 import {computeEditor3Output} from './utilities/compute-editor3-output';
 import {package_items} from './package_items';
 import {LINKED_ITEMS_FIELD_TYPE} from '../fields/linked-items';
+import {dateline} from './dateline';
 import {description_text} from './description_text';
 
 export function getBaseFieldsAdapter(): IFieldsAdapter<IArticle> {
@@ -71,6 +72,7 @@ export function getBaseFieldsAdapter(): IFieldsAdapter<IArticle> {
         urgency: urgency,
         usageterms: usageterms,
         groups: package_items,
+        dateline: dateline,
         description_text: description_text,
     };
 

scripts/apps/authoring-react/fields/dateline/difference.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {ICommonFieldConfig, IDatelineValueOperational, IDifferenceComponentProps} from 'superdesk-api';
+import {DifferenceGeneric} from '../difference-generic';
+
+type IProps = IDifferenceComponentProps<IDatelineValueOperational, ICommonFieldConfig>;
+
+export class Difference extends React.PureComponent<IProps> {
+    render() {
+        const {value1, value2} = this.props;
+
+        return (
+            <DifferenceGeneric
+                items1={[value1]}
+                items2={[value2]}
+                getId={(item) => JSON.stringify(item)}
+                template={({item}) => <span>{item}</span>}
+            />
+        );
+    }
+}

scripts/apps/authoring-react/fields/dateline/editor.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import ng from 'core/services/ng';
+import {DatePickerISO} from 'superdesk-ui-framework/react';
+import {
+    ICommonFieldConfig,
+    IDatelineUserPreferences,
+    IDatelineValueOperational,
+    IEditorComponentProps,
+} from 'superdesk-api';
+import {dateToServerString} from 'core/get-superdesk-api-implementation';
+import {getLocaleForDatePicker} from 'core/helpers/ui-framework';
+import {MultiSelectTreeWithTemplate} from 'core/ui/components/MultiSelectTreeWithTemplate';
+import {Spacer} from 'core/ui/components/Spacer';
+import {appConfig} from 'appConfig';
+
+type IProps = IEditorComponentProps<
+    IDatelineValueOperational,
+    ICommonFieldConfig,
+    IDatelineUserPreferences
+>;
+
+type ICancelFn = () => void;
+
+function searchOptions(
+    term: string,
+    callback: (res: any) => void,
+): ICancelFn {
+    const abortController = new AbortController();
+
+    ng.get('places').searchDateline(term, 'en', abortController.signal).then((res) => {
+        callback({
+            nodes: res.slice(0, 10).map((item) => ({value: item})),
+            lookup: {},
+        });
+    });
+
+    return () => abortController.abort();
+}
+
+export class Editor extends React.PureComponent<IProps> {
+    render() {
+        const Container = this.props.container;
+
+        return (
+            <Container>
+                <Spacer h gap="8" justifyContent="space-between" alignItems="center">
+                    <MultiSelectTreeWithTemplate
+                        allowMultiple={false}
+                        kind="asynchronous"
+                        searchOptions={(term, callback) => searchOptions(term, callback)}
+                        values={[this.props.value?.located]}
+                        onChange={([value]) => {
+                            this.props.onChange({
+                                ...this.props.value,
+                                located: value,
+                            });
+                        }}
+                        optionTemplate={
+                            ({item}) => item != null ? (
+                                <span>
+                                    {item?.city}<br />
+                                    <b>{item?.state}, {item?.country}</b>
+                                </span>
+                            ) : null
+                        }
+                        valueTemplate={
+                            ({item}) => item != null ? (
+                                <span>
+                                    {item?.city}
+                                </span>
+                            ) : null
+                        }
+                        getId={(option) => option?.city_code}
+                        getLabel={(item) => item?.city}
+                    />
+                    <DatePickerISO
+                        labelHidden
+                        inlineLabel
+                        value={this.props.value?.date}
+                        onChange={(dateString) => {
+                            this.props.onChange({
+                                ...this.props.value,
+                                date: dateToServerString(new Date(dateString)),
+                            });
+                        }}
+                        dateFormat={appConfig.view.dateformat}
+                        locale={getLocaleForDatePicker(this.props.language)}
+                        disabled={this.props.value?.located?.city == null}
+                    />
+                </Spacer>
+            </Container>
+        );
+    }
+}

scripts/apps/authoring-react/fields/dateline/index.tsx

@@ -0,0 +1,38 @@
+import {
+    ICommonFieldConfig,
+    ICustomFieldType,
+    IDatelineUserPreferences,
+    IDatelineValueOperational,
+    IDatelineValueStorage,
+} from 'superdesk-api';
+import {gettext} from 'core/utils';
+import {Editor} from './editor';
+import {Preview} from './preview';
+import {Difference} from './difference';
+
+export const DATELINE_FIELD_ID = 'dateline';
+
+type DatelineFieldType = ICustomFieldType<
+    IDatelineValueOperational,
+    IDatelineValueStorage,
+    ICommonFieldConfig,
+    IDatelineUserPreferences
+>;
+
+export function getDatelineField()
+: DatelineFieldType {
+    const field: DatelineFieldType = {
+        id: DATELINE_FIELD_ID,
+        label: gettext('Dateline (authoring-react)'),
+        editorComponent: Editor,
+        previewComponent: Preview,
+
+        hasValue: (valueOperational) => valueOperational != null,
+        getEmptyValue: () => null,
+
+        differenceComponent: Difference,
+        configComponent: () => null,
+    };
+
+    return field;
+}

scripts/apps/authoring-react/fields/dateline/preview.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {
+    IDatelineFieldConfig,
+    IDatelineValueOperational,
+    IPreviewComponentProps,
+} from 'superdesk-api';
+
+type IProps = IPreviewComponentProps<IDatelineValueOperational, IDatelineFieldConfig>;
+
+export class Preview extends React.PureComponent<IProps> {
+    render() {
+        if (this.props.value == null) {
+            return null;
+        }
+
+        return (
+            <div>{this.props.value}</div>
+        );
+    }
+}

scripts/apps/authoring-react/fields/register-fields.ts

@@ -14,6 +14,7 @@ import {getAttachmentsField} from './attachments';
 import {getTimeField} from './time';
 import {geDurationField} from './duration';
 import {getArticlesInPackageField} from './package-items';
+import {getDatelineField} from './dateline';
 
 export function registerAuthoringReactFields() {
     const result: IExtensionActivationResult = {
@@ -49,6 +50,7 @@ export function registerAuthoringReactFields() {
                 getLinkedItemsField(),
                 getAttachmentsField(),
                 getArticlesInPackageField(),
+                getDatelineField(),
             ],
         },
     };

scripts/apps/authoring/metadata/PlacesService.ts

@@ -1,4 +1,6 @@
+import {httpRequestJsonLocal} from 'core/helpers/network';
 import {omit} from 'lodash';
+import {IBaseRestApiResponse, ILocated, IRestApiResponse} from 'superdesk-api';
 
 export interface IGeoName {
     /** name of the place, eg. Prague */
@@ -27,31 +29,6 @@ export interface IGeoName {
     scheme: 'geonames';
 }
 
-interface ILocated {
-    /** dateline format - list of fields which should be used to identify the place */
-    dateline: 'city' | 'city,state' | 'city,country' | 'city,state,country';
-
-    city: string;
-    state: string;
-    country: string;
-
-    city_code: string;
-    state_code: string;
-    country_code: string;
-
-    /** timezone identifier, eg. Europe/Prague  */
-    tz: string;
-
-    /** scheme identifier */
-    scheme: string;
-
-    /** code for place in the scheme */
-    code: string;
-
-    /** geonames place data */
-    place?: IGeoName;
-}
-
 /**
  * Search service for populated places (city, village)
  */
@@ -78,7 +55,7 @@ export interface IPlacesService {
 
 PlacesServiceFactory.$inject = ['api', 'features', 'metadata'];
 export default function PlacesServiceFactory(api, features, metadata) {
-    const geonameToCity = (data: IGeoName): ILocated => ({
+    const geoNameToCity = (data: IGeoName): ILocated => ({
         dateline: 'city',
         country_code: data.country_code,
         tz: data.tz,
@@ -93,9 +70,9 @@ export default function PlacesServiceFactory(api, features, metadata) {
     });
 
     class PlacesService implements IPlacesService {
-        searchDateline(query: string, lang: string) {
-            return this._searchGeonames(query, lang, true)
-                .then((geonames) => geonames.map(geonameToCity))
+        searchDateline(query: string, lang: string, abortSignal?: AbortSignal) {
+            return this._searchGeonames(query, lang, true, abortSignal)
+                .then((geonames) => geonames.map((x) => geoNameToCity(x)))
                 .catch(() => this._searchCities(query));
         }
 
@@ -111,7 +88,7 @@ export default function PlacesServiceFactory(api, features, metadata) {
             );
         }
 
-        _searchGeonames(name: string, lang: string, dateline: boolean = false) {
+        _searchGeonames(name: string, lang: string, dateline: boolean = false, abortSignal?: AbortSignal) {
             const params = {name, lang};
 
             if (name == null || name.length === 0) {
@@ -124,7 +101,12 @@ export default function PlacesServiceFactory(api, features, metadata) {
             }
 
             return features.places_autocomplete
-                ? api.query('places_autocomplete', params)
+                ? httpRequestJsonLocal<IRestApiResponse<ILocated>>({
+                    method: 'GET',
+                    abortSignal: abortSignal,
+                    path: '/places_autocomplete',
+                    urlParams: params,
+                })
                     .then((response) => response._items.map((place) => omit(place, ['_created', '_updated', '_etag'])))
                 : Promise.reject();
         }

scripts/core/superdesk-api.d.ts

@@ -231,6 +231,43 @@ declare module 'superdesk-api' {
         shortcuts?: Array<IDateShortcut>;
     }
 
+    // AUTHORING-REACT FIELD TYPES - date
+
+    export interface ILocated {
+        /** dateline format - list of fields which should be used to identify the place */
+        dateline: 'city' | 'city,state' | 'city,country' | 'city,state,country';
+
+        city: string;
+        state: string;
+        country: string;
+
+        city_code: string;
+        state_code: string;
+        country_code: string;
+
+        /** timezone identifier, eg. Europe/Prague  */
+        tz: string;
+
+        /** scheme identifier */
+        scheme: string;
+
+        /** code for place in the scheme */
+        code: string;
+
+        /** geonames place data */
+        place?: IGeoName;
+    }
+
+    export type IDatelineValueOperational = {
+        date?: string;
+        source?: string;
+        located?: ILocated;
+        text?: string;
+    };
+    export type IDatelineValueStorage = IDatelineValueOperational;
+    export type IDatelineUserPreferences = never;
+    export interface IDatelineFieldConfig extends ICommonFieldConfig {}
+
     // AUTHORING-REACT FIELD TYPES - time
 
     export type ITimeValueOperational = string; // ISO 8601, 13:59:01.123