@sumaris-net/ngx-components 18.14.0 → 18.14.1

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

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

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

@@ -1,32 +0,0 @@
-.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;
-    }
-  }
-}