diff --git a/client/components/Main/CreateNewSubnavDropdown.tsx b/client/components/Main/CreateNewSubnavDropdown.tsx index f617b9c6f..3d605a8d6 100644 --- a/client/components/Main/CreateNewSubnavDropdown.tsx +++ b/client/components/Main/CreateNewSubnavDropdown.tsx @@ -54,9 +54,6 @@ class CreateNewSubnavDropdownFn extends React.PureComponent { 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 { }); }); - /** - * 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 index 7653b7e7a..1a17f714e 100644 --- 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 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 ( -
- this.state.activeCalendarFilter === qcode)] - : [] - } - kind="synchronous" - labelHidden - inlineLabel - getOptions={() => calendars.map((calendar) => ({value: calendar}))} - getLabel={(item) => item.name} - getId={(item) => item.qcode} - placeholder={( -
- {gettext('All Calendars')} -
- )} - optionTemplate={(item: any) =>
{item.name}
} - valueTemplate={(item: any, Wrapper) => ( -
- - {gettext('Calendar')}: {item.name} - -
- )} - onChange={([value]) => { - this.setState({ - activeCalendarFilter: value?.qcode, - searchQuery: '', - }); - }} - /> -
+ + {dropdownLabel} + = ({ 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 = ({ return ( <> - { - filteredTemplates.map(({calendar, templates}) => ( - - {calendar.name} - { - templates.length > 0 ? ( - - {templates.map((template) => ( - { - createEventFromTemplate(template); - closeModal(); - }} - > - {template.template_name} - - ))} - - ) : ( - - {gettext('No templates available in this calendar group.')} - - ) - } + {filteredTemplates.map(({calendar, templates}) => ( + + {calendar.name} + { + templates?.length > 0 ? ( + + {templates.map((template) => ( + { + createEventFromTemplate(template); + closeModal(); + }} + > + {template.template_name} + + ))} + + ) : ( + + {gettext('No templates available in this calendar group.')} + + ) + } - - )) - } + + ))} + {activeCalendarFilter == null && searchQuery && filteredTemplates.length === 0 && ( +
+ + {gettext('No templates found.')} + +
+ )} ); }; diff --git a/package-lock.json b/package-lock.json index 86e1773c5..af6e1d254 100644 --- a/package-lock.json +++ b/package-lock.json @@ -195,9 +195,9 @@ }, "dependencies": { "csstype": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "dev": true }, "dom-helpers": { @@ -243,9 +243,9 @@ }, "dependencies": { "tslib": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz", - "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==", + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", "dev": true } } @@ -294,9 +294,9 @@ } }, "@types/enzyme-adapter-react-16": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/@types/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.6.tgz", - "integrity": "sha512-VonDkZ15jzqDWL8mPFIQnnLtjwebuL9YnDkqeCDYnB4IVgwUm0mwKkqhrxLL6mb05xm7qqa3IE95m8CZE9imCg==", + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@types/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.9.tgz", + "integrity": "sha512-z24MMxGtUL8HhXdye3tWzjp+19QTsABqLaX2oOZpxMPHRJgLfahQmOeTTrEBQd9ogW20+UmPBXD9j+XOasFHvw==", "dev": true, "requires": { "@types/enzyme": "*" @@ -16764,9 +16764,9 @@ } }, "superdesk-ui-framework": { - "version": "3.0.71", - "resolved": "https://registry.npmjs.org/superdesk-ui-framework/-/superdesk-ui-framework-3.0.71.tgz", - "integrity": "sha512-JF3pnmLWUnWXougST9fuwAQaQjMD2VzdvnNVOBm3wnytOmUUJC1cUaWUIouVabuHS3J74yZNLugO3TU9FhruPg==", + "version": "3.0.72", + "resolved": "https://registry.npmjs.org/superdesk-ui-framework/-/superdesk-ui-framework-3.0.72.tgz", + "integrity": "sha512-uIMC0nCGldfUirlu9FXBkOfJHtMScEL6AJgy5tJLZrOzYaBLWxb2ZLtEpCMboTnpUuoPwBtYpNkt3FMNjQpwug==", "dev": true, "requires": { "@material-ui/lab": "^4.0.0-alpha.56", diff --git a/package.json b/package.json index 8a00044fe..c9d70f1cd 100644 --- 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"