Add department basic data

src/components/FormModel.vue

@@ -58,7 +58,7 @@ const $props = defineProps({
     mapper: {
         type: Function,
         default: null,
-    }
+    },
 });
 
 const emit = defineEmits(['onFetch', 'onDataSaved']);
@@ -129,7 +129,7 @@ async function save() {
     isLoading.value = true;
 
     try {
-        const body = $props.mapper ? $props.mapper(formData.value) : formData.value
+        const body = $props.mapper ? $props.mapper(formData.value) : formData.value;
         if ($props.urlCreate) {
             await axios.post($props.urlCreate, body);
             notify('globals.dataCreated', 'positive');
@@ -179,11 +179,14 @@ watch(formUrl, async () => {
 });
 </script>
 <template>
-    <QBanner v-if="$props.observeFormChanges && hasChanges" class="text-white bg-warning">
+    <QBanner
+        v-if="$props.observeFormChanges && hasChanges"
+        class="text-white bg-warning full-width"
+    >
         <QIcon name="warning" size="md" class="q-mr-md" />
         <span>{{ t('globals.changesToSave') }}</span>
     </QBanner>
-    <div class="column items-center">
+    <div class="column items-center full-width">
         <QForm
             v-if="formData"
             @submit="save"

src/i18n/en/index.js

@@ -610,7 +610,6 @@ export default {
             department: 'Department',
             summary: 'Summary',
         },
-        basicData: 'Basic data',
         name: 'Name',
         code: 'Code',
         chat: 'Chat',

src/i18n/es/index.js

@@ -610,7 +610,6 @@ export default {
             department: 'Departamentos',
             summary: 'Resumen',
         },
-        basicData: 'Datos básicos',
         name: 'Nombre',
         code: 'Código',
         chat: 'Chat',

src/pages/Department/Card/DepartmentBasicData.vue

@@ -1,3 +1,135 @@
-<script setup></script>
+<script setup>
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 
-<template>Department basic data</template>
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const workersOptions = ref([]);
+const clientsOptions = ref([]);
+</script>
+<template>
+    <fetch-data
+        url="Workers/search"
+        @on-fetch="(data) => (workersOptions = data)"
+        auto-load
+    />
+    <fetch-data url="Clients" @on-fetch="(data) => (clientsOptions = data)" auto-load />
+    <FormModel
+        :url="`Departments/${route.params.id}`"
+        model="department"
+        auto-load
+        class="full-width"
+    >
+        <template #form="{ data, validate }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        :label="t('department.name')"
+                        v-model="data.name"
+                        :rules="validate('department.name')"
+                        clearable
+                        autofocus
+                    />
+                </div>
+                <div class="col">
+                    <VnInput
+                        v-model="data.code"
+                        :label="t('department.code')"
+                        :rules="validate('department.code')"
+                        clearable
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        :label="t('department.chat')"
+                        v-model="data.chatName"
+                        :rules="validate('department.chat')"
+                        clearable
+                    />
+                </div>
+                <div class="col">
+                    <VnInput
+                        v-model="data.notificationEmail"
+                        :label="t('department.email')"
+                        :rules="validate('department.email')"
+                        clearable
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('department.bossDepartment')"
+                        v-model="data.workerFk"
+                        :options="workersOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        map-options
+                        :rules="validate('department.workerFk')"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('department.selfConsumptionCustomer')"
+                        v-model="data.clientFk"
+                        :options="clientsOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        map-options
+                        :rules="validate('department.clientFk')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox
+                        :label="t('department.telework')"
+                        v-model="data.isTeleworking"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        :label="t('department.notifyOnErrors')"
+                        v-model="data.hasToMistake"
+                        :false-value="0"
+                        :true-value="1"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox
+                        :label="t('department.worksInProduction')"
+                        v-model="data.isProduction"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        :label="t('department.hasToRefill')"
+                        v-model="data.hasToRefill"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox
+                        :label="t('department.hasToSendMail')"
+                        v-model="data.hasToSendMail"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>

src/pages/Department/Card/DepartmentCard.vue

@@ -26,9 +26,3 @@ const stateStore = useStateStore();
         </QPage>
     </QPageContainer>
 </template>
-
-<i18n>
-es:
-    Search worker: Buscar trabajador
-    You can search by worker id or name: Puedes buscar por id o nombre del trabajador
-</i18n>