@unifylib/ui-lib 1.0.3 → 1.1.4

package/src/lib/components/base-input-dialog/base-input-dialog.component.ts

@@ -1,78 +0,0 @@
-import {Component, Inject, Input, OnInit} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
-import {FormGroup, ReactiveFormsModule} from "@angular/forms";
-import {FlexLayoutModule, FlexModule} from "@angular/flex-layout";
-import {NgClass, NgIf} from "@angular/common";
-import {MatIconModule} from "@angular/material/icon";
-import {MatSelectModule} from "@angular/material/select";
-import {MatInputModule} from "@angular/material/input";
-import {TranslateModule} from "@ngx-translate/core";
-import { BaseFormCanvasComponent } from '../base-form-canvas/base-form-canvas.component';
-import {TitleBarComponent} from "../title-bar/title-bar.component";
-import {FieldInfo, PageInfo} from "../../base-model";
-import {BaseUtils} from "../../utils/base-utils";
-
-@Component({
-  selector: 'lib-base-input-dialog',
-  standalone: true,
-  imports: [
-    FlexModule,
-    NgIf,
-    NgClass,
-    MatIconModule,
-    ReactiveFormsModule,
-    MatSelectModule,
-    MatInputModule,
-    BaseFormCanvasComponent,
-    FlexLayoutModule,
-    TranslateModule,
-    NgIf,
-    TranslateModule,
-    TitleBarComponent
-  ],
-  templateUrl: './base-input-dialog.component.html',
-  styleUrl: './base-input-dialog.component.css'
-})
-export class BaseInputDialogComponent extends BaseUtils implements OnInit {
-  fieldsInfo: FieldInfo[];
-  default: any;
-  isLoaded: boolean = false;
-  formGroup: FormGroup;
-
-  constructor(public dialogRef: MatDialogRef<BaseInputDialogComponent>,
-              @Inject(MAT_DIALOG_DATA) public data: any) {
-    super()
-  }
-
-  ngOnInit(): void {
-    console.log('data' ,this.data);
-    this.fieldsInfo = this.data.fieldsInfo;
-    this.pageInfo = this.data.pageInfo;
-    this.default = this.data.element;
-    this.isLoaded = true;
-  }
-  captureForm($event: FormGroup) {
-    this.formGroup = $event;
-  }
-
-  saveDisabled() {
-    return !this.formGroup?.valid;
-  }
-
-  getTitle() {
-    return this.pageInfo.labelsSection + '.pop_up_title';
-  }
-
-  doSave(save: string) {
-    if (this.formGroup.valid) {
-      let id = this.default?.id;
-      this.default = this.formGroup.value;
-      this.default.id = id;
-      this.dialogRef.close(this.default);
-    }
-  }
-
-  doCancel(cancel: string) {
-    this.dialogRef.close(null);
-  }
-}

package/src/lib/components/base-table/base-table.component.html

