ngx-edu-sharing-ui 0.7.0

package/src/lib/node-entries/node-entries-global.service.ts

@@ -0,0 +1,79 @@
+import { Injectable, TemplateRef } from '@angular/core';
+import { Node } from 'ngx-edu-sharing-api';
+import { ListItemType } from '../types/list-item';
+import { Scope } from '../types/option-item';
+
+export type CustomField = {
+    type: ListItemType;
+    name: string | CustomFieldSpecialType;
+};
+export enum CustomFieldSpecialType {
+    preview,
+    type,
+}
+export type CustomFieldInfo = {
+    type: ListItemType;
+    /**
+     * Either the property name (i.e. "cm:name") or a special value.
+     */
+    name: string | CustomFieldSpecialType;
+
+    /**
+     * Custom callback which should return true if the template should be used for the given item.
+     */
+    useCallback?: (node: Node) => boolean;
+    templateRef: TemplateRef<unknown>;
+};
+
+export type PaginationStrategy = 'infinite-scroll' | 'paginator';
+
+type PaginationScope = Scope | 'DEFAULT';
+/**
+ * this service is intended to add custom behaviour to the global tables & grid views
+ */
+@Injectable({
+    providedIn: 'root',
+})
+export class NodeEntriesGlobalService {
+    private customFields: CustomFieldInfo[] = [];
+    private paginationStrategy: { [key in PaginationScope]?: PaginationStrategy } = {
+        [Scope.WorkspaceList]: 'infinite-scroll',
+        [Scope.Search]: 'infinite-scroll',
+        DEFAULT: 'infinite-scroll',
+    };
+    private paginatorSizeOptions: { [key in PaginationScope]?: number[] } = {
+        DEFAULT: [25, 50, 75, 100],
+    };
+
+    constructor() {}
+
+    public setPaginationStrategy(scope: PaginationScope, strategy: PaginationStrategy) {
+        this.paginationStrategy[scope] = strategy;
+    }
+    public getPaginationStrategy(scope: Scope) {
+        return this.paginationStrategy[scope] ?? this.paginationStrategy['DEFAULT'];
+    }
+    public setPaginatorSizeOptions(scope: PaginationScope, size: number[]) {
+        this.paginatorSizeOptions[scope] = size;
+    }
+    public getPaginatorSizeOptions(scope: Scope) {
+        return this.paginatorSizeOptions[scope] ?? this.paginatorSizeOptions['DEFAULT'];
+    }
+    public getCustomFieldTemplate(item: CustomField, node: Node) {
+        return this.customFields.filter(
+            (c) =>
+                c.type === item.type &&
+                c.name === item.name &&
+                (!c.useCallback || c.useCallback(node)),
+        )?.[0]?.templateRef;
+    }
+
+    /**
+     * Registers a custom (node) attribute you want to render via the given template.
+     *
+     * You may also override existing attributes if you want to provide a custom view.
+     */
+    registerCustomFieldRendering(customFieldInfo: CustomFieldInfo) {
+        this.customFields.push(customFieldInfo);
+    }
+}

package/src/lib/node-entries/node-entries-table/column-chooser/column-chooser.component.html

@@ -0,0 +1,25 @@
+<ng-template
+  cdkConnectedOverlay
+  [cdkConnectedOverlayOrigin]="origin"
+  [cdkConnectedOverlayOpen]="columnChooserVisible"
+  [cdkConnectedOverlayHasBackdrop]="true"
+  [cdkConnectedOverlayFlexibleDimensions]="true"
+  [cdkConnectedOverlayViewportMargin]="5"
+  (backdropClick)="columnChooserVisibleChange.emit(false)"
+  cdkConnectedOverlayBackdropClass="column-chooser-backdrop"
+>
+  <div
+    cdkDropList
+    class="column-chooser mat-elevation-z2"
+    (cdkDropListDropped)="columnChooserDrop($event)"
+  >
+    <div class="column-chooser-item" *ngFor="let column of columns; index as index" cdkDrag>
+      <mat-checkbox [checked]="column.visible" (change)="columnChooserToggle(index)">
+        {{ column | esListItemLabel | async }}
+      </mat-checkbox>
+      <div class="drag-handle" cdkDragHandle>
+        <i esIcon="drag_handle"></i>
+      </div>
+    </div>
+  </div>
+</ng-template>

