ngx-edu-sharing-ui 0.7.0

package/src/lib/node-entries/node-entries-card-grid/node-entries-card-grid.component.ts

@@ -0,0 +1,361 @@
+import { CdkDragEnter, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    Input,
+    NgZone,
+    OnDestroy,
+    OnInit,
+    QueryList,
+    TemplateRef,
+    ViewChild,
+    ViewChildren,
+} from '@angular/core';
+import { Sort } from '@angular/material/sort';
+import { Node, RestConstants } from 'ngx-edu-sharing-api';
+import * as rxjs from 'rxjs';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { distinctUntilChanged, map, switchMap, take, takeUntil } from 'rxjs/operators';
+import { GridLayout, NodeEntriesDisplayType } from '../entries-model';
+import { ItemsCap } from '../items-cap';
+import { NodeEntriesGlobalService } from '../node-entries-global.service';
+import { NodeEntriesTemplatesService } from '../node-entries-templates.service';
+import { SortSelectPanelComponent } from '../sort-select-panel/sort-select-panel.component';
+import { CustomTemplatesDataSource } from '../custom-templates-data-source';
+import { Target } from '../../types/option-item';
+import { NodeEntriesService } from '../../services/node-entries.service';
+import { UIService } from '../../services/ui.service';
+import { ListItemSort } from '../../types/list-item';
+import { DragData } from '../../types/drag-drop';
+
+let displayedWarnings: string[] = [];
+
+@Component({
+    selector: 'es-node-entries-card-grid',
+    templateUrl: 'node-entries-card-grid.component.html',
+    styleUrls: ['node-entries-card-grid.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NodeEntriesCardGridComponent<T extends Node> implements OnInit, OnDestroy {
+    readonly NodeEntriesDisplayType = NodeEntriesDisplayType;
+    readonly Target = Target;
+    /**
+     * relative scrolling when a scrolling arrow (left or right) is used
+     * a value of 1 would mean to scroll the full width of the entire content
+     */
+    readonly ScrollingOffsetPercentage = 0.4;
+
+    @ViewChild('gridTop', { static: true }) set gridTop(value: TemplateRef<unknown>) {
+        this.registerGridTop(value);
+    }
+    @ViewChild(SortSelectPanelComponent)
+    set sortPanel(value: SortSelectPanelComponent) {
+        // if (this.entriesService.dataSource instanceof NodeDataSourceRemote) {
+        setTimeout(() => {
+            (this.entriesService.dataSource as any).sortPanel = value;
+        });
+        // }
+    }
+    @ViewChildren(CdkDropList) dropListsQuery: QueryList<CdkDropList>;
+    @ViewChild('grid') gridRef: ElementRef;
+    @ViewChildren('item', { read: ElementRef }) itemRefs: QueryList<ElementRef<HTMLElement>>;
+    @Input() displayType: NodeEntriesDisplayType;
+
+    isDragging = false; // Drag-and-drop, not rearrange
+    dropLists: CdkDropList[];
+    /**
+     * Whether the number of shown items is limited by `gridConfig.maxRows`.
+     *
+     * A value of `true` does not mean, that there would be more items available.
+     */
+    visibleItemsLimited = false;
+    layout: GridLayout;
+    /**
+     * updates via boxObserver
+     * and holds the information if scrolling in the direction is currently feasible
+     */
+    scroll = {
+        left: false,
+        right: false,
+    };
+
+    readonly nodes$;
+    private readonly maxRows$;
+    private readonly layout$;
+    private readonly itemsPerRowSubject = new BehaviorSubject<number | null>(null);
+    readonly itemsCap = new ItemsCap<T>();
+    private globalCursorStyle: HTMLStyleElement;
+    private destroyed = new Subject<void>();
+
+    constructor(
+        public entriesService: NodeEntriesService<T>,
+        public entriesGlobalService: NodeEntriesGlobalService,
+        public templatesService: NodeEntriesTemplatesService,
+        public ui: UIService,
+        private ngZone: NgZone,
+    ) {
+        this.nodes$ = this.entriesService.dataSource$.pipe(
+            switchMap((dataSource) => dataSource?.connect()),
+        );
+        this.maxRows$ = this.entriesService.gridConfig$.pipe(
+            map((gridConfig) => gridConfig?.maxRows || null),
+            distinctUntilChanged(),
+        );
+        this.layout$ = this.entriesService.gridConfig$.pipe(
+            map((gridConfig) => gridConfig?.layout || 'grid'),
+            distinctUntilChanged(),
+        );
+        this.entriesService.dataSource$.pipe(takeUntil(this.destroyed)).subscribe(() => {
+            this.updateScrollState();
+        });
+    }
+
+    ngOnInit(): void {
+        this.registerItemsCap();
+        this.registerLayout();
+        this.registerVisibleItemsLimited();
+    }
+
+    ngOnDestroy(): void {
+        this.destroyed.next();
+        this.destroyed.complete();
+    }
+
+    private registerGridTop(gridTop: TemplateRef<unknown>): void {
+        setTimeout(() => {
+            this.templatesService.entriesTopMatter = gridTop;
+        });
+        this.destroyed.subscribe(() => {
+            if (this.templatesService.entriesTopMatter === gridTop) {
+                setTimeout(() => {
+                    this.templatesService.entriesTopMatter = null;
+                });
+            }
+        });
+    }
+
+    private registerItemsCap() {
+        this.entriesService.dataSource$
+            .pipe(takeUntil(this.destroyed))
+            .subscribe((dataSource) => (dataSource.itemsCap = this.itemsCap));
+        rxjs.combineLatest([this.itemsPerRowSubject.pipe(distinctUntilChanged()), this.maxRows$])
+            .pipe(
+                map(([itemsPerRow, maxRows]) =>
+                    maxRows > 0 && itemsPerRow !== null ? itemsPerRow * maxRows : null,
+                ),
+            )
+            .subscribe((cap) => (this.itemsCap.cap = cap));
+    }
+
+    private registerLayout() {
+        this.layout$.subscribe((layout) => (this.layout = layout));
+    }
+
+    onSortChange(sort: Sort) {
+        this.entriesService.sort.active = sort.active;
+        this.entriesService.sort.direction = sort.direction;
+        this.entriesService.sortChange.emit(this.entriesService.sort);
+    }
+
+    loadData(source: 'scroll' | 'button') {
+        // @TODO: Maybe this is better handled in a more centraled service
+        if (source === 'scroll') {
+            // check if there is a footer
+            const elements = document.getElementsByTagName('footer');
+            if (elements.length && elements.item(0).innerHTML.trim()) {
+                return;
+            }
+        }
+        const couldLoadMore = this.entriesService.loadMore(source);
+        if (couldLoadMore && source === 'button') {
+            this.focusFirstNewItemWhenLoaded();
+        }
+    }
+
+    onCustomSortingInProgressChange() {
+        this.entriesService.sortChange.emit(this.entriesService.sort);
+        setTimeout(() => {
+            this.refreshDropLists();
+        });
+    }
+
+    onRearrangeDragEntered($event: CdkDragEnter) {
+        moveItemInArray(
+            this.entriesService.dataSource.getData(),
+            $event.item.data,
+            $event.container.data,
+        );
+        // `CdkDrag` doesn't really want us to rearrange the items while dragging. Its cached
+        // element positions get out of sync unless we update them manually.
+        this.ngZone.runOutsideAngular(() =>
+            setTimeout(() =>
+                this.dropLists?.forEach((list) => (list._dropListRef as any)['_cacheItems']()),
+            ),
+        );
+    }
+
+    onRearrangeDragStarted() {
+        this.globalCursorStyle = document.createElement('style');
+        document.body.appendChild(this.globalCursorStyle);
+        this.globalCursorStyle.innerHTML = `* {cursor: grabbing !important; }`;
+    }
+
+    onRearrangeDragEnded() {
+        document.body.removeChild(this.globalCursorStyle);
+        this.globalCursorStyle = null;
+    }
+
+    getDragStartDelay(): number {
+        if (this.ui.isMobile()) {
+            return 500;
+        } else {
+            return null;
+        }
+    }
+
+    private registerVisibleItemsLimited() {
+        this.maxRows$.subscribe((maxRows) => {
+            this.visibleItemsLimited = maxRows > 0;
+        });
+    }
+
+    private refreshDropLists() {
+        this.dropLists = this.dropListsQuery.toArray();
+    }
+
+    private focusFirstNewItemWhenLoaded() {
+        const oldLength = this.itemRefs.length;
+        this.itemRefs.changes
+            .pipe(take(1))
+            .subscribe((items: NodeEntriesCardGridComponent<T>['itemRefs']) => {
+                if (items.length > oldLength) {
+                    this.focusOnce(items.get(oldLength).nativeElement);
+                }
+            });
+    }
+
+    private focusOnce(element: HTMLElement): void {
+        element.setAttribute('tabindex', '-1');
+        element.focus();
+        element.addEventListener('blur', () => element.removeAttribute('tabindex'), { once: true });
+    }
+
+    onGridSizeChanges(): void {
+        const itemsPerRow = this.getItemsPerRow();
+        this.itemsPerRowSubject.next(itemsPerRow);
+        this.updateScrollState();
+    }
+
+    private getItemsPerRow(): number | null {
+        if (!this.gridRef?.nativeElement) {
+            return null;
+        }
+        return getComputedStyle(this.gridRef.nativeElement)
+            .getPropertyValue('grid-template-columns')
+            .split(' ').length;
+    }
+
+    getSortColumns() {
+        return this.entriesService.sort?.columns?.filter((c) => {
+            const result = this.entriesService.columns
+                .concat(
+                    new ListItemSort('NODE', 'score'),
+                    new ListItemSort('NODE', RestConstants.CCM_PROP_COLLECTION_ORDERED_POSITION),
+                    new ListItemSort('NODE', RestConstants.CM_PROP_TITLE),
+                    new ListItemSort('NODE', RestConstants.CM_NAME),
+                    new ListItemSort('NODE', RestConstants.CM_MODIFIED_DATE),
+                    new ListItemSort('NODE', RestConstants.CCM_PROP_REPLICATIONMODIFIED),
+                    new ListItemSort('NODE', RestConstants.CCM_PROP_REPLICATIONSOURCETIMESTAMP),
+                )
+                .some((c2) => c2.name === c.name);
+            if (!result) {
+                const warning =
+                    'Sort field ' +
+                    c.name +
+                    ' was specified but is not present as a column. ' +
+                    'It will be ignored. Please also configure this field in the <lists> section';
+                if (!displayedWarnings.includes(warning)) {
+                    console.warn(warning);
+                    displayedWarnings.push(warning);
+                }
+            }
+            return result;
+        });
+    }
+
+    canDropNodes = (dragData: DragData<T>) => this.entriesService.dragDrop.dropAllowed?.(dragData);
+
+    onNodesDropped(dragData: DragData<Node>) {
+        this.entriesService.dragDrop.dropped(dragData.target, {
+            element: dragData.draggedNodes,
+            mode: dragData.action,
+        });
+    }
+
+    getDragEnabled(): boolean {
+        return this.entriesService.dragDrop?.dragAllowed && !this.ui.isMobile();
+    }
+
+    getDragData(node: T): T[] {
+        const selection = this.entriesService.selection;
+        if (selection.isSelected(node)) {
+            return selection.selected;
+        } else {
+            return [node];
+        }
+    }
+
+    onDragStarted(node: T) {
+        if (!this.entriesService.selection.isSelected(node)) {
+            this.entriesService.selection.clear();
+            this.entriesService.selection.select(node);
+        }
+        this.isDragging = true;
+    }
+
+    onDragEnded() {
+        this.isDragging = false;
+    }
+
+    private canScroll(direction: 'left' | 'right') {
+        const element = this.gridRef?.nativeElement;
+        if (element) {
+            if (direction === 'left') {
+                return element.scrollLeft > 0;
+            } else if (direction === 'right') {
+                /*
+                 use a small pixel buffer (10px) because scrolling aligns with the start of each card and
+                 it can cause slight alignment issues on the end of the container
+                 */
+                return element.scrollLeft < element.scrollWidth - element.clientWidth - 10;
+            }
+        }
+        return false;
+    }
+
+    updateScrollState() {
+        if (this.layout === 'scroll') {
+            this.scroll.left = this.canScroll('left');
+            this.scroll.right = this.canScroll('right');
+        }
+    }
+
+    doScroll(direction: 'left' | 'right') {
+        // 1 is enough because the browser will handle it via css snapping
+        const leftScroll = this.gridRef?.nativeElement.scrollLeft;
+        const rect = this.gridRef?.nativeElement.getBoundingClientRect();
+        // using scroll because it works more reliable than scrollBy
+        this.gridRef?.nativeElement.scroll({
+            left:
+                leftScroll +
+                Math.max(250, rect.width * this.ScrollingOffsetPercentage) *
+                    (direction === 'right' ? 1 : -1),
+            behavior: 'smooth',
+        });
+    }
+
+    isCustomTemplate() {
+        return this.entriesService.dataSource instanceof CustomTemplatesDataSource;
+    }
+}

package/src/lib/node-entries/node-entries-card-small/node-entries-card-small.component.html

@@ -0,0 +1,100 @@
+<div
+  class="grid-card"
+  [class.grid-card-collection]="nodeHelper.isNodeCollection(node)"
+  [class.dynamic-single-click]="entriesService.singleClickHint === 'dynamic'"
+  [style.background-color]="nodeHelper.isNodeCollection(node) ? node.collection.color : null"
+  (contextmenu)="openContextmenu($event)"
+  (keydown.ContextMenu)="openContextmenu($event)"
+>
+  <div
+    *ngIf="templatesService.overlay"
+    class="card-overlay"
+    (click)="
+      entriesService.clickItem.emit({
+        element: node,
+        source: ClickSource.Overlay
+      })
+    "
+  >
+    <ng-container
+      *ngTemplateOutlet="templatesService.overlay; context: { element: node }"
+    ></ng-container>
+  </div>
+  <es-node-url
+    *ngIf="entriesService.elementInteractionType === InteractionType.DefaultActionLink"
+    mode="wrapper"
+    [node]="node"
+    esFocusState
+    #cardFocusState="esFocusState"
+  >
+    <ng-container
+      *ngTemplateOutlet="
+        image;
+        context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }
+      "
+    ></ng-container>
+    <ng-container *ngTemplateOutlet="meta"></ng-container>
+  </es-node-url>
+  <ng-container *ngIf="entriesService.elementInteractionType !== InteractionType.DefaultActionLink">
+    <ng-container *ngTemplateOutlet="image"></ng-container>
+    <ng-container *ngTemplateOutlet="meta"></ng-container>
+  </ng-container>
+</div>
+<ng-template #image let-playAnimation="playAnimation">
+  <div
+    class="card-image-area"
+    (click)="
+      entriesService.clickItem.emit({
+        element: node,
+        source: ClickSource.Preview
+      })
+    "
+  >
+    <es-preview-image
+      *ngIf="!(nodeHelper.isNodeCollection(node) && node.preview.isIcon)"
+      [node]="node"
+      [playAnimation]="playAnimation"
+    ></es-preview-image>
+    <div
+      *ngIf="nodeHelper.isNodeCollection(node) && node.preview.isIcon"
+      class="card-collection-image"
+    >
+      <i esIcon="layers"></i>
+    </div>
+  </div>
+</ng-template>
+<ng-template #meta>
+  <div
+    class="card-meta"
+    (click)="
+      entriesService.clickItem.emit({
+        element: node,
+        source: ClickSource.Metadata
+      })
+    "
+  >
+    <div
+      *ngFor="let displayPart of entriesService.columns; let first = first"
+      class="card-meta-row"
+    >
+      <ng-container *ngIf="first">
+        <es-node-url
+          *ngIf="entriesService.elementInteractionType === InteractionType.DefaultActionLink"
+          [node]="node"
+          #link
+        >
+          <es-list-base [item]="displayPart" [node]="node" [provideLabel]="false"> </es-list-base>
+        </es-node-url>
+        <div *ngIf="entriesService.elementInteractionType !== InteractionType.DefaultActionLink">
+          <es-list-base [item]="displayPart" [node]="node" [provideLabel]="false"> </es-list-base>
+        </div>
+      </ng-container>
+      <ng-container *ngIf="!first">
+        <es-list-base [item]="displayPart" [node]="node" [provideLabel]="false"> </es-list-base>
+      </ng-container>
+    </div>
+  </div>
+  <ng-container
+    *ngTemplateOutlet="templatesService.actionArea; context: { element: node }"
+  ></ng-container>
+</ng-template>

package/src/lib/node-entries/node-entries-card-small/node-entries-card-small.component.scss

@@ -0,0 +1,46 @@
+$imageHeight: 100px;
+$entriesCardPaddingHorizontal: 15px;
+$entriesCardPaddingVertical: 8px;
+$topBarHeight: 40px;
+$collectionIconPadding: 25px;
+$collectionIconSize: 25px;
+
+@import '../node-entries-card/node-entries-card.main';
+
+.grid-card .card-meta-row ::ng-deep es-node-url {
+    a {
+        &.cdk-keyboard-focused {
+            // Normal focusColor might have insufficient contrast on color-matching background.
+            outline-color: var(--palette-primary-400);
+        }
+    }
+}
+
+.grid-card {
+    cursor: pointer;
+    &.grid-card-collection {
+        // default fallback color
+        background-color: rgb(var(--palette-primary-200));
+    }
+    .card-meta {
+        background-color: rgba(255, 255, 255, 0.8);
+        // grid-template-columns: 50%;
+        padding-bottom: $entriesCardPaddingVertical;
+
+        .card-meta-row {
+            &:nth-child(1) {
+                grid-column: 1/3;
+            }
+
+            &:nth-child(2) {
+                justify-self: flex-start;
+            }
+
+            &:nth-child(2),
+            &:nth-child(3) {
+                grid-row: 2;
+                font-size: var(--fontSizeXSmall);
+            }
+        }
+    }
+}

package/src/lib/node-entries/node-entries-card-small/node-entries-card-small.component.ts

@@ -0,0 +1,40 @@
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Target } from '../../types/option-item';
+import { ClickSource, InteractionType } from '../entries-model';
+
+import { NodeEntriesTemplatesService } from '../node-entries-templates.service';
+import { NodeEntriesService } from '../../services/node-entries.service';
+import { NodeHelperService } from '../../services/node-helper.service';
+import { Node } from 'ngx-edu-sharing-api';
+
+@Component({
+    selector: 'es-node-entries-card-small',
+    templateUrl: 'node-entries-card-small.component.html',
+    styleUrls: ['node-entries-card-small.component.scss'],
+})
+export class NodeEntriesCardSmallComponent<T extends Node> implements OnChanges {
+    readonly ClickSource = ClickSource;
+    readonly InteractionType = InteractionType;
+    readonly Target = Target;
+    @Input() node: T;
+    constructor(
+        public entriesService: NodeEntriesService<T>,
+        public nodeHelper: NodeHelperService,
+        public templatesService: NodeEntriesTemplatesService,
+    ) {}
+
+    ngOnChanges(changes: SimpleChanges): void {}
+    optionsOnCard() {
+        const options = this.entriesService.options[Target.List];
+        const always = options.filter((o) => o.showAlways);
+        if (always.some((o) => o.showCallback(this.node))) {
+            return always;
+        }
+        return options.filter((o) => o.showAsAction && o.showCallback(this.node)).slice(0, 3);
+    }
+
+    openContextmenu(event: MouseEvent | Event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+}

package/src/lib/node-entries/node-entries-global-options/node-entries-global-options.component.html

@@ -0,0 +1,23 @@
+<div
+  *ngIf="entriesService.globalOptions?.length"
+  role="listitem"
+  class="global-options"
+  [class.global-options-small]="displayType === NodeEntriesDisplayType.SmallGrid"
+  [class.global-options-table]="displayType === NodeEntriesDisplayType.Table"
+>
+  <button
+    mat-button
+    *ngFor="let option of entriesService.globalOptions"
+    (click)="option.callback()"
+    class="global-option-btn"
+    attr.data-test="card-button-{{ option.name }}"
+  >
+    <ng-container *ngTemplateOutlet="globalOption; context: { option: this.option }"></ng-container>
+  </button>
+</div>
+<ng-template #globalOption let-option="option">
+  <span class="global-option">
+    <i [esIcon]="option.icon"></i>
+    <span class="label">{{ option.name | translate }}</span>
+  </span>
+</ng-template>

package/src/lib/node-entries/node-entries-global-options/node-entries-global-options.component.scss

@@ -0,0 +1,58 @@
+@import '../../../../assets/scss/variables';
+@import '../../../../assets/scss/mixins';
+
+.global-options {
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: repeat(auto-fit, minmax(70px, 1fr));
+    grid-row-gap: 20px;
+    height: 100%;
+    min-height: 250px;
+    &.global-options-small {
+        min-height: 130px;
+    }
+    &.global-options-table {
+        min-height: 100px;
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+        grid-column-gap: 20px;
+    }
+    .global-option-btn {
+        display: flex;
+        height: 100%;
+        padding: 0;
+    }
+    .global-option {
+        cursor: pointer;
+        display: flex;
+        @include materialShadow();
+        width: 100%;
+        height: 100%;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        border: 3px dashed var(--primary);
+        color: var(--primary);
+        > i {
+            font-size: 32px;
+            margin-bottom: 5px;
+        }
+        > .label {
+            cursor: pointer;
+            font-weight: bold;
+        }
+        &:hover,
+        &:focus {
+            background-color: rgb(var(--palette-primary-50));
+        }
+    }
+}
+:host ::ng-deep {
+    .global-options {
+        .global-option-btn {
+            .mdc-button__label {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+}

package/src/lib/node-entries/node-entries-global-options/node-entries-global-options.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Node } from 'ngx-edu-sharing-api';
+import { NodeEntriesDisplayType } from '../entries-model';
+import { NodeEntriesService } from '../../services/node-entries.service';
+
+@Component({
+    selector: 'es-node-entries-global-options',
+    templateUrl: './node-entries-global-options.component.html',
+    styleUrls: ['./node-entries-global-options.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NodeEntriesGlobalOptionsComponent<T extends Node> {
+    readonly NodeEntriesDisplayType = NodeEntriesDisplayType;
+    @Input() displayType: NodeEntriesDisplayType;
+    constructor(public entriesService: NodeEntriesService<T>) {}
+}