brainloper-ui 14.0.26 → 14.0.28

package/src/app/modules/brainloper-ui/components/carousel/carousel.component.spec.ts

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

package/src/app/modules/brainloper-ui/components/carousel/carousel.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit, AfterContentInit, ContentChildren, QueryList, ChangeDetectorRef, Input } from '@angular/core';
+import { CarouselItemDirective } from '../../../directives/carousel-item.directive';
+
+@Component({
+  selector: 'app-carousel',
+  templateUrl: './carousel.component.html',
+  styleUrls: ['./carousel.component.scss']
+})
+export class CarouselComponent implements OnInit, AfterContentInit {
+
+  @Input() carouselInterval: number = 0;
+  public sortedCarouselItems: CarouselItemDirective[] = [];
+
+  @ContentChildren(CarouselItemDirective) carouselItems!: QueryList<CarouselItemDirective>;
+
+  constructor(private cdr: ChangeDetectorRef) { }
+
+  ngOnInit(): void { }
+
+  ngAfterContentInit(): void {
+    this.carouselItems.changes.subscribe(() => {
+      this.updateCarouselItems();
+      this.cdr.detectChanges();
+    });
+    this.updateCarouselItems();
+    this.cdr.detectChanges();
+  }
+
+  private updateCarouselItems(): void {
+    this.sortedCarouselItems = this.carouselItems.toArray().sort((a, b) => a.carouselItem - b.carouselItem);
+    console.log('Ítems ordenados:', this.sortedCarouselItems.map(item => item.carouselItem));
+  }
+}

package/src/app/modules/brainloper-ui/components/combos/combos.component.html

@@ -0,0 +1,31 @@
+<div style="display: flex; flex-direction: row; justify-content: space-between">
+  <div class="combo-container">
+
+    <mat-icon
+      class="m-1 icon-information"
+      *ngIf="tooltipDescription"
+      matTooltip="{{tooltipDescription}}"
+      matTooltipPosition="above"
+      #tooltip="matTooltip"
+      (click)="toggleTooltip()"
+      matTooltipClass="custom-tooltip"
+     >info</mat-icon>
+
+    <mat-form-field style="width: 100%" [appearance]="appearance">
+      <mat-label style="text-transform: capitalize">{{
+        configuration.label
+        }}</mat-label>
+      <mat-select [multiple]="checkbox" (selectionChange)="selectedData(control)" [required]="required"
+        [formControl]="control" [disabled]="disabled">
+        <app-select-filter [noResultsMessage]="'No hay resultados'" *ngIf="filter" [placeholder]="'Filter'" [displayMember]="configuration.visibleField"
+          [array]="dataCombos" (filteredReturn)="filteredList = $event">
+        </app-select-filter>
+        <mat-option [value]="data[configuration.selectionField]" *ngFor="let data of filteredList">
+          {{ data[configuration.visibleField] }}
+        </mat-option>
+      </mat-select>
+      <mat-error *ngIf="required">Campo requerido</mat-error>
+    </mat-form-field>
+  </div>
+</div>
+

package/src/app/modules/brainloper-ui/components/combos/combos.component.scss

