add: crud locations

2024-01-09 18:49:51 -06:00
parent 6ebeb0f4a2
commit 937c3a8fe5
8 changed files with 678 additions and 2 deletions
--- a/src/views/LocationsView.vue
+++ b/src/views/LocationsView.vue
@@ -1,13 +1,146 @@
 <script setup>
+    import { onMounted, ref, watch } from 'vue';
+    import { useCompanyStore } from '../stores/company';
+    import Spiner from '../components/ui/Spiner.vue';
+    import CardEmpty from '../components/CardEmpty.vue';
+    import CreateLocationModal from '../components/CreateLocationModal.vue';
+    import CardLocation from '../components/CardLocation.vue';
+
+    const companyStore = useCompanyStore();
+
+    const loading = ref(false);
+    const filterQuery = ref([]);
+    const query = ref('');
+    const locationCurrent = ref(null);
+    const openModal = ref(false);
+
+    onMounted(() => {
+        getInitData();
+    })
+
+    const getInitData = async() => {
+        loading.value = true;
+        filterQuery.value.company = "company="+ localStorage.getItem('id');
+        await companyStore.getLocationsCompany(filterQuery.value, false)
+        loading.value = false;
+    }
+
+    const getLocationsWithFilters = async(filter) => {
+        loading.value = true;
+        await companyStore.getLocationsCompany(filter, true);
+        loading.value = false;
+    }
+
+    watch(query, () => {
+        if(query.value.length === 0){
+            filterQuery.value.search = "";
+            getLocationsWithFilters(filterQuery.value);
+        }
+    });
+
+    const search = () => {
+        if(query.value.length >= 2){
+            // filterQuery.value = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
+            filterQuery.value.search = "branch_name[$regex]="+ query.value +"&branch_name[$options]=i";;
+            getLocationsWithFilters(filterQuery.value);
+        } 
+    
+    }
+
+    const clearFilter = () => {
+        filterQuery.value.search = "";
+        filterQuery.value.company = "company="+ localStorage.getItem('id');
+
+        if(query.value == ''){
+            getInitData();
+        } else {
+            query.value = '';
+        }
+    }
+
+    const handleSetCurrentLocation = (location) => {
+        openModal.value = true;
+        locationCurrent.value = location;
+    }
+
+    const handleResetCurrentBudget = () => {
+        openModal.value = false;
+        locationCurrent.value = null;
+        console.log('clear location');
+    }

 </script>

 <template>
    <div>
+        <CreateLocationModal 
+            v-if="openModal === true"
+            :location="locationCurrent"
+            @reset-location="handleResetCurrentBudget"
+        />
        <h2 class="title">Ubicaciones</h2>
+        <div class="box-filters">
+            <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>
+            <button 
+                class="btn btn-danger bg-dark" type="button" @click="clearFilter">
+                <i class="fa-solid fa-arrow-rotate-right"></i>
+                <span class="clear-sm"> Reset</span><span class="clear-md"> filtros</span>
+            </button>
+            <button
+                class="btn-primary-sm radius-sm"
+                data-toggle="modal" data-target="#locationFormModal"
+                @click="handleSetCurrentLocation(null)"
+            ><i class="fa-solid fa-plus"></i> <span class="clear-sm"> Agregar</span><span class="clear-md"> locación</span></button>
+        </div>
+        <Spiner v-if="loading"/>
+        <div v-else>
+            <CardLocation
+                v-if="companyStore.locations.length > 0"
+                v-for="location in companyStore.locations"
+                :key="location._id"
+                :location="location" 
+                @set-location="handleSetCurrentLocation(location)"
+            />
+            <CardEmpty v-else text="No hay ubicaciones agregadas"/>
+        </div>
    </div>
 </template>

 <style scoped>
+    .box-filters {
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+        gap: 1rem;
+        margin: 1.5rem 0px;
+    }

+    .box-search {
+        width: 60%;
+    }
+    .custom-search {
+        width: 100%;
+        padding: 12px 20px;
+    }
+
+    @media (max-width: 1024px) {
+        .box-search {
+            width: 60%;
+        }
+        .box-filters {
+            gap: .4rem;
+        }
+    }
+
+    @media (max-width: 768px) {
+
+        .box-search {
+            width: 100%;
+        }
+        .box-filters {
+            gap: .3rem;
+        }
+    }
 </style>