Apply changes in Worker PBX

src/components/FormModel.vue

@@ -227,6 +227,7 @@ watch(formUrl, async () => {
 defineExpose({
     save,
     isLoading,
+    hasChanges,
 });
 </script>
 <template>

src/pages/Worker/Card/WorkerBasicData.vue

@@ -12,8 +12,6 @@ import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 const route = useRoute();
 const { t } = useI18n();
 
-const formInitialData = reactive({});
-
 const workersOptions = ref([]);
 const countriesOptions = ref([]);
 const educationLevelsOptions = ref([]);
@@ -71,7 +69,6 @@ const maritalStatus = [
 
     <FormModel
         :filter="workerFilter"
-        :form-initial-data="formInitialData"
         :url="`Workers/${route.params.id}`"
         auto-load
         model="Worker"

src/pages/Worker/Card/WorkerPBX.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, watch } from 'vue';
+import { watch, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
@@ -7,12 +7,13 @@ import { useState } from 'src/composables/useState';
 
 import FormModel from 'src/components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
 const state = useState();
 const route = useRoute();
-
-const formInitialData = reactive({});
+const workerPBXForm = ref();
+const extension = ref(null);
 
 const filter = {
     include: [
@@ -27,26 +28,39 @@ watch(
     () => state.set('extension', null)
 );
 
-const onFetch = (data) => state.set('extension', data?.sip?.extension);
+const onFetch = (data) => {
+    state.set('extension', data?.sip?.extension);
+    extension.value = state.get('extension');
+};
 
-const updateModelValue = (data) => state.set('extension', data);
+const updateModelValue = (data) => {
+    state.set('extension', data);
+    workerPBXForm.value.hasChanges = true;
+};
 </script>
 
 <template>
     <FormModel
+        ref="workerPBXForm"
         :filter="filter"
-        :form-initial-data="formInitialData"
         :url="`Workers/${route.params.id}`"
+        url-update="Sips"
         auto-load
+        :mapper="
+            () => ({
+                userFk: +route.params.id,
+                extension,
+            })
+        "
         model="DeviceProductionUser"
         @on-fetch="onFetch"
     >
-        <template #form="{ data }">
+        <template #form="{}">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         :label="t('worker.summary.sipExtension')"
-                        :model-value="data?.sip?.extension"
+                        v-model="extension"
                         @update:model-value="updateModelValue"
                     />
                 </div>

worker.patch

@@ -0,0 +1,105 @@
+diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
+index 6fa17dfc..74917b1c 100644
+--- a/src/components/FormModel.vue
++++ b/src/components/FormModel.vue
+@@ -227,6 +227,7 @@ watch(formUrl, async () => {
+ defineExpose({
+     save,
+     isLoading,
++    hasChanges,
+ });
+ </script>
+ <template>
+@@ -252,6 +253,7 @@ defineExpose({
+         to="#st-actions"
+         v-if="stateStore?.isSubToolbarShown() && componentIsRendered"
+     >
++        {{ hasChanges }}
+         <div v-if="$props.defaultActions">
+             <QBtnGroup push class="q-gutter-x-sm">
+                 <slot name="moreActions" />
+diff --git a/src/pages/Worker/Card/WorkerBasicData.vue b/src/pages/Worker/Card/WorkerBasicData.vue
+index be362c72..dcc37208 100644
+--- a/src/pages/Worker/Card/WorkerBasicData.vue
++++ b/src/pages/Worker/Card/WorkerBasicData.vue
+@@ -71,7 +71,6 @@ const maritalStatus = [
+
+     <FormModel
+         :filter="workerFilter"
+-        :form-initial-data="formInitialData"
+         :url="`Workers/${route.params.id}`"
+         auto-load
+         model="Worker"
+diff --git a/src/pages/Worker/Card/WorkerPBX.vue b/src/pages/Worker/Card/WorkerPBX.vue
+index 53dd8058..68119406 100644
+--- a/src/pages/Worker/Card/WorkerPBX.vue
++++ b/src/pages/Worker/Card/WorkerPBX.vue
+@@ -1,5 +1,5 @@
+ <script setup>
+-import { reactive, watch } from 'vue';
++import { watch, ref } from 'vue';
+ import { useI18n } from 'vue-i18n';
+ import { useRoute } from 'vue-router';
+
+@@ -7,12 +7,13 @@ import { useState } from 'src/composables/useState';
+
+ import FormModel from 'src/components/FormModel.vue';
+ import VnRow from 'components/ui/VnRow.vue';
++import VnInput from 'src/components/common/VnInput.vue';
+
+ const { t } = useI18n();
+ const state = useState();
+ const route = useRoute();
+-
+-const formInitialData = reactive({});
++const workerPBXForm = ref();
++const extension = ref(null);
+
+ const filter = {
+     include: [
+@@ -27,26 +28,39 @@ watch(
+     () => state.set('extension', null)
+ );
+
+-const onFetch = (data) => state.set('extension', data?.sip?.extension);
++const onFetch = (data) => {
++    state.set('extension', data?.sip?.extension);
++    extension.value = state.get('extension');
++};
+
+-const updateModelValue = (data) => state.set('extension', data);
++const updateModelValue = (data) => {
++    state.set('extension', data);
++    workerPBXForm.value.hasChanges = true;
++};
+ </script>
+
+ <template>
+     <FormModel
++        ref="workerPBXForm"
+         :filter="filter"
+-        :form-initial-data="formInitialData"
+         :url="`Workers/${route.params.id}`"
++        url-update="Sips"
+         auto-load
++        :mapper="
++            () => ({
++                userFk: +route.params.id,
++                extension,
++            })
++        "
+         model="DeviceProductionUser"
+         @on-fetch="onFetch"
+     >
+-        <template #form="{ data }">
++        <template #form="{}">
+             <VnRow class="row q-gutter-md q-mb-md">
+                 <div class="col">
+-                    <QInput
++                    <VnInput
+                         :label="t('worker.summary.sipExtension')"
+-                        :model-value="data?.sip?.extension"
++                        v-model="extension"
+                         @update:model-value="updateModelValue"
+                     />
+                 </div>