From cd2955e67da350f2c479ce42aea5692342b53951 Mon Sep 17 00:00:00 2001
From: aldoEMatamala <aldo.emanuel.matamla@gmail.com>
Date: Wed, 10 Apr 2024 14:39:24 -0300
Subject: [PATCH] feat(MAT-164):Implementar mockup guia profesional

---
 .../guiaProfesional.component.ts              |  5 +-
 .../guiaProfesional/guiaProfesional.html      | 93 ++++++++++++++-----
 2 files changed, 76 insertions(+), 22 deletions(-)

diff --git a/src/app/components/guiaProfesional/guiaProfesional.component.ts b/src/app/components/guiaProfesional/guiaProfesional.component.ts
index c6627844..9eb61a3e 100644
--- a/src/app/components/guiaProfesional/guiaProfesional.component.ts
+++ b/src/app/components/guiaProfesional/guiaProfesional.component.ts
@@ -94,6 +94,7 @@ export class GuiaProfesionalComponent implements OnInit {
         }
         this._profesionalService.getGuiaProfesional(this.busqueda).subscribe(resultado => {
             resultado.forEach(profesional => {
+                const profesiones = [];
                 profesional.profesiones.forEach(profesion => {
                     const datos = {
                         nombre: profesional.nombre,
@@ -105,11 +106,13 @@ export class GuiaProfesionalComponent implements OnInit {
                         matricula: profesion.matriculacion ? profesion.matriculacion[profesion.matriculacion.length -
                             1].matriculaNumero : null,
                         matriculado: profesion.matriculado,
+                        habilitado: profesional.habilitado,
                         matriculaVigente: profesion.matriculacion ? moment(profesion.matriculacion[profesion.matriculacion.length -
                             1].fin).isAfter(moment()) : false,
                     };
-                    this.profesionales.push(datos);
+                    profesiones.push(datos);
                 });
+                this.profesionales.push(profesiones);
             });
             this.loading = false;
             this.mostrarInfo = true;
diff --git a/src/app/components/guiaProfesional/guiaProfesional.html b/src/app/components/guiaProfesional/guiaProfesional.html
index 84d7cf1f..0cedbb58 100644
--- a/src/app/components/guiaProfesional/guiaProfesional.html
+++ b/src/app/components/guiaProfesional/guiaProfesional.html
@@ -43,28 +43,79 @@
                     subtitulo="No se encontró ningún profesional que coincida con los criterios de búsqueda">
         </plex-label>
 
-        <plex-list *ngIf="profesionales.length && !loading">
-            <plex-title *ngIf="!scanned" titulo="Listado de profesionales"></plex-title>
-            <plex-heading>
-                <plex-label justify="start">&nbsp;&nbsp;PROFESIONAL</plex-label>
-                <plex-label justify="start">SEXO</plex-label>
-                <plex-label justify="start">NACIONALIDAD</plex-label>
-                <plex-label justify="start">PROFESIÓN</plex-label>
-            </plex-heading>
+        <plex-accordion *ngFor="let profesional of profesionales  ">
+            <plex-panel *mobile="false">
+                <div plex-accordion-title justify>
+                    <section class="w-50">
+                        <plex-label size="lg" case="capitalize"
+                                    titulo="{{ profesional[0].nombre }},{{profesional[0].apellido}}"
+                                    subtitulo="{{ profesional[0].documento }}" icon="medico">
+                        </plex-label>
+                    </section>
+                    <plex-badge type="danger" *ngIf="!profesional[0].habilitado">
+                        Profesional no habilitado</plex-badge>
+                </div>
+                <plex-grid size="md" cols="3">
+                    <plex-card *ngFor="let profesion of profesional" [selectable]="true">
+                        <plex-badge type="success"
+                                    *ngIf="profesion.matriculado && profesion.matriculaVigente  ">MATRÍCULA
+                            N°{{profesion.matricula}}
+                            ACTIVA</plex-badge>
+                        <plex-badge type="danger"
+                                    *ngIf="!profesion.matriculado || !profesion.matriculaVigente  ">MATRÍCULA
+                            INACTIVA</plex-badge>
+                        <div class="mb-3">
+                            <plex-label icon="medico" justify="center" direction="column"
+                                        titulo="{{ profesion.nombre }},{{profesion.apellido}}"
+                                        subtitulo="{{ profesion.documento }}" size="lg"></plex-label>
+                            <plex-label justify="center" direction="column" titulo="Profesión"
+                                        subtitulo="{{ profesion.profesion }}" size="lg"></plex-label>
+                            <plex-label justify="center" direction="column" titulo="Sexo"
+                                        subtitulo="{{ profesion.sexo }}" size="lg"></plex-label>
+                            <plex-label justify="center" direction="column" titulo="Nacionalidad"
+                                        subtitulo="{{ profesion.nacionalidad }}" size="lg"></plex-label>
+                        </div>
+                    </plex-card>
+                </plex-grid>
+            </plex-panel>
+            <plex-panel *mobile>
+                <div plex-accordion-title justify>
+                    <section class=" w-50">
+                        <plex-label size="lg" case="capitalize"
+                                    titulo="{{ profesional[0].nombre }},{{profesional[0].apellido}}"
+                                    subtitulo="{{ profesional[0].documento }}" icon="medico">
+                        </plex-label>
+                        <plex-badge type="danger" *ngIf="!profesional[0].habilitado">
+                            Profesional no habilitado</plex-badge>
+                    </section>
+
+                </div>
+                <plex-list size="md" cols="3">
+                    <plex-card *ngFor="let profesion of profesional" [selectable]="true">
+                        <plex-badge type="success"
+                                    *ngIf="profesion.matriculado && profesion.matriculaVigente  ">MATRÍCULA
+                            N°{{profesion.matricula}}
+                            ACTIVaA</plex-badge>
+                        <plex-badge type="danger"
+                                    *ngIf="!profesion.matriculado || !profesion.matriculaVigente  ">MATRÍCULA
+                            INACTIVA</plex-badge>
+                        <div class="mb-3">
+                            <plex-label icon="medico" justify="center" direction="column"
+                                        titulo="{{ profesion.nombre }},{{profesion.apellido}}"
+                                        subtitulo="{{ profesion.documento }}" size="lg"></plex-label>
+                            <plex-label justify="center" direction="column" titulo="Profesión"
+                                        subtitulo="{{ profesion.profesion }}" size="lg"></plex-label>
+                            <plex-label justify="center" direction="column" titulo="Sexo"
+                                        subtitulo="{{ profesion.sexo }}" size="lg"></plex-label>
+                            <plex-label justify="center" direction="column" titulo="Nacionalidad"
+                                        subtitulo="{{ profesion.nacionalidad }}" size="lg"></plex-label>
+                        </div>
+                    </plex-card>
+                </plex-list>
+            </plex-panel>
+        </plex-accordion>
+
 
-            <plex-item *ngFor="let profesional of profesionales">
-                <plex-label [titulo]="profesional | profesional" [subtitulo]="profesional.documento"></plex-label>
-                <plex-label>{{profesional.sexo}}</plex-label>
-                <plex-label>{{profesional.nacionalidad}}</plex-label>
-                <plex-label>{{profesional.profesion}}</plex-label>
-                <plex-badge type="success" *ngIf="profesional.matriculado && profesional.matriculaVigente  ">MATRÍCULA
-                    N°{{profesional.matricula}}
-                    ACTIVA</plex-badge>
-                <plex-badge type="danger" *ngIf="!profesional.matriculado || !profesional.matriculaVigente  ">MATRÍCULA
-                    INACTIVA</plex-badge>
-            </plex-item>
-            <hr class="bg-white">
-        </plex-list>
 
     </plex-layout-main>
 </plex-layout>
\ No newline at end of file