Maquetado formulario terapéutico. Versión 1.1.30 para Andesicon

package.json

@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@agm/core": "3.0.0-beta.0",
-    "@andes/icons": "^1.1.28",
+    "@andes/icons": "^1.1.30",
     "@andes/match": "^1.1.12",
     "@andes/plex": "^8.0.12",
     "@angular-eslint/eslint-plugin": "12.3.1",

src/app/app.module.ts

@@ -54,6 +54,7 @@ import { AddformTerapeuticoComponent } from './components/formularioTerapeutico/
 import { ArbolItemComponent } from './components/formularioTerapeutico/arbolItem.component';
 import { FormTerapeuticoDetallePageComponent } from './components/formularioTerapeutico/form-terapeutico-detalle.component';
 import { FormTerapeuticoComponent } from './components/formularioTerapeutico/formTerapeutico.component';
+import { CrearNuevoComponent } from './components/formularioTerapeutico/crear-nuevo/crear-nuevo.component';
 // Componentes
 import { InicioComponent } from './components/inicio/inicio.component';
 import { CommonNovedadesService } from './components/novedades/common-novedades.service';
@@ -336,6 +337,7 @@ registerLocaleData(localeEs, 'es');
         FormTerapeuticoDetallePageComponent,
         AddformTerapeuticoComponent,
         PucoComponent,
+        CrearNuevoComponent,
 
         // Campañas Salud
         CampaniaSaludComponent,

src/app/components/formularioTerapeutico/crear-nuevo/crear-nuevo.component.html

@@ -0,0 +1,25 @@
+<plex-layout [main]="8">
+    <plex-layout-main>
+        <header>
+            <plex-title titulo="CREAR NUEVO">
+                <plex-button label="GUARDAR" type="success" size="sm"></plex-button>
+               <plex-button label="VOLVER" type="danger" size="sm" class="ml-1"></plex-button>
+            </plex-title>
+        </header>
+
+        <plex-wrapper>
+            <plex-select label="Sistema" name="sistema" [data]="opciones" [(ngModel)]="sistemas"></plex-select>
+            <!-- <plex-select label="Función" name="grupoFarmacologico" [data]="grupos" [(ngModel)]="grupoFarmacologico"></plex-select>
+            <plex-select label="Grupo farmacológico" name="grupoFarmacologico" [(ngModel)]="grupoFarmacologico"></plex-select>
+            <plex-text label="Medicamento" name="medicamento" [(ngModel)]="medicamento"></plex-text>
+            <plex-text label="Concepto Snomed" name="conceptoSnomed" [(ngModel)]="conceptoSnomed"></plex-text>
+            <plex-text label="Especialidad" name="funcion" [data]="opciones" [(ngModel)]="funcion"></plex-text>
+            <plex-text label="Carro de emergencia" name="grupoFarmacologico" [data]="grupos" [(ngModel)]="grupoFarmacologico"></plex-text>
+            <plex-text label="Requisito deprescripción" name="medicamento" [(ngModel)]="medicamento"></plex-text>
+            <plex-text label="Indicacones" name="conceptoSnomed" [(ngModel)]="conceptoSnomed"></plex-text>    
+            <plex-text label="Recomendación de uso" name="conceptoSnomed" [(ngModel)]="conceptoSnomed"></plex-text>    -->
+
+        </plex-wrapper>
+
+
+    </plex-layout-main>

