Skip to content

Commit

Permalink
feat(plex-mininav): refactor componente
Browse files Browse the repository at this point in the history
  • Loading branch information
@JSantarelli
JSantarelli committed Aug 25, 2021
1 parent 2d22533 commit 1166365
Show file tree
Hide file tree
Showing 14 changed files with 229 additions and 211 deletions.
1 change: 0 additions & 1 deletion ...emplates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ export class TeleprestacionesComponent implements OnInit {

ngOnInit() {
this.solicitudes$ = this.solicitudService.getSolicitudes();
this.plex.navbarVisible = false;

// plex-datetime
this.tModel = {
Expand Down
98 changes: 36 additions & 62 deletions src/demo/app/templates/punto-inicio/punto-inicio.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,55 @@
<plex-layout main="{{ sidebarValue }}" resizable="true" [min]="2" [max]="6" [steps]="2">
<plex-layout-main>
<!--<header>
<section span="12" justify class="bg-info">
<div class="ml-3 my-2">
<plex-label icon="medico" size="xl" type="default" titulo="Bienvenido Walter"
subtitulo="¿cómo será tu jornada laboral hoy?">
</plex-label>
</div>
<div>
<plex-button class="ml-2" type="info">Mapa de camas</plex-button>
<plex-button class="ml-2" type="info">Huds</plex-button>
<plex-button class="ml-2" type="info">Inicio Andes</plex-button>
</div>
</section>
</header>-->
<plex-grid cols="12" type="auto">

<!-- Menu Lateral -->
<plex-grid span="1" class="d-flex align-self-start">

<!-- Mininav -->
<plex-mininav [color]="color">
<ul superiores>
<plex-mininav-item *ngFor="let item of menu$ | async" target="{{ item.path }}"
titulo="{{ item.nombre }}" icono="{{ item.icono }}">
</plex-mininav-item>
</ul>
<ul inferiores>
<plex-mininav-item titulo="" target="" icono="logo-youtube"></plex-mininav-item>
</ul>
</plex-mininav>
<plex-title titulo="punto de inicio rup" main></plex-title>
<!-- Mininav -->
<plex-mininav>
<ul sup>
<li plex-mininav-item *ngFor="let item of menu$ | async" target="{{ item.target }}"
titulo="{{ item.nombre }}" icono="{{ item.icono }}">
</li>
</ul>
<ul inf>
<li plex-mininav-item titulo="Navegar por ruteo" icono="logo-youtube">
</li>
</ul>
</plex-mininav>

</plex-grid>
<plex-grid span="11" cols="3" class="align-self-start mr-2">
<!-- Teleprestaciones -->
<section span="1" class="align-self-start mr-2">
<plex-teleprestaciones>
<plex-grid cols="3" class="align-self-start mr-2">
<!-- Teleprestaciones -->
<section span="1" class="align-self-start mr-2">
<plex-teleprestaciones>

</plex-teleprestaciones>
</section>
</plex-teleprestaciones>
</section>

<!-- Listado -->
<section span="2" id="ancla">
<plex-punto-inicio-main (eventoSidebar)="recibirSidebar($event)">
</plex-punto-inicio-main>
</section>
</plex-grid>
<!-- Listado -->
<section span="2" id="ancla">
<plex-punto-inicio-main (eventoSidebar)="recibirSidebar($event)">
</plex-punto-inicio-main>
</section>
</plex-grid>

</plex-layout-main>
<plex-layout-sidebar type="invert">

<plex-title titulo="Buscar" main>
<plex-button size="sm" type="link" label="anchors/querySelector" routerLink="" fragment="ancla">
</plex-button>
<plex-button type="danger" icon="close" size="sm" (click)="contraerSidebar()"></plex-button>
</plex-title>

<!-- Mininav -->
<plex-mininav>
<ul superiores>
<plex-mininav-item *ngFor="let item of menu$ | async" target="target" titulo="{{ item.nombre }}"
icono="{{ item.icono }}">
</plex-mininav-item>
<ul sup>
<li plex-mininav-item *ngFor="let item of menu$ | async" target="{{ item.target }}"
titulo="{{ item.nombre }}" tooltip="{{ item.target }}" icono="{{ item.icono }}">
</li>
</ul>
<ul inferiores>
<plex-mininav-item titulo="" target="target" icono="logo-youtube"></plex-mininav-item>
<ul inf>
<li plex-mininav-item titulo="" link="misConsultas" titulo="Navegar por ruteo" icono="logo-youtube">
</li>
</ul>
</plex-mininav>

<plex-title size="sm" titulo="subtitulo 1"></plex-title>

<plex-title anchor="miHuds" size="sm" titulo="miHuds"></plex-title>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
Expand All @@ -93,25 +73,19 @@
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,</p>
<plex-title id="target" size="sm" titulo="id=target"></plex-title>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,</p>
<plex-title #ancla size="sm" titulo="#ancla"></plex-title>
<plex-title anchor="misConsultas" size="sm" titulo="id=misConsultas"></plex-title>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,</p>
<plex-title #target size="sm" titulo="Target"></plex-title>
<plex-title size="sm" titulo="subtitulo 1"></plex-title>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,</p>
<plex-title id="ancla" name="target" size="sm" titulo="Ancla"></plex-title>
<plex-title size="sm" titulo="subtitulo 2"></plex-title>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
Expand Down
1 change: 0 additions & 1 deletion src/demo/app/templates/punto-inicio/punto-inicio.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,6 @@ export class PuntoInicioComponent implements OnInit {
};
this.menu$ = this.menuService.getMenues();
this.solicitudes$ = this.solicitudService.getSolicitudes();
this.plex.navbarVisible = false;

// plex-float
this.tModel = { valor: null };
Expand Down
3 changes: 2 additions & 1 deletion src/demo/app/templates/service/menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export class Menu {
semanticTag: String;
icono: string;
color: string;
path: string;
target: string;
link: string;
outlet: string;
}
21 changes: 14 additions & 7 deletions src/demo/app/templates/service/mock-menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ export const MENU: Menu[] = [
tipo: 'info',
semanticTag: 'solicitud',
icono: 'historial',
path: 'ancla',
target: 'miHuds',
link: 'miHuds',
color: '#0070cc',
outlet: 'listado',
},
Expand All @@ -17,7 +18,8 @@ export const MENU: Menu[] = [
tipo: 'custom',
semanticTag: 'solicitud',
icono: 'mano-corazon',
path: 'misConsultas',
target: 'misConsultas',
link: 'misConsultas',
color: '#0070cc',
outlet: 'listado',
},
Expand All @@ -27,7 +29,8 @@ export const MENU: Menu[] = [
tipo: 'info',
semanticTag: 'registro',
icono: 'documento-cursor',
path: 'misDocumentos',
target: 'misDocumentos',
link: 'misDocumentos',
color: '#0070cc',
outlet: 'listado',
},
Expand All @@ -37,7 +40,8 @@ export const MENU: Menu[] = [
tipo: 'info',
semanticTag: 'solicitud',
icono: 'turno-bold',
path: 'misTurnos',
target: 'misTurnos',
link: 'misTurnos',
color: '#0070cc',
outlet: 'listado',
},
Expand All @@ -47,7 +51,8 @@ export const MENU: Menu[] = [
tipo: 'info',
semanticTag: 'otro',
icono: 'mail',
path: 'misMensajes',
target: 'misMensajes',
link: 'misMensajes',
color: '#0070cc',
outlet: 'listado',
},
Expand All @@ -57,7 +62,8 @@ export const MENU: Menu[] = [
tipo: 'info',
semanticTag: 'solicitud',
icono: 'hospital',
path: 'misOrganizaciones',
target: 'misOrganizaciones',
link: 'misOrganizaciones',
color: '#0070cc',
outlet: 'listado',
},
Expand All @@ -67,7 +73,8 @@ export const MENU: Menu[] = [
tipo: 'info',
semanticTag: 'solicitud',
icono: 'medico',
path: 'miEquipo',
target: 'miEquipo',
link: 'miEquipo',
color: '#0070cc',
outlet: 'listado',
},
Expand Down
24 changes: 13 additions & 11 deletions src/demo/app/templates/template-inicio.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,19 @@
</section>
</plex-layout-main>
<plex-layout-sidebar type="invert">

<plex-grid class="h-100" justify="center" type="full" cols="2" size="lg">
<plex-card *ngFor="let temp of templates" mode="{{ temp.mode }}" selectable="true" type="{{ temp.type }}"
(click)="irTemplate(temp.url)" aligned="center" size="md">
<plex-label direction="column" size="lg" titulo="{{ temp.titulo }}" subtitulo="{{ temp.subtitulo }}"
icon="{{ temp.icon }}">
</plex-label>
<plex-button class="mt-4" type="info" size="md" label="Navegar template" routerLink="{{ temp.url }}">
</plex-button>
</plex-card>
</plex-grid>
<section class="h-75" align="center">
<plex-grid class="h-25" type="full" size="lg">
<plex-card *ngFor="let temp of templates" mode="{{ temp.mode }}" selectable="true"
type="{{ temp.type }}" (click)="irTemplate(temp.url)" aligned="center" size="md">
<plex-label direction="column" size="lg" titulo="{{ temp.titulo }}" subtitulo="{{ temp.subtitulo }}"
icon="{{ temp.icon }}">
</plex-label>
<plex-button class="mt-4" type="info" size="md" label="Navegar template"
routerLink="{{ temp.url }}">
</plex-button>
</plex-card>
</plex-grid>
</section>

</plex-layout-sidebar>
</plex-layout>
9 changes: 9 additions & 0 deletions src/demo/app/templates/template-inicio.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,15 @@ export class TemplateInicioComponent implements OnInit {
icon: 'view-day',
selected: false,
},
{
titulo: 'Template puntos de inicio',
subtitulo: 'Agrupamiento de información en acordiones',
mode: 'filled',
type: 'dark',
url: 'punto-inicio',
icon: 'adjust',
selected: false,
},
];

constructor(private router: Router, private route: ActivatedRoute) {
Expand Down
20 changes: 20 additions & 0 deletions src/lib/css/layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,26 @@ plex-layout {
}

// mininav
plex-layout-main {
div.plex-box-content {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: min-content 1fr;
grid-gap: .5rem;

> plex-mininav {
grid-column: 1;
grid-row: 2 / -1;
}

div.plex-content {
grid-column: 2;
grid-row: 1 / -1;
}
}
}


plex-layout-sidebar {
div.plex-box-content {
display: grid;
Expand Down
Loading

0 comments on commit 1166365

Please sign in to comment.