From 0190a25a8fcf15d3a1e463b71f4581138be25749 Mon Sep 17 00:00:00 2001
From: palita1991 <marianopalavecino7@gmail.com>
Date: Tue, 19 Apr 2022 10:55:56 -0300
Subject: [PATCH] feat(CITAS): cambio distribucion de datos de agenda y agrega
 boton demanda rechazada

---
 .../turnos/dar-turnos/dar-turnos.component.ts |  16 +++
 .../turnos/dar-turnos/dar-turnos.html         | 107 ++++++++++++------
 .../turnos/dar-turnos/dar-turnos.scss         |  37 +++---
 3 files changed, 114 insertions(+), 46 deletions(-)

diff --git a/src/app/components/turnos/dar-turnos/dar-turnos.component.ts b/src/app/components/turnos/dar-turnos/dar-turnos.component.ts
index 16d1128b4a..49384f6f38 100644
--- a/src/app/components/turnos/dar-turnos/dar-turnos.component.ts
+++ b/src/app/components/turnos/dar-turnos/dar-turnos.component.ts
@@ -1226,4 +1226,20 @@ export class DarTurnosComponent implements OnInit {
         this.router.navigate(['citas/sobreturnos', this.agenda.id], { queryParams: { paciente: this.paciente.id } });
     }
 
+    volver() {
+        // se ingresó desde monitoreo de inscriptos
+        if (this.solicitudVacunacion) {
+            this.afterDarTurno.emit(null);
+            this.plex.clearNavbar();
+            return;
+        }
+
+        // se ingresó desde citas
+        if (this._pacienteSeleccionado) {
+            this.afterDarTurno.emit(this.paciente);
+        } else {
+            this.resetBuscarPaciente();
+        }
+    }
+
 }
diff --git a/src/app/components/turnos/dar-turnos/dar-turnos.html b/src/app/components/turnos/dar-turnos/dar-turnos.html
index 5839de6a9c..5084b4fc45 100644
--- a/src/app/components/turnos/dar-turnos/dar-turnos.html
+++ b/src/app/components/turnos/dar-turnos/dar-turnos.html
@@ -2,26 +2,17 @@
     <plex-layout-main>
         <ng-container>
             <plex-title titulo="Calendario de Agendas" size="sm">
-                <plex-bool *ngIf="mostrarCalendario" [(ngModel)]="mostrarNoDisponibles" type="slide"
-                           name="mostrarNoDisponibles" label="Agendas sin turnos"
-                           title="{{mostrarNoDisponibles ? 'Ocultar agendas sin turnos' : 'Mostrar agendas sin turnos'}}"
-                           (change)="actualizar()"></plex-bool>
-                <plex-bool *ngIf="mostrarCalendario" class="ml-2" [(ngModel)]="mostrarFinesDeSemana" type="slide"
-                           name="mostrarFinesDeSemana" label="Sábados y domingos"
-                           title="{{mostrarFinesDeSemana ? 'Mostrar sábados y domingos' : 'Ocultar sábados y domingos'}}"
-                           (change)="actualizar()">
-                </plex-bool>
-
                 <plex-button class="mx-2" type="info" size="sm" icon="chevron-left" (click)="cambiarMes('-')">
                 </plex-button>
                 <span class="text-120">{{ opciones.fecha | date: "MMM yyyy" | uppercase }}</span>
-                <plex-button class="ml-2" size="sm" type="info" icon="chevron-right" (click)="cambiarMes('+')">
+                <plex-button class="ml-1" size="sm" type="info" icon="chevron-right" (click)="cambiarMes('+')">
+                </plex-button>
+                <plex-button label="Demanda Rechazada" size="sm" class="ml-2" type="warning" (click)="noSeAsignaTurno()"
+                             [disabled]="!opciones.tipoPrestacion">
                 </plex-button>
-                <plex-button label="Cancelar" size="sm" class="ml-2" type="danger" icon="danger"
-                             (click)="noSeAsignaTurno()">
+                <plex-button class="ml-1" label="Volver" size="sm" type="danger" (click)="volver()">
                 </plex-button>
             </plex-title>
-
             <plex-grid size="lg" type="full">
                 <plex-wrapper>
                     <plex-select *ngIf="!_solicitudPrestacion?.solicitud && !tipoPrestacionesPermitidas"
@@ -52,6 +43,17 @@
                                  [(ngModel)]="opciones.profesional" (getData)="loadProfesionales($event)"
                                  labelField="apellido + ' ' + nombre" (change)="filtrar()" name="profesional">
                     </plex-select>
+                    <div *ngIf="mostrarCalendario" class="d-flex flex-column justify-content-center align-items-center">
+                        <plex-bool [(ngModel)]="mostrarNoDisponibles" type="slide" name="mostrarNoDisponibles"
+                                   label="Agendas sin turnos"
+                                   title="{{mostrarNoDisponibles ? 'Ocultar agendas sin turnos' : 'Mostrar agendas sin turnos'}}"
+                                   (change)="actualizar()"></plex-bool>
+                        <plex-bool [(ngModel)]="mostrarFinesDeSemana" type="slide" name="mostrarFinesDeSemana"
+                                   label="Sábados y domingos"
+                                   title="{{mostrarFinesDeSemana ? 'Mostrar sábados y domingos' : 'Ocultar sábados y domingos'}}"
+                                   (change)="actualizar()">
+                        </plex-bool>
+                    </div>
                 </plex-wrapper>
             </plex-grid>
             <div *ngIf="!mostrarCalendario">
