AM - Aplicar cambios visuales pantalla historial turnos

src/app/pages/turnos/buscar/turnos-buscar.html

@@ -1,7 +1,7 @@
 <ion-header class="dark" translucent="true">
     <ion-toolbar>
-        <ion-back-button slot="start" defaultHref="home" text=""></ion-back-button>
-        <ion-title><small>Mis Turnos: Búsqueda</small></ion-title>
+        <ion-back-button slot="start" defaultHref="home" text="" icon="chevron-back-outline"></ion-back-button>
+        <ion-title><small>Mis Turnos | Búsqueda</small></ion-title>
         <ion-buttons slot="end">
             <ion-menu-button></ion-menu-button>
         </ion-buttons>

src/app/pages/turnos/calendario/turnos-calendario.html

@@ -1,6 +1,6 @@
 <ion-header class="dark" translucent="true">
     <ion-toolbar>
-        <ion-back-button slot="start" defaultHref="home" text=""></ion-back-button>
+        <ion-back-button slot="start" defaultHref="home" text="" icon="chevron-back-outline"></ion-back-button>
         <ion-title><small>Turnos Disponibles</small></ion-title>
         <ion-buttons slot="end">
             <ion-menu-button></ion-menu-button>

src/app/pages/turnos/detalles/turno-detalle.html

@@ -1,79 +1,87 @@
 <ion-header class="dark" translucent="true">
     <ion-toolbar>
-        <ion-back-button slot="start" defaultHref="home" text=""></ion-back-button>
-        <ion-title><small>Mis Turnos: Detalle</small></ion-title>
+        <ion-back-button slot="start" defaultHref="home" text="" icon="chevron-back-outline"></ion-back-button>
+        <ion-title><small>Mis Turnos | <span class="bold-text">Detalle</span></small></ion-title>
         <ion-buttons slot="end">
             <ion-menu-button></ion-menu-button>
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content *ngIf="turno" class="dark ion-padding-top" [class.familiar]="familiar">
+<ion-content *ngIf="turno" class="dark ion-padding-top margin-left-10" [class.familiar]="familiar">
     <span class="badge ion-margin-bottom" [class.success]="turno.estado !== 'suspendido'"
-        [class.danger]="turno.estado === 'suspendido'">{{turno.estado}}</span>
+          [class.danger]="turno.estado === 'suspendido'">{{turno.estado}}</span>
     <span *ngIf="turno.link" class="badge ion-margin-bottom">Turno Virtual</span>
     <div class="andes-detalle-contenedor">
-        <div class="titulo-secundario ion-margin-vertical ion-text-capitalize">{{ turno.tipoPrestacion.term }}</div>
         <div class="titulo-principal ion-margin-vertical">
-            <ion-icon name="andes-turno"></ion-icon> Fecha: {{ turnoFecha() }}
-        </div>
-        <div class="titulo-principal ion-margin-vertical">
-            <ion-icon name="andes-horario"></ion-icon> Hora: {{ turnoHora() }} hs.
+            <ion-icon class="left sm" name="andes-turno"></ion-icon> {{diaTurnoFecha() | dayFilter}}
+            <ion-icon class="horario left sm" name="andes-horario"></ion-icon> {{ turnoHora() }}
         </div>
+        <div class="fecha ion-margin-vertical">{{turnoFecha()}}</div>
     </div>
-    <ul class="andes-list">
-        <li>
-            <div class="andes-container">
-                <ion-icon class="left sm" name="andes-profesional"></ion-icon>
-                <div class="andes-wraper">
-                    <div class="andes-list-prefix">Profesional</div>
-                    <small class="andes-list-title"> {{profesionalName()}} </small>
-                </div>
+    <div class="andes-detalle-contenedor titulo-secundario ion-text-capitalize prestacion">
+        {{ turno.tipoPrestacion.term }}
+    </div>
+    <div class="andes-detalle-contenedor hr">
+        <hr>
+    </div>
+    <div class="andes-detalle-contenedor-two">
+        <div class="andes-container">
+            <div class="andes-list-prefix prefix">
+                {{ profesionales?.length > 1 ? 'Profesionales' : 'Profesional' }}:
+                <ion-buttons *ngIf="profesionales.length > 1" fill="clear" slot="end" class="dropdown"
+                             (click)="toggleDropdown()">
+                    <ion-icon *ngIf="isDropdownVisible" slot="icon-only" size="large" name="chevron-up"></ion-icon>
+                    <ion-icon *ngIf="!isDropdownVisible" slot="icon-only" size="large" name="chevron-down"></ion-icon>
+                </ion-buttons>
             </div>
