From 1492527b3ecdacddcc6ca4d70914c4ce1d2df78c Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Wed, 4 Aug 2021 15:52:47 +0530
Subject: [PATCH] Added basic add/delete action on filter UI

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

Adds basic add/delete button action on dynamic filter UI to create custom filter blocks
---
 .../app/components/gh-members-filter.hbs      | 129 ++++++------------
 .../admin/app/components/gh-members-filter.js |  53 +++++--
 2 files changed, 82 insertions(+), 100 deletions(-)

diff --git a/ghost/admin/app/components/gh-members-filter.hbs b/ghost/admin/app/components/gh-members-filter.hbs
index 061855692f..0d2cce8faf 100644
--- a/ghost/admin/app/components/gh-members-filter.hbs
+++ b/ghost/admin/app/components/gh-members-filter.hbs
@@ -18,93 +18,48 @@
     >
         <h3>Filter list</h3>
         <section class="gh-filters">
-            <div class="gh-filter-block">
-                <GhFormGroup @property="filter-1" @classNames="max-width">
-                    <div class="gh-filter-inputgroup">
-                        <span class="gh-select">
-                            <OneWaySelect 
-                                @options={{this.availableFilterProperties}}
-                                @optionValuePath="name"
-                                @optionLabelPath="label"
-                                @optionTargetPath="name"
-                                @groupLabelPath="group"
-                            />
-                            {{svg-jar "arrow-down-small"}}
-                        </span>
-                        <span class="gh-select">
-                            <OneWaySelect 
-                                @options={{this.availableFilterRelations}}
-                                @optionValuePath="name"
-                                @optionLabelPath="label"
-                                @optionTargetPath="name"
-                            />
-                            {{svg-jar "arrow-down-small"}}
-                        </span>
-                        <GhTextInput @id="filter-value-1" @name="filter-value-1" />
-                        <button class="gh-delete-filter" title="Delete filter">{{svg-jar "close"}}<span class="hidden">Delete filter</span></button>
-                    </div>
-                    <GhErrorMessage @errors={{member.errors}} @property="filter-property-1" />
-                </GhFormGroup>
-            </div>
+            {{#each this.filters as |filter|}}
+                <div class="gh-filter-block">
+                    <GhFormGroup @property={{filter.id}} @classNames="max-width">
+                        <div class="gh-filter-inputgroup">
+                            <span class="gh-select">
+                                <OneWaySelect
+                                    @value={{filter.type}}
+                                    @options={{this.availableFilterProperties}}
+                                    @optionValuePath="name"
+                                    @optionLabelPath="label"
+                                    @optionTargetPath="name"
+                                    @groupLabelPath="group"
+                                />
+                                {{svg-jar "arrow-down-small"}}
+                            </span>
+                            <span class="gh-select">
+                                <OneWaySelect
+                                    @value={{filter.relation}}
+                                    @options={{this.availableFilterRelations}}
+                                    @optionValuePath="name"
+                                    @optionLabelPath="label"
+                                    @optionTargetPath="name"
+                                />
+                                {{svg-jar "arrow-down-small"}}
+                            </span>
+                            <GhTextInput @name="filter-value-1" @value={{filter.value}} />
+                            <button
+                                class="gh-delete-filter" title="Delete filter"
+                                {{action "deleteFilter" filter.id}}
+                            >
+                                {{svg-jar "close"}} <span class="hidden">Delete filter</span>
+                            </button>
+                        </div>
+                        <GhErrorMessage @errors={{member.errors}} @property="filter-property-1" />
+                    </GhFormGroup>
+                </div>
+            {{/each}}
             {{!-- <div class="gh-filter-block-divider">And</div> --}}
-            <div class="gh-filter-block">
-                <GhFormGroup @property="filter-2" @classNames="max-width">
-                    <div class="gh-filter-inputgroup">
-                        <span class="gh-select">
-                            <OneWaySelect 
-                                @options={{this.availableFilterProperties}}
-                                @optionValuePath="name"
-                                @optionLabelPath="label"
-                                @optionTargetPath="name"
-                                @groupLabelPath="group"
-                            />
-                            {{svg-jar "arrow-down-small"}}
-                        </span>
-                        <span class="gh-select">
-                            <OneWaySelect 
-                                @options={{this.availableFilterRelations}}
-                                @optionValuePath="name"
-                                @optionLabelPath="label"
-                                @optionTargetPath="name"
-                            />
-                            {{svg-jar "arrow-down-small"}}
-                        </span>
-                        <GhTextInput @id="filter-value-2" @name="filter-value-2" />
-                        <button class="gh-delete-filter" title="Delete filter">{{svg-jar "close"}}<span class="hidden">Delete filter</span></button>
-                    </div>
-                    <GhErrorMessage @errors={{member.errors}} @property="filter-property-2" />
-                </GhFormGroup>
-            </div>
-            {{!-- <div class="gh-filter-block-divider">And</div> --}}
-            <div class="gh-filter-block">
-                <GhFormGroup @property="filter-3" @classNames="max-width">
-                    <div class="gh-filter-inputgroup">
-                        <span class="gh-select">
-                            <OneWaySelect 
-                                @options={{this.availableFilterProperties}}
-                                @optionValuePath="name"
-                                @optionLabelPath="label"
-                                @optionTargetPath="name"
-                                @groupLabelPath="group"
-                            />
-                            {{svg-jar "arrow-down-small"}}
-                        </span>
-                        <span class="gh-select">
-                            <OneWaySelect 
-                                @options={{this.availableFilterRelations}}
-                                @optionValuePath="name"
-                                @optionLabelPath="label"
-                                @optionTargetPath="name"
-                            />
-                            {{svg-jar "arrow-down-small"}}
-                        </span>
-                        <GhTextInput @id="filter-value-3" @name="filter-value-3" />
-                        <button class="gh-delete-filter" title="Delete filter">{{svg-jar "close"}}<span class="hidden">Delete filter</span></button>
-                    </div>
-                    <GhErrorMessage @errors={{member.errors}} @property="filter-property-3" />
-                </GhFormGroup>
-            </div>
-            <button type="button" class="gh-btn gh-btn-text gh-btn-link green gh-btn-icon gh-add-filter">
+            <button type="button"
+                class="gh-btn gh-btn-text gh-btn-link green gh-btn-icon gh-add-filter"
+                {{action "addFilter"}}
+            >
                 <span>{{svg-jar "add"}} Add filter</span>
             </button>
         </section>
@@ -192,4 +147,4 @@
             {{#if order.name}}{{order.name}}{{else}}<span class="red">Unknown</span>{{/if}}
         </PowerSelect>
     </div>
-{{/if}}
\ No newline at end of file
+{{/if}}
diff --git a/ghost/admin/app/components/gh-members-filter.js b/ghost/admin/app/components/gh-members-filter.js
index 2b17a3cce5..e8a22bfcff 100644
--- a/ghost/admin/app/components/gh-members-filter.js
+++ b/ghost/admin/app/components/gh-members-filter.js
@@ -1,18 +1,21 @@
 import Component from '@glimmer/component';
+import {A} from '@ember/array';
+import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
+import {tracked} from '@glimmer/tracking';
 
 const FILTER_PROPERTIES = [
     // Basic
-    {label: 'Name', name: 'x', group: 'Basic'},
-    {label: 'Email', name: 'x', group: 'Basic'},
-    {label: 'Location', name: 'x', group: 'Basic'},
-    {label: 'Newsletter subscription status', name: 'x', group: 'Basic'},
-    {label: 'Label', name: 'x', group: 'Basic'},
+    {label: 'Name', name: 'name', group: 'Basic'},
+    {label: 'Email', name: 'email', group: 'Basic'},
+    {label: 'Location', name: 'location', group: 'Basic'},
+    {label: 'Newsletter subscription status', name: 'newsletter-subscription-status', group: 'Basic'},
+    {label: 'Label', name: 'label', group: 'Basic'},
 
     // Member subscription
-    {label: 'Member status', name: 'x', group: 'Subscription'},
-    {label: 'Tier', name: 'x', group: 'Subscription'},
-    {label: 'Billing period', name: 'x', group: 'Subscription'},
+    {label: 'Member status', name: 'member-status', group: 'Subscription'},
+    {label: 'Tier', name: 'tier', group: 'Subscription'},
+    {label: 'Billing period', name: 'billing-period', group: 'Subscription'},
 
     // Emails
     {label: 'Emails sent (all time)', name: 'x', group: 'Email'},
@@ -28,19 +31,43 @@ const FILTER_PROPERTIES = [
 ];
 
 const FILTER_RELATIONS = [
-    {label: 'is', name: 'x'},
-    {label: 'is not', name: 'x'},
-    {label: 'contains', name: 'x'},
-    {label: 'exists', name: 'x'},
-    {label: 'does not exist', name: 'x'}
+    {label: 'is', name: 'is'},
+    {label: 'is not', name: 'is-not'},
+    {label: 'contains', name: 'contains'},
+    {label: 'exists', name: 'exists'},
+    {label: 'does not exist', name: 'does-not-exist'}
 ];
 
 export default class GhMembersFilterComponent extends Component {
     @service session
+    @tracked filters = A([
+        {
+            id: `filter-0`,
+            type: 'email',
+            relation: 'is-not',
+            value: ''
+        }
+    ]);
 
     constructor(...args) {
         super(...args);
         this.availableFilterProperties = FILTER_PROPERTIES;
         this.availableFilterRelations = FILTER_RELATIONS;
     }
+
+    @action
+    addFilter() {
+        this.filters.pushObject({
+            id: `filter-${this.filters.length}`,
+            type: 'email',
+            relation: 'is-not',
+            value: ''
+        });
+    }
+
+    @action
+    deleteFilter(filterId) {
+        const filterToDelete = this.filters.findBy('id', filterId);
+        this.filters.removeObject(filterToDelete);
+    }
 }