brainloper-ui 14.0.27 → 14.0.28

package/src/app/app.module.ts

@@ -0,0 +1,36 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormsModule } from '@angular/forms';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import { ReactiveFormsModule } from '@angular/forms';
+import { BrainloperUiModule } from './modules/brainloper-ui/brainloper-ui.module';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { AuthInterceptorService } from './auth-interceptor.service';
+import { CarouselItemDirective } from './modules/directives/carousel-item.directive';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    BrainloperUiModule,
+    FormsModule,
+    HttpClientModule,
+    ReactiveFormsModule,
+    NgbModule
+  ],
+  providers: [
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: AuthInterceptorService,
+      multi: true
+    }
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

package/src/app/auth-interceptor.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthInterceptorService } from './auth-interceptor.service';
+
+describe('AuthInterceptorService', () => {
+  let service: AuthInterceptorService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AuthInterceptorService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/app/auth-interceptor.service.ts

@@ -0,0 +1,42 @@
+import { HttpEvent, HttpHandler, HttpRequest } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthInterceptorService {
+
+  constructor() { }
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<Object>> {
+    const token: string = '394C4A98-E56D-442C-B0B2-C22C1CC35A99';
+    let request = req;
+    request.headers.set('Access-Control-Allow-Origin', '*')
+
+    if (!environment.production) {
+      request = this.addTokenHeader(request, token);
+    }
+
+
+    return next.handle(request).pipe(
+      catchError((err) => {
+        let error = err;
+        error['message'] = 'Sesión finalizada, por favor inicie sesión';
+        return throwError(error);
+      })
+    );
+  }
+
+  private addTokenHeader(request: HttpRequest<any>, token: string) {
+    return request.clone({
+      setHeaders: {
+        authorization: `${token}`,
+      },
+
+    });
+
+  }
+}

package/src/app/modules/brainloper-ui/brainloper-ui.module.ts

@@ -0,0 +1,166 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+/** @material modules */
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatListModule } from '@angular/material/list';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatTreeModule } from '@angular/material/tree';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+
+
+const Material = [
+  MatSlideToggleModule,
+  MatProgressBarModule,
+  MatRippleModule,
+  MatBottomSheetModule,
+  MatChipsModule,
+  MatTreeModule,
+  MatButtonModule,
+  MatButtonToggleModule,
+  MatBadgeModule,
+  MatIconModule,
+  MatProgressSpinnerModule,
+  MatToolbarModule,
+  MatSidenavModule,
+  MatMenuModule,
+  MatListModule,
+  MatDividerModule,
+  MatGridListModule,
+  MatExpansionModule,
+  MatTabsModule,
+  MatCardModule,
+  MatStepperModule,
+  MatFormFieldModule,
+  MatInputModule,
+  MatSelectModule,
+  MatAutocompleteModule,
+  MatCheckboxModule,
+  MatRadioModule,
+  MatDatepickerModule,
+  MatTooltipModule,
+  MatSnackBarModule,
+  MatDialogModule,
+  MatTableModule,
+  MatSortModule,
+  MatPaginatorModule,
+  MatSliderModule,
+  MatNativeDateModule
+];
+
+/** end @material mdoules */
+
+/** @Bootstrap module */
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+/** end @Bootstrap module */
+
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+import { TableModalComponent } from './components/data-table/table-modal/table-modal.component';
+import { CombosComponent } from './components/combos/combos.component';
+import { HttpService } from '../services/http.service';
+//import { MaterialFileInputModule } from 'ngx-material-file-input';
+import { LoadingComponent } from '../services/loading/loading.component';
+
+import { LottieModule } from 'ngx-lottie';
+import player from 'lottie-web';
+import { GeneratePdfComponent } from './components/report/generate-pdf/generate-pdf.component';
+import { TemplateFuelComponent } from './components/report/template-fuel/template-fuel.component';
+import { BreadCrumbComponent } from './components/bread-crumb/bread-crumb.component';
+import { RouterModule } from '@angular/router';
+import { ButtonIconComponent } from './components/buttons/button-icon/button-icon.component';
+import { CarouselComponent } from './components/carousel/carousel.component';
+import { FiltersComponent } from './components/filters/filters.component';
+import { DataTableComponent } from './components/data-table/data-table.component';
+import { FileInputComponent } from './components/file-input/file-input.component';
+import { ButtonLabelComponent } from './components/buttons/button-label/button-label.component';
+import { SelectFilterComponent } from './components/select-filter/select-filter.component';
+import { CarouselItemDirective } from '../directives/carousel-item.directive';
+
+export function playerFactory() {
+  return player;
+}
+
+
+@NgModule({
+    declarations: [
+        DataTableComponent,
+        TableModalComponent,
+        CombosComponent,
+        FileInputComponent,
+        LoadingComponent,
+        GeneratePdfComponent,
+        TemplateFuelComponent,
+        BreadCrumbComponent,
+        ButtonLabelComponent,
+        ButtonIconComponent,
+        CarouselComponent,
+        FiltersComponent,
+        SelectFilterComponent,
+        CarouselItemDirective
+    ],
+    imports: [
+        CommonModule,
+        MatButtonModule,
+        Material,
+        NgbModule,
+        FormsModule,
+        ReactiveFormsModule,
+        HttpClientModule,
+        LottieModule.forRoot({ player: playerFactory }),
+        RouterModule.forRoot([]),
+        MatTooltipModule
+
+    ],
+    exports: [
+        Material,
+        DataTableComponent,
+        TableModalComponent,
+        CombosComponent,
+        FileInputComponent,
+        LoadingComponent,
+        BreadCrumbComponent,
+        ButtonLabelComponent,
+        ButtonIconComponent,
+        NgbModule,
+        CarouselComponent,
+        FiltersComponent,
+        SelectFilterComponent,
+        CarouselItemDirective
+    ],
+    providers: [
+        HttpService
+    ]
+})
+export class BrainloperUiModule { }

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

