Changes after review, dropdown implementation

superdesk · Feb 9, 2024 · 80e148b · 80e148b
1 parent f68ea45
commit 80e148b
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 104 deletions.
diff --git a/client/components/Main/CreateNewSubnavDropdown.tsx b/client/components/Main/CreateNewSubnavDropdown.tsx
@@ -54,9 +54,6 @@ class CreateNewSubnavDropdownFn extends React.PureComponent<IProps> {
             const sortedTemplates = this.props.eventTemplates
                 .sort((templ1, templ2) => templ1.template_name.localeCompare(templ2.template_name));
 
-            /**
-             * Take the first @MORE_TEMPLATES_THRESHOLD templates and display them in the dropdown.
-             */
             sortedTemplates
                 .slice(0, MORE_TEMPLATES_THRESHOLD)
                 .forEach((template) => {
@@ -69,9 +66,6 @@ class CreateNewSubnavDropdownFn extends React.PureComponent<IProps> {
                     });
                 });
 
-            /**
-             * If there's no more than @MORE_TEMPLATES_THRESHOLD there's no need to show the button for more templates.
-             */
             if (sortedTemplates.length > MORE_TEMPLATES_THRESHOLD) {
                 items.push({
                     label: gettext('More templates...'),

diff --git a/client/components/PlanningTemplatesModal/PlanningTemplatesModal.tsx b/client/components/PlanningTemplatesModal/PlanningTemplatesModal.tsx
@@ -1,6 +1,6 @@
 import {ICalendar, IEventTemplate} from '../../interfaces';
 import React from 'react';
-import {SearchBar, Modal, TreeSelect} from 'superdesk-ui-framework/react';
+import {SearchBar, Modal, Dropdown} from 'superdesk-ui-framework/react';
 import {superdeskApi} from '../../superdeskApi';
 import {TemplatesListView} from './TemplatesListView';
 
@@ -29,6 +29,37 @@ export default class PlanningTemplatesModal extends React.Component<IProps, ISta
     render(): React.ReactNode {
         const {gettext} = superdeskApi.localization;
         const {closeModal, createEventFromTemplate, calendars, eventTemplates} = this.props;
+        const allCalendarsLabel = gettext('All Calendars');
+        const calendarDropdownItems = [];
+        const activeCalendarName = this.props.calendars
+            .find((cal) => cal.qcode === this.state.activeCalendarFilter)?.name;
+        const dropdownLabel = this.state.activeCalendarFilter
+            ? `${gettext('Calendar')}: ${activeCalendarName}`
+            : allCalendarsLabel;
+
+        if (this.state.activeCalendarFilter) {
+            calendarDropdownItems.push({
+                label: allCalendarsLabel,
+                onSelect: () => {
+                    this.setState({
+                        activeCalendarFilter: null,
+                    });
+                }
+            });
+        }
+
+        if ((calendars?.length ?? 0) > 0) {
+            calendarDropdownItems.push(
+                ...calendars.map((calendar) => ({
+                    label: calendar.name,
+                    onSelect: () => {
+                        this.setState({
+                            activeCalendarFilter: calendar.qcode,
+                        });
+                    }
+                }))
+            );
+        }
 
         return (
             <Modal
@@ -50,49 +81,14 @@ export default class PlanningTemplatesModal extends React.Component<IProps, ISta
                         placeholder={gettext('Search templates')}
                         boxed
                     >
-                        <div style={{width: 200}}>
-                            <TreeSelect
-                                fullWidth
-                                zIndex={3000}
-                                value={this.state.activeCalendarFilter
-                                    ? [this.props.calendars
-                                        .find(({qcode}) => this.state.activeCalendarFilter === qcode)]
-                                    : []
-                                }
-                                kind="synchronous"
-                                labelHidden
-                                inlineLabel
-                                getOptions={() => calendars.map((calendar) => ({value: calendar}))}
-                                getLabel={(item) => item.name}
-                                getId={(item) => item.qcode}
-                                placeholder={(
-                                    <div
-                                        style={{
-                                            height: '100%',
-                                            flexGrow: 1,
-                                            whiteSpace: 'nowrap',
-                                            alignContent: 'center',
-                                        }}
-                                    >
-                                        {gettext('All Calendars')}
-                                    </div>
-                                )}
-                                optionTemplate={(item: any) => <div>{item.name}</div>}
-                                valueTemplate={(item: any, Wrapper) => (
-                                    <div style={{height: '100%', flexGrow: 1, whiteSpace: 'nowrap'}}>
-                                        <Wrapper>
-                                            <span>{gettext('Calendar')}: {item.name}</span>
-                                        </Wrapper>
-                                    </div>
-                                )}
-                                onChange={([value]) => {
-                                    this.setState({
-                                        activeCalendarFilter: value?.qcode,
-                                        searchQuery: '',
-                                    });
-                                }}
-                            />
-                        </div>
+                        <Dropdown
+                            maxHeight={300}
+                            append
+                            zIndex={2001}
+                            items={calendarDropdownItems}
+                        >
+                            {dropdownLabel}
+                        </Dropdown>
                     </SearchBar>
                     <TemplatesListView
                         calendars={calendars}

diff --git a/client/components/PlanningTemplatesModal/TemplatesListView.tsx b/client/components/PlanningTemplatesModal/TemplatesListView.tsx
@@ -20,18 +20,17 @@ export const TemplatesListView: React.FC<ITemplatesListViewProps> = ({
     searchQuery,
     createEventFromTemplate,
 }: ITemplatesListViewProps) => {
-    /**
-     * Groups the templates by calendar,
-     * filters the templates that match the current search query,
-     * if a calendar is selected, the groups that match that calendar are filtered,
-     * if not the groups that that don't have any templates are filtered out.
-     */
-    const filteredTemplates = calendars
-        .map((calendar) => ({
-            calendar: calendar,
-            templates: eventTemplates
-                .filter((template) => template.data.calendars.map(({qcode}) => qcode).includes(calendar.qcode))
-                .filter((template) => template.template_name.includes(searchQuery))
+    const searchQueryTemplateMatches = eventTemplates
+        .filter((template) => template.template_name.includes(searchQuery));
+    const calendarsFiltered = activeCalendarFilter
+        ? [calendars.find(({qcode}) => activeCalendarFilter === qcode)]
+        : calendars;
+
+    const filteredTemplates = calendarsFiltered
+        .map((_calendar) => ({
+            calendar: _calendar,
+            templates: searchQueryTemplateMatches
+                .filter((template) => template.data.calendars.find(({qcode}) => qcode === _calendar.qcode)),
         }))
         .filter((group) => activeCalendarFilter
             ? group.calendar.qcode === activeCalendarFilter
@@ -40,36 +39,41 @@ export const TemplatesListView: React.FC<ITemplatesListViewProps> = ({
 
     return (
         <>
-            {
-                filteredTemplates.map(({calendar, templates}) => (
-                    <React.Fragment key={calendar.qcode}>
-                        <Heading type="h6" className="mt-2 mb-1">{calendar.name}</Heading>
-                        {
-                            templates.length > 0 ? (
-                                <BoxedList>
-                                    {templates.map((template) => (
-                                        <BoxedListItem
-                                            key={template._id}
-                                            clickable={true}
-                                            onClick={() => {
-                                                createEventFromTemplate(template);
-                                                closeModal();
-                                            }}
-                                        >
-                                            {template.template_name}
-                                        </BoxedListItem>
-                                    ))}
-                                </BoxedList>
-                            ) : (
-                                <BoxedListItem clickable={false}>
-                                    {gettext('No templates available in this calendar group.')}
-                                </BoxedListItem>
-                            )
-                        }
+            {filteredTemplates.map(({calendar, templates}) => (
+                <React.Fragment key={calendar.qcode}>
+                    <Heading type="h6" className="mt-2 mb-1">{calendar.name}</Heading>
+                    {
+                        templates?.length > 0 ? (
+                            <BoxedList>
+                                {templates.map((template) => (
+                                    <BoxedListItem
+                                        key={template._id}
+                                        clickable={true}
+                                        onClick={() => {
+                                            createEventFromTemplate(template);
+                                            closeModal();
+                                        }}
+                                    >
+                                        {template.template_name}
+                                    </BoxedListItem>
+                                ))}
+                            </BoxedList>
+                        ) : (
+                            <BoxedListItem clickable={false}>
+                                {gettext('No templates available in this calendar group.')}
+                            </BoxedListItem>
+                        )
+                    }
 
-                    </React.Fragment>
-                ))
-            }
+                </React.Fragment>
+            ))}
+            {activeCalendarFilter == null && searchQuery && filteredTemplates.length === 0 && (
+                <div className="mt-2 mb-1">
+                    <BoxedListItem clickable={false}>
+                        {gettext('No templates found.')}
+                    </BoxedListItem>
+                </div>
+            )}
         </>
     );
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -67,7 +67,7 @@
     "sinon": "^4.5.0",
     "superdesk-code-style": "1.5.0",
     "superdesk-core": "github:superdesk/superdesk-client-core#develop",
-    "superdesk-ui-framework": "^3.0.66",
+    "superdesk-ui-framework": "^3.0.72",
     "ts-node": "~7.0.1",
     "tslint": "5.11.0",
     "typescript-eslint-parser": "^18.0.0"