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

WIP

This commit is contained in:
William Buezas 2024-01-17 13:02:44 -03:00
parent 7753c365e4
commit 9cd1f542aa
2 changed files with 228 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

215
src/pages/Entry/EntryFilter.vue Normal file
View File

@ -0,0 +1,215 @@
<script setup>
import { ref } 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 VnInputDate from 'src/components/common/VnInputDate.vue';
const { t } = useI18n();
const props = defineProps({
dataKey: {
type: String,
required: true,
},
});
const currenciesOptions = ref([]);
const companiesOptions = ref([]);
const suppliersOptions = ref([]);
</script>
<template>
<FetchData
ref="companiesRef"
url="Companies"
:filter="{ fields: ['id', 'code'] }"
order="code"
@on-fetch="(data) => (companiesOptions = data)"
auto-load
/>
<FetchData
ref="currenciesRef"
url="Currencies"
:filter="{ fields: ['id', 'name'] }"
order="code"
@on-fetch="(data) => (currenciesOptions = data)"
auto-load
/>
<FetchData
url="Suppliers"
:filter="{ fields: ['id', 'nickname', 'name'] }"
order="nickname"
@on-fetch="(data) => (suppliersOptions = data)"
auto-load
/>
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
<template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs">
<strong>{{ t(`params.${tag.label}`) }}: </strong>
<span>{{ formatFn(tag.value) }}</span>
</div>
</template>
<template #body="{ params }">
<QList dense class="list q-gutter-y-sm q-mt-sm">
<QItem>
<QItemSection>
<VnInput
v-model="params.search"
:label="t('params.search')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
v-model="params.reference"
:label="t('params.reference')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
v-model="params.invoiceNumber"
:label="t('params.invoiceNumber')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
v-model="params.travelFk"
:label="t('params.travelFk')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnSelectFilter
:label="t('params.companyFk')"
v-model="params.companyFk"
:options="companiesOptions"
option-value="id"
option-label="code"
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnSelectFilter
:label="t('params.currencyFk')"
v-model="params.currencyFk"
:options="currenciesOptions"
option-value="id"
option-label="name"
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnSelectFilter
:label="t('params.supplierFk')"
v-model="params.supplierFk"
:options="suppliersOptions"
option-value="id"
option-label="name"
hide-selected
dense
outlined
rounded
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{
scope.opt?.name + ': ' + scope.opt?.nickname
}}</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInputDate
:label="t('params.created')"
is-outlined
v-model="params.created"
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInputDate
:label="t('params.from')"
is-outlined
v-model="params.from"
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInputDate
:label="t('params.to')"
is-outlined
v-model="params.to"
/>
</QItemSection>
</QItem>
</QList>
</template>
</VnFilterPanel>
</template>
<style scoped>
.list {
width: 256px;
}
.list * {
max-width: 100%;
}
</style>
<i18n>
en:
params:
search: General search
reference: Reference
invoiceNumber: Invoice number
travelFk: Travel
companyFk: Company
currencyFk: Currency
supplierFk: Supplier
from: From
to: To
created: Created
es:
params:
search: Búsqueda general
reference: Referencia
invoiceNumber: Núm. factura
travelFk: Envío
companyFk: Empresa
currencyFk: Moneda
supplierFk: Proveedor
from: Desde
to: Hasta
created: Fecha creación
</i18n>

13
src/pages/Entry/EntryList.vue
View File

@ -1,4 +1,5 @@
<script setup>
import { onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
@ -7,9 +8,12 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import CardList from 'src/components/ui/CardList.vue';
import EntrySummaryDialog from './Card/EntrySummaryDialog.vue';
import EntryFilter from './EntryFilter.vue';
import { useStateStore } from 'stores/useStateStore';
import { toDate } from 'src/filters/index';
const stateStore = useStateStore();
const router = useRouter();
const quasar = useQuasar();
const { t } = useI18n();
@ -30,9 +34,18 @@ function viewSummary(id) {
},
});
}
onMounted(async () => {
stateStore.rightDrawer = true;
});
</script>
<template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<EntryFilter data-key="EntryList" />
</QScrollArea>
</QDrawer>
<QPage class="column items-center q-pa-md">
<div class="card-list">
<VnPaginate