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

Filter panel component
gitea/salix-front/pipeline/head There was a failure building this commit Details

This commit is contained in:
Joan Sanchez 2023-02-09 15:07:27 +01:00
parent 3c15554ab4
commit 874db2752b
9 changed files with 297 additions and 403 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/NavBar.vue
View File

@ -1,13 +1,15 @@
<script setup> <script setup>
import { onMounted } from 'vue'; import { onMounted } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useState } from 'src/composables/useState';
import { useSession } from 'src/composables/useSession'; import { useSession } from 'src/composables/useSession';
import UserPanel from 'components/UserPanel.vue'; import UserPanel from 'components/UserPanel.vue';
import { useState } from 'src/composables/useState';
import { useStateStore } from 'stores/useStateStore';
import PinnedModules from './PinnedModules.vue'; import PinnedModules from './PinnedModules.vue';
const { t } = useI18n(); const { t } = useI18n();
const session = useSession(); const session = useSession();
const stateStore = useStateStore();
const state = useState(); const state = useState();
const user = state.getUser(); const user = state.getUser();
const token = session.getToken(); const token = session.getToken();
@ -15,17 +17,13 @@ const appName = 'Lilium';
defineEmits(['onToggleRightDrawer']); defineEmits(['onToggleRightDrawer']);
onMounted(() => (state.headerMounted.value = true)); onMounted(() => stateStore.setMounted());
function onToggleDrawer() {
state.drawer.value = !state.drawer.value;
}
</script> </script>
<template> <template>
<q-header class="bg-dark" color="white" elevated> <q-header class="bg-dark" color="white" elevated>
<q-toolbar class="q-py-sm q-px-md"> <q-toolbar class="q-py-sm q-px-md">
<q-btn flat @click="onToggleDrawer()" round dense icon="menu"> <q-btn flat @click="stateStore.toggleLeftDrawer()" round dense icon="menu">
<q-tooltip bottom anchor="bottom right"> <q-tooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }} {{ t('globals.collapseMenu') }}
</q-tooltip> </q-tooltip>
@ -35,7 +33,7 @@ function onToggleDrawer() {
<q-avatar square size="md"> <q-avatar square size="md">
<q-img <q-img
src="~/assets/logo_icon.svg" src="~/assets/logo_icon.svg"
alt="Logo" :alt="appName"
spinner-color="primary" spinner-color="primary"
/> />
</q-avatar> </q-avatar>
@ -46,6 +44,7 @@ function onToggleDrawer() {
</router-link> </router-link>
<q-toolbar-title shrink class="text-weight-bold" v-if="$q.screen.gt.xs"> <q-toolbar-title shrink class="text-weight-bold" v-if="$q.screen.gt.xs">
{{ appName }} {{ appName }}
<q-badge label="Beta" align="top" />
</q-toolbar-title> </q-toolbar-title>
<q-space></q-space> <q-space></q-space>
<div id="searchbar"></div> <div id="searchbar"></div>

91
src/components/ui/ModuleSearchbar.vue
View File

@ -1,91 +0,0 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useArrayData } from 'composables/useArrayData';
// const props = defineProps({
// id: {
// type: String,
// required: true,
// },
// });
const { t } = useI18n();
const arrayData = useArrayData('customers');
const searchPanel = ref();
const searchParams = ref({});
const searchBackdrop = ref(false);
async function search() {
await arrayData.apply({ params: searchParams.value });
searchPanel.value.hide();
}
</script>
<template>
<q-form @submit="search">
<q-input
id="searchbar"
v-model="searchParams.search"
label="Search"
dense
standout
autofocus
>
<template #prepend>
<q-icon name="search" />
</template>
<template #append>
<q-btn
@click="searchBackdrop = !searchBackdrop"
icon="filter_alt"
flat
dense
>
<q-tooltip>Apply search filters</q-tooltip>
<div
class="q-dialog__backdrop fixed-full"
v-if="searchBackdrop"
></div>
<q-popup-proxy
ref="searchPanel"
v-model="searchBackdrop"
target="#searchbar"
no-parent-event
fit
>
<q-card class="q-pa-md">
<div class="row truncate-chip-labels">
<q-chip
v-for="chip of tags"
:key="chip.label"
@remove="remove(chip.property)"
icon="label"
color="primary"
size="sm"
removable
>
<strong>{{ t(chip.label) }}: </strong>
<span>"{{ chip.value }}"</span>
</q-chip>
</div>
<slot name="panel" :scope="{ search }" />
</q-card>
</q-popup-proxy>
</q-btn>
</template>
</q-input>
</q-form>
</template>
<i18n>
{
"en": {
"phone": "Phone"
},
"es": {
"phone": "Teléfono"
}
}
</i18n>

59
src/components/ui/VnFilterPanel.vue Normal file
View File

@ -0,0 +1,59 @@
<script setup>
import { ref } from 'vue';
import { useArrayData } from 'composables/useArrayData';
const arrayData = useArrayData('customers');
// const store = arrayData.store;
const userParams = ref({});
async function search() {
const params = userParams.value;
await arrayData.apply({ params });
}
// async function remove(key) {
// delete userParams.value[key];
// await search();
// }
// const tags = computed(() => {
// const params = [];
// for (const param in store.userParams) {
// params.push({
// label: param,
// value: store.userParams[param],
// });
// }
// return params;
// });
</script>
<template>
<div>
<q-list>
<q-item-label header class="text-uppercase" dense>
Applied filters
</q-item-label>
</q-list>
<!-- <div class="q-pa-sm truncate-chip-labels">
<span v-if="tags.length === 0">You didn't enter any filter</span>
<q-chip
v-for="chip of tags"
:key="chip.label"
@remove="remove(chip.label)"
icon="label"
color="primary"
size="sm"
removable
>
<strong>{{ chip.label }}: </strong>
<span>"{{ chip.value }}"</span>
</q-chip>
</div>
<q-separator /> -->
<q-form @submit="search">
<slot name="body"></slot>
</q-form>
</div>
</template>

32
src/components/ui/VnSearchbar.vue Normal file
View File

@ -0,0 +1,32 @@
<script setup>
import { ref } from 'vue';
import { useArrayData } from 'composables/useArrayData';
const arrayData = useArrayData('customers');
const searchPanel = ref();
const searchParams = ref({});
async function search() {
await arrayData.apply({ params: searchParams.value });
searchPanel.value.hide();
}
</script>
<template>
<q-form @submit="search">
<q-input
id="searchbar"
v-model="searchParams.search"
label="Search"
dense
standout
autofocus
>
<template #prepend>
<q-icon name="search" />
</template>
</q-input>
</q-form>
</template>

2
src/css/app.scss
View File

@ -25,7 +25,7 @@ select:-webkit-autofill {
} }
body.body--light { body.body--light {
.q-toolbar { .q-header .q-toolbar {
background-color: white; background-color: white;
color: #555; color: #555;
} }

16
src/layouts/MainLayout.vue
View File

@ -1,27 +1,23 @@
<script setup> <script setup>
import { ref } from 'vue';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import Navbar from 'src/components/NavBar.vue'; import Navbar from 'src/components/NavBar.vue';
import { useStateStore } from 'stores/useStateStore';
const quasar = useQuasar(); const quasar = useQuasar();
const stateStore = useStateStore();
const rightDrawer = ref(false);
function toggleRightDrawer() {
rightDrawer.value = !rightDrawer.value;
}
</script> </script>
<template> <template>
<q-layout view="hHh LpR fFf"> <q-layout view="hHh LpR fFf">
<Navbar @on-toggle-right-drawer="toggleRightDrawer" /> <Navbar @on-toggle-right-drawer="stateStore.toggleRightDrawer()" />
<router-view></router-view> <router-view></router-view>
<q-drawer <q-drawer
v-model="rightDrawer" v-model="stateStore.rightDrawer"
show-if-above
side="right" side="right"
:width="256" :width="256"
:breakpoint="800" :breakpoint="800"
:persistent="false"
> >
<q-scroll-area class="fit text-grey-8"> <q-scroll-area class="fit text-grey-8">
<div id="rightPanel"></div> <div id="rightPanel"></div>

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

@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref, computed } from 'vue'; import { onMounted, onUnmounted, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
@ -8,9 +8,11 @@ import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
import TeleportSlot from 'components/ui/TeleportSlot.vue'; import TeleportSlot from 'components/ui/TeleportSlot.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import { useArrayData } from 'composables/useArrayData';
import { useSession } from 'src/composables/useSession'; import { useSession } from 'src/composables/useSession';
import { useStateStore } from 'stores/useStateStore';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
const state = useStateStore();
const router = useRouter(); const router = useRouter();
const quasar = useQuasar(); const quasar = useQuasar();
const { t } = useI18n(); const { t } = useI18n();
@ -18,6 +20,9 @@ const { t } = useI18n();
const session = useSession(); const session = useSession();
const token = session.getToken(); const token = session.getToken();
onMounted(() => state.toggleRightDrawer());
onUnmounted(() => state.toggleRightDrawer());
function navigate(id) { function navigate(id) {
router.push({ path: `/customer/${id}` }); router.push({ path: `/customer/${id}` });
} }
@ -31,15 +36,6 @@ function viewSummary(id) {
}); });
} }
const arrayData = useArrayData('customers');
const store = arrayData.store;
const userParams = ref({});
async function search() {
const params = userParams.value;
await arrayData.apply({ params });
}
const provinces = ref([]); const provinces = ref([]);
const workers = ref([]); const workers = ref([]);
const workersCopy = ref([]); const workersCopy = ref([]);
@ -49,24 +45,6 @@ function setWorkers(data) {
workers.value = data; workers.value = data;
workersCopy.value = data; workersCopy.value = data;
} }
async function remove(key) {
delete userParams.value[key];
await search();
}
const tags = computed(() => {
const params = [];
for (const param in store.userParams) {
params.push({
label: param,
value: store.userParams[param],
});
}
return params;
});
</script> </script>
<template> <template>
@ -79,264 +57,137 @@ const tags = computed(() => {
auto-load auto-load
/> />
<teleport-slot to="#rightPanel"> <teleport-slot to="#rightPanel">
<q-list> <VnFilterPanel>
<q-item-label header class="text-uppercase" dense <template #body>
>Applied filters</q-item-label <q-list>
> <q-item>
</q-list> <q-item-section>
<q-separator /> <q-input
<div class="q-pa-sm truncate-chip-labels"> v-model="userParams.search"
<span v-if="tags.length === 0">You didn't enter any filter</span> label="Search by id or name"
<q-chip class="full-width"
v-for="chip of tags" lazy-rules
:key="chip.label" autofocus
@remove="remove(chip.label)" />
icon="label" </q-item-section>
color="primary" </q-item>
size="sm" <q-item>
removable <q-item-section>
> <q-btn
<strong>{{ chip.label }}: </strong> label="Search"
<span>"{{ chip.value }}"</span> type="submit"
</q-chip> color="primary"
</div> class="full-width"
<q-separator /> rounded
<q-form @submit="search"> />
<q-list> </q-item-section>
<q-item> </q-item>
<q-item-section> <q-separator />
<q-input <q-item>
v-model="userParams.search" <q-item-section>
label="Search by id or name" <q-input label="Fiscal ID" v-model="userParams.fi" lazy-rules>
class="full-width" <template #prepend>
lazy-rules <q-icon name="badge" size="sm"></q-icon>
autofocus </template>
/> </q-input>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-btn <q-input label="Name" v-model="userParams.name" lazy-rules />
label="Search" </q-item-section>
type="submit" </q-item>
color="primary" <q-item>
class="full-width" <q-item-section>
rounded <q-input
/> label="Social name"
</q-item-section> v-model="userParams.socialName"
</q-item> lazy-rules
<q-separator /> />
<q-item> </q-item-section>
<q-item-section> </q-item>
<q-input label="Fiscal ID" v-model="userParams.fi" lazy-rules> <q-item>
<template #prepend> <q-item-section>
<q-icon name="badge" size="sm"></q-icon> <q-select
</template> v-model="userParams.salesPersonFk"
</q-input> :options="workers"
</q-item-section> option-value="id"
</q-item> option-label="name"
<q-item> emit-value
<q-item-section> label="Salesperson"
<q-input label="Name" v-model="userParams.name" lazy-rules /> map-options
</q-item-section> use-input
</q-item> :input-debounce="0"
<q-item> >
<q-item-section> <template #prepend>
<q-input <q-avatar color="orange" size="xs">
label="Social name" <q-img
v-model="userParams.socialName" v-if="userParams.salesPersonFk"
lazy-rules :src="`/api/Images/user/160x160/${userParams.salesPersonFk}/download?access_token=${token}`"
/> spinner-color="white"
</q-item-section> />
</q-item> </q-avatar>
<q-item> </template>
<q-item-section> </q-select>
<q-select </q-item-section>
v-model="userParams.salesPersonFk" </q-item>
:options="workers" <q-item>
option-value="id" <q-item-section>
option-label="name" <q-input label="Phone" v-model="userParams.phone" lazy-rules>
emit-value <template #prepend>
label="Salesperson" <q-icon name="phone" size="sm"></q-icon>
map-options </template>
use-input </q-input>
:input-debounce="0" </q-item-section>
> </q-item>
<template #prepend> <q-item>
<q-avatar color="orange" size="xs"> <q-item-section>
<q-img <q-input label="Email" v-model="userParams.email" lazy-rules>
v-if="userParams.salesPersonFk" <template #prepend>
:src="`/api/Images/user/160x160/${userParams.salesPersonFk}/download?access_token=${token}`" <q-icon name="email" size="sm"></q-icon>
spinner-color="white" </template>
/> </q-input>
</q-avatar> </q-item-section>
</template> </q-item>
</q-select> <q-item>
</q-item-section> <q-item-section>
</q-item> <q-select
<q-item> label="Province"
<q-item-section> v-model="userParams.provinceFk"
<q-input label="Phone" v-model="userParams.phone" lazy-rules> :options="provinces"
<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="City" v-model="userParams.city" lazy-rules />
<q-input label="Email" v-model="userParams.email" lazy-rules> </q-item-section>
<template #prepend> </q-item>
<q-icon name="email" size="sm"></q-icon> <q-item>
</template> <q-item-section>
</q-input> <q-select
</q-item-section> label="Zone"
</q-item> v-model="userParams.zoneFk"
<q-item> :options="zones"
<q-item-section> option-value="id"
<q-select option-label="name"
label="Province" emit-value
v-model="userParams.provinceFk" map-options
:options="provinces" />
option-value="id" </q-item-section>
option-label="name" <q-item-section>
emit-value <q-input
map-options label="Postcode"
/> v-model="userParams.postcode"
</q-item-section> lazy-rules
<q-item-section> />
<q-input label="City" v-model="userParams.city" lazy-rules /> </q-item-section>
</q-item-section> </q-item>
</q-item> </q-list>
<q-item> </template>
<q-item-section> </VnFilterPanel>
<q-select
label="Zone"
v-model="userParams.zoneFk"
:options="zones"
option-value="id"
option-label="name"
emit-value
map-options
/>
</q-item-section>
<q-item-section>
<q-input
label="Postcode"
v-model="userParams.postcode"
lazy-rules
/>
</q-item-section>
</q-item>
</q-list>
</q-form>
<!-- <q-form @submit="search">
<div class="row q-pa-md truncate-chip-labels">
<q-chip
v-for="chip of tags"
:key="chip.label"
@remove="log('Icecream')"
icon="label"
color="primary"
size="sm"
removable
>
<strong>{{ chip.label }}: </strong>
<span>"{{ chip.value }}"</span>
</q-chip>
</div>
<div class="q-pa-md q-gutter-y-md">
<q-input
v-model="userParams.search"
label="Search by id or name"
lazy-rules
autofocus
/>
<q-btn
label="Search"
type="submit"
color="primary"
class="full-width"
rounded
/>
</div>
<q-separator />
<div class="q-px-md">
<q-input label="Fiscal ID" v-model="userParams.fi" lazy-rules />
</div>
<div class="row q-gutter-md q-px-md">
<div class="col">
<q-input label="Name" v-model="userParams.name" lazy-rules />
</div>
<div class="col">
<q-input
label="Social name"
v-model="userParams.socialName"
lazy-rules
/>
</div>
</div>
<div class="q-px-md">
<q-select
v-model="userParams.salesPersonFk"
:options="workers"
option-value="id"
option-label="name"
emit-value
label="Salesperson"
map-options
use-input
:input-debounce="0"
>
</q-select>
</div>
<div class="row q-gutter-md q-px-md">
<div class="col">
<q-input label="Phone" v-model="userParams.phone" lazy-rules />
</div>
<div class="col">
<q-input label="Email" v-model="userParams.email" lazy-rules />
</div>
</div>
<div class="row q-gutter-md q-px-md">
<div class="col">
<q-select
label="Province"
v-model="userParams.provinceFk"
:options="provinces"
option-value="id"
option-label="name"
emit-value
map-options
/>
</div>
<div class="col">
<q-input label="City" v-model="userParams.city" lazy-rules />
</div>
</div>
<div class="row q-gutter-md q-px-md">
<div class="col">
<q-select
label="Zone"
v-model="userParams.zoneFk"
:options="zones"
option-value="id"
option-label="name"
emit-value
map-options
/>
</div>
<div class="col">
<q-input label="Postcode" v-model="userParams.postcode" lazy-rules />
</div>
</div>
</q-form> -->
</teleport-slot> </teleport-slot>
<q-page class="q-pa-md"> <q-page class="q-pa-md">
<paginate url="/Clients/filter" order="id DESC" auto-load> <paginate url="/Clients/filter" order="id DESC" auto-load>

17
src/pages/Customer/CustomerMain.vue
View File

@ -1,12 +1,12 @@
<script setup> <script setup>
// import { useSession } from 'src/composables/useSession'; // import { useSession } from 'src/composables/useSession';
import { useState } from 'composables/useState'; import { useStateStore } from 'stores/useStateStore';
import LeftMenu from 'components/LeftMenu.vue'; import LeftMenu from 'components/LeftMenu.vue';
import TeleportSlot from 'components/ui/TeleportSlot.vue'; import TeleportSlot from 'components/ui/TeleportSlot.vue';
import ModuleSearchbar from 'components/ui/ModuleSearchbar.vue';
import CustomerSearch from './CustomerSearch.vue'; import CustomerSearch from './CustomerSearch.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
const state = useState(); const stateStore = useStateStore();
// const arrayData = useArrayData('customers'); // const arrayData = useArrayData('customers');
// const session = useSession(); // const session = useSession();
@ -68,13 +68,18 @@ const state = useState();
<template> <template>
<teleport-slot to="#searchbar"> <teleport-slot to="#searchbar">
<module-searchbar data-key="customerList"> <VnSearchbar data-key="customerList">
<template #panel="{ scope }"> <template #panel="{ scope }">
<customer-search :scope="scope" /> <customer-search :scope="scope" />
</template> </template>
</module-searchbar> </VnSearchbar>
</teleport-slot> </teleport-slot>
<q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500"> <q-drawer
v-model="stateStore.leftDrawer"
show-if-above
:width="256"
:breakpoint="500"
>
<q-scroll-area class="fit text-grey-8"> <q-scroll-area class="fit text-grey-8">
<LeftMenu /> <LeftMenu />
</q-scroll-area> </q-scroll-area>

43
src/stores/useStateStore.js Normal file
View File

@ -0,0 +1,43 @@
import { ref } from 'vue';
import { defineStore } from 'pinia';
export const useStateStore = defineStore('stateStore', () => {
const isMounted = ref(false);
const leftDrawer = ref(false);
const rightDrawer = ref(false);
function toggleLeftDrawer() {
leftDrawer.value = !leftDrawer.value;
}
function toggleRightDrawer() {
rightDrawer.value = !rightDrawer.value;
}
function setMounted() {
isMounted.value = true;
}
function isHeaderMounted() {
return isMounted.value;
}
function isLeftDrawerShown() {
return leftDrawer.value;
}
function isRightDrawerShown() {
return rightDrawer.value;
}
return {
leftDrawer,
rightDrawer,
setMounted,
isHeaderMounted,
toggleLeftDrawer,
toggleRightDrawer,
isLeftDrawerShown,
isRightDrawerShown,
};
});