ngx-edu-sharing-ui 0.7.0

package/src/lib/directives/nodes-drop-target-legacy.directive.ts

@@ -0,0 +1,155 @@
+import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
+import {
+    DragDataLegacy,
+    dragNodesTransferType,
+    DropActionLegacy,
+    readDraggedNodes,
+} from './drag-nodes/drag-nodes';
+
+/**
+ * Handle dragging and dropping of nodes onto an element.
+ *
+ * Use in combination with `NodesDragSourceDirective`.
+ *
+ * When an element that sets `NodesDragSourceDirective` is dragged onto an
+ * element that sets this directive, drag events are passed as output events.
+ * Some of these output events provide data about the dragged nodes. Passed
+ * events are filtered to not trigger unnecessarily.
+ */
+@Directive({
+    selector: '[esLegacyNodesDropTarget]',
+})
+export class NodesDropTargetLegacyDirective {
+    /**
+     * The last node that some (other) node(s) were dragged over.
+     *
+     * One of two mechanisms to determine if we entered the element, i.e., if
+     * the cursor -- while dragging node(s) -- is moved from outside onto this
+     * node.
+     *
+     * If the cursor was over another node before, we know it just entered this
+     * one.
+     *
+     * This fails when the cursor is moved from this node to a place other than
+     * a node and back again.
+     */
+    private static last: NodesDropTargetLegacyDirective;
+
+    /**
+     * A function to determine whether this element is a valid drop target for
+     * the dragged nodes.
+     *
+     * Output events are *only* fired, when this function evaluates to `true`.
+     */
+    @Input('esLegacyNodesDropTarget') canDrop: boolean | ((dragData: DragDataLegacy) => boolean);
+    @Input() nodesDragAllowedActions: DropActionLegacy[] = ['move', 'copy'];
+
+    @Output() nodesDragEnter = new EventEmitter<DragEvent>();
+    @Output() nodesDragLeave = new EventEmitter<DragEvent>();
+    /**
+     * Indicates whether the cursor is hovering over the element, holding one or more nodes.
+     */
+    @Output() nodesHoveringChange = new EventEmitter<boolean>();
+    /**
+     * Triggered when one or more nodes are dropped onto the element.
+     */
+    @Output() nodesDrop = new EventEmitter<DragDataLegacy>();
+
+    /**
+     * Difference of enter- and leave events.
+     *
+     * One of two mechanisms to determine if we entered the element, i.e., if
+     * the cursor -- while dragging node(s) -- is moved from outside onto this
+     * node.
+     *
+     * If we enter this node a second time without having left it once, we
+     * probably just stayed on it.
+     *
+     * This fails when a leave event fails to fire, e.g., when the DOM element
+     * was repositioned while the curser was dragged over it.
+     */
+    private enterCount = 0;
+    private canDropCurrent: boolean;
+    private dropAction: DropActionLegacy;
+
+    constructor() {}
+
+    @HostListener('dragenter', ['$event']) onDragEnter(event: DragEvent) {
+        if (!event.dataTransfer.types.includes(dragNodesTransferType)) {
+            return;
+        }
+        if (this.enterCount === 0 || NodesDropTargetLegacyDirective.last !== this) {
+            NodesDropTargetLegacyDirective.last = this;
+            this.enterCount = 0;
+            this.canDropCurrent = this.getCanDrop(event);
+            if (this.canDropCurrent) {
+                this.nodesHoveringChange.emit(true);
+                this.nodesDragEnter.emit(event);
+            }
+        }
+        if (this.canDropCurrent) {
+            event.preventDefault();
+        }
+        this.enterCount++;
+    }
+
+    @HostListener('dragleave', ['$event']) onDragLeave(event: DragEvent) {
+        if (!event.dataTransfer.types.includes(dragNodesTransferType)) {
+            return;
+        }
+        this.enterCount--;
+        if (this.canDropCurrent) {
+            if (this.enterCount === 0) {
+                this.nodesDragLeave.emit(event);
+                this.nodesHoveringChange.emit(false);
+            }
+        }
+    }
+
+    @HostListener('dragover', ['$event']) onDragOver(event: DragEvent) {
+        if (!event.dataTransfer.types.includes(dragNodesTransferType)) {
+            return;
+        }
+        if (this.canDropCurrent) {
+            event.preventDefault();
+            this.dropAction = this.getDropAction(event);
+            event.dataTransfer.dropEffect = this.dropAction;
+        }
+    }
+
+    @HostListener('drop', ['$event']) onDrop(event: DragEvent) {
+        if (!event.dataTransfer.types.includes(dragNodesTransferType)) {
+            return;
+        }
+        if (this.canDropCurrent) {
+            event.preventDefault();
+            const nodes = readDraggedNodes();
+            this.nodesDrop.emit({
+                event,
+                nodes,
+                dropAction: this.getDropAction(event),
+            });
+            this.nodesHoveringChange.emit(false);
+        }
+        this.enterCount = 0;
+        NodesDropTargetLegacyDirective.last = null;
+    }
+
+    private getCanDrop(event: DragEvent): boolean {
+        if (typeof this.canDrop === 'function') {
+            const nodes = readDraggedNodes();
+            return this.canDrop({ event, nodes, dropAction: this.getDropAction(event) });
+        }
+        return this.canDrop;
+    }
+
+    private getDropAction(event: DragEvent): DropActionLegacy {
+        if (this.nodesDragAllowedActions.includes('copy') && event.ctrlKey) {
+            return 'copy';
+        } else if (this.nodesDragAllowedActions.includes('link') && event.altKey) {
+            return 'link';
+        } else {
+            return 'move';
+        }
+    }
+}

