wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

Thermograph create form and general improvements

This commit is contained in:
William Buezas 2024-02-08 23:30:08 -03:00
parent f24b9f5a75
commit c67f4cf858
7 changed files with 164 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
src/components/CreateThermographForm.vue Normal file
View File

@ -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>

10
src/components/EditPictureForm.vue
View File

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

5
src/components/common/VnInput.vue
View File

@ -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" />

9
src/components/common/VnSelectFilter.vue
View File

@ -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

5
src/i18n/en/index.js
View File

@ -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',
},

5
src/i18n/es/index.js
View File

@ -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',
},

49
src/pages/Travel/Card/TravelThermographsForm.vue
View File

@ -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>