docs(punto-inicio): maquetado para puntos de inicio

src/demo/app/app.module.ts

@@ -12,6 +12,9 @@ import { Plex } from '../../lib/core/service';
 // Services
 import { ServiceDemoSelect } from './select/select.service';
 import { PacienteService } from './templates/service/paciente.service';
+import { AgendaService } from './templates/service/agenda.service';
+import { MenuService } from './templates/service/menu.service';
+import { SolicitudService } from './templates/service/solicitud.service';
 
 // Routes
 import { HomeDemoComponent } from './home/home.component';
@@ -53,7 +56,11 @@ import { SliderDemoComponent } from './slider/slider.component';
 import { ListadoSidebarComponent } from './templates/listado-sidebar/listado-sidebar';
 import { SidebarDetalleComponent } from './templates/listado-sidebar/sidebar/detalle/sidebar-detalle.component';
 import { MainListadoComponent } from './templates/listado-sidebar/main/listado/main-listado.component';
+import { PuntoInicioComponent } from './templates/punto-inicio/punto-inicio.component';
 import { ModalTemplateComponent } from './templates/componentes/plex-modal-template/plex-modal-template';
+import { PuntoInicioMainComponent } from './templates/punto-inicio/punto-inicio-main/punto-inicio-main.component';
+import { PuntoInicioSidebarComponent } from './templates/punto-inicio/punto-inicio-sidebar/punto-inicio-sidebar.component';
+import { DetalleAgendaComponent } from './templates/punto-inicio/punto-inicio-sidebar/detalle-agenda/detalle-agenda.component';
 import { DemoIconComponent } from './icon/icon';
 import { NavbarDemoComponent } from './navbar/navbar';
 import { HelpDemoComponent } from './help/help.component';
@@ -77,6 +84,7 @@ import { InternacionComponent } from './templates/modulos/internacion/internacio
 import { RecursosListadoComponent } from './templates/modulos/internacion/listado/recursos-listado.component';
 import { RecursoDetalleComponent } from './templates/modulos/internacion/sidebar/detalle/recurso-detalle.component';
 
+import { TeleprestacionesComponent } from './templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones';
 
 @NgModule({
     declarations: [
@@ -121,6 +129,10 @@ import { RecursoDetalleComponent } from './templates/modulos/internacion/sidebar
         SliderDemoComponent,
         ListadoSidebarComponent,
         SidebarDetalleComponent,
+        PuntoInicioComponent,
+        DetalleAgendaComponent,
+        PuntoInicioMainComponent,
+        PuntoInicioSidebarComponent,
         MainListadoComponent,
         ModalTemplateComponent,
         // Templates genéricos
@@ -145,7 +157,8 @@ import { RecursoDetalleComponent } from './templates/modulos/internacion/sidebar
         AlignDemoComponent,
         InternacionComponent,
         RecursosListadoComponent,
-        RecursoDetalleComponent
+        RecursoDetalleComponent,
+        TeleprestacionesComponent
     ],
     entryComponents: [
         HeaderPacienteComponent
@@ -161,8 +174,10 @@ import { RecursoDetalleComponent } from './templates/modulos/internacion/sidebar
         appRoutingProviders,
         ServiceDemoSelect,
         PacienteService,
-        CamaService
-
+        CamaService,
+        AgendaService,
+        MenuService,
+        SolicitudService
     ],
     bootstrap: [AppComponent]
 })

src/demo/app/app.routes.ts

@@ -36,6 +36,8 @@ import { SidebarDetalleComponent } from './templates/listado-sidebar/sidebar/det
 import { DemoIconComponent } from './icon/icon';
 import { NavbarDemoComponent } from './navbar/navbar';
 import { ModalTemplateComponent } from './templates/componentes/plex-modal-template/plex-modal-template';
+import { PuntoInicioComponent } from './templates/punto-inicio/punto-inicio.component';
+import { DetalleAgendaComponent } from './templates/punto-inicio/punto-inicio-sidebar/detalle-agenda/detalle-agenda.component';
 import { CardDemoComponent } from './card/card.component';
 import { MpiDetalleComponent } from './templates/modulos/mpi/sidebar/detalle/mpi-detalle.component';
 import { MpiAltaComponent } from './templates/modulos/mpi/main/alta/mpi-alta.component';
