add: pagination in search loads y companies

This commit is contained in:
Alexandro Uc Santos
2024-03-16 18:20:59 -06:00
parent c286da773e
commit f8dfe4a3ad
17 changed files with 122 additions and 45 deletions

View File

@@ -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,24 @@
const selectedCities = ref([]);
const filterQuery = ref([]);
const limit = 5;
onMounted(() => {
filterQuery.value.company_type = 'carrier';
filterQuery.value.limit = 'elements=' + limit;
filterQuery.value.page = "page=0";
getCompaniesData(filterQuery.value);
});
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 +80,7 @@
}
const clearFilter = () => {
clearRequest();
selectedCities.value = null;
selectedCategory.value = null;
selectedState.value = null;
@@ -86,6 +100,12 @@
}
}
const clearRequest = () => {
filterQuery.value.page = "page="+ 0;
filterQuery.value.limit = "elements="+ limit;
currentCompaniesPage.value = 0;
}
const clearState = () => {
filterQuery.value.state = "";
getCompaniesData(filterQuery.value);
@@ -151,6 +171,14 @@
:key="company._id"
:company="company"
/>
<Pagination
v-if="!loading"
:total="companiesTotal"
:limit="limit"
:current-page="currentCompaniesPage"
@get-elements="getCompaniesByPage"
/>
</div>
</template>

View File

@@ -13,6 +13,7 @@
import { useAuthStore } from '../stores/auth';
import { complete_registry } from "../services/auth";
import { updateMyUserProfile } from "../services/company"
import Spiner from '../components/ui/Spiner.vue';
const notifications = useNotificationsStore();
const auth = useAuthStore();
@@ -72,6 +73,7 @@
clearMessages();
return;
}
localStorage.setItem('access', auth.token);
const companyData = {
company_name : company.name,
rfc : company.rfc,
@@ -82,31 +84,40 @@
company_description : company.description,
company_type : typeCompany.typeCompany,
};
loading.value = true;
const result = await complete_registry( companyData );
console.log(result);
if(result.msg === 'success' && result.data !== null){
localStorage.setItem('id', result.data._id);
if(result.msg !== 'success') {
msgError.value = result.msg;
localStorage.removeItem('access');
loading.value = false;
clearMessages();
return;
}
console.log(result);
localStorage.setItem('id', result.data._id);
localStorage.setItem('session', auth.sesion);
// localStorage.setItem('access', auth.token);
const userData = {
"first_name" : user.name,
"last_name" : user.lastName,
"phone" : user.phone1,
"phone2" : user.phone2,
};
await updateMyUserProfile( userData );
let respUser = await updateMyUserProfile( userData );
console.log('User create: ', respUser);
if(respUser === null) {
auth.user = userData;
} else {
auth.user = respUser;
}
/////// Datos debug ///////
notifications.show = true;
notifications.text = 'Los datos se llenaron correctamente';
localStorage.setItem('session', 'jssksksksk2skskkskskkskss');
auth.$patch({
sesion: 'jssksksksk2skskkskskkskss',
token: 'jkdkdkdkeoee00kelldd',
user: {
first_name: user.name,
last_name: user.lastName
},
})
loading.value = false;
router.push({name: 'home'});
///////////////////////////
}
@@ -292,6 +303,7 @@
label="Teléfono 1: *"
type="number"
name="phone1"
:step="1"
:filled="false"
v-model:field="user.phone1"
/>
@@ -299,12 +311,18 @@
label="Teléfono 2:"
type="number"
name="phone2"
:step="1"
:filled="false"
v-model:field="user.phone2"
/>
</div>
<input type="submit" value="Guardar" class="btn-primary-lg btn-lg-block my-4">
<Spiner v-if="loading" class="mt-5"/>
<input
v-else
type="submit"
value="Guardar"
class="btn-primary-lg btn-lg-block my-4"
/>
</form>
</div>
</template>

View File

