@unifylib/ui-lib 1.0.3

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

@@ -0,0 +1,372 @@
+<div fxLayout="column" class="baseTable">
+  <div class="left-align">
+    <app-attachment-uploader #uploader
+                             *ngIf="isBulkItemsSupported"
+                             (fileSelected)="handleFileUpload($event)">
+    </app-attachment-uploader>
+  </div>
+
+
+  <div fxLayout="row" fxFlex="100">
+    <div fxFlex="50" fxLayout="column" fxLayoutAlign="center start">
+      <app-title-bar [pageTitle]="pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'"
+                     [titleMode]="''"
+                     [newAction]="false"
+                     [showExtractButton]="!pageInfo.hideExtractButton"
+      >
+      </app-title-bar>
+      <span style="font-size: 14px">{{ 'totalCountItem' | translate }} : {{ this.totalElements }}</span>
+    </div>
+    <div fxFlex="50" fxLayout="column" fxLayoutAlign="start end">
+      <mat-chip-listbox aria-label="Color selection" [multiple]="false" *ngIf="pageInfo.draftSupported">
+        <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>
+  <ng-container *ngIf="showSearch()">
+    <div fxLayout="row" fxFlex="100">
+      <div fxFlex="80" fxLayout="column" fxLayoutAlign="start end">
+        <app-base-form-canvas fxFlexFill
+                              [pageInfo]="pageInfo"
+                              [fields]="searchFormFields"
+                              [editable]="true"
+                              (formUpdated)="updateSearchForm($event)"
+        ></app-base-form-canvas>
+      </div>
+      <div fxFlex="15" fxLayout="column" fxLayoutAlign="start end">
+        <div fxFlex="100" fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="8px">
+          <button mat-button color="primary" type="button" (click)="doSearch()">
+            <mat-icon>search</mat-icon>
+            {{ 'search' | translate }}
+          </button>
+          <button mat-button color="primary" type="button" (click)="clearSearch()">
+            <mat-icon>clear</mat-icon>
+            {{ 'clear' | translate }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+  <div fxLayout="row" fxFlex="100" class="baseTable__detailsColumn">
+    <div fxFlex="100">
+      <ng-container *ngIf="isLoaded">
+        <div fxLayout="row" fxLayout.lt-md="row" fxLayoutGap="0" fxLayoutAlign="start start" class="mainTable">
+          <form [formGroup]="formParam" fxFlexFill>
+            <table [dataSource]="dataFormArray.controls" fxFlexFill mat-table matSort>
+              <ng-container *ngFor="let column of this.fields; let i = index">
+                <ng-container matColumnDef="{{column.property}}">
+                  <ng-container [ngSwitch]="column.type">
+                    <ng-container *ngSwitchCase="'equation-builder'">
+                      <th *matHeaderCellDef class="mainTable__th" mat-header-cell>{{ labelKey(column) | translate }}
+                      </th>
+                      <td *matCellDef="let element" class="mainTable__td"
+                          [ngClass]="['mainTable__td__text-secondary__td']" mat-cell>
+                        <lib-equation-builder
+                          [form]="element"
+                          [field]="column"
+                          [readOnly]="column.readonly"
+                          [isPending]="isPending"
+                          (valueChanged)="handleEquationChange($event, element, column)">
+                        </lib-equation-builder>
+                      </td>
+                    </ng-container>
+
+                    <ng-container *ngSwitchCase="'lookup'">
+                      <th *matHeaderCellDef class="mainTable__th" mat-header-cell>{{ labelKey(column) | translate }}
+                      </th>
+                      <td *matCellDef="let element" class="mainTable__td"
+                          [ngClass]="['mainTable__td__text-secondary__td']"
+                          mat-cell>
+                        <app-auto-complete
+                          [form]="element"
+                          [field]="column"
+                          [defaultValue]="element.get(column.property)?.value"
+                          (selectedValue)="patchLookupValue($event, column.property)">
+                        </app-auto-complete>
+                      </td>
+                    </ng-container>
+                    <ng-container *ngSwitchCase="'list'">
+                      <th *matHeaderCellDef class="mainTable__th" mat-header-cell>{{ labelKey(column) | translate }}</th>
+                      <td  *matCellDef="let element" class="mainTable__td"
+                           [ngClass]="['mainTable__td__text-secondary__td']"
+                           mat-cell>
+                        <mat-label>{{element}}</mat-label>
+                        <mat-select
+                          formControlName="{{column.property}}"
+                          [attr.aria-label]="column.label! | translate"
+                          [multiple]="false"
+                          [(value)]="element[column.property]">
+                          <ng-container>
+                            <mat-option
+                              *ngFor="let item of column.listOptions"
+                              [value]="item">
+                              {{ getOptionValue(item) }}
+                            </mat-option>
+                          </ng-container>
+                        </mat-select>
+                      </td>
+                    </ng-container>
+                    <ng-container *ngSwitchCase="'stateType'">
+                      <th *matHeaderCellDef class="mainTable__th" mat-header-cell>{{ 'action' | translate }}</th>
+                      <td *matCellDef="let element" class="mainTable__td"
+                          [ngClass]="['mainTable__td__text-secondary__td']"
+                          mat-cell>
+                        <div fxLayout="column">
+                          <div fxFlex="100" fxLayout="row">
+
+                            <div fxFlex="33.3" fxLayout="column" fxLayoutAlign="center center">
+                              <button mat-button class="btn-none-background-primary"
+                                      color="primary"
+                                      [disabled]="disabledSaveButton(element)"
+                                      (click)="fieldButtonEvent(column,element,SAVE) ">
+                                {{ getPositiveWfActionKey(element.value.stateType) | translate }}
+                              </button>
+                            </div>
+                            <div fxFlex="33.3" fxLayout="column" fxLayoutAlign="center center">
+                              <button *ngIf="isPending" mat-button class="btn-none-background-primary"
+                                      color="accent"
+                                      (click)="fieldButtonEvent(column,element,REJECT)">
+                                {{ getNegativeWfActionKey(element.value.stateType) | translate }}
+                              </button>
+                            </div>
+                            <div fxFlex="33.3" fxLayout="column" fxLayoutAlign="center center"></div>
+                          </div>
+                        </div>
+                      </td>
+                    </ng-container>
+                    <ng-container *ngSwitchCase="'year'">
+                      <th *matHeaderCellDef class="mainTable__th" mat-header-cell>{{ labelKey(column) | translate }}
+                      </th>
+                      <td *matCellDef="let element" class="mainTable__td"
+                          [ngClass]="['mainTable__td__text-secondary__td']"
+                          mat-cell>
+                        <mat-form-field class="flex-auto" appearance="outline" fxFlexFill>
+                          <mat-label>{{ labelKey(column) | translate }}</mat-label>
+                          <input matInput
+                                 [disabled]="column.readonly"
+                                 [readonly]="column.readonly"
+                                 [matDatepicker]="picker"
+                                 [formControl]="getField(element, column)"
+                                 [required]="column.required"
+                                 [attr.aria-required]="column.required"
+                                 [attr.aria-labelledby]="'label-' + column.property"
+                                 [attr.aria-describedby]="'error-' + column.property">
+                          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+                          <mat-datepicker #picker startView="multi-year"
+                                          (yearSelected)="setMonthAndYear($event, picker, element,column)"
+                                          panelClass="example-month-picker"></mat-datepicker>
+
+                        </mat-form-field>
+                        <!--                      <mat-form-field class="flex-auto" appearance="outline" fxFlexFill>-->
+                        <!--                        <input matInput [formControl]="getField(element, column)">-->
+                        <!--                      </mat-form-field>-->
+                      </td>
+                    </ng-container>
+                    <ng-container *ngSwitchCase="'number'">
+                      <th *matHeaderCellDef class="mainTable__th" mat-header-cell>
+                        {{ labelKey(column) | translate }}
+                      </th>
+                      <td *matCellDef="let element" class="mainTable__td"
+                          [ngClass]="['mainTable__td__text-secondary__td']"
+                          mat-cell>
+                        <mat-form-field class="flex-auto" appearance="outline" fxFlexFill>
+                          <!-- Visually hidden label just to trigger the floating label and asterisk -->
+                          <mat-label>
+                          </mat-label>
+
+                          <input matInput
+                                 type="number"
+                                 [formControl]="getField(element, column)"
+                                 [required]="column.required"
+                                 [readonly]="column.readonly"
+                                 [attr.aria-required]="column.required"
+                                 [attr.aria-labelledby]="'label-' + column.property"
+                                 [attr.aria-describedby]="'error-' + column.property">
+                        </mat-form-field>
+                      </td>
+                    </ng-container>
+                    <ng-container *ngSwitchCase="'status'">
+                      <th *matHeaderCellDef class="mainTable__th" mat-header-cell>
+                        {{ labelKey(column) | translate }}
+                      </th>
+                      <td *matCellDef="let element" class="mainTable__td"
+                          [ngClass]="['mainTable__td__text-secondary__td']"
+                          mat-cell>
+                        <mat-checkbox
+                          style="padding-bottom: 14px; padding-top: 14px;"
+                          [formControl]="getField(element, column)"
+                          [required]="column.required"
+                          [attr.aria-required]="column.required"
+                          [attr.aria-labelledby]="'label-' + column.property"
+                          [attr.aria-describedby]="'error-' + column.property"
+                          [style.pointer-events]="column.readonly ? 'none' : 'auto'"
+                          [style.opacity]="column.readonly ? 0.7 : 1"
+                          (click)="column.readonly ? $event.preventDefault() : null">
+                        </mat-checkbox>
+                      </td>
+                    </ng-container>
+                    <ng-container *ngSwitchCase="'text'">
+                      <th *matHeaderCellDef class="mainTable__th" mat-header-cell>
+                        {{ labelKey(column) | translate }}
+                      </th>
+                      <td *matCellDef="let element" class="mainTable__td"
+                          [ngClass]="['mainTable__td__text-secondary__td']"
+                          mat-cell>
+                        <mat-form-field class="flex-auto" appearance="outline" fxFlexFill>
+                          <mat-label>
+                            {{ labelKey(column) | translate }}
+                          </mat-label>
+                          <input matInput
+                                 type="text"
+                                 [formControl]="getField(element, column)"
+                                 [required]="column.required"
+                                 [readonly]="column.readonly"
+                                 [attr.aria-required]="column.required"
+                                 [attr.aria-labelledby]="'label-' + column.property"
+                                 [attr.aria-describedby]="'error-' + column.property">
+                        </mat-form-field>
+                      </td>
+                    </ng-container>
+                    <ng-container *ngSwitchCase="'date'">
+                      <th *matHeaderCellDef class="mainTable__th" mat-header-cell>
+                        {{ labelKey(column) | translate }}
+                      </th>
+                      <td *matCellDef="let element" class="mainTable__td"
+                          [ngClass]="['mainTable__td__text-secondary__td']"
+                          mat-cell>
+                        <mat-form-field class="flex-auto" appearance="outline" fxFlexFill>
+                          <input matInput
+                                 [matDatepicker]="xpicker"
+                                 [formControl]="getField(element, column)"
+                                 [required]="column.required"
+                                 [readonly]="column.readonly"
+                                 [disabled]="column.readonly"
+                                 [attr.aria-required]="column.required"
+                                 [attr.aria-labelledby]="'label-' + column.property"
+                                 [attr.aria-describedby]="'error-' + column.property">
+                          <mat-datepicker-toggle
+                            matSuffix
+                            [for]="xpicker"
+                            [disabled]="column.readonly">
+                          </mat-datepicker-toggle>
+                          <mat-datepicker #xpicker></mat-datepicker>
+                        </mat-form-field>
+                      </td>
+                    </ng-container>
+
+                    <ng-container *ngSwitchDefault>
+                      <th *matHeaderCellDef class="mainTable__th" mat-header-cell>{{ labelKey(column) | translate }}
+                      </th>
+                      <td *matCellDef="let element" class="mainTable__td"
+                          [ngClass]="['mainTable__td__text-secondary__td']"
+                          mat-cell>
+                        <mat-form-field class="flex-auto" appearance="outline" fxFlexFill>
+                          <input matInput
+                                 [readonly]="column.readonly"
+                                 [attr.aria-required]="column.required"
+                                 [formControl]="getField(element, column)">
+                        </mat-form-field>
+                      </td>
+                    </ng-container>
+                  </ng-container>
+                </ng-container>
+              </ng-container>
+              <tr *matHeaderRowDef="visibleColumns" mat-header-row></tr>
+              <tr (click)="onSelectItem(row)" (auxclick)="openNewTab(row)"
+                  *matRowDef="let row; columns: visibleColumns  | paginate:config"
+                  mat-row></tr>
+            </table>
+          </form>
+        </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="row" fxLayoutGap="0" fxLayoutAlign="start start" class="mainTable"
+             *ngIf="!selectedFileFromUploader">
+          <div>
+            <button *ngIf="!isPending && pageInfo.hasAddButton" mat-button color="primary" type="button"
+                    (click)="addNewItem()">
+              <mat-icon>add_box</mat-icon>
+              {{ translationKey | translate }}
+            </button>
+          </div>
+        </div>
+
+
+        <div fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign.lt-md="center center"
+             fxLayoutAlign.gt-sm="center center"
+             *ngIf="totalElements > 0" class="main-pagination">
+
+          <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>
+          <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>
+      </ng-container>
+    </div>
+  </div>
+  <div *ngIf="isBulkItemsSupported"
+       fxLayout="row"
+       fxLayout.lt-md="row"
+       fxLayoutGap="10px"
+       fxLayoutAlign="start start"
+       class="mainTable">
+
+    <div>
+      <button mat-flat-button
+              color="primary"
+              type="button"
+              (click)="addBulkItems()"
+              [disabled]="shouldDisableBulkAdd()">
+        <mat-icon>add_box</mat-icon>
+        {{ 'addAll' | translate }}
+      </button>
+    </div>
+
+    <div>
+      <button mat-flat-button
+              color="warn"
+              type="button"
+              [disabled]="!hasDataToClear()"
+              (click)="clearBulkItems()">
+        <mat-icon>delete</mat-icon>
+        {{ 'clearAll' | translate }}
+      </button>
+    </div>
+
+  </div>
+</div>

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

@@ -0,0 +1,44 @@
+.baseTable {
+  padding: 20px;
+  //margin-inline: 8px;
+  //width: max-content;
+}
+.example-month-picker .mat-calendar-period-button {
+  pointer-events: none;
+}
+
+.example-month-picker .mat-calendar-arrow {
+  display: none;
+}
+
+::ng-deep .mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker)::after {
+  content: ' *';
+  color: red !important; /* asterisk color */
+  margin-left: 2px;
+  font-size: 1.5em; /* increase size */
+  vertical-align: top; /* optional: aligns better with label */
+}
+
+::ng-deep .mdc-floating-label--required::after {
+  content: ' *';
+  color: red !important; /* asterisk color */
+  margin-left: 2px;
+  font-size: 1.5em; /* increase size */
+  vertical-align: top; /* optional: aligns better with label */
+}
+
+.responsive-top-gap {
+  margin-top: 20px;
+}
+
+@media (max-width: 959px) {
+  .responsive-top-gap {
+    margin-top: 1px;
+  }
+  .baseTable {
+    padding: 20px;
+    margin-inline: 8px;
+    width: max-content;
+  }
+
+}

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

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