From b9658a1699427b0285047a510bec5853043000af Mon Sep 17 00:00:00 2001 From: Urban Suppiger Date: Sat, 30 Sep 2023 14:24:50 +0200 Subject: [PATCH] fix auto-save; use sensible endpoints for Controls page --- .../src/components/form/api/ApiWrapper.vue | 8 +- frontend/src/views/dev/Controls.vue | 77 +++++++++++++------ 2 files changed, 59 insertions(+), 26 deletions(-) diff --git a/frontend/src/components/form/api/ApiWrapper.vue b/frontend/src/components/form/api/ApiWrapper.vue index 0b2a4f8ca3..64e9577a9a 100644 --- a/frontend/src/components/form/api/ApiWrapper.vue +++ b/frontend/src/components/form/api/ApiWrapper.vue @@ -151,6 +151,11 @@ export default { if (!this.value) this.reload() this.localValue = this.apiValue + + // don't move this to methods option + // functions within the methods options are shared across instances + // https://github.com/ecamp/ecamp3/issues/3839 + this.debouncedSave = debounce(this.save, this.autoSaveDelay) }, mounted() { this.isMounted = true @@ -164,9 +169,6 @@ export default { this.debouncedSave() } }, - debouncedSave() { - return debounce(this.save, this.autoSaveDelay).call() - }, // reload data from API (doesn't force loading from server if available locally) reload() { this.resetErrors() diff --git a/frontend/src/views/dev/Controls.vue b/frontend/src/views/dev/Controls.vue index a14c38b895..a8ceceaff8 100644 --- a/frontend/src/views/dev/Controls.vue +++ b/frontend/src/views/dev/Controls.vue @@ -29,27 +29,30 @@ :is="item.component('v')" v-if="item.component('v') !== ''" v-bind="{ ...item.props, ...config }" + v-model="item.value" /> - + @@ -138,10 +141,11 @@ export default { { id: 'text-field', component: (type) => `${type}-text-field`, + value: this.textfieldValue, props: { - 'v-model': this.textfieldValue, placeholder: this.placeholder, fieldname: 'nickname', + uri: this.profileUri, }, }, { @@ -151,81 +155,90 @@ export default { 'v-model.number': this.textfieldValue, placeholder: this.placeholder, inputmode: 'numeric', - fieldname: 'nickname', + fieldname: 'quantity', + uri: this.materialUri, }, }, { id: 'textarea', component: (type) => `${type}-textarea`, + value: this.textareaValue, props: { - 'v-model': this.textareaValue, placeholder: this.placeholder, rows: 3, - fieldname: 'nickname', + fieldname: 'data.html', + uri: this.singleTextUri, }, }, { id: 'richtext', component: (type) => (type === 'v' ? 'v-tiptap-editor' : `${type}-richtext`), + value: this.richtextValue, props: { - 'v-model': this.richtextValue, placeholder: this.placeholder, rows: 3, - fieldname: 'nickname', + fieldname: 'data.html', + uri: this.singleTextUri, }, }, { id: 'select', component: (type) => `${type}-select`, + value: this.selectValue, props: { - 'v-model': this.selectValue, fieldname: 'language', placeholder: this.placeholder, items: this.availableLocales, + uri: this.profileUri, }, }, { id: 'checkbox', component: (type) => `${type}-checkbox`, + value: this.checkboxValue, props: { - 'v-model': this.checkboxValue, - fieldname: 'nickname', + fieldname: 'printYSLogoOnPicasso', + uri: this.campUri, }, }, { id: 'switch', component: (type) => `${type}-switch`, + value: this.checkboxValue, props: { - 'v-model': this.checkboxValue, - fieldname: 'nickname', + fieldname: 'printYSLogoOnPicasso', + uri: this.campUri, }, }, { id: 'date-picker', component: (type) => (type === 'v' ? '' : `${type}-date-picker`), + value: this.dateValue, props: { - 'v-model': this.dateValue, placeholder: this.placeholder, - fieldname: 'nickname', + fieldname: 'start', + uri: this.periodUri, }, }, { id: 'time-picker', component: (type) => (type === 'v' ? '' : `${type}-time-picker`), + value: this.timeValue, props: { - 'v-model': this.timeValue, placeholder: this.placeholder, 'value-format': 'YYYY-MM-DDTHH:mm:ssZ', - fieldname: 'nickname', + fieldname: 'start', + uri: this.scheduleEntryUri, }, }, { id: 'color-picker', component: (type) => (type === 'v' ? '' : `${type}-color-picker`), + value: this.colorValue, props: { - 'v-model': this.colorValue, placeholder: this.placeholder, - fieldname: 'nickname', + fieldname: 'color', + uri: this.categoryUri, }, }, ] @@ -233,6 +246,24 @@ export default { profileUri() { return this.$store.state.auth.user?.profile()._meta.self ?? null }, + campUri() { + return '/api/camps/6973c230d6b1' // Harry Potter - Lager + }, + periodUri() { + return '/api/periods/fe47dfd2b541' // Harry Potter - Hauptlager + }, + categoryUri() { + return '/api/categories/e7559fc16388' // Harry Potter - Lageraktivität + }, + materialUri() { + return '/api/material_items/04be1b6159dc' // Harry Potter- LA Lagerbau - Schatztruhe + }, + singleTextUri() { + return '/api/content_node/single_texts/d5c2ece2bedf' // Harry Potter - LA Lagerbau - Roter Faden + }, + scheduleEntryUri() { + return '/api/schedule_entries/b6668dffbb2b' // Harry Potter - LA Lagerbau + }, availableLocales() { return VueI18n.availableLocales.map((l) => ({ value: l,