@@ -84,7 +86,7 @@
                     <plex-icon name="pico-izquierda"></plex-icon>
                 </div>
                 <div class="contenido-agenda">
-                    <plex-grid type="full" cols="3" justify="start">
+                    <plex-grid type="full" cols="2" justify="start">
                         <plex-badge type="info">
                             AGENDA {{indice+1}} /{{agendasDelDia.length}}
                         </plex-badge>
@@ -99,30 +101,53 @@
                                      icon="account-plus" (click)="agregarSobreturno()" tooltipPosition="top"
                                      tooltip="Agregar Sobreturno">
                         </plex-button>
+                        <plex-help titulo="" subtitulo="" type="help" size="sm" icon="information-variant">
+                            <plex-label size="md" titulo="Prestación"
+                                        subtitulo="{{agenda.tipoPrestaciones | enumerar:['term']}}">
+                            </plex-label>
+                            <plex-label *ngIf="agenda.profesionales.length" size="md" titulo="Equipo de Salud"
+                                        subtitulo="{{agenda.profesionales | enumerar:['apellido','nombre']}}">
+                            </plex-label>
+                            <plex-label *ngIf="agenda.profesionales.length === 0" size="md" titulo="Equipo de Salud"
+                                        subtitulo="Equipo de Salud no asignado">
+                            </plex-label>
+                            <plex-label *ngIf="agenda.espacioFisico" size="md" titulo="Espacio Físico"
+                                        subtitulo="{{agenda | espacioFisico}}">
+                            </plex-label>
+                            <plex-label *ngIf="!agenda.espacioFisico" size="md" titulo="Espacio Físico"
+                                        subtitulo="Espacio físico no asignado">
+                            </plex-label>
+                        </plex-help>
                     </plex-grid>
                     <plex-grid type="full" justify="start">
-                        <div class="icono-agenda">
-                            <plex-icon name="calendar" size="xl" type="warning"></plex-icon>
-                        </div>
                         <plex-grid type="full" cols="2" justify="center">
                             <plex-label size="md" case="capitalize"
                                         titulo="{{ agenda.horaInicio | date: 'EEEE d/M/yyyy' }}"
-                                        subtitulo="Desde {{agenda.horaInicio | date: 'HH:mm'}} hasta {{agenda.horaFin | date: 'HH:mm'}}hs">
+                                        subtitulo="{{agenda.horaInicio | date: 'HH:mm'}} - {{agenda.horaFin | date: 'HH:mm'}}hs">
                             </plex-label>
-                            <plex-grid class="m-0" type="full" justify="center" cols="2">
+
+                            <plex-grid *ngIf="opciones.profesional && !opciones.tipoPrestacion" class="m-0" type="full"
+                                       justify="center">
                                 <plex-label size="md" titulo="Prestación"
                                             subtitulo="{{agenda.tipoPrestaciones | enumerar:['nombre']}}">
                                 </plex-label>
-                                <plex-help *ngIf="agenda.profesionales.length !== 0 || agenda.espacioFisico" titulo=""
-                                           subtitulo="" type="help" size="sm" icon="information-variant">
-                                    <plex-label *ngIf="agenda.profesionales.length !== 0" size="md"
-                                                titulo="Equipo de Salud"
-                                                subtitulo="{{agenda.profesionales | enumerar:['apellido','nombre']}}">
-                                    </plex-label>
-                                    <plex-label *ngIf="agenda.espacioFisico" size="md" titulo="Espacio Físico"
-                                                subtitulo="{{agenda | espacioFisico}}">
-                                    </plex-label>
-                                </plex-help>
+                            </plex-grid>
+                            <plex-grid *ngIf="!opciones.profesional && opciones.tipoPrestacion" class="m-0" type="full"
+                                       justify="center">
+                                <plex-label *ngIf="agenda.profesionales.length" size="md" titulo="Equipo de Salud"
+                                            subtitulo="{{agenda.profesionales | enumerar:['apellido','nombre']}}">
+                                </plex-label>
+                                <plex-label *ngIf="agenda.profesionales.length === 0" size="md" titulo="Equipo de Salud"
+                                            subtitulo="Equipo de Salud no asignado">
+                                </plex-label>
+                            </plex-grid>
+                            <plex-grid *ngIf="opciones.profesional && opciones.tipoPrestacion" class="m-0" type="full"
+                                       justify="center">
+                                <plex-label size="md" titulo="Prestación" subtitulo="{{opciones.tipoPrestacion.term}}">
+                                </plex-label>
+                                <plex-label size="md" titulo="Equipo de Salud"
+                                            subtitulo="{{opciones.profesional.apellido}}, {{opciones.profesional.nombre}}">
+                                </plex-label>
                             </plex-grid>
                         </plex-grid>
                     </plex-grid>
