nuxeo-development-framework 4.1.4 → 4.1.6

package/src/lib/components/table/table/table.component.html

@@ -0,0 +1,414 @@
+<div class="iner-table-container" [style]="'width:' + tableWidth" *ngIf="tableMode === 'list' && !responsiveView">
+  <ngx-datatable
+    [ngClass]="{'overflowVisible': customFirstRow}"
+    class="large-table"
+    [rows]="rows"
+    [summaryRow]="customFirstRow"
+    [columnMode]="'force'"
+    [externalSorting]="true"
+    (activate)="rowDetails($event)"
+    (select)="onSelect($event)"
+    (sort)="onSort($event)"
+    (window:resize)="assignTableColumns($event)"
+    [rowHeight]="'auto'"
+    [selected]="selected"
+    [selectionType]="multiSelectRows ? 'checkbox' : 'single'"
+    [sorts]="[{ prop: defultSort?.name, dir: defultSort?.dir }]"
+  >
+
+  <ngx-datatable-column
+  *ngIf="multiSelectRows"
+  [width]="30"
+  [sortable]="false"
+  [prop]="''"
+  [canAutoResize]="false"
+  [draggable]="false"
+  [resizeable]="false"
+>
+  <ng-template
+    ngx-datatable-header-template
+    let-value="value"
+    let-allRowsSelected="allRowsSelected"
+    let-selectFn="selectFn"
+  >
+    <!-- <input class="checkbox-input" type="checkbox" [checked]="allRowsSelected" (change)="selectFn(!allRowsSelected)" /> -->
+    <mat-checkbox color="primary" [checked]="allRowsSelected" (change)="selectFn(!allRowsSelected)">
+  </mat-checkbox>
+  </ng-template>
+  <ng-template
+    ngx-datatable-cell-template
+    let-value="value"
+    let-isSelected="isSelected"
+    let-onCheckboxChangeFn="onCheckboxChangeFn"
+  >
+    <!-- <input class="checkbox-input" type="checkbox" [checked]="isSelected" (change)="onCheckboxChangeFn($event)" /> -->
+    <mat-checkbox color="primary" [checked]="isSelected" (change)="onCheckboxChangeFn(!allRowsSelected)">
+    </mat-checkbox>
+  </ng-template>
+</ngx-datatable-column>
+    <!-- | translate -->
+    <ng-container *ngFor="let column of tableColumns; let i = index">
+      <ng-container *permission="{name: column.permission}">
+        <ngx-datatable-column *ngIf="column.display" [sortable]="column.sortable"
+          [name]="prefix + column.name | translate" [prop]="column.prop" [resizeable]="false" [draggable]="false"
+          [maxWidth]="column.size" [headerClass]="column.headerClass ? column.headerClass : ''"
+          [summaryTemplate]="(customFirstRow) ? customRowTemplate : null">
+          <ng-template let-row="row" let-value="value" let-index="index" ngx-datatable-cell-template>
+            <ng-container *ngIf="column.type === 'text'">
+              <div class="cell-text-wrapper">
+                {{ value ? value : "--" }}
+              </div>
+            </ng-container>
+
+            <ng-container *ngIf="column.type === 'vocabulary'">
+              <div class="cell-text-wrapper">
+                <cts-dropdown-viewer [withOutLabel]="true" [value]="value" [dropdownId]="column.vocabularyId">
+                </cts-dropdown-viewer>
+              </div>
+            </ng-container>
+
+            <ng-container *ngIf="column.type === 'VocCell'">
+              <div class="cell-text-wrapper">
+                {{ (value ? column.vocabularyId + '.' + value : "--") | translate }}
+              </div>
+            </ng-container>
+
+            <ng-container *ngIf="column.type === 'VocItem'">
+              <div class="cell-text-wrapper">
+                {{ vocItemTranslationPrefix + value | translate }}
+              </div>
+            </ng-container>
+            <ng-container *ngIf="column.type === 'department'">
+              <div class="cell-text-wrapper">
+                <cts-department-viewer [noStyle]="true" [value]="value">
+                </cts-department-viewer>
+              </div>
+            </ng-container>
+
+            <ng-container *ngIf="column.type === 'status'">
+              <div class="status-wrapper">
+                <span class="value {{ value }}">
+                  <span *ngIf="statusIcons && statusIcons !== {}" class="status-icon {{statusIcons[value]}}"></span>
+                  {{"STATS." + value | translate }}
+                </span>
+              </div>
+            </ng-container>
+
+            <ng-container *ngIf="column.type === 'role'">
+              <div class="cell-text-wrapper">
+                {{ "role." + (value ? value : "--") | translate }}
+              </div>
+            </ng-container>
+
+          <ng-container *ngIf="column.type === 'actions' && rows.length !== 0">
+            <div [ngClass]="disabledActions ? 'disabled-actions-wrapper' : 'actions-wrapper'" *ngIf="!showActionsAsMenu">
+              <!-- <span class="bi bi-trash delete-icon" (click)="performAction(row , 'delete')"></span> -->
+              <i
+                class="bi bi-pencil-square edit-icon"
+                matTooltip="{{ 'UPDATE' | translate }}"
+                (click)="performAction(row, 'edit')"
+                *ngIf="entityType === 'voc-table'"
+              ></i>
+              <i
+                class="bi bi-trash"
+                matTooltip="{{ 'delete' | translate }}"
+                (click)="performAction(row, 'delete')"
+                *ngIf="
+                  entityType === 'voc-table' || entityType === 'department' ||
+                  entityType === 'signers'
+                "></i>
+
+                <i class="bi bi-plus-square" matTooltip="{{ 'USER_MANGMENT.addToDepartment' | translate }}"
+                  (click)="performAction(row, 'delete')" *ngIf="entityType === 'users' && row.isInitial"></i>
+
+                <span *ngFor="let action of column.actions">
+                  <i *permission="{ name: action.permission, entity: row , user: nuxeoService.nuxeoClient.user}"
+                    class="{{ action.icon }}" matTooltip="{{ action.tooltip | translate }}"
+                    (click)="performAction(row, action.actionName)"></i>
+                </span>
+
+                <!-- <i
+                *permission="{ name: 'registerCorrespondance', entity: row }"
+                class="bi bi-box-arrow-in-right"
+                matTooltip="{{ 'LISTING.REGISTER' | translate }}"
+                (click)="performAction(row, 'register')"
+              ></i>
+              <i
+                *permission="{ name: 'sendCorrespondance', entity: row }"
+                class="bi bi-envelope"
+                matTooltip="{{ 'LISTING.SEND' | translate }}"
+                (click)="performAction(row, 'send')"
+              ></i>
+              <i
+                *permission="{ name: 'closeCorrespondance', entity: row }"
+                class="bi bi-x-circle"
+                matTooltip="{{ 'LISTING.CLOSE' | translate }}"
+                (click)="performAction(row, 'close')"
+              ></i>
+              <i
+                *permission="{ name: 'archiveCorrespondance', entity: row }"
+                class="bi bi-folder-symlink"
+                matTooltip="{{ 'LISTING.ARCHIVE' | translate }}"
+                (click)="performAction(row, 'archive')"
+              ></i> -->
+              </div>
+              <div [ngClass]="disabledActions ? 'disabled-actions-wrapper' : 'actions-wrapper'" *ngIf="showActionsAsMenu">
+                <button class="action-menu-trigger" [matMenuTriggerFor]="menu" [disabled]="disabledActions">
+                  <i class="bi bi-three-dots-vertical"></i>
+                </button>
+                <mat-menu #menu="matMenu" class="datatable-actions-menu">
+                  <button mat-menu-item (click)="performAction(row, 'edit')" *ngIf="entityType === 'voc-table'">
+                    <i class="bi bi-pencil-square edit-icon"></i>
+                    <span class="action-text">{{ 'UPDATE' | translate }}</span>
+                  </button>
+                  <button mat-menu-item (click)="performAction(row, 'delete')" *ngIf="
+                  entityType === 'voc-table' || entityType === 'department' ||
+                  entityType === 'signers'
+                ">
+                    <i class="bi bi-trash"></i>
+                    <span class="action-text">{{ 'delete' | translate }}</span>
+                  </button>
+                  <button mat-menu-item (click)="performAction(row, 'delete')" *ngIf="entityType === 'users' && row.isInitial">
+                    <i class="bi bi-plus-square"></i>
+                    <span class="action-text">{{ 'USER_MANGMENT.addToDepartment' | translate }}</span>
+                  </button>
+                  <ng-conttainer *ngFor="let action of column.actions">
+                    <button (click)="performAction(row, action.actionName)" *permission="{ name: action.permission, entity: row , user: nuxeoService.nuxeoClient.user}">
+                      <i class="{{ action.icon }}"></i>
+                      <span class="action-text">{{ action.tooltip | translate }}</span>
+                    </button>
+                  </ng-conttainer>
+                </mat-menu>
+              </div>
+            </ng-container>
+
+            <ng-container *ngIf="column.type === 'date'">
+              <div class="cell-text-wrapper">
+                <cts-date-viewer [withOutLabel]="true" [value]="value"></cts-date-viewer>
+              </div>
+            </ng-container>
+            <ng-container *ngIf="column.type === 'custom'">
+              <cts-dynamic-column [id]="column.template" [column]="column" [context]="row">
+              </cts-dynamic-column>
+            </ng-container>
+
+            <ng-container *ngIf="column.type === 'direction'">
+              <div
+                (click)="iconSelected($event, row)"
+                class="status-wrapper {{ value }} {{ row.state }}"
+              >
+                <span class="iner-status-wrapper" matTooltip="{{ 'STATS.' + row.state | translate }}">
+                  <ng-container *permission="{ name: 'isFavorite', entity: row }" >
+                    <span class="fav-icon-indicator bi bi-star-fill"></span>
+                  </ng-container>
+                  <i
+                    class="{{directionIcons ? directionIcons['incoming'] : 'bi bi-box-arrow-down'}}"
+                    *ngIf="row.type === 'IncomingCorrespondence'"
+                  ></i>
+                  <i
+                    class="{{directionIcons ? directionIcons['outgoing'] : 'bi bi-box-arrow-up outgoing'}}"
+                    *ngIf="row.type === 'OutgoingCorrespondence'"
+                  ></i>
+                  <i
+                    class="{{directionIcons ? directionIcons['internal'] : 'bi bi-box-arrow-right internal'}}"
+                    *ngIf="row.type === 'InternalCorrespondence'"
+                  ></i>
+                </span>
+                <!-- <span class="value {{ value }}">{{ "STATS." + value | translate }}</span> -->
+              </div>
+            </ng-container>
+            
+          </ng-template>
+          <ng-template #customRowTemplate let-row="row" let-value="value" ngx-datatable-cell-template>
+            <div class="w-full flex items-center justify-center overflow-visible">
+              <cts-dynamic-column [id]="column.custom1stCellTemplate" [column]="column" [context]="row">
+              </cts-dynamic-column>
+            </div>
+          </ng-template>
+        </ngx-datatable-column>
+      </ng-container>
+    </ng-container>
+  </ngx-datatable>
+</div>
+
+<div *ngIf="responsiveView && tableMode !== 'card'" (window:resize)="assignTableColumns($event)">
+  <div class="dynamic-cards-container">
+    <div class="single-card" [ngClass]="{'selected-card': highlightSelectedCard && row?.isSelected}"
+      *ngFor="let row of rows">
+      <div class="memo-title">
+        <span>
+          {{ row.properties.referenceNumber }}
+        </span>
+        <span class="action-wrap">
+          <!-- <div *ngIf="property.type === 'actions' && rows.length !== 0" class="actions-wrapper">
+            <i class="bi bi-pencil-square edit-icon" matTooltip="{{ 'UPDATE' | translate }}"
+              (click)="performAction(row, 'edit')" *ngIf="entityType === 'voc-table'"></i>
+            <i class="bi bi-trash" matTooltip="{{ 'delete' | translate }}" (click)="performAction(row, 'delete')"
+              *ngIf="
+                entityType === 'voc-table' || entityType === 'department' ||
+                entityType === 'signers'
+              "></i>
+
+            <i class="bi bi-plus-square" matTooltip="{{ 'USER_MANGMENT.addToDepartment' | translate }}"
+              (click)="performAction(row, 'delete')" *ngIf="entityType === 'users' && row.isInitial"></i>
+
+            <span *ngFor="let action of property.actions">
+              <i *permission="{ name: action.permission, entity: row , user: nuxeoService.nuxeoClient.user}"
+                class="{{ action.icon }}" matTooltip="{{ action.tooltip | translate }}"
+                (click)="performAction(row, action.actionName)"></i>
+            </span>
+          </div> -->
+          <span  class="action"  *ngFor="let action of tableActions">
+            <i *permission="{ name: action.permission, entity: row , user: nuxeoService.nuxeoClient.user}"
+              class="{{ action.icon }}" matTooltip="{{ action.tooltip | translate }}"
+              (click)="performAction(row, action.actionName)"></i>
+          </span>
+        </span>
+      </div>
+      <div *ngIf="tableColumns.length > 1">
+        <div class="memo-body" *ngFor="let property of tableColumns" (click)="cardSelected(row)">
+          <div class="key">{{ prefix + property.key | translate }}</div>
+          <div class="value">
+            <div class="text" *ngIf="property.type === 'text'">
+              {{ row.properties[property.value]}}
+            </div>
+            <div class="text" *ngIf="property.type === 'owner'">
+              {{ row.properties[property.owner]?.[property.value] }}
+            </div>
+            <div class="text" *ngIf="property.type === 'date'">
+              {{ row.properties[property.value] | localizedDate:format:(isArabic? 'ar-AR' : 'en-US') }}
+              <!-- <cts-date-viewer [withOutLabel]="true" [value]="row.properties[property.value]" ></cts-date-viewer> -->
+            </div>
+            <div *ngIf="property.type === 'status'" class="value {{ row[property.value]}}">{{
+              "STATS." + row[property.value] | translate
+              }}</div>
+            <div *ngIf="property.type === 'vocabulary'" class="cell-text-wrapper">
+              <cts-dropdown-viewer [withOutLabel]="true" [value]="row.properties[property.value]"
+                [dropdownId]="property.vocabularyId">
+              </cts-dropdown-viewer>
+            </div>
+            <div *ngIf="property.type === 'direction'" (click)="iconSelected($event, row)"
+              class="status-wrapper {{ property.value }} {{ row.state }}">
+              <span class="iner-status-wrapper" matTooltip="{{ 'STATS.' + row.state | translate }}">
+                <ng-container *permission="{ name: 'isFavorite', entity: row }">
+                  <span class="fav-icon-indicator bi bi-star-fill"></span>
+                </ng-container>
+                <i class="bi bi-box-arrow-down" *ngIf="row.type === 'IncomingCorrespondence'"></i>
+                <i class="bi bi-box-arrow-up outgoing" *ngIf="row.type === 'OutgoingCorrespondence'"></i>
+                <i class="bi bi-box-arrow-right internal" *ngIf="row.type === 'InternalCorrespondence'"></i>
+              </span>
+            </div>
+            <div *ngIf="property.type === 'custom'">
+              <cts-dynamic-column [id]="property.template" [column]="property" [context]="row">
+              </cts-dynamic-column>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="iner-card-container {{entityType}}" (click)="cardSelected(row)" *ngIf="tableColumns.length === 1">
+      <cts-dynamic-column [id]="columns[0].template" [column]="columns[0]" [context]="row">
+      </cts-dynamic-column>
+    </div>
+  </div>
+</div>
+
+<div *ngIf="tableMode === 'card'">
+  <div class="cards-container">
+    <div class="single-card" *ngFor="let row of rows; let i = index">
+      <div class="memo-title">
+        <span>
+          {{ row.properties.referenceNumber }}
+        </span>
+        <span class="action-wrap">
+          <span class="action" *ngFor="let action of tableActions">
+            <i *permission="{ name: action.permission, entity: row , user: nuxeoService.nuxeoClient.user}"
+              class="{{ action.icon }}" matTooltip="{{ action.tooltip | translate }}"
+              (click)="performAction(row, action.actionName)"></i>
+          </span>
+          <button *permission="{ name: 'deleteMemo', entity: row , user: nuxeoService.nuxeoClient.user}"
+            (click)="performAction(row, 'deleteMemo')">
+            <i class="bi bi-trash" matTooltip="{{ 'LISTING.ONLY_DELETE' | translate }}"></i>
+          </button>
+          <button *permission="{ name: 'terminateDelegation', entity: row , user: nuxeoService.nuxeoClient.user}"
+            (click)="performAction(row, 'terminateDelegation')">
+            <i class="bi bi-trash" matTooltip="{{ 'LISTING.CANCEL' | translate }}"></i>
+          </button>
+          <span class="publish-state"
+            *permission="{ name: 'memoPublished', entity: row , user: nuxeoService.nuxeoClient.user}">
+            {{ "MEMOS.PUBLISHED" | translate }}
+          </span>
+          <span class="publish-state"
+            *permission="{ name: 'delegationFinished', entity: row , user: nuxeoService.nuxeoClient.user}">
+            {{ "delegations.finished" | translate }}
+          </span>
+          <span class="publish-state"
+            *permission="{ name: 'delegationActive', entity: row , user: nuxeoService.nuxeoClient.user}">
+            {{ "delegations.active" | translate }}
+          </span>
+        </span>
+      </div>
+      <div class="memo-body" *ngFor="let property of columns" (click)="cardSelected(row);cardFocused(i)">
+        <div class="key" *ngIf="property.type !== 'default'">{{ prefix + property.key | translate }}</div>
+        <ng-container *ngIf="property.type === 'default'">
+          <div class="key"
+            *permission="{ name: 'internalIsEnabled', entity: row , user: nuxeoService.nuxeoClient.user}">
+            {{ prefix + property.key | translate }}
+          </div>
+        </ng-container>
+        <div class="value">
+          <div class="text" *ngIf="property.type === 'text'">
+            {{ row.properties[property.value] }}
+          </div>
+          <div class="text" *ngIf="property.type === 'user'">
+            {{ row.properties[property.value].fullName }}
+          </div>
+          <div class="text" *ngIf="property.type === 'date'">
+            {{row.properties[property.value] | localizedDate:format:(isArabic? 'ar-AR' : 'en-US')}}
+            <!-- <cts-date-viewer [withOutLabel]="true" [value]="row.properties[property.value]" ></cts-date-viewer> -->
+          </div>
+          <div class="text" *ngIf="property.type === 'boolean'">
+            {{ (row.properties[property.value] ? 'Yes':'No') | translate }}
+          </div>
+          <ng-container *ngIf="property.type === 'default'">
+            <div class="text"
+              *permission="{ name: 'internalIsEnabled', entity: row , user: nuxeoService.nuxeoClient.user}">
+              {{ row.properties[property.value] }}
+            </div>
+          </ng-container>
+          <ng-container *ngIf="property.type === 'custom'">
+            <div class="text" *ngFor="let item of row.properties[property.value]">
+              {{ item | translate }} {{", " }}
+            </div>
+          </ng-container>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div *ngIf="tableMode === 'dynamicCard'">
+  <div class="cards-container">
+    <div class="single-card" [ngClass]="{'selected-card': highlightSelectedCard && row?.isSelected}"
+      *ngFor="let row of rows">
+      <div *ngIf="columns.length > 1">
+        <div class="memo-body" *ngFor="let property of columns" (click)="cardSelected(row)">
+          <div class="key">{{ prefix + property.key | translate }}</div>
+          <div class="value">
+            <div class="text" *ngIf="property.type === 'text'">
+              {{ row.properties[property.value] }}
+            </div>
+            <div class="text" *ngIf="property.type === 'date'">
+              {{ row.properties[property.value] | localizedDate:format:(isArabic? 'ar-AR' : 'en-US') }}
+              <!-- <cts-date-viewer [withOutLabel]="true" [value]="row.properties[property.value]" ></cts-date-viewer> -->
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="iner-card-container {{entityType}}" (click)="cardSelected(row)" *ngIf="columns.length === 1">
+        <cts-dynamic-column [id]="columns[0].template" [column]="columns[0]" [context]="row">
+        </cts-dynamic-column>
+      </div>
+    </div>
+  </div>
+</div>