Side filters
gitea/salix-front/pipeline/head There was a failure building this commit
Details
gitea/salix-front/pipeline/head There was a failure building this commit
Details
This commit is contained in:
parent
9365e93fe8
commit
3c15554ab4
|
|
@ -13,6 +13,8 @@ const user = state.getUser();
|
|||
const token = session.getToken();
|
||||
const appName = 'Lilium';
|
||||
|
||||
defineEmits(['onToggleRightDrawer']);
|
||||
|
||||
onMounted(() => (state.headerMounted.value = true));
|
||||
|
||||
function onToggleDrawer() {
|
||||
|
|
@ -29,9 +31,13 @@ function onToggleDrawer() {
|
|||
</q-tooltip>
|
||||
</q-btn>
|
||||
<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-img src="~/assets/logo_icon.svg" alt="Logo" />
|
||||
<q-img
|
||||
src="~/assets/logo_icon.svg"
|
||||
alt="Logo"
|
||||
spinner-color="primary"
|
||||
/>
|
||||
</q-avatar>
|
||||
<q-tooltip bottom>
|
||||
{{ t('globals.backToDashboard') }}
|
||||
|
|
@ -52,11 +58,16 @@ function onToggleDrawer() {
|
|||
</q-tooltip>
|
||||
<PinnedModules />
|
||||
</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-avatar size="lg">
|
||||
<q-img
|
||||
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
|
||||
spinner-color="white"
|
||||
spinner-color="primary"
|
||||
>
|
||||
</q-img>
|
||||
</q-avatar>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useArrayData } from 'composables/useArrayData';
|
||||
|
||||
|
|
@ -17,66 +17,45 @@ const searchPanel = ref();
|
|||
const searchParams = ref({});
|
||||
const searchBackdrop = ref(false);
|
||||
|
||||
async function search({ userParams }) {
|
||||
if (userParams) Object.assign(searchParams.value, userParams.value);
|
||||
|
||||
await arrayData.apply({ params: searchParams });
|
||||
async function search() {
|
||||
await arrayData.apply({ params: searchParams.value });
|
||||
|
||||
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>
|
||||
|
||||
<template>
|
||||
<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>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
<template #append>
|
||||
<q-btn icon="label" flat dense>
|
||||
<q-popup-proxy>
|
||||
<q-card class="q-pa-md" style="max-width: 300px">
|
||||
<div class="truncate-chip-labels">
|
||||
<q-chip
|
||||
v-for="chip of tags"
|
||||
:key="chip.label"
|
||||
@remove="remove(chip.property)"
|
||||
icon="label"
|
||||
color="primary"
|
||||
size="sm"
|
||||
removable
|
||||
<q-btn
|
||||
@click="searchBackdrop = !searchBackdrop"
|
||||
icon="filter_alt"
|
||||
flat
|
||||
dense
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ export function useArrayData(key, userOptions) {
|
|||
|
||||
async function apply({ filter, params }) {
|
||||
if (filter) store.userFilter = filter;
|
||||
if (params) store.userParams = params;
|
||||
if (params) store.userParams = Object.assign({}, params);
|
||||
|
||||
await fetch({ append: false });
|
||||
}
|
||||
|
|
@ -116,9 +116,7 @@ export function useArrayData(key, userOptions) {
|
|||
order: store.order,
|
||||
limit: store.limit,
|
||||
skip: store.skip,
|
||||
params: [
|
||||
'a'
|
||||
],
|
||||
params: JSON.stringify(store.userParams),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,3 +23,10 @@ select:-webkit-autofill {
|
|||
-webkit-background-clip: text !important;
|
||||
background-clip: text !important;
|
||||
}
|
||||
|
||||
body.body--light {
|
||||
.q-toolbar {
|
||||
background-color: white;
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,8 +16,6 @@ $primary: #ff9800;
|
|||
$secondary: #26a69a;
|
||||
$accent: #9c27b0;
|
||||
|
||||
$dark: #1d1d1d;
|
||||
|
||||
$positive: #21ba45;
|
||||
$negative: #c10015;
|
||||
$info: #31ccec;
|
||||
|
|
|
|||
|
|
@ -4,19 +4,24 @@ import { useQuasar } from 'quasar';
|
|||
import Navbar from 'src/components/NavBar.vue';
|
||||
|
||||
const quasar = useQuasar();
|
||||
const filterPanel = ref(true);
|
||||
|
||||
const rightDrawer = ref(false);
|
||||
|
||||
function toggleRightDrawer() {
|
||||
rightDrawer.value = !rightDrawer.value;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-layout view="hHh LpR fFf">
|
||||
<Navbar />
|
||||
<Navbar @on-toggle-right-drawer="toggleRightDrawer" />
|
||||
<router-view></router-view>
|
||||
<q-drawer
|
||||
v-model="filterPanel"
|
||||
v-model="rightDrawer"
|
||||
show-if-above
|
||||
side="right"
|
||||
:width="256"
|
||||
:breakpoint="500"
|
||||
:breakpoint="800"
|
||||
>
|
||||
<q-scroll-area class="fit text-grey-8">
|
||||
<div id="rightPanel"></div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const state = useState();
|
|||
<template>
|
||||
<q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
|
||||
<q-scroll-area class="fit">
|
||||
<customer-descriptor />
|
||||
<CustomerDescriptor />
|
||||
<q-separator />
|
||||
<left-menu source="card" />
|
||||
</q-scroll-area>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ const entityId = computed(() => {
|
|||
<q-item-label class="col" caption>
|
||||
{{ t('customer.card.salesPerson') }}
|
||||
</q-item-label>
|
||||
<q-item-label class="col text-right q-ma-none">
|
||||
<q-item-label class="col q-ma-none">
|
||||
{{ entity.salesPersonUser.name }}
|
||||
</q-item-label>
|
||||
</q-item>
|
||||
|
|
@ -37,7 +37,7 @@ const entityId = computed(() => {
|
|||
<q-item-label class="col" caption>
|
||||
{{ t('customer.card.credit') }}
|
||||
</q-item-label>
|
||||
<q-item-label class="col text-right q-ma-none">
|
||||
<q-item-label class="col q-ma-none">
|
||||
{{ toCurrency(entity.credit) }}
|
||||
</q-item-label>
|
||||
</q-item>
|
||||
|
|
@ -45,7 +45,7 @@ const entityId = computed(() => {
|
|||
<q-item-label class="col" caption>
|
||||
{{ t('customer.card.securedCredit') }}
|
||||
</q-item-label>
|
||||
<q-item-label class="col text-right q-ma-none">
|
||||
<q-item-label class="col q-ma-none">
|
||||
{{ toCurrency(entity.creditInsurance) }}
|
||||
</q-item-label>
|
||||
</q-item>
|
||||
|
|
@ -53,7 +53,7 @@ const entityId = computed(() => {
|
|||
<q-item-label class="col" caption>
|
||||
{{ t('customer.card.payMethod') }}
|
||||
</q-item-label>
|
||||
<q-item-label class="col text-right q-ma-none">
|
||||
<q-item-label class="col q-ma-none">
|
||||
{{ entity.payMethod.name }}
|
||||
</q-item-label>
|
||||
</q-item>
|
||||
|
|
@ -61,7 +61,7 @@ const entityId = computed(() => {
|
|||
<q-item-label class="col" caption>
|
||||
{{ t('customer.card.debt') }}
|
||||
</q-item-label>
|
||||
<q-item-label class="col text-right q-ma-none">
|
||||
<q-item-label class="col q-ma-none">
|
||||
{{ toCurrency(entity.debt) }}
|
||||
</q-item-label>
|
||||
</q-item>
|
||||
|
|
|
|||
|
|
@ -72,52 +72,52 @@ const creditWarning = computed(() => {
|
|||
|
||||
<q-item class="row col">
|
||||
<q-item-label class="col" caption>
|
||||
{{ t('customer.summary.customerId') }}:
|
||||
{{ t('customer.summary.customerId') }}
|
||||
</q-item-label>
|
||||
<q-item-label class="col text-right q-ma-none">
|
||||
<q-item-label class="col q-ma-none">
|
||||
{{ entity.id }}
|
||||
</q-item-label>
|
||||
</q-item>
|
||||
<q-item class="row col">
|
||||
<q-item-label class="col" caption>
|
||||
{{ t('customer.summary.name') }}:
|
||||
{{ t('customer.summary.name') }}
|
||||
</q-item-label>
|
||||
<q-item-label class="col text-right q-ma-none">{{
|
||||
<q-item-label class="col q-ma-none">{{
|
||||
entity.name
|
||||
}}</q-item-label>
|
||||
</q-item>
|
||||
<q-item class="row col">
|
||||
<q-item-label class="col" caption>
|
||||
{{ t('customer.summary.contact') }}:
|
||||
{{ t('customer.summary.contact') }}
|
||||
</q-item-label>
|
||||
<q-item-label class="col text-right q-ma-none">{{
|
||||
<q-item-label class="col q-ma-none">{{
|
||||
entity.contact
|
||||
}}</q-item-label>
|
||||
</q-item>
|
||||
|
||||
<q-item v-if="entity.salesPersonUser" class="row col">
|
||||
<q-item-label class="col" caption>
|
||||
{{ t('customer.summary.salesPerson') }}:
|
||||
{{ t('customer.summary.salesPerson') }}
|
||||
</q-item-label>
|
||||
<q-item-label class="col text-right q-ma-none">
|
||||
<q-item-label class="col q-ma-none">
|
||||
{{ entity.salesPersonUser.name }}
|
||||
</q-item-label>
|
||||
</q-item>
|
||||
|
||||
<q-item class="row col">
|
||||
<q-item-label class="col" caption>
|
||||
{{ t('customer.summary.phone') }}:
|
||||
{{ t('customer.summary.phone') }}
|
||||
</q-item-label>
|
||||
<q-item-label class="col text-right q-ma-none">{{
|
||||
<q-item-label class="col q-ma-none">{{
|
||||
entity.phone
|
||||
}}</q-item-label>
|
||||
</q-item>
|
||||
|
||||
<q-item class="row col">
|
||||
<q-item-label class="col" caption>
|
||||
{{ t('customer.summary.mobile') }}:
|
||||
{{ t('customer.summary.mobile') }}
|
||||
</q-item-label>
|
||||
<q-item-label class="col text-right q-ma-none">{{
|
||||
<q-item-label class="col q-ma-none">{{
|
||||
entity.mobile
|
||||
}}</q-item-label>
|
||||
</q-item>
|
||||
|
|
@ -126,7 +126,7 @@ const creditWarning = computed(() => {
|
|||
<q-item-label class="col" caption>
|
||||
{{ t('customer.summary.contactChannel') }}
|
||||
</q-item-label>
|
||||
<q-item-label class="col text-right q-ma-none">
|
||||
<q-item-label class="col q-ma-none">
|
||||
{{ entity.contactChannel.name }}
|
||||
</q-item-label>
|
||||
</q-item>
|
||||
|
|
|
|||
|
|
@ -9,11 +9,15 @@ import TeleportSlot from 'components/ui/TeleportSlot.vue';
|
|||
import FetchData from 'components/FetchData.vue';
|
||||
|
||||
import { useArrayData } from 'composables/useArrayData';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
|
||||
const router = useRouter();
|
||||
const quasar = useQuasar();
|
||||
const { t } = useI18n();
|
||||
|
||||
const session = useSession();
|
||||
const token = session.getToken();
|
||||
|
||||
function navigate(id) {
|
||||
router.push({ path: `/customer/${id}` });
|
||||
}
|
||||
|
|
@ -28,13 +32,12 @@ function viewSummary(id) {
|
|||
}
|
||||
|
||||
const arrayData = useArrayData('customers');
|
||||
const store = arrayData.store;
|
||||
|
||||
const userParams = ref({});
|
||||
async function search() {
|
||||
//const params = userParams;
|
||||
const params = userParams.value;
|
||||
await arrayData.apply({ params });
|
||||
// searchPanel.value.hide();
|
||||
}
|
||||
|
||||
const provinces = ref([]);
|
||||
|
|
@ -47,13 +50,18 @@ function setWorkers(data) {
|
|||
workersCopy.value = data;
|
||||
}
|
||||
|
||||
async function remove(key) {
|
||||
delete userParams.value[key];
|
||||
await search();
|
||||
}
|
||||
|
||||
const tags = computed(() => {
|
||||
const params = [];
|
||||
|
||||
for (const param in userParams.value) {
|
||||
for (const param in store.userParams) {
|
||||
params.push({
|
||||
label: param,
|
||||
value: userParams.value[param],
|
||||
value: store.userParams[param],
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -71,10 +79,158 @@ const tags = computed(() => {
|
|||
auto-load
|
||||
/>
|
||||
<teleport-slot to="#rightPanel">
|
||||
<!-- <q-list>
|
||||
<q-item-label header class="text-uppercase">Filter</q-item-label>
|
||||
</q-list> -->
|
||||
<q-list>
|
||||
<q-item-label header class="text-uppercase" dense
|
||||
>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-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">
|
||||
<q-chip
|
||||
v-for="chip of tags"
|
||||
|
|
@ -180,7 +336,7 @@ const tags = computed(() => {
|
|||
<q-input label="Postcode" v-model="userParams.postcode" lazy-rules />
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-form> -->
|
||||
</teleport-slot>
|
||||
<q-page class="q-pa-md">
|
||||
<paginate url="/Clients/filter" order="id DESC" auto-load>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script setup>
|
||||
import { useState } from 'src/composables/useState';
|
||||
import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
|
||||
import LeftMenu from 'components/LeftMenu.vue';
|
||||
|
||||
const state = useState();
|
||||
</script>
|
||||
|
|
@ -8,6 +9,8 @@ const state = useState();
|
|||
<q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
|
||||
<q-scroll-area class="fit">
|
||||
<InvoiceOutDescriptor />
|
||||
<q-separator />
|
||||
<left-menu source="card" />
|
||||
</q-scroll-area>
|
||||
</q-drawer>
|
||||
<q-page-container>
|
||||
|
|
|
|||
Loading…
Reference in New Issue