feat: refs #6891 shelving

src/components/common/VnCard.vue

@@ -17,10 +17,10 @@ const props = defineProps({
     filter: { type: Object, default: () => {} },
     descriptor: { type: Object, required: true },
     filterPanel: { type: Object, default: undefined },
-    searchbarDataKey: { type: String, default: undefined },
-    searchbarUrl: { type: String, default: undefined },
-    searchbarLabel: { type: String, default: '' },
-    searchbarInfo: { type: String, default: '' },
+    searchDataKey: { type: String, default: undefined },
+    searchUrl: { type: String, default: undefined },
+    searchbarLabel: { type: String, default: undefined },
+    searchbarInfo: { type: String, default: undefined },
     customRouteRedirectName: { type: String, default: undefined },
 });
 
@@ -53,15 +53,18 @@ if (props.baseUrl) {
 </script>
 <template>
     <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar" v-if="props.searchbarDataKey">
-            <VnSearchbar
-                :data-key="props.searchbarDataKey"
-                :url="props.searchbarUrl"
-                :label="t(props.searchbarLabel)"
-                :info="t(props.searchbarInfo)"
-                :custom-route-redirect-name="props.customRouteRedirectName"
-            />
+        <Teleport to="#searchbar" v-if="props.searchDataKey">
+            <slot name="searchbar">
+                <VnSearchbar
+                    :data-key="props.searchDataKey"
+                    :url="props.searchUrl"
+                    :label="t(props.searchbarLabel)"
+                    :info="t(props.searchbarInfo)"
+                    :custom-route-redirect-name="props.customRouteRedirectName"
+                />
+            </slot>
         </Teleport>
+        <slot v-else name="searchbar" />
         <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
             <QScrollArea class="fit">
                 <component :is="descriptor" />
@@ -71,7 +74,7 @@ if (props.baseUrl) {
         </QDrawer>
         <RightMenu>
             <template #right-panel v-if="props.filterPanel">
-                <component :is="props.filterPanel" :data-key="props.searchbarDataKey" />
+                <component :is="props.filterPanel" :data-key="props.searchDataKey" />
             </template>
         </RightMenu>
     </template>

src/pages/Shelving/Card/ShelvingCard.vue

@@ -1,7 +1,19 @@
 <script setup>
 import VnCard from 'components/common/VnCard.vue';
 import ShelvingDescriptor from 'pages/Shelving/Card/ShelvingDescriptor.vue';
+import ShelvingFilter from './ShelvingFilter.vue';
+import ShelvingSearchbar from './ShelvingSearchbar.vue';
 </script>
 <template>
-    <VnCard data-key="Shelving" base-url="Shelvings" :descriptor="ShelvingDescriptor" />
+    <VnCard
+        data-key="Shelving"
+        base-url="Shelvings"
+        :descriptor="ShelvingDescriptor"
+        :filter-panel="ShelvingFilter"
+        search-data-key="ShelvingList"
+    >
+        <template #searchbar>
+            <ShelvingSearchbar />
+        </template>
+    </VnCard>
 </template>