Sort calendar items alphabetically, add a no-calendar group to handle…

… templates without calendars field data (#1914)
superdesk · Feb 13, 2024 · 3300dbe · 3300dbe
1 parent 0b747b4
commit 3300dbe
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/client/components/PlanningTemplatesModal/PlanningTemplatesModal.tsx b/client/components/PlanningTemplatesModal/PlanningTemplatesModal.tsx
@@ -30,7 +30,7 @@ export default class PlanningTemplatesModal extends React.Component<IProps, ISta
         const {gettext} = superdeskApi.localization;
         const {closeModal, createEventFromTemplate, calendars, eventTemplates} = this.props;
         const allCalendarsLabel = gettext('All Calendars');
-        const calendarDropdownItems = [];
+        const calendarDropdownItems: Array<{label: string; onSelect: () => void;}> = [];
         const activeCalendarName = this.props.calendars
             .find((cal) => cal.qcode === this.state.activeCalendarFilter)?.name;
         const dropdownLabel = this.state.activeCalendarFilter
@@ -85,7 +85,7 @@ export default class PlanningTemplatesModal extends React.Component<IProps, ISta
                             maxHeight={300}
                             append
                             zIndex={2001}
-                            items={calendarDropdownItems}
+                            items={calendarDropdownItems.sort((cal1, cal2) => cal1.label.localeCompare(cal2.label))}
                         >
                             {dropdownLabel}
                         </Dropdown>

diff --git a/client/components/PlanningTemplatesModal/TemplatesListView.tsx b/client/components/PlanningTemplatesModal/TemplatesListView.tsx
@@ -30,8 +30,17 @@ export const TemplatesListView: React.FC<ITemplatesListViewProps> = ({
         .map((_calendar) => ({
             calendar: _calendar,
             templates: searchQueryTemplateMatches
-                .filter((template) => template.data.calendars.find(({qcode}) => qcode === _calendar.qcode)),
+                .filter((template) => (template.data.calendars ?? []).find(({qcode}) => qcode === _calendar.qcode)),
         }))
+        .concat({
+            calendar: {
+                name: gettext('No calendar'),
+                qcode: 'no-calendar',
+            },
+
+            // Get the templates without calendar
+            templates: searchQueryTemplateMatches.filter((template) => (template.data.calendars?.length ?? 0) < 1)
+        })
         .filter((group) => activeCalendarFilter
             ? group.calendar.qcode === activeCalendarFilter
             : group.templates.length > 0