Filter panel component

src/components/NavBar.vue

@@ -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));
+onMounted(() => stateStore.setMounted());
-
-function onToggleDrawer() {
-    state.drawer.value = !state.drawer.value;
-}
 </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>

src/components/ui/ModuleSearchbar.vue

@@ -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>

src/components/ui/VnFilterPanel.vue

@@ -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>

src/components/ui/VnSearchbar.vue

@@ -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>

src/css/app.scss

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

src/layouts/MainLayout.vue

@@ -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 stateStore = useStateStore();
-const rightDrawer = ref(false);
-
-function toggleRightDrawer() {
-    rightDrawer.value = !rightDrawer.value;
-}
 </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"
+            v-model="stateStore.rightDrawer"
-            show-if-above
             side="right"
             :width="256"
             :breakpoint="800"
+            :persistent="false"
         >
             <q-scroll-area class="fit text-grey-8">
                 <div id="rightPanel"></div>

src/pages/Customer/CustomerList.vue

@@ -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,29 +57,8 @@ const tags = computed(() => {
         auto-load
     />
     <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-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>
@@ -229,114 +186,8 @@ const tags = computed(() => {
                         </q-item-section>
                     </q-item>
                 </q-list>
-        </q-form>
+            </template>
-        <!-- <q-form @submit="search">
+        </VnFilterPanel>
-            <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>
     <q-page class="q-pa-md">
         <paginate url="/Clients/filter" order="id DESC" auto-load>

src/pages/Customer/CustomerMain.vue

@@ -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>

src/stores/useStateStore.js

@@ -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,
+    };
+});