add: selected popup directory type

src/components/CustomPopup.vue

@@ -0,0 +1,93 @@
+<script setup>
+    const props = defineProps({
+        options: {
+            type: Array,
+            required: true
+        },
+        value: {
+            type: Object,
+            required: true
+        },
+        style: {
+            type: Object,
+            required: false
+        },
+        selectedColor: {
+            type: String,
+            required: false
+        }
+    })
+
+
+    defineEmits(['change-value', 'close-popup'])
+</script>
+
+<template>
+        <div 
+            class="background-popup"
+            @click="$emit('close-popup')"
+        >
+        </div>
+        <div 
+            class="content-popup"
+            :style="style"
+        >
+            <div 
+                v-for="option in options"
+                class="box-btn" 
+                :style="{
+                    backgroundColor: (value.value === option.value) ? (selectedColor) ? selectedColor : 'primary' : ''
+                }"
+                @click="$emit('change-value', option)"
+            >{{ option.label }}</div>
+        </div>
+</template>
+
+
+<style scoped>
+    .background-popup {
+        position: fixed;
+        z-index: 1000;
+        width: 100wv;
+        right: 0px;
+        top: 0px;
+        left: 0px;
+        cursor: pointer;
+        bottom: 0px;
+        background-color: #c6b9b9;
+        opacity: 0.2;
+    }
+
+    .content-popup {
+        position: fixed;
+        right: 180px;
+        top: 180px;
+        z-index: 2000;
+        width: 200px;
+        background-color: #FFF;
+        opacity: 1;
+        border-radius: 13px;
+        padding: 20px 32px;
+        display: flex;
+        flex-direction: column;
+        /* flex-wrap: nowrap; */
+        /* overflow: hidden; */
+        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
+    }
+
+    .box-btn {
+        padding: 8px 16px;
+        margin-bottom: 8px;
+        background-color: rgb(234, 241, 241);
+        border-radius: 5px;
+        font-size: 0.8rem;
+        font-weight: 700;
+    }
+
+    @media (max-width: 568px) {
+        .content-popup {
+            top: 200px;
+            right: 20px;
+        }
+    }
+</style>

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%;