@@ -0,0 +1,23 @@
+.mat-form-field{
+  width: 100%;
+}
+
+.combo-container{
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.icon-information{
+  cursor: pointer;
+  color: gray;
+}
+
+.mat-icon { font-size: 1.1rem; }
+
+::ng-deep .custom-tooltip {
+  background-color: #fbe870 !important;
+  color: black !important;
+  line-height: 17px !important;
+  font-size: 0.8rem;
+}

package/src/app/modules/brainloper-ui/components/combos/combos.component.spec.ts

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

package/src/app/modules/brainloper-ui/components/combos/combos.component.ts

@@ -0,0 +1,170 @@
+import {
+  Component,
+  OnInit,
+  Input,
+  Output,
+  EventEmitter,
+  SimpleChanges,
+  OnChanges,
+  ViewChild,
+} from '@angular/core';
+import { UntypedFormControl } from '@angular/forms';
+import { HttpService } from '../../../services/http.service';
+import { MatTooltip } from '@angular/material/tooltip';
+@Component({
+  selector: 'combos',
+  templateUrl: './combos.component.html',
+  styleUrls: ['./combos.component.scss'],
+})
+export class CombosComponent implements OnInit, OnChanges {
+  @Input() dataCombos: Array<any>;
+  @Input() additionalData: Array<any>;
+  @Input() configuration: CombosConfiguration;
+  @Input() filter: boolean = false;
+  @Input() checkbox: boolean = false;
+  @Input() required: boolean = false;
+  @Input() disabled: boolean = false;
+  @Input() addFinal: boolean = false;
+  @Input() appearance: any = '';
+  @Input() reloadCombo: EventEmitter<any>;
+  @Input() control: UntypedFormControl = new UntypedFormControl();
+
+  public tooltipDescription: string = null;
+  public tooltipActive: boolean = false;
+
+  @ViewChild('tooltip') tooltip: MatTooltip;
+
+  @Output() changeOption = new EventEmitter<any>();
+  @Output() changeOptionDataComplete = new EventEmitter<any>();
+  @Output() returnDataCombo = new EventEmitter<any>();
+
+  filteredList: Array<any>;
+  constructor(private http: HttpService) {}
+
+  ngOnInit(): void {
+    if (!this.configuration.label) {
+      this.configuration.label = this.configuration.visibleField;
+    }
+
+    this.initData();
+
+    if (this.reloadCombo) {
+      this.reloadCombo.subscribe((res) => {
+        if (res == 'selected') {
+          this.control.setValue(this.configuration.selected);
+        } else {
+          this.initData();
+        }
+      });
+    }
+    this.control.setValue(this.configuration.selected);
+    //console.log(this.configuration)
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.dataCombos && changes?.dataCombos) {
+      this.dataCombos = changes.dataCombos.currentValue;
+      this.filteredList = this.dataCombos.slice();
+    }
+
+    if (this.control && this.control.value) {
+      this.configuration.selected = this.control.value;
+    }
+  }
+
+  initData() {
+    if (this.configuration.urlCombo) {
+      this.getData();
+    } else {
+      if (this.dataCombos) {
+        this.filteredList = this.dataCombos.slice();
+      }
+    }
+  }
+
+  getData() {
+    this.http
+      .getData(this.configuration.urlCombo, this.configuration.urlParams)
+      .subscribe(
+        (res) => {
+          if (res['code'] === 0) {
+            this.dataCombos = res['body'];
+            if (this.additionalData) {
+              if (this.addFinal) {
+                this.dataCombos = this.dataCombos.concat(this.additionalData);
+              } else {
+                this.dataCombos = this.additionalData.concat(this.dataCombos);
+              }
+            }
+            this.returnDataCombo.emit(this.dataCombos);
+            this.filteredList = this.dataCombos.slice();
+          } else {
+            console.log('error en la consulta para datos combo');
+          }
+        },
+        (err) => {
+          console.log(err);
+        }
+      );
+  }
+
+  selectedData($event) {
+    this.findData($event);
+    this.changeOption.emit($event.value);
+  }
+
+  findData($event) {
+    let d = [];
+    if (this.checkbox) {
+      const lookup = new Map(
+        this.dataCombos.map((item) => [
+          item[this.configuration.selectionField],
+          item,
+        ])
+      );
+      for (const id of $event.value) {
+        const foundItem = lookup.get(id);
+        if (foundItem) {
+          d.push(foundItem);
+        }
+      }
+    } else {
+      d = this.dataCombos.find(
+        (x) => x[this.configuration.selectionField] == $event.value
+      );
+    }
+    this.changeOptionDataComplete.emit(d);
+
+    if (this.configuration.fileTooltip && !this.checkbox) {
+      if (d) {
+        this.tooltipDescription = d[this.configuration.fileTooltip];
+        this.tooltipActive = true;
+        setTimeout(() => {
+          this.tooltip.show();
+        }, 50);
+        setTimeout(() => {
+          this.tooltip.hide();
+        }, 10000);
+      } else this.tooltipDescription = null;
+    } else this.tooltipDescription = null;
+  }
+
+  toggleTooltip() {
+    this.tooltipActive = !this.tooltipActive;
+    if (this.tooltipActive) {
+      this.tooltip.show();
+    } else {
+      this.tooltip.hide();
+    }
+  }
+}
+
+interface CombosConfiguration {
+  selectionField?: string;
+  visibleField?: string;
+  urlCombo?: string;
+  urlParams?: any[];
+  label?: string;
+  selected?: any;
+  fileTooltip?: string;
+}

