add: pagination to locations

src/views/LocationsView.vue

@@ -5,6 +5,7 @@
     import CardEmpty from '../components/CardEmpty.vue';
     import CreateLocationModal from '../components/CreateLocationModal.vue';
     import CardLocation from '../components/CardLocation.vue';
+import Pagination from '../components/Pagination.vue';
 
     const companyStore = useCompanyStore();
 
@@ -18,13 +19,25 @@
         getInitData();
     })
 
+    const limit = 10;
+
     const getInitData = async() => {
         loading.value = true;
+        companyStore.locationsCurrentPage = companyStore.locationsCurrentPage;
         filterQuery.value.company = "company="+ localStorage.getItem('id');
         await companyStore.getLocationsCompany(filterQuery.value, false)
         loading.value = false;
     }
 
+    const getLocationsByPage = async(data) => {
+        loading.value = true;
+        filterQuery.value.company = "company="+ localStorage.getItem('id');
+        filterQuery.value.skip = "$skip="+ data.skip;
+        companyStore.locationsCurrentPage = data.page
+        await companyStore.getLocationsCompany(filterQuery.value, true)
+        loading.value = false;
+    }
+
     const getLocationsWithFilters = async(filter) => {
         loading.value = true;
         await companyStore.getLocationsCompany(filter, true);
@@ -32,8 +45,12 @@
     }
 
     watch(query, () => {
+        filterQuery.value.skip = "$skip="+ 0;
+        filterQuery.value.limit = "$limit="+ 100;
         if(query.value.length === 0){
+            clearRequest();
             filterQuery.value.search = "";
+            // filterQuery.value.page = 1
             getLocationsWithFilters(filterQuery.value);
         }
     });
@@ -48,9 +65,10 @@
     }
 
     const clearFilter = () => {
+        clearRequest();
+
         filterQuery.value.search = "";
         filterQuery.value.company = "company="+ localStorage.getItem('id');
-
         if(query.value == ''){
             getInitData();
         } else {
@@ -58,6 +76,12 @@
         }
     }
 
+    const clearRequest = () => {
+        filterQuery.value.skip = "$skip="+ 0;
+        filterQuery.value.limit = "$limit="+ limit;
+        companyStore.locationsCurrentPage = 1;
+    }
+
     const handleSetCurrentLocation = (location) => {
         openModal.value = true;
         locationCurrent.value = location;
@@ -66,7 +90,6 @@
     const handleResetCurrentBudget = () => {
         openModal.value = false;
         locationCurrent.value = null;
-        console.log('clear location');
     }
 
 </script>
@@ -94,7 +117,9 @@
                 @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-if="loading" class="spiner-box">
+            <Spiner/>
+        </div>
         <div v-else>
             <CardLocation
                 v-if="companyStore.locations.length > 0"
@@ -104,11 +129,17 @@
                 @set-location="handleSetCurrentLocation(location)"
             />
             <CardEmpty v-else text="No hay ubicaciones agregadas"/>
+            <Pagination
+                :limit="limit"
+                :total="companyStore.locationsTotal"
+                :current-page="companyStore.locationsCurrentPage"
+                @get-elements="getLocationsByPage"
+            />
         </div>
     </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
     .box-filters {
         display: flex;
         flex-direction: row;
@@ -117,6 +148,12 @@
         margin: 1.5rem 0px;
     }
 
+    // .spiner-box {
+    //     display: flex;
+    //     justify-content: center;
+    //     height: calc(100vh - 400px)
+    // }
+
     .box-search {
         width: 60%;
     }