add language field inside of coverage (#1835)

client/components/fields/editor/EventRelatedPlannings/AddNewCoverages.tsx

@@ -8,7 +8,8 @@ import {
     IPlanningCoverageItem,
     IPlanningItem,
     IPlanningNewsCoverageStatus,
-    IPlanningConfig
+    IPlanningConfig,
+    IPlanningContentProfile
 } from '../../../../interfaces';
 import {IDesk, IUser} from 'superdesk-api';
 
@@ -24,6 +25,7 @@ const appConfig = config.appConfig as IPlanningConfig;
 interface IProps {
     event: IEventItem;
     item: DeepPartial<IPlanningItem>;
+    profile: IPlanningContentProfile;
     contentTypes: Array<IG2ContentType>;
     newsCoverageStatus: Array<IPlanningNewsCoverageStatus>;
     desks: Array<IDesk>;
@@ -182,6 +184,14 @@ class AddNewCoveragesComponent extends React.Component<IProps, IState> {
                     desk: coverage.desk?._id,
                 };
 
+                if (coverage.language != null) {
+                    if (newCoverage.planning == null) {
+                        newCoverage.planning = {};
+                    }
+
+                    newCoverage.planning.language = coverage.language;
+                }
+
                 if (coverage.status) {
                     newCoverage.news_coverage_status = coverage.status;
                 }
@@ -247,6 +257,8 @@ class AddNewCoveragesComponent extends React.Component<IProps, IState> {
                                 remove={this.removeCoverage}
                                 desks={this.props.desks}
                                 users={this.props.users}
+                                event={this.props.event}
+                                profile={this.props.profile}
                             />
                         ))}
                     </Group>

client/components/fields/editor/EventRelatedPlannings/CoverageRowForm.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import {IDesk, IUser} from 'superdesk-api';
-import {IG2ContentType, IPlanningNewsCoverageStatus} from '../../../../interfaces';
+import {IEventItem, IG2ContentType, IPlanningContentProfile, IPlanningNewsCoverageStatus} from '../../../../interfaces';
 
 import {planningUtils} from '../../../../utils';
 import {getVocabularyItemFieldTranslated} from '../../../../utils/vocabularies';
