ngx-edu-sharing-ui 0.7.0

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

@@ -0,0 +1,53 @@
+<ng-container *ngIf="hasPermission && node.type === 'ccm:io' && isFromHomeRepo(node)">
+  <div *ngIf="mode === 'likes'" class="likes">
+    <button
+      (click)="toogleLike()"
+      [disabled]="(this.authenticationService.observeLoginInfo() | async)?.isGuest"
+      mat-icon-button
+      color="primary"
+      matTooltip="{{ 'RATING.LIKES' | translate }}"
+    >
+      <i [esIcon]="'edu-thumb_up' + (!node.rating?.user ? '_off' : '')"></i>
+    </button>
+    <span matTooltip="{{ 'RATING.COUNT_LIKES' | translate }}">{{
+      node.rating?.overall.count
+    }}</span>
+  </div>
+  <div *ngIf="mode === 'stars'" class="stars" mat-icon-button color="primary">
+    <button
+      *ngFor="let rating of [1, 2, 3, 4, 5]"
+      mat-icon-button
+      color="primary"
+      class="star"
+      (click)="setRating(rating)"
+      [disabled]="(this.authenticationService.observeLoginInfo() | async)?.isGuest"
+      (focus)="hoverStar = rating"
+      (mouseenter)="hoverStar = rating"
+      (mouseleave)="hoverStar = 0"
+      (blur)="hoverStar = 0"
+      [class.star-hover]="hoverStar >= rating"
+    >
+      <i
+        [esIcon]="
+          'star' +
+          ((hoverStar ? hoverStar >= rating : getPrimaryRating() >= rating) ? '' : '_border')
+        "
+        matTooltip="{{ 'RATING.STARS_RATE' | translate : { rating: rating } }}"
+      ></i>
+    </button>
+    <button
+      *ngIf="!!node.rating?.user"
+      mat-icon-button
+      color="primary"
+      class="delete"
+      matTooltip="{{ 'RATING.DELETE_RATING' | translate }}"
+      (click)="deleteRating()"
+      [disabled]="(this.authenticationService.observeLoginInfo() | async)?.isGuest"
+    >
+      <i esIcon="clear"></i>
+    </button>
+    <span matTooltip="{{ 'RATING.COUNT_RATINGS' | translate }}"
+      >({{ node.rating?.overall.count }})</span
+    >
+  </div>
+</ng-container>

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

@@ -0,0 +1,31 @@
+.stars {
+    display: flex;
+    align-items: center;
+    span {
+        padding-left: 8px;
+    }
+}
+.likes {
+    display: flex;
+    align-items: center;
+}
+.mat-icon-button.mat-primary {
+    color: var(--textLight);
+    &.likes {
+    }
+    &.star,
+    &.delete {
+        min-width: unset;
+        width: 18px;
+        height: 18px;
+        ::ng-deep {
+            i {
+                font-size: 17px;
+                line-height: 1;
+            }
+        }
+        &.star-hover {
+            color: var(--colorStarActive);
+        }
+    }
+}

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

