@unifylib/ui-lib 1.0.3 → 1.1.3

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

@@ -1,372 +1,337 @@
-<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>
+<div class="baseTable flex-column">
+  <div class="left-align">
+    <app-attachment-uploader #uploader
+                             *ngIf="isBulkItemsSupported"
+                             (fileSelected)="handleFileUpload($event)">
+    </app-attachment-uploader>
+  </div>
+
+  <div class="flex-row full-width">
+    <div class="flex-half flex-column align-center-start">
+      <app-title-bar [pageTitle]="pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'"
+                     [titleMode]="''"
+                     [newAction]="false"
+                     [showExtractButton]="!pageInfo.hideExtractButton">
+      </app-title-bar>
+      <span class="font-small">{{ 'totalCountItem' | translate }} : {{ this.totalElements }}</span>
+    </div>
+    <div class="flex-half flex-column align-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 class="flex-row full-width">
+      <div class="flex-80 flex-column align-start-end">
+        <app-base-form-canvas class="flex-fill"
+                              [pageInfo]="pageInfo"
+                              [fields]="searchFormFields"
+                              [editable]="true"
+                              (formUpdated)="updateSearchForm($event)">
+        </app-base-form-canvas>
+      </div>
+      <div class="flex-15 flex-column align-start-end">
+        <div class="flex-row align-center-center gap-8 full-width">
+          <button mat-button color="primary" type="button" (click)="doSearch()" id="editable-search-btn">
+            <mat-icon>search</mat-icon>
+            {{ 'search' | translate }}
+          </button>
+          <button mat-button color="primary" type="button" (click)="clearSearch()" id="editable-clear-search-btn">
+            <mat-icon>clear</mat-icon>
+            {{ 'clear' | translate }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+
+  <div class="flex-row full-width baseTable__detailsColumn">
+    <div class="flex-full">
+      <ng-container *ngIf="isLoaded">
+        <div class="flex-row mainTable gap-0 align-start-start">
+          <form [formGroup]="formParam" class="flex-fill">
+            <table [dataSource]="dataFormArray.controls" class="flex-fill" 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 mainTable__td__text-secondary__td" mat-cell>
+                        <div class="flex-column">
+                          <div class="flex-row full-width">
+                            <div class="flex-third flex-column align-center-center">
+                              <button mat-button class="btn-none-background-primary"
+                                      color="primary"
+                                      [disabled]="disabledSaveButton(element)"
+                                      (click)="fieldButtonEvent(column,element,SAVE)"
+                                      [attr.id]="'editable-save-' + (element.value?.id || '')">
+                                {{ getPositiveWfActionKey(element.value.stateType) | translate }}
+                              </button>
+                            </div>
+                            <div class="flex-third flex-column align-center-center">
+                              <button *ngIf="isPending" mat-button class="btn-none-background-primary"
+                                      color="accent"
+                                      (click)="fieldButtonEvent(column,element,REJECT)"
+                                      [attr.id]="'editable-reject-' + (element.value?.id || '')">
+                                {{ getNegativeWfActionKey(element.value.stateType) | translate }}
+                              </button>
+                            </div>
+                            <div class="flex-third flex-column align-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 fx-flex-fill" appearance="outline">
+                          <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 fx-flex-fill" appearance="outline">
+                          <!-- 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 fx-flex-fill" appearance="outline">
+                          <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 fx-flex-fill" appearance="outline">
+                          <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 fx-flex-fill" appearance="outline">
+                          <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"
+                  [attr.id]="'editable-row-' + (row?.value?.id || row?.value?.key || '')"
+                  mat-row></tr>
+            </table>
+          </form>
+        </div>
+
+        <div *ngIf="noDataFound && !pageInfo.lazyLoadData" class="flex-row dataNotFound">
+          <div class="flex-column flex-full">
+            <span class="dataNotFound__details">
+              <mat-icon class="dataNotFound__details__icon">info</mat-icon>
+              <span>{{ 'dataNotFound' | translate }}</span>
+            </span>
+          </div>
+        </div>
+
+        <div class="flex-row mainTable" *ngIf="!selectedFileFromUploader">
+          <div>
+            <button *ngIf="!isPending && pageInfo.hasAddButton" mat-button color="primary" type="button"
+                    (click)="addNewItem()" id="editable-add-item-btn">
+              <mat-icon>add_box</mat-icon>
+              {{ translationKey | translate }}
+            </button>
+          </div>
+        </div>
+
+        <div class="flex-row flex-wrap align-center-center main-pagination" *ngIf="totalElements > 0">
+          <div class="flex-column flex-full">
+            <app-paginator [currentPage]="pageIndex" [totalItems]="totalElements" [pageSize]="pageSize"
+                           [pageSizeOptions]="[5, 10, 25, 50]" (pageChange)="onPageChange($event)"
+                           (pageSizeChange)="onPageSizeChange($event)"></app-paginator>
+          </div>
+          <div class="flex-column flex-full countItem hide-gt-xs">
+            <span class="countItem__totalElement">{{ 'totalCountItem' | translate }} : {{ this.totalElements }}</span>
+          </div>
+          <div class="flex-column flex-2"></div>
+        </div>
+      </ng-container>
+    </div>
+  </div>
+
+  <div *ngIf="isBulkItemsSupported" class="flex-row gap-10 align-start-start mainTable">
+    <div>
+      <button mat-flat-button color="primary" type="button" (click)="addBulkItems()" [disabled]="shouldDisableBulkAdd()" id="editable-bulk-add-btn">
+        <mat-icon>add_box</mat-icon>
+        {{ 'addAll' | translate }}
+      </button>
+    </div>
+    <div>
+      <button mat-flat-button color="warn" type="button" [disabled]="!hasDataToClear()" (click)="clearBulkItems()" id="editable-bulk-clear-btn">
+        <mat-icon>delete</mat-icon>
+        {{ 'clearAll' | translate }}
+      </button>
+    </div>
+  </div>
+</div>