Aaltronav/dougal-software
1
0
Fork 0
mirror of https://gitlab.com/wgp/dougal/software.git synced 2025-12-06 11:27:09 +00:00
Code Issues Packages Projects Releases Activity

Adapt SequenceList component to Vuex use for fetching data

Browse Source
This commit is contained in:
D. Berge
2023-10-25 16:15:17 +02:00
parent 171feb9dd2
commit 847f49ad7c
1 changed files with 37 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
lib/www/client/source/src/views/SequenceList.vue
View File

@@ -148,15 +148,16 @@
:headers="headers" :headers="headers"
:items="items" :items="items"
:items-per-page.sync="itemsPerPage" :items-per-page.sync="itemsPerPage"
:server-items-length="sequenceCount"
item-key="sequence" 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' : ''" :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" @click:row="setActiveItem"
@contextmenu:row="contextMenu" @contextmenu:row="contextMenu"
> >
@@ -176,7 +177,7 @@
icon icon
small small
title="Cancel edit" title="Cancel edit"
:disabled="loading" :disabled="sequencesLoading"
@click="edit.value = item.remarks; edit = null" @click="edit.value = item.remarks; edit = null"
> >
<v-icon small>mdi-close</v-icon> <v-icon small>mdi-close</v-icon>
@@ -185,7 +186,7 @@
icon icon
small small
title="Save edits" title="Save edits"
:disabled="loading" :disabled="sequencesLoading"
@click="edit = null" @click="edit = null"
> >
<v-icon small>mdi-content-save-edit-outline</v-icon> <v-icon small>mdi-content-save-edit-outline</v-icon>
@@ -196,7 +197,7 @@
icon icon
small small
title="Edit" title="Edit"
:disabled="loading" :disabled="sequencesLoading"
@click="editItem(item, 'remarks')" @click="editItem(item, 'remarks')"
> >
<v-icon small>mdi-square-edit-outline</v-icon> <v-icon small>mdi-square-edit-outline</v-icon>
@@ -210,7 +211,7 @@
class="markdown" class="markdown"
autofocus autofocus
placeholder="Enter your text here" placeholder="Enter your text here"
:disabled="loading" :disabled="sequencesLoading"
v-model="edit.value" v-model="edit.value"
> >
</v-textarea> </v-textarea>
@@ -228,7 +229,7 @@
icon icon
small small
title="Cancel edit" title="Cancel edit"
:disabled="loading" :disabled="sequencesLoading"
@click="edit.value = item.remarks_final; edit = null" @click="edit.value = item.remarks_final; edit = null"
> >
<v-icon small>mdi-close</v-icon> <v-icon small>mdi-close</v-icon>
@@ -237,7 +238,7 @@
icon icon
small small
title="Save edits" title="Save edits"
:disabled="loading" :disabled="sequencesLoading"
@click="edit = null" @click="edit = null"
> >
<v-icon small>mdi-content-save-edit-outline</v-icon> <v-icon small>mdi-content-save-edit-outline</v-icon>
@@ -248,7 +249,7 @@
icon icon
small small
title="Edit" title="Edit"
:disabled="loading" :disabled="sequencesLoading"
@click="editItem(item, 'remarks_final')" @click="editItem(item, 'remarks_final')"
> >
<v-icon small>mdi-square-edit-outline</v-icon> <v-icon small>mdi-square-edit-outline</v-icon>
@@ -262,7 +263,7 @@
class="markdown" class="markdown"
autofocus autofocus
placeholder="Enter your text here" placeholder="Enter your text here"
:disabled="loading" :disabled="sequencesLoading"
v-model="edit.value" v-model="edit.value"
> >
</v-textarea> </v-textarea>
@@ -566,7 +567,7 @@ export default {
items: [], items: [],
filter: "", filter: "",
options: {}, options: {},
num_rows: null, sequenceCount: null,
activeItem: null, activeItem: null,
edit: null, // {sequence, key, value} edit: null, // {sequence, key, value}
queuedReload: false, queuedReload: false,
@@ -593,17 +594,22 @@ export default {
return this.queuedItems.find(i => i.payload.sequence == this.contextMenuItem.sequence); return this.queuedItems.find(i => i.payload.sequence == this.contextMenuItem.sequence);
}, },
...mapGetters(['user', 'writeaccess', 'loading', 'serverEvent']) ...mapGetters(['user', 'writeaccess', 'sequencesLoading', 'sequences'])
}, },
watch: { watch: {
options: { options: {
handler () { handler () {
this.getSequences(); this.fetchSequences();
}, },
deep: true deep: true
}, },
async sequences () {
await this.fetchSequences();
},
async edit (newVal, oldVal) { async edit (newVal, oldVal) {
if (newVal === null && oldVal !== null) { if (newVal === null && oldVal !== null) {
const item = this.items.find(i => i.sequence == oldVal.sequence); const item = this.items.find(i => i.sequence == oldVal.sequence);
@@ -617,39 +623,9 @@ export default {
} }
}, },
async serverEvent (event) { filter (newVal, oldVal) {
const subscriptions = ["raw_lines", "final_lines", "final_shots"]; if (newVal?.toLowerCase() != oldVal?.toLowerCase()) {
if (subscriptions.includes(event.channel) && event.payload.pid == this.$route.params.project) { this.fetchSequences();
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();
} }
}, },
@@ -818,19 +794,14 @@ export default {
this.num_rows = projectInfo.sequences; this.num_rows = projectInfo.sequences;
}, },
async getSequences () { async fetchSequences (opts = {}) {
const options = {
const query = new URLSearchParams(this.options); text: this.filter,
query.set("filter", this.filter); ...this.options
query.set("files", true); };
if (this.options.itemsPerPage < 0) { const res = await this.getSequences([this.$route.params.project, options]);
query.delete("itemsPerPage"); this.items = res.sequences;
} this.sequenceCount = res.count;
const url = `/project/${this.$route.params.project}/sequence?${query.toString()}`;
this.queuedReload = false;
this.items = await this.api([url]) || [];
}, },
async getQueuedItems () { async getQueuedItems () {
@@ -878,11 +849,11 @@ export default {
return false; return false;
}, },
...mapActions(["api", "showSnack"]) ...mapActions(["api", "showSnack", "getSequences"])
}, },
mounted () { mounted () {
this.getSequences(); this.fetchSequences();
this.getNumLines(); this.getNumLines();
this.getQueuedItems(); this.getQueuedItems();
} }