package/src/lib/node-entries/node-entries-table/column-chooser/column-chooser.component.scss

@@ -0,0 +1,32 @@
+.column-chooser {
+    max-width: 100%;
+    border: solid 1px #ccc;
+    min-height: 60px;
+    display: block;
+    background: white;
+    border-radius: 4px;
+    overflow: auto;
+}
+
+.column-chooser-item {
+    border-bottom: solid 1px #ccc;
+    color: rgba(0, 0, 0, 0.87);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background: white;
+    font-size: 14px;
+    justify-content: space-between;
+    mat-checkbox {
+        margin: 0 12px;
+    }
+    .drag-handle {
+        color: rgba(0, 0, 0, 0.5);
+        cursor: move;
+        padding: 20px;
+    }
+}
+
+.column-chooser-backdrop {
+    background: none;
+}

package/src/lib/node-entries/node-entries-table/column-chooser/column-chooser.component.ts

@@ -0,0 +1,31 @@
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { ListItem } from '../../../types/list-item';
+
+@Component({
+    selector: 'es-column-chooser',
+    templateUrl: './column-chooser.component.html',
+    styleUrls: ['./column-chooser.component.scss'],
+})
+export class ColumnChooserComponent {
+    @Input() origin: CdkOverlayOrigin;
+    @Input() columnChooserVisible = false;
+    @Output() columnChooserVisibleChange = new EventEmitter<boolean>();
+
+    @Input() columns: ListItem[];
+    @Output() columnsChange = new EventEmitter<ListItem[]>();
+
+    constructor() {}
+
+    columnChooserDrop(event: CdkDragDrop<string[]>) {
+        moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
+        this.columnsChange.emit(this.columns);
+    }
+
+    columnChooserToggle(columnIndex: number): void {
+        const column = this.columns[columnIndex];
+        column.visible = !column.visible;
+        this.columnsChange.emit(this.columns);
+    }
+}

package/src/lib/node-entries/node-entries-table/node-entries-table.component.html

