Refactor individual subscriber edit view.

- Add route /lists/:id URI to load subscriber edit modal.
- Make list name open the edit popup to be consistent with all other
  table views.
- Refactor get-lists query to make single list look up faster.

frontend/src/api/index.js

@@ -118,6 +118,9 @@ export const getLists = (params) => http.get('/api/lists',
     store: models.lists,
   });
 
+export const getList = async (id) => http.get(`/api/lists/${id}`,
+  { loading: models.list });
+
 export const createList = (data) => http.post('/api/lists', data,
   { loading: models.lists });
 

frontend/src/router/index.js

@@ -23,6 +23,12 @@ const routes = [
     meta: { title: 'Forms', group: 'lists' },
     component: () => import(/* webpackChunkName: "main" */ '../views/Forms.vue'),
   },
+  {
+    path: '/lists/:id',
+    name: 'lists',
+    meta: { title: 'Lists', group: 'lists' },
+    component: () => import(/* webpackChunkName: "main" */ '../views/Lists.vue'),
+  },
   {
     path: '/subscribers',
     name: 'subscribers',

frontend/src/views/Lists.vue

@@ -28,9 +28,10 @@
         :td-attrs="$utils.tdID"
         @page-change="onPageChange">
         <div>
-          <router-link :to="{name: 'subscribers_list', params: { listID: props.row.id }}">
+          <a :href="`/lists/${props.row.id}`"
+            @click.prevent="showEditForm(props.row)">
             {{ props.row.name }}
-          </router-link>
+          </a>
           <b-taglist>
               <b-tag class="is-small" v-for="t in props.row.tags" :key="t">{{ t }}</b-tag>
           </b-taglist>
@@ -104,7 +105,8 @@
     </b-table>
 
     <!-- Add / edit form modal -->
-    <b-modal scroll="keep" :aria-modal="true" :active.sync="isFormVisible" :width="600">
+    <b-modal scroll="keep" :aria-modal="true" :active.sync="isFormVisible" :width="600"
+      @close="onFormClose">
       <list-form :data="curItem" :isEditing="isEditing" @finished="formFinished"></list-form>
     </b-modal>
   </section>
@@ -167,6 +169,12 @@ export default Vue.extend({
       this.getLists();
     },
 
+    onFormClose() {
+      if (this.$route.params.id) {
+        this.$router.push({ name: 'lists' });
+      }
+    },
+
     getLists() {
       this.$api.getLists({
         page: this.queryParams.page,
@@ -211,7 +219,13 @@ export default Vue.extend({
   },
 
   mounted() {
-    this.getLists();
+    if (this.$route.params.id) {
+      this.$api.getList(parseInt(this.$route.params.id, 10)).then((data) => {
+        this.showEditForm(data);
+      });
+    } else {
+      this.getLists();
+    }
   },
 });
 </script>

queries.sql

@@ -343,7 +343,10 @@ WITH ls AS (
     WHERE ($1 = 0 OR id = $1) OFFSET $2 LIMIT (CASE WHEN $3 = 0 THEN NULL ELSE $3 END)
 ),
 counts AS (
-	SELECT COUNT(*) as subscriber_count, list_id FROM subscriber_lists WHERE status != 'unsubscribed' GROUP BY list_id
+	SELECT COUNT(*) as subscriber_count, list_id FROM subscriber_lists
+    WHERE status != 'unsubscribed'
+    AND ($1 = 0 OR list_id = $1)
+    GROUP BY list_id
 )
 SELECT ls.*, COALESCE(subscriber_count, 0) AS subscriber_count FROM ls
     LEFT JOIN counts ON (counts.list_id = ls.id) ORDER BY %s %s;