feat: proposal worklist: status filtering

zazuko · Oct 28, 2019 · 5f78023 · 5f78023
1 parent b217f14
commit 5f78023
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 28 deletions.
diff --git a/apollo/queries/adminProposalList.gql b/apollo/queries/adminProposalList.gql
@@ -1,5 +1,14 @@
-query AdminProposalList ($first: Int!, $offset: Int!, $orderBy: [ThreadsOrderBy!]) {
-  discussions: allThreads (condition: {threadType: PROPOSAL, isDraft: false}, orderBy: $orderBy, first: $first, offset: $offset) {
+query AdminProposalList ($first: Int!, $offset: Int!, $orderBy: [ThreadsOrderBy!], $status: Status) {
+  discussions: allThreads (
+    condition: {
+      threadType: PROPOSAL,
+      isDraft: false,
+      status: $status
+    },
+    orderBy: $orderBy,
+    first: $first,
+    offset: $offset
+  ) {
     nodes {
       id,
       headline,

diff --git a/components/admin/AdminProposalList.vue b/components/admin/AdminProposalList.vue
@@ -3,14 +3,7 @@
     <thead>
       <tr>
         <th>
-          <a
-            class="sort-by"
-            @click.prevent="sort('HEADLINE')">
-            Title
-            <span class="sort-icon">
-              <i :class="{ [String(orderBy['HEADLINE']).toLowerCase()]: orderBy['HEADLINE'] }" />
-            </span>
-          </a>
+          Title
         </th>
         <th>
           Created by
@@ -26,14 +19,58 @@
           </a>
         </th>
         <th>
-          <a
-            class="sort-by"
-            @click.prevent="sort('STATUS')">
-            Status
-            <span class="sort-icon">
-              <i :class="{ [String(orderBy['STATUS']).toLowerCase()]: orderBy['STATUS'] }" />
-            </span>
-          </a>
+          <div
+            class="dropdown"
+            :class="{ 'is-active': statusDropdown }">
+            <div class="dropdown-trigger">
+              <button
+                aria-haspopup="true"
+                aria-controls="dropdown-menu"
+                @click.prevent="statusDropdown = true">
+                <span>Status</span>
+                <span class="sort-icon">
+                  <i class="asc"></i>
+                </span>
+              </button>
+            </div>
+            <div
+              class="dropdown-menu"
+              role="menu">
+              <div class="dropdown-content">
+                <a
+                  class="dropdown-item"
+                  :class="{ 'is-active': statusFilter === 'all' }"
+                  @click.prevent="filterStatus('all')">
+                  All
+                </a>
+                <hr class="dropdown-divider">
+                <a
+                  class="dropdown-item"
+                  :class="{ 'is-active': statusFilter === 'open' }"
+                  @click.prevent="filterStatus('open')">
+                  Open
+                </a>
+                <a
+                  class="dropdown-item"
+                  :class="{ 'is-active': statusFilter === 'resolved' }"
+                  @click.prevent="filterStatus('resolved')">
+                  Resolved
+                </a>
+                <a
+                  class="dropdown-item"
+                  :class="{ 'is-active': statusFilter === 'rejected' }"
+                  @click.prevent="filterStatus('rejected')">
+                  Rejected
+                </a>
+                <a
+                  class="dropdown-item"
+                  :class="{ 'is-active': statusFilter === 'hidden' }"
+                  @click.prevent="filterStatus('hidden')">
+                  Hidden
+                </a>
+              </div>
+            </div>
+          </div>
         </th>
         <th>
           Votes
@@ -157,13 +194,6 @@ export default {
       default () {
         return []
       }
-    },
-    value: {
-      type: Array,
-      required: true,
-      default () {
-        return []
-      }
     }
   },
   components: {
@@ -180,6 +210,8 @@ export default {
   },
   data () {
     return {
+      statusDropdown: false,
+      statusFilter: 'all',
       orderBy: {
         ID: false,
         HEADLINE: false,
@@ -274,7 +306,12 @@ export default {
       const filters = Object.entries(this.orderBy)
         .filter(([key, val]) => val)
         .map(([key, val]) => `${key}_${val}`)
-      this.$emit('input', filters)
+      this.$emit('sort', filters)
+    },
+    filterStatus (status) {
+      this.statusFilter = status
+      this.statusDropdown = false
+      this.$emit('status-filter', status)
     }
   }
 }

diff --git a/pages/admin/proposals.vue b/pages/admin/proposals.vue
@@ -9,8 +9,9 @@
         route="admin-proposals" />
       <div class="responsive-table">
         <admin-proposal-list
-          v-model="orderBy"
           :proposals="proposals"
+          @sort="sortUpdate"
+          @status-filter="statusFilterUpdate"
           @updated="refetch()" />
       </div>
     </no-ssr>
@@ -36,6 +37,7 @@ export default {
     return {
       proposals: [],
       orderBy: [],
+      filterStatus: false,
       pageSize: 10
     }
   },
@@ -51,6 +53,17 @@ export default {
   methods: {
     refetch () {
       this.$apollo.queries.discussions.refetch()
+    },
+    sortUpdate (sortBy) {
+      this.orderBy = sortBy
+    },
+    statusFilterUpdate (status) {
+      if (status === 'all') {
+        this.filterStatus = false
+      }
+      else {
+        this.filterStatus = status
+      }
     }
   },
   apollo: {
@@ -64,12 +77,14 @@ export default {
         if (this.orderBy.length) {
           vars.orderBy = this.orderBy
         }
+        if (this.filterStatus) {
+          vars.status = this.filterStatus.toUpperCase()
+        }
         return vars
       },
       result ({ data, loading }) {
         if (!loading) {
           this.proposals = _get(data, 'discussions.nodes', [])
-          //   .filter(node => node.status !== 'HIDDEN')
         }
       },
       fetchPolicy: 'cache-and-network'