@@ -0,0 +1,270 @@
+<es-dropdown #dropdown [options]="entriesService.options?.[Target.ListDropdown]"></es-dropdown>
+<button
+  #menuTrigger="matMenuTrigger"
+  mat-button
+  class="dropdown-dummy cdk-visually-hidden"
+  [style.left.px]="dropdownLeft"
+  [style.top.px]="dropdownTop"
+  [matMenuTriggerFor]="dropdown.menu"
+  tabindex="-1"
+  aria-hidden="true"
+></button>
+<es-node-entries-global-options
+  *ngIf="entriesService.globalOptions?.length"
+  [displayType]="NodeEntriesDisplayType.Table"
+>
+</es-node-entries-global-options>
+<mat-table
+  [dataSource]="entriesService.dataSource"
+  matSort
+  [matSortDisableClear]="true"
+  [matSortActive]="entriesService.sort?.active"
+  [matSortDirection]="entriesService.sort?.direction"
+  esInfiniteScroll
+  (scrolled)="loadData('scroll')"
+>
+  <!-- Checkbox Column -->
+  <ng-container matColumnDef="select">
+    <mat-header-cell *matHeaderCellDef>
+      <mat-checkbox
+        [ngModel]="entriesService.selection.selected.length > 0"
+        [indeterminate]="
+          entriesService.selection.selected.length > 0 &&
+          entriesService.selection.selected.length !== entriesService.dataSource.getData().length
+        "
+        (ngModelChange)="toggleAll($event)"
+        aria-label="{{ 'LIST_TABLE.TOGGLE_ALL' | translate }}"
+      ></mat-checkbox>
+    </mat-header-cell>
+    <mat-cell *matCellDef="let node">
+      <mat-checkbox
+        [checked]="entriesService.selection.isSelected(node)"
+        (change)="entriesService.onCheckboxChanged(node, $event.checked)"
+        aria-label="{{ 'SELECT' | translate : { element: (node | nodeTitle) } }}"
+      ></mat-checkbox>
+    </mat-cell>
+  </ng-container>
+  <div matColumnDef="icon">
+    <mat-header-cell *matHeaderCellDef class="cell-icon cell-count">
+      ({{ entriesService.selection.selected.length
+      }}<ng-container *ngIf="entriesService.dataSource?.getTotal() !== undefined">
+        / {{ entriesService.dataSource?.getTotal() }}</ng-container
+      >)
+    </mat-header-cell>
+    <mat-cell *matCellDef="let node" class="cell-icon">
+      <ng-container
+        *ngIf="entriesService.elementInteractionType === InteractionType.DefaultActionLink"
+      >
+        <ng-container *ngTemplateOutlet="icon; context: { node: this.node }"></ng-container>
+      </ng-container>
+      <div
+        *ngIf="entriesService.elementInteractionType !== InteractionType.DefaultActionLink"
+        (click)="
+          entriesService.onClicked({ event: $event, element: node, source: ClickSource.Icon })
+        "
+        (dblclick)="entriesService.dblClickItem.emit({ element: node, source: ClickSource.Icon })"
+      >
+        <ng-container
+          *ngTemplateOutlet="icon; context: { node: this.node }"
+          (click)="
+            entriesService.onClicked({ event: $event, element: node, source: ClickSource.Icon })
+          "
+          (dblclick)="entriesService.dblClickItem.emit({ element: node, source: ClickSource.Icon })"
+        ></ng-container>
+      </div>
+    </mat-cell>
+  </div>
+  <ng-container matColumnDef="actions">
+    <mat-header-cell *matHeaderCellDef>
+      <button
+        *ngIf="entriesService.configureColumns"
+        mat-icon-button
+        (click)="columnChooserVisible = !columnChooserVisible"
+        cdkOverlayOrigin
+        #columnChooserTrigger="cdkOverlayOrigin"
+        [matTooltip]="'LIST_TABLE.CONFIGURE_COLUMNS' | translate"
+        [attr.aria-label]="'LIST_TABLE.CONFIGURE_COLUMNS' | translate"
+      >
+        <i esIcon="settings"></i>
+      </button>
+    </mat-header-cell>
+    <mat-cell *matCellDef="let node">
+      <button
+        mat-icon-button
+        *ngIf="entriesService.options?.[Target.List]?.length"
+        color="primary"
+        (click)="openMenu(node)"
+        [matMenuTriggerFor]="dropdown.menu"
+      >
+        <i esIcon="more_vert" [aria]="true"></i>
+      </button>
+    </mat-cell>
+  </ng-container>
+  <!-- Data Columns -->
+  <ng-container
+    *ngFor="let column of visibleDataColumns$ | async; let first = first"
+    [matColumnDef]="column.name"
+  >
+    <ng-container>
+      <mat-header-cell
+        *matHeaderCellDef
+        mat-sort-header
+        [disabled]="!(entriesService.sort?.allowed && isSortable(column))"
+        [class.mat-column-primary]="first"
+        >{{ column | esListItemLabel | async }}</mat-header-cell
+      >
+    </ng-container>
+    <mat-cell
+      *matCellDef="let node"
+      #cell
+      [class.mat-column-primary]="first"
+      attr.data-test="table-cell-{{ column.name }}"
+    >
+      <ng-container
+        *ngIf="entriesService.elementInteractionType === InteractionType.DefaultActionLink"
+      >
+        <es-node-url cdkMonitorSubtreeFocus [node]="node" [mode]="first ? 'link' : 'wrapper'">
+          <es-list-base
+            [forceText]="true"
+            [node]="node"
+            [item]="column"
+            esCheckTextOverflow
+            #text="esCheckTextOverflow"
+            [matTooltip]="text.hasTextOverflow() ? cell.innerText : null"
+            matTooltipTouchGestures="off"
+          ></es-list-base>
+        </es-node-url>
+      </ng-container>
+      <es-list-base
+        *ngIf="entriesService.elementInteractionType !== InteractionType.DefaultActionLink"
+        [forceText]="true"
+        [node]="node"
+        [item]="column"
+        (click)="
+          entriesService.onClicked({
+            event: $event,
+            element: node,
+            source: ClickSource.Metadata,
+            attribute: column
+          })
+        "
+        (dblclick)="
+          entriesService.dblClickItem.emit({
+            element: node,
+            source: ClickSource.Metadata,
+            attribute: column
+          })
+        "
+        esCheckTextOverflow
+        #text="esCheckTextOverflow"
+        [matTooltip]="text.hasTextOverflow() ? cell.innerText : null"
+        matTooltipTouchGestures="off"
+      ></es-list-base>
+      <ng-container *ngIf="first">
+        <div class="childobjects" *ngIf="node.properties?.['virtual:childobjectcount'] > 0">
+          <div
+            class="childobject-count"
+            matTooltip="{{
+              'CHILDOBJECT_COUNT'
+                | translate : { count: node.properties['virtual:childobjectcount'] * 1 + 1 }
+            }}"
+          >
+            <span>{{ node.properties['virtual:childobjectcount'] * 1 + 1 }}</span
+            ><i esIcon="filter_none"></i>
+          </div>
+        </div>
+      </ng-container>
+    </mat-cell>
+  </ng-container>
+  <mat-header-row mat-header-row *matHeaderRowDef="visibleColumnNames$ | async"></mat-header-row>
+  <mat-row
+    mat-row
+    matRipple
+    cdkDrag
+    esNodesDrag
+    [cdkDragDisabled]="!entriesService.dragDrop?.dragAllowed || ui.isMobile()"
+    [cdkDragData]="getDragData(node)"
+    (cdkDragStarted)="onDragStarted(node)"
+    (cdkDragEnded)="onDragEnded()"
+    [esNodesDropTarget]="node"
+    [canDropNodes]="canDrop"
+    (nodeDropped)="drop($event)"
+    class="mat-row"
+    [class.mat-row-selected]="entriesService.selection.isSelected(node)"
+    [class.selected-when-dragging]="isDragging && entriesService.selection.isSelected(node)"
+    [class.mat-row-virtual]="node.virtual"
+    [class.mat-row-virtual-first]="
+      node.virtual && !$any(entriesService.dataSource.getData()[i - 1])?.virtual
+    "
+    [class.mat-row-virtual-last]="
+      node.virtual && !$any(entriesService.dataSource.getData()[i + 1])?.virtual
+    "
+    [class.dynamic-single-click]="entriesService.singleClickHint === 'dynamic'"
+    *matRowDef="let node; let i = index; let last = last; columns: visibleColumnNames$ | async"
+    (contextmenu)="onRowContextMenu({ event: $event, node: node })"
+    (keydown.ContextMenu)="onRowContextMenu({ event: $event, node: node })"
+  >
+    <es-drag-preview
+      *cdkDragPreview
+      [node]="node"
+      [selected]="entriesService.selection.selected"
+      [item]="(visibleDataColumns$ | async)[0]"
+    ></es-drag-preview>
+  </mat-row>
+</mat-table>
+<ng-container
+  *ngIf="
+    (entriesService.dataSource.isLoadingSubject | async) === false &&
+    entriesService.dataSource.hasMore() &&
+    entriesService.paginationStrategy === 'infinite-scroll'
+  "
+>
+  <div class="load-more">
+    <button mat-button color="primary" (click)="loadData('button')">
+      <i esIcon="refresh"></i>
+      <span>{{ 'LOAD_MORE' | translate }}</span>
+    </button>
+  </div>
+</ng-container>
+<ng-container *ngIf="entriesService.dataSource.isLoadingSubject | async">
+  <ng-container *ngTemplateOutlet="loading"> </ng-container>
+</ng-container>
+<!--
+<mat-paginator #paginator [pageSizeOptions]="pageSizeOptions"></mat-paginator>
+-->
+
+<!-- Wait for ready state to avoid changed-after-checked error when `columnChooserTrigger` becomes
+available. -->
+<es-column-chooser
+  *ngIf="columnChooserTriggerReady"
+  [(columns)]="entriesService.columns"
+  [(columnChooserVisible)]="columnChooserVisible"
+  [origin]="columnChooserTrigger"
+  (columnsChange)="entriesService.columnsChange.emit($event)"
+></es-column-chooser>
+<ng-template #loading>
+  <es-spinner></es-spinner>
+</ng-template>
+<ng-template #icon let-node="node">
+  <div class="icon-bg">
+    <img
+      *ngIf="node.iconURL"
+      [src]="node | esNodeIcon | async"
+      [alt]="
+        node.mediatype
+          ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)
+          : ''
+      "
+      [matTooltip]="
+        node.mediatype
+          ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)
+          : ''
+      "
+      matTooltipTouchGestures="off"
+    />
+    <i
+      *ngIf="!node.iconURL"
+      [esIcon]="node.authorityType ? (node.authorityType === 'GROUP' ? 'group' : 'person') : null"
+    ></i>
+  </div>
+</ng-template>

