TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-25 09:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Wired up active/archived newsletter filter

Browse Source 
closes https://github.com/TryGhost/Team/issues/1476

- added dropdown for switching between active and archived newsletters
- modified the "default" newsletter display so it's only activated when a single active newsletter is shown
- added ability to un-archive a newsletter with a switch between "archive" and "un-archive" actions based on newsletter status
  - if all archived newsletters are un-archived, automatically switches to "active" filter so you're not left with an empty list
This commit is contained in:
Kevin Ansfield 2022-04-06 13:18:07 +01:00
parent e5c26aac89
commit e3de4ee704
2 changed files with 57 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
ghost/admin/app/components/settings/members-email-labs/newsletter-management.hbs
View File

@ -3,22 +3,20 @@
<h4 class="gh-main-section-header small bn">Newsletters</h4>
{{#if this.archivedNewsletters}}
<div>
<div class="gh-contentfilter-menu gh-contentfilter-type {{if (not (eq this.selectedType.value "active")) "gh-contentfilter-selected"}}" data-test-type-select="true">
{{!-- <PowerSelect
@selected={{this.selectedType}}
@options={{this.availableTypes}}
<div>
<PowerSelect
@selected={{this.statusFilter}}
@options={{this.statusFilters}}
@searchEnabled={{false}}
@onChange={{this.onTypeChange}}
@onChange={{this.changeStatusFilter}}
@triggerComponent="gh-power-select/trigger"
@triggerClass="gh-contentfilter-menu-trigger gh-contentfilter-menu-trigger-tiers"
@triggerClass="ember-power-select-inline"
@dropdownClass="gh-contentfilter-menu-dropdown"
@matchTriggerWidth={{false}}
as |type|
as |status|
>
{{#if type.name}}{{type.name}}{{else}}<span class="red">Unknown type</span>{{/if}}
</PowerSelect> --}}
<span>Active</span>
<span>{{svg-jar "arrow-down-small" class="w2"}}</span>
{{titleize status}}
</PowerSelect>
</div>
</div>
{{/if}}
@ -28,8 +26,8 @@
{{#if this.loadNewslettersTask.isRunning}}
<div class="gh-main-content">... loading</div>
{{else}}
{{#each this.activeNewsletters as |newsletter|}}
<div class="gh-main-content-card gh-newsletter-card {{if this.hasMultiple "multiple"}}">
{{#each this.filteredNewsletters as |newsletter|}}
<div class="gh-main-content-card gh-newsletter-card {{unless this.displayingDefault "multiple"}}">
{{svg-jar "grab" class="grab-newsletter"}}
<div class="gh-newsletter-card-block title-block">
<h3 class="gh-newsletter-card-name">
@ -39,7 +37,7 @@
{{newsletter.description}}
</p>
</div>
<div class="gh-newsletter-card-block stats-block {{if this.hasMultiple "multiple"}}">
<div class="gh-newsletter-card-block stats-block {{unless this.displayingDefault "multiple"}}">
<div>
<h3 class="gh-newsletter-card-name">{{newsletter.members.total}}</h3>
<p class="gh-newsletter-card-description">Subscribers</p>
@ -50,7 +48,9 @@
</div>
</div>
<div class="gh-newsletter-card-block cta-block">
{{#if this.hasMultiple}}
{{#if this.displayingDefault}}
<LinkTo @route="settings.members-email-labs.edit-newsletter" @model={{newsletter.id}} class="gh-btn gh-btn-green"><span>Customize &rarr;</span></LinkTo>
{{else}}
<span class="dropdown">
<GhDropdownButton
@dropdownName="newsletter-actions-menu-newsletter-{{newsletter.id}}"
@ -69,15 +69,22 @@
<li>
<LinkTo @route="settings.members-email-labs.edit-newsletter" @model={{newsletter.id}} class="mr2"><span>Edit</span></LinkTo>
</li>
<li>
<button class="mr2" type="button" {{on "click" (perform this.archiveNewsletterTask newsletter)}}>
<span>Archive</span>
</button>
</li>
{{#if (eq newsletter.status "active")}}
<li>
<button class="mr2" type="button" {{on "click" (perform this.archiveNewsletterTask newsletter)}}>
<span>Archive</span>
</button>
</li>
{{/if}}
{{#if (eq newsletter.status "archived")}}
<li>
<button class="mr2" type="button" {{on "click" (perform this.unarchiveNewsletterTask newsletter)}}>
<span>Un-archive</span>
</button>
</li>
{{/if}}
</GhDropdown>
</span>
{{else}}
<LinkTo @route="settings.members-email-labs.edit-newsletter" @model={{newsletter.id}} class="gh-btn gh-btn-green"><span>Customize &rarr;</span></LinkTo>
{{/if}}
</div>
</div>

30
ghost/admin/app/components/settings/members-email-labs/newsletter-management.js
View File

@ -1,10 +1,15 @@
import Component from '@glimmer/component';
import {action} from '@ember/object';
import {inject as service} from '@ember/service';
import {task} from 'ember-concurrency';
import {tracked} from '@glimmer/tracking';
export default class NewsletterManagementComponent extends Component {
@service store;
@tracked statusFilter = 'active';
statusFilters = ['active', 'archived'];
newsletters = this.store.peekAll('newsletter');
constructor() {
@ -20,8 +25,17 @@ export default class NewsletterManagementComponent extends Component {
return this.newsletters.filter(n => n.status === 'archived');
}
get hasMultiple() {
return this.activeNewsletters.length > 1;
get filteredNewsletters() {
return this.newsletters.filter(n => n.status === this.statusFilter);
}
get displayingDefault() {
return this.statusFilter === 'active' && this.activeNewsletters.length === 1;
}
@action
changeStatusFilter(newFilter) {
this.statusFilter = newFilter;
}
@task
@ -30,6 +44,18 @@ export default class NewsletterManagementComponent extends Component {
return yield newsletter.save();
}
@task
*unarchiveNewsletterTask(newsletter) {
newsletter.status = 'active';
const result = yield newsletter.save();
if (this.statusFilter === 'archived' && !this.archivedNewsletters.length) {
this.statusFilter = 'active';
}
return result;
}
@task
*loadNewslettersTask() {
return yield this.store.findAll('newsletter');