feat(huds): aplica estilos a timeline (#2411)

* refactor(huds): mejora visualizacion * refactor(timeline): agrega iconos * feat(huds): select items in timeline Co-authored-by: Mariano Andres Botta <marianoabotta@gmail.com>
andes · Aug 20, 2021 · c103301 · c103301
1 parent 00cc316
commit c103301
Show file tree

Hide file tree

Showing 3 changed files with 298 additions and 63 deletions.
diff --git a/src/app/modules/rup/views/huds-timeline/huds-timeline.component.html b/src/app/modules/rup/views/huds-timeline/huds-timeline.component.html
@@ -1,4 +1,4 @@
-<plex-layout [main]="itemSelected ? 6 : 12">
+<plex-layout [main]="itemSelected ? 8 : 12" resizable="true" min="4" max="8" [steps]="2">
     <plex-layout-main>
         <header>
             <plex-title titulo="Exploración Visual">
@@ -23,33 +23,28 @@
         </header>
 
         <plex-table [columns]="columns" #table="plTable" *ngIf="showListado">
-
             <tr *ngFor="let data of dataSetVisible$ | plSort:table | async" class="selectable"
                 [class.selected]="datoIdSelected === data.id" (click)="onItemSelect(data)">
-
                 <td>
-                    {{ data.fecha | fecha }} {{ data.fecha | hora }}
+                    <plex-label [icon]="data.icon" [titulo]="data.term" case="capitalize">
+                    </plex-label>
                 </td>
-
                 <td>
-                    {{data.term}}
+                    <plex-label [titulo]="data.profesional" case="capitalize"></plex-label>
                 </td>
-
                 <td>
-                    {{ data.profesional }}
+                    <plex-label [titulo]="data.organizacion" case="capitalize"></plex-label>
                 </td>
-
                 <td>
-                    {{ data.organizacion }}
+                    <plex-badge type="info">
+                        {{ data.fecha | fecha }} {{ data.fecha | hora }}
+                    </plex-badge>
                 </td>
-
             </tr>
-
         </plex-table>
-
     </plex-layout-main>
 
-    <plex-layout-sidebar>
+    <plex-layout-sidebar type="invert">
         <ng-container *ngIf="itemSelected">
             <ng-container [ngSwitch]="itemSelected.tipo">
                 <ng-container *ngSwitchCase="'rup'">
@@ -61,7 +56,7 @@
                 </ng-container>
 
                 <ng-container *ngSwitchCase="'cda'">
-                    <plex-title>
+                    <plex-title titulo="Detalle">
                         <plex-button type="danger" (click)="onClose()" size="sm">
                             <plex-icon name="close"></plex-icon>
                         </plex-button>
@@ -70,7 +65,7 @@
                 </ng-container>
 
                 <ng-container *ngSwitchCase="'concepto'">
-                    <plex-title>
+                    <plex-title titulo="Detalle">
                         <plex-button type="danger" (click)="onClose()" size="sm">
                             <plex-icon name="close"></plex-icon>
                         </plex-button>
@@ -90,12 +85,7 @@
                                                    [editFicha]="false" (volver)="onClose();">
                     </app-ficha-epidemiologica-crud>
                 </ng-container>
-
-
-
             </ng-container>
         </ng-container>
-
-
     </plex-layout-sidebar>
 </plex-layout>
diff --git a/src/app/modules/rup/views/huds-timeline/huds-timeline.component.ts b/src/app/modules/rup/views/huds-timeline/huds-timeline.component.ts
@@ -21,35 +21,8 @@ import { HUDSStore } from '../../services/huds.store';
 @Component({
     selector: 'huds-timeline',
     templateUrl: './huds-timeline.component.html',
-    styleUrls: ['../../components/core/_rup.scss'],
-    styles: [`
+    styleUrls: ['../../components/core/_rup.scss', './huds-timeline.scss'],
 
-        .vis-dot {
-            border-color: var(--color);
-        }
-
-        .vis-group.selected {
-            background-color: var(--bg-color);
-        }
-
-        .vis-label.selected {
-            background-color: var(--bg-color);
-        }
-
-        .vis-label {
-            cursor: pointer;
-        }
-
-        .vis-item.vis-dot.relacion {
-            top: -10px!important;
-        }
-
-        .vis-item.vis-range {
-            border-radius: 20px;
-            background-color: var(--color);
-        }
-
-    `],
     encapsulation: ViewEncapsulation.None
 })
 export class HUDSTimelineComponent implements OnInit {
@@ -101,13 +74,7 @@ export class HUDSTimelineComponent implements OnInit {
     };
 
     public columns: IPlexTableColumns[] = [
-        {
-            key: 'fecha',
-            label: 'Fecha Registro',
-            sorteable: true,
-            opcional: false,
-            sort: (a: any, b: any) => a.fecha.getTime() - b.fecha.getTime()
-        },
+
         {
             key: 'term',
             label: 'Registro',
@@ -131,6 +98,14 @@ export class HUDSTimelineComponent implements OnInit {
             opcional: false,
             sort: (a: any, b: any) => a.organizacion.localeCompare(b.organizacion),
             filterBy: (a: any) => a.organizacion
+        },
+        {
+            key: 'fecha',
+            label: 'Fecha Registro',
+            sorteable: true,
+            opcional: false,
+            sort: (a: any, b: any) => a.fecha.getTime() - b.fecha.getTime(),
+            right: true
         }
     ];
 
@@ -180,7 +155,8 @@ export class HUDSTimelineComponent implements OnInit {
                         term: p.prestacion.term,
                         color: p.ambito === 'ambulatorio' ? '#0070cc' : '#ffa900',
                         tipo: p.tipo,
-                        data: p.data
+                        data: p.data,
+                        icon: 'mano-corazon'
                     });
                 });
 
