feat: refs #6273 freelance form & vnRadio

src/components/common/VnRadio.vue

@@ -0,0 +1,6 @@
+<script setup>
+const model = defineModel({ type: Boolean, required: true });
+</script>
+<template>
+    <QRadio v-model="model" v-bind="$attrs" dense :dark="true" class="q-mr-sm" />
+</template>

src/pages/Worker/WorkerCreate.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+import { onBeforeMount, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useUserConfig } from 'src/composables/useUserConfig';
 import VnRow from 'components/ui/VnRow.vue';
@@ -12,43 +12,18 @@ import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
+import VnRadio from 'src/components/common/VnRadio.vue';
+import { useStateStore } from 'src/stores/useStateStore';
 
 const { t } = useI18n();
-
-const newWorkerForm = ref({
-    companyFk: null,
-    payMethodFk: null,
-    firstName: null,
-    lastNames: null,
-    birth: null,
-    fi: null,
-    code: null,
-    phone: null,
-    postcode: null,
-    provinceFk: null,
-    city: null,
-    street: null,
-    name: null,
-    email: null,
-    bossFk: null,
-    iban: null,
-    bankEntityFk: null,
-});
+const state = useStateStore();
 
 const companiesOptions = ref([]);
 const workersOptions = ref([]);
 const payMethodsOptions = ref([]);
 const bankEntitiesOptions = ref([]);
 const postcodesOptions = ref([]);
-const isFreelancer = ref(false);
-
-const onFetchWorkerConfig = (workerConfig) => {
-    newWorkerForm.value.payMethodFk = workerConfig.payMethodFk;
-};
-
-const onBankEntityCreated = (data) => {
-    bankEntitiesOptions.value.push(data);
-};
+const formData = ref({ isFreelance: false });
 
 function handleLocation(data, location) {
     const { town, code, provinceFk, countryFk } = location ?? {};
@@ -58,15 +33,15 @@ function handleLocation(data, location) {
     data.countryFk = countryFk;
 }
 
-onMounted(async () => {
+onBeforeMount(async () => {
     const userInfo = await useUserConfig().fetch();
-    newWorkerForm.value = { companyFk: userInfo.companyFk };
+    formData.value.companyFk = userInfo.companyFk;
 });
 </script>
 <template>
     <FetchData
         url="WorkerConfigs/findOne"
-        @on-fetch="(data) => onFetchWorkerConfig(data)"
+        @on-fetch="(data) => (formData.payMethodFk = data.payMethodFk)"
         :filter="{ field: ['payMethodFk'] }"
         auto-load
     />
@@ -93,15 +68,21 @@ onMounted(async () => {
     <QPage>
         <VnSubToolbar>
             <template #st-data>
-                <QRadio v-model="isFreelancer" :val="false" :label="`${t('Internal')}`" />
-                <QRadio v-model="isFreelancer" :val="true" :label="`${t('External')}`" />
+                <VnRadio
+                    v-model="formData.isFreelance"
+                    :val="false"
+                    :label="`${t('Internal')}`"
+                    @update:model-value="state.set('worker', formData)"
+                />
+                <VnRadio
+                    v-model="formData.isFreelance"
+                    :val="true"
+                    :label="`${t('External')}`"
+                    @update:model-value="state.set('worker', formData)"
+                />
             </template>
         </VnSubToolbar>
-        <FormModel
-            url-create="Workers/new"
-            model="worker"
-            :form-initial-data="newWorkerForm"
-        >
+        <FormModel url-create="Workers/new" model="worker" :form-initial-data="formData">
             <template #form="{ data, validate }">
                 <VnRow>
                     <VnInput
@@ -169,19 +150,19 @@ onMounted(async () => {
                         v-model="data.fi"
                         :label="t('worker.create.fi')"
                         :rules="validate('Worker.fi')"
-                        :disable="isFreelancer"
+                        :disable="formData.isFreelance"
                     />
                     <VnInputDate
                         v-model="data.birth"
                         :label="t('worker.create.birth')"
                         :rules="validate('Worker.birth')"
-                        :disable="isFreelancer"
+                        :disable="formData.isFreelance"
                     />
                     <VnInput
                         v-model="data.phone"
                         :label="t('worker.create.phone')"
                         :rules="validate('Worker.phone')"
-                        :disable="isFreelancer"
+                        :disable="formData.isFreelance"
                     />
                 </VnRow>
                 <VnRow>
@@ -191,7 +172,7 @@ onMounted(async () => {
                         :options="postcodesOptions"
                         v-model="data.location"
                         @update:model-value="(location) => handleLocation(data, location)"
-                        :disable="isFreelancer"
+                        :disable="formData.isFreelance"
                     >
                     </VnLocation>
                 </VnRow>
@@ -200,7 +181,7 @@ onMounted(async () => {
                         :label="t('worker.create.street')"
                         v-model="data.street"
                         :rules="validate('Worker.street')"
-                        :disable="isFreelancer"
+                        :disable="formData.isFreelance"
                     />
                 </VnRow>
                 <VnRow>
@@ -213,13 +194,13 @@ onMounted(async () => {
                         map-options
                         hide-selected
                         :rules="validate('Worker.payMethodFk')"
-                        :disable="isFreelancer"
+                        :disable="formData.isFreelance"
                     />
                     <VnInput
                         v-model="data.iban"
                         :label="t('worker.create.iban')"
                         :rules="validate('Worker.iban')"
-                        :disable="isFreelancer"
+                        :disable="formData.isFreelance"
                     >
                         <template #append>
                             <QIcon name="info" class="cursor-info">
@@ -236,11 +217,11 @@ onMounted(async () => {
                         hide-selected
                         :roles-allowed-to-create="['salesAssistant', 'hr']"
                         :rules="validate('Worker.bankEntity')"
-                        :disable="isFreelancer"
+                        :disable="formData.isFreelance"
                     >
                         <template #form>
                             <CreateBankEntityForm
-                                @on-data-saved="onBankEntityCreated($event)"
+                                @on-data-saved="(data) => bankEntitiesOptions.push(data)"
                             />
                         </template>
                         <template #option="scope">