Filter panel component
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
3c15554ab4
commit
874db2752b
|
|
@ -1,13 +1,15 @@
|
|||
<script setup>
|
||||
import { onMounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useState } from 'src/composables/useState';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
import UserPanel from 'components/UserPanel.vue';
|
||||
import { useState } from 'src/composables/useState';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import PinnedModules from './PinnedModules.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const session = useSession();
|
||||
const stateStore = useStateStore();
|
||||
const state = useState();
|
||||
const user = state.getUser();
|
||||
const token = session.getToken();
|
||||
|
|
@ -15,17 +17,13 @@ const appName = 'Lilium';
|
|||
|
||||
defineEmits(['onToggleRightDrawer']);
|
||||
|
||||
onMounted(() => (state.headerMounted.value = true));
|
||||
|
||||
function onToggleDrawer() {
|
||||
state.drawer.value = !state.drawer.value;
|
||||
}
|
||||
onMounted(() => stateStore.setMounted());
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-header class="bg-dark" color="white" elevated>
|
||||
<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">
|
||||
{{ t('globals.collapseMenu') }}
|
||||
</q-tooltip>
|
||||
|
|
@ -35,7 +33,7 @@ function onToggleDrawer() {
|
|||
<q-avatar square size="md">
|
||||
<q-img
|
||||
src="~/assets/logo_icon.svg"
|
||||
alt="Logo"
|
||||
:alt="appName"
|
||||
spinner-color="primary"
|
||||
/>
|
||||
</q-avatar>
|
||||
|
|
@ -46,6 +44,7 @@ function onToggleDrawer() {
|
|||
</router-link>
|
||||
<q-toolbar-title shrink class="text-weight-bold" v-if="$q.screen.gt.xs">
|
||||
{{ appName }}
|
||||
<q-badge label="Beta" align="top" />
|
||||
</q-toolbar-title>
|
||||
<q-space></q-space>
|
||||
<div id="searchbar"></div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -25,7 +25,7 @@ select:-webkit-autofill {
|
|||
}
|
||||
|
||||
body.body--light {
|
||||
.q-toolbar {
|
||||
.q-header .q-toolbar {
|
||||
background-color: white;
|
||||
color: #555;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,23 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
import Navbar from 'src/components/NavBar.vue';
|
||||
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
|
||||
const quasar = useQuasar();
|
||||
|
||||
const rightDrawer = ref(false);
|
||||
|
||||
function toggleRightDrawer() {
|
||||
rightDrawer.value = !rightDrawer.value;
|
||||
}
|
||||
const stateStore = useStateStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-layout view="hHh LpR fFf">
|
||||
<Navbar @on-toggle-right-drawer="toggleRightDrawer" />
|
||||
<Navbar @on-toggle-right-drawer="stateStore.toggleRightDrawer()" />
|
||||
<router-view></router-view>
|
||||
<q-drawer
|
||||
v-model="rightDrawer"
|
||||
show-if-above
|
||||
v-model="stateStore.rightDrawer"
|
||||
side="right"
|
||||
:width="256"
|
||||
:breakpoint="800"
|
||||
:persistent="false"
|
||||
>
|
||||
<q-scroll-area class="fit text-grey-8">
|
||||
<div id="rightPanel"></div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { onMounted, onUnmounted, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
|
@ -8,9 +8,11 @@ import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
|
|||
import TeleportSlot from 'components/ui/TeleportSlot.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
|
||||
import { useArrayData } from 'composables/useArrayData';
|
||||
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 quasar = useQuasar();
|
||||
const { t } = useI18n();
|
||||
|
|
@ -18,6 +20,9 @@ const { t } = useI18n();
|
|||
const session = useSession();
|
||||
const token = session.getToken();
|
||||
|
||||
onMounted(() => state.toggleRightDrawer());
|
||||
onUnmounted(() => state.toggleRightDrawer());
|
||||
|
||||
function navigate(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 workers = ref([]);
|
||||
const workersCopy = ref([]);
|
||||
|
|
@ -49,24 +45,6 @@ function setWorkers(data) {
|
|||
workers.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>
|
||||
|
||||
<template>
|
||||
|
|
@ -79,264 +57,137 @@ const tags = computed(() => {
|
|||
auto-load
|
||||
/>
|
||||
<teleport-slot to="#rightPanel">
|
||||
<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"
|
||||
: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> -->
|
||||
<VnFilterPanel>
|
||||
<template #body>
|
||||
<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>
|
||||
</template>
|
||||
</VnFilterPanel>
|
||||
</teleport-slot>
|
||||
<q-page class="q-pa-md">
|
||||
<paginate url="/Clients/filter" order="id DESC" auto-load>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<script setup>
|
||||
// import { useSession } from 'src/composables/useSession';
|
||||
import { useState } from 'composables/useState';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import LeftMenu from 'components/LeftMenu.vue';
|
||||
import TeleportSlot from 'components/ui/TeleportSlot.vue';
|
||||
import ModuleSearchbar from 'components/ui/ModuleSearchbar.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 session = useSession();
|
||||
|
||||
|
|
@ -68,13 +68,18 @@ const state = useState();
|
|||
|
||||
<template>
|
||||
<teleport-slot to="#searchbar">
|
||||
<module-searchbar data-key="customerList">
|
||||
<VnSearchbar data-key="customerList">
|
||||
<template #panel="{ scope }">
|
||||
<customer-search :scope="scope" />
|
||||
</template>
|
||||
</module-searchbar>
|
||||
</VnSearchbar>
|
||||
</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">
|
||||
<LeftMenu />
|
||||
</q-scroll-area>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
});
|
||||
Loading…
Reference in New Issue