@@ -0,0 +1,5 @@
+<div aria-label="breadcrumb">
+  <ol class="breadcrumb">
+      <li *ngFor="let m of menu" [class]="m.current?'active':''" class="breadcrumb-item" (click)="handlerRouter(m)">{{m.name}}</li>
+  </ol>
+</div>

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

@@ -0,0 +1,8 @@
+.breadcrumb-item{
+  cursor: pointer;
+}
+
+.breadcrumb{
+  background-color: #b7b9bb !important;
+  padding: 10px;
+}

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

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

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

@@ -0,0 +1,28 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-bread-crumb',
+  templateUrl: './bread-crumb.component.html',
+  styleUrls: ['./bread-crumb.component.scss']
+})
+export class BreadCrumbComponent implements OnInit {
+  @Input() menu:Array<any> = []
+  @Output() selectRouter = new EventEmitter<any>();
+
+  constructor(
+    public router : Router
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+  public handlerRouter(menu:any){
+    if(menu.router != null) this.router.navigate([menu.router])
+    this.selectRouter.emit(menu)
+  }
+
+}
+
+
+

package/src/app/modules/brainloper-ui/components/buttons/button-icon/button-icon.component.html

@@ -0,0 +1,17 @@
+<div style="height: 100%" class="d-flex flex-wrap justify-content-around align-items-center">
+  <div *ngFor="let item of items" [class]="items.length > 6 ? 'col-3' : 'col-4'">
+    <div *ngIf="item.active" class="icon-menu" matTooltip="{{ item.description }}" matTooltipPosition="above" matTooltipClass="custom-tooltip">
+      <button style="border: none; background: transparent">
+        <div [class]="'icon mat-elevation-z6'" [style.background]="item.color" matRipple (click)="clickButton.emit(item)">
+          <i [class]="'fa iconFa fa-' + item.icon" [style.color]="item.iconColor ?? 'white'"></i>
+        </div>
+      </button>
+      <div>
+        <h3 style="text-align: center; line-height: 20px">{{ item.name }}</h3>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+

package/src/app/modules/brainloper-ui/components/buttons/button-icon/button-icon.component.scss

@@ -0,0 +1,65 @@
+div.icon-menu{
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+div.icon{
+  width: 120px;
+  background-color: white;
+  height : 120px;
+  border-radius: 22px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.iconFa{
+  width: 70px;
+  height: 70px;
+}
+
+font{
+  font-size: 0.6rem;
+}
+
+::ng-deep .custom-tooltip {
+  background-color: #fbe870 !important;
+  color: black !important;
+  line-height: 17px !important;
+  font-size: 0.8rem;
+}
+
+
+@media screen and (max-height: 360px){
+  div.icon{
+      width: 90px;
+      height : 90px;
+      border-radius: 18px;
+  }
+
+  .iconFa{
+      width: 50px;
+      height: 50px;
+  }
+
+  h3{
+      font-size: 70%
+  }
+}
+
+@media screen and (max-width: 360px){
+  div.icon{
+      width: 80px;
+      height : 80px;
+      border-radius: 20px;
+  }
+  .iconFa{
+      width: 50px;
+      height: 50px;
+  }
+  h3{
+      font-size: 70%;
+  }
+}

package/src/app/modules/brainloper-ui/components/buttons/button-icon/button-icon.component.spec.ts

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

package/src/app/modules/brainloper-ui/components/buttons/button-icon/button-icon.component.ts

@@ -0,0 +1,18 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-button-icon',
+  templateUrl: './button-icon.component.html',
+  styleUrls: ['./button-icon.component.scss']
+})
+export class ButtonIconComponent implements OnInit {
+
+  @Output() clickButton = new EventEmitter<any>()
+  @Input() items:Array<any>
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/app/modules/brainloper-ui/components/buttons/button-label/button-label.component.html

@@ -0,0 +1,26 @@
+<div *ngIf="labels" class="d-flex justify-content-center my-3 flex-wrap">
+  <div *ngFor="let item of labels;">
+    <h4 *ngIf="item && item != ''" class="mat-elevation-z2 label-text d-flex d-flex-row" [style.background]="color?color:'#343a401a'">
+      {{item}}
+    </h4>
+  </div>
+</div>
+
+<div *ngIf="labelsEdit" class="d-flex justify-content-center my-3 flex-wrap">
+  <div *ngFor="let item of labelsEdit; let i = index">
+    <h4 *ngIf="item && item != ''" class="mat-elevation-z2 label-text d-flex d-flex-row" [style.background]="color?color:'#343a401a'" [id]="'button-edit-' + i">
+      <h6 *ngIf="item.label" class="mr-1 font-weight-bold m-0">{{item.label}} </h6>
+      <div *ngIf="!modeEdit[i]">{{item.value}}</div>
+      <div class="cursor-pointer" (click)='editLabel(i)' *ngIf="!modeEdit[i] && item.edit" matTooltip="Editar" matTooltipPosition="above">
+        <mat-icon class="ml-1 pencil-edit cursor-pointer" matTooltip="Editar" matTooltipPosition="above" [style.color]="iconColor">edit</mat-icon>
+      </div>
+
+      <input *ngIf="modeEdit[i] && item.edit" type="text" [(ngModel)]='currentValueToEdit' matInput placeholder="Filtrar">
+
+      <div class="cursor-pointer" (click)='finishEditLabel(i)' *ngIf="modeEdit[i] && item.edit" matTooltip="Aceptar" matTooltipPosition="above">
+        <i class="fa fa-check btn-accion" style="margin-left: 15px;"></i>
+      </div>
+
+    </h4>
+  </div>
+</div>

package/src/app/modules/brainloper-ui/components/buttons/button-label/button-label.component.scss

@@ -0,0 +1,18 @@
+.label-text{
+  padding: 5px;
+  margin: 5px 10px;
+  border-radius: 10px;
+  text-decoration: center;
+  font-weight: 500;
+}
+
+.pencil-edit{
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cursor-pointer{
+  cursor: pointer;
+}

package/src/app/modules/brainloper-ui/components/buttons/button-label/button-label.component.spec.ts

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

package/src/app/modules/brainloper-ui/components/buttons/button-label/button-label.component.ts

@@ -0,0 +1,80 @@
+import { Component, Input, OnInit, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+
+@Component({
+  selector: 'app-button-label',
+  templateUrl: './button-label.component.html',
+  styleUrls: ['./button-label.component.scss']
+})
+export class ButtonLabelComponent implements OnInit, OnChanges {
+
+  constructor() { }
+
+  @Output() updateLabel = new EventEmitter<any>()
+  @Input() labels: Array<string> = []
+  @Input() labelsEdit: Array<any> = []
+  @Input() color:string = null
+  @Input() iconColor:string = null
+
+  public modeEdit: Array<boolean> = []
+  public currentValueToEdit: string = ""
+
+  private indexToedit:number = -1
+  spanElement: HTMLElement;
+  private initEventClink = false
+
+  ngOnInit(): void {
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if(changes){
+      if(changes.labelsEdit && !this.initEventClink && this.labelsEdit.length > 0 && this.labelsEdit.find(x => x.edit == true)){
+        document.addEventListener('click', ($event) => this.onPageClick($event));
+        this.initEventClink = true
+      }
+    }
+  }
+
+  finishEditLabel(index:number){
+    this.labelsEdit[index].value = this.currentValueToEdit
+    this.modeEdit[index] = false
+    this.updateLabel.emit({
+      value: this.labelsEdit[index].value,
+      labels: this.labelsEdit[index].label,
+      position: index
+    })
+  }
+
+  editLabel(index:number){
+    this.spanElement = document.getElementById('button-edit-' + index);
+    this.currentValueToEdit = this.labelsEdit[index].value
+    this.modeEdit[index] = true
+    this.indexToedit = index
+  }
+
+  public onPageClick($event: MouseEvent){
+    if (!ButtonLabelComponent.isDescendant($event.target as HTMLElement, this.spanElement) && this.modeEdit){
+      for (let [index, value] of this.modeEdit.entries()) {
+        this.modeEdit[index] = this.indexToedit == index?true:false
+      }
+    }
+    this.indexToedit = -1
+  }
+
+  static isDescendant(child: HTMLElement, parent: HTMLElement) {
+    let node = child.parentNode;
+    while (node != null) {
+      if (node === parent) {
+        return true;
+      }
+      node = node.parentNode;
+    }
+    return false;
+  }
+
+  ngOnDestroy() {
+    document.removeEventListener('click', ($event) => this.onPageClick($event));
+  }
+
+}
+
+

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

@@ -0,0 +1,9 @@
+<ngb-carousel *ngIf="sortedCarouselItems.length" [interval]="carouselInterval">
+	<ng-container *ngFor="let item of sortedCarouselItems">
+	  <ng-template ngbSlide [id]="'carouselItem' + item.carouselItem">
+		<div class="item-container">
+		  <ng-container *ngTemplateOutlet="item.templateRef"></ng-container>
+		</div>
+	  </ng-template>
+	</ng-container>
+  </ngb-carousel>

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

@@ -0,0 +1,31 @@
+::ng-deep .carousel-control-next-icon {
+    background-image: url('../../../../../assets/images/next.png') !important;
+  }
+  ::ng-deep .carousel-control-next{
+    display: flex !important;
+    justify-content: flex-end !important;
+  }
+  
+  ::ng-deep .carousel-control-prev-icon {
+    background-image: url('../../../../../assets/images/pre.png') !important;
+  }
+  ::ng-deep .carousel-control-prev{
+    display: flex !important;
+    justify-content: flex-start !important;
+  }
+  
+  ::ng-deep .carousel-indicators li {
+    background-color: #212121 !important;
+  }
+
+  .item-container {
+    min-height: 60vh; 
+    margin: 0 30px;  
+  }
+
+  @media screen and (max-width: 350px){
+  
+    .item-container {
+      margin: 0 20px;  
+    }  
+  }