package/src/app/modules/brainloper-ui/components/data-table/data-table.component.html

@@ -0,0 +1,93 @@
+<div class="contenedor-tabla">
+  <app-filters [headerFilters]="headerFilters" (applyFilters)="applyFilters($event)">
+  </app-filters>
+
+  <div style='display: flex; flex-direction: row; justify-content: space-between;  align-items: center;'>
+    <div style='flex:1; font-size: 1rem;'>
+      <strong><p style='margin:0' *ngIf='selectedRows.length>0 && selectedRows.length<2 && configuration.selectable'> {{selectedRows.length}} Seleccionado </p></strong>
+      <strong><p style='margin:0' *ngIf='selectedRows.length>1'> {{selectedRows.length}} Seleccionados </p></strong>
+      <strong><p style='margin:0' *ngIf='selectedRows.length<1 && !configuration.hideTitle'> {{title}} </p></strong>
+    </div>
+
+    <div *ngIf="!configuration.hideFilter" style='flex:3; padding-right: 10px; margin-bottom: 5px;'>
+       <mat-form-field class='filter'>
+        <input type="text" [(ngModel)]='filters' (keyup)='changeFilters()'  matInput placeholder="Filtrar">
+      </mat-form-field>
+    </div>
+
+    <ng-container *ngTemplateOutlet="buttonsTable"></ng-container>
+
+  </div>
+
+ <table class="table_Eter table-hover">
+     <thead class="dark">
+       <tr >
+        <th *ngIf='configuration.selectable' style='justify-content: center;'>
+          <mat-checkbox color='primary' (change)='seletecAllEvent($event)' [(ngModel)]='selectAll' [indeterminate]='indeterminateState'> </mat-checkbox>  </th>
+       <th
+       [class]="column.style?.movil"
+       *ngFor='let column of columns' scope="col"
+       [ngStyle]="column.style"
+       >{{column.label}}</th>
+       <th *ngIf="shouldShowMenu()"></th>
+       </tr>
+     </thead>
+     <tbody class='mat-elevation-z3'>
+
+       <tr style="cursor: pointer;" *ngFor='let row of data' (click)='clickOnRoW(row)' [class]="checkboxs[row[configuration.primaryKey]]?'selected-row':''">
+        <th *ngIf='configuration.selectable' style='justify-content: center;'> <mat-checkbox color='primary' [(ngModel)]='checkboxs[row[configuration.primaryKey]]' (click)='clicked($event)' (change)='selection(row, $event)'> </mat-checkbox>  </th>
+        <th [class]="column.style?.movil" [ngStyle]="column.style" scope="row" *ngFor="let column of columns">
+          <ng-container *ngIf="column.type === 'file' || (column.rules && evaluateRules(row[column.ID], column.rules)); else displayValue">
+              <div (click)="onFileIconClick($event, row[column.ID])">
+                  <i class="fa fa-file" style="cursor:pointer;"></i>
+              </div>
+          </ng-container>
+          <ng-template #displayValue>
+              {{ row[column.ID] }}
+          </ng-template>
+      </th>
+
+        <th *ngIf="shouldShowMenu()" style="display: flex; justify-content: center; align-items: center; overflow: visible;">
+          <mat-icon
+          (click)="showMenu($event)"
+          [matMenuTriggerFor]="menu"
+          matRipple
+          class="menu_more_vert"
+          aria-hidden="false"
+          aria-label="Example delete icon"
+          >more_vert</mat-icon>
+
+          <mat-menu #menu="matMenu">
+            <div *ngFor="let btn of buttonsConfig" >
+              <button *ngIf="btn.condition()" (click)="action(btn.action, row)" mat-menu-item class="d-flex align-items-center w-100" >
+                <i class="fa {{btn.icon}} btn-accion" style="font-size:120%; margin-right: 10px"></i>
+                {{btn.tooltip}}
+              </button>
+            </div>
+
+          </mat-menu>
+        </th>
+
+       </tr>
+
+
+     </tbody>
+
+   </table>
+
+   <div *ngIf='length == 0 && data.length == 0' style="margin-left: 10px;"> <strong>No se encontró información</strong></div>
+
+   <mat-paginator *ngIf="paginatorActive"
+   [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" showFirstLastButtons
+   (page)="changePage($event)"></mat-paginator>
+
+  </div>
+
+<ng-template #buttonsTable let-fontSize="fontSize" let-marginRight="marginRight" style='flex:0.5; display:flex; flex-direction: row; justify-content: flex-end;'>
+  <ng-container *ngFor="let btn of buttonsConfig">
+    <div *ngIf="btn.conditionShowHeader()" (click)="action(btn.action)" matTooltip="{{btn.tooltip}}" matTooltipPosition="above">
+      <i class="fa {{btn.icon}} btn-accion" [ngStyle]="{'font-size': fontSize ? fontSize : '170%', 'margin-right': marginRight ? marginRight : '15px'}"></i>
+    </div>
+  </ng-container>
+</ng-template>
+

package/src/app/modules/brainloper-ui/components/data-table/data-table.component.scss

@@ -0,0 +1,98 @@
+.contenedor-tabla {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.table_Eter {
+    width: 100%;
+    margin-bottom: 4px;
+    color: primary;
+    border-collapse: collapse;
+}
+
+.table_Eter .dark th {
+    color: #fff;
+    background-color: #343a40;
+    border-color: #454d55;
+    text-align: center;
+    vertical-align: middle;
+}
+.table_Eter thead th {
+    vertical-align: bottom;
+    border-bottom: 2px solid #dee2e6;
+}
+
+.table_Eter th, .table_Eter td {
+    padding: 0.75rem;
+    vertical-align: top;
+    border-top: 1px solid #dee2e6;
+}
+th {
+    text-align: inherit;
+}
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
+.btn-accion {
+    cursor: pointer;
+}
+
+
+mat-form-field{
+    padding: 0 !important;
+    width: 100%;
+}
+
+
+.filter{
+    padding: 0;
+    margin-bottom: 10px;
+    width: 100%;
+}
+
+.filter ::ng-deep .mat-form-field-underline{
+    bottom:3px !important;
+}
+
+.filter ::ng-deep .mat-form-field-infix{
+    border: 0 !important;
+}
+
+.filter ::ng-deep .mat-form-field-wrapper{
+    padding: 0;
+}
+
+.filter ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper{
+    padding: 0;
+}
+
+.selected-row {
+  color: #212529;
+  background-color: rgba(0, 0, 0, 0.075);
+}
+
+button:focus {
+  outline: none !important;
+}
+
+
+@media only screen and (max-width: 600px) {
+    .no-movil{
+        display: none;
+    }
+  }
+
+
+::ng-deep .mat-paginator {
+    background:transparent !important;
+}
+
+@media screen and (max-width: 400px){
+
+    .filter{
+        padding: 0;
+        margin-bottom: 40px;
+        width: 70%;
+    }
+  }

package/src/app/modules/brainloper-ui/components/data-table/data-table.component.spec.ts

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