@sumaris-net/ngx-components 18.13.0 → 18.14.0

package/src/app/core/table/testing/table2.testing.html

@@ -0,0 +1,470 @@
+<app-toolbar
+  color="primary"
+  [canGoBack]="true"
+  [hasValidate]="(loadingSubject | async) !== true && (dirtySubject | async) === true"
+  (onValidate)="save()"
+  [backHref]="'/testing'"
+>
+  <ion-title>Table 2 (click to select)</ion-title>
+
+  <ion-buttons slot="end">
+    @if (selection | isEmptySelection) {
+      <input matInput type="number" step="1" style="color: black; width: 50px" [(ngModel)]="rowHeight" />
+
+      <!-- Add -->
+      <button mat-icon-button *ngIf="canEdit && !mobile" [title]="'COMMON.BTN_ADD' | translate" (click)="addRow()">
+        <mat-icon>add</mat-icon>
+      </button>
+
+      <!-- reset filter -->
+      <button mat-icon-button (click)="resetFilter()" *ngIf="filterCriteriaCount">
+        <mat-icon color="accent">filter_list_alt</mat-icon>
+        <mat-icon class="icon-secondary" style="left: 16px; top: 5px; font-weight: bold">close</mat-icon>
+      </button>
+
+      <!-- show filter -->
+      <button mat-icon-button (click)="filterExpansionPanel.toggle()">
+        <mat-icon
+          *ngIf="filterCriteriaCount; else emptyFilter"
+          [matBadge]="filterCriteriaCount"
+          matBadgeColor="accent"
+          matBadgeSize="small"
+          matBadgePosition="above after"
+          aria-hidden="false"
+        >
+          filter_list_alt
+        </mat-icon>
+        <ng-template #emptyFilter>
+          <mat-icon>filter_list_alt</mat-icon>
+        </ng-template>
+      </button>
+
+      <!-- save -->
+      <button mat-icon-button *ngIf="mobile" [disabled]="(dirtySubject | async) !== true" (click)="save()">
+        <mat-icon>save</mat-icon>
+      </button>
+    } @else {
+      <!-- if row selection -->
+      <!-- delete -->
+      <button
+        mat-icon-button
+        *ngIf="canEdit"
+        [title]="'COMMON.BTN_DELETE' | translate"
+        (click)="deleteSelection($event)"
+      >
+        <mat-icon>delete</mat-icon>
+      </button>
+
+      <!-- duplicate -->
+      <button
+        mat-icon-button
+        *ngIf="canEdit && selection.selected | isArrayLength: { equals: 1 }"
+        [title]="'COMMON.BTN_DUPLICATE' | translate"
+        (click)="duplicateRow($event, selection.selected[0])"
+      >
+        <mat-icon>file_copy</mat-icon>
+      </button>
+    }
+  </ion-buttons>
+</app-toolbar>
+<ion-content class="ion-no-padding">
+  <ion-refresher slot="fixed" *ngIf="mobile" (ionRefresh)="doRefresh($event)">
+    <ion-refresher-content></ion-refresher-content>
+  </ion-refresher>
+
+  <!-- error -->
+  <ion-item *ngIf="mobile && error" lines="none" @slideUpDownAnimation>
+    <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
+    <ion-label color="danger" class="error" [innerHTML]="error | translate"></ion-label>
+  </ion-item>
+
+  <!-- search -->
+  <mat-expansion-panel
+    #filterExpansionPanel
+    class="filter-panel"
+    [class.filter-panel-floating]="filterPanelFloating"
+    [class.filter-panel-pinned]="!filterPanelFloating"
+  >
+    <form class="form-container ion-padding-top" [formGroup]="filterForm" (ngSubmit)="applyFilterAndClosePanel($event)">
+      <ion-grid>
+        <ion-row>
+          <ion-col>
+            <!-- search text -->
+            <mat-form-field>
+              <mat-label>{{ 'TABLE.TESTING.SEARCH_TEXT' | translate }}</mat-label>
+              <ion-icon matPrefix name="search"></ion-icon>
+              <input matInput formControlName="searchText" autocomplete="off" />
+              <button
+                mat-icon-button
+                matSuffix
+                tabindex="-1"
+                type="button"
+                (click)="clearControlValue($event, filterForm.controls.searchText)"
+                [hidden]="filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value"
+              >
+                <mat-icon>close</mat-icon>
+              </button>
+            </mat-form-field>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </form>
+
+    <mat-action-row>
+      <!-- Counter  -->
+      <ion-label
+        [hidden]="(loadingSubject | async) || filterForm.dirty"
+        [color]="empty && 'danger'"
+        class="ion-padding"
+      >
+        {{
+          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')
+            | translate
+              : {
+                  count: (totalRowCount | numberFormat),
+                }
+        }}
+      </ion-label>
+
+      <div class="toolbar-spacer"></div>
+
+      <button
+        mat-icon-button
+        color="accent"
+        *ngIf="filterPanelFloating"
+        (click)="toggleFilterPanelFloating()"
+        class="hidden-xs hidden-sm hidden-md"
+        [title]="(filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate"
+      >
+        <mat-icon>
+          <span style="transform: rotate(90deg)">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>
+        </mat-icon>
+      </button>
+
+      <!-- Close panel -->
+      <ion-button mat-button fill="clear" color="dark" (click)="closeFilterPanel()" [disabled]="loadingSubject | async">
+        <ion-text translate>COMMON.BTN_CLOSE</ion-text>
+      </ion-button>
+
+      <!-- Search button -->
+      <ion-button
+        mat-button
+        [color]="filterForm.dirty ? 'tertiary' : 'dark'"
+        [fill]="filterForm.dirty ? 'solid' : 'clear'"
+        (click)="applyFilterAndClosePanel($event)"
+      >
+        <ion-text translate>COMMON.BTN_APPLY</ion-text>
+      </ion-button>
+    </mat-action-row>
+  </mat-expansion-panel>
+
+  <!-- table -->
+  <div [class.table-container]="!enableInfiniteScroll">
+    <table
+      #table
+      mat-table
+      matSort
+      matSortDisableClear
+      [dataSource]="dataSource"
+      [matSortActive]="defaultSortBy"
+      [matSortDirection]="defaultSortDirection"
+      [trackBy]="trackByFn"
+      [style.--mat-row-height]="rowHeight + 'px'"
+    >
+      <ng-container matColumnDef="select" [sticky]="checkBoxSelection" [class.mat-column-sticky]="checkBoxSelection">
+        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]="!checkBoxSelection">
+          @if (selection | isMultipleSelection) {
+            <mat-checkbox
+              [checked]="this | isAllSelected"
+              [indeterminate]="this | isNotAllSelected"
+              (change)="$event ? masterToggle() : null"
+            ></mat-checkbox>
+          }
+        </th>
+        <td mat-cell *matCellDef="let row" [class.cdk-visually-hidden]="!checkBoxSelection">
+          <mat-checkbox [checked]="selection | isSelected: row" (click)="toggleSelectRow($event, row)"></mat-checkbox>
+        </td>
+      </ng-container>
+
+      <!-- Id column -->
+      <ng-container matColumnDef="id" [sticky]="sticky">
+        <th mat-header-cell *matHeaderCellDef>
+          <span mat-sort-header>
+            <ion-label title="Id">#</ion-label>
+            <ion-label color="danger" [innerHTML]="'&nbsp;*'"></ion-label>
+          </span>
+        </th>
+        <td mat-cell *matCellDef="let row">
+          <mat-form-field *ngIf="!readOnly && row.id === -1 && row.editing; else readOnlyId">
+            <input
+              matInput
+              autocomplete="off"
+              required
+              [formControl]="row.validator | formGetControl: 'id'"
+              placeholder="Id"
+              [appAutofocus]="true"
+            />
+            <mat-error *ngIf="(row.validator | formGetControl: 'id').hasError('required')" translate>
+              ERROR.FIELD_REQUIRED
+            </mat-error>
+            <mat-error *ngIf="(row.validator | formGetControl: 'id').hasError('alreadyExists')" translate>
+              ERROR.FIELD_NOT_UNIQUE_ID
+            </mat-error>
+          </mat-form-field>
+
+          <ng-template #readOnlyId>
+            <ion-label appAutoTitle>
+              {{ (row.validator | formGetValue: 'id') || (row.currentData | propertyGet: 'id') }}
+            </ion-label>
+          </ng-template>
+        </td>
+      </ng-container>
+
+      <!-- Name column -->
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef [resizable]="resizable">
+          <!-- if sortable, wrap the header with a mat-sort-header -->
+          <span mat-sort-header>
+            <ion-label [title]="'TABLE.TESTING.NAME' | translate">{{ 'TABLE.TESTING.NAME' | translate }}</ion-label>
+            <ion-label color="danger" [innerHTML]="'&nbsp;*'"></ion-label>
+          </span>
+        </th>
+        <td mat-cell *matCellDef="let row" (click)="focusColumn = 'name'">
+          <mat-form-field *ngIf="!readOnly && row.editing; else readOnlyTemplate">
+            <input
+              matInput
+              autocomplete="off"
+              [required]="true"
+              [formControl]="row.validator | formGetControl: 'name'"
+              [placeholder]="'TABLE.TESTING.NAME' | translate"
+              [appAutofocus]="row.id === -1 || focusColumn === 'name'"
+            />
+            <ng-content select="[suffix]"></ng-content>
+            <mat-error *ngIf="(row.validator | formGetControl: 'name').hasError('required')" translate>
+              ERROR.FIELD_REQUIRED
+            </mat-error>
+            <mat-error *ngIf="(row.validator | formGetControl: 'name').hasError('maxlength')" translate>
+              ERROR.FIELD_MAX_LENGTH_COMPACT
+            </mat-error>
+            <mat-error *ngIf="(row.validator | formGetControl: 'name').hasError('minlength')" translate>
+              ERROR.FIELD_MIN_LENGTH_COMPACT
+            </mat-error>
+          </mat-form-field>
+          <ng-template #readOnlyTemplate>
+            <ion-label appAutoTitle>
+              {{ (row.validator | formGetValue: 'name') || (row.currentData | propertyGet: 'name') }}
+            </ion-label>
+          </ng-template>
+        </td>
+      </ng-container>
+
+      <!-- Level column -->
+      <ng-container matColumnDef="levelId">
+        <th mat-header-cell *matHeaderCellDef [resizable]="resizable">
+          <span mat-sort-header>
+            <ion-label>{{ 'TABLE.TESTING.LEVEL_ID' | translate }}</ion-label>
+            <ion-label color="danger" [innerHTML]="'&nbsp;*'"></ion-label>
+          </span>
+        </th>
+        <td mat-cell *matCellDef="let row">
+          <mat-autocomplete-field
+            *ngIf="!readOnly && row.editing; else readOnlyTemplate"
+            panelWidth="750px"
+            [formControl]="row.validator | formGetControl: 'levelId'"
+            [placeholder]="'TABLE.TESTING.LEVEL_ID' | translate"
+            floatLabel="never"
+            [required]="true"
+            [config]="autocompleteFields.level"
+            [highlightAccent]="true"
+          >
+            <mat-error matError *ngIf="(row.validator | formGetControl: 'levelId').hasError('invalid')" translate>
+              ERROR.FIELD_INVALID
+            </mat-error>
+          </mat-autocomplete-field>
+          <ng-template #readOnlyTemplate>
+            <ion-label appAutoTitle>
+              {{
+                autocompleteFields.level?.displayWith(
+                  (row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')
+                ) ||
+                  ((row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')
+                    | referentialToString)
+              }}
+            </ion-label>
+          </ng-template>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="boolean">
+        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]="resizable">
+          <!-- if sortable, wrap the header with a mat-sort-header -->
+          <span mat-sort-header>
+            <ion-label>Boolean</ion-label>
+          </span>
+        </th>
+        <td mat-cell *matCellDef="let row">
+          <mat-boolean-field
+            *ngIf="!readOnly && row.editing; else readOnlyTemplate"
+            floatLabel="never"
+            [style]="'checkbox'"
+            [formControl]="
+              (row.validator | formGetControl: 'boolean') || formBuilder.control(row.currentData['boolean'])
+            "
+            [compact]="true"
+          ></mat-boolean-field>
+          <ng-template #readOnlyTemplate>
+            <ion-label appAutoTitle>
+              {{
+                (row.validator | formGetValue: 'boolean') || (row.currentData | propertyGet: 'boolean')
+                  ? ('COMMON.YES' | translate)
+                  : ('COMMON.NO' | translate)
+              }}
+            </ion-label>
+          </ng-template>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="boolean2">
+        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]="resizable">
+          <!-- if sortable, wrap the header with a mat-sort-header -->
+          <span mat-sort-header>
+            <ion-label>Boolean 2</ion-label>
+          </span>
+        </th>
+        <td mat-cell *matCellDef="let row">
+          <mat-boolean-field
+            *ngIf="!readOnly && row.editing; else readOnlyTemplate"
+            [floatLabel]="'never'"
+            [style]="'radio'"
+            [showRadio]="true"
+            [formControl]="
+              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])
+            "
+          ></mat-boolean-field>
+          <ng-template #readOnlyTemplate>
+            <ion-label appAutoTitle>
+              {{
+                (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')
+                  ? ('COMMON.YES' | translate)
+                  : ('COMMON.NO' | translate)
+              }}
+            </ion-label>
+          </ng-template>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="boolean3">
+        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]="resizable">
+          <!-- if sortable, wrap the header with a mat-sort-header -->
+          <span mat-sort-header>
+            <ion-label>Boolean 3</ion-label>
+          </span>
+        </th>
+        <td mat-cell *matCellDef="let row">
+          <mat-boolean-field
+            *ngIf="!readOnly && row.editing; else readOnlyTemplate"
+            floatLabel="never"
+            [style]="'button'"
+            [formControl]="
+              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])
+            "
+          ></mat-boolean-field>
+          <ng-template #readOnlyTemplate>
+            <ion-label appAutoTitle>
+              {{
+                (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')
+                  ? ('COMMON.YES' | translate)
+                  : ('COMMON.NO' | translate)
+              }}
+            </ion-label>
+          </ng-template>
+        </td>
+      </ng-container>
+
+      <!-- Actions buttons column -->
+      <app-actions-column
+        [stickyEnd]="stickyEnd"
+        [canCancel]="false"
+        [style]="'table'"
+        (optionsClick)="openSelectColumnsModal($event)"
+        (cancelOrDeleteClick)="cancelOrDelete($event.event, $event.row)"
+        (confirmAndAddClick)="confirmAndAdd($event.event, $event.row)"
+        (backward)="confirmAndBackward($event.event, $event.row)"
+        (forward)="confirmAndForward($event.event, $event.row)"
+        [cellTemplate]="cellInjection"
+      >
+        <!-- cell injection-->
+        <ng-template #cellInjection let-row>
+          <span *ngIf="row.editing && !row.validator.dirty">-</span>
+        </ng-template>
+      </app-actions-column>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+      <tr
+        mat-row
+        *matRowDef="let row; columns: displayedColumns"
+        [class.mat-row-selected]="row.editing"
+        [class.mat-row-error]="row.invalid"
+        [class.mat-row-disabled]="!row.editing"
+        [class.mat-row-dirty]="row.dirty"
+        (click)="clickRow($event, row)"
+        (keydown.escape)="escapeEditingRow($event)"
+        [cdkTrapFocus]="row.invalid"
+      ></tr>
+    </table>
+
+    <ng-container *ngIf="loadingSubject | async; else noResult">
+      <ion-item>
+        <ion-skeleton-text animated></ion-skeleton-text>
+      </ion-item>
+    </ng-container>
+
+    <ng-template #noResult>
+      <ion-item *ngIf="totalRowCount === 0">
+        <ion-text color="danger" class="text-italic" translate>COMMON.NO_RESULT</ion-text>
+      </ion-item>
+    </ng-template>
+
+    <ion-infinite-scroll
+      *ngIf="enableInfiniteScroll"
+      [threshold]="mobile ? '10%' : '2%'"
+      position="bottom"
+      (ionInfinite)="fetchMore($event)"
+    >
+      <ion-infinite-scroll-content
+        loadingSpinner="circles"
+        [loadingText]="'COMMON.LOADING_DOTS' | translate"
+      ></ion-infinite-scroll-content>
+    </ion-infinite-scroll>
+  </div>
+</ion-content>
+
+<ion-footer>
+  <!-- Paginator  -->
+  <mat-paginator
+    *ngIf="!enableInfiniteScroll"
+    [length]="totalRowCount"
+    [pageSize]="defaultPageSize"
+    [pageSizeOptions]="defaultPageSizeOptions"
+    showFirstLastButtons
+  ></mat-paginator>
+
+  <app-form-buttons-bar
+    *ngIf="canEdit && !mobile"
+    (onCancel)="load()"
+    (onSave)="save()"
+    [disabled]="(loadingSubject | async) || !dirty"
+  >
+    <!-- error -->
+    <ion-item *ngIf="error$ | async" lines="none">
+      <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
+      <ion-label color="danger" [innerHTML]="error | translate"></ion-label>
+    </ion-item>
+  </app-form-buttons-bar>
+</ion-footer>
+
+<ion-fab slot="fixed" vertical="bottom" horizontal="end" *ngIf="canEdit && mobile">
+  <ion-fab-button color="tertiary" (click)="addRow($event)">
+    <ion-icon name="add"></ion-icon>
+  </ion-fab-button>
+</ion-fab>

package/src/app/core/table/testing/table2.testing.scss

@@ -0,0 +1,25 @@
+.table-container {
+  .mat-mdc-table {
+    .mat-column-select {
+      min-width: 30px;
+    }
+    .mat-column-id {
+      min-width: 30px;
+      max-width: 30px;
+    }
+    .mat-column-label,
+    .mat-column-name,
+    .mat-column-levelId,
+    .mat-column-statusId {
+      min-width: 150px;
+    }
+    .mat-column-comments {
+      min-width: 100px;
+      max-width: 100px;
+    }
+    .mat-column-updateDate {
+      min-width: 110px;
+      max-width: 110px;
+    }
+  }
+}