Planning: If multilingual Events or Planning items are filtered by la…

…nguage - show them in this language in the list views [SDESK-7060]
superdesk · Oct 12, 2023 · 779a465 · 779a465
1 parent a727285
commit 779a465
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 12 deletions.
diff --git a/client/components/Events/EventItem.tsx b/client/components/Events/EventItem.tsx
@@ -44,7 +44,8 @@ class EventItemComponent extends React.Component<IProps, IState> {
         return isItemDifferent(this.props, nextProps) ||
             this.state.hover !== nextState.hover ||
             this.props.minTimeWidth !== nextProps.minTimeWidth ||
-            this.props.lockedItems != nextProps.lockedItems;
+            this.props.lockedItems != nextProps.lockedItems ||
+            this.props.filterLanguage !== nextProps.filterLanguage;
     }
 
     onItemHoverOn() {
@@ -216,7 +217,7 @@ class EventItemComponent extends React.Component<IProps, IState> {
                     <Row>
                         <span className="sd-overflow-ellipsis sd-list-item--element-grow">
                             {renderFields(get(listFields, 'event.primary_fields',
-                                EVENTS.LIST.PRIMARY_FIELDS), item)}
+                                EVENTS.LIST.PRIMARY_FIELDS), item, this.props)}
                         </span>
                     </Row>
                     <Row>

diff --git a/client/components/Main/ListGroupItem.tsx b/client/components/Main/ListGroupItem.tsx
@@ -1,18 +1,19 @@
 import React from 'react';
 import {debounce, indexOf} from 'lodash';
-
+import {connect} from 'react-redux';
 import {
     IEventListItemProps,
     IPlanningListItemProps,
     IEventOrPlanningItem,
-    IEventItem, IPlanningItem, IBaseListItemProps
+    IEventItem, IPlanningItem, IBaseListItemProps, ISearchAPIParams
 } from '../../interfaces';
 
 import {EventItem, EventItemWithPlanning} from '../Events';
 import {PlanningItem} from '../Planning';
 
 import {ITEM_TYPE, EVENTS, PLANNING, MAIN, CLICK_DELAY} from '../../constants';
 import {getItemType, eventUtils} from '../../utils';
+import {currentSearchParams} from '../../selectors/search';
 
 interface IProps extends Omit<
     IEventListItemProps & IPlanningListItemProps,
@@ -33,13 +34,18 @@ interface IProps extends Omit<
     navigateList(increment?: boolean): void;
     onItemActivate(item: IEventItem, forceActivate?: boolean): void;
     onItemClick(index: number, item: IEventOrPlanningItem): void;
+    currentParams:ISearchAPIParams
 }
 
 interface IState {
     clickedOnce?: boolean;
 }
 
