refactor(desk)!: remove watchers from i-value components

Author: zzhenryquezz

package-lock.json

@@ -4,7 +4,7 @@ export default {
 }
 </script>
 <script setup lang="ts">
-import { computed, useAttrs, defineAsyncComponent } from 'vue'
+import { useAttrs, defineAsyncComponent } from 'vue'
 
 import { ColumnType } from '@core/entities/column'
 import { createBindings } from '@/composables/binding'
@@ -40,7 +40,9 @@ defineProps({
 
 // bindings
 
-const bindings = computed(() => createBindings(useAttrs(), ['input', 'select']))
+const attrs = useAttrs()
+
+const bindings = createBindings(attrs, ['input', 'select'])
 </script>
 
 <template>

packages/desktop/modules/item/components/IValue.vue

@@ -18,12 +18,7 @@ const props = defineProps({
     },
 })
 
-const { payload, load, column, loading } = createValue()
-
-watch(props, load, {
-    deep: true,
-    immediate: true,
-})
+const { payload, column, loading, save } = createValue(props)
 
 const edit = ref(false)
 
@@ -45,13 +40,13 @@ const display = computed(() => {
 
 <template>
     <v-input
-        v-if="loading.all"
+        v-if="loading"
         :model-value="`${$t('loading')}...`"
         class="text-t-secondary text-sm"
         readonly
     />
 
-    <v-input v-else-if="edit" v-model="payload">
+    <v-input v-else-if="edit" v-model="payload" @update:model-value="save">
         <template #append>
             <v-btn size="sm" color="b-secondary" @click="edit = false">
                 <v-icon name="check" />

packages/desktop/modules/item/components/IValueDate.vue

@@ -4,7 +4,6 @@ export default {
 }
 </script>
 <script setup lang="ts">
-import { watch } from 'vue'
 import template from 'lodash/template'
 import uuid from 'uuid-random'
 
@@ -28,12 +27,7 @@ const props = defineProps({
     },
 })
 
-const { payload, load, column, item, loading } = createValue<string | null>()
-
-watch(props, load, {
-    deep: true,
-    immediate: true,
-})
+const { payload, column, item, save, loading } = createValue<string | null>(props)
 
 // upload
 const store = useStore()
@@ -84,6 +78,8 @@ function upload() {
         }
 
         payload.value = path
+
+        await save()
     }
 
     input.click()
@@ -92,7 +88,7 @@ function upload() {
 
 <template>
     <v-input
-        v-if="loading.all"
+        v-if="loading"
         :model-value="`${$t('loading')}...`"
         class="text-t-secondary text-sm"
         readonly

packages/desktop/modules/item/components/IValueEntry.vue

@@ -18,12 +18,7 @@ const props = defineProps({
     },
 })
 
-const { payload, load, loading } = createValue()
-
-watch(props, load, {
-    deep: true,
-    immediate: true,
-})
+const { payload, loading, save } = createValue(props)
 
 const edit = ref(false)
 
@@ -52,13 +47,13 @@ const display = computed(() => {
 
 <template>
     <v-input
-        v-if="loading.all"
+        v-if="loading"
         :model-value="`${$t('loading')}...`"
         class="text-t-secondary text-sm"
         readonly
     />
 
-    <v-input v-else-if="edit" v-model="payload">
+    <v-input v-else-if="edit" v-model="payload" @update:model-value="save">
         <template #append>
             <v-btn size="text-xs px-2 " text @click="edit = false">
                 <v-icon name="check" />

packages/desktop/modules/item/components/IValueLink.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { watch } from 'vue'
-
 import { createValue } from '@/modules/item/composables/value'
 
 const props = defineProps({
@@ -18,21 +16,16 @@ const props = defineProps({
     },
 })
 
-const { payload, load, loading } = createValue()
-
-watch(props, load, {
-    deep: true,
-    immediate: true,
-})
+const { payload, loading, save } = createValue(props)
 </script>
 
 <template>
     <v-input
-        v-if="loading.all"
+        v-if="loading"
         :model-value="`${$t('loading')}...`"
         class="text-t-secondary text-sm"
         readonly
     />
 
-    <v-input v-else v-model="payload" type="number" />
+    <v-input v-else v-model="payload" type="number" @update:model-value="save" />
 </template>

packages/desktop/modules/item/components/IValueNumber.vue

@@ -23,12 +23,7 @@ const props = defineProps({
 
 // value
 
-const { payload, load, column, loading } = createValue()
-
-watch(props, load, {
-    deep: true,
-    immediate: true,
-})
+const { payload, column, loading, save } = createValue(props)
 
 // options
 const store = useStore()
@@ -46,7 +41,7 @@ watch(column, setOptions)
 
 <template>
     <v-input
-        v-if="loading.all"
+        v-if="loading"
         :model-value="`${$t('loading')}...`"
         class="text-t-secondary text-sm"
         readonly
@@ -63,8 +58,9 @@ watch(column, setOptions)
         v-else
         v-model="payload"
         :options="options"
-        value-key="id"
-        :label-key="column.displayField"
         :clear-value="() => null"
+        :label-key="column.displayField"
+        value-key="id"
+        @update:model-value="save"
     />
 </template>

packages/desktop/modules/item/components/IValueRelation.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch, ref } from 'vue'
+import { ref } from 'vue'
 
 import { createValue } from '@/modules/item/composables/value'
 import EvaluationOutput from '@/../core/entities/evaluation-output'
@@ -20,11 +20,10 @@ const props = defineProps({
     },
 })
 
-const { load, column, item, loading } = createValue()
-
-watch(props, load, {
-    deep: true,
-    immediate: true,
+const { loading, column, item, onLoaded } = createValue({
+    collectionId: props.collectionId,
+    columnId: props.columnId,
+    itemId: props.itemId,
 })
 
 // execute script
@@ -44,13 +43,12 @@ function setResult() {
         .then((r) => (output.value = r))
         .catch(() => (output.value = undefined))
 }
-
-watch([column, item], setResult)
+onLoaded(setResult)
 </script>
 
 <template>
     <v-input
-        v-if="loading.all"
+        v-if="loading"
         :model-value="`${$t('loading')}...`"
         class="text-t-secondary text-sm"
         readonly

packages/desktop/modules/item/components/IValueScript.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch, computed } from 'vue'
+import { computed } from 'vue'
 
 import { createValue } from '@/modules/item/composables/value'
 
@@ -18,11 +18,10 @@ const props = defineProps({
     },
 })
 
-const { payload, load, column, loading } = createValue()
-
-watch(props, load, {
-    deep: true,
-    immediate: true,
+const { payload, loading, column, save } = createValue({
+    collectionId: props.collectionId,
+    columnId: props.columnId,
+    itemId: props.itemId,
 })
 
 const options = computed(() => {
@@ -34,11 +33,17 @@ const options = computed(() => {
 
 <template>
     <v-input
-        v-if="loading.all"
+        v-if="loading"
         :model-value="`${$t('loading')}...`"
         class="text-t-secondary text-sm"
         readonly
     />
 
-    <v-select v-else v-model="payload" :options="options" :clear-value="() => null" />
+    <v-select
+        v-else
+        v-model="payload"
+        :options="options"
+        :clear-value="() => null"
+        @update:model-value="save"
+    />
 </template>

packages/desktop/modules/item/components/IValueSelect.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { watch } from 'vue'
-
 import { createValue } from '@/modules/item/composables/value'
 
 const props = defineProps({
@@ -18,21 +16,20 @@ const props = defineProps({
     },
 })
 
-const { payload, load, loading } = createValue()
-
-watch(props, load, {
-    deep: true,
-    immediate: true,
+const { payload, loading, save } = createValue({
+    collectionId: props.collectionId,
+    columnId: props.columnId,
+    itemId: props.itemId,
 })
 </script>
 
 <template>
     <v-input
-        v-if="loading.all"
+        v-if="loading"
         :model-value="`${$t('loading')}...`"
         class="text-t-secondary text-sm"
         readonly
     />
 
-    <v-input v-else v-model="payload" />
+    <v-input v-else v-model="payload" @update:model-value="save" />
 </template>

packages/desktop/modules/item/components/IValueText.vue

@@ -19,12 +19,7 @@ const props = defineProps({
     },
 })
 
-const { load, column, item, loading } = createValue()
-
-watch(props, load, {
-    deep: true,
-    immediate: true,
-})
+const { column, item, loading } = createValue(props)
 
 // display
 const display = computed(() => {
@@ -40,7 +35,7 @@ const display = computed(() => {
 
 <template>
     <v-input
-        v-if="loading.all"
+        v-if="loading"
         :model-value="`${$t('loading')}...`"
         class="text-t-secondary text-sm"
         readonly