nuxeo-development-framework 5.6.4 → 5.6.5

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

@@ -1,540 +0,0 @@
-<div
-	#tableContainer
-	class="iner-table-container"
-	[style]="'width:' + tableWidth"
-	*ngIf="tableMode === tableModes.list && !responsiveView"
->
-	<ngx-datatable
-		[ngClass]="{ overflowVisible: customFirstRow }"
-		class="large-table"
-		[rows]="rows"
-		[summaryRow]="customFirstRow"
-		[columnMode]="'standard'"
-		[scrollbarH]="true"
-		[style.width.%]="100"
-		[externalSorting]="true"
-		(activate)="rowDetails($event)"
-		(select)="onSelect($event)"
-		(sort)="onSort($event)"
-		(window:resize)="assignTableColumns($event)"
-		[rowHeight]="isFixedOptionColumns ? '3rem' : 'auto'"
-		[selected]="selected"
-		[selectionType]="multiSelectRows ? 'checkbox' : 'single'"
-		[sorts]="[{ prop: defultSort?.name, dir: defultSort?.dir }]"
-		[messages]="messages"
-	>
-		<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"
-			>
-				<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"
-			>
-				<mat-checkbox color="primary" [checked]="isSelected" (change)="onCheckboxChangeFn($event)"> </mat-checkbox>
-			</ng-template>
-		</ngx-datatable-column>
-		<!-- | translate -->
-
-		<ng-container *ngIf="tableColumns$ | async as columns">
-			<ngx-datatable-column *ngIf="!columns.length"></ngx-datatable-column>
-
-			<!-- [frozenRight]="column.type === 'actions'" -->
-			<ng-container *ngFor="let column of columns; 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"
-						[width]="column?.size || defaultColumnSize"
-						[frozenLeft]="isFixedOptionColumns && column.type === 'actions'"
-						[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" *ngIf="!column.withTooltip">
-									{{ value ? value : '--' }}
-								</div>
-								<div class="cell-text-wrapper" matTooltip="{{ value ? value : '--' }}" *ngIf="column.withTooltip">
-									{{ 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">
-										<ng-container *ngIf="action.type == 'button'; else showIcon">
-											<button
-												*permission="{
-													name: action.permission,
-													entity: row,
-													user: nuxeoService.nuxeoClient.user
-												}"
-												class="{{ action.class }}"
-												(click)="performAction(row, action.actionName)"
-											>
-												<mat-icon *ngIf="action.icon" [class]="action.iconClass" [svgIcon]="action.icon"> </mat-icon>
-
-												{{ action.title | translate }}
-											</button>
-										</ng-container>
-										<ng-template #showIcon>
-											<i
-												*permission="{
-													name: action.permission,
-													entity: row,
-													user: nuxeoService.nuxeoClient.user
-												}"
-												class="{{ action.icon }}"
-												matTooltip="{{ action.tooltip | translate }}"
-												(click)="performAction(row, action.actionName)"
-											></i>
-										</ng-template>
-									</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>
-		</ng-container>
-	</ngx-datatable>
-</div>
-
-<div *ngIf="responsiveView && tableMode !== tableModes.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">
-					<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$ | async" (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 === 'department'">
-							<cts-department-viewer [noStyle]="true" [value]="row.properties[property.value]"> </cts-department-viewer>
-						</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>
-		<ng-container *ngIf="tableColumns.length === 1">
-			<div class="iner-card-container {{ entityType }}" (click)="cardSelected(row)" *ngFor="let row of rows">
-				<cts-dynamic-column [id]="columns[0].template" [column]="columns[0]" [context]="row"> </cts-dynamic-column>
-			</div>
-		</ng-container>
-	</div>
-</div>
-
-<div *ngIf="tableMode === tableModes.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 tableColumns$ | async" (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 === tableModes.dynamicCard">
-	<div class="cards-container">
-		<div
-			class="single-card"
-			[ngClass]="{ 'selected-card': highlightSelectedCard && row?.isSelected }"
-			*ngFor="let row of rows"
-		>
-			<div *ngIf="tableColumns.length > 1">
-				<div class="memo-body" *ngFor="let property of tableColumns$ | async" (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="tableColumns.length === 1">
-				<cts-dynamic-column [id]="tableColumns[0].template" [column]="tableColumns[0]" [context]="row">
-				</cts-dynamic-column>
-			</div>
-		</div>
-	</div>
-</div>
-
-<div *ngIf="tableMode === tableModes.custom" class="table-custom-view">
-	<app-dynamic-component
-		class="table-custom-view__component"
-		*ngFor="let row of rows"
-		[componentName]="componentName"
-		[row]="row"
-		[rowAction]="actionOnRow"
-		[onClick]="onRowSelected"
-		(click)="cardSelected(row)"
-		[class.dynamic-selected-card]="highlightSelectedCard && row?.isSelected"
-	></app-dynamic-component>
-</div>