-        </li>
-        <li>
-            <div class="andes-container">
-                <ion-icon class="left sm" name="andes-hospital"></ion-icon>
-                <div class="andes-wraper">
-                    <div class="andes-list-prefix">Organización</div>
-                    <small class="andes-list-title"> {{efector()}} </small><br>
-                    <small *ngIf="turno.espacioFisico && !turno.link">{{turno.espacioFisico.nombre}}</small>
-                    <small *ngIf="!turno.espacioFisico && !turno.link">Espacio físico no asignado</small>
-                    <div class="andes-list-subfix">Neuquén Capital</div>
-                </div>
+            <div *ngIf="profesionales?.length <= 1" class="andes-wraper">
+                <ion-icon class="left sm icon-detalle" name="andes-profesional"></ion-icon>
+                <small class="andes-list-title"> {{profesionalName()}} </small>
+                <br>
+                <small class="small andes-list-title andes-wraper-sub"> {{profesionalFormacion()}} </small>
             </div>
-        </li>
-        <li *ngIf="!turno.link">
-            <div class="andes-container" (click)="mapTurno();">
-                <ion-icon class="left sm" name="andes-marker-salud"></ion-icon>
-                <div class="andes-wraper">
-                    <div class="andes-list-prefix">Mapa</div>
-                    <div class="andes-list-subfix">Ir al mapa</div>
+            <div *ngIf="profesionales?.length > 1 && isDropdownVisible" class="andes-wraper">
+                <div *ngFor="let profesional of profesionales" class="andes-wraper">
+                    <ion-icon class="left sm icon-detalle" name="andes-profesional"></ion-icon>
+                    <small class="andes-list-title">{{profesional.apellido}}, {{profesional.nombre}} </small>
+                    <br>
+                    <small class="andes-list-title andes-wraper-sub">{{
+                        profesional?.formacionGrado[0].profesion.nombre}}</small>
                 </div>
             </div>
-        </li>
-        <li *ngIf="turno.link">
+
+        </div>
+        <div class="andes-container" (click)="mapTurno();">
+            <div class="andes-list-prefix">Efector:</div>
+            <div class="andes-wraper">
+                <ion-icon class="left sm icon-detalle" name="andes-marker-salud"></ion-icon>
+                <small class="andes-list-title"> {{efector()}} </small>
+            </div>
+        </div>
+        <div *ngIf="turno.link">
             <div class="andes-container">
-                <ion-icon class="left" name="desktop-outline"></ion-icon>
+                <ion-icon class="left sm icon-detalle" name="desktop-outline"></ion-icon>
                 <div class="andes-wraper">
                     <div class="andes-list-prefix">Consultorio Virtual</div>
                     <div class="andes-list-subfix">Turno por video llamada</div>
                 </div>
 
             </div>
             <br>
-            <div class=" andes-container">
+            <div class="andes-container">
                 <p>Vas a poder acceder el <span>{{ turnoFecha() }}</span> a las <span>{{
                         turnoHora() }} hs</span>, tocando el siguiente botón
                 </p>
             </div>
-        </li>
-    </ul>
+        </div>
+    </div>
+
     <div *ngIf="turno.link">
         <button class="md rounded block success" [class.disabled]="turnoActivo" [disabled]="turnoActivo"
-            (click)="linkConsultorioVirtual(turno.link);">Comenzar consulta
+                (click)="linkConsultorioVirtual(turno.link);">Comenzar consulta
             Virtual</button>
     </div>
     <div *ngIf="turnoAsignado">
-        <button class="md rounded block danger" (click)="cancelarTurno()">Cancelar mi turno</button>
+        <button class="md danger button-cancelar" (click)="cancelarTurno()">Cancelar turno</button>
     </div>
 </ion-content>

src/app/pages/turnos/detalles/turno-detalle.scss

