Port coverage changes (#2058)

client/components/Assignments/AssignmentEditor.tsx

@@ -301,6 +301,7 @@ export class AssignmentEditorComponent extends React.Component {
  <Row style={{padding: '2rem 0', margin: '0 0 1.8em 0'}}>
  <div data-test-id={this.FIELDS.USER}>
  <SelectUser
+ deskId={this.props.value.assigned_to?.desk ?? null}
  selectedUserId = {this.state.userId}
  onSelect={(user) => {
  this.onUserChange(null, user);

client/components/Planning/PlanningDateTime.tsx

@@ -1,10 +1,23 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {get} from 'lodash';
 import moment from 'moment';
 import {planningUtils} from '../../utils/index';
 import {MAIN} from '../../constants';
 import {CoverageIcons} from '../Coverages/CoverageIcons';
+import {IDesk, IUser} from 'superdesk-api';
+import {IPlanningItem} from 'interfaces';
+
+interface IProps {
+ item: IPlanningItem;
+ date?: string;
+ users?: Array<IUser>;
+ desks?: Array<IDesk>;
+ activeFilter?: string;
+ contentTypes?: Array<any>;
+ includeScheduledUpdates?: boolean;
+ contacts?: any;
+ filterLanguage?: string;
+}
 
 export const PlanningDateTime = ({
  item,
@@ -15,14 +28,20 @@ export const PlanningDateTime = ({
  contentTypes,
  includeScheduledUpdates,
  contacts,
-}) => {
+ filterLanguage,
+}: IProps) => {
  const coverages = get(item, 'coverages', []);
  const coverageTypes = planningUtils.mapCoverageByDate(coverages);
  const hasAssociatedEvent = !!get(item, 'event_item');
  const isSameDay = (scheduled) => scheduled && (date == null || moment(scheduled).format('YYYY-MM-DD') === date);
  const coverageToDisplay = coverageTypes.filter((coverage) => {
  const scheduled = get(coverage, 'planning.scheduled');
 
+ // Display only the coverages that match the active filter language
+ if (filterLanguage !== '' && filterLanguage != null && coverage.planning.language != filterLanguage) {
+ return false;
+ }
+
  if (includeScheduledUpdates && get(coverage, 'scheduled_updates.length') > 0) {
  for (let i = 0; i < coverage.scheduled_updates.length; i++) {
  if (isSameDay(coverage.scheduled_updates[i].planning.scheduled)) {
@@ -53,14 +72,3 @@ export const PlanningDateTime = ({
  />
  );
 };
-
-PlanningDateTime.propTypes = {
- item: PropTypes.object.isRequired,
- date: PropTypes.string,
- users: PropTypes.array,
- desks: PropTypes.array,
- activeFilter: PropTypes.string,
- contentTypes: PropTypes.array,
- includeScheduledUpdates: PropTypes.bool,
- contacts: PropTypes.object,
-};

client/components/Planning/PlanningItem.tsx

@@ -286,6 +286,7 @@ class PlanningItemComponent extends React.Component<IProps, IState> {
  activeFilter,
  contentTypes,
  contacts,
+ filterLanguage,
  })}
  </Row>
  </Column>

client/components/UI/List/Column.tsx

@@ -7,7 +7,26 @@ import classNames from 'classnames';
  * @name Column
  * @description Column Component of a list item
  */
-export const Column = ({children, grow, border, noPadding, hasCheck, checked, className}) => (
+
+interface IProps {
+ children: Array<JSX.Element> | JSX.Element;
+ grow?: boolean;
+ border?: boolean;
+ noPadding?: boolean;
+ hasCheck?: boolean;
+ checked?: boolean;
+ className?: string;
+}
+
+export const Column = ({
+ children,
+ grow = false,
+ border = true,
+ noPadding = false,
+ hasCheck = false,
+ checked,
+ className,
+}: IProps) => (
  <div
  className={classNames(
  'sd-list-item__column',
@@ -24,20 +43,3 @@ export const Column = ({children, grow, border, noPadding, hasCheck, checked, cl
  {children}
  </div>
 );
-
-Column.propTypes = {
- children: PropTypes.node.isRequired,
- grow: PropTypes.bool,
- border: PropTypes.bool,
- noPadding: PropTypes.bool,
- hasCheck: PropTypes.bool,
- checked: PropTypes.bool,
- className: PropTypes.string,
-};
-
-Column.defaultProps = {
- grow: false,
- border: true,
- noPadding: false,
- hasCheck: false,
-};

client/components/UI/List/Row.tsx

@@ -1,13 +1,21 @@
-import React from 'react';
+import React, {CSSProperties} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+interface IProps {
+ children: Array<JSX.Element> | JSX.Element;
+ classes?: string;
+ paddingBottom?: boolean;
+ testId?: string;
+ style?: CSSProperties;
+}
+
 /**
  * @ngdoc react
  * @name Row
  * @description Row Component in a list of item where each item is a row
  */
-export const Row = ({children, classes, paddingBottom, testId, style}) => (
+export const Row = ({children, classes = '', paddingBottom, testId, style}: IProps) => (
  <div
  className={classNames(
  'sd-list-item__row',
@@ -22,19 +30,3 @@ export const Row = ({children, classes, paddingBottom, testId, style}) => (
  {children}
  </div>
 );
-
-Row.propTypes = {
- children: PropTypes.node.isRequired,
- classes: PropTypes.string,
- margin: PropTypes.bool,
- marginTop: PropTypes.bool,
- paddingBottom: PropTypes.bool,
- testId: PropTypes.string,
- style: PropTypes.object,
-};
-
-Row.defaultProps = {
- classes: '',
- margin: true,
- marginTop: false,
-};

client/components/fields/coverages.tsx

@@ -11,8 +11,10 @@ export const coverages = ({
  activeFilter,
  contentTypes,
  contacts,
+ filterLanguage,
 }) => (
  <PlanningDateTime
+ filterLanguage={filterLanguage}
  item={item}
  date={date}
  users={users}
@@ -33,4 +35,5 @@ coverages.propTypes = {
  activeFilter: PropTypes.string,
  contentTypes: PropTypes.array,
  contacts: PropTypes.object,
+ filterLanguage: PropTypes.string,
 };

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

@@ -81,26 +81,37 @@ function getLanguagesForCoverage(
  };
 }
 
-export class EmbeddedCoverageFormComponent extends React.PureComponent<IProps> {
+interface IState {
+ selectedDeskId?: string;
+}
+
+export class EmbeddedCoverageFormComponent extends React.PureComponent<IProps, IState> {
  constructor(props) {
  super(props);
 
+ this.state = {
+ selectedDeskId: null,
+ };
+
  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 || deskId == ''
+ ? null
+ : this.props.desks.find((desk) => desk._id === deskId);
 
  const updates: Partial<ICoverageDetails> = {
  desk: newDesk,
  filteredUsers: getUsersForDesk(newDesk, this.props.users),
+ user: null,
  };
 
  if ((this.props.coverage.language ?? '').length < 1) {
- updates.language = newDesk.desk_language;
+ updates.language = newDesk?.desk_language ?? null;
  }
 
  this.props.update(updates);
@@ -155,7 +166,7 @@ export class EmbeddedCoverageFormComponent extends React.PureComponent<IProps> {
  error={this.props.errors?.desk}
  >
  <Option />
- {coverage.filteredDesks.map(
+ {this.props.desks.map(
  (desk) => (
  <Option
  key={desk._id}
@@ -174,9 +185,11 @@ export class EmbeddedCoverageFormComponent extends React.PureComponent<IProps> {
  style={{padding: '2rem 0'}}
  >
  <SelectUser
+ deskId={coverage.desk?._id}
  onSelect={(user) => {
  this.onUserChange(null, user);
  }}
+ selectedUserId={coverage.user?._id ?? null}
  autoFocus={false}
  horizontalSpacing={true}
  clearable={true}
@@ -191,7 +204,7 @@ export class EmbeddedCoverageFormComponent extends React.PureComponent<IProps> {
  value={language}
  onChange={(item) => this.onLanguageChange(item)}
  >
- <Option />
+ <Option value={null} />
  {allLanguages.map(
  (language) => (
  <Option