package/src/lib/node-entries/node-entries-table/node-entries-table.component.scss

@@ -0,0 +1,169 @@
+@use 'sass:color';
+@import '../../../../assets/scss/mixins';
+
+$defaultColumnWidth: 145px;
+$minColumnWidth: 30%;
+$rowHeight: 58px;
+
+:host {
+    display: flex;
+    flex-direction: column;
+    ::ng-deep {
+        mat-header-cell {
+            color: var(--textMediumLight);
+        }
+        mat-cell,
+        mat-header-cell {
+            margin: 0 !important;
+        }
+        mat-cell es-node-url {
+            width: 100%;
+            a {
+                color: #000;
+            }
+            &.cdk-keyboard-focused {
+                @include setGlobalKeyboardFocus('border');
+            }
+        }
+        es-list-base {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            display: flex;
+            width: 100%;
+            height: $rowHeight;
+            align-items: center;
+        }
+    }
+}
+mat-header-cell,
+mat-cell {
+    margin: 0 3px;
+    // do not fix the "primary/title" column
+    &:not(.mat-column-primary) {
+        flex: 0 $defaultColumnWidth;
+    }
+    &.mat-column-primary {
+        min-width: $minColumnWidth;
+    }
+    &.mat-column-select {
+        flex: 0 58px;
+        min-width: 58px;
+        padding-left: 14px;
+    }
+    &.mat-column-icon {
+        flex: 0 85px;
+        min-width: 85px;
+        justify-content: center;
+    }
+    &.mat-column-actions {
+        flex: 0 58px;
+        min-width: 58px;
+        display: flex;
+        justify-content: flex-end;
+        padding-right: 5px;
+    }
+}
+
+.mat-row {
+    &.dynamic-single-click {
+        cursor: pointer;
+        &:hover {
+            background-color: rgb(var(--palette-primary-50));
+        }
+    }
+    &.mat-row-selected {
+        background: var(--listItemSelectedBackgroundEffect);
+        .mat-mdc-cell {
+            background: transparent;
+        }
+    }
+    // Overrides `.mat-row-selected` background by order
+    &.mat-row-virtual {
+        background: linear-gradient(to right, var(--nodeVirtualColor) 5px, transparent 5px)
+            no-repeat;
+        border-right: 2px dashed var(--nodeVirtualColorLight);
+        .mat-mdc-cell {
+            background: transparent;
+        }
+        &.mat-row-selected {
+            background: linear-gradient(
+                to right,
+                var(--nodeVirtualColor) 0,
+                var(--nodeVirtualColor) 5px,
+                var(--listItemSelectedBackground) 5px,
+                var(--listItemSelectedBackground) 5px
+            );
+        }
+    }
+    &.mat-row-virtual-first {
+        border-top: 2px dashed var(--nodeVirtualColorLight);
+    }
+    &.mat-row-virtual-last {
+        border-bottom: 2px dashed var(--nodeVirtualColorLight);
+    }
+    &.selected-when-dragging {
+        opacity: 0.5; // Same as .cdk-drag-placeholder
+    }
+}
+.dropdown-dummy {
+    position: fixed;
+}
+.childobjects {
+    background-color: rgba(0, 0, 0, 0.05);
+    border-radius: 15px;
+    display: inline-flex;
+    align-items: center;
+    min-width: 51px;
+    min-height: 26px;
+    justify-content: center;
+    cursor: default;
+    user-select: none;
+    padding: 2px 8px;
+    margin-left: 5px;
+    > .childobject-count {
+        display: inline-flex;
+        align-items: center;
+        > i {
+            font-size: 13px;
+            margin-left: 4px;
+        }
+    }
+}
+.cell-icon {
+    .icon-bg {
+        width: 36px;
+        height: 36px;
+        padding: 3px;
+        margin: 1px 0;
+        background-color: #fff;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        @include materialShadowSmall();
+        > img {
+            width: 18px;
+            height: auto;
+        }
+        > i {
+            color: #666;
+            font-size: 18px;
+        }
+    }
+}
+.mat-column-link {
+    flex: 0 60px;
+    a {
+        display: flex;
+        justify-content: center;
+    }
+}
+
+.load-more {
+    display: flex;
+    justify-content: center;
+}
+es-node-entries-global-options {
+    padding-bottom: 20px;
+}