From 182caed840d1302a87f274f51b1fb7e7d38d93bd Mon Sep 17 00:00:00 2001 From: Varun Patil Date: Mon, 23 Oct 2023 19:41:24 -0700 Subject: [PATCH] refactor(modal): reduce watchers Signed-off-by: Varun Patil --- src/components/ClusterView.vue | 10 ++-- src/components/frame/XImg.vue | 2 +- src/components/modal/FaceDeleteModal.vue | 37 +++++---------- src/components/modal/FaceEditModal.vue | 60 +++++++++--------------- src/components/modal/FaceList.vue | 47 ++++++++++--------- 5 files changed, 63 insertions(+), 93 deletions(-) diff --git a/src/components/ClusterView.vue b/src/components/ClusterView.vue index 940fbb25..04d00e34 100644 --- a/src/components/ClusterView.vue +++ b/src/components/ClusterView.vue @@ -70,25 +70,25 @@ export default defineComponent({ }, mounted() { - this.routeChange(); + this.refresh(); }, created() { - utils.bus.on('memories:user-config-changed', this.routeChange); + utils.bus.on('memories:user-config-changed', this.refresh); }, beforeDestroy() { - utils.bus.off('memories:user-config-changed', this.routeChange); + utils.bus.off('memories:user-config-changed', this.refresh); }, watch: { async $route() { - this.routeChange(); + this.refresh(); }, }, methods: { - async routeChange() { + async refresh() { try { this.items = []; this.loading++; diff --git a/src/components/frame/XImg.vue b/src/components/frame/XImg.vue index 530118c7..95d8ee53 100644 --- a/src/components/frame/XImg.vue +++ b/src/components/frame/XImg.vue @@ -43,7 +43,7 @@ export default defineComponent({ }, watch: { - src(newSrc, oldSrc) { + src() { this.loadImage(); }, }, diff --git a/src/components/modal/FaceDeleteModal.vue b/src/components/modal/FaceDeleteModal.vue index 76656b70..701d0237 100644 --- a/src/components/modal/FaceDeleteModal.vue +++ b/src/components/modal/FaceDeleteModal.vue @@ -39,17 +39,15 @@ export default defineComponent({ data: () => ({ show: false, - user: '', - name: '', }), - mounted() { - this.refreshParams(); - }, + computed: { + name() { + return this.$route.params.name; + }, - watch: { - $route() { - this.refreshParams(); + user() { + return this.$route.params.user; }, }, @@ -59,21 +57,12 @@ export default defineComponent({ }, open() { - const user = this.$route.params.user || ''; - if (this.$route.params.user !== utils.uid) { - showError( - this.t('memories', 'Only user "{user}" can delete this person', { - user, - }), - ); + if (this.user !== utils.uid) { + showError(this.t('memories', 'Only user "{user}" can delete this person', { user: this.user })); return; } - this.show = true; - }, - refreshParams() { - this.user = this.$route.params.user; - this.name = this.$route.params.name; + this.show = true; }, async save() { @@ -83,15 +72,11 @@ export default defineComponent({ } else { await dav.faceRecognitionSetPersonVisibility(this.name, false); } - this.$router.push({ name: this.$route.name as string }); + this.$router.push({ name: this.$route.name as string }); // "recognize" or "facerecognition" this.close(); } catch (error) { console.log(error); - showError( - this.t('photos', 'Failed to delete {name}.', { - name: this.name, - }), - ); + showError(this.t('photos', 'Failed to delete {name}.', { name: this.name })); } }, }, diff --git a/src/components/modal/FaceEditModal.vue b/src/components/modal/FaceEditModal.vue index e3e347d3..9a2f46e8 100644 --- a/src/components/modal/FaceEditModal.vue +++ b/src/components/modal/FaceEditModal.vue @@ -8,7 +8,7 @@ ({ show: false, - user: '', - name: '', - oldName: '', + input: '', }), - mounted() { - this.refreshParams(); - }, - - watch: { - $route() { - this.refreshParams(); - }, - }, - computed: { + name() { + return this.$route.params.name; + }, + + user() { + return this.$route.params.user; + }, + canSave() { - return this.name !== this.oldName && this.name !== '' && isNaN(Number(this.name)); + return this.input && this.name !== this.input && isNaN(Number(this.input)); }, }, @@ -76,49 +72,37 @@ export default defineComponent({ }, open() { - const user = this.$route.params.user || ''; - if (this.$route.params.user !== utils.uid) { - showError( - this.t('memories', 'Only user "{user}" can update this person', { - user, - }), - ); + if (this.user !== utils.uid) { + showError(this.t('memories', 'Only user "{user}" can update this person', { user: this.user })); return; } + + this.input = isNaN(Number(this.name)) ? this.name : String(); this.show = true; }, - refreshParams() { - this.user = String(this.$route.params.user); - this.name = String(this.$route.params.name); - this.oldName = this.name; - - // if name is number then it is blank - if (!isNaN(Number(this.name))) { - this.name = String(); - } - }, - async save() { if (!this.canSave) return; try { if (this.routeIsRecognize) { - await dav.recognizeRenameFace(this.user, this.oldName, this.name); + await dav.recognizeRenameFace(this.user, this.name, this.input); } else { - await dav.faceRecognitionRenamePerson(this.oldName, this.name); + await dav.faceRecognitionRenamePerson(this.name, this.input); } + this.$router.replace({ name: this.$route.name as string, - params: { user: this.user, name: this.name }, + params: { user: this.user, name: this.input }, }); + this.close(); } catch (error) { console.log(error); showError( this.t('photos', 'Failed to rename {oldName} to {name}.', { - oldName: this.oldName, - name: this.name, + oldName: this.name, + name: this.input, }), ); } diff --git a/src/components/modal/FaceList.vue b/src/components/modal/FaceList.vue index 3cdc9432..75224c01 100644 --- a/src/components/modal/FaceList.vue +++ b/src/components/modal/FaceList.vue @@ -59,24 +59,28 @@ export default defineComponent({ }, data: () => ({ - user: String(), - name: String(), list: null as ICluster[] | null, fuse: null as Fuse | null, search: String(), }), - watch: { - $route() { - this.refreshParams(); - }, - }, - mounted() { - this.refreshParams(); + this.refresh(); }, computed: { + user() { + return this.$route.params.user; + }, + + name() { + return this.$route.params.name; + }, + + backend() { + return this.$route.name as 'recognize' | 'facerecognition'; + }, + filteredList() { if (!this.list || !this.search || !this.fuse) return this.list || []; return this.fuse.search(this.search).map((r) => r.item); @@ -84,23 +88,20 @@ export default defineComponent({ }, methods: { - async refreshParams() { - this.user = this.$route.params.user; - this.name = this.$route.params.name; - this.list = null; - this.search = ''; - - const backend = this.routeIsRecognize ? 'recognize' : this.routeIsFaceRecognition ? 'facerecognition' : null; - console.assert(backend, '[BUG] Invalid route for FaceList'); - - const faces = await dav.getFaceList(backend!); - this.list = faces.filter((c: IFace) => c.user_id === this.user && String(c.name || c.cluster_id) !== this.name); - - this.fuse = new Fuse(this.list, { keys: ['name'] }); + async refresh() { + try { + this.list = null; + const faces = await dav.getFaceList(this.backend); + this.list = faces.filter((c: IFace) => c.user_id === this.user && String(c.name || c.cluster_id) !== this.name); + this.fuse = new Fuse(this.list, { keys: ['name'] }); + } catch (e) { + showError(this.t('memories', 'Failed to load faces')); + console.error(e); + } }, async addFace() { - let name: string = String(); + let name = String(); try { // TODO: use a proper dialog