@@ -0,0 +1,117 @@
+$info: #10A6DF;
+
+.margin-left-10 {
+    margin-left: 10px;
+}
+
+.ion-margin-bottom {
+    margin-top: 16px;
+    margin-left: 10px;
+    padding: 9px;
+    text-align: center;
+    border: 1px solid;
+    font-size: 100%;
+    width: 43%;
+}
+
+small {
+    margin-left: 1.5%;
+}
+
+.bold-text {
+    font-weight: bold;
+    font-size: inherit;
+}
+
+.andes-detalle-contenedor {
+    margin-left: 10px;
+    margin-right: 20px;
+}
+
+.andes-container {
+    margin-top: 30px;
+}
+
+.andes-wraper {
+    margin-top: 5px;
+    margin-left: 10px;
+}
+
+.andes-wraper-sub {
+    margin-left: 30px;
+}
+
+.horario {
+    margin-left: 10%;
+}
+
+.fecha {
+    color: $info;
+    font-size: 230%;
+    font-weight: 500;
+}
+
+.prestacion {
+    font-size: 200%;
+    color: magenta;
+    overflow: hidden;
+}
+
+.prestacion.expanded {
+    -webkit-line-clamp: unset;
+    max-height: none;
+    overflow: visible;
+}
+
+hr {
+    border: 0.5px solid white;
+    border-color: white;
+}
+
+.andes-detalle-contenedor-two {
+    margin-top: 10px;
+    margin-left: 10px;
+    margin-right: 20px;
+}
+
+.icon-detalle {
+    color: $info;
+}
+
+.andes-list-title {
+    font-size: 100%;
+    font-weight: 400;
+}
+
+.button-cancelar {
+    text-transform: uppercase;
+    border-radius: 25px;
+    height: 3rem;
+    width: 50%;
+    margin-top: 10%;
+}
+
+.dropdown-content {
+    background: var(--ion-color-light);
+    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
+    border-radius: 5px;
+    margin-top: 10px;
+    position: absolute;
+    z-index: 1000;
+    width: 200px;
+    /* Ajusta el tamaño según sea necesario */
+}
+
+.turno-item-popover ion-item {
+    --background: transparent;
+}
+
+.prefix {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.dropdown {
+    font-size: 1rem;
+}

src/app/pages/turnos/detalles/turno-detalle.ts

@@ -5,27 +5,36 @@ import * as moment from 'moment/moment';
 // providers
 import { TurnosProvider } from '../../../../providers/turnos';
 import { ToastProvider } from '../../../../providers/toast';
+import { ProfesionalProvider } from '../../../../providers/profesional';
 import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
     selector: 'app-turno-detalle',
-    templateUrl: 'turno-detalle.html'
+    templateUrl: 'turno-detalle.html',
+    styleUrls: ['turno-detalle.scss']
 })
 export class TurnosDetallePage implements OnInit {
 
     public turno: any;
     public turnoAsignado;
     public turnoActivo;
     familiar: any;
+    profesional: any = null;
+    profesionales: any = [];
     cancelEvent: EventEmitter<any> = new EventEmitter();
+    isExpanded = false;
+    isDropdownVisible = false;
+    showConfirmAsistencia = true;
 
     constructor(
         private route: ActivatedRoute,
         private router: Router,
         private turnosProvider: TurnosProvider,
         private toast: ToastProvider,
         private alertCtrl: AlertController,
-        private storage: StorageService) {
+        private storage: StorageService,
+        private profesionalProvider: ProfesionalProvider
+    ) {
     }
 
     ngOnInit() {
@@ -39,23 +48,45 @@ export class TurnosDetallePage implements OnInit {
                 this.turnoActivo = moment(this.turno.horaInicio).isAfter(moment());
                 this.turnoAsignado = this.turno.estado === 'asignado' ? true : false;
             });
+            this.turno.profesionales.forEach((prof) => {
+                this.profesionalProvider.getById(prof._id).then((data: any) => {
+
+                    this.profesionales.push(data[0]);
+                });
+            });
         });
     }
 
     profesionalName() {
         if (this.turno.profesionales.length > 0) {
-            return this.turno.profesionales[0].apellido + ' ' + this.turno.profesionales[0].nombre;
+            const nombresConcatenados = this.turno.profesionales
+                .map((prof) => prof.apellido + ' ' + prof.nombre)
+                .join(', ');
+
+            return nombresConcatenados;
         } else {
-            return 'Sin profesional';
+            return 'Sin datos';
         }
     }
 
+    profesionalFormacion() {
+        if (this.profesionales[0]?.profesionalMatriculado && this.profesionales[0].formacionGrado?.length > 0) {
+            return this.profesionales[0].formacionGrado[0].profesion.nombre;
+        } else {
+            return '';
+        }
+
+    }
+
+    diaTurnoFecha() {
+        return moment(this.turno.horaInicio).format('dddd');
+    }
     turnoFecha() {
         return moment(this.turno.horaInicio).format('DD/MM/YY');
     }
 
     turnoHora() {
-        return moment(this.turno.horaInicio).format('HH:mm');
+        return moment(this.turno.horaInicio).format('hh:mm A').replace('AM', 'a.m.').replace('PM', 'p.m.');
     }
 
     isAsignado() {
@@ -141,4 +172,14 @@ export class TurnosDetallePage implements OnInit {
                 return 'info';
         }
     }
+    toggleDropdown() {
+        this.isDropdownVisible = !this.isDropdownVisible;
+    }
+    toggleExpand() {
+        this.isExpanded = !this.isExpanded;
+    }
+
+    onAction(action: string) {
+        this.isDropdownVisible = false;
+    }
 }

src/app/pages/turnos/historial/historial-turnos.html

@@ -1,7 +1,7 @@
 <ion-header class="dark" translucent="true">
     <ion-toolbar>
-        <ion-back-button slot="start" defaultHref="home" text=""></ion-back-button>
-        <ion-title><small>Mis Turnos: Historial</small></ion-title>
+        <ion-back-button slot="start" defaultHref="home" text="" icon="chevron-back-outline"></ion-back-button>
+        <ion-title><small>Mis Turnos | <span style="font-weight: 700; font-size: 0.95rem;">Historial</span></small></ion-title>
         <ion-buttons slot="end">
             <ion-menu-button></ion-menu-button>
         </ion-buttons>

src/app/pages/turnos/historial/historial-turnos.scss

@@ -16,3 +16,13 @@
     display: flex;
     align-items: center;
 }
+
+ion-header .bold-text {
+    font-weight: bold;
+    font-size: 0.875rem;
+}
+
+.reset-span {
+    font-size: inherit;
+    font-weight: normal;
+}