From b9658a1699427b0285047a510bec5853043000af Mon Sep 17 00:00:00 2001
From: Urban Suppiger <urban@suppiger.net>
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"
           />
-          <span v-else v-text="item.props['v-model']" />
+          <span v-else v-text="item.value" />
         </template>
         <template #[`item.e`]="{ item }">
-          <component :is="item.component('e')" v-bind="{ ...item.props, ...config }" />
+          <component
+            :is="item.component('e')"
+            v-bind="{ ...item.props, ...config }"
+            v-model="item.value"
+          />
         </template>
         <template #[`item.api`]="{ item }">
           <component
             :is="item.component('api')"
-            v-if="profileUri !== null"
+            v-if="item.props.uri !== null"
             v-bind="{ ...item.props, ...config }"
             :auto-save="false"
-            :uri="profileUri"
           />
         </template>
         <template #[`item.api.autosave`]="{ item }">
           <component
             :is="item.component('api')"
-            v-if="profileUri !== null"
+            v-if="item.props.uri !== null"
             v-bind="{ ...item.props, ...config }"
-            :uri="profileUri"
           />
         </template>
       </v-data-table>
@@ -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,