-export class ListGroupItem extends React.Component<IProps, IState> {
+const mapStateToProps = (state) => ({
+    currentParams: currentSearchParams(state),
+});
+
+class ListGroupComponent extends React.Component<IProps, IState> {
     dom: {item: HTMLElement};
     _delayedClick: any | undefined;
 
@@ -122,6 +128,7 @@ export class ListGroupItem extends React.Component<IProps, IState> {
             listViewType,
             sortField,
             minTimeWidth,
+            currentParams
         } = this.props;
         const itemType = getItemType(item);
 
@@ -151,6 +158,7 @@ export class ListGroupItem extends React.Component<IProps, IState> {
             ...itemProps,
             item: item as IEventItem,
             calendars: calendars,
+            filterLanguage: currentParams?.language,
             multiSelected: indexOf(selectedEventIds, item._id) !== -1,
             [EVENTS.ITEM_ACTIONS.EDIT_EVENT.actionName]:
                 itemActions[EVENTS.ITEM_ACTIONS.EDIT_EVENT.actionName],
@@ -193,6 +201,7 @@ export class ListGroupItem extends React.Component<IProps, IState> {
             contentTypes: contentTypes,
             agendas: agendas,
             date: date,
+            filterLanguage: currentParams?.language,
             onAddCoverageClick: onAddCoverageClick,
             multiSelected: indexOf(selectedPlanningIds, item._id) !== -1,
             showAddCoverage: showAddCoverage,
@@ -265,3 +274,5 @@ export class ListGroupItem extends React.Component<IProps, IState> {
         return null;
     }
 }
+
+export const ListGroupItem = connect(mapStateToProps)(ListGroupComponent);
diff --git a/client/components/Planning/PlanningItem.tsx b/client/components/Planning/PlanningItem.tsx
@@ -64,7 +64,8 @@ class PlanningItemComponent extends React.Component<IProps, IState> {
                 planningUtils.getAgendaNames(this.props.item, this.props.agendas),
                 planningUtils.getAgendaNames(nextProps.item, nextProps.agendas)
             ) ||
-            this.props.minTimeWidth !== nextProps.minTimeWidth;
+            this.props.minTimeWidth !== nextProps.minTimeWidth ||
+            this.props.filterLanguage !== nextProps.filterLanguage;
     }
 
     onItemHoverOn() {
@@ -235,7 +236,7 @@ class PlanningItemComponent extends React.Component<IProps, IState> {
                     <Row>
                         <span className="sd-overflow-ellipsis sd-list-item--element-grow">
                             {renderFields(get(listFields, 'planning.primary_fields',
-                                PLANNING.LIST.PRIMARY_FIELDS), item)}
+                                PLANNING.LIST.PRIMARY_FIELDS), item, this.props)}
                         </span>
 
                         {event && (

diff --git a/client/components/fields/headline.tsx b/client/components/fields/headline.tsx
@@ -1,9 +1,12 @@
 import PropTypes from 'prop-types';
+import {getTranslatedValue} from '.';
 
-export const headline = ({item}) => item.headline || null;
+export const headline = ({item, filterLanguage}) => getTranslatedValue(filterLanguage, item, 'headline') ||
+item.headline || null;
 
 headline.propTypes = {
     item: PropTypes.shape({
         headline: PropTypes.string,
     }).isRequired,
+    filterLanguage: PropTypes.string,
 };
diff --git a/client/components/fields/index.tsx b/client/components/fields/index.tsx
@@ -45,7 +45,7 @@ export function registerField(id, component) {
  * @param {Object} item
  * @param {Object} props
  */
-export function renderFields(fields, item, props = {}) {
+export function renderFields(fields, item, props = {filterLanguage: ''}) {
     const language = getUserInterfaceLanguageFromCV();
 
     return (Array.isArray(fields) ? fields : [fields]).map((id) => {
@@ -66,6 +66,23 @@ export function renderFields(fields, item, props = {}) {
     });
 }
 
+/**
+ * Get translated field value based on languagei
+ * @param {String} language
+ * @param {Object} item
+ * @param {String} fieldName
+ */
+export function getTranslatedValue(language, item, fieldName) {
+    if (item.translations) {
+        const matchingTranslation = item.translations.find(
+            (translation) => translation.field === fieldName && translation.language === language
+        );
+
+        return matchingTranslation ? matchingTranslation.value : null;
+    }
+    return null;
+}
+
 function getFieldsForPanel(panelType: IRenderPanelType) {
     switch (panelType) {
     case 'editor':

diff --git a/client/components/fields/name.tsx b/client/components/fields/name.tsx
@@ -1,9 +1,11 @@
 import PropTypes from 'prop-types';
+import {getTranslatedValue} from '.';
 
-export const name = ({item}) => item.name || null;
+export const name = ({item, filterLanguage}) => getTranslatedValue(filterLanguage, item, 'name') || item.name || null;
 
 name.propTypes = {
     item: PropTypes.shape({
         name: PropTypes.string,
     }).isRequired,
+    filterLanguage: PropTypes.string,
 };
diff --git a/client/components/fields/slugline.tsx b/client/components/fields/slugline.tsx
@@ -2,17 +2,22 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import {get} from 'lodash';
+import {getTranslatedValue} from '.';
 
-export const slugline = ({item}) => {
+export const slugline = ({item, filterLanguage}) => {
     if (!get(item, 'slugline', '')) {
         return null;
     }
 
-    return (<span className="sd-list-item__slugline">{item.slugline}</span>);
+    return (
+        <span className="sd-list-item__slugline">{getTranslatedValue(filterLanguage, item, 'slugline') ||
+    item.slugline}</span>
+    );
 };
 
 slugline.propTypes = {
     item: PropTypes.shape({
         slugline: PropTypes.string,
     }).isRequired,
+    filterLanguage: PropTypes.string,
 };
diff --git a/client/interfaces.ts b/client/interfaces.ts
@@ -855,6 +855,7 @@ export interface IBaseListItemProps<T> {
 export interface IEventListItemProps extends IBaseListItemProps<IEventItem> {
     relatedPlanningText?: string;
     calendars: Array<ICalendar>;
+    filterLanguage?: string;
     toggleRelatedPlanning?(event: React.MouseEvent): void;
 }
 
@@ -863,6 +864,7 @@ export interface IPlanningListItemProps extends IBaseListItemProps<IPlanningItem
     agendas: Array<IAgenda>;
     users: Array<IUser>;
     desks: Array<IDesk>;
+    filterLanguage?: string;
     // showUnlock?: boolean; // Is this used anymore?
     hideItemActions: boolean;
     showAddCoverage: boolean;