@@ -0,0 +1,105 @@
+import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
+import {
+    Node,
+    ConfigService,
+    AuthenticationService,
+    RestConstants,
+    NetworkService,
+} from 'ngx-edu-sharing-api';
+import { Toast } from '../../services/abstract/toast.service';
+import { take, takeUntil } from 'rxjs/operators';
+import { RestHelper } from '../../util/rest-helper';
+@Component({
+    selector: 'es-node-rating',
+    templateUrl: 'node-rating.component.html',
+    styleUrls: ['node-rating.component.scss'],
+})
+export class NodeRatingComponent<T extends Node> implements OnInit {
+    // @TODO
+    ratingService: any = {};
+    @Input() node: T;
+    mode: RatingMode;
+    hasPermission: boolean;
+    hoverStar: number;
+    constructor(
+        public toast: Toast,
+        public configService: ConfigService,
+        private networkApi: NetworkService,
+        public authenticationService: AuthenticationService,
+        public changeDetectorRef: ChangeDetectorRef, // @TODO // public ratingService: RestRatingService,
+    ) {}
+
+    async ngOnInit() {
+        await this.configService.observeConfig().pipe(take(1)).toPromise();
+        this.mode = this.configService.instant('rating.mode', 'none');
+        this.hasPermission = await this.authenticationService.hasToolpermission(
+            RestConstants.TOOLPERMISSION_RATE_READ,
+        );
+    }
+
+    async toogleLike() {
+        const name = RestHelper.getTitle(this.node);
+        if (this.node.rating?.user) {
+            try {
+                await this.ratingService.deleteNodeRating(this.node.ref.id).toPromise();
+                this.toast.toast('RATING.TOAST.LIKE_REMOVED', { name });
+                this.node.rating.user = 0;
+                this.node.rating.overall.count--;
+            } catch (e) {
+                this.toast.error(e);
+            }
+        } else {
+            try {
+                await this.ratingService.updateNodeRating(this.node.ref.id, 5).toPromise();
+                this.toast.toast('RATING.TOAST.LIKED', { name });
+                this.node.rating.user = 5;
+                this.node.rating.overall.count++;
+            } catch (e) {
+                this.toast.error(e);
+            }
+        }
+        this.changeDetectorRef.detectChanges();
+    }
+
+    getPrimaryRating() {
+        if (!this.node.rating) {
+            return 0;
+        }
+        if (this.node.rating.user) {
+            return this.node.rating.user;
+        }
+        return this.node.rating.overall.sum / this.node.rating.overall.count;
+    }
+
+    async setRating(rating: number) {
+        const name = RestHelper.getTitle(this.node);
+        try {
+            await this.ratingService.updateNodeRating(this.node.ref.id, rating).toPromise();
+            this.toast.toast('RATING.TOAST.RATED', { name, rating });
+            this.node.rating.overall.count += this.node.rating.user ? 0 : 1;
+            this.node.rating.user = rating;
+            this.changeDetectorRef.detectChanges();
+        } catch (e) {
+            this.toast.error(e);
+        }
+    }
+
+    async deleteRating() {
+        const name = RestHelper.getTitle(this.node);
+        try {
+            await this.ratingService.deleteNodeRating(this.node.ref.id).toPromise();
+            this.toast.toast('RATING.TOAST.RATING_REMOVED', { name });
+            this.node.rating.overall.count--;
+            this.node.rating.overall.sum -= this.node.rating.user;
+            this.node.rating.user = 0;
+            this.changeDetectorRef.detectChanges();
+        } catch (e) {
+            this.toast.error(e);
+        }
+    }
+
+    isFromHomeRepo(node: Node) {
+        return this.networkApi.isFromHomeRepository(node);
+    }
+}
+export type RatingMode = 'none' | 'likes' | 'stars';

package/src/lib/node-entries/node-stats-badges/node-stats-badges.component.html

@@ -0,0 +1,39 @@
+<!--
+    <div
+      *ngIf="node.aspects?.includes('ccm:published')"
+      class="card-top-bar-published-copy"
+    >
+      <div class="node-published-copy">
+        <i
+          esIcon="content_copy"
+          [matTooltip]="'PUBLISHED_COPY_TOOLTIP' | translate"
+        ></i>
+      </div>
+    </div>
+    -->
+<div class="card-top-bar-comments">
+  <div
+    class="node-comments"
+    *ngIf="node.type === 'ccm:io'"
+    (click)="
+      entriesService?.onClicked({
+        event: $event,
+        element: node,
+        source: ClickSource.Comments
+      })
+    "
+    [matTooltip]="('COMMENTS_MULTIPLE' | translate) + ': ' + node.commentCount"
+  >
+    <i esIcon="comment"></i>
+    <span>{{ node.commentCount }}</span>
+  </div>
+</div>
+<div class="card-top-bar-childobjects" *ngIf="childObjectCount > 0">
+  <div
+    class="childobject-count"
+    matTooltip="{{ 'CHILDOBJECT_COUNT' | translate : { count: childObjectCount + 1 } }}"
+  >
+    <span>{{ childObjectCount + 1 }}</span
+    ><i esIcon="filter_none"></i>
+  </div>
+</div>

