From 847f49ad7c4a06b0d84952856dc1013542ef3572 Mon Sep 17 00:00:00 2001 From: "D. Berge" Date: Wed, 25 Oct 2023 16:15:17 +0200 Subject: [PATCH] Adapt SequenceList component to Vuex use for fetching data --- .../client/source/src/views/SequenceList.vue | 103 +++++++----------- 1 file changed, 37 insertions(+), 66 deletions(-) diff --git a/lib/www/client/source/src/views/SequenceList.vue b/lib/www/client/source/src/views/SequenceList.vue index 9641a25..fb38a53 100644 --- a/lib/www/client/source/src/views/SequenceList.vue +++ b/lib/www/client/source/src/views/SequenceList.vue @@ -148,15 +148,16 @@ :headers="headers" :items="items" :items-per-page.sync="itemsPerPage" + :server-items-length="sequenceCount" item-key="sequence" - :server-items-length="num_rows" - :search="filter" - :custom-filter="customFilter" - :loading="loading" - :fixed-header="true" - :footer-props='{itemsPerPageOptions: [ 10, 25, 50, 100, 500, -1 ]}' - show-expand :item-class="(item) => activeItem == item ? 'blue accent-1 elevation-3' : ''" + :search="filter" + x-custom-filter="customFilter" + :loading="sequencesLoading" + :options.sync="options" + fixed-header + :footer-props='{itemsPerPageOptions: [ 10, 25, 50, 100, 500, -1 ], showFirstLastPage: true}' + show-expand @click:row="setActiveItem" @contextmenu:row="contextMenu" > @@ -176,7 +177,7 @@ icon small title="Cancel edit" - :disabled="loading" + :disabled="sequencesLoading" @click="edit.value = item.remarks; edit = null" > mdi-close @@ -185,7 +186,7 @@ icon small title="Save edits" - :disabled="loading" + :disabled="sequencesLoading" @click="edit = null" > mdi-content-save-edit-outline @@ -196,7 +197,7 @@ icon small title="Edit" - :disabled="loading" + :disabled="sequencesLoading" @click="editItem(item, 'remarks')" > mdi-square-edit-outline @@ -210,7 +211,7 @@ class="markdown" autofocus placeholder="Enter your text here" - :disabled="loading" + :disabled="sequencesLoading" v-model="edit.value" > @@ -228,7 +229,7 @@ icon small title="Cancel edit" - :disabled="loading" + :disabled="sequencesLoading" @click="edit.value = item.remarks_final; edit = null" > mdi-close @@ -237,7 +238,7 @@ icon small title="Save edits" - :disabled="loading" + :disabled="sequencesLoading" @click="edit = null" > mdi-content-save-edit-outline @@ -248,7 +249,7 @@ icon small title="Edit" - :disabled="loading" + :disabled="sequencesLoading" @click="editItem(item, 'remarks_final')" > mdi-square-edit-outline @@ -262,7 +263,7 @@ class="markdown" autofocus placeholder="Enter your text here" - :disabled="loading" + :disabled="sequencesLoading" v-model="edit.value" > @@ -566,7 +567,7 @@ export default { items: [], filter: "", options: {}, - num_rows: null, + sequenceCount: null, activeItem: null, edit: null, // {sequence, key, value} queuedReload: false, @@ -593,17 +594,22 @@ export default { return this.queuedItems.find(i => i.payload.sequence == this.contextMenuItem.sequence); }, - ...mapGetters(['user', 'writeaccess', 'loading', 'serverEvent']) + ...mapGetters(['user', 'writeaccess', 'sequencesLoading', 'sequences']) }, watch: { + options: { handler () { - this.getSequences(); + this.fetchSequences(); }, deep: true }, + async sequences () { + await this.fetchSequences(); + }, + async edit (newVal, oldVal) { if (newVal === null && oldVal !== null) { const item = this.items.find(i => i.sequence == oldVal.sequence); @@ -617,39 +623,9 @@ export default { } }, - async serverEvent (event) { - const subscriptions = ["raw_lines", "final_lines", "final_shots"]; - if (subscriptions.includes(event.channel) && event.payload.pid == this.$route.params.project) { - 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.getSequences(); - } else { - this.queuedReload = true; - } - } else if (event.channel == "queue_items") { - const project = - event.payload?.project ?? - event.payload?.new?.payload?.project ?? - event.payload?.old?.payload?.project; - - if (project == this.$route.params.project) { - this.getQueuedItems(); - } - } - }, - - queuedReload (newVal, oldVal) { - if (newVal && !oldVal && !this.loading) { - this.getSequences(); - } - }, - - loading (newVal, oldVal) { - if (!newVal && oldVal && this.queuedReload) { - this.getSequences(); + filter (newVal, oldVal) { + if (newVal?.toLowerCase() != oldVal?.toLowerCase()) { + this.fetchSequences(); } }, @@ -818,19 +794,14 @@ export default { this.num_rows = projectInfo.sequences; }, - async getSequences () { - - const query = new URLSearchParams(this.options); - query.set("filter", this.filter); - query.set("files", true); - if (this.options.itemsPerPage < 0) { - query.delete("itemsPerPage"); - } - const url = `/project/${this.$route.params.project}/sequence?${query.toString()}`; - - this.queuedReload = false; - this.items = await this.api([url]) || []; - + async fetchSequences (opts = {}) { + const options = { + text: this.filter, + ...this.options + }; + const res = await this.getSequences([this.$route.params.project, options]); + this.items = res.sequences; + this.sequenceCount = res.count; }, async getQueuedItems () { @@ -878,11 +849,11 @@ export default { return false; }, - ...mapActions(["api", "showSnack"]) + ...mapActions(["api", "showSnack", "getSequences"]) }, mounted () { - this.getSequences(); + this.fetchSequences(); this.getNumLines(); this.getQueuedItems(); }