add: answer faqs

src/views/FaqsView.vue

@@ -11,8 +11,7 @@
             <h2 class="title-section mt-4">{{ section.section }}</h2>
             <CardFaq
                 v-for="faq in section.items"
-                :question="faq.question"
-                :answer="faq.answer"
+                :faq="faq"
             />
         </div>
     </div>

src/views/SearchLoadsView.vue

@@ -29,7 +29,6 @@
         setFilterUnlimited();
         if(query.value.length === 0){
             if(selectedCategory.value?.length === 0  && selectedTruckType.value?.length === 0 && selectedCities.value?.length === 0 && selectedState.value?.length === 0 ) {
-                console.log('here');
                 clearRequest();
                 isSearch.value = false;
             }

src/views/ShippersView.vue

@@ -7,8 +7,9 @@
     import Segments from '../components/ui/Segments.vue';
     import States from '../components/ui/States.vue';
     import Cities from '../components/ui/Cities.vue';
+import Pagination from '../components/pagination.vue';
 
-    const {loading, companies, getCompaniesData} = useDirectory();
+    const {loading, companies, getCompaniesData, companiesTotal, currentCompaniesPage} = useDirectory();
     const query = ref('');
     const selectedTruckType = ref([]);
     const selectedCategory = ref([]);
@@ -16,11 +17,25 @@
     const selectedCities = ref([]);
     const filterQuery = ref([]);
 
+    const limit = 3;
+
     onMounted(() => {
         filterQuery.value.company_type = 'shipper';
+        filterQuery.value.limit = 'elements=' + limit;
+        filterQuery.value.page = "page=1";
         getCompaniesData(filterQuery.value);
     });
 
+    ///v1/public-companies/shipper?elements=3&skip=6&$sort%5BcreatedAt%5D=-1
+
+    const getCompaniesByPage = (data) => {
+        console.log(data);
+        // filterQuery.value.company_type = 'shipper';
+        filterQuery.value.page = "page="+ data.page;
+        currentCompaniesPage.value = data.page
+        getCompaniesData(filterQuery.value);
+    }
+
     watch(query, () => {
         if(query.value.length === 0){
             filterQuery.value.search = "";
@@ -66,7 +81,7 @@
     }
 
     const clearFilter = () => {
-    
+        clearRequest();
         selectedCities.value = null;
         selectedCategory.value = null;
         selectedState.value = null;
@@ -86,6 +101,12 @@
         }
     }
 
+    const clearRequest = () => {
+        filterQuery.value.page = "page="+ 1;
+        filterQuery.value.limit = "elements="+ limit;
+        currentPage.value = 1;
+    }
+
     const clearState = () => {
         filterQuery.value.state = "";
         getCompaniesData(filterQuery.value);
@@ -137,20 +158,29 @@
             </div>
         </div>
         <Spiner v-if="loading"/>
-        <div 
-            class="card-info flex-column align-items-center"
-            v-if="loading === false && companies.length <= 0"
-        >
-            <img src="/images/logo.png" alt="logo" width="100">
-            <h2 class="title">No hay registros</h2>
+        <div v-else>
+            <div 
+                class="card-info flex-column align-items-center"
+                v-if="companies.length <= 0"
+            >
+                <img src="/images/logo.png" alt="logo" width="100">
+                <h2 class="title">No hay registros</h2>
+            </div>
+            <CardCompany
+                v-else
+                :key="company._id"
+                v-for="company in companies"
+                :company="company"
+            />
+            <Pagination
+                v-if="!loading"
+                :total="companiesTotal"
+                :limit="limit"
+                :current-page="currentCompaniesPage"
+                @get-elements="getCompaniesByPage"
+            />
         </div>
         
-        <CardCompany
-            v-else
-            :key="company._id"
-            v-for="company in companies"
-            :company="company"
-        />
     </div>
 </template>