@sumaris-net/ngx-components 18.12.0 → 18.12.2

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

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

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