From b26bf10e7094daddd5563d1df19d23919a1184b7 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 20 May 2024 15:53:38 -0300
Subject: [PATCH] Apply searchbar logic

---
 src/components/common/VnCard.vue          |  4 ++++
 src/pages/Zone/Card/ZoneCard.vue          | 29 ++++++++---------------
 src/pages/Zone/Card/ZoneLocationsTree.vue | 18 ++++++++++++--
 3 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index 58cb12708..e836badec 100644
--- a/src/components/common/VnCard.vue
+++ b/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>
diff --git a/src/pages/Zone/Card/ZoneCard.vue b/src/pages/Zone/Card/ZoneCard.vue
index 6451fe00c..1abbb78bf 100644
--- a/src/pages/Zone/Card/ZoneCard.vue
+++ b/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>
diff --git a/src/pages/Zone/Card/ZoneLocationsTree.vue b/src/pages/Zone/Card/ZoneLocationsTree.vue
index 0940e071d..df3f8ef25 100644
--- a/src/pages/Zone/Card/ZoneLocationsTree.vue
+++ b/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();