package/src/lib/dropdown/dropdown.component.html

@@ -0,0 +1,32 @@
+<mat-menu
+  #dropdown="matMenu"
+  class="mat-dropdown-menu"
+  [class]="menuClass"
+  backdropClass="mat-dropdown-menu"
+  [xPosition]="position === 'right' ? 'after' : 'before'"
+>
+  <!-- MatMenu has role="menu", so the only meaningful role of descendants is "menuitem" -->
+  <ul role="none">
+    <ng-container *ngFor="let option of _options; let i = index">
+      <li *ngIf="option.isEnabled || showDisabled" role="none">
+        <button
+          mat-menu-item
+          class="mat-menu-item collection-item-{{
+            option.name | replaceChars : { search: '.', replace: '-' }
+          }}"
+          matTooltip="{{ option | optionTooltip }}"
+          matTooltipPosition="right"
+          matTooltipTouchGestures="off"
+          [class.mat-menu-item-separate]="option.isSeparate || isNewGroup(i)"
+          [class.mat-menu-item-selected]="option.isSelected"
+          [disabled]="!option.isEnabled"
+          (click)="click(option)"
+          attr.data-test="menu-item-{{ option.name }}"
+        >
+          <i [esIcon]="option.icon"></i> {{ option.name | translate }}
+        </button>
+      </li>
+    </ng-container>
+  </ul>
+</mat-menu>
+<div #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu" class="display-none"></div>

package/src/lib/dropdown/dropdown.component.scss

@@ -0,0 +1,67 @@
+@import '../../../assets/scss/mixins';
+
+// We cannot use `:host` here, since the `mat-menu` elements are rearranged
+// outside of the original container. Hence we rely on the `.mat-dropdown-menu`
+// selector to not bleed into other components.
+::ng-deep .mat-dropdown-menu {
+    .mat-mdc-menu-content {
+        min-width: 200px;
+        > ul > li > button {
+            &:not(:disabled) > span {
+                color: var(--primary);
+            }
+            display: flex;
+            align-items: center;
+            > i {
+                width: 35px;
+            }
+        }
+        &:not(:empty) {
+            padding: 0 !important;
+        }
+    }
+
+    ul {
+        margin: 0;
+        list-style: none;
+        padding-left: 0;
+        li {
+            .mat-mdc-menu-item {
+                .mat-mdc-menu-item-text {
+                    display: flex;
+                    align-items: center;
+                    i {
+                        margin-right: 10px;
+                    }
+                }
+                &:hover:not([disabled]),
+                &.cdk-focused {
+                    color: var(--itemSelectedTextColor);
+                    background-color: var(--listItemSelectedBackground);
+                }
+                &.cdk-keyboard-focused {
+                    @include setGlobalKeyboardFocus('border');
+                }
+            }
+
+            .mat-menu-item-separate {
+                border-top: 1px solid #ccc;
+            }
+
+            // Mobile menus at bottom
+            @media screen and (max-width: (calc(var(--mobileWidth) - var(--mobileStage) * 1))) {
+                &.cdk-overlay-backdrop {
+                    background: rgba(0, 0, 0, 0.8);
+                }
+                &.mat-menu-panel {
+                    position: fixed;
+                    bottom: 0;
+                    left: 0;
+                    max-width: 100%;
+                    width: 100%;
+                    border-radius: 0;
+                }
+            }
+        }
+    }
+}

