Updated offers list to filter on archived offers

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

- adds dropdown for active/archived offers selection
- wires active/archived offers on list screen to API
- filters offers list on archived/active based on selection

ghost/admin/app/controllers/offers.js

@@ -4,18 +4,51 @@ import {inject as service} from '@ember/service';
 import {task} from 'ember-concurrency-decorators';
 import {tracked} from '@glimmer/tracking';
 
+const TYPES = [{
+    name: 'Active',
+    value: 'active'
+},{
+    name: 'Archived',
+    value: 'archived'
+}];
+
 export default class MembersController extends Controller {
-    @tracked offers = [];
     @service modals;
+    @service router;
+
+    @tracked offers = [];
+    @tracked type = 'active';
+
+    queryParams = [
+        'type'
+    ];
 
     constructor() {
         super(...arguments);
+        this.availableTypes = TYPES;
+    }
+
+    get filteredOffers() {
+        return this.offers.filter((offer) => {
+            return offer.status === this.type;
+        });
     }
 
     get offersExist() {
         return this.offers.length > 0;
     }
 
+    get selectedType() {
+        return this.type ? TYPES.find((d) => {
+            return this.type === d.value;
+        }) : TYPES[0];
+    }
+
+    @action
+    onTypeChange(type) {
+        this.type = type.value;
+    }
+
     @action
     openLinkDialog(offer) {
         this.advancedModal = this.modals.open('modals/offers/link', {

ghost/admin/app/routes/offers.js

@@ -5,6 +5,10 @@ export default class offersRoute extends AuthenticatedRoute {
     @service store;
     @service feature;
 
+    queryParams = {
+        type: {refreshModel: true}
+    };
+
     // redirect to posts screen if:
     // - TODO: members is disabled?
     // - logged in user isn't owner/admin

ghost/admin/app/styles/layouts/offers.css

@@ -233,3 +233,7 @@
         0px 1.85484px 2.74791px rgba(0, 0, 0, 0.0217013);
     transition: all 0.3s ease-in-out;
 }
+
+.gh-offers-actions .gh-contentfilter {
+    margin-left: 0;
+}

ghost/admin/app/templates/offer.hbs

@@ -208,7 +208,7 @@
                 {{#if (eq this.offer.status "active")}}
                     <button
                         type="button"
-                        class="gh-btn gh-btn-red gh-btn-icon"
+                        class="gh-btn gh-btn-black gh-btn-icon"
                         {{on "click" this.openConfirmArchiveModal}}
                     >
                         <span>Archive offer</span>
@@ -216,10 +216,10 @@
                 {{else}}
                     <button
                         type="button"
-                        class="gh-btn gh-btn-red gh-btn-icon"
+                        class="gh-btn gh-btn-black gh-btn-icon"
                         {{on "click" this.openConfirmUnarchiveModal}}
                     >
-                        <span>Unarchive offer</span>
+                        <span>Activate offer</span>
                     </button>
                 {{/if}}
             </div>

ghost/admin/app/templates/offers.hbs

@@ -9,6 +9,25 @@
     <section class="view-container">
 
         {{#if this.offersExist}}
+           <section class="gh-offers-actions view-actions">
+               <div class="gh-contentfilter view-actions-bottom-row">
+                    <div class="gh-contentfilter-menu gh-contentfilter-type {{if this.selectedType.value "gh-contentfilter-selected"}}" data-test-type-select="true">
+                        <PowerSelect
+                            @selected={{this.selectedType}}
+                            @options={{this.availableTypes}}
+                            @searchEnabled={{false}}
+                            @onChange={{this.onTypeChange}}
+                            @triggerComponent="gh-power-select/trigger"
+                            @triggerClass="gh-contentfilter-menu-trigger"
+                            @dropdownClass="gh-contentfilter-menu-dropdown"
+                            @matchTriggerWidth={{false}}
+                            as |type|
+                        >
+                            {{#if type.name}}{{type.name}}{{else}}<span class="red">Unknown type</span>{{/if}}
+                        </PowerSelect>
+                    </div>
+                </div>
+            </section>
             <table class="gh-list gh-offers-list">
                 <tr class="gh-list-row header">
                     <th class="gh-list-header">{{this.offersList.length}} offers</th>
@@ -17,7 +36,7 @@
                     <th class="gh-list-header">Redemptions</th>
                     <th class="gh-list-header gh-list-cellwidth-10"></th>
                 </tr>
-                {{#each this.offers as |offer|}}
+                {{#each this.filteredOffers as |offer|}}
                     <tr class="gh-list-row" data-test-list="offers-list-item">
                         <LinkTo @route="offer" @model={{offer}} class="gh-list-data" data-test-list="offer-name">
                             <h3>{{offer.name}}</h3>