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>
import { ref } from 'vue';
import { useDialogPluginComponent } from 'quasar';
import { useI18n } from 'vue-i18n';
import { useDialogPluginComponent } from 'quasar';
import VnInput from 'src/components/common/VnInput.vue';
const props = defineProps({
data: {
@ -52,7 +54,7 @@ async function confirm() {
{{ t('The notification will be sent to the following address') }}
</QCardSection>
<QCardSection class="q-pt-none">
<QInput dense v-model="address" rounded outlined autofocus />
<VnInput v-model="address" is-outlined autofocus />
</QCardSection>
<QCardActions align="right">
<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: {
type: Boolean,
default: false,
}
},
isOutlined: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(['update:modelValue']);
const value = computed({
@ -36,6 +40,16 @@ const formatDate = (dateString) => {
date.getDate()
)}`;
};
const styleAttrs = computed(() => {
return props.isOutlined
? {
dense: true,
outlined: true,
rounded: true,
}
: {};
});
</script>
<template>
@ -44,7 +58,7 @@ const formatDate = (dateString) => {
rounded
readonly
:model-value="toDate(value)"
v-bind="$attrs"
v-bind="{ ...$attrs, ...styleAttrs }"
>
<template #append>
<QIcon name="event" class="cursor-pointer">

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

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

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

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

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

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

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

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

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

@ -2,10 +2,13 @@
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import axios from 'axios';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import { useArrayData } from 'src/composables/useArrayData';
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 { t } = useI18n();
@ -65,7 +68,7 @@ async function remove({ id }) {
<QPageSticky expand position="top" :offset="[16, 16]">
<QCard class="card q-pa-md">
<QForm @submit="submit">
<QInput
<VnInput
ref="input"
v-model="newRma.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 FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
const route = useRoute();
const { t } = useI18n();
@ -64,7 +65,7 @@ const filterOptions = {
<template #form="{ data, validate, filter }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput
<VnInput
v-model="data.socialName"
:label="t('customer.basicData.socialName')"
:rules="validate('client.socialName')"
@ -87,7 +88,7 @@ const filterOptions = {
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput
<VnInput
v-model="data.contact"
:label="t('customer.basicData.contact')"
:rules="validate('client.contact')"
@ -95,7 +96,7 @@ const filterOptions = {
/>
</div>
<div class="col">
<QInput
<VnInput
v-model="data.email"
type="email"
:label="t('customer.basicData.email')"
@ -106,7 +107,7 @@ const filterOptions = {
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput
<VnInput
v-model="data.phone"
:label="t('customer.basicData.phone')"
:rules="validate('client.phone')"
@ -114,7 +115,7 @@ const filterOptions = {
/>
</div>
<div class="col">
<QInput
<VnInput
v-model="data.mobile"
:label="t('customer.basicData.mobile')"
:rules="validate('client.mobile')"

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

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

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

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

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

@ -1,9 +1,12 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.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 props = defineProps({
@ -33,28 +36,32 @@ const suppliersRef = ref();
</div>
</template>
<template #body="{ params, searchFn }">
<QList dense>
<QList dense class="list q-gutter-y-sm q-mt-sm">
<QItem>
<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>
<QIcon name="badge" size="sm"></QIcon>
</template>
</QInput>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QInput
<VnInput
:label="t('params.supplierRef')"
v-model="params.supplierRef"
@input.
is-outlined
lazy-rules
>
<template #prepend>
<QIcon name="vn:client" size="sm"></QIcon>
</template>
</QInput>
</VnInput>
</QItemSection>
</QItem>
<QItem>
@ -66,52 +73,67 @@ const suppliersRef = ref();
option-value="id"
option-label="nickname"
@input-value="suppliersRef.fetch()"
dense
outlined
rounded
>
</VnSelectFilter>
</QItemSection>
</QItem>
<QItem>
<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>
<QIcon name="badge" size="sm"></QIcon>
</template>
</QInput>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QInput
<VnInput
:label="t('params.serialNumber')"
v-model="params.serialNumber"
is-outlined
lazy-rules
>
<template #prepend>
<QIcon name="badge" size="sm"></QIcon>
</template>
</QInput>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QInput
<VnInput
:label="t('params.serial')"
v-model="params.serial"
is-outlined
lazy-rules
>
<template #prepend>
<QIcon name="badge" size="sm"></QIcon>
</template>
</QInput>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<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>
<QIcon name="euro" size="sm"></QIcon>
</template>
</QInput>
</VnInput>
</QItemSection>
</QItem>
<QItem class="q-mb-md">
@ -127,137 +149,57 @@ const suppliersRef = ref();
<QExpansionItem :label="t('More options')" expand-separator>
<QItem>
<QItemSection>
<QInput
<VnInput
:label="t('params.awb')"
v-model="params.awbCode"
is-outlined
lazy-rules
>
<template #prepend>
<QIcon name="badge" size="sm"></QIcon>
</template>
</QInput>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QInput
<VnInput
:label="t('params.account')"
v-model="params.account"
is-outlined
lazy-rules
>
<template #prepend>
<QIcon name="person" size="sm" />
</template>
</QInput>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QInput :label="t('From')" v-model="params.from" mask="date">
<template #append>
<QIcon name="event" class="cursor-pointer">
<QPopupProxy
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>
<VnInputDate
:label="t('From')"
v-model="params.from"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QInput :label="t('To')" v-model="params.to" mask="date">
<template #append>
<QIcon name="event" class="cursor-pointer">
<QPopupProxy
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>
<VnInputDate
:label="t('To')"
v-model="params.to"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QInput
<VnInputDate
:label="t('Issued')"
v-model="params.issued"
mask="date"
>
<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>
is-outlined
/>
</QItemSection>
</QItem>
</QExpansionItem>
@ -266,6 +208,15 @@ const suppliersRef = ref();
</VnFilterPanel>
</template>
<style scoped>
.list {
width: 256px;
}
.list * {
max-width: 100%;
}
</style>
<i18n>
en:
params:

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

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

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

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

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

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

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

@ -3,12 +3,13 @@ import { ref } from 'vue';
import { Notify, useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { useSession } from 'src/composables/useSession';
import { useLogin } from 'src/composables/useLogin';
import VnLogo from 'components/ui/VnLogo.vue';
import VnInput from 'src/components/common/VnInput.vue';
import axios from 'axios';
const quasar = useQuasar();
const session = useSession();
@ -68,13 +69,14 @@ async function onSubmit() {
<template>
<QForm @submit="onSubmit" class="q-gutter-y-md q-pa-lg formCard">
<VnLogo alt="Logo" fit="contain" :ratio="16 / 9" class="q-mb-md" />
<QInput
<VnInput
v-model="username"
:label="t('login.username')"
lazy-rules
:rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
/>
<QInput
<VnInput
type="password"
v-model="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" />
<h5 class="text-center q-my-md">{{ t('twoFactor.insert') }}</h5>
</div>
<QInput
<VnInput
v-model="code"
:hint="t('twoFactor.explanation')"
mask="# # # # # #"
@ -64,7 +64,7 @@ async function onSubmit() {
<template #prepend>
<QIcon name="lock" />
</template>
</QInput>
</VnInput>
<div class="q-mt-xl">
<QBtn
:label="t('twoFactor.validate')"

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

@ -1,9 +1,11 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.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 props = defineProps({
@ -26,18 +28,18 @@ const countries = ref();
</div>
</template>
<template #body="{ params }">
<QList dense>
<QList dense class="q-gutter-y-sm q-mt-sm">
<QItem>
<QItemSection>
<QInput
<VnInput
:label="t('route.cmr.list.cmrFk')"
v-model="params.cmrFk"
lazy-rules
is-outlined
>
<template #prepend>
<QIcon name="article" size="sm"></QIcon>
</template>
</QInput>
</VnInput>
</QItemSection>
</QItem>
<QItem>
@ -51,48 +53,48 @@ const countries = ref();
</QItem>
<QItem>
<QItemSection>
<QInput
<VnInput
:label="t('route.cmr.list.ticketFk')"
v-model="params.ticketFk"
lazy-rules
is-outlined
>
<template #prepend>
<QIcon name="vn:ticket" size="sm"></QIcon>
</template>
</QInput>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QInput
<VnInput
:label="t('route.cmr.list.routeFk')"
v-model="params.routeFk"
lazy-rules
is-outlined
>
<template #prepend>
<QIcon name="vn:delivery" size="sm"></QIcon>
</template>
</QInput>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QInput
<VnInput
:label="t('route.cmr.list.clientFk')"
v-model="params.clientFk"
lazy-rules
is-outlined
>
<template #prepend>
<QIcon name="vn:client" size="sm"></QIcon>
</template>
</QInput>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection v-if="!countries">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="countries">
<QItemSection v-if="countries" class="q-mb-sm">
<QSelect
:label="t('route.cmr.list.country')"
v-model="params.country"
@ -103,6 +105,9 @@ const countries = ref();
transition-hide="jump-up"
emit-value
map-options
dense
outlined
rounded
>
<template #prepend>
<QIcon name="flag" size="sm"></QIcon>
@ -112,7 +117,11 @@ const countries = ref();
</QItem>
<QItem>
<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>
</QItem>
</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 FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnInput from 'src/components/common/VnInput.vue';
const { t } = useI18n();
const route = useRoute();
@ -15,7 +16,7 @@ const defaultInitialData = {
priority: 0,
code: null,
isRecyclable: false,
}
};
const parkingFilter = { fields: ['id', 'code'] };
const parkingList = ref([]);
@ -81,7 +82,7 @@ const shelvingFilter = {
<template #form="{ data, validate, filter }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput
<VnInput
v-model="data.code"
:label="t('shelving.basicData.code')"
:rules="validate('Shelving.code')"
@ -107,7 +108,7 @@ const shelvingFilter = {
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput
<VnInput
v-model="data.priority"
:label="t('shelving.basicData.priority')"
:rules="validate('Shelving.priority')"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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