@@ -86,6 +88,12 @@ const appRoutes: Routes = [
     { path: 'templates/form', component: TemplateFormComponent },
     { path: 'templates/form-sidebar', component: TemplateBotoneraSidebarComponent },
     { path: 'templates/visualizacion', component: TemplateVisualizacionComponent },
+    {
+        path: 'templates/punto-inicio', component: PuntoInicioComponent,
+        children: [
+            { path: ':id', component: DetalleAgendaComponent }
+        ]
+    },
     { path: 'templates/busqueda', component: TemplateBusquedaComponent },
     { path: 'templates/mpi-maquetado/mpi-alta', component: MpiAltaComponent },
     {

src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.html

@@ -0,0 +1,59 @@
+<!-- Agendas -->
+<plex-tabs>
+    <plex-button type="info" class="ml-2" icon="filter" size="sm" (click)="mostrarFiltros()"></plex-button>
+    <plex-tab label="mis agendas" icon="">
+        <plex-wrapper *ngIf="filtros">
+            <plex-datetime label="Ingrese la fecha" [(ngModel)]="tModel.fechaHora" name="fechaHora" required>
+            </plex-datetime>
+            <plex-select grow="2" [(ngModel)]="modelo1.select" [data]="opciones"
+                         label-field="nombre + ' (' + continente + ')'" label="Seleccione una prestación">
+            </plex-select>
+            <plex-text label="Buscar paciente" [(ngModel)]="templateModel2.nombre" name="nombre">
+            </plex-text>
+        </plex-wrapper>
+        <plex-list height="300px">
+            <plex-item *ngFor="let agenda of agendas$ | async" (click)="selected(agenda)">
+                <plex-icon name="calendario-tilde" type="success"></plex-icon>
+                <plex-label titulo="{{ agenda.horaInicio }} a {{ agenda.horaFin }}"
+                            subtitulo="Duración: {{ duracion }}">
+                </plex-label>
+                <plex-label *ngFor="let profesional of agenda.profesionales" titulo="{{ agenda.tipoPrestaciones }}"
+                            subtitulo="Profesional: {{ profesional.apellido }}, {{ profesional.nombre }}">
+                </plex-label>
+                <plex-badge type="success">{{ agenda.estado }}</plex-badge>
+                <plex-badge *ngFor="let bloque of agenda.bloques" type="info">Pacientes
+                    {{ bloque.restantesDelDia }}/{{ bloque.accesoDirectoDelDia }}
+                </plex-badge>
+            </plex-item>
+        </plex-list>
+    </plex-tab>
+    <plex-tab label="todas las agendas" icon="">
+    </plex-tab>
+</plex-tabs>
+
+<hr>
+
+<!-- Pacientes -->
+<plex-tabs>
+    <plex-button type="success" type="sm" label="paciente sin turno"></plex-button>
+    <plex-tab label="consultas realizadas">
+        <div slider>
+            <plex-grid type="auto" cols="4">
+                <ng-container *ngFor="let paciente of pacientes$ | async">
+                    <plex-card aligned="center" size="md" type="default" [selected]="paciente.selected"
+                               (click)="selectedPaciente(paciente)">
+                        <plex-detail size="xs" direction="column">
+                            <img src="{{ paciente.foto }}">
+                            <plex-label direction="column" titulo="{{ paciente.nombre }}"
+                                        subtitulo="{{ paciente.documento }}" tooltip="{{ paciente.nombre }}">
+                            </plex-label>
+                        </plex-detail>
+                    </plex-card>
+                </ng-container>
+            </plex-grid>
+        </div>
+    </plex-tab>
+    <plex-tab label="consultas pendientes">
+    </plex-tab>
+    <plex-button type="info" class="ml-2" label="ver listado completo" size="sm"></plex-button>
+</plex-tabs>

src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.ts

@@ -0,0 +1,143 @@
+import { Component, OnInit } from '@angular/core';
+import { AgendaService } from './../../service/agenda.service';
+import { Agenda } from './../../service/agenda';
+import { PacienteService } from './../../service/paciente.service';
+import { Paciente } from './../../service/paciente';
+import { Plex } from './../../../../../lib/core/service';
+import { Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { EventEmitter, Output } from '@angular/core';
+
+@Component({
+    selector: 'plex-punto-inicio-main',
+    templateUrl: './punto-inicio-main.component.html',
+})
+export class PuntoInicioMainComponent implements OnInit {
+
+    sidebarValue = 9;
+    filtros = false;
+    @Output() eventoSidebar = new EventEmitter<number>();
+
+    agendas$: Observable<Agenda[]>;
+    pacientes$: Observable<Paciente[]>;
+    selectedId: string;
+
+    public duracion = '1 hs. 34 min.';
+    public plex: Plex;
+    public tModel: any;
+    public opciones: any[];
+    public options: any[];
+    public modelo1 = { select: null };
+    public modelo2 = {
+        select: null,
+        soloLectura: false,
+        selectMultiple: null
+    };
+    // public prueba = '';
+    public templateModel2: any;
+    public modelo: any;
+
+    public showModal = false;
+
+    foco = 'main';
+    public prueba = '';
+    public cambio = '';
+
+    updateMaxHora() {
+        this.tModel.minHora = moment().add(30, 'minutes').add(1, 'days');
+    }
+
+    horaPlus() {
+        return moment(this.tModel.hora).add(30, 'minutes');
+    }
+
+    onChange() {
+        this.plex.info('success', 'Este cartel se demoro un segundo en aparecer después de escribir.');
+    }
+
+    constructor(
+        private agendaService: AgendaService,
+        private pacienteService: PacienteService,
+        private router: Router,
+    ) { }
+
+    ngOnInit() {
+
+        // plex-datetime
+        this.tModel = {
+            fechaHora: null,
+            fecha: null,
+            hora: null,
+            horados: null,
+            disabled: false,
+            min: new Date(1970, 0, 1),
+            minHora: moment().add(30, 'minutes'),
+            maxHora: moment().add(180, 'minutes'),
+            fechaDecounce: new Date(1970, 0, 1),
+        };
+
+        // plex-float
+        this.tModel = { valor: null };
+
+        // Radio
+        this.options = [
+            {
+                label: 'todas',
+                key: 1,
+            },
+            {
+                label: 'mías',
+                key: 2,
+            },
+        ];
+
+        // plex-select
+        this.opciones = [{
+            id: 1,
+            nombre: 'Consulta de medicina general',
+            continente: 'Prestación',
+        },
+        {
+            id: 2,
+            nombre: 'Exámen médico del adulto',
+            continente: 'Prestación',
+        },
+        {
+            id: 3,
+            nombre: 'Consulta de niño sano',
+            continente: 'Prestación',
+        }];
+
+        this.modelo1.select = this.modelo2.select = this.opciones[1];
+
+        // plex-text
+        this.templateModel2 = { nombre: null, min: 10, max: 15 };
+
+        // plex-bool
+        this.modelo = { checkbox: false, slide: false };
+
+        this.agendas$ = this.agendaService.getAgendas();
+        this.pacientes$ = this.pacienteService.getPacientes();
+    }
+
+    enviarSidebar() {
+        this.eventoSidebar.emit(this.sidebarValue);
+        this.sidebarValue = 8;
+    }
+
+    selected(agenda) {
+        this.selectedId = agenda.id;
+        this.router.navigate(['templates', 'punto-inicio', this.selectedId]);
+        this.enviarSidebar();
+    }
+
+    selectedPaciente(paciente) {
+        this.selectedId = paciente.id;
+        this.router.navigate(['templates', 'punto-inicio', this.selectedId]);
+        this.enviarSidebar();
+    }
+
+    mostrarFiltros() {
+        this.filtros = !this.filtros;
+    }
+}

src/demo/app/templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.html

@@ -0,0 +1,20 @@
+<plex-title size="sm" titulo="Teleprestaciones"></plex-title>
+<plex-list>
+    <plex-item *ngFor="let solicitud of solicitudes$ | async">
+        <plex-label icon="{{ solicitud.organizacionId === 1 ? 'hospital' : 'hombre-caminando' }}" size="lg"
+                    type="default" titulo="{{ solicitud.unidadOrganizativa }}" subtitulo="{{ solicitud.servicio }}">
+        </plex-label>
+        <plex-label icon="paciente" size="sm" type="default"
+                    titulo="{{ solicitud.paciente.nombre }} {{ solicitud.paciente.apellido }}"
+                    subtitulo="{{ solicitud.paciente.documento }}">
+        </plex-label>
+        <plex-label size=" sm" icon="medico" direction="row" type="info" titulo="{{ solicitud.profesionalOrigen }}"
+                    subtitulo="{{ solicitud.prestacionOrigen }}">
+        </plex-label>
+        <plex-badge type="info">{{ solicitud.organizativaId != 1 ? 'solicitud' : 'interconsulta' }}
+        </plex-badge>
+        <plex-button size="sm" type="info" icon="eye"></plex-button>
+        <plex-button size="sm" type="info" icon="historial"></plex-button>
+        <plex-button size="sm" type="warning" icon="documento-lapiz"></plex-button>
+    </plex-item>
+</plex-list>