@@ -195,7 +171,8 @@ export class HUDSTimelineComponent implements OnInit {
                         organizacion: p.evoluciones.organizacion,
                         profesional: p.evoluciones.profesional,
                         tipo: 'concepto',
-                        data: p.original
+                        data: p.original,
+                        icon: 'termometro'
                     });
                 });
 
@@ -209,7 +186,8 @@ export class HUDSTimelineComponent implements OnInit {
                         organizacion: p.evoluciones.organizacion,
                         profesional: p.evoluciones.profesional,
                         tipo: 'concepto',
-                        data: p.original
+                        data: p.original,
+                        icon: 'trastorno'
                     });
                 });
 
@@ -223,7 +201,8 @@ export class HUDSTimelineComponent implements OnInit {
                         organizacion: p.evoluciones.organizacion,
                         profesional: p.evoluciones.profesional,
                         tipo: 'concepto',
-                        data: p.original
+                        data: p.original,
+                        icon: 'lupa-ojo'
                     });
                 });
 
@@ -237,7 +216,8 @@ export class HUDSTimelineComponent implements OnInit {
                         organizacion: p.evoluciones.organizacion,
                         profesional: p.evoluciones.profesional,
                         tipo: 'concepto',
-                        data: p.original
+                        data: p.original,
+                        icon: 'pildoras'
                     });
                 });
 
@@ -280,7 +260,7 @@ export class HUDSTimelineComponent implements OnInit {
                 // idPrestacion: i.idPrestacion,
                 color: ultimo.estado === 'resuelto' ? '#00a8e0' : '#ff4a1a',
                 type: 'range',
-                data: p
+                data: { tipo: 'concepto', data: p, group: 'trastornos' }
             });
 
             p.evoluciones.forEach(ev => {
@@ -382,7 +362,7 @@ export class HUDSTimelineComponent implements OnInit {
             // verticalScroll: true,
             type: 'point',
             stack: false,
-            selectable: false,
+            selectable: true,
             // groupHeightMode: 'fixed',
             template: (item, element: HTMLElement, data) => {
                 const group = this.groups.find(g => g.id === data.group);
@@ -560,6 +540,7 @@ interface IDataSet {
     color?: string;
     tipo?: string;
     data?: any;
+    icon?: string;
 }
 
 const filtrarPorRegistros = (prestaciones: IPrestacion[], callback) => {