@sumaris-net/ngx-components 2.6.4-alpha5 → 2.6.4-alpha6

package/src/app/admin/users/users.html

@@ -1,427 +0,0 @@
-<app-toolbar [title]="'USER.LIST.TITLE'|translate"
-             color="primary"
-             [canGoBack]="false"
-             [hasValidate]="!(loadingSubject|async) && dirty"
-             (onValidate)="save()">
-  <ion-buttons slot="end">
-
-    <!-- Compose message -->
-    <button mat-icon-button *ngIf="canSendMessage"
-            [title]="'USER.LIST.BTN_SEND_MESSAGE'|translate"
-            (click)="openComposeMessageModal($event)">
-      <ion-icon name="mail" slot="icon-only"></ion-icon>
-    </button>
-
-    <ng-container *ngIf="!selection.hasValue(); else hasSelection">
-      <!-- Add -->
-      <button mat-icon-button
-              *ngIf="canEdit && !mobile"
-              [title]="'COMMON.BTN_ADD'|translate"
-              (click)="addRow()">
-        <mat-icon>add</mat-icon>
-      </button>
-
-      <!-- Refresh -->
-      <button mat-icon-button *ngIf="!mobile"
-              [title]="'COMMON.BTN_REFRESH'|translate"
-              (click)="onRefresh.emit()">
-        <mat-icon>refresh</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">filter_list_alt
-        </mat-icon>
-        <ng-template #emptyFilter>
-          <mat-icon>filter_list_alt</mat-icon>
-        </ng-template>
-      </button>
-    </ng-container>
-
-    <ng-template #hasSelection>
-
-      <!-- delete -->
-      <button mat-icon-button
-              class="hidden-xs hidden-sm"
-              [title]="'COMMON.BTN_DELETE'|translate"
-              (click)="deleteSelection($event)">
-        <mat-icon>delete</mat-icon>
-      </button>
-    </ng-template>
-  </ion-buttons>
-</app-toolbar>
-
-<ion-content class="ion-no-padding">
-
-  <!-- error -->
-  <ion-item *ngIf="errorSubject|async ; let 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>
-
-  <!-- debug -->
-  <app-debug *ngIf="debug">
-    <ion-grid class="ion-no-padding">
-      <ion-row>
-        <ion-col>
-          focusColumn: {{focusColumn}}<br/>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
-  </app-debug>
-
-  <!-- search -->
-  <mat-expansion-panel #filterExpansionPanel class="ion-no-padding filter-panel filter-panel-floating">
-    <form class="form-container ion-padding" [formGroup]="filterForm" (ngSubmit)="onRefresh.emit()">
-      <ion-grid>
-        <ion-row>
-          <ion-col>
-            <!-- search -->
-            <mat-form-field>
-              <input matInput [placeholder]="'USER.LIST.FILTER.SEARCH'|translate" formControlName="searchText">
-
-              <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-col>
-            <!-- status -->
-            <mat-form-field>
-              <mat-select formControlName="statusId" [placeholder]="'USER.STATUS'|translate">
-                <mat-option [value]="null"><i><span translate>COMMON.EMPTY_OPTION</span></i></mat-option>
-                <mat-option *ngFor="let item of statusList" [value]="item.id">
-                  <ion-icon [name]="item.icon"></ion-icon>
-                  {{ item.label |translate }}
-                </mat-option>
-              </mat-select>
-
-              <button mat-icon-button matSuffix tabindex="-1"
-                      type="button"
-                      (click)="clearControlValue($event, filterForm.controls.statusId)"
-                      [hidden]="filterForm.controls.statusId.disabled || !filterForm.controls.statusId.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>
-
-      <!-- Close panel -->
-      <ion-button mat-button fill="clear" color="dark"
-                  (click)="filterExpansionPanel.close()"
-                  [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)"
-                  [disabled]="loadingSubject|async">
-        <ion-text translate>COMMON.BTN_APPLY</ion-text>
-      </ion-button>
-
-    </mat-action-row>
-  </mat-expansion-panel>
-
-  <!-- error -->
-  <ion-item *ngIf="errorSubject|async ; let error" visible-xs visible-sm visible-mobile lines="none">
-    <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
-    <ion-label color="danger" class="error" [innerHTML]="error|translate"></ion-label>
-  </ion-item>
-
-  <div class="table-container">
-    <table #table mat-table matSort
-           [dataSource]="dataSource"
-           [matSortActive]="defaultSortBy" [matSortDirection]="defaultSortDirection"
-           matSortDisableClear [trackBy]="trackByFn">
-
-      <ng-container matColumnDef="select" [sticky]="useSticky">
-        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]="!inlineEdition">
-          <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
-                        [indeterminate]="selection.hasValue() && !isAllSelected()">
-          </mat-checkbox>
-        </th>
-        <td mat-cell *matCellDef="let row" [class.cdk-visually-hidden]="!inlineEdition">
-          <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
-          </mat-checkbox>
-        </td>
-      </ng-container>
-
-      <!-- Id Column -->
-      <ng-container matColumnDef="id" [sticky]="useSticky">
-        <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>
-
-      <!-- avatar Column -->
-      <ng-container matColumnDef="avatar" [sticky]="useSticky">
-        <th mat-header-cell *matHeaderCellDef></th>
-        <td mat-cell *matCellDef="let row">
-          <div class="avatar" *ngIf="row.currentData.avatar; else generateIcon"
-               [ngStyle]="{'background-image':'url('+row.currentData.avatar+')'}"></div>
-          <ng-template #generateIcon>
-            <div class="avatar">
-              <svg width="38" width="38" [data-jdenticon-value]="row.currentData.id"></svg>
-            </div>
-          </ng-template>
-        </td>
-      </ng-container>
-
-      <!-- lastName  -->
-      <ng-container matColumnDef="lastName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>
-          <span translate>USER.LAST_NAME</span>
-        </th>
-        <td mat-cell *matCellDef="let row" (click)="focusColumn='lastName'">
-          <mat-form-field floatLabel="never">
-            <input matInput
-                   [formControl]="row.validator.controls['lastName']"
-                   [placeholder]="'USER.LAST_NAME'|translate"
-                   [readonly]="!row.editing"
-                   [appAutofocus]="row.editing && focusColumn==='lastName'">
-            <mat-error *ngIf="row.validator.controls['lastName'].hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
-            <mat-error *ngIf="row.validator.controls['lastName'].hasError('minlength')">
-              <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>
-            </mat-error>
-          </mat-form-field>
-        </td>
-
-      </ng-container>
-
-      <!-- firstname -->
-      <ng-container matColumnDef="firstName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>
-          <span translate>USER.FIRST_NAME</span>
-        </th>
-        <td mat-cell *matCellDef="let row"
-            (click)="focusColumn='firstName'">
-          <mat-form-field floatLabel="never">
-            <input matInput [formControl]="row.validator.controls['firstName']"
-                   [placeholder]="'USER.FIRST_NAME'|translate"
-                   [readonly]="!row.editing"
-                   [appAutofocus]="row.editing && focusColumn==='firstName'">
-            <mat-error *ngIf="row.validator.controls['firstName'].hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
-            <mat-error *ngIf="row.validator.controls['firstName'].hasError('minlength')">
-              <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>
-            </mat-error>
-          </mat-form-field>
-        </td>
-      </ng-container>
-
-      <!-- email  -->
-      <ng-container matColumnDef="email">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>
-          <span translate>USER.EMAIL</span>
-        </th>
-        <td mat-cell *matCellDef="let row" (click)="focusColumn='email'">
-          <mat-form-field floatLabel="never">
-            <input matInput [formControl]="row.validator.controls['email']"
-                   [placeholder]="'USER.EMAIL'|translate"
-                   [readonly]="!row.editing"
-                   [appAutofocus]="row.editing && focusColumn==='email'">
-            <mat-error *ngIf="row.validator.controls['email'].hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
-            <mat-error *ngIf="row.validator.controls['email'].hasError('email')">
-              <span translate>ERROR.FIELD_NOT_VALID_EMAIL</span>
-            </mat-error>
-          </mat-form-field>
-        </td>
-      </ng-container>
-
-      <!-- additional fields -->
-      <ng-container *ngFor="let definition of additionalFields" [matColumnDef]="definition.key">
-        <th mat-header-cell *matHeaderCellDef>
-          <span>{{definition.label|translate}}</span>
-        </th>
-        <td mat-cell *matCellDef="let row"
-            (click)="focusColumn=definition.key">
-          <app-form-field floatLabel="never"
-                          [definition]="definition"
-                          [formControl]="row.validator.controls[definition.key]"
-                          [required]="definition.extra?.account?.required"
-                          [autofocus]="row.editing && focusColumn===definition.key">
-          </app-form-field>
-        </td>
-      </ng-container>
-
-      <!-- profile column  -->
-      <ng-container matColumnDef="profile">
-        <th mat-header-cell *matHeaderCellDef>
-          <span translate>USER.PROFILE</span>
-        </th>
-        <td mat-cell *matCellDef="let row"
-            (click)="focusColumn='profile'">
-          <mat-form-field floatLabel="never">
-            <mat-select [formControl]="row.validator.controls['mainProfile']"
-                        [placeholder]="'USER.PROFILE'|translate">
-              <mat-option *ngFor="let item of profiles" [value]="item">
-                {{ ('USER.PROFILE_ENUM.' + item) | uppercase |translate }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="row.validator.controls['mainProfile'].hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
-          </mat-form-field>
-        </td>
-      </ng-container>
-
-      <!-- Status column  -->
-      <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef>
-          <span translate>USER.STATUS</span>
-        </th>
-        <td mat-cell *matCellDef="let row"
-            (click)="focusColumn='status'">
-          <mat-form-field floatLabel="never">
-            <ion-icon matPrefix *ngIf="row.validator.controls['statusId'].value &gt;=0" [name]="statusById[row.validator.controls['statusId'].value]?.icon"></ion-icon>
-
-            <mat-select [formControl]="row.validator.controls['statusId']"
-                        [placeholder]="'REFERENTIAL.STATUS'|translate">
-              <mat-select-trigger>
-                <span *ngIf="row.validator.controls['statusId'].value &gt;=0">
-                  {{ statusById[row.validator.controls['statusId'].value]?.label | translate}}</span>
-              </mat-select-trigger>
-              <mat-option *ngFor="let item of statusList" [value]="item.id">
-                <ion-icon [name]="item.icon"></ion-icon>
-                {{ item.label |translate }}
-              </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>
-
-      <!-- username -->
-      <ng-container matColumnDef="username">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>
-          <span translate>USER.USERNAME</span>
-        </th>
-        <td mat-cell *matCellDef="let row"
-            (click)="focusColumn='username'">
-          <mat-form-field floatLabel="never" >
-            <input matInput [formControl]="row.validator.controls.username"
-                   [placeholder]="'USER.USERNAME'|translate"
-                   [readonly]="!row.editing"
-                   [appAutofocus]="row.editing && focusColumn==='username'">
-            <mat-error *ngIf="row.validator.controls.username.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
-          </mat-form-field>
-        </td>
-      </ng-container>
-
-      <!-- username extranet -->
-      <ng-container matColumnDef="usernameExtranet">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>
-          <span translate>USER.USERNAME_EXTRANET</span>
-        </th>
-        <td mat-cell *matCellDef="let row"
-            (click)="focusColumn='usernameExtranet'">
-          <mat-form-field floatLabel="never">
-            <input matInput [formControl]="row.validator.controls.usernameExtranet"
-                   [placeholder]="'USER.USERNAME_EXTRANET'|translate"
-                   [readonly]="!row.editing"
-                   [appAutofocus]="row.editing && focusColumn==='usernameExtranet'">
-            <mat-error *ngIf="row.validator.controls.usernameExtranet.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
-          </mat-form-field>
-        </td>
-      </ng-container>
-
-      <!-- pubkey  -->
-      <ng-container matColumnDef="pubkey">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>
-          <span translate>USER.PUBKEY</span>
-        </th>
-        <td mat-cell *matCellDef="let row"
-            [title]="row.validator.controls.pubkey.valueChanges|async"
-            (click)="focusColumn='pubkey'">
-          <mat-form-field floatLabel="never">
-            <input matInput [formControl]="row.validator.controls['pubkey']" [placeholder]="'USER.PUBKEY'|translate"
-                   [readonly]="!row.editing" autocomplete="off">
-            <mat-error *ngIf="row.validator.controls.pubkey.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
-            <mat-error *ngIf="row.validator.controls.pubkey.hasError('pubkey')">
-              <span translate>ERROR.FIELD_NOT_VALID_PUBKEY</span>
-            </mat-error>
-          </mat-form-field>
-        </td>
-      </ng-container>
-
-      <!-- Actions buttons column -->
-      <app-actions-column [stickyEnd]="useSticky"
-                          (optionsClick)="openSelectColumnsModal($event)"
-                          (cancelOrDeleteClick)="cancelOrDelete($event.event, $event.row)"
-                          (confirmEditCreateClick)="confirmEditCreate($event.event, $event.row)"
-                          (confirmAndAddClick)="confirmAndAdd($event.event, $event.row)"
-                          (backward)="confirmAndBackward($event.event, $event.row)"
-                          (forward)="confirmAndForward($event.event, $event.row)"
-                          [canCancel]="false">
-      </app-actions-column>
-
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"
-          [class.mat-row-error]="row.validator.invalid"
-          [class.mat-row-dirty]="row.currentData.dirty"
-          [class.mat-row-disabled]="!row.editing"
-          (click)="clickRow($event, row)"
-          (keydown.escape)="escapeEditingRow($event)"
-          [cdkTrapFocus]="!row.validator?.valid"></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>
-  </div>
-</ion-content>
-
-<ion-footer>
-  <mat-paginator class="mat-paginator-footer"
-                 [length]="totalRowCount" [pageSize]="defaultPageSize"
-                 [pageSizeOptions]="defaultPageSizeOptions" showFirstLastButtons>
-  </mat-paginator>
-
-  <app-form-buttons-bar *ngIf="!mobile && inlineEdition"
-                        (onCancel)="onRefresh.emit()" (onSave)="save()" [disabled]="(loadingSubject|async) || !dirty"></app-form-buttons-bar>
-</ion-footer>
-
-<ion-fab slot="fixed" vertical="bottom" horizontal="end" *ngIf="mobile">
-  <ion-fab-button color="tertiary" (click)="addRow()">
-    <ion-icon name="add"></ion-icon>
-  </ion-fab-button>
-</ion-fab>

package/src/app/admin/users/users.module.ts

@@ -1,34 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {CoreModule} from '../../core/core.module';
-import {UsersPage} from './users';
-import {SocialModule} from '../../social/social.module';
-import {NgxJdenticonModule} from 'ngx-jdenticon';
-import {TranslateModule} from '@ngx-translate/core';
-import {SharedMaterialModule} from '../../shared/material/material.module';
-import {SharedDebugModule} from '../../shared/debug/debug.module';
-
-@NgModule({
-  imports: [
-    NgxJdenticonModule,
-    TranslateModule.forChild(),
-
-    // App modules
-    CoreModule,
-    SocialModule,
-    SharedMaterialModule,
-    SharedDebugModule
-  ],
-  declarations: [
-    UsersPage
-  ],
-  exports: [
-    SocialModule,
-    TranslateModule,
-
-    // Components
-    UsersPage
-  ]
-})
-export class AdminUsersModule {
-}

package/src/app/admin/users/users.scss

@@ -1,59 +0,0 @@
-.mat-expansion-panel {
-  margin-bottom: 5px;
-
-  .form-container {
-    mat-form-field {
-      width: 100%;
-    }
-  }
-
-  mat-action-row {
-    ion-label {
-      line-height: 36px;
-    }
-  }
-}
-
-.table-container {
-  height: calc(100%);
-}
-
-.mat-table {
-  .mat-cell .avatar {
-    height: 40px;
-    width: 40px;
-    margin: 2px 0 0 0;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-  .mat-column-id {
-    width: 30px;
-  }
-  .mat-column-avatar {
-    width: 50px;
-    .avatar {
-      border-radius: 5px;
-      border: solid 1px rgba(var(--ion-color-secondary-rgb), 0.5);
-    }
-  }
-
-  .mat-column-lastName,
-  .mat-column-firstName {
-    min-width: 80px;
-  }
-  .mat-column-email,
-  .mat-column-pubkey,
-  .mat-column-department {
-    min-width: 180px;
-  }
-  .mat-column-profile {
-    min-width: 110px;
-  }
-  .mat-column-status {
-    min-width: 130px;
-  }
-}