2022-04-01 18:05:26 +03:00
|
|
|
import Component from '@glimmer/component';
|
2022-04-20 13:08:48 +03:00
|
|
|
import ConfirmArchiveModal from '../../modals/edit-newsletter/confirm-archive';
|
2022-04-06 15:18:07 +03:00
|
|
|
import {action} from '@ember/object';
|
2022-04-01 18:05:26 +03:00
|
|
|
import {inject as service} from '@ember/service';
|
2022-04-04 21:26:49 +03:00
|
|
|
import {task} from 'ember-concurrency';
|
2022-04-06 15:18:07 +03:00
|
|
|
import {tracked} from '@glimmer/tracking';
|
2022-04-01 18:05:26 +03:00
|
|
|
|
|
|
|
export default class NewsletterManagementComponent extends Component {
|
2022-04-20 13:08:48 +03:00
|
|
|
@service modals;
|
2022-04-07 18:42:43 +03:00
|
|
|
@service router;
|
2022-04-20 13:08:48 +03:00
|
|
|
@service store;
|
2022-04-01 18:05:26 +03:00
|
|
|
|
2022-04-06 15:18:07 +03:00
|
|
|
@tracked statusFilter = 'active';
|
2022-04-07 18:42:43 +03:00
|
|
|
@tracked filteredNewsletters = [];
|
2022-04-06 15:18:07 +03:00
|
|
|
|
|
|
|
statusFilters = ['active', 'archived'];
|
2022-04-04 21:26:49 +03:00
|
|
|
newsletters = this.store.peekAll('newsletter');
|
|
|
|
|
|
|
|
constructor() {
|
|
|
|
super(...arguments);
|
|
|
|
this.loadNewslettersTask.perform();
|
2022-04-07 18:42:43 +03:00
|
|
|
|
|
|
|
this.router.on('routeDidChange', this.handleNewRouteChange);
|
|
|
|
}
|
|
|
|
|
|
|
|
willDestroy() {
|
|
|
|
super.willDestroy(...arguments);
|
|
|
|
this.router.off('routeDidChange', this.handleNewRouteChange);
|
2022-04-20 13:08:48 +03:00
|
|
|
|
|
|
|
this.confirmArchiveModal?.close();
|
2022-04-04 21:26:49 +03:00
|
|
|
}
|
|
|
|
|
2022-04-01 18:05:26 +03:00
|
|
|
get activeNewsletters() {
|
2022-04-04 21:26:49 +03:00
|
|
|
return this.newsletters.filter(n => n.status === 'active');
|
2022-04-01 18:05:26 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
get archivedNewsletters() {
|
2022-04-04 21:26:49 +03:00
|
|
|
return this.newsletters.filter(n => n.status === 'archived');
|
2022-04-01 18:05:26 +03:00
|
|
|
}
|
|
|
|
|
2022-04-06 15:18:07 +03:00
|
|
|
get displayingDefault() {
|
2022-04-15 11:43:10 +03:00
|
|
|
return this.statusFilter === 'active' && this.filteredNewsletters.length === 1;
|
2022-04-06 15:18:07 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
@action
|
2022-04-07 18:42:43 +03:00
|
|
|
changeStatusFilter(status) {
|
|
|
|
this.statusFilter = status;
|
|
|
|
this.updateFilteredNewsletters();
|
|
|
|
}
|
|
|
|
|
|
|
|
@action
|
|
|
|
updateFilteredNewsletters() {
|
|
|
|
this.filteredNewsletters = this.newsletters.filter((n) => {
|
|
|
|
return n.status === this.statusFilter
|
|
|
|
&& !n.isNew
|
|
|
|
&& !n.isDestroyed;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
@action
|
|
|
|
handleNewRouteChange(transition) {
|
|
|
|
// NOTE: this is necessary because ember-drag-drop has forced us into using
|
|
|
|
// an explicit tracked filteredNewsletters property rather than using a reactive
|
|
|
|
// getter that automatically displays newly added newsletters
|
|
|
|
|
|
|
|
if (transition.from.name === 'settings.members-email-labs.new-newsletter') {
|
|
|
|
this.updateFilteredNewsletters();
|
|
|
|
}
|
2022-04-01 18:05:26 +03:00
|
|
|
}
|
|
|
|
|
2022-04-20 13:08:48 +03:00
|
|
|
@action
|
|
|
|
archiveNewsletter(newsletter) {
|
|
|
|
this.confirmArchiveModal = this.modals.open(ConfirmArchiveModal, {
|
|
|
|
newsletter,
|
|
|
|
archiveNewsletterTask: this.archiveNewsletterTask
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2022-04-04 21:26:49 +03:00
|
|
|
@task
|
|
|
|
*archiveNewsletterTask(newsletter) {
|
|
|
|
newsletter.status = 'archived';
|
2022-04-07 18:42:43 +03:00
|
|
|
const result = yield newsletter.save();
|
|
|
|
|
|
|
|
this.updateFilteredNewsletters();
|
|
|
|
|
2022-04-20 13:08:48 +03:00
|
|
|
this.confirmArchiveModal?.close();
|
|
|
|
|
2022-04-07 18:42:43 +03:00
|
|
|
return result;
|
2022-04-01 18:05:26 +03:00
|
|
|
}
|
|
|
|
|
2022-04-06 15:18:07 +03:00
|
|
|
@task
|
|
|
|
*unarchiveNewsletterTask(newsletter) {
|
|
|
|
newsletter.status = 'active';
|
|
|
|
const result = yield newsletter.save();
|
|
|
|
|
|
|
|
if (this.statusFilter === 'archived' && !this.archivedNewsletters.length) {
|
|
|
|
this.statusFilter = 'active';
|
|
|
|
}
|
|
|
|
|
2022-04-07 18:42:43 +03:00
|
|
|
this.updateFilteredNewsletters();
|
|
|
|
|
2022-04-06 15:18:07 +03:00
|
|
|
return result;
|
|
|
|
}
|
|
|
|
|
2022-04-04 21:26:49 +03:00
|
|
|
@task
|
|
|
|
*loadNewslettersTask() {
|
2022-04-07 18:42:43 +03:00
|
|
|
const newsletters = yield this.store.findAll('newsletter');
|
|
|
|
|
|
|
|
this.updateFilteredNewsletters();
|
|
|
|
|
|
|
|
return newsletters;
|
|
|
|
}
|
|
|
|
|
|
|
|
@task
|
|
|
|
*reorderNewslettersTask() {
|
|
|
|
// filteredNewsletters is the array that gets updated by <SortableObjects> whilst dragging.
|
|
|
|
// we only want to update ordering when _active_ newsletters are re-ordered to make sure
|
|
|
|
// archived newsletters don't end up with a lower sort order than active ones
|
|
|
|
|
|
|
|
if (this.statusFilter !== 'active') {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// use filteredNewsletters rather than activeNewsletters so we're using'the ordered array
|
|
|
|
const activeNewsletters = this.filteredNewsletters;
|
|
|
|
|
|
|
|
const otherNewsletters = this.newsletters
|
|
|
|
.filter(n => !activeNewsletters.includes(n))
|
|
|
|
.sort(({sortOrder: a}, {sortOrder: b}) => b - a);
|
|
|
|
|
|
|
|
let sortOrder = 0;
|
|
|
|
|
|
|
|
for (const n of [...activeNewsletters, ...otherNewsletters]) {
|
|
|
|
n.sortOrder = sortOrder;
|
|
|
|
yield n.save();
|
|
|
|
|
|
|
|
sortOrder += 1;
|
|
|
|
}
|
2022-04-01 18:05:26 +03:00
|
|
|
}
|
|
|
|
}
|