@sumaris-net/ngx-components 18.13.0 → 18.14.0

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

@@ -0,0 +1,556 @@
+<app-toolbar
+  color="primary"
+  [canGoBack]="true"
+  [hasValidate]="(loadingSubject | async) !== true && (dirtySubject | async) === true"
+  (onValidate)="save()"
+  [backHref]="'/testing'"
+>
+  <ion-title>Table (click to edit)</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>
+
+      <!-- start/stop timer to auto-load data -->
+      <ion-button *ngIf="!timer" (click)="startTimer()">Start reload</ion-button>
+      <ion-button *ngIf="timer" (click)="stopTimer()" color="accent">Stop reload</ion-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'"
+    >
+      <!-- group header cells -->
+      <ng-container matColumnDef="top-start" [sticky]="sticky">
+        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]="!canEdit" [attr.colspan]="2">
+          <!-- start spacer -->
+        </th>
+      </ng-container>
+
+      <ng-container matColumnDef="group-1">
+        <th mat-header-cell *matHeaderCellDef [attr.colspan]="3">
+          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_1' }}</ion-label>
+        </th>
+      </ng-container>
+
+      <ng-container matColumnDef="group-2">
+        <th mat-header-cell *matHeaderCellDef [attr.colspan]="displayedColumns.length - 6">
+          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_2' }}</ion-label>
+        </th>
+      </ng-container>
+
+      <ng-container matColumnDef="top-end" [stickyEnd]="stickyEnd">
+        <th mat-header-cell *matHeaderCellDef>
+          <!-- end spacer -->
+          <ion-label></ion-label>
+        </th>
+      </ng-container>
+
+      <ng-container matColumnDef="select" [sticky]="sticky" [class.mat-column-sticky]="sticky">
+        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]="!canEdit">
+          @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]="!canEdit">
+          <mat-checkbox
+            (click)="toggleSelectRow($event, row)"
+            [checked]="selection | isSelected: row"
+            tabindex="-1"
+          ></mat-checkbox>
+        </td>
+      </ng-container>
+
+      <!-- Id column -->
+      <ng-container matColumnDef="id" [sticky]="sticky" [class.mat-column-sticky]="sticky">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          <ion-label>#</ion-label>
+        </th>
+        <td mat-cell *matCellDef="let row">{{ row.currentData?.id }}</td>
+      </ng-container>
+
+      <!-- Label column -->
+      <ng-container matColumnDef="label">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          <ion-label translate>TABLE.TESTING.LABEL</ion-label>
+        </th>
+        <td mat-cell *matCellDef="let row" (click)="focusColumn = 'label'">
+          @if (row.editing) {
+            <mat-form-field>
+              <input
+                matInput
+                autocomplete="off"
+                [formControl]="row.validator.controls['label']"
+                [placeholder]="'TABLE.TESTING.LABEL' | translate"
+                [appAutofocus]="focusColumn === 'label'"
+                [readonly]="!row.editing"
+              />
+              <mat-error *ngIf="row.validator.controls['label'].hasError('required')" translate>
+                ERROR.FIELD_REQUIRED
+              </mat-error>
+            </mat-form-field>
+          } @else {
+            <ion-label appAutoTitle>
+              {{ row.validator | formGetValue: 'label' }}
+            </ion-label>
+          }
+        </td>
+      </ng-container>
+
+      <!-- Name column -->
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          <ion-label translate>TABLE.TESTING.NAME</ion-label>
+        </th>
+        <td mat-cell *matCellDef="let row" (click)="focusColumn = 'name'">
+          @if (row.editing) {
+            <mat-form-field>
+              <input
+                matInput
+                [formControl]="row.validator?.controls.name"
+                [placeholder]="'TABLE.TESTING.NAME' | translate"
+                [appAutofocus]="focusColumn === 'name'"
+              />
+              <mat-error *ngIf="row.validator?.controls.name.hasError('required')" translate>
+                ERROR.FIELD_REQUIRED
+              </mat-error>
+            </mat-form-field>
+          } @else {
+            <ion-label appAutoTitle>
+              {{ row.validator | formGetValue: 'name' }}
+            </ion-label>
+          }
+        </td>
+      </ng-container>
+
+      <!-- Level column -->
+      <ng-container matColumnDef="levelId">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          <ion-label translate>TABLE.TESTING.LEVEL_ID</ion-label>
+        </th>
+        <td mat-cell *matCellDef="let row" (click)="focusColumn = 'levelId'">
+          @if (row.editing) {
+            <mat-autocomplete-field
+              [formControl]="row.validator.controls.levelId"
+              [placeholder]="'TABLE.TESTING.LEVEL_ID' | translate"
+              floatLabel="never"
+              [config]="autocompleteFields.level"
+              [readonly]="!row.editing"
+              [autofocus]="focusColumn === 'levelId'"
+              [required]="true"
+            ></mat-autocomplete-field>
+          } @else {
+            <ion-label appAutoTitle>
+              {{ row.validator | formGetValue: 'levelId' | referentialToString: autocompleteFields.level.attributes }}
+            </ion-label>
+          }
+        </td>
+      </ng-container>
+
+      <!-- Status column  -->
+      <ng-container matColumnDef="statusId">
+        <th mat-header-cell *matHeaderCellDef>
+          <span translate>USER.STATUS</span>
+        </th>
+        <td
+          mat-cell
+          *matCellDef="let row"
+          [class.mat-form-field-disabled]="!row.editing"
+          (click)="focusColumn = 'statusId'"
+        >
+          <mat-form-field>
+            <mat-select
+              [formControl]="row.validator.controls['statusId']"
+              [placeholder]="i18nColumnPrefix + 'STATUS_ID' | translate"
+            >
+              <mat-option *ngFor="let item of statusList" [value]="item.id">
+                <mat-icon><ion-icon [name]="item.icon"></ion-icon></mat-icon>
+                <mat-label>{{ item.label | translate }}</mat-label>
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="row.validator.controls['statusId'].hasError('required')" translate>
+              ERROR.FIELD_REQUIRED
+            </mat-error>
+          </mat-form-field>
+        </td>
+      </ng-container>
+
+      <!-- Enum column  -->
+      <!-- NOTE : Never used in table  -->
+      <!--      <ng-container matColumnDef="values">-->
+      <!--        <th mat-header-cell *matHeaderCellDef>-->
+      <!--          <span translate>Enums</span>-->
+      <!--        </th>-->
+      <!--        <td mat-cell *matCellDef="let row" [class.mat-form-field-disabled]="!row.editing">-->
+      <!--          <app-form-field-->
+      <!--            [formControl]="row.validator|formGetControl:'properties.values'"-->
+      <!--            [definition]="columnDefinitions['values']"-->
+      <!--          ></app-form-field>-->
+      <!--        </td>-->
+      <!--      </ng-container>-->
+
+      <!-- boolean (as checkbox) -->
+      <ng-container matColumnDef="boolean">
+        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]="true">
+          <!-- 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">
+          @if (!readOnly && row.editing) {
+            <mat-boolean-field
+              floatLabel="never"
+              [style]="'checkbox'"
+              placeholder="Oui/Non"
+              [formControl]="row.validator | formGetControl: 'properties.boolean'"
+              [compact]="true"
+            ></mat-boolean-field>
+          } @else {
+            <ion-label appAutoTitle>
+              {{ (row.validator | formGetValue: 'properties.boolean') ? '&#x2714;' : '&#x2718;' }}
+            </ion-label>
+          }
+        </td>
+      </ng-container>
+
+      <!-- date -->
+      <ng-container matColumnDef="date">
+        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]="true" class="mat-cell-date-time">
+          <!-- if sortable, wrap the header with a mat-sort-header -->
+          <span mat-sort-header>
+            <ion-label>Date</ion-label>
+          </span>
+        </th>
+        <td mat-cell *matCellDef="let row" class="mat-cell-date-time" (click)="focusColumn = 'date'">
+          @if (!readOnly && row.editing) {
+            <mat-date-time-field
+              floatLabel="never"
+              [formControl]="row.validator | formGetControl: 'properties.date'"
+              [autofocus]="focusColumn === 'date'"
+              placeholder="Date/Time"
+              [compact]="true"
+            ></mat-date-time-field>
+          } @else {
+            <ion-label appAutoTitle>
+              {{ row.validator | formGetValue: 'properties.date' | dateFormat: { time: true } }}
+            </ion-label>
+          }
+        </td>
+      </ng-container>
+
+      <!-- latitude -->
+      <ng-container matColumnDef="latitude">
+        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]="true">
+          <!-- if sortable, wrap the header with a mat-sort-header -->
+          <span mat-sort-header>
+            <ion-label>Latitude</ion-label>
+          </span>
+        </th>
+        <td mat-cell *matCellDef="let row" (click)="focusColumn = 'latitude'">
+          @if (!readOnly && row.editing) {
+            <mat-latlong-field
+              floatLabel="never"
+              [formControl]="row.validator | formGetControl: 'properties.latitude'"
+              placeholder="Latitude"
+              [latLongPattern]="'DDMM'"
+              [type]="'latitude'"
+              [autofocus]="focusColumn === 'latitude'"
+            ></mat-latlong-field>
+          } @else {
+            <ion-label appAutoTitle>
+              {{
+                row.validator
+                  | formGetValue: 'properties.latitude'
+                  | latitudeFormat: { pattern: 'DDMM', placeholderChar: '0' }
+              }}
+            </ion-label>
+          }
+        </td>
+      </ng-container>
+
+      <!-- Creation date column -->
+      <ng-container matColumnDef="updateDate">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          <ion-label translate>TABLE.TESTING.UPDATE_DATE</ion-label>
+        </th>
+        <td mat-cell *matCellDef="let row" class="mat-form-field-disabled">
+          <ion-text color="medium" *ngIf="row.id !== -1">
+            <small>
+              {{ row.validator | formGetValue: 'creationDate' | dateFormat: { time: true } }}
+            </small>
+          </ion-text>
+        </td>
+      </ng-container>
+
+      <!-- Comment column -->
+      <ng-container matColumnDef="comments">
+        <th mat-header-cell *matHeaderCellDef>
+          <ion-label translate>TABLE.TESTING.COMMENTS</ion-label>
+        </th>
+        <td mat-cell *matCellDef="let row">
+          <mat-form-field *ngIf="row.editing; else iconComment">
+            <!--<textarea matInput [formControl]="row.validator?.controls.comments"
+                      [placeholder]="'TABLE.TESTING.COMMENTS'|translate"
+                      [readonly]="!row.editing"></textarea>-->
+
+            <input
+              type="text"
+              matInput
+              [formControl]="row.validator?.controls.comments"
+              [placeholder]="'TABLE.TESTING.COMMENTS' | translate"
+              [readonly]="!row.editing"
+            />
+          </mat-form-field>
+
+          <ng-template #iconComment>
+            <ion-icon
+              [color]="row.validator?.controls.comments.value ? 'tertiary' : 'medium'"
+              name="chatbox"
+              slot="icon-only"
+            ></ion-icon>
+          </ng-template>
+        </td>
+      </ng-container>
+
+      <!-- Actions column -->
+      <app-nav-actions-column
+        [stickyEnd]="stickyEnd"
+        (optionsClick)="openSelectColumnsModal($event)"
+        [cellTemplate]="cellInjection"
+        [showPending]="true"
+      >
+        <!-- cell injection-->
+        <ng-template #cellInjection let-row>
+          <span *ngIf="row.editing && !row.validator.dirty">-</span>
+        </ng-template>
+      </app-nav-actions-column>
+
+      <tr mat-header-row *matHeaderRowDef="groupColumns"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+      <tr
+        mat-row
+        *matRowDef="let row; columns: displayedColumns"
+        [class.mat-mdc-row-selected]="row.editing"
+        [class.mat-mdc-row-error]="row.invalid"
+        [class.mat-mdc-row-disabled]="!row.editing"
+        [class.mat-mdc-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/table.testing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { CoreModule } from '../../core.module';
+import { TableTestPage } from './table.testing';
+import { SharedModule } from '../../../shared/shared.module';
+import { FormsModule } from '@angular/forms';
+import { Table2TestPage } from './table2.testing';
+import { ResizableModule } from '../../../shared/directives/resizable/resizable.module';
+
+@NgModule({
+  imports: [CommonModule, SharedModule, CoreModule, TranslateModule.forChild(), FormsModule, ResizableModule],
+  declarations: [TableTestPage, Table2TestPage],
+  exports: [TableTestPage, Table2TestPage, TranslateModule],
+})
+export class TableTestingModule {}

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

@@ -0,0 +1,32 @@
+.table-container {
+  .mat-mdc-table {
+    --mat-column-actions-min-width: 62px;
+    --mat-column-actions-max-width: 62px;
+
+    .mat-row-selected {
+      padding: 3px;
+    }
+
+    .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;
+    }
+  }
+}