@unifylib/ui-lib 1.0.3

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

@@ -0,0 +1,78 @@
+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

@@ -0,0 +1,242 @@
+ <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

@@ -0,0 +1,31 @@
+.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

@@ -0,0 +1,25 @@
+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();
+  });
+});