Added mocked newsletter service

refs https://github.com/TryGhost/Team/issues/1447

- Added a few newsletter methods (browse, add, archive/un-archive)
- This temporary code helps the frontend implementation to be done quicker
- And helps getting a better understanding of the backend implementation (schema + api routes)

ghost/admin/app/components/settings/members-email.hbs

@@ -23,30 +23,32 @@
             <h4 class="gh-main-section-header small bn">Newsletters</h4>
             <section class="gh-expandable">
                 <div class="gh-expandable-block">
+                    {{#each this.newsletters.newsletters as |newsletter|}}
+                    {{#if (eq newsletter.status "active")}}
                     <div class="gh-main-content-card gh-newsletter-card">
                         {{svg-jar "grab" class="grab-newsletter"}}
                         <div class="gh-newsletter-card-block title-block">
                             <h3 class="gh-newsletter-card-name">
-                                Daily roundup
+                                {{newsletter.name}}
                             </h3>
                             <p class="gh-newsletter-card-description">
-                                Daily news delivered to your inbox every morning.
+                                {{newsletter.description}}
                             </p>
                         </div>
                         <div class="gh-newsletter-card-block stats-block">
                             <div>
-                                <h3 class="gh-newsletter-card-name">19</h3>
+                                <h3 class="gh-newsletter-card-name">{{newsletter.members.total}}</h3>
                                 <p class="gh-newsletter-card-description">Subscribers</p>
                             </div>
                             <div>
-                                <h3 class="gh-newsletter-card-name">17</h3>
+                                <h3 class="gh-newsletter-card-name">{{newsletter.posts.total}}</h3>
                                 <p class="gh-newsletter-card-description">Posts sent</p>
                             </div>
                         </div>
                         <div class="gh-newsletter-card-button-container">
                             <span class="dropdown">
                                 <GhDropdownButton
-                                    @dropdownName="newsletter-actions-menu-newsletter-1"
+                                    @dropdownName="newsletter-actions-menu-newsletter-{{newsletter.id}}"
                                     @classNames="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-product-card-actions-button icon-only"
                                 >
                                     <span>
@@ -55,7 +57,7 @@
                                     </span>
                                 </GhDropdownButton>
                                     <GhDropdown
-                                        @name="newsletter-actions-menu-newsletter-1"
+                                        @name="newsletter-actions-menu-newsletter-{{newsletter.id}}"
                                         @tagName="ul"
                                         @classNames="gh-newsletter-actions-menu dropdown-menu dropdown-triangle-top-right"
                                     >
@@ -65,7 +67,7 @@
                                             </button>
                                         </li>
                                         <li>
-                                            <button class="mr2" type="button">
+                                            <button class="mr2" type="button" {{action "archiveNewsletter" newsletter.id}}>
                                                 <span>Archive</span>
                                             </button>
                                         </li>
@@ -74,59 +76,11 @@
                         </div>
                     </div>
 
-                    <div class="gh-main-content-card gh-newsletter-card">
+                    {{/if}}
-                        {{svg-jar "grab" class="grab-newsletter"}}
+                    {{/each}}
-                        <div class="gh-newsletter-card-block title-block">
-                            <h3 class="gh-newsletter-card-name">
-                                Weekly summary
-                            </h3>
-                            <p class="gh-newsletter-card-description">
-                                Get the weekly highlights every Sunday.
-                            </p>
-                        </div>
-                        <div class="gh-newsletter-card-block stats-block">
-                            <div>
-                                <h3 class="gh-newsletter-card-name">32</h3>
-                                <p class="gh-newsletter-card-description">Subscribers</p>  
-                            </div>  
-                            <div>
-                                <h3 class="gh-newsletter-card-name">2</h3>
-                                <p class="gh-newsletter-card-description">Posts sent</p> 
-                            </div>                    
-                        </div>                       
-                        <div class="gh-newsletter-card-button-container">
-                            <span class="dropdown">
-                                <GhDropdownButton
-                                    @dropdownName="newsletter-actions-menu-newsletter-2"
-                                    @classNames="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-product-card-actions-button icon-only"
-                                >
-                                    <span>
-                                        {{svg-jar "dotdotdot"}}
-                                        <span class="hidden">Actions</span>
-                                    </span>
-                                </GhDropdownButton>
-                                    <GhDropdown
-                                        @name="newsletter-actions-menu-newsletter-2"
-                                        @tagName="ul"
-                                        @classNames="gh-newsletter-actions-menu dropdown-menu dropdown-triangle-top-right"
-                                    >
-                                        <li>
-                                            <button class="mr2" type="button">
-                                                <span>Edit</span>
-                                            </button>
-                                        </li>
-                                        <li>
-                                            <button class="mr2" type="button">
-                                                <span>Archive</span>
-                                            </button>
-                                        </li>
-                                    </GhDropdown>
-                            </span>
-                        </div>
-                    </div>
                 </div>
             </section>
-            <button type="button" class="gh-add-newsletter" {{on "click" @toggleEmailDesignSettings}}>{{svg-jar "add-stroke"}}Add newsletter</button>
+            <button type="button" class="gh-add-newsletter" {{on "click" @toggleEmailDesignSettings}} {{action "addNewsletter"}}>{{svg-jar "add-stroke"}}Add newsletter</button>
         </div>
 
         <section class="gh-main-section">

ghost/admin/app/components/settings/members-email.js

@@ -13,6 +13,7 @@ export default class MembersEmail extends Component {
     @service ghostPaths;
     @service ajax;
     @service settings;
+    @service newsletters;
 
     replyAddresses = null;
     recipientsSelectValue = null;
@@ -186,6 +187,16 @@ export default class MembersEmail extends Component {
         this.settings.set('editorDefaultEmailRecipientsFilter', filter);
     }
 
+    @action
+    archiveNewsletter(id) {
+        this.newsletters.archive(id);
+    }
+
+    @action
+    addNewsletter() {
+        this.newsletters.add();
+    }
+
     @(task(function* () {
         let url = this.get('ghostPaths.url').api('/settings/members/email');
         try {

ghost/admin/app/services/newsletters.js

@@ -0,0 +1,97 @@
+import Service, {inject as service} from '@ember/service';
+import {set} from '@ember/object';
+import {tracked} from '@glimmer/tracking';
+
+let counter = 0;
+function getFakeNewsletter() {
+    counter += 1;
+    return {
+        id: Math.floor(Math.random() * 1e9),
+        name: 'Daily roundup ' + counter,
+        description: 'Daily news delivered to your inbox every morning.',
+        sender_name: 'Test',
+        sender_email: 'test@example.com',
+        sender_reply_to: 'test@example.com',
+        default: false,
+        status: 'active',
+        recipient_filter: '',
+        subscribe_on_signup: true,
+        sort_order: counter,
+        members: {
+            total: Math.floor(Math.random() * 100)
+        },
+        posts: {
+            total: Math.floor(Math.random() * 100)
+        }
+    };
+}
+
+export default class NewslettersService extends Service {
+    @service config;
+    @service settings;
+    @service feature;
+    @service store;
+
+    @tracked
+    newsletters = [
+        {
+            id: '123',
+            name: 'Daily roundup',
+            description: 'Daily news delivered to your inbox every morning.',
+            sender_name: 'Test',
+            sender_email: 'test@example.com',
+            sender_reply_to: 'test@example.com',
+            default: true,
+            status: 'active',
+            recipient_filter: '',
+            subscribe_on_signup: true,
+            sort_order: 0,
+            members: {
+                total: 19
+            },
+            posts: {
+                total: 17
+            }
+        },
+        {
+            id: '456',
+            name: ' Weekly summary ',
+            description: 'Get the weekly highlights every Sunday.',
+            sender_name: 'Test',
+            sender_email: 'test@example.com',
+            sender_reply_to: 'test@example.com',
+            default: true,
+            status: 'active',
+            recipient_filter: '',
+            subscribe_on_signup: true,
+            sort_order: 0,
+            members: {
+                total: 32
+            },
+            posts: {
+                total: 2
+            }
+        }
+    ]
+
+    add() {
+        this.newsletters.push(getFakeNewsletter());
+        this.newsletters.sort((a,b) => a.sort_order - b.sort_order);
+        this.newsletters = [...this.newsletters]; //trigger UI refresh
+        return this.newsletters;
+    }
+
+    archive(newsletterId) {
+        const newsletter = this.newsletters.find(n => n.id === newsletterId);
+        if (newsletter) {
+            set(newsletter, 'status', 'archived');
+        }
+    }
+
+    unArchive(newsletterId) {
+        const newsletter = this.newsletters.find(n => n.id === newsletterId);
+        if (newsletter) {
+            set(newsletter, 'status', 'active');
+        }
+    }
+}