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

Changes

This commit is contained in:
Joan Sanchez 2023-02-21 15:05:57 +01:00
parent 984b1f9e24
commit 08c60b3da0
9 changed files with 144 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/ui/VnFilterPanel.vue
View File

@ -23,12 +23,21 @@ const userParams = ref({});
onMounted(() => { onMounted(() => {
const params = store.userParams; const params = store.userParams;
if (params) { if (params) {
userParams.value = params; userParams.value = Object.assign({}, params);
} }
}); });
async function search() { async function search() {
const params = userParams.value; const params = userParams.value;
for (const param in params) {
if (params[param] === '' || params[param] === null) {
delete userParams.value[param];
delete store.userParams[param];
}
}
// if (Object.keys(params))
await arrayData.addFilter({ params }); await arrayData.addFilter({ params });
} }
@ -64,7 +73,7 @@ async function remove(key) {
removable removable
> >
<slot name="tags" :tag="chip"> <slot name="tags" :tag="chip">
<div class="q-gutter-md"> <div class="q-gutter-x-xs">
<strong>{{ chip.label }}:</strong> <strong>{{ chip.label }}:</strong>
<span>"{{ chip.value }}"</span> <span>"{{ chip.value }}"</span>
</div> </div>
@ -97,17 +106,17 @@ async function remove(key) {
</q-item> </q-item>
</div> </div>
<q-separator /> <q-separator />
<slot name="body" :params="userParams"></slot> <slot name="body" :params="userParams" :search-fn="search"></slot>
</q-form> </q-form>
</template> </template>
<i18n> <i18n>
{ {
"en": { "en": {
"appliedFilters": "Applied filters" "appliedFilters": "Applied filters"
}, },
"es": { "es": {
"appliedFilters": "Filtros aplicados" "appliedFilters": "Filtros aplicados"
}
} }
</i18n> }
</i18n>

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

@ -69,6 +69,14 @@ async function search() {
<template #prepend> <template #prepend>
<q-icon name="search" /> <q-icon name="search" />
</template> </template>
<template #append>
<q-icon
v-if="searchText !== ''"
name="close"
@click="searchText = ''"
class="cursor-pointer"
/>
</template>
</q-input> </q-input>
</q-form> </q-form>
</template> </template>

2
src/composables/useArrayData.js
View File

@ -123,7 +123,7 @@ export function useArrayData(key, userOptions) {
} }
async function refresh() { async function refresh() {
// TODO: Refresh await fetch({ append: false });
} }
function updateStateParams() { function updateStateParams() {

2
src/layouts/MainLayout.vue
View File

@ -16,7 +16,7 @@ const stateStore = useStateStore();
v-model="stateStore.rightDrawer" v-model="stateStore.rightDrawer"
side="right" side="right"
:width="256" :width="256"
:breakpoint="800" :breakpoint="1000"
:persistent="false" :persistent="false"
> >
<q-scroll-area class="fit text-grey-8"> <q-scroll-area class="fit text-grey-8">

15
src/pages/Customer/Card/CustomerCard.vue
View File

@ -1,4 +1,5 @@
<script setup> <script setup>
import { useI18n } from 'vue-i18n';
import { useState } from 'src/composables/useState'; import { useState } from 'src/composables/useState';
import CustomerDescriptor from './CustomerDescriptor.vue'; import CustomerDescriptor from './CustomerDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue'; import LeftMenu from 'components/LeftMenu.vue';
@ -6,10 +7,11 @@ import TeleportSlot from 'components/ui/TeleportSlot.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
const state = useState(); const state = useState();
const { t } = useI18n();
</script> </script>
<template> <template>
<teleport-slot to="#searchbar"> <teleport-slot to="#searchbar">
<VnSearchbar data-key="CustomerList" /> <VnSearchbar data-key="CustomerList" :label="t('searchLabel')" />
</teleport-slot> </teleport-slot>
<q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500"> <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
<q-scroll-area class="fit"> <q-scroll-area class="fit">
@ -24,3 +26,14 @@ const state = useState();
</q-page> </q-page>
</q-page-container> </q-page-container>
</template> </template>
<i18n>
{
"en": {
"searchLabel": "Search by customer id or name"
},
"es": {
"searchLabel": "Buscar por id o nombre del cliente"
}
}
</i18n>

153
src/pages/Customer/CustomerFilter.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 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';
const { t } = useI18n();
const props = defineProps({ const props = defineProps({
dataKey: { dataKey: {
type: String, type: String,
@ -10,10 +12,10 @@ const props = defineProps({
}, },
}); });
const provinces = ref([]); const provinces = ref();
const workers = ref([]); const workers = ref();
const workersCopy = ref([]); const workersCopy = ref();
const zones = ref([]); const zones = ref();
function setWorkers(data) { function setWorkers(data) {
workers.value = data; workers.value = data;
@ -30,35 +32,12 @@ function setWorkers(data) {
@on-fetch="setWorkers" @on-fetch="setWorkers"
auto-load auto-load
/> />
<VnFilterPanel :data-key="props.dataKey"> <VnFilterPanel :data-key="props.dataKey" :search-button="true">
<template #body="{ params }"> <template #body="{ params, searchFn }">
<q-list> <q-list>
<!-- <q-item>
<q-item-section>
<q-input
v-model="params.search"
label="Search by id or name"
class="full-width"
lazy-rules
autofocus
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-btn
label="Search"
type="submit"
color="primary"
class="full-width"
rounded
/>
</q-item-section>
</q-item>
<q-separator /> -->
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-input label="Fiscal ID" v-model="params.fi" lazy-rules> <q-input :label="t('fi')" v-model="params.fi" lazy-rules>
<template #prepend> <template #prepend>
<q-icon name="badge" size="sm"></q-icon> <q-icon name="badge" size="sm"></q-icon>
</template> </template>
@ -67,27 +46,30 @@ function setWorkers(data) {
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-input label="Name" v-model="params.name" lazy-rules /> <q-input :label="t('name')" v-model="params.name" lazy-rules />
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-input <q-input
label="Social name" :label="t('socialName')"
v-model="params.socialName" v-model="params.socialName"
lazy-rules lazy-rules
/> />
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section v-if="!workers">
<q-skeleton type="QInput" class="full-width" />
</q-item-section>
<q-item-section v-if="workers">
<q-select <q-select
v-model="params.salesPersonFk" v-model="params.salesPersonFk"
:options="workers" :options="workers"
option-value="id" option-value="id"
option-label="name" option-label="name"
emit-value emit-value
label="Salesperson" :label="t('salesPersonFk')"
map-options map-options
use-input use-input
:input-debounce="0" :input-debounce="0"
@ -105,56 +87,91 @@ function setWorkers(data) {
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section v-if="!provinces">
<q-input label="Phone" v-model="params.phone" lazy-rules> <q-skeleton type="QInput" class="full-width" />
<template #prepend>
<q-icon name="phone" size="sm"></q-icon>
</template>
</q-input>
</q-item-section> </q-item-section>
</q-item> <q-item-section v-if="provinces">
<q-item>
<q-item-section>
<q-input label="Email" v-model="params.email" lazy-rules>
<template #prepend>
<q-icon name="email" size="sm"></q-icon>
</template>
</q-input>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-select <q-select
label="Province" label="Province"
v-model="params.provinceFk" v-model="params.provinceFk"
:options="provinces" :options="provinces"
@update:model-value="searchFn"
option-value="id" option-value="id"
option-label="name" option-label="name"
emit-value emit-value
map-options map-options
/> />
</q-item-section> </q-item-section>
</q-item>
<q-item class="q-mb-md">
<q-item-section> <q-item-section>
<q-input label="City" v-model="params.city" lazy-rules /> <q-input label="City" v-model="params.city" lazy-rules />
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-separator />
<q-item-section> <q-expansion-item label="More options" expand-separator>
<q-select <q-item>
label="Zone" <q-item-section>
v-model="params.zoneFk" <q-input label="Phone" v-model="params.phone" lazy-rules>
:options="zones" <template #prepend>
option-value="id" <q-icon name="phone" size="sm"></q-icon>
option-label="name" </template>
emit-value </q-input>
map-options </q-item-section>
/> </q-item>
</q-item-section> <q-item>
<q-item-section> <q-item-section>
<q-input label="Postcode" v-model="params.postcode" lazy-rules /> <q-input label="Email" v-model="params.email" lazy-rules>
</q-item-section> <template #prepend>
</q-item> <q-icon name="email" size="sm"></q-icon>
</template>
</q-input>
</q-item-section>
</q-item>
<q-item>
<q-item-section v-if="!zones">
<q-skeleton type="QInput" class="full-width" />
</q-item-section>
<q-item-section v-if="zones">
<q-select
label="Zone"
v-model="params.zoneFk"
:options="zones"
option-value="id"
option-label="name"
emit-value
map-options
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-input
label="Postcode"
v-model="params.postcode"
lazy-rules
/>
</q-item-section>
</q-item>
</q-expansion-item>
</q-list> </q-list>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
</template> </template>
<i18n>
{
"en": {
"fi": "FI",
"name": "Name",
"socialName": "Social Name",
"salesPersonFk": "Salesperson"
},
"es": {
"fi": "NIF",
"name": "Nombre",
"socialName": "Razón social",
"salesPersonFk": "Comercial"
}
}
</i18n>

13
src/pages/Customer/CustomerList.vue
View File

@ -35,7 +35,7 @@ function viewSummary(id) {
<template> <template>
<teleport-slot to="#searchbar"> <teleport-slot to="#searchbar">
<VnSearchbar data-key="CustomerList" label="Search by customer id or name" /> <VnSearchbar data-key="CustomerList" :label="t('searchLabel')" />
</teleport-slot> </teleport-slot>
<teleport-slot to="#rightPanel"> <teleport-slot to="#rightPanel">
<CustomerFilter data-key="CustomerList" /> <CustomerFilter data-key="CustomerList" />
@ -126,3 +126,14 @@ function viewSummary(id) {
</paginate> </paginate>
</q-page> </q-page>
</template> </template>
<i18n>
{
"en": {
"searchLabel": "Search by customer id or name"
},
"es": {
"searchLabel": "Buscar por id o nombre del cliente"
}
}
</i18n>

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

@ -138,6 +138,7 @@ async function onSubmit() {
color="primary" color="primary"
class="full-width" class="full-width"
rounded rounded
unelevated
/> />
</div> </div>
</q-form> </q-form>

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

@ -41,7 +41,7 @@ function setWorkers(data) {
<span>"{{ tag.value }}"</span> <span>"{{ tag.value }}"</span>
</div> </div>
</template> </template>
<template #body="{ params }"> <template #body="{ params, searchFn }">
<q-list dense> <q-list dense>
<q-item> <q-item>
<q-item-section> <q-item-section>
@ -159,6 +159,7 @@ function setWorkers(data) {
<q-checkbox <q-checkbox
v-model="params.myTeam" v-model="params.myTeam"
label="My team" label="My team"
@update:model-value="searchFn()"
toggle-indeterminate toggle-indeterminate
/> />
</q-item-section> </q-item-section>