@unifylib/ui-lib 1.1.3 → 1.1.5

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

@@ -1,67 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  width: 98%;
-}
-
-.title-row {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: flex-start;
-  width: 100%;
-  margin: 2vh 0;
-}
-
-.full-column {
-  flex: 1 1 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.button-row {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: flex-start;
-  width: 100%;
-  margin-top: 2vh;
-}
-
-.half-column {
-  flex: 0 0 49%;
-  display: flex;
-  flex-direction: column;
-}
-
-.right-align {
-  align-items: flex-end;
-}
-
-.button-group {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 10px;
-  margin: 1% 2%;
-}
-
-@media (max-width: 768px) {
-  .button-row {
-    flex-direction: column;
-  }
-
-  .half-column {
-    flex: 1 1 100%;
-  }
-
-  .right-align {
-    align-items: center;
-  }
-
-  .button-group {
-    justify-content: center;
-    flex-wrap: wrap;
-  }
-}

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

@@ -1,47 +0,0 @@
-<div class="container">
-  <div class="title-row">
-    <div class="full-column">
-      <app-title-bar [pageTitle]="getTitle()"></app-title-bar>
-    </div>
-  </div>
-
-  <ng-container *ngIf="isLoaded">
-    <app-base-form-canvas
-      [pageInfo]="pageInfo"
-      [fields]="fieldsInfo"
-      [editable]="true"
-      [item]="default"
-      (formUpdated)="captureForm($event)">
-    </app-base-form-canvas>
-
-    <div class="button-row">
-      <div class="half-column"></div>
-      <div class="half-column right-align">
-        <div class="button-group">
-          <ng-container>
-            <button
-              mat-stroked-button
-              class="btn-none-background-primary"
-              type="button"
-              (click)="doCancel('cancel')"
-              id="base-input-cancel-btn">
-              Cancel
-            </button>
-          </ng-container>
-
-          <ng-container>
-            <button
-              [ngClass]="saveDisabled() ? 'btn-none-background-primary' : 'btn-background-primary'"
-              [disabled]="saveDisabled()"
-              mat-stroked-button
-              type="button"
-              (click)="doSave('save')"
-              id="base-input-save-btn">
-              Save
-            </button>
-          </ng-container>
-        </div>
-      </div>
-    </div>
-  </ng-container>
-</div>

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

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

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

@@ -1,77 +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 {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";
-import {MatButton} from "@angular/material/button";
-
-@Component({
-  selector: 'lib-base-input-dialog',
-  standalone: true,
-  imports: [
-    NgIf,
-    NgClass,
-    MatIconModule,
-    ReactiveFormsModule,
-    MatSelectModule,
-    MatInputModule,
-    BaseFormCanvasComponent,
-    TranslateModule,
-    NgIf,
-    TranslateModule,
-    TitleBarComponent,
-    MatButton
-  ],
-  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,268 +0,0 @@
-<div class="flex-column baseTable">
-  <div class="flex-row flex-100" *ngIf="!pageInfo.hideTitle">
-    <div [class.flex-50]="pageInfo.draftSupported" [class.flex-100]="!pageInfo.draftSupported" class="flex-column align-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 class="flex-50 flex-column align-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 class="filter-row" *ngIf="!pageInfo.hideAdvancedFilter">
-    <app-filter-builder
-      *ngIf="!pageInfo.hideAdvancedFilter"
-      [pageInfo]="pageInfo"
-      [columns]="columns"
-      [filterFields]="filterFields"
-      (filterInformation)="doAdvancedSearch($event)"
-      (isEmpty)="resetData($event)">
-    </app-filter-builder>
-
-    <div class="button-group" >
-
-      <button *ngIf="!pageInfo.hideExtractButton"
-        mat-flat-button
-        [matMenuTriggerFor]="exportMenu"
-        color="primary"
-        class="btn-none-background-primary btn-export"
-      >
-        <div class="button-text">
-          <mat-icon>file_export</mat-icon>
-          <span>{{ 'export' | translate }}</span>
-          <mat-icon class="arrow-icon">arrow_drop_down</mat-icon>
-        </div>
-      </button>
-
-      <mat-menu #exportMenu="matMenu">
-        <button
-          mat-menu-item
-          *ngFor="let type of types"
-          (click)="extractReport(type)"
-        >
-          <span>{{ type | uppercase }}</span>
-        </button>
-      </mat-menu>
-
-    </div>
-  </div>
-
-
-  <div class="flex-row flex-100 baseTable__detailsColumn">
-    <div class="flex-100">
-      <div class="flex-row flex-100 mainTable">
-        <table [dataSource]="dataSource" class="flex-fill" mat-table matSort (matSortChange)="onSortAction($event)">
-          <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.type">
-                <ng-container *ngSwitchCase="'workflowStatus'">
-                  <td *matCellDef="let element" class="mainTable__td mainTable__td__text-secondary" mat-cell>
-                    <button mat-button class="wfStatus {{ getStatusDescription(element)}}" [attr.id]="'table-btn-wf-'+column.property+'-'+(element.id || element.key || '')">{{ getStatusDescription(element) }}</button>
-                  </td>
-                  <td *matCellDef="let element" class="mainTable__td mainTable__td__text-secondary__td" mat-cell>
-                    <button mat-button class="wfStatus {{ getStatusDescription(element)}}" [attr.id]="'table-btn-wf2-'+column.property+'-'+(element.id || element.key || '')">{{ getStatusDescription(element) }}</button>
-                  </td>
-                </ng-container>
-
-                <ng-container *ngSwitchCase="'hyper-text'">
-                  <td *matCellDef="let element" class="mainTable__td 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 mainTable__td__text-secondary" mat-cell>
-                    <button *ngIf="shouldShowButton(element)" mat-button class="primary" (click)="$event.stopPropagation(); actionButtonClicked(column.property, element)" [attr.id]="'table-btn-action-'+column.property">
-                      {{ 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 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 mainTable__td__text-secondary" mat-cell>
-                    <button mat-button class="stateType {{ element[column.property]}}" [attr.id]="'table-btn-state-'+column.property">{{ labelKeyByValue(column, element) | translate}}</button>
-                  </td>
-                </ng-container>
-
-                <ng-container *ngSwitchCase="'date'">
-                  <td *matCellDef="let element" class="mainTable__td 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" class="mainTable__td 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" class="mainTable__td 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 mainTable__td__text-secondary__td" mat-cell>
-                    <mat-icon *ngIf="element[column.property] === null" class="mainTable__td__icon-darkorange">flag</mat-icon>
-                    <mat-icon *ngIf="element[column.property] === false" class="mainTable__td__icon-red">flag</mat-icon>
-                    <mat-icon *ngIf="element[column.property] === true" class="mainTable__td__icon-green">flag</mat-icon>
-                  </td>
-                </ng-container>
-
-                <ng-container *ngSwitchCase="'status'">
-                  <td *matCellDef="let element" class="mainTable__td mainTable__td__text-secondary__td" mat-cell>
-                    <span *ngIf="element[column.property] === null || element[column.property] === false">
-                      {{ pageInfo.labelsSection + '.' + column.label + 'InActive' | translate }}
-                    </span>
-                    <span *ngIf="element[column.property] === true">
-                      {{ pageInfo.labelsSection + '.' + column.label + 'Active' | translate }}
-                    </span>
-                  </td>
-                </ng-container>
-
-                <ng-container *ngSwitchCase="'info'">
-                  <td *matCellDef="let element" class="mainTable__td text-secondary" mat-cell>
-                    <button mat-icon-button (click)="$event.stopPropagation();emitEvent(element)" [attr.id]="'table-btn-info-'+element.id">
-                      <mat-icon>info</mat-icon>
-                    </button>
-                  </td>
-                </ng-container>
-
-                <ng-container *ngSwitchCase="'netAmount'">
-                  <td *matCellDef="let element" class="mainTable__td 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 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 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 mainTable__td__text-secondary__td" style="padding: 0!important;" mat-cell>
-                    <app-button-actions 
-                      [buttonsAction]="column.viewType === 'buttonsAction'"
-                      [listAction]="listAction" 
-                      [actions]="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 mainTable__td__text-secondary__td" (click)="emitRoutePage(element)" mat-cell>
-                      {{ extractFieldName(element, column.property) | translate }}
-                    </td>
-                  </ng-container>
-                  <ng-template #noTranslate>
-                    <td *matCellDef="let element" class="mainTable__td mainTable__td__text-secondary__td" (click)="emitRoutePage(element)" 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"
-              [attr.id]="'table-row-' + (row?.id || row?.key || '')"
-              [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 *ngIf="noDataFound" class="dataNotFound flex-column">
-        <mat-icon class="dataNotFound__icon">{{ noDataFoundIcon }}</mat-icon>
-        <span class="dataNotFound__title">{{ noDataFoundTitle | translate}}</span>
-        <span class="dataNotFound__subtitle">{{ noDataFoundSubtitle | translate}}</span>
-      </div>
-
-
-      <div  *ngIf="(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination" class="main-pagination flex-row">
-        <ng-container *ngIf="enablePagination">
-          <div class="flex-column flex-100">
-            <app-paginator
-              [currentPage]="pageIndex"
-              [totalItems]="totalElements"
-              [pageSize]="pageSize"
-              [pageSizeOptions]="[5, 10, 25, 50]"
-              (pageChange)="onPageChange($event)"
-              (pageSizeChange)="onPageSizeChange($event)">
-            </app-paginator>
-          </div>
-        </ng-container>
-      </div>
-    </div>
-  </div>
-</div>

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

@@ -1,140 +0,0 @@
-
-.flex-row {
-  display: flex;
-  flex-direction: row;
-}
-
-.flex-column {
-  display: flex;
-  flex-direction: column;
-}
-
-.flex-100 {
-  flex: 1 1 100%;
-}
-
-.flex-49 {
-  flex: 0 0 49%;
-}
-
-.flex-50 {
-  flex: 0 0 50%;
-}
-
-.align-start {
-  justify-content: flex-start;
-  align-items: flex-start;
-}
-
-.align-center {
-  justify-content: center;
-  align-items: center;
-}
-
-.align-end {
-  justify-content: flex-end;
-  align-items: flex-end;
-}
-.gap-0 {
-  gap: 0;
-}
-
-.gap-5 {
-  gap: 5px;
-}
-
-.gap-10 {
-  gap: 10px;
-}
-.dataNotFound {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  text-align: center;
-
-  &__icon {
-    color: var(--primary-color-3nd);
-    font-size: 40px;
-    height: 40px;
-    width: 40px;
-    margin-bottom: 8px;
-  }
-
-  &__title {
-    color: #6A6A6A;
-    font-size: 20px;
-    font-weight: 700;
-    margin-bottom: 4px;
-  }
-
-  &__subtitle {
-    color: #6A6A6A;
-    font-size: 20px;
-    font-weight: 400;
-  }
-}
-
-@media (max-width: 960px) {
-  .flex-column-sm {
-    flex-direction: column;
-  }
-
-  .align-center-sm {
-    justify-content: center;
-    align-items: flex-start;
-  }
-}
-.filter-row {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  gap: 12px;
-}
-
-.filter-row app-filter-builder {
-  flex: 1;
-}
-
-.button-group {
-  width: 15%;
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-}
-
-.btn-export {
-
-  height: 44px !important;
-}
-
-.arrow-icon {
-  font-size: 20px;
-  margin-left: 4px;
-}
-
-@media (max-width: 1024px) {
-  .button-group {
-    width: auto;
-  }
-}
-
-@media (max-width: 768px) {
-  .filter-row {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .button-group {
-    width: 100%;
-    justify-content: flex-start;
-  }
-
-  .btn-export {
-    width: 100%;
-  }
-}
-.stateType {
-  font-size: 14px!important;
-}

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();
-  });
-});