@@ -1,242 +0,0 @@
- <div fxLayout="column" class="baseTable">
-        <div fxLayout="row" fxFlex="100" >
-          <div  fxFlex="50" fxLayout="column" fxLayoutAlign="center start" >
-<!--            <span style="font-size: 14px">{{ 'totalCountItem' | translate }} : {{ this.totalElements }}</span>-->
-          </div>
-          <div  fxFlex="50" fxLayout="column" fxLayoutAlign="start end" >
-          </div>
-        </div>
-        <div fxLayout="row" fxFlex="100" >
-          <div  [fxFlex]="pageInfo.draftSupported ? 50 : 100" fxLayout="column" fxLayoutAlign="center start" >
-            <app-title-bar [pageTitle]="pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'"
-                           [titleMode]="''"
-                           [newAction]="showAddNew()"
-                           [showExtractButton]="!pageInfo.hideExtractButton"
-                           [extraButton]="extraButton"
-                           (newActionClicked)="onAddNewAction($event)"
-                           (extractReport)="extractReport($event)"
-                           [totalElements]="pageInfo.hideTitle ? undefined : totalElements"
-            >
-            </app-title-bar>
-          </div>
-          <div  fxFlex="50" fxLayout="column" fxLayoutAlign="start end" *ngIf="pageInfo.draftSupported" >
-            <mat-chip-listbox aria-label="Color selection" [multiple]="false" >
-              <mat-chip-option [selected]="!this.isPending" [color]="'accent'" [value]="'COMPLETED'" (click)="switchViewMode(false)">{{'finished' | translate}}</mat-chip-option>
-              <mat-chip-option [selected]="this.isPending" [color]="'accent'" [value]="'PENDING'" (click)="switchViewMode(true)">{{'todo' | translate}}</mat-chip-option>
-            </mat-chip-listbox>
-          </div>
-        </div>
-    <div fxLayout="row" fxFlex="100" class="baseTable__detailsColumn">
-      <div fxFlex="100">
-        <div fxLayout="row" fxLayout.lt-md="row" fxLayoutGap="0" fxLayoutAlign="start start" class="mainTable">
-            <table [dataSource]="dataSource" fxFlexFill mat-table matSort>
-                <ng-container *ngFor="let column of this.columns; let last=last">
-                    <ng-container matColumnDef="{{column.property}}">
-                        <ng-container *ngIf="column.enableSorting; else withoutSortingColumn">
-                            <th *matHeaderCellDef class="mainTable__th" mat-header-cell mat-sort-header>{{ labelKey(column) | translate}}</th>
-                        </ng-container>
-                        <ng-template #withoutSortingColumn>
-                            <th *matHeaderCellDef class="mainTable__th" mat-header-cell>{{ labelKey(column) | translate}}</th>
-                        </ng-template>
-                        <ng-container [ngSwitch]="column.viewType || column.type">
-                            <ng-container *ngSwitchCase="'workflowStatus'">
-                                <td *matCellDef="let element" class="mainTable__td" [ngClass]="['mainTable__td__text-secondary']" mat-cell>
-                                    <button mat-button class="wfStatus {{ getStatusDescription(element)}} ">{{ getStatusDescription(element)}}</button>
-                                </td>
-                                <td *matCellDef="let element" [ngClass]="['mainTable__td__text-secondary__td']" mat-cell>
-                                    <button mat-button class="wfStatus {{ getStatusDescription(element)}} ">{{ getStatusDescription(element)}}</button>
-                                </td>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="'hyper-text'">
-                              <td *matCellDef="let element" [ngClass]="['mainTable__td__text-secondary__td']"
-                                  (click)="hyperLinkClicked(column.property,element)"
-                                  mat-cell>
-                                <mat-label
-                                  [ngClass]="{
-    'hyper-link': shouldRenderAsHyperLink(element)
-  }">
-                                  {{ extractFieldName(element, column.property) }}
-                                </mat-label>
-                              </td>
-                            </ng-container>
-                          <ng-container *ngSwitchCase="'button'">
-                            <td *matCellDef="let element" class="mainTable__td" [ngClass]="['mainTable__td__text-secondary']" mat-cell>
-                              <button
-                                *ngIf="shouldShowButton(element)"
-                                mat-button
-                                class="primary"
-                                (click)="$event.stopPropagation(); actionButtonClicked(column.property, element)">
-                                {{ labelKey(column) + '_title' | translate }}
-                              </button>
-                            </td>
-                          </ng-container>
-                          <ng-container *ngSwitchCase="'icon'">
-                            <td *matCellDef="let element" class="mainTable__td" mat-cell>
-                              <mat-icon
-                                [ngClass]="{
-                                            'mainTable__td__icon-green': element[column.property] === 'pass',
-                                            'mainTable__td__icon-orange': element[column.property] === 'warning',
-                                            'mainTable__td__icon-red': element[column.property] === 'error'
-                                          }">
-                                {{ getIcon(element[column.property]) }}
-                              </mat-icon>
-                            </td>
-                          </ng-container>
-                          <ng-container *ngSwitchCase="'checkbox'">
-                                <td *matCellDef="let element" class="mainTable__td" [ngClass]="['mainTable__td__text-secondary']" mat-cell>
-                                  <mat-checkbox class="primary" [checked]="element[column.property]" (click)="$event.stopPropagation();actionCheckedClicked(column.property,element)"></mat-checkbox>
-
-                                </td>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="'stateType'">
-                                <td *matCellDef="let element" class="mainTable__td" [ngClass]="['mainTable__td__text-secondary']" mat-cell>
-                                    <button mat-button class="stateType {{ element[column.property]}} ">{{ labelKeyByValue(column, element) | translate}}</button>
-                                </td>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="'date'">
-                                <td *matCellDef="let element" [ngClass]="['mainTable__td__text-secondary__td']"
-                                    mat-cell>{{ extractFieldName(element, column.property) | date:'yyyy-MM-dd' }} </td>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="'croppedText'">
-                                <td *matCellDef="let element" [ngClass]="['mainTable__td__text-secondary__td']"
-                                    mat-cell>{{ getCroppedText(element[column.property], element[column.width]) }} </td>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="'download'">
-                                <td *matCellDef="let element" [ngClass]="['mainTable__td__text-secondary__td']" style="padding: 0;margin: 0;text-align: center;"
-                                    mat-cell><mat-icon class="mainTable__td__icon-blue">system_update_alt</mat-icon></td>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="'onOff'">
-                                <td *matCellDef="let element" class="mainTable__td" [ngClass]="['mainTable__td__text-secondary__td']" mat-cell>
-                                    <mat-icon *ngIf="element[column.property] === null" class="mainTable__td__icon-darkorange">flag</mat-icon>
-                                    <mat-icon class="mainTable__td__icon-red" *ngIf="element[column.property] === false">flag</mat-icon>
-                                    <mat-icon class="mainTable__td__icon-green" *ngIf="element[column.property] === true">flag</mat-icon>
-                                </td>
-                            </ng-container>
-                          <ng-container *ngSwitchCase="'status'">
-                            <td *matCellDef="let element" class="mainTable__td"
-                                [ngClass]="['mainTable__td__text-secondary__td']" mat-cell>
-                              <span
-                                *ngIf="element[column.property] === null">{{ this.pageInfo.labelsSection + '.' + column.label + 'InActive' | translate }}</span>
-                              <span
-                                *ngIf="element[column.property] === false">{{ this.pageInfo.labelsSection + '.' + column.label + 'InActive' | translate }}</span>
-                              <span
-                                *ngIf="element[column.property] === true">{{ this.pageInfo.labelsSection + '.' + column.label + 'Active' | translate }}</span>
-                            </td>
-                          </ng-container>
-                            <ng-container *ngSwitchCase="'info'">
-                                <td *matCellDef="let element" class="mainTable__td" [ngClass]="['text-secondary']" mat-cell>
-                                    <button mat-icon-button (click)="$event.stopPropagation();emitEvent(element)"> <mat-icon>info</mat-icon></button>
-                                </td>
-                            </ng-container>
-<!--                            <ng-container *ngSwitchCase="'onOff'">-->
-<!--                                <td *matCellDef="let element" class="mainTable__td" [ngClass]="['mainTable__td__text-secondary__td']" mat-cell>-->
-<!--                                    <mat-icon *ngIf="!element[column.property]" class="mainTable__td__icon-darkorange">flag</mat-icon>-->
-<!--                                    <mat-icon class="mainTable__td__icon-red">flag</mat-icon>-->
-<!--                                    <mat-icon class="mainTable__td__icon-green">flag</mat-icon>-->
-<!--                                </td>-->
-<!--                            </ng-container>-->
-                            <ng-container *ngSwitchCase="'netAmount'">
-                                <td *matCellDef="let element" class="mainTable__td" [ngClass]="['mainTable__td__text-secondary__td']" mat-cell>
-                                    <small><sup class="mainTable__td__currency">{{element[column.currency]}}</sup></small>
-                                    <span class="mainTable__td__property">{{ extractFieldName(element, column.property) | currency:element[column.currency] :'' }}</span> of
-                                    {{ extractFieldName(element, column.additionalProperty) | currency:element[column.currency] :'' }}
-                                </td>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="'localDateTime'">
-                                <td *matCellDef="let element" class="mainTable__td" [ngClass]="['mainTable__td__text-secondary__td']"
-                                    mat-cell>{{ extractFieldName(element, column.property) | date : extractFormat(column) }} </td>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="'bigdecimal'">
-                                <td *matCellDef="let element" class="mainTable__td" [ngClass]="['mainTable__td__text-secondary__td']"
-                                    mat-cell>
-                                    <small><sup class="mainTable__td__currency">{{element[column.currency]}}</sup></small>
-                                    {{ extractFieldName(element, column.property) | number : (column.digitInfo || '1.3-5') }}
-                                </td>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="'listAction'" >
-                                <td *matCellDef="let element" class="mainTable__td" [ngClass]="['mainTable__td__text-secondary__td']" style="padding: 0!important;"
-                                    mat-cell>
-                                    <app-button-actions [buttonsAction]="false" [listAction]="listAction" (clickedButton)="actionListClicked($event,element)"></app-button-actions>
-
-                                </td>
-                            </ng-container>
-                            <ng-container *ngSwitchDefault>
-                                <ng-container *ngIf="column.translate; else noTranslate">
-                                    <td *matCellDef="let element" class="mainTable__td" (click)="emitRoutePage(element)" [ngClass]="['mainTable__td__text-secondary__td']" mat-cell>
-                                        {{extractFieldName(element, column.property) | translate}}
-                                    </td>
-                                </ng-container>
-                                <ng-template #noTranslate>
-                                    <td *matCellDef="let element" class="mainTable__td" (click)="emitRoutePage(element)" [ngClass]="['mainTable__td__text-secondary__td']" mat-cell
-                                        [innerHtml]='extractFieldName(element, column.property)'></td>
-                                </ng-template>
-                            </ng-container>
-                        </ng-container>
-                    </ng-container>
-                </ng-container>
-                <ng-container *ngIf="hasGroups()" >
-                    <ng-container *ngFor="let groupName of this.groupNames">
-                        <ng-container matColumnDef="{{groupName}}">
-                            <th mat-header-cell class="extra-header" *matHeaderCellDef [attr.colspan]="groupSpans.get(groupName)">{{(isHumanMade(groupName) ? groupName : "") | translate}}</th>
-                        </ng-container>
-                    </ng-container>
-                    <tr mat-header-row *matHeaderRowDef="this.groupNames"></tr>
-              </ng-container>
-                <tr *matHeaderRowDef="visibleColumns" mat-header-row></tr>
-              <tr
-                (auxclick)="openNewTab(row)"
-                (click)="$event.stopPropagation(); onSelectItem(row)"
-                *matRowDef="let row; columns: visibleColumns"
-                [ngClass]="{
-    'mainTable__highlight': selectedRowIndex == row.id ||
-      (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),
-    'mainTable__dark_highlight': isDarkHighlight(row)
-  }"
-                mat-row
-              ></tr>
-
-            </table>
-        </div>
-        <div fxLayout="row"  *ngIf="noDataFound" class="dataNotFound">
-            <div fxLayout="column" fxFlex="100" >
-                <span class="dataNotFound__details">
-                    <mat-icon class="dataNotFound__details__icon">info</mat-icon>
-                    <span>{{'dataNotFound' | translate}}</span>
-                </span>
-            </div>
-        </div>
-        <div fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign.lt-md="center center" fxLayoutAlign.gt-sm="center center" *ngIf="(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination" class="main-pagination">
-          <ng-container *ngIf="enablePagination">
-            <div fxLayout="column"   fxFlex.lt-md="100">
-                <app-paginator
-                  [currentPage]="pageIndex"
-                  [totalPages]="pagesCount"
-                  (pageChange)="onPageChange($event)"
-                ></app-paginator>
-<!--                <pagination-controls-->
-<!--                        [maxSize]="maxSize"-->
-<!--                        [directionLinks]="directionLinks"-->
-<!--                        [autoHide]="autoHide"-->
-<!--                        [responsive]="responsive"-->
-<!--                        [previousLabel]="labels['previousLabel']"-->
-<!--                        [nextLabel]="labels['nextLabel']"-->
-<!--                        [screenReaderPaginationLabel]="labels['screenReaderPaginationLabel']"-->
-<!--                        [screenReaderPageLabel]="labels['screenReaderPageLabel']"-->
-<!--                        [screenReaderCurrentLabel]="labels['screenReaderCurrentLabel']"-->
-<!--                        (pageChange)="onPageChange($event)"-->
-<!--                >-->
-<!--                </pagination-controls>-->
-
-            </div>
-          </ng-container>
-
-          <div fxLayout="column" fxFlex="100" class="countItem" fxHide.gt-xs>
-                <span class="countItem__totalElement">{{ 'totalCountItem' | translate}} : {{this.totalElements}}</span>
-            </div>
-            <div fxLayout="column" fxFlex="2">
-            </div>
-
-        </div>
-    </div>
-</div>
- </div>

package/src/lib/components/base-table/base-table.component.scss

@@ -1,31 +0,0 @@
-.baseTable {
-  padding: 20px;
-}
-th.mat-header-cell {
-  text-align: center;
-  font-weight: bold;
-  vertical-align: middle;
-}
-
-.extra-header{
-  text-align: center !important;
-  font-weight: bold;
-  vertical-align: middle !important;
-  border: 1px solid #000000;
-}
-
-.mdc-data-table__header-cell {
-  text-align: center;
-}
-
-@media (max-width: 959px) {
-  .responsive-top-gap {
-    margin-top: 1px;
-  }
-  .baseTable {
-    padding: 20px;
-    margin-inline: 8px;
-    width: max-content;
-  }
-
-}

package/src/lib/components/base-table/base-table.component.spec.ts

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