[SDBELGA-785] Improve: Support sorting of the Calendar field (#1984)

* [SDBELGA-785] Improve: Support sorting of the Calendar field

* fix e2e

client/components/ContentProfiles/FieldTab/FieldEditor.tsx

@@ -196,6 +196,7 @@ export class FieldEditor extends React.Component<IProps, IState> {
  item: this.props.item,
  onChange: this.onChange,
  errors: this.state.errors,
+ showErrors: true,
  },
  fieldProps
  )}

client/components/fields/editor/base/treeSelect.tsx

@@ -15,6 +15,7 @@ export interface IEditorFieldTreeSelectProps<T = any> extends IEditorFieldProps
  allowMultiple?: boolean;
  valueAsString?: boolean;
  smallPadding?: boolean;
+ sortable?: boolean;
 }
 
 export class EditorFieldTreeSelect<T> extends React.PureComponent<IEditorFieldTreeSelectProps<T>> {
@@ -45,7 +46,9 @@ export class EditorFieldTreeSelect<T> extends React.PureComponent<IEditorFieldTr
  let viewValues;
  const options = this.props.getOptions();
 
- if (!Array.isArray(values)) {
+ if (values == null) {
+ values = [];
+ } else if (!Array.isArray(values)) {
  values = [values];
  }
 
@@ -75,14 +78,15 @@ export class EditorFieldTreeSelect<T> extends React.PureComponent<IEditorFieldTr
  onChange={this.onChange}
  allowMultiple={this.props.allowMultiple}
  invalid={error?.length > 0 || this.props.invalid}
- error={error}
+ error={this.props.showErrors ? error : undefined}
  readOnly={this.props.disabled}
  disabled={this.props.disabled}
  required={this.props.required}
  label={this.props.label}
  tabindex={0}
  info={this.props.info}
  zIndex={1051}
+ sortable={this.props.sortable}
  />
  </Row>
  );

client/components/fields/editor/index.tsx

@@ -20,7 +20,6 @@ import {EditorFieldFullText} from './FullText';
 import {EditorFieldLanguage} from './Language';
 import {EditorFieldIncludeKilled} from './IncludeKilled';
 import {EditorFieldLockState} from './LockState';
-import {EditorFieldCalendars} from './Calendars';
 import {EditorFieldAgendas} from './Agendas';
 import {EditorFieldNoCalendarAssigned} from './NoCalendarAssigned';
 import {EditorFieldExcludeRescheduledAndCancelled} from './ExcludeRescheduledAndCancelled';
@@ -101,7 +100,6 @@ export const FIELD_TO_EDITOR_COMPONENT = {
  language: EditorFieldLanguage,
  include_killed: EditorFieldIncludeKilled,
  lock_state: EditorFieldLockState,
- calendars: EditorFieldCalendars,
  agendas: EditorFieldAgendas,
  no_calendar_assigned: EditorFieldNoCalendarAssigned,
  exclude_rescheduled_and_cancelled: EditorFieldExcludeRescheduledAndCancelled,

client/components/fields/resources/events.ts

@@ -1,11 +1,16 @@
 import {registerEditorField} from './registerEditorFields';
 
+import {ICalendar} from '../../../interfaces';
 import {superdeskApi} from '../../../superdeskApi';
 
+import {getVocabularyItemNameFromString} from '../../../utils/vocabularies';
+import {enabledCalendars} from '../../../selectors/events';
+
 import {EditorFieldMultilingualText} from '../editor/base/multilingualText';
 import {EditorFieldDateTime} from '../editor/base/dateTime';
 import {EditorFieldEventLinks} from '../editor/EventLinks';
 import {EditorFieldEventRelatedItems} from '../editor/EventRelatedArticles/EditorFieldEventRelatedItems';
+import {EditorFieldTreeSelect, IEditorFieldTreeSelectProps} from '../editor/base/treeSelect';
 
 registerEditorField(
  'definition_long',
@@ -107,3 +112,31 @@ registerEditorField(
  null,
  false,
 );
+
+registerEditorField<IEditorFieldTreeSelectProps, {calendars: Array<ICalendar>}>(
+ 'calendars',
+ EditorFieldTreeSelect,
+ (props) => ({
+ field: 'calendars',
+ label: superdeskApi.localization.gettext('Calendars'),
+ required: props.required ?? props.schema?.required,
+ allowMultiple: true,
+ sortable: true,
+ getOptions: () => props.calendars.map((calendar) => ({value: calendar})),
+ getId: (item: ICalendar) => item.qcode,
+ getLabel: (item: ICalendar) => (
+ getVocabularyItemNameFromString(
+ item.qcode,
+ props.calendars,
+ 'qcode',
+ 'name',
+ props.language,
+ )
+ ),
+
+ }),
+ (state) => ({
+ calendars: enabledCalendars(state),
+ }),
+ false
+);