Thermograph create form and general improvements

src/components/CreateThermographForm.vue

@@ -0,0 +1,113 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FormModelPopup from './FormModelPopup.vue';
+
+const emit = defineEmits(['onDataSaved']);
+
+const { t } = useI18n();
+
+const thermographFormData = reactive({
+    thermographId: null,
+    model: 'DISPOSABLE',
+    warehouseId: null,
+    temperatureFk: 'cool',
+});
+
+const thermographsModels = ref(null);
+const warehousesOptions = ref([]);
+const temperaturesOptions = ref([]);
+
+const onDataSaved = (dataSaved) => {
+    emit('onDataSaved', dataSaved);
+};
+</script>
+
+<template>
+    <FetchData
+        @on-fetch="(data) => (thermographsModels = data)"
+        auto-load
+        url="Thermographs/getThermographModels"
+    />
+    <FetchData
+        @on-fetch="(data) => (warehousesOptions = data)"
+        auto-load
+        url="Warehouses"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
+    />
+    <FetchData
+        @on-fetch="(data) => (temperaturesOptions = data)"
+        auto-load
+        url="Temperatures"
+    />
+    <FormModelPopup
+        url-create="Thermographs/createThermograph"
+        model="thermograph"
+        :title="t('New thermograph')"
+        :form-initial-data="thermographFormData"
+        @on-data-saved="onDataSaved($event)"
+    >
+        <template #form-inputs="{ data, validate }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        :label="t('Identifier')"
+                        v-model="data.thermographId"
+                        :required="true"
+                        :rules="validate('thermograph.id')"
+                    />
+                </div>
+
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Model')"
+                        :options="thermographsModels"
+                        hide-selected
+                        option-label="value"
+                        option-value="value"
+                        v-model="data.model"
+                        :required="true"
+                        :rules="validate('thermograph.model')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-xl">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Warehouse')"
+                        :options="warehousesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.warehouseId"
+                        :required="true"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Temperature')"
+                        :options="temperaturesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="code"
+                        v-model="data.temperatureFk"
+                        :required="true"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    Identifier: Identificador
+    Model: Modelo
+    Warehouse: Almacén
+    Temperature: Temperatura
+</i18n>

src/components/EditPictureForm.vue

@@ -276,13 +276,9 @@ const makeRequest = async () => {
                                     </QIcon>
                                     <QIcon name="info" class="cursor-pointer">
                                         <QTooltip>{{
-                                            t(
+                                            t('globals.allowedFilesText', {
-                                                'components.editPictureForm.allowedFilesText',
+                                                allowedContentTypes: allowedContentTypes,
-                                                {
+                                            })
-                                                    allowedContentTypes:
-                                                        allowedContentTypes,
-                                                }
-                                            )
                                         }}</QTooltip>
                                     </QIcon>
                                 </template>

src/components/common/VnInput.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 const emit = defineEmits(['update:modelValue', 'update:options', 'keyup.enter']);
 
@@ -14,6 +15,9 @@ const $props = defineProps({
     },
 });
 
