verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 98 Releases Wiki Activity

perf: validation form save/create action

This commit is contained in:
Javier Segarra 2024-10-10 12:16:59 +02:00
parent e550f54314
commit 186cc2ccfd
10 changed files with 58 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useValidator } from 'src/composables/useValidator';
import { useAttrs } from 'vue';
const emit = defineEmits([
'update:modelValue',
@ -29,10 +30,11 @@ const $props = defineProps({
},
});
const { validations } = useValidator();
const $attrs = useAttrs();
const { t } = useI18n();
const requiredFieldRule = (val) => validations().required($attrs.required, val);
const requiredFieldRule = (val) => validations().required(isRequired.value, val);
const isRequired = computed(() => Object.keys($attrs).includes('required'));
const vnInputRef = ref(null);
const value = computed({
get() {
@ -57,12 +59,6 @@ const focus = () => {
vnInputRef.value.focus();
};
defineExpose({
focus,
});
import { useAttrs } from 'vue';
const $attrs = useAttrs();
const mixinRules = [
requiredFieldRule,
...($attrs.rules ?? []),
@ -76,6 +72,9 @@ const mixinRules = [
}
},
];
defineExpose({
focus,
});
</script>
<template>
@ -85,7 +84,7 @@ const mixinRules = [
v-model="value"
v-bind="{ ...$attrs, ...styleAttrs }"
:type="$attrs.type"
:class="{ required: $attrs.required }"
:class="{ required: isRequired }"
@keyup.enter="emit('keyup.enter')"
:clearable="false"
:rules="mixinRules"

7
src/components/common/VnInputNumber.vue
View File

@ -1,8 +1,13 @@
<script setup>
import VnInput from 'src/components/common/VnInput.vue';
import { ref } from 'vue';
import { useAttrs } from 'vue';
const model = defineModel({ type: [Number, String] });
const $attrs = useAttrs();
const step = ref($attrs.step || 0.01);
</script>
<template>
<VnInput v-bind="$attrs" v-model.number="model" type="number" />
<VnInput v-bind="$attrs" v-model.number="model" type="number" :step="step" />
</template>

14
src/components/common/VnLocation.vue
View File

@ -2,16 +2,24 @@
import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
import VnSelectDialog from 'components/common/VnSelectDialog.vue';
import { useI18n } from 'vue-i18n';
import { ref } from 'vue';
import { computed, ref } from 'vue';
const { t } = useI18n();
const emit = defineEmits(['update:model-value', 'update:options']);
const { validations } = useValidator();
import { useAttrs } from 'vue';
import { useValidator } from 'src/composables/useValidator';
const $attrs = useAttrs();
const props = defineProps({
location: {
type: Object,
default: null,
},
});
const isRequired = computed(() => Object.keys($attrs).includes('required'));
const requiredFieldRule = (val) => validations().required(isRequired.value, val);
const mixinRules = [requiredFieldRule];
const formatLocation = (obj, properties) => {
const parts = properties.map((prop) => {
if (typeof prop === 'string') {
@ -68,10 +76,12 @@ function showLabel(data) {
:label="t('Location')"
:placeholder="t('search_by_postalcode')"
:input-debounce="300"
:class="{ required: $attrs.required }"
:class="{ required: isRequired }"
v-bind="$attrs"
clearable
:emit-value="false"
:rules="mixinRules"
:lazy-rules="true"
>
<template #form>
<CreateNewPostcode

4
src/pages/Customer/Card/CustomerCredits.vue
View File

@ -49,7 +49,9 @@ const columns = computed(() => [
name: 'credit',
create: true,
visible: false,
attrs: {
columnCreate: {
component: 'number',
required: true,
autofocus: true,
},
},

7
src/pages/Customer/Card/CustomerFiscalData.vue
View File

@ -53,11 +53,11 @@ function handleLocation(data, location) {
</QIcon>
</template>
</VnInput>
<VnInput :label="t('Tax number')" clearable v-model="data.fi" />
<VnInput :label="t('Tax number')" clearable v-model="data.fi" required />
</VnRow>
<VnRow>
<VnInput :label="t('Street')" clearable v-model="data.street" />
<VnInput :label="t('Street')" clearable v-model="data.street" required />
</VnRow>
<VnRow>
@ -68,6 +68,7 @@ function handleLocation(data, location) {
option-label="vat"
option-value="id"
v-model="data.sageTaxTypeFk"
:required="data.isTaxDataChecked"
/>
<VnSelect
:label="t('Sage transaction type')"
@ -76,6 +77,7 @@ function handleLocation(data, location) {
option-label="transaction"
option-value="id"
v-model="data.sageTransactionTypeFk"
:required="data.isTaxDataChecked"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
@ -96,6 +98,7 @@ function handleLocation(data, location) {
:roles-allowed-to-create="['deliveryAssistant', 'administrative']"
:acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
:location="data"
:required="true"
@update:model-value="(location) => handleLocation(data, location)"
/>
</VnRow>

5
src/pages/Customer/Card/CustomerGreuges.vue
View File

@ -80,6 +80,11 @@ const columns = computed(() => [
align: 'left',
name: 'amount',
label: t('Amount'),
columnCreate: {
component: 'number',
autofocus: true,
required: true,
},
format: ({ amount }) => toCurrency(amount),
create: true,
},

1
src/pages/Customer/Card/CustomerRecoveries.vue
View File

@ -56,6 +56,7 @@ const columns = computed(() => [
label: t('Period'),
create: true,
...componentColumn('number'),
required: true,
},
{
align: 'left',

15
src/pages/Customer/components/CustomerAddressCreate.vue
View File

@ -85,15 +85,26 @@ function handleLocation(data, location) {
<QCheckbox :label="t('Default')" v-model="data.isDefaultAddress" />
<VnRow>
<VnInput :label="t('Consignee')" clearable v-model="data.nickname" />
<VnInput
:label="t('Consignee')"
required
clearable
v-model="data.nickname"
/>
<VnInput :label="t('Street address')" clearable v-model="data.street" />
<VnInput
:label="t('Street address')"
clearable
v-model="data.street"
required
/>
</VnRow>
<VnLocation
:rules="validate('Worker.postcode')"
:acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
v-model="data.location"
:required="true"
@update:model-value="(location) => handleLocation(data, location)"
/>

4
src/pages/Customer/components/CustomerNewPayment.vue
View File

@ -241,7 +241,7 @@ async function getAmountPaid() {
</QItem>
</template>
</VnSelect>
<VnInput
<VnInputNumber
:label="t('Amount')"
:required="true"
@update:model-value="calculateFromAmount($event)"
@ -254,7 +254,7 @@ async function getAmountPaid() {
{{ t('Compensation') }}
</div>
<VnRow>
<VnInput
<VnInputNumber
:label="t('Compensation account')"
clearable
v-model="data.compensationAccount"

9
src/pages/Ticket/Card/TicketCreateRequest.vue
View File

@ -2,7 +2,7 @@
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import VnInputNumber from 'components/common/VnInputNumber.vue';
import FormModelPopup from 'components/FormModelPopup.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
@ -46,17 +46,14 @@ const attendersOptions = ref([]);
/>
</VnRow>
<VnRow>
<VnInput
<VnInputNumber
v-model="data.quantity"
:label="t('purchaseRequest.quantity')"
type="number"
min="1"
/>
<VnInput
<VnInputNumber
v-model="data.price"
:label="t('purchaseRequest.price')"
type="number"
step="0.01"
min="0"
/>
</VnRow>