Adapt Plan component to Vuex use for fetching data

lib/www/client/source/src/views/Plan.vue

@@ -44,6 +44,7 @@
             label="Filter"
             single-line
             clearable
+            hint="Filter by sequence, line, first or last shotpoints, remarks or start/end time"
             ></v-text-field>
         </v-toolbar>
       </v-card-title>
@@ -109,11 +110,14 @@
         :headers="headers"
         :items="items"
         :items-per-page.sync="itemsPerPage"
+        :server-items-length="sequenceCount"
+        item-key="sequence"
         :search="filter"
-        :loading="loading"
-        :fixed-header="true"
+        :loading="plannedSequencesLoading"
+        fixed-header
         no-data-text="No planned lines. Add lines via the context menu from either the Lines or Sequences view."
         :item-class="(item) => (activeItem == item && !edit) ? 'blue accent-1 elevation-3' : ''"
+        :footer-props="{showFirstLastPage: true}"
         @click:row="setActiveItem"
         @contextmenu:row="contextMenu"
         >
@@ -275,7 +279,7 @@
                 icon
                 small
                 title="Edit"
-                :disabled="loading"
+                :disabled="plannedSequencesLoading"
                 @click="editItem(item, 'remarks')"
               >
                 <v-icon small>mdi-square-edit-outline</v-icon>
@@ -417,7 +421,8 @@ export default {
       remarks: null,
       editRemarks: false,
       filter: null,
-      num_lines: null,
+      options: {},
+      sequenceCount: null,
       activeItem: null,
       edit: null, // {sequence, key, value}
       queuedReload: false,
@@ -552,11 +557,22 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['user', 'writeaccess', 'loading', 'serverEvent'])
+    ...mapGetters(['user', 'writeaccess', 'plannedSequencesLoading', 'plannedSequences', 'planRemarks'])
   },
 
   watch: {
 
+    options: {
+      handler () {
+        this.fetchPlannedSequences();
+      },
+      deep: true
+    },
+
+    async plannedSequences () {
+      await this.fetchPlannedSequences();
+    },
+
     async edit (newVal, oldVal) {
       if (newVal === null && oldVal !== null) {
         const item = this.items.find(i => i.sequence == oldVal.sequence);
@@ -587,41 +603,9 @@ export default {
       }
     },
 
-    async serverEvent (event) {
-      if (event.channel == "planned_lines" && event.payload.pid == this.$route.params.project) {
-
-        // Ignore non-ops
-        /*
-        if (event.payload.old === null && event.payload.new === null) {
-          return;
-        }
-        */
-
-        if (!this.loading && !this.queuedReload) {
-          // Do not force a non-cached response if refreshing as a result
-          // of an event notification. We will assume that the server has
-          // already had time to update the cache by the time our request
-          // gets back to it.
-          this.getPlannedLines();
-        } else {
-          this.queuedReload = true;
-        }
-      } else if (event.channel == "info" && event.payload.pid == this.$route.params.project) {
-        if (event.payload?.new?.key == "plan" && ("remarks" in (event.payload?.new?.value || {}))) {
-          this.remarks = event.payload?.new.value.remarks;
-        }
-      }
-    },
-
-    queuedReload (newVal, oldVal) {
-      if (newVal && !oldVal && !this.loading) {
-        this.getPlannedLines();
-      }
-    },
-
-    loading (newVal, oldVal) {
-      if (!newVal && oldVal && this.queuedReload) {
-        this.getPlannedLines();
+    filter (newVal, oldVal) {
+      if (newVal?.toLowerCase() != oldVal?.toLowerCase()) {
+        this.fetchPlannedSequences();
       }
     },
 
@@ -890,7 +874,6 @@ export default {
       const url = `/project/${this.$route.params.project}/plan/${this.contextMenuItem.sequence}`;
       const init = {method: "DELETE"};
       await this.api([url, init]);
-      await this.getPlannedLines();
     },
 
     editItem (item, key, value) {
@@ -942,21 +925,6 @@ export default {
       }
     },
 
-    async getPlannedLines () {
-
-      const url = `/project/${this.$route.params.project}/plan`;
-
-      this.queuedReload = false;
-      this.items = await this.api([url]) || [];
-      for (const item of this.items) {
-        item.ts0 = new Date(item.ts0);
-        item.ts1 = new Date(item.ts1);
-        this.wxQuery(item).then( (wx) => {
-          item.meta = {...item.meta, wx};
-        });
-      }
-    },
-
     async getPlannerConfig () {
       const url = `/project/${this.$route.params.project}/configuration/planner`;
       this.plannerConfig = await this.api([url]) || {
@@ -967,14 +935,15 @@ export default {
       }
     },
 
-    async getPlannerRemarks () {
-      const url = `/project/${this.$route.params.project}/info/plan/remarks`;
-      this.remarks = await this.api([url]) || "";
-    },
-
-    async getSequences () {
-      const url = `/project/${this.$route.params.project}/sequence`;
-      this.sequences = await this.api([url]) || [];
+    async fetchPlannedSequences (opts = {}) {
+      const options = {
+        text: this.filter,
+        ...this.options
+      };
+      const res = await this.getPlannedSequences([this.$route.params.project, options]);
+      this.items = res.sequences;
+      this.sequenceCount = res.count;
+      this.remarks = this.planRemarks;
     },
 
     setActiveItem (item) {
@@ -983,13 +952,12 @@ export default {
         : item;
     },
 
-    ...mapActions(["api", "showSnack"])
+    ...mapActions(["api", "showSnack", "getPlannedSequences"])
   },
 
   async mounted () {
     await this.getPlannerConfig();
-    this.getPlannedLines();
-    this.getPlannerRemarks();
+    await this.fetchPlannedSequences();
   }
 
 }