add: selected popup directory type

src/views/LocationsView.vue

@@ -6,6 +6,7 @@
     import CreateLocationModal from '../components/CreateLocationModal.vue';
     import CardLocation from '../components/CardLocation.vue';
     import Pagination from '../components/Pagination.vue';
+import CustomPopup from '../components/CustomPopup.vue';
 
     const companyStore = useCompanyStore();
 
@@ -14,6 +15,9 @@
     const query = ref('');
     const locationCurrent = ref(null);
     const openModal = ref(false);
+    // const typeDirection = ref(null)
+    const typeDirection = ref({value: 'both', label: 'Ambas'})
+    const openPopup = ref(false);
 
     onMounted(() => {
         getInitData();
@@ -94,9 +98,36 @@
         locationCurrent.value = null;
     }
 
+    const selectedType = (type) => {
+        console.log(type)
+        typeDirection.value = type
+        openPopup.value = false
+    }
+
+    const optionsFilter = [
+        {value: 'both',label: 'Ambas'},
+        {value: 'load',label: 'Carga'},
+        {value: 'download',label: 'Descarga'}
+    ]
+
+    const closePopup = () => {
+        openPopup.value = false
+    }
+
 </script>
 
 <template>
+    <div
+        v-if="openPopup"
+    >
+        <CustomPopup 
+            :options="optionsFilter" 
+            :value="typeDirection" 
+            @change-value="selectedType"
+            @close-popup="closePopup"
+            selected-color="#e3a11e"
+        />
+    </div>
     <div>
         <CreateLocationModal 
             v-if="openModal === true"
@@ -108,6 +139,13 @@
             <div class="box-search">
                 <input class="form-control custom-search" type="search" name="" placeholder="Buscar por nombre de locación" id="" @:input="search()" v-model="query" aria-label="Search">
             </div>
+            <div class="box-directory"
+                @click="openPopup = true"
+            >
+                <span class="clear-sm" v-if="typeDirection === null">Directorio</span>
+                <span class="clear-sm" v-else>{{typeDirection.label}}</span>
+                <i class="fa-solid fa-filter"></i>
+            </div>
             <button 
                 class="btn btn-danger bg-dark" type="button" @click="clearFilter">
                 <i class="fa-solid fa-arrow-rotate-right"></i>
@@ -149,21 +187,41 @@
         gap: 1rem;
         margin: 1.5rem 0px;
     }
+    .box-filter-location {
+        background-color: white;
+    }
 
-    // .spiner-box {
-    //     display: flex;
-    //     justify-content: center;
-    //     height: calc(100vh - 400px)
-    // }
+    .section-h4 {
+        font-size: 1rem;
+    }
+
+    .box-custom {
+        background-color: red!important;
+        width: 100px;
+    }
+
+    .box-directory {
+        padding: 12px 8px;
+        background-color: #FFF;
+        border-radius: 5px;
+        display: flex;
+        flex-direction: row;
+        border: 1px rgb(186, 175, 175) solid;
+        gap: 1rem;
+        align-items: center;
+        cursor: pointer;
+    }
 
     .box-search {
-        width: 60%;
+        // width: 50%;
+        flex: 1;
     }
     .custom-search {
         width: 100%;
         padding: 12px 20px;
     }
 
+
     @media (max-width: 1024px) {
         .box-search {
             width: 60%;