package/src/lib/dropdown/dropdown.component.ts

@@ -0,0 +1,71 @@
+import { Component, Input, ViewChild } from '@angular/core';
+import { MatMenu, MatMenuContent, MatMenuTrigger } from '@angular/material/menu';
+import { OptionItem } from '../types/option-item';
+import { Helper } from '../util/helper';
+import { UIService } from '../services/ui.service';
+
+/**
+ * The dropdown is one base component of the action bar (showing more actions),
+ * but can also be used standalone.
+ */
+@Component({
+    selector: 'es-dropdown',
+    templateUrl: 'dropdown.component.html',
+    styleUrls: ['dropdown.component.scss'],
+})
+export class DropdownComponent {
+    @ViewChild('dropdown', { static: true }) menu: MatMenu;
+    @ViewChild('menuTrigger') menuTrigger: MatMenuTrigger;
+
+    @Input() position: 'left' | 'right' = 'left';
+
+    @Input() set options(options: OptionItem[]) {
+        this._options = this.ui.filterValidOptions(Helper.deepCopyArray(options));
+    }
+
+    /**
+     * The object that should be returned via the option's callback.
+     *
+     * Can be null
+     */
+    @Input() callbackObject: any;
+
+    /**
+     * Should disabled ("greyed out") options be shown or hidden?
+     */
+    @Input() showDisabled = true;
+
+    /**
+     * An additional class to add to the `mat-menu` instance.
+     *
+     * This is needed to customize the menu styling since the menu contents are
+     * taken out of the host container by angular.
+     */
+    @Input() menuClass: string;
+
+    _options: OptionItem[];
+
+    constructor(private ui: UIService) {}
+
+    click(option: OptionItem) {
+        if (!option.isEnabled) {
+            return;
+        }
+        setTimeout(() => option.callback(this.callbackObject));
+    }
+
+    isNewGroup(i: number) {
+        if (i > 0) {
+            return this._options[i].group !== this._options[i - 1].group;
+        }
+        return false;
+    }
+
+    /** Whether there are any enabled options so we can open the menu. */
+    canShowDropdown(): boolean {
+        // We can only open the dropdown menu, when there is at least one enabled option. Even when
+        // there are options with `showDisabled: true`, showing a menu with no selectable option
+        // causes a11y issues.
+        return this._options?.some((o) => o.isEnabled);
+    }
+}

package/src/lib/edu-sharing-ui-configuration.ts

