|
@@ -26,164 +26,243 @@
|
|
|
global $user;
|
|
|
|
|
|
html_header(
|
|
|
- "Puestos de la {$user->facultad['facultad']}",
|
|
|
+ is_null($user->facultad['facultad_id']) ? "Puestos" : "Puestos de la {$user->facultad['facultad']}",
|
|
|
"Sistema de gestión de checador",
|
|
|
);
|
|
|
- ?>
|
|
|
+ if (!is_null($user->facultad['facultad_id'])) {
|
|
|
+ ?>
|
|
|
|
|
|
- <main class="container-fluid px-4 mt-4" id="app" v-cloak @vue:mounted="mounted" style="min-height: 70vh;"
|
|
|
- v-scope="{new_puesto: null}">
|
|
|
+ <main class="container-fluid px-4 mt-4" id="app" v-cloak @vue:mounted="mounted" style="min-height: 70vh;"
|
|
|
+ v-scope="{new_puesto: null}">
|
|
|
|
|
|
- <div class="alert alert-success" role="alert" v-if="message">
|
|
|
- {{message}}
|
|
|
- </div>
|
|
|
- <div class="justify-content-between align-items-center d-flex mb-4">
|
|
|
- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#nuevo-puesto">
|
|
|
- <span class="ing-mas"></span>
|
|
|
- Agregar puesto
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div class="d-flex flex-wrap justify-content-around">
|
|
|
- <div class="col-6" v-for="puesto in puestos" :key="puesto.puesto_id">
|
|
|
- <div class="card text-center"
|
|
|
- v-scope="{selected_carrera_id: -1, current_materia: null, current_encargado: null}">
|
|
|
- <div class="card-header bg-primary text-white font-weight-bold text-uppercase">
|
|
|
- {{puesto.nombre}}
|
|
|
- </div>
|
|
|
- <div class="card-body">
|
|
|
- <!-- Encargado -->
|
|
|
- <div class="form-row justify-content-around align-items-center mb-2">
|
|
|
- <label :for="`encargado-${puesto.puesto_id}`" class="col-3">
|
|
|
- Encargado del área
|
|
|
- </label>
|
|
|
- <div id="encargados" class="datalist datalist-select mb-1 col-9">
|
|
|
- <div class="datalist-input" v-if="puesto.encargado">
|
|
|
- ({{puesto.encargado.usuario_clave}}) {{ puesto.encargado.usuario_nombre }}
|
|
|
- </div>
|
|
|
- <div class="datalist-input" v-else>
|
|
|
- Selecciona un encargado
|
|
|
- </div>
|
|
|
- <span class="icono ing-buscar"></span>
|
|
|
- <ul style="display:none">
|
|
|
- <li class="datalist-option" v-for="usuario in usuarios" :key="usuario.usuario_id"
|
|
|
- :data-id="usuario.usuario_id" style=" white-space: nowrap;"
|
|
|
- @click="puesto.encargado = usuario"
|
|
|
- :class="{'selected': puesto.encargado.usuario_id == usuario.usuario_id}">
|
|
|
- (<small> {{usuario.usuario_clave}} </small>) {{ usuario.usuario_nombre }}
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <input type="hidden" id="encargado_id" name="id">
|
|
|
- </div>
|
|
|
+ <div class="alert alert-success" role="alert" v-if="message">
|
|
|
+ {{message}}
|
|
|
+ </div>
|
|
|
+ <div class="justify-content-between align-items-center d-flex mb-4">
|
|
|
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#nuevo-puesto">
|
|
|
+ <span class="ing-mas"></span>
|
|
|
+ Agregar puesto
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="d-flex flex-wrap justify-content-around">
|
|
|
+ <div class="accordion col-8 mb-4" id="puestos"
|
|
|
+ v-scope="{selected_carrera_id: -1, current_materia: null, current_encargado: null}"
|
|
|
+ v-if="puestos.length">
|
|
|
+ <div class="card" v-for="(puesto, index) in puestos" :key="puesto.puesto_id">
|
|
|
+ <div class="card-header bg-primary" :id="`puesto-${puesto.nombre}`">
|
|
|
+ <h2 class="mb-0">
|
|
|
+ <button class="btn btn-link btn-block text-left text-light" type="button"
|
|
|
+ data-toggle="collapse" :data-target="`#puesto-${puesto.puesto_id}`" aria-expanded="true"
|
|
|
+ :aria-controls="`puesto-${puesto.puesto_id}`">
|
|
|
+ {{puesto.nombre}}
|
|
|
+
|
|
|
+ <button type="button" class="btn btn-outline-danger float-right"
|
|
|
+ data-target="#eliminar-puesto" data-toggle="modal" @click="to_delete = puesto">
|
|
|
+ <span class="icono ing-basura"></span>
|
|
|
+ </button>
|
|
|
+ </button>
|
|
|
+ </h2>
|
|
|
</div>
|
|
|
- <hr>
|
|
|
- <fieldset class="container d-flex flex-column justify-content-center align-items-center">
|
|
|
- <legend>Materias Asignadas <span
|
|
|
- class="badge badge-secondary">{{puesto.materias.length}}</span></legend>
|
|
|
- <ul class="list-group overflow-auto col-10" v-if="puesto.materias.length"
|
|
|
- style="max-height: 200px; overflow-y: auto;">
|
|
|
- <li class="list-group-item list-group-item-action" v-for="materia in puesto.materias"
|
|
|
- :key="materia.materia_id"
|
|
|
- @click="puesto.materias.splice(puesto.materias.indexOf(materia), 1); materias.push(materia)"
|
|
|
- style="cursor: pointer;">
|
|
|
- <div class="d-flex justify-content-center">
|
|
|
- <div class="col-2">
|
|
|
- <span class="icono ing-borrar text-danger"></span>
|
|
|
+
|
|
|
+ <div :id="`puesto-${puesto.puesto_id}`" class="collapse" :class="{'show': index == 0}"
|
|
|
+ :aria-labelledby="`puesto-${puesto.nombre}`" data-parent="#puestos">
|
|
|
+ <div class="card-body">
|
|
|
+ <!-- Encargado -->
|
|
|
+ <div class="form-row justify-content-around align-items-center mb-2">
|
|
|
+ <label :for="`encargado-${puesto.puesto_id}`" class="col-3">
|
|
|
+ Encargado del área
|
|
|
+ </label>
|
|
|
+ <div id="encargados" class="datalist datalist-select mb-1 col-9">
|
|
|
+ <div class="datalist-input" v-if="puesto.encargado">
|
|
|
+ ({{puesto.encargado.usuario_clave}}) {{ puesto.encargado.usuario_nombre }}
|
|
|
</div>
|
|
|
- <div class="col-10 text-left">
|
|
|
- {{materia.clave_materia}} - {{materia.materia_nombre}}
|
|
|
+ <div class="datalist-input" v-else>
|
|
|
+ Selecciona un encargado
|
|
|
</div>
|
|
|
+ <span class="icono ing-buscar"></span>
|
|
|
+ <ul style="display:none">
|
|
|
+ <li class="datalist-option" v-for="usuario in usuarios"
|
|
|
+ :key="usuario.usuario_id" :data-id="usuario.usuario_id"
|
|
|
+ style=" white-space: nowrap;" @click="puesto.encargado = usuario"
|
|
|
+ :class="{'selected': puesto.encargado?.usuario_id == usuario.usuario_id}">
|
|
|
+ (<small> {{usuario.usuario_clave}} </small>) {{ usuario.usuario_nombre }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <input type="hidden" id="encargado_id" name="id">
|
|
|
</div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <div class="alert alert-light" role="alert" v-else>
|
|
|
- No hay materias asignadas
|
|
|
- </div>
|
|
|
- </fieldset>
|
|
|
- <hr>
|
|
|
+ </div>
|
|
|
+ <hr>
|
|
|
|
|
|
- <div class="form-row justify-content-around align-items-center mb-2" v-show="carreras.length">
|
|
|
- <label :for="`carrera-${puesto.puesto_id}`" class="col-3">
|
|
|
- Carrera
|
|
|
- </label>
|
|
|
- <div id="dlCarreras" class="datalist datalist-select mb-1 col-9">
|
|
|
- <div class="datalist-input">
|
|
|
- Selecciona una carrera
|
|
|
+ <div class="form-row justify-content-around align-items-center mb-2"
|
|
|
+ v-show="carreras.length">
|
|
|
+ <label :for="`carrera-${puesto.puesto_id}`" class="col-3">
|
|
|
+ Carrera
|
|
|
+ </label>
|
|
|
+ <div id="dlCarreras" class="datalist datalist-select mb-1 col-9">
|
|
|
+ <div class="datalist-input">
|
|
|
+ Selecciona una carrera
|
|
|
+ </div>
|
|
|
+ <span class="icono ing-buscar"></span>
|
|
|
+ <ul style="display:none">
|
|
|
+ <li class="datalist-option" data-id="0" @click="selected_carrera_id = 0">
|
|
|
+ Todas las carreras
|
|
|
+ </li>
|
|
|
+ <li class="datalist-option" v-for="carrera in carreras"
|
|
|
+ :key="carrera.carrera_id" :data-id="carrera.carrera_id"
|
|
|
+ style=" white-space: nowrap;"
|
|
|
+ @click="selected_carrera_id = carrera.carrera_id">
|
|
|
+ (<small> {{carrera.clave_carrera}} </small>) {{ carrera.carrera_nombre }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <input type="hidden" id="carrera_id" name="id">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <span class="icono ing-buscar"></span>
|
|
|
- <ul style="display:none">
|
|
|
- <li class="datalist-option" data-id="0" @click="selected_carrera_id = 0">
|
|
|
- Todas las carreras
|
|
|
- </li>
|
|
|
- <li class="datalist-option" v-for="carrera in carreras" :key="carrera.carrera_id"
|
|
|
- :data-id="carrera.carrera_id" style=" white-space: nowrap;"
|
|
|
- @click="selected_carrera_id = carrera.carrera_id">
|
|
|
- (<small> {{carrera.clave_carrera}} </small>) {{ carrera.carrera_nombre }}
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <input type="hidden" id="carrera_id" name="id">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="form-row justify-content-around align-items-center"
|
|
|
- v-scope="{to_add_materia: null}">
|
|
|
- <label :for="`materias-${puesto.puesto_id}`" class="col-3">
|
|
|
- Materias
|
|
|
- </label>
|
|
|
- <input name="materia" placeholder="Seleccione una materia" list="datalist-materias"
|
|
|
- class="form-control col-9 " v-model="current_materia" @input="to_add_materia = materias.find(m => current_materia == `${m.clave_materia} - ${m.materia_nombre}`);
|
|
|
+ <div class="form-row justify-content-around align-items-center"
|
|
|
+ v-scope="{to_add_materia: null}">
|
|
|
+ <label :for="`materias-${puesto.puesto_id}`" class="col-3">
|
|
|
+ Materias
|
|
|
+ </label>
|
|
|
+ <input name="materia" placeholder="Seleccione una materia" list="datalist-materias"
|
|
|
+ class="form-control col-9 " v-model="current_materia" @input="to_add_materia = materias.find(m => current_materia == `${m.clave_materia} - ${m.materia_nombre}`);
|
|
|
if (to_add_materia) {
|
|
|
+ if (puesto.materias.find(p => p.materia_id == to_add_materia.materia_id)) {
|
|
|
+ console.log('La materia ya está asignada');
|
|
|
+ current_materia = null;
|
|
|
+ return;
|
|
|
+ }
|
|
|
puesto.materias.push(to_add_materia);
|
|
|
materias.splice(materias.indexOf(to_add_materia), 1);
|
|
|
current_materia = null;
|
|
|
}" :disabled="selected_carrera_id == -1" v-model="current_materia"
|
|
|
- :id="`materias-${puesto.puesto_id}`">
|
|
|
+ :id="`materias-${puesto.puesto_id}`" autocomplete="off">
|
|
|
+ </div>
|
|
|
+ <datalist id="datalist-materias">
|
|
|
+ <option
|
|
|
+ v-for="materia in materias.filter(m => selected_carrera_id == 0 || m.carrera_id == selected_carrera_id).filter(m => !puesto.materias.find(p => p.materia_id == m.materia_id))"
|
|
|
+ :value="`${materia.clave_materia} - ${materia.materia_nombre}`">
|
|
|
+ </datalist>
|
|
|
+
|
|
|
+ <hr>
|
|
|
+ <fieldset class="container d-flex flex-column justify-content-center align-items-center">
|
|
|
+ <legend>Materias Asignadas <span
|
|
|
+ class="badge badge-secondary">{{puesto.materias.length}}</span></legend>
|
|
|
+ <ul class="list-group overflow-auto col-10" v-if="puesto.materias.length"
|
|
|
+ style="max-height: 200px; overflow-y: auto;">
|
|
|
+ <li class="list-group-item list-group-item-action"
|
|
|
+ v-for="materia in puesto.materias" :key="materia.materia_id"
|
|
|
+ @click="puesto.materias.splice(puesto.materias.indexOf(materia), 1); materias.push(materia)"
|
|
|
+ style="cursor: pointer;">
|
|
|
+ <div class="d-flex justify-content-center">
|
|
|
+ <div class="col-2 text-center">
|
|
|
+ <span class="icono ing-borrar text-danger"></span>
|
|
|
+ </div>
|
|
|
+ <div class="col-10 text-left">
|
|
|
+ {{materia.clave_materia}} - {{materia.materia_nombre}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="alert alert-light" role="alert" v-else>
|
|
|
+ No hay materias asignadas
|
|
|
+ </div>
|
|
|
+ </fieldset>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="card-footer text-muted">
|
|
|
+ <!-- scroll to top -->
|
|
|
+ <button type="button" class="btn btn-outline-primary btn-lg btn-block"
|
|
|
+ @click="actualizarPuesto(puesto.puesto_id, puesto.materias, puesto.encargado?.usuario_id)"
|
|
|
+ onclick="window.scrollTo(0, 0);">
|
|
|
+ {{ puesto.encargado ? 'Guardar cambios' : 'Guardar sin encargado' }}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <datalist id="datalist-materias">
|
|
|
- <option
|
|
|
- v-for="materia in materias.filter(m => selected_carrera_id == 0 || m.carrera_id == selected_carrera_id)"
|
|
|
- :value="`${materia.clave_materia} - ${materia.materia_nombre}`">
|
|
|
- </datalist>
|
|
|
</div>
|
|
|
- <div class="card-footer text-muted">
|
|
|
- <button type="button" class="btn btn-outline-primary btn-lg btn-block" v-if="puesto.encargado"
|
|
|
- @click="actualizarPuesto(puesto.puesto_id, puesto.materias, puesto.encargado.usuario_id)">
|
|
|
- Guardar cambios
|
|
|
- </button>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <div class="alert alert-dark" role="alert">
|
|
|
+ No hay puestos registrados
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="modal" tabindex="-1" role="dialog" accesskey="a" id="nuevo-puesto">
|
|
|
- <div class="modal-dialog modal-dialog-centered" role="document">
|
|
|
- <div class="modal-content">
|
|
|
- <div class="modal-header text-white">
|
|
|
- <h5 class="modal-title">Agregar un nuevo puesto</h5>
|
|
|
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
|
- <span aria-hidden="true" class="text-white">×</span>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div class="modal-body">
|
|
|
- <fieldset>
|
|
|
- <legend>Nombre del puesto</legend>
|
|
|
- <div class="form-row">
|
|
|
- <input type="text" class="form-control" v-model="new_puesto"
|
|
|
- placeholder="Área del puesto">
|
|
|
- </div>
|
|
|
- </fieldset>
|
|
|
+ <div class="modal" tabindex="-1" role="dialog" accesskey="a" id="nuevo-puesto">
|
|
|
+ <div class="modal-dialog modal-dialog-centered" role="document">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header text-white">
|
|
|
+ <h5 class="modal-title">Agregar un nuevo puesto</h5>
|
|
|
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
|
+ <span aria-hidden="true" class="text-white">×</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body">
|
|
|
+ <fieldset>
|
|
|
+ <legend>Nombre del puesto</legend>
|
|
|
+ <div class="form-row">
|
|
|
+ <input type="text" class="form-control" v-model="new_puesto"
|
|
|
+ placeholder="Área del puesto">
|
|
|
+ </div>
|
|
|
+ </fieldset>
|
|
|
+ </div>
|
|
|
+ <div class="modal-footer">
|
|
|
+ <button type="button" class="btn btn-outline-danger" data-dismiss="modal"
|
|
|
+ @click="new_puesto = null">Cancelar</button>
|
|
|
+ <button type="button" class="btn btn-primary" data-dismiss="modal"
|
|
|
+ @click="nuevoPuesto(new_puesto); new_puesto = null">Guardar</button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="modal-footer">
|
|
|
- <button type="button" class="btn btn-outline-danger" data-dismiss="modal"
|
|
|
- @click="new_puesto = null">Cancelar</button>
|
|
|
- <button type="button" class="btn btn-primary" data-dismiss="modal"
|
|
|
- @click="nuevoPuesto(new_puesto)">Guardar</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="modal" tabindex="-1" role="dialog" accesskey="a" id="eliminar-puesto">
|
|
|
+ <div class="modal-dialog modal-dialog-centered" role="document" v-if="to_delete">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header text-white">
|
|
|
+ <h5 class="modal-title">Eliminar puesto</h5>
|
|
|
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
|
+ <span aria-hidden="true" class="text-white">×</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body">
|
|
|
+ <fieldset>
|
|
|
+ <legend>¿Estás seguro de que deseas eliminar el puesto?</legend>
|
|
|
+ <p>Esta acción no se puede deshacer. Se perderán las asignaciones de materias y de
|
|
|
+ encargado.</p>
|
|
|
+ </fieldset>
|
|
|
+ </div>
|
|
|
+ <div class="modal-footer">
|
|
|
+ <button type="button" class="btn btn-outline-danger" data-dismiss="modal"
|
|
|
+ @click="new_puesto = null">Cancelar</button>
|
|
|
+ <button type="button" class="btn btn-danger" data-dismiss="modal"
|
|
|
+ @click="eliminarPuesto(to_delete.puesto_id)">Eliminar</button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </main>
|
|
|
-
|
|
|
- <? include "import/html_footer.php"; ?>
|
|
|
+ </main>
|
|
|
|
|
|
+ <?
|
|
|
+ } else {
|
|
|
+ ?>
|
|
|
+ <main class="container mt-5" style="min-height: 70vh;">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-md-8 offset-md-2">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-header text-white bg-danger">
|
|
|
+ Sin Facultad Asociada
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <h5 class="card-title">Atención</h5>
|
|
|
+ <p class="card-text">No tienes una facultad asociada a tu perfil. El rol
|
|
|
+ <?= $user->rol['rol'] ?> no tiene acceso a esta sección.
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+ <? }
|
|
|
+ include "import/html_footer.php"; ?>
|
|
|
<script src="js/jquery.min.js"></script>
|
|
|
<script src="js/jquery-ui.js"></script>
|
|
|
<script src="js/bootstrap/bootstrap.min.js"></script>
|