@@ -21,6 +21,7 @@ export interface ICoverageDetails {
     filteredUsers: Array<IUser>;
     popupContainer?: any;
     status: IPlanningNewsCoverageStatus;
+    language?: string;
 }
 
 interface IProps {
@@ -34,6 +35,8 @@ interface IProps {
     remove(index: number): void;
     desks: Array<IDesk>;
     users: Array<IUser>;
+    event: IEventItem;
+    profile: IPlanningContentProfile;
 }
 
 function getCoverageIconName(type: IG2ContentType): string {
@@ -129,6 +132,8 @@ export class CoverageRowForm extends React.PureComponent<IProps> {
                         desks={this.props.desks}
                         users={this.props.users}
                         update={this.update}
+                        event={this.props.event}
+                        profile={this.props.profile}
                     />
                 )}
             </div>

client/components/fields/editor/EventRelatedPlannings/EmbeddedCoverageForm.tsx

@@ -1,17 +1,23 @@
 import * as React from 'react';
+import {connect} from 'react-redux';
 
-import {IDesk, IUser} from 'superdesk-api';
-import {IPlanningNewsCoverageStatus, IPlanningConfig} from '../../../../interfaces';
+import {IDesk, IUser, IVocabularyItem} from 'superdesk-api';
+import {
+    IPlanningNewsCoverageStatus,
+    IPlanningConfig,
+    IPlanningContentProfile,
+    IEventItem
+} from '../../../../interfaces';
 import {ICoverageDetails} from './CoverageRowForm';
-import {superdeskApi} from '../../../../superdeskApi';
-
+import {superdeskApi, planningApi} from '../../../../superdeskApi';
 import {getDesksForUser, getUsersForDesk} from '../../../../utils';
-
 import {Select, Option} from 'superdesk-ui-framework/react';
 import * as List from '../../../UI/List';
 import {Row, SelectUserInput} from '../../../UI/Form';
 import {EditorFieldNewsCoverageStatus} from '../NewsCoverageStatus';
 import * as config from 'appConfig';
+import {getLanguagesForTreeSelectInput} from '../../../../selectors/vocabs';
+
 const appConfig = config.appConfig as IPlanningConfig;
 
 interface IProps {
@@ -20,32 +26,88 @@ interface IProps {
     errors?: {desk?: string};
     desks: Array<IDesk>;
     users: Array<IUser>;
+    languages: Array<{value: IVocabularyItem}>;
+    event: IEventItem;
+    profile: IPlanningContentProfile;
 
     update(updates: Partial<ICoverageDetails>): void;
 }
 
-export class EmbeddedCoverageForm extends React.PureComponent<IProps> {
+/**
+* return all languages or only ones that satisfy multilingual scheme
+*/
+function getLanguagesForCoverage(
+    profile: IPlanningContentProfile,
+    allLanguages: Array<{value: IVocabularyItem}>,
+    event: IEventItem,
+    coverage: ICoverageDetails,
+): {
+    allLanguages: Array<{value: IVocabularyItem}>;
+    language: string;
+} {
+    const {multilingual} = planningApi.contentProfiles;
+
+    const isMultilingual = multilingual.isEnabled(profile);
+
+    const schemaLanguages = multilingual.getLanguages(profile);
+
+    const languages = isMultilingual
+        ? allLanguages.filter((language) => (
+            schemaLanguages.includes(language.value.qcode)
+        ))
+        : allLanguages;
+
+    const coverageLanguage = languages.find((qcode) => (
+        coverage.language === qcode.value.qcode
+    ));
+
+    const language = (() => {
+        if (isMultilingual) {
+            return event.languages.find((qcode) => (
+                coverageLanguage?.value?.qcode === qcode
+            ));
+        } else {
+            return event.language === coverageLanguage?.value?.qcode
+                ? coverageLanguage.value.qcode
+                : undefined;
+        }
+    })();
+
+    return {
+        allLanguages: languages,
+        language: language,
+    };
+}
+
+export class EmbeddedCoverageFormComponent extends React.PureComponent<IProps> {
     constructor(props) {
         super(props);
 
         this.onDeskChange = this.onDeskChange.bind(this);
         this.onStatusChange = this.onStatusChange.bind(this);
         this.onUserChange = this.onUserChange.bind(this);
+        this.onLanguageChange = this.onLanguageChange.bind(this);
     }
 
     onDeskChange(deskId?: IDesk['_id']) {
-        const newDesk = deskId == null ?
-            null :
-            this.props.desks.find((desk) => desk._id === deskId);
+        const newDesk = deskId == null ? null : this.props.desks.find((desk) => desk._id === deskId);
 
         const updates: Partial<ICoverageDetails> = {
             desk: newDesk,
             filteredUsers: getUsersForDesk(newDesk, this.props.users),
         };
 
+        if ((this.props.coverage.language ?? '').length < 1) {
+            updates.language = newDesk.desk_language;
+        }
+
         this.props.update(updates);
     }
 
+    onLanguageChange(language: string) {
+        this.props.update({language: language});
+    }
+
     onStatusChange(field: string, status: IPlanningNewsCoverageStatus) {
         this.props.update({status: status});
     }
@@ -63,6 +125,13 @@ export class EmbeddedCoverageForm extends React.PureComponent<IProps> {
         const {gettext} = superdeskApi.localization;
         const {coverage} = this.props;
 
+        const {allLanguages, language} = getLanguagesForCoverage(
+            this.props.profile,
+            this.props.languages,
+            this.props.event,
+            this.props.coverage,
+        );
+
         return (
             <List.Item shadow={1} className="sd-margin-t--0">
                 <List.Column
@@ -110,6 +179,27 @@ export class EmbeddedCoverageForm extends React.PureComponent<IProps> {
                             />
                         </Row>
                     </List.Row>
+                    <List.Row>
+                        <Row>
+                            <Select
+                                label={gettext('Language:')}
+                                value={language}
+                                onChange={(item) => this.onLanguageChange(item)}
+                            >
+                                <Option />
+                                {allLanguages.map(
+                                    (language) => (
+                                        <Option
+                                            key={language.value.qcode}
+                                            value={language.value.qcode}
+                                        >
+                                            {language.value.name}
+                                        </Option>
+                                    )
+                                )}
+                            </Select>
+                        </Row>
+                    </List.Row>
                     <List.Row>
                         <EditorFieldNewsCoverageStatus
                             testId="status"
@@ -125,3 +215,9 @@ export class EmbeddedCoverageForm extends React.PureComponent<IProps> {
         );
     }
 }
+
+const mapStateToProps = (state) => ({
+    languages: getLanguagesForTreeSelectInput(state),
+});
+
+export const EmbeddedCoverageForm = connect(mapStateToProps)(EmbeddedCoverageFormComponent);

client/components/fields/editor/EventRelatedPlannings/EventRelatedPlannings.tsx

@@ -84,6 +84,7 @@ export class EditorFieldEventRelatedPlannings extends React.PureComponent<IProps
                                     addCoverageToWorkflow={this.props.addCoverageToWorkflow}
                                     disabled={false}
                                     editorType={this.props.editorType}
+                                    profile={this.props.profile}
                                 />
                             ))
                         )}

client/components/fields/editor/EventRelatedPlannings/RelatedPlanningItem.tsx

@@ -1,7 +1,14 @@
 import * as React from 'react';
 import {set} from 'lodash';
 
-import {EDITOR_TYPE, IEventItem, IG2ContentType, IPlanningCoverageItem, IPlanningItem} from '../../../../interfaces';
+import {
+    EDITOR_TYPE,
+    IEventItem,
+    IG2ContentType,
+    IPlanningContentProfile,
+    IPlanningCoverageItem,
+    IPlanningItem
+} from '../../../../interfaces';
 import {superdeskApi} from '../../../../superdeskApi';
 
 import {TEMP_ID_PREFIX} from '../../../../constants';
@@ -19,6 +26,7 @@ interface IProps {
     index: number;
     disabled: boolean;
     editorType: EDITOR_TYPE;
+    profile: IPlanningContentProfile;
     removePlan(item: DeepPartial<IPlanningItem>): void;
     updatePlanningItem(
         original: DeepPartial<IPlanningItem>,
@@ -140,6 +148,7 @@ export class RelatedPlanningItem extends React.PureComponent<IProps> {
                             event={this.props.event}
                             item={item}
                             updatePlanningItem={this.update}
+                            profile={this.props.profile}
                         />
                     </Row>
                 )}