ngx-edu-sharing-ui 0.7.0

package/src/lib/node-entries/node-data-source-remote.ts

@@ -0,0 +1,33 @@
+import { NodeDataSource } from './node-data-source';
+import { GenericAuthority, Node } from 'ngx-edu-sharing-api';
+import { MatTableDataSourcePaginator } from '@angular/material/table';
+import { ActivatedRoute } from '@angular/router';
+import { PaginationStrategy } from './node-entries-global.service';
+import { Sort } from '@angular/material/sort';
+import { SortPanel } from '../types/list-item';
+
+export interface PaginationConfig {
+    defaultPageSize: number;
+    strategy: PaginationStrategy;
+}
+
+export abstract class NodeDataSourceRemote<
+    T extends Node | GenericAuthority = Node,
+    P extends MatTableDataSourcePaginator = MatTableDataSourcePaginator,
+> extends NodeDataSource<T> {
+    abstract get paginator(): P | null;
+    abstract set paginator(value: P | null);
+    abstract get sortPanel(): SortPanel;
+    abstract set sortPanel(value: SortPanel);
+    abstract loadMore(): boolean;
+
+    abstract registerQueryParameters(route: ActivatedRoute): void;
+
+    abstract init({
+        paginationConfig,
+        defaultSort,
+    }: {
+        paginationConfig: PaginationConfig;
+        defaultSort: Sort;
+    }): void;
+}

package/src/lib/node-entries/node-data-source.ts

@@ -0,0 +1,148 @@
+import { DataSource } from '@angular/cdk/collections';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { ItemsCap } from './items-cap';
+import { Node, GenericAuthority, Pagination } from 'ngx-edu-sharing-api';
+import { Helper } from '../util/helper';
+
+export type LoadingState =
+    // The data source is loading data for the first time.
+    | 'initial'
+    // Loading data after change of parameters, i.e., it will replace the current data when done.
+    | 'reset'
+    // Loading another page with unchanged parameters.
+    | 'page'
+    // Loading done.
+    | false;
+
+export class NodeDataSource<T extends Node | GenericAuthority> extends DataSource<T> {
+    protected dataStream = new BehaviorSubject<T[]>([]);
+    private pagination$ = new BehaviorSubject<Pagination>(null);
+    // Include `LoadingState` to be type-compatible to `NodeDataSourceRemote` although not used
+    // here.
+    public isLoadingSubject = new BehaviorSubject<LoadingState | boolean>(false);
+    get isLoading() {
+        return this.isLoadingSubject.value;
+    }
+    set isLoading(isLoading: LoadingState | boolean) {
+        this.isLoadingSubject.next(isLoading);
+    }
+    initialPageLoaded = false;
+    protected _itemsCap: ItemsCap<T> | null;
+    get itemsCap(): ItemsCap<T> | null {
+        return this._itemsCap;
+    }
+    set itemsCap(value: ItemsCap<T> | null) {
+        this._itemsCap = value;
+        this.connectRenderData();
+    }
+    protected renderData = new BehaviorSubject<T[]>([]);
+    protected renderDataSubscription: Subscription | null;
+
+    constructor(initialData: T[] = []) {
+        super();
+        this.setData(initialData);
+    }
+
+    connect(): Observable<T[]> {
+        if (!this.renderDataSubscription) {
+            this.connectRenderData();
+        }
+        return this.renderData;
+    }
+
+    private connectRenderData(): void {
+        this.renderDataSubscription?.unsubscribe();
+        if (this.itemsCap) {
+            this.renderDataSubscription = this.itemsCap
+                .connect(this.dataStream)
+                .subscribe((data) => this.renderData.next(data));
+        } else {
+            this.renderDataSubscription = this.dataStream.subscribe((data) =>
+                this.renderData.next(data),
+            );
+        }
+    }
+
+    connectPagination(): Observable<Pagination> {
+        return this.pagination$;
+    }
+
+    disconnect() {}
+
+    setData(data: T[], pagination: Pagination = null) {
+        this.dataStream.next(data);
+        this.setPagination(pagination);
+    }
+
+    appendData(appendData: T[], location: 'before' | 'after' = 'after') {
+        let data = this.getData();
+        if (location === 'after') {
+            data = data.concat(appendData);
+        } else {
+            data = appendData.concat(data);
+        }
+        this.dataStream.next(data);
+    }
+
+    /**
+     * Removes elements from the visible data.
+     */
+    removeData(toRemove: T[]): void {
+        const newData = this.getData().filter(
+            (value) =>
+                !toRemove.some((d) => Helper.objectEquals((d as Node).ref, (value as Node).ref)),
+        );
+        const removedData = this.getData().filter((value) => !newData.includes(value));
+        this.dataStream.next(newData);
+        if (this.pagination$.value) {
+            const pagination = this.pagination$.value;
+            this.setPagination({
+                count: pagination.count - removedData.length,
+                from: pagination.from,
+                total: pagination.total - removedData.length,
+            });
+        }
+    }
+
+    setPagination(pagination: Pagination) {
+        this.pagination$.next(pagination);
+    }
+
+    reset() {
+        this.setData([]);
+    }
+
+    hasMore() {
+        if (!this.pagination$.value) {
+            return undefined;
+        }
+        return this.pagination$.value.total > this.dataStream.value?.length;
+    }
+
+    // FIXME: This is somewhat dangerous because we rely on `connect` being called from outside, but
+    // this method provides a way to access data without ever calling `connect`.
+    getData() {
+        return this.renderData.value;
+    }
+
+    isEmpty(): boolean {
+        return this.dataStream.value?.length === 0;
+    }
+
+    getTotal() {
+        return this.pagination$.value?.total ?? this.dataStream.value?.length ?? 0;
+    }
+
+    isFullyLoaded() {
+        return this.getTotal() <= this.dataStream.value?.length;
+    }
+
+    /**
+     * force a refresh of all elements in the current data stream
+     * trigger this to enforce a rebuild of the nodes in all sub-components
+     * i.e. if data from some nodes has changed
+     */
+    refresh() {
+        this.dataStream.next(Helper.deepCopy(this.dataStream.value));
+    }
+}

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