@@ -0,0 +1,47 @@
+import { Injectable, InjectionToken, Provider } from '@angular/core';
+import { Observable } from 'rxjs';
+import { AccessibilitySettings } from './types/accessibillity';
+import { KeyboardShortcut } from './types/keyboard-shortcuts';
+
+export const EDU_SHARING_UI_CONFIG = new InjectionToken<EduSharingUiConfigurationParams>(
+    'EDU_SHARING_API_CONFIG',
+);
+
+@Injectable({
+    providedIn: 'root',
+})
+export class EduSharingUiConfiguration {
+    production: boolean;
+    static create(params: EduSharingUiConfigurationParams = {}): EduSharingUiConfiguration {
+        return { ...new EduSharingUiConfiguration(), ...params };
+    }
+}
+
+export type EduSharingUiConfigurationParams = Partial<EduSharingUiConfiguration>;
+
+export function getConfigProvider(params?: EduSharingUiConfigurationParams): Provider[] {
+    return [
+        // Provide the params given to `forRoot()`. These can be overridden by the application by
+        // providing `EDU_SHARING_API_CONFIG` itself.
+        {
+            provide: EDU_SHARING_UI_CONFIG,
+            useValue: params,
+        },
+        // Inject `configuration` as both, `ApiConfiguration` and `EduSharingApiConfiguration`, to pass
+        // `rootUrl` on to `ApiModule` while also adding our custom configuration.
+        {
+            provide: EduSharingUiConfiguration,
+            deps: [EDU_SHARING_UI_CONFIG],
+            // deps: [[new Optional(), EDU_SHARING_API_CONFIG]],
+            useFactory: (configParams: EduSharingUiConfigurationParams) =>
+                EduSharingUiConfiguration.create(configParams),
+        },
+        {
+            provide: EduSharingUiConfiguration,
+            deps: [EDU_SHARING_UI_CONFIG],
+            // deps: [[new Optional(), EDU_SHARING_API_CONFIG]],
+            useFactory: (configParams: EduSharingUiConfigurationParams) =>
+                EduSharingUiConfiguration.create(configParams),
+        },
+    ];
+}

package/src/lib/edu-sharing-ui.module.ts

@@ -0,0 +1,49 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { CommonModule } from '@angular/common';
+import { EduSharingUiConfigurationParams, getConfigProvider } from './edu-sharing-ui-configuration';
+import { ListItemsModule } from './list-items/list-items.module';
+import { NodeEntriesModule } from './node-entries/node-entries.module';
+import { EduSharingUiCommonModule } from './common/edu-sharing-ui-common.module';
+import { NodeImageSizePipe } from './pipes/node-image-size.pipe';
+import { FormatDatePipe } from './pipes/format-date.pipe';
+import { ListItemLabelPipe } from './node-entries/list-item-label.pipe';
+import { SortDropdownComponent } from './sort-dropdown/sort-dropdown.component';
+
+@NgModule({
+    declarations: [],
+    imports: [
+        CommonModule,
+        TranslateModule,
+        EduSharingUiCommonModule,
+        ListItemsModule,
+        NodeEntriesModule,
+        // Loading the TranslationsModule here causes errors for lazy-loaded pages like the search
+        // page. For usage outside the context of edu-sharing, we probably need to import the
+        // TranslationsModule at the main module that packages or uses this library.
+    ],
+    exports: [
+        CommonModule,
+        MatTooltipModule,
+        TranslateModule,
+        EduSharingUiCommonModule,
+        ListItemsModule,
+        NodeEntriesModule,
+        NodeImageSizePipe,
+        FormatDatePipe,
+        ListItemsModule,
+        ListItemLabelPipe,
+        SortDropdownComponent,
+    ],
+})
+export class EduSharingUiModule {
+    public static forRoot(
+        config: EduSharingUiConfigurationParams,
+    ): ModuleWithProviders<EduSharingUiModule> {
+        return {
+            ngModule: EduSharingUiModule,
+            providers: [getConfigProvider(config)],
+        };
+    }
+}

package/src/lib/list-items/available-widgets.ts

@@ -0,0 +1,30 @@
+import { ListCollectionInfoComponent } from './list-collection-info/list-collection-info.component';
+import { ListCountsComponent } from './list-counts/list-counts.component';
+import { ListNodeLicenseComponent } from './list-node-license/list-node-license.component';
+import { ListNodeReplicationSourceComponent } from './list-node-replication-source/list-node-replication-source.component';
+import { ListNodeWorkflowComponent } from './list-node-workflow/list-node-workflow.component';
+import { ListTextComponent } from './list-text/list-text.component';
+import { ListWidgetClass } from './list-widget';
+
+export enum ListWidgetType {
+    CollectionInfo = 'CollectionInfo',
+    Text = 'Text',
+    Custom = 'Custom',
+    NodeLicense = 'NodeLicense',
+    NodeReplicationSource = 'NodeReplicationSource',
+    NodeWorkflow = 'NodeWorkflow',
+    NodeCounts = 'NodeCounts',
+}
+export const AVAILABLE_LIST_WIDGETS: {
+    [widgetType in ListWidgetType]: ListWidgetClass;
+} = {
+    CollectionInfo: ListCollectionInfoComponent,
+    NodeLicense: ListNodeLicenseComponent,
+    NodeReplicationSource: ListNodeReplicationSourceComponent,
+    NodeWorkflow: ListNodeWorkflowComponent,
+    NodeCounts: ListCountsComponent,
+    Custom: null,
+
+    // use the widgets with wildcards as last ones
+    Text: ListTextComponent,
+};