package/src/lib/node-entries/node-stats-badges/node-stats-badges.component.scss

@@ -0,0 +1,44 @@
+:host {
+    display: flex;
+    gap: 15px;
+}
+
+.card-top-bar-comments,
+.card-top-bar-published-copy,
+.card-top-bar-childobjects {
+    > div {
+        :host[backgroundStyle='lighten'] & {
+            background-color: rgba(255, 255, 255, 0.75);
+        }
+        :host[backgroundStyle='darken'] & {
+            background-color: rgba(0, 0, 0, 0.2);
+        }
+        border-radius: 15px;
+        display: inline-flex;
+        align-items: center;
+        min-width: 35px;
+        min-height: 22px;
+        justify-content: center;
+        cursor: default;
+        user-select: none;
+        padding: 2px 8px;
+        &.childobject-count {
+            > i {
+                font-size: 13px;
+                margin-left: 4px;
+            }
+        }
+        &.node-published-copy {
+            min-width: auto;
+            > i {
+                font-size: 13px;
+            }
+        }
+        &.node-comments {
+            > i {
+                font-size: 13px;
+                margin-right: 4px;
+            }
+        }
+    }
+}

package/src/lib/node-entries/node-stats-badges/node-stats-badges.component.ts

@@ -0,0 +1,43 @@
+import { Component, HostBinding, Input, Optional } from '@angular/core';
+import { Node } from 'ngx-edu-sharing-api';
+import { ClickSource } from '../entries-model';
+import { NodeEntriesService } from '../../services/node-entries.service';
+
+@Component({
+    selector: 'es-node-stats-badges',
+    templateUrl: './node-stats-badges.component.html',
+    styleUrls: ['./node-stats-badges.component.scss'],
+})
+export class NodeStatsBadgesComponent {
+    readonly ClickSource = ClickSource;
+
+    childObjectCount = 0;
+
+    private _node: Node;
+    @Input()
+    get node(): Node {
+        return this._node;
+    }
+    set node(node: Node) {
+        this._node = node;
+        this.childObjectCount = this.getChildObjectCount(node);
+    }
+
+    @HostBinding('attr.backgroundStyle')
+    @Input()
+    backgroundStyle: 'darken' | 'lighten' = 'lighten';
+
+    constructor(
+        @Optional()
+        public entriesService: NodeEntriesService<Node>,
+    ) {}
+
+    private getChildObjectCount(node: Node): number {
+        const value = node.properties?.['virtual:childobjectcount']?.[0];
+        if (value) {
+            return parseInt(value);
+        } else {
+            return 0;
+        }
+    }
+}

package/src/lib/node-entries/node-type-badge/node-type-badge.component.html

@@ -0,0 +1,31 @@
+<ng-container *ngIf="isCollection">
+  <i
+    [matTooltip]="
+      'COLLECTION.SCOPE.' + nodeHelper.getCollectionScopeInfo($any(node)).scopeName | translate
+    "
+    [altText]="
+      'COLLECTION.SCOPE.' + nodeHelper.getCollectionScopeInfo($any(node)).scopeName | translate
+    "
+    [esIcon]="nodeHelper.getCollectionScopeInfo($any(node)).icon"
+  ></i>
+</ng-container>
+<ng-container *ngIf="!isCollection">
+  <ng-container *ngIf="getCustomTemplate() as ref">
+    <ng-container *ngTemplateOutlet="ref; context: { node: this.node }"></ng-container>
+  </ng-container>
+  <ng-container *ngIf="!getCustomTemplate()">
+    <img
+      [src]="node | esNodeIcon | async"
+      [alt]="
+        node.mediatype
+          ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)
+          : ''
+      "
+      [matTooltip]="
+        node.mediatype
+          ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)
+          : ''
+      "
+    />
+  </ng-container>
+</ng-container>