@@ -137,7 +162,8 @@
             <paciente-detalle [paciente]="paciente" orientacion="horizontal" size="xs" [fields]="pacienteFields">
             </paciente-detalle>
             <!-- Tiene turnos disponibles -->
-            <ng-container *ngIf="estadoT === 'seleccionada'">
+            <ng-container
+                          *ngIf="estadoT === 'seleccionada' && (opciones.profesional && opciones.tipoPrestacion || opciones.tipoPrestacion)">
                 <!--Lista de turnos, bloque por bloque-->
                 <plex-title size="sm" titulo="Turnos disponibles para este bloque"></plex-title>
                 <plex-grid class="turnos_disponibles" responsive type="full" cols="4" *ngFor="let bloque of bloques">
@@ -170,9 +196,24 @@
             <!-- Agenda con turnos disponibles -->
             <ng-container *ngIf="estadoT === 'seleccionada'">
                 <!--Lista de turnos, bloque por bloque-->
-                <div *ngFor="let bloque of bloques">
+                <div class="listado-turnos mb-4" *ngFor="let bloque of bloques">
                     <plex-label *ngIf="bloque.descripcion" titulo="Descripción: {{bloque.descripcion}}">
                     </plex-label>
+                    <plex-grid *ngIf="opciones.profesional && !opciones.tipoPrestacion"
+                               class="turnos_disponibles border border-white" responsive type="full" cols="4">
+                        <plex-label align="center" size="md" titulo="Del día"
+                                    subtitulo="{{countBloques[findIndex(bloque)]?.delDia}}">
+                        </plex-label>
+                        <plex-label align="center" size="md" titulo="Programados"
+                                    subtitulo="{{countBloques[findIndex(bloque)]?.programado}}">
+                        </plex-label>
+                        <plex-label align="center" size="md" titulo="Con llave"
+                                    subtitulo="{{countBloques[findIndex(bloque)]?.gestion}}">
+                        </plex-label>
+                        <plex-label align="center" size="md" titulo="Profesional"
+                                    subtitulo="{{countBloques[findIndex(bloque)]?.profesional}}">
+                        </plex-label>
+                    </plex-grid>
                     <plex-grid *ngIf="tieneTurnos(bloque)" type="full" size="sm">
                         <plex-card type="dark" mode="filled" size="xs" *ngFor="let turno of bloque.turnos; let i=index"
                                    selectable="true" [selected]="isActive(turno)" (click)="seleccionarTurno(bloque,i)"
@@ -181,7 +222,7 @@
                                         titulo="{{turno.horaInicio | date: 'HH:mm'}}hs">
                             </plex-label>
                             <plex-label *ngIf="turno.estado !== 'disponible'" size="md" direction="column"
-                                        titulo="{{turno.horaInicio | date: 'HH:mm'}}hss"
+                                        titulo="{{turno.horaInicio | date: 'HH:mm'}}hs"
                                         aria-label="turno no disponible">
                             </plex-label>
                         </plex-card>
diff --git a/src/app/components/turnos/dar-turnos/dar-turnos.scss b/src/app/components/turnos/dar-turnos/dar-turnos.scss
index c0437abd33..a64ebfff12 100644
--- a/src/app/components/turnos/dar-turnos/dar-turnos.scss
+++ b/src/app/components/turnos/dar-turnos/dar-turnos.scss
@@ -10,6 +10,7 @@ $orange: #ff8d22;
     display: flex;
     margin: 2px 0 3px 0;
     border-bottom: 1px solid $blue;
+
     .btn-prev,
     .btn-next {
         width: 20px;
@@ -19,24 +20,28 @@ $orange: #ff8d22;
         cursor: pointer;
         background: $blue;
         color: lightblue;
+
         &:hover {
             plex-icon {
                 color: $dark-blue;
             }
         }
+
         &.disabled {
             background: #35474e;
+
             plex-icon {
                 color: $dark-grey;
             }
         }
     }
-    .contenido-agenda{
+
+    .contenido-agenda {
         width: 100%;
         margin-left: 1rem;
         margin-right: 1rem;
 
-        plex-help{
+        plex-help {
             display: flex;
             align-items: center;
             justify-content: center;
@@ -44,21 +49,27 @@ $orange: #ff8d22;
     }
 }
 
-.icono-agenda{   
-    plex-icon{
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            border: solid 3px $orange;
-            border-radius: 50%;
-            padding: 0.75rem;
-            height: 3rem;
-            width: 3rem;
+.icono-agenda {
+    plex-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border: solid 3px $orange;
+        border-radius: 50%;
+        padding: 0.75rem;
+        height: 3rem;
+        width: 3rem;
     }
 }
 
-.turnos_disponibles{
+.turnos_disponibles {
     margin-top: 0 !important;
     display: flex !important;
     justify-content: space-between !important;
+}
+
+.listado-turnos {
+    plex-grid {
+        margin-top: 0 !important;
+    }
 }
\ No newline at end of file