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

Side filters
gitea/salix-front/pipeline/head There was a failure building this commit Details

This commit is contained in:
Joan Sanchez 2023-02-09 07:26:08 +01:00
parent 9365e93fe8
commit 3c15554ab4
11 changed files with 246 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/NavBar.vue
View File

@ -13,6 +13,8 @@ const user = state.getUser();
const token = session.getToken(); const token = session.getToken();
const appName = 'Lilium'; const appName = 'Lilium';
defineEmits(['onToggleRightDrawer']);
onMounted(() => (state.headerMounted.value = true)); onMounted(() => (state.headerMounted.value = true));
function onToggleDrawer() { function onToggleDrawer() {
@ -29,9 +31,13 @@ function onToggleDrawer() {
</q-tooltip> </q-tooltip>
</q-btn> </q-btn>
<router-link to="/"> <router-link to="/">
<q-btn flat round class="q-ml-xs" v-if="$q.screen.gt.xs"> <q-btn class="q-ml-xs" color="primary" v-if="$q.screen.gt.xs" flat round>
<q-avatar square size="md"> <q-avatar square size="md">
<q-img src="~/assets/logo_icon.svg" alt="Logo" /> <q-img
src="~/assets/logo_icon.svg"
alt="Logo"
spinner-color="primary"
/>
</q-avatar> </q-avatar>
<q-tooltip bottom> <q-tooltip bottom>
{{ t('globals.backToDashboard') }} {{ t('globals.backToDashboard') }}
@ -52,11 +58,16 @@ function onToggleDrawer() {
</q-tooltip> </q-tooltip>
<PinnedModules /> <PinnedModules />
</q-btn> </q-btn>
<q-btn flat @click="$emit('onToggleRightDrawer')" round dense icon="menu">
<q-tooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</q-tooltip>
</q-btn>
<q-btn rounded dense flat no-wrap id="user"> <q-btn rounded dense flat no-wrap id="user">
<q-avatar size="lg"> <q-avatar size="lg">
<q-img <q-img
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`" :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
spinner-color="white" spinner-color="primary"
> >
</q-img> </q-img>
</q-avatar> </q-avatar>

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

@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
@ -17,66 +17,45 @@ const searchPanel = ref();
const searchParams = ref({}); const searchParams = ref({});
const searchBackdrop = ref(false); const searchBackdrop = ref(false);
async function search({ userParams }) { async function search() {
if (userParams) Object.assign(searchParams.value, userParams.value); await arrayData.apply({ params: searchParams.value });
await arrayData.apply({ params: searchParams });
searchPanel.value.hide(); searchPanel.value.hide();
} }
async function remove(param) {
delete searchParams.value[param];
await search({ userParams: {} });
}
const tags = computed(() => {
const params = [];
for (const param in searchParams.value) {
params.push({
property: param,
label: param,
value: searchParams.value[param],
});
}
return params;
});
</script> </script>
<template> <template>
<q-form @submit="search"> <q-form @submit="search">
<q-input id="searchbar" v-model="searchParams.search" label="Search" dark dense standout autofocus> <q-input
id="searchbar"
v-model="searchParams.search"
label="Search"
dense
standout
autofocus
>
<template #prepend> <template #prepend>
<q-icon name="search" /> <q-icon name="search" />
</template> </template>
<template #append> <template #append>
<q-btn icon="label" flat dense> <q-btn
<q-popup-proxy> @click="searchBackdrop = !searchBackdrop"
<q-card class="q-pa-md" style="max-width: 300px"> icon="filter_alt"
<div class="truncate-chip-labels"> flat
<q-chip dense
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>
</q-card>
</q-popup-proxy>
</q-btn>
<q-btn @click="searchBackdrop = !searchBackdrop" icon="filter_alt" flat dense>
<q-tooltip>Apply search filters</q-tooltip> <q-tooltip>Apply search filters</q-tooltip>
<div class="q-dialog__backdrop fixed-full" v-if="searchBackdrop"></div> <div
<q-popup-proxy ref="searchPanel" v-model="searchBackdrop" target="#searchbar" no-parent-event fit> 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"> <q-card class="q-pa-md">
<div class="row truncate-chip-labels"> <div class="row truncate-chip-labels">
<q-chip <q-chip

6
src/composables/useArrayData.js
View File

@ -91,7 +91,7 @@ export function useArrayData(key, userOptions) {
async function apply({ filter, params }) { async function apply({ filter, params }) {
if (filter) store.userFilter = filter; if (filter) store.userFilter = filter;
if (params) store.userParams = params; if (params) store.userParams = Object.assign({}, params);
await fetch({ append: false }); await fetch({ append: false });
} }
@ -116,9 +116,7 @@ export function useArrayData(key, userOptions) {
order: store.order, order: store.order,
limit: store.limit, limit: store.limit,
skip: store.skip, skip: store.skip,
params: [ params: JSON.stringify(store.userParams),
'a'
],
}, },
}); });
} }

7
src/css/app.scss
View File

@ -23,3 +23,10 @@ select:-webkit-autofill {
-webkit-background-clip: text !important; -webkit-background-clip: text !important;
background-clip: text !important; background-clip: text !important;
} }
body.body--light {
.q-toolbar {
background-color: white;
color: #555;
}
}

2
src/css/quasar.variables.scss
View File

@ -16,8 +16,6 @@ $primary: #ff9800;
$secondary: #26a69a; $secondary: #26a69a;
$accent: #9c27b0; $accent: #9c27b0;
$dark: #1d1d1d;
$positive: #21ba45; $positive: #21ba45;
$negative: #c10015; $negative: #c10015;
$info: #31ccec; $info: #31ccec;

13
src/layouts/MainLayout.vue
View File

@ -4,19 +4,24 @@ import { useQuasar } from 'quasar';
import Navbar from 'src/components/NavBar.vue'; import Navbar from 'src/components/NavBar.vue';
const quasar = useQuasar(); const quasar = useQuasar();
const filterPanel = ref(true);
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 /> <Navbar @on-toggle-right-drawer="toggleRightDrawer" />
<router-view></router-view> <router-view></router-view>
<q-drawer <q-drawer
v-model="filterPanel" v-model="rightDrawer"
show-if-above show-if-above
side="right" side="right"
:width="256" :width="256"
:breakpoint="500" :breakpoint="800"
> >
<q-scroll-area class="fit text-grey-8"> <q-scroll-area class="fit text-grey-8">
<div id="rightPanel"></div> <div id="rightPanel"></div>

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

@ -8,7 +8,7 @@ const state = useState();
<template> <template>
<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">
<customer-descriptor /> <CustomerDescriptor />
<q-separator /> <q-separator />
<left-menu source="card" /> <left-menu source="card" />
</q-scroll-area> </q-scroll-area>

10
src/pages/Customer/Card/CustomerDescriptor.vue
View File

@ -29,7 +29,7 @@ const entityId = computed(() => {
<q-item-label class="col" caption> <q-item-label class="col" caption>
{{ t('customer.card.salesPerson') }} {{ t('customer.card.salesPerson') }}
</q-item-label> </q-item-label>
<q-item-label class="col text-right q-ma-none"> <q-item-label class="col q-ma-none">
{{ entity.salesPersonUser.name }} {{ entity.salesPersonUser.name }}
</q-item-label> </q-item-label>
</q-item> </q-item>
@ -37,7 +37,7 @@ const entityId = computed(() => {
<q-item-label class="col" caption> <q-item-label class="col" caption>
{{ t('customer.card.credit') }} {{ t('customer.card.credit') }}
</q-item-label> </q-item-label>
<q-item-label class="col text-right q-ma-none"> <q-item-label class="col q-ma-none">
{{ toCurrency(entity.credit) }} {{ toCurrency(entity.credit) }}
</q-item-label> </q-item-label>
</q-item> </q-item>
@ -45,7 +45,7 @@ const entityId = computed(() => {
<q-item-label class="col" caption> <q-item-label class="col" caption>
{{ t('customer.card.securedCredit') }} {{ t('customer.card.securedCredit') }}
</q-item-label> </q-item-label>
<q-item-label class="col text-right q-ma-none"> <q-item-label class="col q-ma-none">
{{ toCurrency(entity.creditInsurance) }} {{ toCurrency(entity.creditInsurance) }}
</q-item-label> </q-item-label>
</q-item> </q-item>
@ -53,7 +53,7 @@ const entityId = computed(() => {
<q-item-label class="col" caption> <q-item-label class="col" caption>
{{ t('customer.card.payMethod') }} {{ t('customer.card.payMethod') }}
</q-item-label> </q-item-label>
<q-item-label class="col text-right q-ma-none"> <q-item-label class="col q-ma-none">
{{ entity.payMethod.name }} {{ entity.payMethod.name }}
</q-item-label> </q-item-label>
</q-item> </q-item>
@ -61,7 +61,7 @@ const entityId = computed(() => {
<q-item-label class="col" caption> <q-item-label class="col" caption>
{{ t('customer.card.debt') }} {{ t('customer.card.debt') }}
</q-item-label> </q-item-label>
<q-item-label class="col text-right q-ma-none"> <q-item-label class="col q-ma-none">
{{ toCurrency(entity.debt) }} {{ toCurrency(entity.debt) }}
</q-item-label> </q-item-label>
</q-item> </q-item>

26
src/pages/Customer/Card/CustomerSummary.vue
View File

@ -72,52 +72,52 @@ const creditWarning = computed(() => {
<q-item class="row col"> <q-item class="row col">
<q-item-label class="col" caption> <q-item-label class="col" caption>
{{ t('customer.summary.customerId') }}: {{ t('customer.summary.customerId') }}
</q-item-label> </q-item-label>
<q-item-label class="col text-right q-ma-none"> <q-item-label class="col q-ma-none">
{{ entity.id }} {{ entity.id }}
</q-item-label> </q-item-label>
</q-item> </q-item>
<q-item class="row col"> <q-item class="row col">
<q-item-label class="col" caption> <q-item-label class="col" caption>
{{ t('customer.summary.name') }}: {{ t('customer.summary.name') }}
</q-item-label> </q-item-label>
<q-item-label class="col text-right q-ma-none">{{ <q-item-label class="col q-ma-none">{{
entity.name entity.name
}}</q-item-label> }}</q-item-label>
</q-item> </q-item>
<q-item class="row col"> <q-item class="row col">
<q-item-label class="col" caption> <q-item-label class="col" caption>
{{ t('customer.summary.contact') }}: {{ t('customer.summary.contact') }}
</q-item-label> </q-item-label>
<q-item-label class="col text-right q-ma-none">{{ <q-item-label class="col q-ma-none">{{
entity.contact entity.contact
}}</q-item-label> }}</q-item-label>
</q-item> </q-item>
<q-item v-if="entity.salesPersonUser" class="row col"> <q-item v-if="entity.salesPersonUser" class="row col">
<q-item-label class="col" caption> <q-item-label class="col" caption>
{{ t('customer.summary.salesPerson') }}: {{ t('customer.summary.salesPerson') }}
</q-item-label> </q-item-label>
<q-item-label class="col text-right q-ma-none"> <q-item-label class="col q-ma-none">
{{ entity.salesPersonUser.name }} {{ entity.salesPersonUser.name }}
</q-item-label> </q-item-label>
</q-item> </q-item>
<q-item class="row col"> <q-item class="row col">
<q-item-label class="col" caption> <q-item-label class="col" caption>
{{ t('customer.summary.phone') }}: {{ t('customer.summary.phone') }}
</q-item-label> </q-item-label>
<q-item-label class="col text-right q-ma-none">{{ <q-item-label class="col q-ma-none">{{
entity.phone entity.phone
}}</q-item-label> }}</q-item-label>
</q-item> </q-item>
<q-item class="row col"> <q-item class="row col">
<q-item-label class="col" caption> <q-item-label class="col" caption>
{{ t('customer.summary.mobile') }}: {{ t('customer.summary.mobile') }}
</q-item-label> </q-item-label>
<q-item-label class="col text-right q-ma-none">{{ <q-item-label class="col q-ma-none">{{
entity.mobile entity.mobile
}}</q-item-label> }}</q-item-label>
</q-item> </q-item>
@ -126,7 +126,7 @@ const creditWarning = computed(() => {
<q-item-label class="col" caption> <q-item-label class="col" caption>
{{ t('customer.summary.contactChannel') }} {{ t('customer.summary.contactChannel') }}
</q-item-label> </q-item-label>
<q-item-label class="col text-right q-ma-none"> <q-item-label class="col q-ma-none">
{{ entity.contactChannel.name }} {{ entity.contactChannel.name }}
</q-item-label> </q-item-label>
</q-item> </q-item>

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

@ -9,11 +9,15 @@ 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 { useArrayData } from 'composables/useArrayData';
import { useSession } from 'src/composables/useSession';
const router = useRouter(); const router = useRouter();
const quasar = useQuasar(); const quasar = useQuasar();
const { t } = useI18n(); const { t } = useI18n();
const session = useSession();
const token = session.getToken();
function navigate(id) { function navigate(id) {
router.push({ path: `/customer/${id}` }); router.push({ path: `/customer/${id}` });
} }
@ -28,13 +32,12 @@ function viewSummary(id) {
} }
const arrayData = useArrayData('customers'); const arrayData = useArrayData('customers');
const store = arrayData.store;
const userParams = ref({}); const userParams = ref({});
async function search() { async function search() {
//const params = userParams;
const params = userParams.value; const params = userParams.value;
await arrayData.apply({ params }); await arrayData.apply({ params });
// searchPanel.value.hide();
} }
const provinces = ref([]); const provinces = ref([]);
@ -47,13 +50,18 @@ function setWorkers(data) {
workersCopy.value = data; workersCopy.value = data;
} }
async function remove(key) {
delete userParams.value[key];
await search();
}
const tags = computed(() => { const tags = computed(() => {
const params = []; const params = [];
for (const param in userParams.value) { for (const param in store.userParams) {
params.push({ params.push({
label: param, label: param,
value: userParams.value[param], value: store.userParams[param],
}); });
} }
@ -71,10 +79,158 @@ const tags = computed(() => {
auto-load auto-load
/> />
<teleport-slot to="#rightPanel"> <teleport-slot to="#rightPanel">
<!-- <q-list> <q-list>
<q-item-label header class="text-uppercase">Filter</q-item-label> <q-item-label header class="text-uppercase" dense
</q-list> --> >Applied filters</q-item-label
>
</q-list>
<q-separator />
<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"> <q-form @submit="search">
<q-list>
<q-item>
<q-item-section>
<q-input
v-model="userParams.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-section>
<q-input label="Fiscal ID" v-model="userParams.fi" lazy-rules>
<template #prepend>
<q-icon name="badge" size="sm"></q-icon>
</template>
</q-input>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-input label="Name" v-model="userParams.name" lazy-rules />
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-input
label="Social name"
v-model="userParams.socialName"
lazy-rules
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<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"
>
<template #prepend>
<q-avatar color="orange" size="xs">
<q-img
v-if="userParams.salesPersonFk"
:src="`/api/Images/user/160x160/${userParams.salesPersonFk}/download?access_token=${token}`"
spinner-color="white"
/>
</q-avatar>
</template>
</q-select>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-input label="Phone" v-model="userParams.phone" lazy-rules>
<template #prepend>
<q-icon name="phone" size="sm"></q-icon>
</template>
</q-input>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-input label="Email" v-model="userParams.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
label="Province"
v-model="userParams.provinceFk"
:options="provinces"
option-value="id"
option-label="name"
emit-value
map-options
/>
</q-item-section>
<q-item-section>
<q-input label="City" v-model="userParams.city" lazy-rules />
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<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"> <div class="row q-pa-md truncate-chip-labels">
<q-chip <q-chip
v-for="chip of tags" v-for="chip of tags"
@ -180,7 +336,7 @@ const tags = computed(() => {
<q-input label="Postcode" v-model="userParams.postcode" lazy-rules /> <q-input label="Postcode" v-model="userParams.postcode" lazy-rules />
</div> </div>
</div> </div>
</q-form> </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>

3
src/pages/InvoiceOut/Card/InvoiceOutCard.vue
View File

@ -1,6 +1,7 @@
<script setup> <script setup>
import { useState } from 'src/composables/useState'; import { useState } from 'src/composables/useState';
import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue'; import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue';
const state = useState(); const state = useState();
</script> </script>
@ -8,6 +9,8 @@ const state = useState();
<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">
<InvoiceOutDescriptor /> <InvoiceOutDescriptor />
<q-separator />
<left-menu source="card" />
</q-scroll-area> </q-scroll-area>
</q-drawer> </q-drawer>
<q-page-container> <q-page-container>