Apply searchbar logic

src/components/common/VnCard.vue

@@ -20,6 +20,8 @@ const props = defineProps({
     searchUrl: { type: String, default: undefined },
     searchbarLabel: { type: String, default: '' },
     searchbarInfo: { type: String, default: '' },
+    searchCustomRouteRedirect: { type: String, default: undefined },
+    searchRedirect: { type: Boolean, default: false },
 });
 
 const stateStore = useStateStore();
@@ -62,6 +64,8 @@ watchEffect(() => {
                     :url="props.searchUrl"
                     :label="props.searchbarLabel"
                     :info="props.searchbarInfo"
+                    :custom-route-redirect-name="searchCustomRouteRedirect"
+                    :redirect="searchRedirect"
                 />
             </slot>
         </Teleport>

src/pages/Zone/Card/ZoneCard.vue

@@ -5,38 +5,29 @@ import { computed } from 'vue';
 
 import VnCard from 'components/common/VnCard.vue';
 import ZoneDescriptor from './ZoneDescriptor.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-
-import { useStateStore } from 'stores/useStateStore';
 
 const { t } = useI18n();
-const stateStore = useStateStore();
 const route = useRoute();
 
 const routeName = computed(() => route.name);
+const customRouteRedirectName = computed(() => {
+    if (routeName.value === 'ZoneLocations') return null;
+    return routeName.value;
+});
 const searchBarDataKeys = {
     ZoneWarehouses: 'ZoneWarehouses',
     ZoneSummary: 'ZoneSummary',
+    ZoneLocations: 'ZoneLocations',
 };
 </script>
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                :data-key="searchBarDataKeys[routeName]"
-                :custom-route-redirect-name="routeName"
-                :label="t('list.searchZone')"
-                :info="t('list.searchInfo')"
-            />
-        </Teleport>
-    </template>
     <VnCard
         data-key="Zone"
-        base-url="Zones"
         :descriptor="ZoneDescriptor"
-        searchbar-data-key="ZoneList"
-        searchbar-url="Zones/filter"
-        searchbar-label="Search zones"
-        searchbar-info="You can search by zone reference"
+        :search-data-key="searchBarDataKeys[routeName]"
+        :search-custom-route-redirect="customRouteRedirectName"
+        :search-redirect="!!customRouteRedirectName"
+        :searchbar-label="t('list.searchZone')"
+        :searchbar-info="t('list.searchInfo')"
     />
 </template>

src/pages/Zone/Card/ZoneLocationsTree.vue

@@ -1,18 +1,25 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
+
 import { useState } from 'src/composables/useState';
 import axios from 'axios';
+import { useArrayData } from 'composables/useArrayData';
 
 const { t } = useI18n();
 const route = useRoute();
 const state = useState();
 
 const treeRef = ref();
-
 const expanded = ref([]);
 
+const arrayData = useArrayData('ZoneLocations', {
+    url: `Zones/${route.params.id}/getLeaves`,
+});
+const { store } = arrayData;
+const storeData = computed(() => store.data);
+
 const nodes = ref([
     { id: null, name: t('zoneLocations.locations'), sons: true, children: [{}] },
 ]);
@@ -75,6 +82,12 @@ const onSelected = async (val, node) => {
     }
 };
 
+watch(storeData, async (val) => {
+    // Se triggerea cuando se actualiza el store.data, el cual es el resultado del fetch de la searchbar
+    nodes.value[0].children = [...val];
+    await fetchNodeLeaves(1);
+});
+
 onMounted(async (n) => {
     const tree = [...state.get('Tree'), 1];
     const lastStateTree = state.get('TreeState');
@@ -89,6 +102,7 @@ onMounted(async (n) => {
             await fetchNodeLeaves(lastStateTree);
         }
     }
+
     setTimeout(() => {
         if (lastStateTree) {
             document.getElementById(lastStateTree).scrollIntoView();