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

Merge pull request 'Input text refactor' (#27) from feature/ms-44-InputTextRefactor into dev 

Reviewed-on: hyervoni/salix-front-mindshore#27
This commit is contained in:
William Buezas 2023-12-13 18:21:38 +00:00
parent 2eac632b32 d369ce7152
commit 0097d2d7f8
28 changed files with 485 additions and 369 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/common/SendEmailDialog.vue
View File

@ -1,7 +1,9 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useDialogPluginComponent } from 'quasar';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useDialogPluginComponent } from 'quasar';
import VnInput from 'src/components/common/VnInput.vue';
const props = defineProps({ const props = defineProps({
data: { data: {
@ -52,7 +54,7 @@ async function confirm() {
{{ t('The notification will be sent to the following address') }} {{ t('The notification will be sent to the following address') }}
</QCardSection> </QCardSection>
<QCardSection class="q-pt-none"> <QCardSection class="q-pt-none">
<QInput dense v-model="address" rounded outlined autofocus /> <VnInput v-model="address" is-outlined autofocus />
</QCardSection> </QCardSection>
<QCardActions align="right"> <QCardActions align="right">
<QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup /> <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />

51
src/components/common/VnInput.vue Normal file
View File

@ -0,0 +1,51 @@
<script setup>
import { computed } from 'vue';
const emit = defineEmits(['update:modelValue', 'update:options']);
const $props = defineProps({
modelValue: {
type: [String, Number],
default: null,
},
isOutlined: {
type: Boolean,
default: false,
},
});
const value = computed({
get() {
return $props.modelValue;
},
set(value) {
emit('update:modelValue', value);
},
});
const styleAttrs = computed(() => {
return $props.isOutlined
? {
dense: true,
outlined: true,
rounded: true,
}
: {};
});
</script>
<template>
<QInput
ref="vnInputRef"
v-model="value"
v-bind="{ ...$attrs, ...styleAttrs }"
type="text"
>
<template v-if="$slots.prepend" #prepend>
<slot name="prepend" />
</template>
<template v-if="$slots.append" #append>
<slot name="append" />
</template>
</QInput>
</template>

18
src/components/common/VnInputDate.vue
View File

@ -10,7 +10,11 @@ const props = defineProps({
readonly: { readonly: {
type: Boolean, type: Boolean,
default: false, default: false,
} },
isOutlined: {
type: Boolean,
default: false,
},
}); });
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);
const value = computed({ const value = computed({
@ -36,6 +40,16 @@ const formatDate = (dateString) => {
date.getDate() date.getDate()
)}`; )}`;
}; };
const styleAttrs = computed(() => {
return props.isOutlined
? {
dense: true,
outlined: true,
rounded: true,
}
: {};
});
</script> </script>
<template> <template>
@ -44,7 +58,7 @@ const formatDate = (dateString) => {
rounded rounded
readonly readonly
:model-value="toDate(value)" :model-value="toDate(value)"
v-bind="$attrs" v-bind="{ ...$attrs, ...styleAttrs }"
> >
<template #append> <template #append>
<QIcon name="event" class="cursor-pointer"> <QIcon name="event" class="cursor-pointer">

22
src/components/common/VnSmsDialog.vue
View File

@ -1,7 +1,9 @@
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import { useDialogPluginComponent } from 'quasar';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useDialogPluginComponent } from 'quasar';
import VnInput from 'src/components/common/VnInput.vue';
const { dialogRef, onDialogOK } = useDialogPluginComponent(); const { dialogRef, onDialogOK } = useDialogPluginComponent();
const { t, availableLocales } = useI18n(); const { t, availableLocales } = useI18n();
@ -117,24 +119,10 @@ async function send() {
/> />
</QCardSection> </QCardSection>
<QCardSection class="q-pb-xs"> <QCardSection class="q-pb-xs">
<QInput <VnInput :label="t('Phone')" v-model="phone" is-outlined />
:label="t('Phone')"
v-model="phone"
rounded
outlined
autofocus
dense
/>
</QCardSection> </QCardSection>
<QCardSection class="q-pb-xs"> <QCardSection class="q-pb-xs">
<QInput <VnInput v-model="subject" :label="t('Subject')" is-outlined />
:label="t('Subject')"
v-model="subject"
rounded
outlined
autofocus
dense
/>
</QCardSection> </QCardSection>
<QCardSection class="q-mb-md" q-input> <QCardSection class="q-mb-md" q-input>
<QInput <QInput

10
src/components/ui/VnSearchbar.vue
View File

@ -1,8 +1,12 @@
<script setup> <script setup>
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router';
import { useArrayData } from 'composables/useArrayData';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import VnInput from 'src/components/common/VnInput.vue';
import { useArrayData } from 'composables/useArrayData';
const quasar = useQuasar(); const quasar = useQuasar();
const props = defineProps({ const props = defineProps({
@ -86,7 +90,7 @@ async function search() {
<template> <template>
<QForm @submit="search"> <QForm @submit="search">
<QInput <VnInput
id="searchbar" id="searchbar"
v-model="searchText" v-model="searchText"
:placeholder="props.label" :placeholder="props.label"
@ -113,7 +117,7 @@ async function search() {
<QTooltip>{{ props.info }}</QTooltip> <QTooltip>{{ props.info }}</QTooltip>
</QIcon> </QIcon>
</template> </template>
</QInput> </VnInput>
</QForm> </QForm>
</template> </template>

15
src/pages/Claim/Card/ClaimBasicData.vue
View File

@ -3,11 +3,13 @@ import { ref } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useSession } from 'src/composables/useSession';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue'; import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import VnInputDate from "components/common/VnInputDate.vue"; import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import { useSession } from 'src/composables/useSession';
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
@ -102,14 +104,17 @@ const statesFilter = {
<template #form="{ data, validate, filter }"> <template #form="{ data, validate, filter }">
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<QInput <VnInput
v-model="data.client.name" v-model="data.client.name"
:label="t('claim.basicData.customer')" :label="t('claim.basicData.customer')"
disable disable
/> />
</div> </div>
<div class="col"> <div class="col">
<VnInputDate v-model="data.created" :label="t('claim.basicData.created')" /> <VnInputDate
v-model="data.created"
:label="t('claim.basicData.created')"
/>
</div> </div>
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
@ -165,7 +170,7 @@ const statesFilter = {
/> />
</div> </div>
<div class="col"> <div class="col">
<QInput <VnInput
v-model="data.rma" v-model="data.rma"
:label="t('claim.basicData.returnOfMaterial')" :label="t('claim.basicData.returnOfMaterial')"
:rules="validate('claim.rma')" :rules="validate('claim.rma')"

58
src/pages/Claim/ClaimFilter.vue
View File

@ -1,9 +1,11 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue'; import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue'; import VnInputDate from 'components/common/VnInputDate.vue';
const { t } = useI18n(); const { t } = useI18n();
@ -34,30 +36,31 @@ const states = ref();
</div> </div>
</template> </template>
<template #body="{ params, searchFn }"> <template #body="{ params, searchFn }">
<QList dense> <QList dense class="list">
<QItem> <QItem class="q-my-sm">
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('Customer ID')" :label="t('Customer ID')"
v-model="params.clientFk" v-model="params.clientFk"
lazy-rules lazy-rules
is-outlined
> >
<template #prepend> <template #prepend>
<QIcon name="badge" size="sm"></QIcon> <QIcon name="badge" size="xs"></QIcon> </template
</template> ></VnInput>
</QInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem class="q-mb-sm">
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('Client Name')" :label="t('Client Name')"
v-model="params.clientName" v-model="params.clientName"
lazy-rules lazy-rules
is-outlined
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem class="q-mb-sm">
<QItemSection v-if="!workers"> <QItemSection v-if="!workers">
<QSkeleton type="QInput" class="full-width" /> <QSkeleton type="QInput" class="full-width" />
</QItemSection> </QItemSection>
@ -72,11 +75,15 @@ const states = ref();
emit-value emit-value
map-options map-options
use-input use-input
hide-selected
dense
outlined
rounded
:input-debounce="0" :input-debounce="0"
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem class="q-mb-sm">
<QItemSection v-if="!workers"> <QItemSection v-if="!workers">
<QSkeleton type="QInput" class="full-width" /> <QSkeleton type="QInput" class="full-width" />
</QItemSection> </QItemSection>
@ -91,11 +98,15 @@ const states = ref();
emit-value emit-value
map-options map-options
use-input use-input
hide-selected
dense
outlined
rounded
:input-debounce="0" :input-debounce="0"
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem class="q-mb-sm">
<QItemSection v-if="!workers"> <QItemSection v-if="!workers">
<QSkeleton type="QInput" class="full-width" /> <QSkeleton type="QInput" class="full-width" />
</QItemSection> </QItemSection>
@ -110,11 +121,15 @@ const states = ref();
emit-value emit-value
map-options map-options
use-input use-input
hide-selected
dense
outlined
rounded
:input-debounce="0" :input-debounce="0"
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-md"> <QItem class="q-mb-sm">
<QItemSection v-if="!states"> <QItemSection v-if="!states">
<QSkeleton type="QInput" class="full-width" /> <QSkeleton type="QInput" class="full-width" />
</QItemSection> </QItemSection>
@ -128,6 +143,10 @@ const states = ref();
option-label="description" option-label="description"
emit-value emit-value
map-options map-options
hide-selected
dense
outlined
rounded
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
@ -151,7 +170,11 @@ const states = ref();
</QItem> --> </QItem> -->
<QItem> <QItem>
<QItemSection> <QItemSection>
<VnInputDate v-model="params.created" :label="t('Created')" /> <VnInputDate
v-model="params.created"
:label="t('Created')"
is-outlined
/>
</QItemSection> </QItemSection>
</QItem> </QItem>
</QExpansionItem> </QExpansionItem>
@ -160,6 +183,15 @@ const states = ref();
</VnFilterPanel> </VnFilterPanel>
</template> </template>
<style scoped>
.list {
width: 256px;
}
.list * {
max-width: 100%;
}
</style>
<i18n> <i18n>
en: en:
params: params:

9
src/pages/Claim/ClaimRmaList.vue
View File

@ -2,10 +2,13 @@
import { ref } from 'vue'; import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import axios from 'axios';
import VnPaginate from 'src/components/ui/VnPaginate.vue'; import VnPaginate from 'src/components/ui/VnPaginate.vue';
import { useArrayData } from 'src/composables/useArrayData';
import VnConfirm from 'src/components/ui/VnConfirm.vue'; import VnConfirm from 'src/components/ui/VnConfirm.vue';
import VnInput from 'src/components/common/VnInput.vue';
import { useArrayData } from 'src/composables/useArrayData';
import axios from 'axios';
const quasar = useQuasar(); const quasar = useQuasar();
const { t } = useI18n(); const { t } = useI18n();
@ -65,7 +68,7 @@ async function remove({ id }) {
<QPageSticky expand position="top" :offset="[16, 16]"> <QPageSticky expand position="top" :offset="[16, 16]">
<QCard class="card q-pa-md"> <QCard class="card q-pa-md">
<QForm @submit="submit"> <QForm @submit="submit">
<QInput <VnInput
ref="input" ref="input"
v-model="newRma.code" v-model="newRma.code"
:label="t('claim.rmaList.code')" :label="t('claim.rmaList.code')"

11
src/pages/Customer/Card/CustomerBasicData.vue
View File

@ -7,6 +7,7 @@ import { useSession } from 'src/composables/useSession';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue'; import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
@ -64,7 +65,7 @@ const filterOptions = {
<template #form="{ data, validate, filter }"> <template #form="{ data, validate, filter }">
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<QInput <VnInput
v-model="data.socialName" v-model="data.socialName"
:label="t('customer.basicData.socialName')" :label="t('customer.basicData.socialName')"
:rules="validate('client.socialName')" :rules="validate('client.socialName')"
@ -87,7 +88,7 @@ const filterOptions = {
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<QInput <VnInput
v-model="data.contact" v-model="data.contact"
:label="t('customer.basicData.contact')" :label="t('customer.basicData.contact')"
:rules="validate('client.contact')" :rules="validate('client.contact')"
@ -95,7 +96,7 @@ const filterOptions = {
/> />
</div> </div>
<div class="col"> <div class="col">
<QInput <VnInput
v-model="data.email" v-model="data.email"
type="email" type="email"
:label="t('customer.basicData.email')" :label="t('customer.basicData.email')"
@ -106,7 +107,7 @@ const filterOptions = {
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<QInput <VnInput
v-model="data.phone" v-model="data.phone"
:label="t('customer.basicData.phone')" :label="t('customer.basicData.phone')"
:rules="validate('client.phone')" :rules="validate('client.phone')"
@ -114,7 +115,7 @@ const filterOptions = {
/> />
</div> </div>
<div class="col"> <div class="col">
<QInput <VnInput
v-model="data.mobile" v-model="data.mobile"
:label="t('customer.basicData.mobile')" :label="t('customer.basicData.mobile')"
:rules="validate('client.mobile')" :rules="validate('client.mobile')"

73
src/pages/Customer/CustomerFilter.vue
View File

@ -1,9 +1,11 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue'; import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
@ -35,31 +37,31 @@ const zones = ref();
</div> </div>
</template> </template>
<template #body="{ params, searchFn }"> <template #body="{ params, searchFn }">
<QList dense> <QList dense class="list">
<QItem> <QItem class="q-my-sm">
<QItemSection> <QItemSection>
<QInput :label="t('FI')" v-model="params.fi" lazy-rules> <VnInput :label="t('FI')" v-model="params.fi" is-outlined>
<template #prepend> <template #prepend>
<QIcon name="badge" size="sm"></QIcon> <QIcon name="badge" size="xs" />
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem class="q-mb-sm">
<QItemSection> <QItemSection>
<QInput :label="t('Name')" v-model="params.name" lazy-rules /> <VnInput :label="t('Name')" v-model="params.name" is-outlined />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem class="q-mb-sm">
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('Social Name')" :label="t('Social Name')"
v-model="params.socialName" v-model="params.socialName"
lazy-rules is-outlined
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem class="q-mb-sm">
<QItemSection v-if="!workers"> <QItemSection v-if="!workers">
<QSkeleton type="QInput" class="full-width" /> <QSkeleton type="QInput" class="full-width" />
</QItemSection> </QItemSection>
@ -74,11 +76,15 @@ const zones = ref();
emit-value emit-value
map-options map-options
use-input use-input
hide-selected
dense
outlined
rounded
:input-debounce="0" :input-debounce="0"
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem class="q-mb-sm">
<QItemSection v-if="!provinces"> <QItemSection v-if="!provinces">
<QSkeleton type="QInput" class="full-width" /> <QSkeleton type="QInput" class="full-width" />
</QItemSection> </QItemSection>
@ -92,33 +98,45 @@ const zones = ref();
option-label="name" option-label="name"
emit-value emit-value
map-options map-options
hide-selected
dense
outlined
rounded
:input-debounce="0" :input-debounce="0"
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-md"> <QItem class="q-mb-md">
<QItemSection> <QItemSection>
<QInput :label="t('City')" v-model="params.city" lazy-rules /> <VnInput :label="t('City')" v-model="params.city" is-outlined />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QSeparator /> <QSeparator />
<QExpansionItem :label="t('More options')" expand-separator> <QExpansionItem :label="t('More options')" expand-separator>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput :label="t('Phone')" v-model="params.phone" lazy-rules> <VnInput
:label="t('Phone')"
v-model="params.phone"
is-outlined
>
<template #prepend> <template #prepend>
<QIcon name="phone" size="sm"></QIcon> <QIcon name="phone" size="xs" />
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput :label="t('Email')" v-model="params.email" lazy-rules> <VnInput
:label="t('Email')"
v-model="params.email"
is-outlined
>
<template #prepend> <template #prepend>
<QIcon name="email" size="sm"></QIcon> <QIcon name="email" size="sm" />
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
@ -135,15 +153,19 @@ const zones = ref();
option-label="name" option-label="name"
emit-value emit-value
map-options map-options
hide-selected
dense
outlined
rounded
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('Postcode')" :label="t('Postcode')"
v-model="params.postcode" v-model="params.postcode"
lazy-rules is-outlined
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
@ -153,6 +175,15 @@ const zones = ref();
</VnFilterPanel> </VnFilterPanel>
</template> </template>
<style scoped>
.list {
width: 256px;
}
.list * {
max-width: 100%;
}
</style>
<i18n> <i18n>
en: en:
params: params:

34
src/pages/Customer/CustomerPaymentsFilter.vue
View File

@ -1,6 +1,8 @@
<script setup> <script setup>
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue'; import VnInputDate from 'components/common/VnInputDate.vue';
const { t } = useI18n(); const { t } = useI18n();
@ -25,39 +27,39 @@ function isValidNumber(value) {
</div> </div>
</template> </template>
<template #body="{ params }"> <template #body="{ params }">
<QList dense> <QList dense class="q-gutter-y-sm q-mt-sm">
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('Order ID')" :label="t('Order ID')"
v-model="params.orderFk" v-model="params.orderFk"
lazy-rules is-outlined
> >
<template #prepend> <template #prepend>
<QIcon name="vn:basket" size="sm"></QIcon> <QIcon name="vn:basket" size="xs" />
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('Customer ID')" :label="t('Customer ID')"
v-model="params.clientFk" v-model="params.clientFk"
lazy-rules is-outlined
> >
<template #prepend> <template #prepend>
<QIcon name="vn:client" size="sm"></QIcon> <QIcon name="vn:client" size="xs" />
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('Amount')" :label="t('Amount')"
v-model="params.amount" v-model="params.amount"
lazy-rules is-outlined
@update:model-value=" @update:model-value="
(value) => { (value) => {
if (value.includes(',')) if (value.includes(','))
@ -68,25 +70,25 @@ function isValidNumber(value) {
(val) => (val) =>
isValidNumber(val) || !val || 'Please type a number', isValidNumber(val) || !val || 'Please type a number',
]" ]"
lazy-rules
> >
<template #prepend> <template #prepend>
<QIcon name="euro" size="sm" /> <QIcon name="euro" size="sm" />
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<VnInputDate <VnInputDate
v-model="params.from" v-model="params.from"
:label="t('From')" :label="t('From')"
is-outlined
/> />
</QItemSection> </QItemSection>
<QItemSection> <QItemSection>
<VnInputDate <VnInputDate v-model="params.to" :label="t('To')" is-outlined />
v-model="params.to"
:label="t('To')"
/>
</QItemSection> </QItemSection>
</QItem> </QItem>
</QList> </QList>

177
src/pages/InvoiceIn/InvoiceInFilter.vue
View File

@ -1,9 +1,12 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import VnSelectFilter from 'components/common/VnSelectFilter.vue'; import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
@ -33,28 +36,32 @@ const suppliersRef = ref();
</div> </div>
</template> </template>
<template #body="{ params, searchFn }"> <template #body="{ params, searchFn }">
<QList dense> <QList dense class="list q-gutter-y-sm q-mt-sm">
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput :label="t('Id or Supplier')" v-model="params.search"> <VnInput
:label="t('Id or Supplier')"
v-model="params.search"
is-outlined
>
<template #prepend> <template #prepend>
<QIcon name="badge" size="sm"></QIcon> <QIcon name="badge" size="sm"></QIcon>
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('params.supplierRef')" :label="t('params.supplierRef')"
v-model="params.supplierRef" v-model="params.supplierRef"
@input. is-outlined
lazy-rules lazy-rules
> >
<template #prepend> <template #prepend>
<QIcon name="vn:client" size="sm"></QIcon> <QIcon name="vn:client" size="sm"></QIcon>
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
@ -66,52 +73,67 @@ const suppliersRef = ref();
option-value="id" option-value="id"
option-label="nickname" option-label="nickname"
@input-value="suppliersRef.fetch()" @input-value="suppliersRef.fetch()"
dense
outlined
rounded
> >
</VnSelectFilter> </VnSelectFilter>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput :label="t('params.fi')" v-model="params.fi" lazy-rules> <VnInput
:label="t('params.fi')"
v-model="params.fi"
is-outlined
lazy-rules
>
<template #prepend> <template #prepend>
<QIcon name="badge" size="sm"></QIcon> <QIcon name="badge" size="sm"></QIcon>
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('params.serialNumber')" :label="t('params.serialNumber')"
v-model="params.serialNumber" v-model="params.serialNumber"
is-outlined
lazy-rules lazy-rules
> >
<template #prepend> <template #prepend>
<QIcon name="badge" size="sm"></QIcon> <QIcon name="badge" size="sm"></QIcon>
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('params.serial')" :label="t('params.serial')"
v-model="params.serial" v-model="params.serial"
is-outlined
lazy-rules lazy-rules
> >
<template #prepend> <template #prepend>
<QIcon name="badge" size="sm"></QIcon> <QIcon name="badge" size="sm"></QIcon>
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput :label="t('Amount')" v-model="params.amount" lazy-rules> <VnInput
:label="t('Amount')"
v-model="params.amount"
is-outlined
lazy-rules
>
<template #prepend> <template #prepend>
<QIcon name="euro" size="sm"></QIcon> <QIcon name="euro" size="sm"></QIcon>
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-md"> <QItem class="q-mb-md">
@ -127,137 +149,57 @@ const suppliersRef = ref();
<QExpansionItem :label="t('More options')" expand-separator> <QExpansionItem :label="t('More options')" expand-separator>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('params.awb')" :label="t('params.awb')"
v-model="params.awbCode" v-model="params.awbCode"
is-outlined
lazy-rules lazy-rules
> >
<template #prepend> <template #prepend>
<QIcon name="badge" size="sm"></QIcon> <QIcon name="badge" size="sm"></QIcon>
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('params.account')" :label="t('params.account')"
v-model="params.account" v-model="params.account"
is-outlined
lazy-rules lazy-rules
> >
<template #prepend> <template #prepend>
<QIcon name="person" size="sm" /> <QIcon name="person" size="sm" />
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput :label="t('From')" v-model="params.from" mask="date"> <VnInputDate
<template #append> :label="t('From')"
<QIcon name="event" class="cursor-pointer"> v-model="params.from"
<QPopupProxy is-outlined
cover />
transition-show="scale"
transition-hide="scale"
>
<QDate v-model="params.from" landscape>
<div
class="row items-center justify-end q-gutter-sm"
>
<QBtn
:label="t('globals.cancel')"
color="primary"
flat
v-close-popup
/>
<QBtn
:label="t('globals.confirm')"
color="primary"
flat
@click="save"
v-close-popup
/>
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template>
</QInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput :label="t('To')" v-model="params.to" mask="date"> <VnInputDate
<template #append> :label="t('To')"
<QIcon name="event" class="cursor-pointer"> v-model="params.to"
<QPopupProxy is-outlined
cover />
transition-show="scale"
transition-hide="scale"
>
<QDate v-model="params.to" landscape>
<div
class="row items-center justify-end q-gutter-sm"
>
<QBtn
:label="t('globals.cancel')"
color="primary"
flat
v-close-popup
/>
<QBtn
:label="t('globals.confirm')"
color="primary"
flat
@click="save"
v-close-popup
/>
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template>
</QInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInputDate
:label="t('Issued')" :label="t('Issued')"
v-model="params.issued" v-model="params.issued"
mask="date" is-outlined
> />
<template #append>
<QIcon name="event" class="cursor-pointer">
<QPopupProxy
cover
transition-show="scale"
transition-hide="scale"
>
<QDate v-model="params.issued" landscape>
<div
class="row items-center justify-end q-gutter-sm"
>
<QBtn
:label="t('globals.cancel')"
color="primary"
flat
v-close-popup
/>
<QBtn
:label="t('globals.confirm')"
color="primary"
flat
@click="save"
v-close-popup
/>
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template>
</QInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
</QExpansionItem> </QExpansionItem>
@ -266,6 +208,15 @@ const suppliersRef = ref();
</VnFilterPanel> </VnFilterPanel>
</template> </template>
<style scoped>
.list {
width: 256px;
}
.list * {
max-width: 100%;
}
</style>
<i18n> <i18n>
en: en:
params: params:

46
src/pages/InvoiceOut/InvoiceOutFilter.vue
View File

@ -1,8 +1,10 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue'; import VnInputDate from 'components/common/VnInputDate.vue';
const { t } = useI18n(); const { t } = useI18n();
@ -39,47 +41,31 @@ function setWorkers(data) {
</div> </div>
</template> </template>
<template #body="{ params, searchFn }"> <template #body="{ params, searchFn }">
<QList dense> <QList dense class="q-gutter-y-sm q-mt-sm">
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('Customer ID')" :label="t('Customer ID')"
class="q-mt-sm"
dense
lazy-rules
outlined
rounded
v-model="params.clientFk" v-model="params.clientFk"
is-outlined
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput v-model="params.fi" :label="t('FI')" is-outlined />
:label="t('FI')"
class="q-mt-sm"
dense
lazy-rules
outlined
rounded
v-model="params.fi"
/>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('Amount')" :label="t('Amount')"
class="q-mt-sm"
dense
lazy-rules
outlined
rounded
v-model="params.amount" v-model="params.amount"
is-outlined
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mt-sm"> <QItem>
<QItemSection> <QItemSection>
<QInput <QInput
:label="t('Min')" :label="t('Min')"
@ -103,7 +89,7 @@ function setWorkers(data) {
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-md"> <QItem>
<QItemSection> <QItemSection>
<QCheckbox <QCheckbox
:label="t('Has PDF')" :label="t('Has PDF')"
@ -120,9 +106,7 @@ function setWorkers(data) {
<VnInputDate <VnInputDate
v-model="params.issued" v-model="params.issued"
:label="t('Issued')" :label="t('Issued')"
dense is-outlined
outlined
rounded
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
@ -131,9 +115,7 @@ function setWorkers(data) {
<VnInputDate <VnInputDate
v-model="params.created" v-model="params.created"
:label="t('Created')" :label="t('Created')"
dense is-outlined
outlined
rounded
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
@ -142,9 +124,7 @@ function setWorkers(data) {
<VnInputDate <VnInputDate
v-model="params.dued" v-model="params.dued"
:label="t('Dued')" :label="t('Dued')"
dense is-outlined
outlined
rounded
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>

21
src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
View File

@ -1,11 +1,13 @@
<script setup> <script setup>
import { onMounted, ref, computed } from 'vue'; import { onMounted, ref, computed } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnInputDate from "components/common/VnInputDate.vue"; import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
const { t } = useI18n(); const { t } = useI18n();
const invoiceOutGlobalStore = useInvoiceOutGlobalStore(); const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
@ -84,7 +86,7 @@ onMounted(async () => {
class="form-container q-pa-md" class="form-container q-pa-md"
style="max-width: 256px" style="max-width: 256px"
> >
<div class="column q-gutter-y-md"> <div class="column q-gutter-y-sm">
<QRadio <QRadio
v-model="clientsToInvoice" v-model="clientsToInvoice"
dense dense
@ -98,6 +100,7 @@ onMounted(async () => {
val="one" val="one"
:label="t('oneClient')" :label="t('oneClient')"
:dark="true" :dark="true"
class="q-mb-sm"
/> />
<VnSelectFilter <VnSelectFilter
v-if="clientsToInvoice === 'one'" v-if="clientsToInvoice === 'one'"
@ -114,15 +117,13 @@ onMounted(async () => {
<VnInputDate <VnInputDate
v-model="formData.invoiceDate" v-model="formData.invoiceDate"
:label="t('invoiceDate')" :label="t('invoiceDate')"
dense is-outlined
outlined />
rounded />
<VnInputDate <VnInputDate
v-model="formData.maxShipped" v-model="formData.maxShipped"
:label="t('maxShipped')" :label="t('maxShipped')"
dense is-outlined
outlined />
rounded />
<VnSelectFilter <VnSelectFilter
:label="t('company')" :label="t('company')"
v-model="formData.companyFk" v-model="formData.companyFk"

27
src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
View File

@ -1,11 +1,14 @@
<script setup> <script setup>
import { onMounted, ref, reactive } from 'vue'; import { onMounted, ref, reactive } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { QCheckbox, QBtn } from 'quasar';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue'; import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue'; import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import VnInput from 'src/components/common/VnInput.vue';
import invoiceOutService from 'src/services/invoiceOut.service'; import invoiceOutService from 'src/services/invoiceOut.service';
import { toCurrency } from 'src/filters'; import { toCurrency } from 'src/filters';
import { QCheckbox, QBtn } from 'quasar';
import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js'; import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
import VnInputDate from 'components/common/VnInputDate.vue'; import VnInputDate from 'components/common/VnInputDate.vue';
@ -187,13 +190,13 @@ const search = async () => {
} }
}); });
const searchFilter = { const searchFilter = {
limit: 20 limit: 20,
} };
if (and.length) { if (and.length) {
searchFilter.where = { searchFilter.where = {
and and,
} };
} }
const params = { const params = {
@ -251,19 +254,15 @@ onMounted(async () => {
v-model="dateRange.from" v-model="dateRange.from"
:label="t('invoiceOut.negativeBases.from')" :label="t('invoiceOut.negativeBases.from')"
class="q-mr-md" class="q-mr-md"
dense
lazy-rules lazy-rules
outlined is-outlined
rounded
/> />
<VnInputDate <VnInputDate
v-model="dateRange.to" v-model="dateRange.to"
:label="t('invoiceOut.negativeBases.to')" :label="t('invoiceOut.negativeBases.to')"
class="q-mr-md" class="q-mr-md"
dense
lazy-rules lazy-rules
outlined is-outlined
rounded
/> />
<QBtn <QBtn
color="primary" color="primary"
@ -293,19 +292,17 @@ onMounted(async () => {
<QTh v-for="col in props.cols" :key="col.name" :props="props"> <QTh v-for="col in props.cols" :key="col.name" :props="props">
<div class="column justify-start items-start full-height"> <div class="column justify-start items-start full-height">
{{ t(`invoiceOut.negativeBases.${col.label}`) }} {{ t(`invoiceOut.negativeBases.${col.label}`) }}
<QInput <VnInput
:class="{ :class="{
invisible: invisible:
col.field === 'isActive' || col.field === 'isActive' ||
col.field === 'hasToInvoice' || col.field === 'hasToInvoice' ||
col.field === 'isTaxDataChecked', col.field === 'isTaxDataChecked',
}" }"
dense
outlined
rounded
v-model="filter[col.field]" v-model="filter[col.field]"
type="text" type="text"
@keyup.enter="search()" @keyup.enter="search()"
is-outlined
/> />
</div> </div>
</QTh> </QTh>

8
src/pages/Login/LoginMain.vue
View File

@ -3,12 +3,13 @@ import { ref } from 'vue';
import { Notify, useQuasar } from 'quasar'; import { Notify, useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import axios from 'axios';
import { useSession } from 'src/composables/useSession'; import { useSession } from 'src/composables/useSession';
import { useLogin } from 'src/composables/useLogin'; import { useLogin } from 'src/composables/useLogin';
import VnLogo from 'components/ui/VnLogo.vue'; import VnLogo from 'components/ui/VnLogo.vue';
import VnInput from 'src/components/common/VnInput.vue';
import axios from 'axios';
const quasar = useQuasar(); const quasar = useQuasar();
const session = useSession(); const session = useSession();
@ -68,13 +69,14 @@ async function onSubmit() {
<template> <template>
<QForm @submit="onSubmit" class="q-gutter-y-md q-pa-lg formCard"> <QForm @submit="onSubmit" class="q-gutter-y-md q-pa-lg formCard">
<VnLogo alt="Logo" fit="contain" :ratio="16 / 9" class="q-mb-md" /> <VnLogo alt="Logo" fit="contain" :ratio="16 / 9" class="q-mb-md" />
<QInput
<VnInput
v-model="username" v-model="username"
:label="t('login.username')" :label="t('login.username')"
lazy-rules lazy-rules
:rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]" :rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
/> />
<QInput <VnInput
type="password" type="password"
v-model="password" v-model="password"
:label="t('login.password')" :label="t('login.password')"

4
src/pages/Login/TwoFactor.vue
View File

@ -53,7 +53,7 @@ async function onSubmit() {
<QIcon name="phonelink_lock" size="xl" color="primary" /> <QIcon name="phonelink_lock" size="xl" color="primary" />
<h5 class="text-center q-my-md">{{ t('twoFactor.insert') }}</h5> <h5 class="text-center q-my-md">{{ t('twoFactor.insert') }}</h5>
</div> </div>
<QInput <VnInput
v-model="code" v-model="code"
:hint="t('twoFactor.explanation')" :hint="t('twoFactor.explanation')"
mask="# # # # # #" mask="# # # # # #"
@ -64,7 +64,7 @@ async function onSubmit() {
<template #prepend> <template #prepend>
<QIcon name="lock" /> <QIcon name="lock" />
</template> </template>
</QInput> </VnInput>
<div class="q-mt-xl"> <div class="q-mt-xl">
<QBtn <QBtn
:label="t('twoFactor.validate')" :label="t('twoFactor.validate')"

41
src/pages/Route/Cmr/CmrFilter.vue
View File

@ -1,9 +1,11 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnInputDate from "components/common/VnInputDate.vue"; import VnInputDate from 'components/common/VnInputDate.vue';
import VnInput from 'src/components/common/VnInput.vue';
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
@ -26,18 +28,18 @@ const countries = ref();
</div> </div>
</template> </template>
<template #body="{ params }"> <template #body="{ params }">
<QList dense> <QList dense class="q-gutter-y-sm q-mt-sm">
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('route.cmr.list.cmrFk')" :label="t('route.cmr.list.cmrFk')"
v-model="params.cmrFk" v-model="params.cmrFk"
lazy-rules is-outlined
> >
<template #prepend> <template #prepend>
<QIcon name="article" size="sm"></QIcon> <QIcon name="article" size="sm"></QIcon>
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
@ -51,48 +53,48 @@ const countries = ref();
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('route.cmr.list.ticketFk')" :label="t('route.cmr.list.ticketFk')"
v-model="params.ticketFk" v-model="params.ticketFk"
lazy-rules is-outlined
> >
<template #prepend> <template #prepend>
<QIcon name="vn:ticket" size="sm"></QIcon> <QIcon name="vn:ticket" size="sm"></QIcon>
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('route.cmr.list.routeFk')" :label="t('route.cmr.list.routeFk')"
v-model="params.routeFk" v-model="params.routeFk"
lazy-rules is-outlined
> >
<template #prepend> <template #prepend>
<QIcon name="vn:delivery" size="sm"></QIcon> <QIcon name="vn:delivery" size="sm"></QIcon>
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('route.cmr.list.clientFk')" :label="t('route.cmr.list.clientFk')"
v-model="params.clientFk" v-model="params.clientFk"
lazy-rules is-outlined
> >
<template #prepend> <template #prepend>
<QIcon name="vn:client" size="sm"></QIcon> <QIcon name="vn:client" size="sm"></QIcon>
</template> </template>
</QInput> </VnInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection v-if="!countries"> <QItemSection v-if="!countries">
<QSkeleton type="QInput" class="full-width" /> <QSkeleton type="QInput" class="full-width" />
</QItemSection> </QItemSection>
<QItemSection v-if="countries"> <QItemSection v-if="countries" class="q-mb-sm">
<QSelect <QSelect
:label="t('route.cmr.list.country')" :label="t('route.cmr.list.country')"
v-model="params.country" v-model="params.country"
@ -103,6 +105,9 @@ const countries = ref();
transition-hide="jump-up" transition-hide="jump-up"
emit-value emit-value
map-options map-options
dense
outlined
rounded
> >
<template #prepend> <template #prepend>
<QIcon name="flag" size="sm"></QIcon> <QIcon name="flag" size="sm"></QIcon>
@ -112,7 +117,11 @@ const countries = ref();
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<VnInputDate v-model="params.shipped" :label="t('route.cmr.list.shipped')" /> <VnInputDate
v-model="params.shipped"
:label="t('route.cmr.list.shipped')"
is-outlined
/>
</QItemSection> </QItemSection>
</QItem> </QItem>
</QList> </QList>

7
src/pages/Shelving/Card/ShelvingForm.vue
View File

@ -5,6 +5,7 @@ import { useRoute } from 'vue-router';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue'; import FormModel from 'components/FormModel.vue';
import VnInput from 'src/components/common/VnInput.vue';
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute(); const route = useRoute();
@ -15,7 +16,7 @@ const defaultInitialData = {
priority: 0, priority: 0,
code: null, code: null,
isRecyclable: false, isRecyclable: false,
} };
const parkingFilter = { fields: ['id', 'code'] }; const parkingFilter = { fields: ['id', 'code'] };
const parkingList = ref([]); const parkingList = ref([]);
@ -81,7 +82,7 @@ const shelvingFilter = {
<template #form="{ data, validate, filter }"> <template #form="{ data, validate, filter }">
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<QInput <VnInput
v-model="data.code" v-model="data.code"
:label="t('shelving.basicData.code')" :label="t('shelving.basicData.code')"
:rules="validate('Shelving.code')" :rules="validate('Shelving.code')"
@ -107,7 +108,7 @@ const shelvingFilter = {
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<QInput <VnInput
v-model="data.priority" v-model="data.priority"
:label="t('shelving.basicData.priority')" :label="t('shelving.basicData.priority')"
:rules="validate('Shelving.priority')" :rules="validate('Shelving.priority')"

7
src/pages/Supplier/SupplierCreate.vue
View File

@ -1,11 +1,12 @@
<script setup> <script setup>
import { useI18n } from 'vue-i18n';
import { reactive } from 'vue'; import { reactive } from 'vue';
import { useStateStore } from 'stores/useStateStore'; import { useI18n } from 'vue-i18n';
import VnSearchbar from 'components/ui/VnSearchbar.vue'; import VnSearchbar from 'components/ui/VnSearchbar.vue';
import FormModel from 'components/FormModel.vue'; import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import { useStateStore } from 'stores/useStateStore';
const { t } = useI18n(); const { t } = useI18n();
const stateStore = useStateStore(); const stateStore = useStateStore();
@ -39,7 +40,7 @@ const newSupplierForm = reactive({
<template #form="{ data }"> <template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<QInput <VnInput
v-model="data.name" v-model="data.name"
:label="t('supplier.create.supplierName')" :label="t('supplier.create.supplierName')"
/> />

46
src/pages/Ticket/TicketFilter.vue
View File

@ -1,10 +1,13 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnInput from 'src/components/common/VnInput.vue';
import toDateString from 'filters/toDateString'; import toDateString from 'filters/toDateString';
import VnInputDate from "components/common/VnInputDate.vue"; import VnInputDate from 'components/common/VnInputDate.vue';
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
@ -53,29 +56,33 @@ const warehouses = ref();
</div> </div>
</template> </template>
<template #body="{ params, searchFn }"> <template #body="{ params, searchFn }">
<QList dense> <QList dense class="q-gutter-y-sm q-mt-sm">
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
v-model="params.clientFk" v-model="params.clientFk"
:label="t('Customer ID')" :label="t('Customer ID')"
lazy-rules is-outlined
/> />
</QItemSection> </QItemSection>
<QItemSection> <QItemSection>
<QInput <VnInput
v-model="params.orderFk" v-model="params.orderFk"
:label="t('Order ID')" :label="t('Order ID')"
lazy-rules is-outlined
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<VnInputDate v-model="params.from" :label="t('From')" /> <VnInputDate
v-model="params.from"
:label="t('From')"
is-outlined
/>
</QItemSection> </QItemSection>
<QItemSection> <QItemSection>
<VnInputDate v-model="params.to" :label="t('To')" /> <VnInputDate v-model="params.to" :label="t('To')" is-outlined />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
@ -92,6 +99,9 @@ const warehouses = ref();
emit-value emit-value
map-options map-options
use-input use-input
dense
outlined
rounded
:input-debounce="0" :input-debounce="0"
/> />
</QItemSection> </QItemSection>
@ -110,15 +120,18 @@ const warehouses = ref();
option-label="name" option-label="name"
emit-value emit-value
map-options map-options
dense
outlined
rounded
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
v-model="params.refFk" v-model="params.refFk"
:label="t('Invoice Ref.')" :label="t('Invoice Ref.')"
lazy-rules is-outlined
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
@ -184,6 +197,9 @@ const warehouses = ref();
option-label="name" option-label="name"
emit-value emit-value
map-options map-options
dense
outlined
rounded
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
@ -201,6 +217,9 @@ const warehouses = ref();
option-label="name" option-label="name"
emit-value emit-value
map-options map-options
dense
outlined
rounded
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
@ -218,6 +237,9 @@ const warehouses = ref();
option-label="name" option-label="name"
emit-value emit-value
map-options map-options
dense
outlined
rounded
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
@ -232,7 +254,7 @@ en:
params: params:
search: Contains search: Contains
clientFk: Customer clientFk: Customer
orderFK: Order orderFk: Order
from: From from: From
to: To to: To
salesPersonFk: Salesperson salesPersonFk: Salesperson
@ -249,7 +271,7 @@ es:
params: params:
search: Contiene search: Contiene
clientFk: Cliente clientFk: Cliente
orderFK: Pedido orderFk: Pedido
from: Desde from: Desde
to: Hasta to: Hasta
salesPersonFk: Comercial salesPersonFk: Comercial

3
src/pages/Travel/ExtraCommunity.vue
View File

@ -8,6 +8,7 @@ import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorP
import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue'; import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import ExtraCommunityFilter from './ExtraCommunityFilter.vue'; import ExtraCommunityFilter from './ExtraCommunityFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import { toCurrency } from 'src/filters'; import { toCurrency } from 'src/filters';
@ -314,7 +315,7 @@ onMounted(async () => {
label-set="Save" label-set="Save"
label-cancel="Close" label-cancel="Close"
> >
<QInput <VnInput
v-model="rows[props.pageIndex][col.field]" v-model="rows[props.pageIndex][col.field]"
dense dense
autofocus autofocus

53
src/pages/Travel/ExtraCommunityFilter.vue
View File

@ -1,9 +1,11 @@
<script setup> <script setup>
import { reactive } from 'vue'; import { reactive } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue'; import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import FetchData from 'components/FetchData.vue'; import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue'; import VnInputDate from 'components/common/VnInputDate.vue';
const { t } = useI18n(); const { t } = useI18n();
@ -70,24 +72,22 @@ const decrement = (paramsObj, key) => {
</div> </div>
</template> </template>
<template #body="{ params }"> <template #body="{ params }">
<QList dense style="max-width: 256px" class="list"> <QList dense class="list q-gutter-y-sm q-mt-sm">
<QItem class="q-my-sm"> <QItem>
<QItemSection> <QItemSection>
<QInput label="id" dense outlined rounded v-model="params.id" /> <VnInput label="id" v-model="params.id" is-outlined />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-my-sm"> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('params.ref')" :label="t('params.reference')"
dense
outlined
rounded
v-model="params.reference" v-model="params.reference"
is-outlined
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem>
<QItemSection> <QItemSection>
<QInput <QInput
v-model="params.totalEntries" v-model="params.totalEntries"
@ -118,7 +118,7 @@ const decrement = (paramsObj, key) => {
</QInput> </QInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem>
<QItemSection> <QItemSection>
<VnSelectFilter <VnSelectFilter
:label="t('params.agencyModeFk')" :label="t('params.agencyModeFk')"
@ -133,29 +133,25 @@ const decrement = (paramsObj, key) => {
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem>
<QItemSection> <QItemSection>
<VnInputDate <VnInputDate
v-model="params.shippedFrom" v-model="params.shippedFrom"
:label="t('params.shippedFrom')" :label="t('params.shippedFrom')"
dense is-outlined
outlined
rounded
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem>
<QItemSection> <QItemSection>
<VnInputDate <VnInputDate
v-model="params.landedTo" v-model="params.landedTo"
:label="t('params.landedTo')" :label="t('params.landedTo')"
dense is-outlined
outlined
rounded
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem>
<QItemSection> <QItemSection>
<VnSelectFilter <VnSelectFilter
:label="t('params.warehouseOutFk')" :label="t('params.warehouseOutFk')"
@ -170,7 +166,7 @@ const decrement = (paramsObj, key) => {
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem>
<QItemSection> <QItemSection>
<VnSelectFilter <VnSelectFilter
:label="t('params.warehouseInFk')" :label="t('params.warehouseInFk')"
@ -185,7 +181,7 @@ const decrement = (paramsObj, key) => {
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem>
<QItemSection> <QItemSection>
<VnSelectFilter <VnSelectFilter
:label="t('supplier.pageTitles.supplier')" :label="t('supplier.pageTitles.supplier')"
@ -200,7 +196,7 @@ const decrement = (paramsObj, key) => {
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem>
<QItemSection> <QItemSection>
<VnSelectFilter <VnSelectFilter
:label="t('params.continent')" :label="t('params.continent')"
@ -221,6 +217,9 @@ const decrement = (paramsObj, key) => {
</template> </template>
<style scoped> <style scoped>
.list {
width: 256px;
}
.list * { .list * {
max-width: 100%; max-width: 100%;
} }
@ -240,7 +239,8 @@ const decrement = (paramsObj, key) => {
<i18n> <i18n>
en: en:
params: params:
ref: Reference id: Id
reference: Reference
totalEntries: Total entries totalEntries: Total entries
agencyModeFk: Agency agencyModeFk: Agency
warehouseInFk: Warehouse In warehouseInFk: Warehouse In
@ -251,7 +251,8 @@ en:
continent: Continent out continent: Continent out
es: es:
params: params:
ref: Referencia id: Id
reference: Referencia
totalEntries: Ent. totales totalEntries: Ent. totales
agencyModeFk: Agencia agencyModeFk: Agencia
warehouseInFk: Alm. entrada warehouseInFk: Alm. entrada

11
src/pages/Travel/TravelCreate.vue
View File

@ -1,14 +1,15 @@
<script setup> <script setup>
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { reactive, ref } from 'vue'; import { reactive, ref, onBeforeMount } from 'vue';
import FetchData from 'components/FetchData.vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import FetchData from 'components/FetchData.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue'; import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import FormModel from 'components/FormModel.vue'; import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import { toDate } from 'src/filters'; import VnInput from 'src/components/common/VnInput.vue';
import { onBeforeMount } from 'vue'; import { toDate } from 'src/filters';
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute(); const route = useRoute();
@ -70,7 +71,7 @@ const onFetchWarehouses = (warehouses) => {
<template #form="{ data }"> <template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">
<QInput v-model="data.ref" :label="t('globals.reference')" /> <VnInput v-model="data.ref" :label="t('globals.reference')" />
</div> </div>
<div class="col"> <div class="col">
<VnSelectFilter <VnSelectFilter

34
src/pages/Travel/TravelFilter.vue
View File

@ -1,9 +1,12 @@
<script setup> <script setup>
import { reactive } from 'vue'; import { reactive } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue'; import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import { toDate } from 'src/filters'; import { toDate } from 'src/filters';
const { t } = useI18n(); const { t } = useI18n();
@ -64,19 +67,17 @@ const decrement = (paramsObj, key) => {
</div> </div>
</template> </template>
<template #body="{ params }"> <template #body="{ params }">
<QList dense style="max-width: 256px" class="list"> <QList dense class="list q-gutter-y-sm q-mt-sm">
<QItem class="q-my-sm"> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('params.search')"
dense
outlined
rounded
v-model="params.search" v-model="params.search"
:label="t('params.search')"
is-outlined
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem>
<QItemSection> <QItemSection>
<VnSelectFilter <VnSelectFilter
:label="t('params.agencyModeFk')" :label="t('params.agencyModeFk')"
@ -91,7 +92,7 @@ const decrement = (paramsObj, key) => {
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem>
<QItemSection> <QItemSection>
<VnSelectFilter <VnSelectFilter
:label="t('params.warehouseOutFk')" :label="t('params.warehouseOutFk')"
@ -106,7 +107,7 @@ const decrement = (paramsObj, key) => {
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem>
<QItemSection> <QItemSection>
<VnSelectFilter <VnSelectFilter
:label="t('params.warehouseInFk')" :label="t('params.warehouseInFk')"
@ -121,7 +122,7 @@ const decrement = (paramsObj, key) => {
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem>
<QItemSection> <QItemSection>
<QInput <QInput
v-model="params.scopeDays" v-model="params.scopeDays"
@ -151,7 +152,7 @@ const decrement = (paramsObj, key) => {
</QInput> </QInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem>
<QItemSection> <QItemSection>
<QInput <QInput
dense dense
@ -184,7 +185,7 @@ const decrement = (paramsObj, key) => {
</QInput> </QInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem>
<QItemSection> <QItemSection>
<QInput <QInput
dense dense
@ -217,7 +218,7 @@ const decrement = (paramsObj, key) => {
</QInput> </QInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem>
<QItemSection> <QItemSection>
<VnSelectFilter <VnSelectFilter
:label="t('params.continent')" :label="t('params.continent')"
@ -232,7 +233,7 @@ const decrement = (paramsObj, key) => {
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem>
<QItemSection> <QItemSection>
<QInput <QInput
v-model="params.totalEntries" v-model="params.totalEntries"
@ -269,6 +270,9 @@ const decrement = (paramsObj, key) => {
</template> </template>
<style scoped> <style scoped>
.list {
width: 256px;
}
.list * { .list * {
max-width: 100%; max-width: 100%;
} }

11
src/pages/Wagon/Type/WagonTypeCreate.vue
View File

@ -1,9 +1,12 @@
<script setup> <script setup>
import axios from 'axios';
import { useQuasar } from 'quasar';
import { computed, ref, onMounted, onUpdated } from 'vue'; import { computed, ref, onMounted, onUpdated } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
import VnInput from 'src/components/common/VnInput.vue';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
onMounted(() => fetch()); onMounted(() => fetch());
onUpdated(() => fetch()); onUpdated(() => fetch());
@ -241,7 +244,7 @@ function exceedMaxHeight(pos) {
<QPage class="q-pa-sm q-mx-xl"> <QPage class="q-pa-sm q-mx-xl">
<QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm"> <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
<QCard class="q-pa-md"> <QCard class="q-pa-md">
<QInput <VnInput
filled filled
v-model="name" v-model="name"
:label="t('wagon.type.name')" :label="t('wagon.type.name')"

9
src/pages/Wagon/WagonCreate.vue
View File

@ -1,9 +1,12 @@
<script setup> <script setup>
import axios from 'axios';
import { QIcon, QInput, QItem, QItemSection, QSelect } from 'quasar';
import { computed, onMounted, onUpdated, ref } from 'vue'; import { computed, onMounted, onUpdated, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { QIcon, QInput, QItem, QItemSection, QSelect } from 'quasar';
import VnInput from 'src/components/common/VnInput.vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
onMounted(() => fetch()); onMounted(() => fetch());
onUpdated(() => fetch()); onUpdated(() => fetch());
@ -100,7 +103,7 @@ function filterType(val, update) {
/> />
</div> </div>
<div class="col"> <div class="col">
<QInput <VnInput
filled filled
v-model="wagon.plate" v-model="wagon.plate"
:label="t('wagon.create.plate')" :label="t('wagon.create.plate')"

36
src/pages/Worker/WorkerFilter.vue
View File

@ -1,8 +1,10 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnInput from 'src/components/common/VnInput.vue';
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
@ -25,40 +27,39 @@ const departments = ref();
</div> </div>
</template> </template>
<template #body="{ params, searchFn }"> <template #body="{ params, searchFn }">
<QList dense> <QList dense class="q-gutter-y-sm q-mt-sm">
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput :label="t('FI')" v-model="params.fi" lazy-rules> <VnInput :label="t('FI')" v-model="params.fi" is-outlined
<template #prepend> ><template #prepend>
<QIcon name="badge" size="sm"></QIcon> <QIcon name="badge" size="xs"></QIcon> </template
</template> ></VnInput>
</QInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('First Name')" :label="t('First Name')"
v-model="params.firstName" v-model="params.firstName"
lazy-rules is-outlined
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('Last Name')" :label="t('Last Name')"
v-model="params.lastName" v-model="params.lastName"
lazy-rules is-outlined
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('User Name')" :label="t('User Name')"
v-model="params.userName" v-model="params.userName"
lazy-rules is-outlined
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
@ -77,16 +78,19 @@ const departments = ref();
emit-value emit-value
map-options map-options
use-input use-input
dense
outlined
rounded
:input-debounce="0" :input-debounce="0"
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-md"> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInput
:label="t('Extension')" :label="t('Extension')"
v-model="params.extension" v-model="params.extension"
lazy-rules is-outlined
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
@ -104,6 +108,7 @@ en:
lastName: Last name lastName: Last name
userName: User userName: User
extension: Extension extension: Extension
departmentFk: Department
es: es:
params: params:
search: Contiene search: Contiene
@ -112,6 +117,7 @@ es:
lastName: Apellidos lastName: Apellidos
userName: Usuario userName: Usuario
extension: Extensión extension: Extensión
departmentFk: Departamento
FI: NIF FI: NIF
First Name: Nombre First Name: Nombre
Last Name: Apellidos Last Name: Apellidos