@@ -0,0 +1,167 @@
+<div
+  class="grid-card"
+  [class.grid-card-collection]="isCollection"
+  [class.grid-card-virtual]="$any(node).virtual"
+  [style.background-color]="isCollection ? node.collection.color : null"
+  [class.dynamic-single-click]="entriesService.singleClickHint === 'dynamic'"
+  [class.selected]="entriesService.selection.isSelected(node)"
+  (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>
+  <button
+    *ngIf="dropdown"
+    #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>
+  <div class="card-top-bar" [style.background-color]="isCollection ? node.collection.color : null">
+    <div class="card-top-bar-collection-color" *ngIf="nodeHelper.isNodeCollection(node)"></div>
+    <es-node-type-badge [node]="node"></es-node-type-badge>
+    <div *ngIf="isCollection && node.collection.pinned" class="card-top-bar-flag">
+      <i esIcon="edu-pin"></i>
+    </div>
+    <div class="card-top-bar-empty"></div>
+    <es-node-stats-badges [node]="node"></es-node-stats-badges>
+    <div class="card-top-bar-checkbox" *ngIf="entriesService.checkbox">
+      <mat-checkbox
+        [checked]="entriesService.selection.isSelected(node)"
+        (change)="entriesService.onCheckboxChanged(node, $event.checked)"
+        aria-label="{{ 'SELECT' | translate : { element: (node | nodeTitle) } }}"
+      ></mat-checkbox>
+    </div>
+  </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>
+  <div
+    *ngIf="entriesService.elementInteractionType !== InteractionType.DefaultActionLink"
+    matRipple
+    (click)="
+      entriesService.onClicked({
+        event: $event,
+        element: node,
+        source: ClickSource.Metadata
+      })
+    "
+    (dblclick)="
+      entriesService.dblClickItem.emit({
+        element: node,
+        source: ClickSource.Metadata
+      })
+    "
+    esFocusState
+    #cardFocusState="esFocusState"
+  >
+    <ng-container
+      *ngTemplateOutlet="
+        image;
+        context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }
+      "
+    ></ng-container>
+    <ng-container *ngTemplateOutlet="meta"></ng-container>
+  </div>
+  <div class="card-options" *ngIf="entriesService.options || showRatings">
+    <div class="card-rating-area">
+      <es-node-rating [node]="node"></es-node-rating>
+    </div>
+    <div class="card-options-area">
+      <es-option-button
+        *ngFor="let option of optionsOnCard()"
+        class="card-options-always"
+        [option]="option"
+        [node]="node"
+      ></es-option-button>
+      <div class="card-options-spacer"></div>
+      <button
+        *ngIf="dropdown"
+        mat-icon-button
+        color="primary"
+        (click)="openMenu(node)"
+        [matMenuTriggerFor]="dropdown.menu"
+        [attr.aria-label]="'OPTIONS_FOR' | translate : { element: (node | nodeTitle) }"
+        data-test="card-options-button"
+      >
+        <i esIcon="more_vert"></i>
+      </button>
+    </div>
+  </div>
+  <ng-template #image let-playAnimation="playAnimation">
+    <div
+      class="card-image-area"
+      [style.background-color]="isCollection ? node.collection.color : null"
+    >
+      <ng-container *ngIf="getTemplate(CustomFieldSpecialType.preview) as ref">
+        <ng-container *ngTemplateOutlet="ref; context: { node: this.node }"></ng-container>
+      </ng-container>
+      <ng-container *ngIf="!getTemplate(CustomFieldSpecialType.preview)">
+        <es-preview-image
+          *ngIf="!(isCollection && node.preview.isIcon)"
+          [node]="node"
+          [playAnimation]="playAnimation"
+        ></es-preview-image>
+        <div *ngIf="isCollection && node.preview.isIcon" class="card-collection-image">
+          <i esIcon="layers"></i>
+        </div>
+      </ng-container>
+    </div>
+  </ng-template>
+  <ng-template #meta let-link="link">
+    <div class="card-meta">
+      <div
+        *ngFor="let displayPart of getVisibleColumns(); let first = first"
+        class="card-meta-row card-meta-row-{{ displayPart.name | lowercase }}"
+        [class.card-meta-row-primary]="first"
+      >
+        <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">
+          <label>
+            {{ displayPart | esListItemLabel | async }}
+          </label>
+          <es-list-base [item]="displayPart" [node]="node" [provideLabel]="false"> </es-list-base>
+        </ng-container>
+      </div>
+    </div>
+  </ng-template>
+</div>

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

