@unifylib/ui-lib 1.0.3 → 1.1.4

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

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

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

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