+const { t } = useI18n();
+const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
+
 const value = computed({
     get() {
         return $props.modelValue;
@@ -46,6 +50,7 @@ const onEnterPress = () => {
         type="text"
         :class="{ required: $attrs.required }"
         @keyup.enter="onEnterPress()"
+        :rules="$attrs.required ? [requiredFieldRule] : null"
     >
         <template v-if="$slots.prepend" #prepend>
             <slot name="prepend" />

src/components/common/VnSelectFilter.vue

@@ -1,7 +1,8 @@
 <script setup>
-import FetchData from 'src/components/FetchData.vue';
-import { onMounted } from 'vue';
 import { ref, toRefs, computed, watch } from 'vue';
+import { onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import FetchData from 'src/components/FetchData.vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 
 const $props = defineProps({
@@ -55,6 +56,9 @@ const $props = defineProps({
     },
 });
 
+const { t } = useI18n();
+const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
+
 const { optionLabel, optionValue, options, modelValue } = toRefs($props);
 const myOptions = ref([]);
 const myOptionsOriginal = ref([]);
@@ -164,6 +168,7 @@ watch(modelValue, (newValue) => {
         fill-input
         ref="vnSelectRef"
         :class="{ required: $attrs.required }"
+        :rules="$attrs.required ? [requiredFieldRule] : null"
     >
         <template v-if="isClearable" #append>
             <QIcon

src/i18n/en/index.js

@@ -64,6 +64,8 @@ export default {
         markAll: 'Mark all',
         noResults: 'No results',
         system: 'System',
+        fieldRequired: 'Field required',
+        allowedFilesText: 'Allowed file types: { allowedContentTypes }',
     },
     errors: {
         statusUnauthorized: 'Access denied',
@@ -1173,9 +1175,6 @@ export default {
             addToPinned: 'Add to pinned',
             removeFromPinned: 'Remove from pinned',
         },
-        editPictureForm: {
-            allowedFilesText: 'Allowed file types: { allowedContentTypes }',
-        },
         VnLv: {
             copyText: '{copyValue} has been copied to the clipboard',
         },

src/i18n/es/index.js

@@ -64,6 +64,8 @@ export default {
         markAll: 'Marcar todo',
         noResults: 'Sin resultados',
         system: 'Sistema',
+        fieldRequired: 'Campo requerido',
+        allowedFilesText: 'Tipos de archivo permitidos: { allowedContentTypes }',
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',
@@ -1173,9 +1175,6 @@ export default {
             addToPinned: 'Añadir a fijados',
             removeFromPinned: 'Eliminar de fijados',
         },
-        editPictureForm: {
-            allowedFilesText: 'Tipos de archivo permitidos: { allowedContentTypes }',
-        },
         VnLv: {
             copyText: '{copyValue} se ha copiado al portapepeles',
         },

src/pages/Travel/Card/TravelThermographsForm.vue

@@ -5,8 +5,10 @@ import { useRoute, useRouter } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelectDialog from 'components/common/VnSelectDialog.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import CreateThermographForm from 'src/components/CreateThermographForm.vue';
 
 import { useState } from 'src/composables/useState';
 import { useStateStore } from 'stores/useStateStore';
@@ -34,8 +36,9 @@ const thermographFilter = {
     },
     order: 'thermographFk ASC',
 };
+const fetchTravelThermographsRef = ref(null);
+const allowedContentTypes = ref('');
 const user = state.getUser();
-const allowedFileTypes = ref(null);
 const thermographsOptions = ref([]);
 const dmsTypesOptions = ref([]);
 const companiesOptions = ref([]);
@@ -54,8 +57,6 @@ const thermographForm = reactive({
 });
 
 onBeforeMount(async () => {
-    await getAllowedFileTypes();
-
     if (props.viewAction === 'create') {
         setCreateDefaultParams();
     } else {
@@ -70,16 +71,6 @@ onBeforeMount(async () => {
     }
 });
 
-const getAllowedFileTypes = async () => {
-    try {
-        const { data } = await axios.get('DmsContainers/allowedContentTypes');
-        const contentTypes = data.join(', ');
-        allowedFileTypes.value = contentTypes;
-    } catch (err) {
-        console.error('Error fetching allowed content types');
-    }
-};
-
 const fetchDmsTypes = async () => {
     try {
         const params = {
@@ -175,10 +166,21 @@ const updateThermograph = async () => {
         console.error('Error creating thermograph');
     }
 };
+
+const onThermographCreated = async (data) => {
+    await fetchTravelThermographsRef.value.fetch();
+    thermographForm.thermographId = data.thermographId;
+};
 </script>
 
 <template>
     <FetchData
+        url="DmsContainers/allowedContentTypes"
+        @on-fetch="(data) => (allowedContentTypes = data.join(', '))"
+        auto-load
+    />
+    <FetchData
+        ref="fetchTravelThermographsRef"
         url="TravelThermographs"
         @on-fetch="(data) => (thermographsOptions = data)"
         :filter="thermographFilter"
@@ -235,14 +237,20 @@ const updateThermograph = async () => {
             <QCard class="q-pa-lg">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelectDialog
                             :label="t('travel.thermographs.thermograph')"
                             v-model="thermographForm.thermographId"
                             :options="thermographsOptions"
                             option-value="thermographFk"
                             option-label="thermographFk"
                             :disable="viewAction === 'edit'"
+                        >
+                            <template #form>
+                                <CreateThermographForm
+                                    @on-data-saved="onThermographCreated($event, data)"
                                 />
+                            </template>
+                        </VnSelectDialog>
                     </div>
                     <div class="col">
                         <VnInput
@@ -304,17 +312,24 @@ const updateThermograph = async () => {
                             ref="inputFileRef"
                             :label="t('travel.thermographs.file')"
                             multiple
-                            :accept="allowedFileTypes"
+                            :accept="allowedContentTypes"
                             v-model="thermographForm.files"
                         >
                             <template #append>
                                 <QIcon
                                     name="vn:attach"
-                                    class="cursor-pointer"
+                                    class="cursor-pointer q-mr-sm"
                                     @click="inputFileRef.pickFiles()"
                                 >
                                     <QTooltip>{{ t('Select files') }}</QTooltip>
                                 </QIcon>
+                                <QIcon name="info" class="cursor-pointer">
+                                    <QTooltip>{{
+                                        t('globals.allowedFilesText', {
+                                            allowedContentTypes: allowedContentTypes,
+                                        })
+                                    }}</QTooltip>
+                                </QIcon>
                             </template>
                         </QFile>
                     </div>