package/src/lib/node-entries/node-type-badge/node-type-badge.component.scss

@@ -0,0 +1,5 @@
+@import '../mixins.scss';
+
+:host {
+    @include card-top-bar-badge;
+}

package/src/lib/node-entries/node-type-badge/node-type-badge.component.ts

@@ -0,0 +1,36 @@
+import { Component, Input, OnChanges } from '@angular/core';
+import { Node } from 'ngx-edu-sharing-api';
+import { CustomFieldSpecialType, NodeEntriesGlobalService } from '../node-entries-global.service';
+import { NodeHelperService } from '../../services/node-helper.service';
+
+/**
+ * A small circular badge that depicts the node's type.
+ *
+ * To be used in the top bar of a card or similar places.
+ */
+@Component({
+    selector: 'es-node-type-badge',
+    templateUrl: './node-type-badge.component.html',
+    styleUrls: ['./node-type-badge.component.scss'],
+})
+export class NodeTypeBadgeComponent implements OnChanges {
+    @Input() node: Node;
+
+    isCollection: boolean;
+
+    constructor(
+        public nodeHelper: NodeHelperService,
+        private nodeEntriesGlobalService: NodeEntriesGlobalService,
+    ) {}
+
+    ngOnChanges(): void {
+        this.isCollection = this.nodeHelper.isNodeCollection(this.node);
+    }
+
+    getCustomTemplate() {
+        return this.nodeEntriesGlobalService.getCustomFieldTemplate(
+            { type: 'NODE', name: CustomFieldSpecialType.type },
+            this.node,
+        );
+    }
+}

package/src/lib/node-entries/option-button/option-button.component.ts

@@ -0,0 +1,42 @@
+import { Component, Input } from '@angular/core';
+import { Node } from 'ngx-edu-sharing-api';
+import { OptionItem } from '../../types/option-item';
+// TODO: Decide if providing focus highlights and ripples with this component is a good idea. When
+// using `app-node-url` for cards, we might need highlights and ripples for the whole card while
+// `app-node-url` should only wrap the title since links with lots of content confuse screen
+// readers.
+
+@Component({
+    selector: 'es-option-button',
+    template: `
+        <button
+            mat-icon-button
+            color="primary"
+            matTooltip="{{ option.name | translate }}"
+            [class.display-none]="!optionIsShown(option, node)"
+            [disabled]="!optionIsValid(option, node)"
+            (click)="optionIsShown(option, node) ? option.callback(node) : null"
+            attr.data-test="option-button-{{ option.name }}"
+        >
+            <i esIcon="{{ option.icon }}" [aria]="false"></i>
+        </button>
+    `,
+})
+export class OptionButtonComponent {
+    @Input() option: OptionItem;
+    @Input() node: Node;
+
+    optionIsValid(optionItem: OptionItem, node: Node): boolean {
+        if (optionItem.enabledCallback) {
+            return optionItem.enabledCallback(node);
+        }
+        return optionItem.isEnabled;
+    }
+
+    optionIsShown(optionItem: OptionItem, node: Node): boolean {
+        if (optionItem.showCallback) {
+            return optionItem.showCallback(node);
+        }
+        return true;
+    }
+}

package/src/lib/node-entries/preview-image/preview-image.component.html

@@ -0,0 +1,19 @@
+<div class="card-image-backdrop">
+  <!-- The blur filter does not work with canvas as it does with img on Chrome, so we go for a black
+  background for now. -->
+  <!-- <canvas *ngIf="showCanvas" #backdropCanvas role="presentation" aria-hidden="true"></canvas> -->
+  <img
+    [src]="node | esNodeImage : { maxWidth: 300, maxHeight: 300, crop: true } | async"
+    alt=""
+    *ngIf="!replacedWithStatic"
+  />
+</div>
+
+<canvas *ngIf="showCanvas" #canvas role="presentation" aria-hidden="true"></canvas>
+<img
+  (load)="onImageLoad($event)"
+  #image
+  [src]="node | esNodeImage : { maxWidth: 300, maxHeight: 300, crop: true } | async"
+  alt=""
+  [class.display-none]="replacedWithStatic && !playAnimation"
+/>

