Merge branch 'marco' of https://repositorio.acatlan.unam.mx/CIDWA/servicio_social_front into dev
This commit is contained in:
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div>
|
||||
<p class="is-size-2 mb-5">Carga Masiva</p>
|
||||
<b-field v-if="true">
|
||||
<b-upload
|
||||
v-model="csv"
|
||||
type="is-black"
|
||||
v-on:input="validarExt()"
|
||||
drag-drop
|
||||
expanded
|
||||
>
|
||||
<section class="section">
|
||||
<div class="content has-text-centered">
|
||||
<p>
|
||||
<b-icon icon="upload" size="is-large"></b-icon>
|
||||
</p>
|
||||
<p>
|
||||
{{
|
||||
csv.name || "Arrastra aquí tu archivo o da click para buscar"
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</b-upload>
|
||||
</b-field>
|
||||
<b-button v-if="csv.name" @click="dialog()" class="is-info"
|
||||
>Enviar archivo</b-button
|
||||
>
|
||||
<b-button v-else disabled class="is-info">Enviar archivo</b-button>
|
||||
<b-loading
|
||||
:is-full-page="true"
|
||||
v-model="isLoading"
|
||||
:can-cancel="false"
|
||||
></b-loading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
csv: {},
|
||||
token: {
|
||||
headers: {
|
||||
token: window.localStorage.getItem("token"),
|
||||
},
|
||||
},
|
||||
isLoading: false,
|
||||
toastType: null,
|
||||
toastMessage: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
validarExt() {
|
||||
const extPermitidas = /(.csv)$/i;
|
||||
if (!extPermitidas.exec(this.csv.name)) {
|
||||
this.toastType = "is-danger";
|
||||
this.toastMessage = "Asegurate de ingresar un archivo .CSV";
|
||||
this.toast();
|
||||
this.csv = {};
|
||||
}
|
||||
},
|
||||
toast() {
|
||||
this.$buefy.toast.open({
|
||||
message: this.toastMessage,
|
||||
type: this.toastType,
|
||||
});
|
||||
},
|
||||
dialog() {
|
||||
this.$buefy.dialog.confirm({
|
||||
title: "Carga masiva",
|
||||
message: "¿Seguro(a) que quiere enviar este archivo?",
|
||||
confirmText: "Confirmar",
|
||||
cancelText: "Cancelar",
|
||||
type: "is-success",
|
||||
hasIcon: true,
|
||||
onConfirm: () => this.enviarCargaMasiva(),
|
||||
});
|
||||
},
|
||||
enviarCargaMasiva() {
|
||||
const formData = new FormData();
|
||||
|
||||
this.isLoading = true;
|
||||
formData.append("csv", this.csv);
|
||||
axios
|
||||
.post(`${process.env.api}/programa/carga_masiva`, formData, {
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
token: this.token.headers.token,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
this.isLoading = false;
|
||||
this.toastType = "is-success";
|
||||
this.toastMessage = "Se ha enviado la carga masiva con éxito";
|
||||
this.toast();
|
||||
this.$router.push("/admin");
|
||||
})
|
||||
.catch((err) => {
|
||||
this.isLoading = false;
|
||||
this.error(err.response.data.message);
|
||||
});
|
||||
},
|
||||
error(msj) {
|
||||
let salir = false;
|
||||
switch (msj) {
|
||||
case "invalid signature":
|
||||
msj = "Tu token no es valido, inicia sesión de nuevo.";
|
||||
salir = true;
|
||||
break;
|
||||
case "jwt expired":
|
||||
msj = "Tu sesión ha expirado, inicia sesión de nuevo.";
|
||||
salir = true;
|
||||
break;
|
||||
case "jwt malformed":
|
||||
msj = "No se encontro tu token, inicia sesión de nuevo.";
|
||||
salir = true;
|
||||
break;
|
||||
case "No hay token":
|
||||
msj = "Ocurrio un error al enviar tu token, inicia sesión de nuevo.";
|
||||
salir = true;
|
||||
break;
|
||||
}
|
||||
|
||||
this.$buefy.dialog.alert({
|
||||
title: "Error",
|
||||
message: msj,
|
||||
type: "is-danger",
|
||||
hasIcon: true,
|
||||
icon: "alert-circle",
|
||||
iconPack: "mdi",
|
||||
ariaRole: "alertdialog",
|
||||
ariaModal: true,
|
||||
});
|
||||
if (salir == true) {
|
||||
localStorage.clear();
|
||||
this.$router.push(`/`);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div class="container mt-5">
|
||||
<p class="is-size-2 mb-5">Lista de responsables</p>
|
||||
<div class="columns">
|
||||
<div class="column is-3 mb-4 pb-4">
|
||||
<b-field>
|
||||
<b-input
|
||||
type="name"
|
||||
placeholder="Nombre"
|
||||
icon="account"
|
||||
rounded
|
||||
v-model="nombre"
|
||||
></b-input>
|
||||
</b-field>
|
||||
</div>
|
||||
<div class="column is-3 mb-0">
|
||||
<b-field>
|
||||
<b-input
|
||||
placeholder="Correo electrónico"
|
||||
icon="school"
|
||||
rounded
|
||||
v-model="correo"
|
||||
>
|
||||
</b-input>
|
||||
</b-field>
|
||||
</div>
|
||||
<div class="buttons section pt-3 pl-5">
|
||||
<b-button type="is-info" @click="obtenerDatos(idStatus)">
|
||||
Buscar
|
||||
</b-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns mb-5">
|
||||
<section class="column is-12">
|
||||
<b-table
|
||||
:data="data"
|
||||
:loading="loading"
|
||||
hoverable
|
||||
striped
|
||||
paginated
|
||||
backend-pagination
|
||||
:total="total"
|
||||
:per-page="perPage"
|
||||
@page-change="onPageChange"
|
||||
>
|
||||
<b-table-column field="nombre" label="Nombre" v-slot="props" centered>
|
||||
<span @click="verRegistro(props.row)">{{ props.row.nombre }}</span>
|
||||
</b-table-column>
|
||||
<b-table-column
|
||||
field="correo"
|
||||
label="Correo electrónico"
|
||||
v-slot="props"
|
||||
centered
|
||||
>
|
||||
<span @click="verRegistro(props.row)">{{ props.row.usuario }}</span>
|
||||
</b-table-column>
|
||||
</b-table>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
idUsuario: "",
|
||||
data: [],
|
||||
total: "",
|
||||
loading: false,
|
||||
page: 1,
|
||||
perPage: 25,
|
||||
correo: "",
|
||||
nombre: "",
|
||||
idStatus: 1,
|
||||
token: {
|
||||
headers: {
|
||||
token: window.localStorage.getItem("token"),
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onPageChange(page) {
|
||||
this.page = page;
|
||||
this.obtenerDatos();
|
||||
},
|
||||
obtenerDatos(idStatus) {
|
||||
this.loading = true;
|
||||
this.data = [];
|
||||
axios
|
||||
.get(
|
||||
`${process.env.api}/usuario/responsable?pagina=${this.page}&nombre=${this.nombre}&correo=${this.correo}`,
|
||||
this.token
|
||||
)
|
||||
.then((res) => {
|
||||
const servicios = res.data.servicios;
|
||||
if (servicios.length !== 0) {
|
||||
for (let i = 0; i < servicios.length; i++) {
|
||||
this.data.push({
|
||||
nombre: servicios[i].nombre,
|
||||
usuario: servicios[i].usuario,
|
||||
idUsuario: servicios[i].idUsuario,
|
||||
});
|
||||
}
|
||||
}
|
||||
let currentTotal = servicios.length;
|
||||
let contador;
|
||||
for (let i = 0; i < res.data.registros / this.perPage + 1; i++) {
|
||||
contador = i;
|
||||
}
|
||||
currentTotal = this.perPage * contador;
|
||||
this.total = currentTotal;
|
||||
this.loading = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
this.loading = false;
|
||||
this.error(err.response.data.message);
|
||||
});
|
||||
},
|
||||
error(msj) {
|
||||
let salir = false;
|
||||
switch (msj) {
|
||||
case "invalid signature":
|
||||
msj = "Tu token no es valido, inicia sesión de nuevo.";
|
||||
salir = true;
|
||||
break;
|
||||
case "jwt expired":
|
||||
msj = "Tu sesión ha expirado, inicia sesión de nuevo.";
|
||||
salir = true;
|
||||
break;
|
||||
case "jwt malformed":
|
||||
msj = "No se encontro tu token, inicia sesión de nuevo.";
|
||||
salir = true;
|
||||
break;
|
||||
case "No hay token":
|
||||
msj = "Ocurrio un error al enviar tu token, inicia sesión de nuevo.";
|
||||
salir = true;
|
||||
break;
|
||||
}
|
||||
|
||||
this.$buefy.dialog.alert({
|
||||
title: "Error",
|
||||
message: msj,
|
||||
type: "is-danger",
|
||||
hasIcon: true,
|
||||
icon: "alert-circle",
|
||||
iconPack: "mdi",
|
||||
ariaRole: "alertdialog",
|
||||
ariaModal: true,
|
||||
});
|
||||
if (salir == true) {
|
||||
localStorage.clear();
|
||||
this.$router.push(`/`);
|
||||
}
|
||||
},
|
||||
insertIdLocal() {
|
||||
this.idUsuario = localStorage.getItem("idUsuario");
|
||||
},
|
||||
verRegistro(responsable) {
|
||||
localStorage.setItem("correo", responsable.usuario);
|
||||
localStorage.setItem("idResponsable", responsable.idUsuario);
|
||||
localStorage.setItem("nombre", responsable.nombre);
|
||||
this.$router.push("/admin/programa/infoResponsable");
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
busquedaNombreResponsable() {
|
||||
return this.responsables.filter((responsables) =>
|
||||
responsables.nombreResp.includes(this.buscarNombreResponsable)
|
||||
);
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
await this.obtenerDatos();
|
||||
this.insertIdLocal();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.b-table {
|
||||
cursor: pointer;
|
||||
}
|
||||
.input:focus {
|
||||
border: #1b3d70;
|
||||
box-shadow: 0 0 8px 0 #1b3d70;
|
||||
}
|
||||
.select select:focus {
|
||||
border-color: #1b3d70;
|
||||
box-shadow: 0 0 8px 0 #1b3d70;
|
||||
}
|
||||
.select:not(.is-multiple):not(.is-loading)::after {
|
||||
border-color: #1b3d70;
|
||||
}
|
||||
.pagination-link.is-current {
|
||||
background-color: #1b3d70;
|
||||
border-color: #1b3d70;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user