src/app/components/formularioTerapeutico/crear-nuevo/crear-nuevo.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CrearNuevoComponent } from './crear-nuevo.component';
+
+describe('CrearNuevoComponent', () => {
+  let component: CrearNuevoComponent;
+  let fixture: ComponentFixture<CrearNuevoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CrearNuevoComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CrearNuevoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/formularioTerapeutico/crear-nuevo/crear-nuevo.component.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-crear-nuevo',
+  templateUrl: './crear-nuevo.component.html',
+  styleUrls: ['./crear-nuevo.component.css']
+})
+export class CrearNuevoComponent implements OnInit {
+
+
+
+public sistemas: any;
+
+public opciones = [
+    { id: 'respiratorio', nombre: 'Respiratorio' },
+    { id: 'vacunas', nombre: 'Vacunas' },
+    { id: 'gastrointestinal', nombre: 'Gastrointestinal' },
+    { id: 'cardiovascular', nombre: 'Cardiovascular' },
+    { id: 'genitourinario', nombre: 'Genitourinario' },
+    { id: 'antineoplasicos-e-inmunosupresores', nombre: 'Antineoplásicos e inmunosupresores' },
+    { id: 'endocrino', nombre: 'Endocrino' },
+    { id: 'anticonceptivos', nombre: 'Anticonceptivos' },
+    { id: 'anestesicos', nombre: 'Anestésicos' },
+    { id: 'emergencias-toxicologicas', nombre: 'Emergencias toxicológicas' },
+    { id: 'analgesicos-puros', nombre: 'Analgésicos puros' },
+    { id: 'nervioso-central', nombre: 'Nervioso central' },
+    { id: 'sanguineo', nombre: 'Sanguíneo' },
+    { id: 'contraste-radiologicos', nombre: 'Contraste radiológicos' },
+    { id: 'rayos', nombre: 'Rayos' },
+    { id: 'antinflamatorios', nombre: 'Antiinflamatorios' },
+    { id: 'bloqueantes-neuromusculares', nombre: 'Bloqueantes neuromusculares' },
+    { id: 'oftalmologico', nombre: 'Oftalmológico' },
+    { id: 'antiinfecciosos', nombre: 'Antiinfecciosos' },
+    { id: 'metabolismo', nombre: 'Metabolismo' },
+    { id: 'antisepticos-y-desinfectantes', nombre: 'Antisépticos y desinfectantes' }
+];
+
+
+
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/components/formularioTerapeutico/form-terapeutico-detalle.html

@@ -1,51 +1,24 @@
-<header>
-    <!--Busqueda de Pacientes-->
-    <div class="row">
-        <div class="clearfix col-12">
-            <div class="page-title"> Detalle Medicamento</div>
-        </div>
-    </div>
-</header>
-<div class="badgeContainer">
-    <plex-badge type="info" *ngIf="medicamento?.concepto?.term.split(', ').length >= 2">
-        {{ medicamento?.concepto?.term.split(', ')[1] }}</plex-badge>
-    <plex-badge type="success" *ngIf="medicamento?.concepto?.term.split(', ').length >= 3">
-        {{ medicamento?.concepto?.term.split(', ')[2] }}</plex-badge>
-</div>
-<div>
-    <div class="titulo-prefix">Medicamento</div>
-    <div class="titulo-principal md" *ngIf="medicamento?.concepto?.term.split(', ').length >= 1">
-        {{ medicamento?.concepto?.term.split(', ')[0] }}</div>
-    <div class="titulo-secundario" *ngIf="medicamento?.especialidades.length >= 0">{{medicamento?.especialidades}}</div>
-</div>
-<div>
-    <div *ngIf="medicamento?.indicaciones !== ''">
-        <div class="titulo-prefix">Indicaciones</div>
-        <div class="andes-texto">{{medicamento?.indicaciones}}</div>
-    </div>
-</div>
-<div>
-    <div *ngIf="medicamento.comentario && medicamento?.comentario !== ''">
-        <div class="titulo-prefix">Comentario</div>
-        <div class="andes-texto">{{medicamento?.comentario}}</div>
-    </div>
-</div>
-<div class="andes-container-secundario">
-    <div class="andes-container-bloque">
-        <div class="titulo-prefix">Carro de Emergencia</div>
-        <div class="andes-texto" *ngIf="medicamento?.carroEmergencia">Si</div>
-        <div class="andes-texto" *ngIf="medicamento?.carroEmergencia === ''">No</div>
-    </div>
-    <div class="andes-container-bloque">
-        <div *ngIf="medicamento?.nivelComplejidad !== ''">
-            <div class="titulo-prefix">Complejidad</div>
-            <div class="andes-texto">{{medicamento?.nivelComplejidad}}</div>
-        </div>
-    </div>
-</div>
-<div class="">
-    <div *ngIf="medicamento.requisitos  && medicamento?.requisitos !== ''">
-        <div class="titulo-prefix">Requisitos</div>
-        <div class="andes-texto"> {{medicamento?.requisitos}}</div>
-    </div>
-</div>
+
+<plex-title titulo="DETALLE" size="lg">
+<plex-button type="danger" tooltip="Eliminar" icon="delete" size="sm"></plex-button>
+<plex-button type="warning" tooltip="Editar" icon="pencil" size="sm" class="ml-1"></plex-button>
+<plex-button type="danger" tooltip="Cerrar" icon="close" size="sm" class="ml-1"></plex-button>
+</plex-title>
+
+<plex-detail size="md">
+    <plex-icon type="" name="pildoras"></plex-icon>
+       <plex-badge class="sistema-chip">SISTEMA GASTROINTESTINAL</plex-badge>
+     <div title>Nombre del medicamento</div>
+     <plex-label titulo="Función" subtitulo="Alteradores de la motilidad intestinal"></plex-label>
+     <plex-label titulo="Grupo farmacológico" subtitulo="Anticolinérgicos"></plex-label>
+     <plex-label titulo="Concepto snomed" subtitulo="317117001"></plex-label>
+     <plex-label titulo="Especialidad" subtitulo="MG"></plex-label>
+     <plex-label titulo="Carro de emergencia" subtitulo="Sin información"></plex-label>
+</plex-detail>
+
+<plex-title titulo="REQUISITO DE PRESCRIPCIÓN" size="sm"></plex-title>
+<!--SI NO HAY DATOS --> <p class="">Sin información</p>
+<plex-title titulo="INDICACIONES" size="sm"></plex-title>
+<!--SI NO HAY DATOS --> <p class="">Sin información</p>
+<plex-title titulo="RECOMENDACIÓN DE USO" size="sm"></plex-title>
+<!--SI NO HAY DATOS --> <p class="">Sin información</p>                  

src/app/components/formularioTerapeutico/form-terapeutico-detalle.scss

@@ -110,4 +110,20 @@ $celeste-claro: #f4feff;
 
     .badgeContainer{
         font-size:1.2em;
+    }
+
+    .sistema-chip {
+        ::ng-deep .badge {
+            background-color: #0443BF;
+            border:none;
+            color: #FFFFFF;
+            font-size: 11px;
+            font-weight: bold;
+            border-radius: 13px;
+            width: 161px;
+            height: 23px;
+            line-height:23px;
+            text-align: center;
+            padding: 0;
+        }
     }

src/app/components/formularioTerapeutico/formTerapeutico.component.ts

@@ -1,76 +1,97 @@
-import { Component, OnInit, Input, ViewEncapsulation, Output, EventEmitter, HostBinding, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Plex } from '@andes/plex';
 import { Auth } from '@andes/auth';
 import { Router } from '@angular/router';
 import { FormTerapeuticoService } from './../../services/formTerapeutico/formTerapeutico.service';
-import { ArbolItemComponent } from './arbolItem.component';
-
 
 @Component({
     selector: 'app-formTerapeutico',
-    templateUrl: './formTerapeutico.html'
+    templateUrl: './formTerapeutico.html',
+    styleUrls: ['./formTerapeutico.scss']
 })
 export class FormTerapeuticoComponent implements OnInit {
-    @ViewChild('arbol', { static: false }) arbolHijo: ArbolItemComponent;
-    @HostBinding('class.plex-layout') layout = true;
-    @Input() indice: any;
-    @Input() deep: Number;
-    public indices;
-    private titulo;
-    private padres: any[];
-    private hijos: any[];
-    public detalleMedicamento: any;
-    public datosArbol: any;
-    public newMedicamento: any;
-    constructor(private router: Router,
-                private plex: Plex, public auth: Auth,
-                public servicioFormTerapeutico: FormTerapeuticoService) { }
-
-
-    ngOnInit() {
-        this.servicioFormTerapeutico.get({ tree: 1, root: 1 }).subscribe((data: any) => {
-            this.indices = data;
-
-        });
-    }
-
-    detallesMedicamento(data) {
-        this.detalleMedicamento = data;
-        this.datosArbol = null;
-    }
-
-    recibeMedicamenteAgregar(data) {
-        this.datosArbol = data;
-        this.detalleMedicamento = null;
-    }
-
-    recibeHijos(data) {
-        return data;
-    }
 
-    agregar(data) {
-        if (data.carroEmergencia === true) {
-            data.carroEmergencia = 'SI';
-        } else {
-            data.carroEmergencia = '';
+    public columnas = [
+        {
+            key: 'Sistema',
+            label: 'Sistema'
+        },
+        {
+            key: 'funcion',
+            label: 'Función'
+        },
+        {
+            key: 'grupoFarmacologico',
+            label: 'Grupo Farmacológico'
+        },
+        {
+            key: 'nombre',
+            label: 'Nombre'
+        },
+        {
+            key: 'conceptoSnomed',
+            label: 'Concepto SNOMED'
         }
-        data.idpadre = this.datosArbol.indice._id;
-
-        this.servicioFormTerapeutico.post(data).subscribe((salida: any) => {
-            this.plex.toast('success', 'El medicamento se agrego correctamente', 'Información', 3000);
-            this.datosArbol.hijos.push(salida);
-            // this.idMedicamentoPadre.hijos = [this.idMedicamentoPadre.hijos];
-
-        });
-    }
-
-    plegar() {
-        this.servicioFormTerapeutico.get({ tree: 1, root: 1 }).subscribe((data: any) => {
-            this.indices = data;
-
-        });
-    }
-
-
+    ];
+
+    public sistemas = [
+        { id: 'respiratorio', icon: 'pulmones-outline' },
+        { id: 'vacunas', icon: 'vacuna' },
+        { id: 'gastrointestinal', icon: 'gastrointestinal-outline', },
+        { id: 'cardiovascular', icon: 'corazon-outline', },
+        { id: 'genitourinario', icon: 'riñones-outline' },
+        { id: 'antineoplasicos-e-inmunosupresores', icon: 'antineoplasicos' },
+        { id: 'endocrino', icon: 'garganta' },
+        { id: 'anticonceptivos', icon: 'aco-outline' },
+        { id: 'anestesicos', icon: 'anestesia' },
+        { id: 'emergencias-toxicologicas', icon: 'toxi-emer' },
+        { id: 'analgesicos-puros', icon: 'frasco-outline' },
+        { id: 'nervioso-central', icon: 'sist-nervioso' },
+        { id: 'sanguineo', icon: 'uni-gota' },
+        { id: 'contraste-radiologicos', icon: 'rayos' },
+        { id: 'antinflamatorios', icon: 'pildora' },
+        { id: 'bloqueantes-neuromusculares', icon: 'bloqueante' },
+        { id: 'oftalmologico', icon: 'oftalmologico' },
+        { id: 'antiinfecciosos', icon: 'infeccioso' },
+        { id: 'metabolismo', icon: 'metabolismo' },
+        { id: 'antisepticos-y-desinfectantes', icon: 'otro-frasco' },
+
+    ];
+
+    public sistemaSeleccionado = '';
+
+    public funcion = [];
+    public grupoFarmacologico = [];
+    public medicamento = '';
+    public conceptoSnomed = '';
+
+    public opciones = [
+        { id: 'a', nombre: 'alteradores de la motilidad intestinal' },
+        { id: 'b', nombre: 'ablandadores fecales' },
+        { id: 'c', nombre: 'antiulcerosos' },
+        { id: 'd', nombre: 'antieméticos' },
+        { id: 'e', nombre: 'enf inflamatorias intestinales' },
+        { id: 'f', nombre: 'control hemorragia vericeal' },
+        { id: 'g', nombre: 'tratamiento colestasis' }
+    ];
+
+    public grupos = [
+        { id: 'a', nombre: 'anticolinérgicos' },
+        { id: 'b', nombre: 'procinéticos' },
+        { id: 'c', nombre: 'laxantes' },
+        { id: 'd', nombre: 'antidiarreicos' },
+        { id: 'e', nombre: 'antagonistas h2' },
+        { id: 'f', nombre: 'inhibidores de la bomba de protones' },
+        { id: 'g', nombre: 'antiácidos no absorbibles' },
+    ];
+
+    constructor(
+        private router: Router,
+        private plex: Plex,
+        public auth: Auth,
+        public servicioFormTerapeutico: FormTerapeuticoService
+    ) { }
+
+    ngOnInit() { }
 
 }