Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Templates modal implementation #1909

Merged
merged 7 commits into from
Feb 12, 2024
Merged

Templates modal implementation #1909

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
baf92d2
Templates modal implementation
thecalcc Feb 8, 2024
c806755
Various improvements, UI WIP
thecalcc Feb 8, 2024
f68ea45
Improve comment
thecalcc Feb 8, 2024
80e148b
Changes after review, dropdown implementation
thecalcc Feb 9, 2024
22be35f
Merge branch 'develop' into templates-modal-implementation
thecalcc Feb 9, 2024
24dce25
Fix gettext
thecalcc Feb 12, 2024
41d66d9
Merge branch 'develop' into templates-modal-implementation
thecalcc Feb 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 45 additions & 6 deletions client/components/Main/CreateNewSubnavDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@ import React from 'react';
import {connect} from 'react-redux';

import {superdeskApi} from '../../superdeskApi';
import {IEventTemplate} from '../../interfaces';
import {ICalendar, IEventTemplate} from '../../interfaces';

import {PRIVILEGES} from '../../constants';
import * as actions from '../../actions';
import {eventTemplates} from '../../selectors/events';
import {Dropdown, IDropdownItem} from '../UI/SubNav';
import {showModal} from '@superdesk/common';
import PlanningTemplatesModal from '../PlanningTemplatesModal/PlanningTemplatesModal';

interface IProps {
addEvent(): void;
Expand All @@ -16,8 +18,11 @@ interface IProps {
privileges: {[key: string]: number};
createEventFromTemplate(template: IEventTemplate): void;
eventTemplates: Array<IEventTemplate>;
calendars: Array<ICalendar>;
}

const MORE_TEMPLATES_THRESHOLD = 5;

class CreateNewSubnavDropdownFn extends React.PureComponent<IProps> {
render() {
const {gettext} = superdeskApi.localization;
Expand All @@ -43,15 +48,48 @@ class CreateNewSubnavDropdownFn extends React.PureComponent<IProps> {
id: 'create_event',
});

this.props.eventTemplates.forEach((template) => {
/**
* Sort the templates by their name.
*/
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) => {
items.push({
label: template.template_name,
icon: 'icon-event icon--blue',
group: gettext('From template'),
action: () => createEventFromTemplate(template),
id: template._id,
});
});

/**
* 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: template.template_name,
label: gettext('More templates...'),
icon: 'icon-event icon--blue',
group: gettext('From template'),
action: () => createEventFromTemplate(template),
id: template._id,
action: () => {
showModal(({closeModal}) => (
<PlanningTemplatesModal
createEventFromTemplate={createEventFromTemplate}
closeModal={closeModal}
calendars={this.props.calendars}
eventTemplates={sortedTemplates}
/>
));
},
id: 'more_templates',
});
});
}
}

return items.length === 0 ? null : (
Expand Down Expand Up @@ -79,6 +117,7 @@ class CreateNewSubnavDropdownFn extends React.PureComponent<IProps> {

function mapStateToProps(state) {
return {
calendars: state.events.calendars,
eventTemplates: eventTemplates(state),
};
}
Expand Down
109 changes: 109 additions & 0 deletions client/components/PlanningTemplatesModal/PlanningTemplatesModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
import {ICalendar, IEventTemplate} from '../../interfaces';
import React from 'react';
import {SearchBar, Modal, TreeSelect} from 'superdesk-ui-framework/react';
import {superdeskApi} from '../../superdeskApi';
import {TemplatesListView} from './TemplatesListView';

interface IProps {
closeModal: () => void;
calendars: Array<ICalendar>;
eventTemplates: Array<IEventTemplate>;
createEventFromTemplate(template: IEventTemplate): void;
}

interface IState {
activeCalendarFilter?: string;
searchQuery: string;
}

export default class PlanningTemplatesModal extends React.Component<IProps, IState> {
constructor(props) {
super(props);

this.state = {
activeCalendarFilter: null,
searchQuery: '',
};
}

render(): React.ReactNode {
const {gettext} = superdeskApi.localization;
const {closeModal, createEventFromTemplate, calendars, eventTemplates} = this.props;

return (
<Modal
headerTemplate={gettext('Planning templates')}
visible
contentPadding="medium"
contentBg="medium"
size="medium"
onHide={closeModal}
>
<div className="modal__sticky-header">
<SearchBar
value={this.state.searchQuery}
onSubmit={(value: string) => {
this.setState({
searchQuery: value,
});
}}
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>
</SearchBar>
<TemplatesListView
calendars={calendars}
createEventFromTemplate={createEventFromTemplate}
eventTemplates={eventTemplates}
searchQuery={this.state.searchQuery}
activeCalendarFilter={this.state.activeCalendarFilter}
closeModal={closeModal}
/>
</div>
</Modal>
);
}
}
75 changes: 75 additions & 0 deletions client/components/PlanningTemplatesModal/TemplatesListView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import {ICalendar, IEventTemplate} from 'interfaces';
import React from 'react';
import {gettext} from 'superdesk-core/scripts/core/utils';
import {Heading, BoxedList, BoxedListItem} from 'superdesk-ui-framework/react';

type ITemplatesListViewProps = {
closeModal: () => void;
eventTemplates: Array<IEventTemplate>;
calendars: Array<ICalendar>;
activeCalendarFilter?: string;
searchQuery: string;
createEventFromTemplate: (template: IEventTemplate) => void;
}

export const TemplatesListView: React.FC<ITemplatesListViewProps> = ({
eventTemplates,
calendars,
closeModal,
activeCalendarFilter,
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))
}))
.filter((group) => activeCalendarFilter
? group.calendar.qcode === activeCalendarFilter
: group.templates.length > 0
);

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>
)
}

</React.Fragment>
))
}
</>
);
};
Loading
Loading