@@ -37,8 +37,7 @@
}
const resp = await login(data);
if(resp.msg === 'success') {
console.log(resp.data.user);
if( resp.data.user.company ) {
if( resp.data.user.company ) { // Registro completo
localStorage.setItem('session', resp.data.session_token);
localStorage.setItem('access', resp.data.accessToken);
localStorage.setItem('id', resp.data.user.company);
@@ -49,14 +48,14 @@
token: resp.data.accessToken,
user: resp.data.user,
})
} else {
} else { // Completar registro
auth.$patch({
sesion: resp.data.session_token,
token: resp.data.accessToken,
user: resp.data.user,
})
localStorage.setItem('session', resp.data.session_token);
localStorage.setItem('access', resp.data.accessToken);
// localStorage.setItem('session', resp.data.session_token);
// localStorage.setItem('access', resp.data.accessToken);
router.push({name: 'register-company'});
}
} else {

View File

@@ -10,13 +10,14 @@
import Cities from '../components/ui/Cities.vue';
import MakeProposalModal from '../components/MakeProposalModal.vue';
import Pagination from '../components/Pagination.vue';
const filterQuery = ref([]);
const query = ref('');
const selectedTruckType = ref([]);
const selectedCategory = ref([]);
const selectedState = ref([]);
const selectedCities = ref([]);
const limit = 3;
const limit = 1;
const isSearch = ref(false);
const { getLoadsPublished, loads, loading, currentPage, total } = useSearchLoads();
@@ -121,8 +122,8 @@
}
const getInitData = async() => {
filterQuery.value.limit = '$limit=' + limit;
filterQuery.value.skip = "$skip=0";
filterQuery.value.limit = 'elements=' + limit;
filterQuery.value.page = "page=0";
filterQuery.value.company = "";
filterQuery.value.status = "status=Published",
@@ -131,20 +132,20 @@
const getLoadsByPage = (data) => {
console.log(data);
filterQuery.value.skip = "$skip="+ data.skip;
filterQuery.value.page = "page="+ data.page;
currentPage.value = data.page
getLoadsPublished(filterQuery.value);
}
const clearRequest = () => {
filterQuery.value.skip = "$skip="+ 0;
filterQuery.value.limit = "$limit="+ limit;
currentPage.value = 1;
filterQuery.value.page = "page="+ 0;
filterQuery.value.limit = "elements="+ limit;
currentPage.value = 0;
}
const setFilterUnlimited = () => {
filterQuery.value.skip = "$skip="+ 0;
filterQuery.value.limit = "$limit="+ 100;
filterQuery.value.page = "page="+ 0;
filterQuery.value.limit = "elements="+ 100;
}
const currentLoad = ref(null);

View File

@@ -17,7 +17,7 @@
const selectedCities = ref([]);
const filterQuery = ref([]);
const limit = 3;
const limit = 5;
onMounted(() => {
filterQuery.value.company_type = 'shipper';
@@ -102,9 +102,9 @@
}
const clearRequest = () => {
filterQuery.value.page = "page="+ 1;
filterQuery.value.page = "page="+ 0;
filterQuery.value.limit = "elements="+ limit;
currentPage.value = 1;
currentCompaniesPage.value = 0;
}
const clearState = () => {

View File

@@ -5,8 +5,10 @@
import { useCompanyStore } from '../stores/company';
import CreateUserModal from '../components/CreateUserModal.vue';
import Pagination from '../components/Pagination.vue';
import { useAuthStore } from '../stores/auth';
const companyStore = useCompanyStore();
const authStore = useAuthStore();
onMounted(() => {
getInitData();
@@ -54,6 +56,7 @@
<h2 class="title mb-4">Usuarios</h2>
<div class="btn-row mb-4">
<button
v-if="authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager'"
class="btn-primary-sm"
data-toggle="modal"
data-target="#userModal"

View File

@@ -21,7 +21,7 @@
const editStatusVehicle = ref(false);
const editDriverVehicle = ref(false);
const limit = 2;
const limit = 3;
onMounted(() => {
getInitData();