package/src/lib/list-items/format-duration.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DurationFormat } from '../util/duration-helper';
+import { DurationHelper } from '../util/duration-helper';
+
+@Pipe({
+    name: 'formatDuration',
+})
+export class FormatDurationPipe implements PipeTransform {
+    transform(
+        value: string,
+        args = {
+            format: DurationFormat.Hms,
+        },
+    ): string {
+        return DurationHelper.getDurationFormatted(value, args.format);
+    }
+}

package/src/lib/list-items/list-base/list-base.component.html

@@ -0,0 +1,52 @@
+<ng-container [ngSwitch]="widgetType">
+  <ng-container *ngSwitchCase="'Custom'">
+    <ng-container
+      *ngTemplateOutlet="
+        customTemplate;
+        context: {
+          item: this.item,
+          node: this.node,
+          provideLabel: this.provideLabel,
+          forceText: this.forceText
+        }
+      "
+    >
+    </ng-container>
+  </ng-container>
+  <es-list-collection-info
+    *ngSwitchCase="'CollectionInfo'"
+    [item]="item"
+    [node]="node"
+    [provideLabel]="provideLabel"
+  ></es-list-collection-info>
+  <es-list-text
+    *ngSwitchCase="'Text'"
+    [item]="item"
+    [node]="node"
+    [provideLabel]="provideLabel"
+  ></es-list-text>
+  <es-list-counts
+    *ngSwitchCase="'NodeCounts'"
+    [item]="item"
+    [node]="node"
+    [provideLabel]="provideLabel"
+  ></es-list-counts>
+  <es-list-node-license
+    *ngSwitchCase="'NodeLicense'"
+    [item]="item"
+    [node]="node"
+    [provideLabel]="provideLabel"
+  ></es-list-node-license>
+  <es-list-node-replication-source
+    *ngSwitchCase="'NodeReplicationSource'"
+    [item]="item"
+    [node]="node"
+    [provideLabel]="provideLabel"
+  ></es-list-node-replication-source>
+  <es-list-node-workflow
+    *ngSwitchCase="'NodeWorkflow'"
+    [item]="item"
+    [node]="node"
+    [provideLabel]="provideLabel"
+  ></es-list-node-workflow>
+</ng-container>

package/src/lib/list-items/list-base/list-base.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
+import { AVAILABLE_LIST_WIDGETS, ListWidgetType } from '../available-widgets';
+import { ListWidget } from '../list-widget';
+import { NodeEntriesGlobalService } from '../../node-entries/node-entries-global.service';
+import { Node } from 'ngx-edu-sharing-api';
+
+@Component({
+    selector: 'es-list-base',
+    templateUrl: './list-base.component.html',
+})
+export class ListBaseComponent extends ListWidget implements OnChanges {
+    /**
+     * use text only widgets (for table)
+     */
+    @Input() forceText = false;
+    widgetType: ListWidgetType;
+    customTemplate: TemplateRef<unknown>;
+    constructor(private nodeEntriesGlobalService: NodeEntriesGlobalService) {
+        super();
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (this.node && this.item) {
+            this.customTemplate = this.nodeEntriesGlobalService.getCustomFieldTemplate(
+                this.item,
+                this.node as Node,
+            );
+            if (this.customTemplate) {
+                this.widgetType = ListWidgetType.Custom;
+            } else if (this.forceText) {
+                this.widgetType = ListWidgetType.Text;
+            } else {
+                this.widgetType = Object.entries(AVAILABLE_LIST_WIDGETS).find(
+                    ([id, w]) =>
+                        w?.supportedItems?.filter(
+                            (i) =>
+                                i.type === this.item.type &&
+                                (i.name === this.item.name || i.name === '*'),
+                        ).length > 0,
+                )?.[0] as ListWidgetType;
+            }
+        }
+    }
+}