package/src/lib/node-entries/preview-image/preview-image.component.scss

@@ -0,0 +1,31 @@
+@import '../../../../assets/scss/mixins';
+
+:host {
+    position: relative;
+    overflow: hidden;
+}
+
+.card-image-backdrop {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    img,
+    canvas {
+        object-fit: cover;
+        @include blurImage(15px);
+        opacity: 1;
+    }
+}
+
+:host > img,
+:host > canvas {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    position: absolute;
+}
+
+.display-none {
+    display: none;
+}

package/src/lib/node-entries/preview-image/preview-image.component.ts

@@ -0,0 +1,47 @@
+import { Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { Node } from 'ngx-edu-sharing-api';
+
+/**
+ * Displays the preview image of `node`.
+ *
+ * When `node` is a video, the animated preview image is replaced with a static canvas unless
+ * `playAnimation` is set to `true`.
+ */
+@Component({
+    selector: 'es-preview-image',
+    templateUrl: './preview-image.component.html',
+    styleUrls: ['./preview-image.component.scss'],
+})
+export class PreviewImageComponent<T extends Node> {
+    @Input() node: T;
+    @Input() playAnimation = false;
+
+    @ViewChild('image') imageRef: ElementRef<HTMLImageElement>;
+    @ViewChild('canvas') canvasRef: ElementRef<HTMLCanvasElement>;
+    // @ViewChild('backdropCanvas') backdropCanvasRef: ElementRef<HTMLCanvasElement>;
+
+    showCanvas: boolean = false;
+    replacedWithStatic: boolean = false;
+
+    constructor() {}
+
+    onImageLoad(event: Event): void {
+        if (this.node.mimetype?.startsWith('video')) {
+            const image = event.target as HTMLImageElement;
+            this.showCanvas = true;
+            setTimeout(() => {
+                this.initCanvas(image, this.canvasRef.nativeElement);
+                // this.initCanvas(image, this.backdropCanvasRef.nativeElement);
+                this.replacedWithStatic = true;
+            });
+        }
+    }
+
+    private initCanvas(image: HTMLImageElement, canvas: HTMLCanvasElement): void {
+        var width = image.naturalWidth;
+        var height = image.naturalHeight;
+        canvas.width = width;
+        canvas.height = height;
+        canvas.getContext('2d').drawImage(image, 0, 0, width, height);
+    }
+}

package/src/lib/node-entries/sort-select-panel/sort-select-panel.component.html

@@ -0,0 +1,27 @@
+<mat-slide-toggle
+  *ngIf="active === 'ccm:collection_ordered_position'"
+  [(ngModel)]="customSortingInProgress"
+  (ngModelChange)="customSortingInProgressChange.emit($event)"
+>
+  {{ 'COLLECTIONS.SORT_SLIDER' | translate }}
+</mat-slide-toggle>
+<button
+  *ngIf="sortDropdown.menu"
+  [matMenuTriggerFor]="sortDropdown.menu"
+  mat-button
+  color="primary"
+>
+  <span *ngIf="active">{{ 'NODE.' + active | translate }}</span>
+  <span *ngIf="!active">{{ 'SORT_BY' | translate }}</span>
+  <i
+    *ngIf="active && active !== 'ccm:collection_ordered_position'"
+    [esIcon]="'arrow_' + (direction === 'asc' ? 'upward' : 'downward')"
+  ></i>
+</button>
+<es-sort-dropdown
+  #sortDropdown
+  [columns]="columns"
+  [sortBy]="active"
+  [sortAscending]="direction === 'asc'"
+  (onSort)="onSort($event)"
+></es-sort-dropdown>

package/src/lib/node-entries/sort-select-panel/sort-select-panel.component.scss

@@ -0,0 +1,9 @@
+:host {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+mat-slide-toggle {
+    margin-right: 10px;
+}

package/src/lib/node-entries/sort-select-panel/sort-select-panel.component.ts

@@ -0,0 +1,26 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Sort, SortDirection } from '@angular/material/sort';
+import { ListItemSort, SortEvent, SortPanel } from '../../types/list-item';
+
+@Component({
+    selector: 'es-sort-select-panel',
+    templateUrl: './sort-select-panel.component.html',
+    styleUrls: ['./sort-select-panel.component.scss'],
+})
+export class SortSelectPanelComponent implements SortPanel {
+    @Input() active: string;
+    @Input() direction: SortDirection;
+    @Input() columns: ListItemSort[];
+    @Output() sortChange = new EventEmitter<Sort>();
+    @Input() customSortingInProgress: boolean;
+    @Output() customSortingInProgressChange = new EventEmitter<boolean>();
+
+    constructor() {}
+
+    onSort(event: SortEvent) {
+        this.sortChange.emit({
+            active: event.name,
+            direction: event.ascending ? 'asc' : 'desc',
+        });
+    }
+}

package/src/lib/node-url/node-url.component.html

@@ -0,0 +1,66 @@
+<ng-template #content><ng-content></ng-content></ng-template>
+<ng-container *ngIf="mode === 'link'">
+  <a
+    *ngIf="!disabled"
+    #link
+    matRipple
+    matRippleColor="primary"
+    [matRippleDisabled]="isNested"
+    [routerLink]="get('routerLink')"
+    [state]="getState()"
+    [target]="target"
+    [queryParams]="get('queryParams')"
+    queryParamsHandling="merge"
+    cdkMonitorElementFocus
+    [attr.aria-label]="ariaLabel ? node.name : null"
+    [attr.aria-describedby]="ariaDescribedby"
+  >
+    <ng-container *ngTemplateOutlet="content"></ng-container>
+  </a>
+  <!-- We use `div`s instead of `span`s here because the legacy `ListTable` component will insert
+  `div` elements into this component's content. However, this will lead to invalid HTML for "button"
+  mode. So really, users of this component should only insert flow content. -->
+  <div *ngIf="disabled && !alwaysRipple">
+    <ng-container *ngTemplateOutlet="content"></ng-container>
+  </div>
+  <div *ngIf="disabled && alwaysRipple" matRipple matRippleColor="primary">
+    <ng-container *ngTemplateOutlet="content"></ng-container>
+  </div>
+</ng-container>
+<ng-container *ngIf="mode === 'wrapper'">
+  <div
+    class="node-url-wrapper"
+    #wrapper
+    matRipple
+    matRippleColor="primary"
+    [matRippleDisabled]="disabled && !alwaysRipple"
+    (click)="clickWrapper($event)"
+    (auxclick)="clickWrapper($event)"
+  >
+    <ng-container *ngTemplateOutlet="content"></ng-container>
+  </div>
+  <!-- An invisible link that will by clicked programmatically by `clickWrapper()`. -->
+  <a
+    #link
+    [routerLink]="get('routerLink')"
+    [state]="getState()"
+    [queryParams]="get('queryParams')"
+    queryParamsHandling="merge"
+    tabindex="-1"
+    aria-hidden="true"
+    class="cdk-visually-hidden"
+  ></a>
+</ng-container>
+<ng-container *ngIf="mode === 'button'">
+  <button
+    [disabled]="disabled"
+    #link
+    matRipple
+    matRippleColor="primary"
+    [matRippleDisabled]="disabled && !alwaysRipple"
+    (click)="buttonClick.emit($event)"
+    cdkMonitorElementFocus
+  >
+    <ng-container *ngTemplateOutlet="content"></ng-container>
+  </button>
+</ng-container>