Implement shelving filter

src/components/ui/VnFilterPanel.vue

@@ -26,7 +26,7 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(['refresh', 'clear']);
+const emit = defineEmits(['refresh', 'clear', 'search']);
 
 const arrayData = useArrayData(props.dataKey);
 const store = arrayData.store;
@@ -49,6 +49,7 @@ async function search() {
     if (!props.showAll && !Object.values(params).length) store.data = [];
 
     isLoading.value = false;
+    emit('search');
 }
 
 async function reload() {

src/pages/Shelving/Card/ShelvingCard.vue

@@ -1,15 +1,11 @@
 <script setup>
 import { useStateStore } from 'stores/useStateStore';
 import LeftMenu from 'components/LeftMenu.vue';
-import ShelvingSearchbar from "pages/Shelving/Card/ShelvingSearchbar.vue";
-import ShelvingDescriptor from "pages/Shelving/Card/ShelvingDescriptor.vue";
+import ShelvingDescriptor from 'pages/Shelving/Card/ShelvingDescriptor.vue';
 
 const stateStore = useStateStore();
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <ShelvingSearchbar />
-    </Teleport>
     <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <QScrollArea class="fit">
             <ShelvingDescriptor />

src/pages/Shelving/Card/ShelvingFilter.vue

@@ -12,6 +12,8 @@ const props = defineProps({
     },
 });
 
+const emit = defineEmits(['search']);
+
 const workers = ref();
 const parkings = ref();
 
@@ -39,7 +41,7 @@ function setParkings(data) {
         @on-fetch="setWorkers"
         auto-load
     />
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true" @search="emit('search')">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>

src/pages/Shelving/Card/ShelvingSummary.vue

@@ -1,9 +1,11 @@
 <script setup>
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
+import {computed, onMounted, onUnmounted} from 'vue';
+import {useRoute, useRouter} from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'components/ui/VnLv.vue';
+import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
+import { useStateStore } from 'stores/useStateStore';
 
 const $props = defineProps({
     id: {
@@ -12,7 +14,11 @@ const $props = defineProps({
     },
 });
 const route = useRoute();
+const stateStore = useStateStore();
+const router = useRouter();
 const { t } = useI18n();
+onMounted(() => (stateStore.rightDrawer = false));
+onUnmounted(() => (stateStore.rightDrawer = false));
 
 const entityId = computed(() => $props.id || route.params.id);
 const filter = {
@@ -33,6 +39,23 @@ const filter = {
 </script>
 
 <template>
+  <template v-if="stateStore.isHeaderMounted()">
+    <Teleport to="#actions-append">
+      <div class="row q-gutter-x-sm">
+        <QBtn
+            flat
+            @click="stateStore.toggleRightDrawer()"
+            round
+            dense
+            icon="menu"
+        >
+          <QTooltip bottom anchor="bottom right">
+            {{ t('globals.collapseMenu') }}
+          </QTooltip>
+        </QBtn>
+      </div>
+    </Teleport>
+  </template>
     <CardSummary ref="summary" :url="`Shelvings/${entityId}`" :filter="filter">
         <template #header="{ entity }">
             <div>{{ entity.code }}</div>
@@ -42,18 +65,12 @@ const filter = {
                 <div class="header">
                     {{ t('shelving.pageTitles.basicData') }}
                 </div>
-                <VnLv
-                    :label="t('shelving.summary.code')"
-                    :value="entity.code"
-                />
+                <VnLv :label="t('shelving.summary.code')" :value="entity.code" />
                 <VnLv
                     :label="t('shelving.summary.parking')"
                     :value="entity.parking?.code"
                 />
-                <VnLv
-                    :label="t('shelving.summary.priority')"
-                    :value="entity.priority"
-                />
+                <VnLv :label="t('shelving.summary.priority')" :value="entity.priority" />
                 <VnLv
                     :label="t('shelving.summary.worker')"
                     :value="entity.worker?.user?.nickname"
@@ -65,4 +82,12 @@ const filter = {
             </QCard>
         </template>
     </CardSummary>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <ShelvingFilter
+                data-key="ShelvingList"
+                @search="router.push({ name: 'ShelvingList' })"
+            />
+        </QScrollArea>
+    </QDrawer>
 </template>

src/pages/Shelving/ShelvingList.vue

@@ -34,6 +34,17 @@ function viewSummary(id) {
         },
     });
 }
+
+function exprBuilder(param, value) {
+  switch (param) {
+    case 'search':
+      return {code: {like: `%${value}%`}};
+    case 'parkingFk':
+    case 'userFk':
+    case 'isRecyclable':
+      return {[param]: value};
+  }
+}
 </script>
 
 <template>
@@ -68,6 +79,7 @@ function viewSummary(id) {
                 data-key="ShelvingList"
                 url="Shelvings"
                 :filter="filter"
+                :expr-builder="exprBuilder"
                 auto-load
             >
                 <template #body="{ rows }">