package/src/lib/list-items/list-collection-info/list-collection-info.component.html

@@ -0,0 +1,48 @@
+<ng-container [ngSwitch]="item.name">
+  <ng-container *ngSwitchCase="'info'">
+    <ng-container *ngIf="indicatorIcons$ | async; else textRepresentation">
+      <i
+        esIcon="layers"
+        [altText]="'COLLECTION.INFO_REFERENCES_MULTI' | translate"
+        [matTooltip]="'COLLECTION.INFO_REFERENCES_MULTI' | translate"
+      ></i>
+      {{ $any(node).collection?.childCollectionsCount }}
+      <i
+        esIcon="insert_drive_file"
+        [altText]="'collections_content' | translate"
+        [matTooltip]="'collections_content' | translate"
+      ></i>
+      {{ $any(node).collection?.childReferencesCount }}
+    </ng-container>
+    <ng-template #textRepresentation>
+      <div class="rows">
+        <p>
+          {{ 'COLLECTION.INFO_REFERENCES_MULTI' | translate }}:
+          {{ $any(node).collection?.childCollectionsCount }}
+        </p>
+        <p>
+          {{ 'collections_content' | translate }}:
+          {{ $any(node).collection?.childReferencesCount }}
+        </p>
+      </div>
+    </ng-template>
+  </ng-container>
+  <ng-container *ngSwitchCase="'scope'">
+    <i
+      *ngIf="indicatorIcons$ | async; else textRepresentation"
+      class="collectionScope"
+      [esIcon]="nodeHelper.getCollectionScopeInfo($any(node)).icon"
+      [matTooltip]="
+        'COLLECTION.SCOPE.' + nodeHelper.getCollectionScopeInfo($any(node)).scopeName | translate
+      "
+      [altText]="
+        'COLLECTION.SCOPE.' + nodeHelper.getCollectionScopeInfo($any(node)).scopeName | translate
+      "
+    ></i>
+    <ng-template #textRepresentation>
+      {{
+        'COLLECTION.SCOPE.' + nodeHelper.getCollectionScopeInfo($any(node)).scopeName | translate
+      }}
+    </ng-template>
+  </ng-container>
+</ng-container>

package/src/lib/list-items/list-collection-info/list-collection-info.component.scss

@@ -0,0 +1,8 @@
+.rows {
+    display: flex;
+    flex-direction: column;
+    text-align: start;
+    p {
+        margin: 0;
+    }
+}

package/src/lib/list-items/list-collection-info/list-collection-info.component.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { ListItem } from '../../types/list-item';
+import { ListWidget } from '../list-widget';
+import { NodeHelperService } from '../../services/node-helper.service';
+import { AccessibilityService } from '../../services/accessibility.service';
+
+@Component({
+    selector: 'es-list-collection-info',
+    templateUrl: './list-collection-info.component.html',
+    styleUrls: ['./list-collection-info.component.scss'],
+})
+export class ListCollectionInfoComponent extends ListWidget {
+    static supportedItems = [
+        new ListItem('COLLECTION', 'info'),
+        new ListItem('COLLECTION', 'scope'),
+    ];
+
+    readonly indicatorIcons$;
+
+    constructor(private accessibility: AccessibilityService, public nodeHelper: NodeHelperService) {
+        super();
+        this.indicatorIcons$ = this.accessibility.observe('indicatorIcons');
+    }
+}

package/src/lib/list-items/list-counts/list-counts.component.html

@@ -0,0 +1 @@
+{{ getCount() }}

package/src/lib/list-items/list-counts/list-counts.component.scss

@@ -0,0 +1,3 @@
+:host {
+    white-space: pre-line;
+}