@@ -0,0 +1,28 @@
+$imageHeight: 150px;
+$entriesCardPaddingHorizontal: 20px;
+$entriesCardPaddingVertical: 10px;
+$topBarHeight: 40px;
+$collectionIconPadding: 40px;
+$collectionIconSize: 40px;
+
+@import 'node-entries-card.main';
+
+.grid-card {
+    grid-template-rows: $topBarHeight auto $optionBarHeight;
+    .card-meta {
+        .card-meta-row {
+            > es-list-base {
+                @include limitLineCount(2, 1.25);
+            }
+        }
+    }
+}
+:host ::ng-deep {
+    .grid-card {
+        es-node-url {
+            .node-url-wrapper {
+                height: 100%;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,132 @@
+import {
+    ApplicationRef,
+    Component,
+    Input,
+    OnChanges,
+    OnInit,
+    Optional,
+    SimpleChanges,
+    ViewChild,
+} from '@angular/core';
+import { MatMenuTrigger } from '@angular/material/menu';
+import { ClickSource, InteractionType } from '../entries-model';
+import { NodeEntriesTemplatesService } from '../node-entries-templates.service';
+import { CustomFieldSpecialType, NodeEntriesGlobalService } from '../node-entries-global.service';
+import { Target } from '../../types/option-item';
+import { NodeEntriesService } from '../../services/node-entries.service';
+import { NodeHelperService } from '../../services/node-helper.service';
+import { AuthenticationService, ConfigService, Node, RestConstants } from 'ngx-edu-sharing-api';
+import { ColorHelper, PreferredColor } from '../../util/color-helper';
+import { take } from 'rxjs/operators';
+import { DropdownComponent } from '../../dropdown/dropdown.component';
+import { Toast } from '../../services/abstract/toast.service';
+
+@Component({
+    selector: 'es-node-entries-card',
+    templateUrl: 'node-entries-card.component.html',
+    styleUrls: ['node-entries-card.component.scss'],
+})
+export class NodeEntriesCardComponent<T extends Node> implements OnChanges, OnInit {
+    readonly InteractionType = InteractionType;
+    readonly Target = Target;
+    readonly ClickSource = ClickSource;
+    readonly CustomFieldSpecialType = CustomFieldSpecialType;
+    @Input() dropdown: DropdownComponent;
+
+    @ViewChild('menuTrigger') menuTrigger: MatMenuTrigger;
+
+    @Input() node: T;
+    dropdownLeft: number;
+    dropdownTop: number;
+    showRatings: boolean;
+    isCollection: boolean;
+    constructor(
+        public entriesService: NodeEntriesService<T>,
+        public nodeHelper: NodeHelperService,
+        public applicationRef: ApplicationRef,
+        public configService: ConfigService,
+        public authenticationService: AuthenticationService,
+        public templatesService: NodeEntriesTemplatesService,
+        private nodeEntriesGlobalService: NodeEntriesGlobalService,
+        @Optional() private toast: Toast,
+    ) {}
+
+    ngOnChanges(changes: SimpleChanges): void {
+        this.isCollection = this.nodeHelper.isNodeCollection(changes.node?.currentValue);
+    }
+
+    getTextColor() {
+        return ColorHelper.getPreferredColor(this.node.collection.color) === PreferredColor.Black
+            ? '#000'
+            : '#fff';
+    }
+    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;
+        }
+        // we do NOT show any additional actions
+        return [];
+        // return options.filter((o) => o.showAsAction && o.showCallback(this.node)).slice(0, 3);
+    }
+
+    openContextmenu(event: MouseEvent | Event) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (!this.dropdown) {
+            // Call `preventDefault()` even when there is no menu, so we can use `cdkDrag` with a
+            // start delay without being interrupted by the standard long-tap action.
+            return;
+        }
+        if (event instanceof MouseEvent) {
+            ({ clientX: this.dropdownLeft, clientY: this.dropdownTop } = event);
+        } else {
+            ({ x: this.dropdownLeft, y: this.dropdownTop } = (
+                event.target as HTMLElement
+            ).getBoundingClientRect());
+        }
+        if (!this.entriesService.selection.selected.includes(this.node)) {
+            this.entriesService.selection.clear();
+            this.entriesService.selection.select(this.node);
+        }
+        // Wait for the menu to reflect changed options.
+        setTimeout(() => {
+            if (this.dropdown.canShowDropdown()) {
+                this.menuTrigger.openMenu();
+            } else {
+                this.toast.toast('NO_AVAILABLE_OPTIONS');
+            }
+        });
+    }
+
+    getVisibleColumns() {
+        return this.entriesService.columns?.filter((c) => c.visible);
+    }
+
+    async openMenu(node: T) {
+        this.entriesService.selection.clear();
+        this.entriesService.selection.select(node);
+        await this.applicationRef.tick();
+        this.dropdown.menu.focusFirstItem();
+    }
+
+    async ngOnInit() {
+        await this.configService.observeConfig().pipe(take(1)).toPromise();
+        this.showRatings =
+            this.configService.instant('', 'none') !== 'none' &&
+            (await this.authenticationService.hasToolpermission(
+                RestConstants.TOOLPERMISSION_RATE_READ,
+            ));
+    }
+
+    getTemplate(name: CustomFieldSpecialType) {
+        return this.nodeEntriesGlobalService.getCustomFieldTemplate(
+            {
+                type: 'NODE',
+                name,
+            },
+            this.node as Node,
+        );
+    }
+}