ngx-edu-sharing-ui 0.7.0

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

@@ -0,0 +1,172 @@
+import { SelectionModel } from '@angular/cdk/collections';
+import { EventEmitter, Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import {
+    FetchEvent,
+    GridConfig,
+    InteractionType,
+    ListDragGropConfig,
+    ListEventInterface,
+    ListOptions,
+    ListSortConfig,
+    NodeClickEvent,
+    NodeEntriesDataType,
+    NodeEntriesDisplayType,
+} from '../node-entries/entries-model';
+import { NodeDataSource } from '../node-entries/node-data-source';
+import {
+    NodeEntriesGlobalService,
+    PaginationStrategy,
+} from '../node-entries/node-entries-global.service';
+
+import { OptionItem, Scope } from '../types/option-item';
+import { ListItem } from '../types/list-item';
+import { UIService } from './ui.service';
+import { NodeDataSourceRemote } from '../node-entries/node-data-source-remote';
+
+@Injectable()
+export class NodeEntriesService<T extends NodeEntriesDataType> {
+    list: ListEventInterface<T>;
+    readonly dataSource$ = new BehaviorSubject<NodeDataSource<T> | null>(null);
+    /**
+     * scope the current list is in, e.g. workspace
+     * This is used for additional config injection based on the scope
+     */
+    scope: Scope;
+    get dataSource(): NodeDataSource<T> {
+        return this.dataSource$.value;
+    }
+    set dataSource(value: NodeDataSource<T>) {
+        this.dataSource$.next(value);
+    }
+    get paginationStrategy(): PaginationStrategy {
+        return this.entriesGlobal.getPaginationStrategy(this.scope);
+    }
+    /**
+     * Subject that reflects the current columns configuration.
+     *
+     * Updated when loading configuration and through user interaction.
+     */
+    columnsSubject = new BehaviorSubject<ListItem[]>(null);
+    get columns(): ListItem[] {
+        return this.columnsSubject.value;
+    }
+    set columns(value: ListItem[]) {
+        this.columnsSubject.next(value);
+    }
+    configureColumns: boolean;
+    /** Emits when the columns configuration changes through user interaction. */
+    columnsChange: EventEmitter<ListItem[]>;
+    displayType: NodeEntriesDisplayType;
+    selection = new SelectionModel<T>(true, []);
+    elementInteractionType: InteractionType;
+    options$ = new BehaviorSubject<ListOptions>(null);
+    get options() {
+        return this.options$.value;
+    }
+    set options(options: ListOptions) {
+        this.options$.next(options);
+    }
+    checkbox: boolean;
+    globalOptions: OptionItem[];
+    sortSubject = new BehaviorSubject<ListSortConfig>(void 0);
+    get sort(): ListSortConfig {
+        return this.sortSubject.value;
+    }
+    set sort(value: ListSortConfig) {
+        this.sortSubject.next(value);
+    }
+    sortChange: EventEmitter<ListSortConfig>;
+    dragDrop: ListDragGropConfig<T>;
+    clickItem: EventEmitter<NodeClickEvent<T>>;
+    dblClickItem: EventEmitter<NodeClickEvent<T>>;
+    fetchData: EventEmitter<FetchEvent>;
+    readonly gridConfig$ = new BehaviorSubject<GridConfig | null>(null);
+    get gridConfig(): GridConfig {
+        return this.gridConfig$.value;
+    }
+    set gridConfig(value: GridConfig) {
+        this.gridConfig$.next(value);
+    }
+    primaryInstance: boolean;
+    singleClickHint: 'dynamic' | 'static';
+    disableInfiniteScroll: boolean;
+
+    constructor(private uiService: UIService, private entriesGlobal: NodeEntriesGlobalService) {}
+
+    onClicked({ event, ...data }: NodeClickEvent<T> & { event: MouseEvent }) {
+        if (event.ctrlKey || event.metaKey) {
+            this.selection.toggle(data.element);
+        } else if (event.shiftKey) {
+            this.expandSelectionTo(data.element);
+        } else {
+            this.clickItem.emit(data);
+        }
+    }
+
+    onCheckboxChanged(node: T, checked: boolean) {
+        console.log(node, checked, this.uiService.shiftKeyPressed);
+        if (this.uiService.shiftKeyPressed) {
+            this.expandSelectionTo(node);
+        }
+
+        if (checked !== this.selection.isSelected(node)) {
+            this.selection.toggle(node);
+        }
+    }
+
+    toggleSelectAll() {
+        if (this.isAllSelected()) {
+            this.selection.clear();
+        } else {
+            this.selectAll();
+        }
+    }
+
+    loadMore(source: 'button' | 'scroll'): boolean {
+        if (this.paginationStrategy !== 'infinite-scroll') {
+            return false;
+        }
+        if (source === 'scroll' && this.disableInfiniteScroll) {
+            return false;
+        }
+        // TODO: focus next item when triggered via button.
+        if (this.dataSource instanceof NodeDataSourceRemote) {
+            return (this.dataSource as NodeDataSourceRemote).loadMore();
+        } else {
+            if (this.dataSource.hasMore()) {
+                this.fetchData.emit({
+                    offset: this.dataSource.getData().length,
+                    reset: false,
+                });
+                return true;
+            } else {
+                return false;
+            }
+        }
+    }
+
+    private selectAll() {
+        this.selection.select(...this.dataSource.getData());
+    }
+
+    private isAllSelected(): boolean {
+        return this.dataSource.getData().every((node) => this.selection.isSelected(node));
+    }
+
+    private expandSelectionTo(node: T) {
+        const nodeIndex = this.dataSource.getData().indexOf(node);
+        const selectionIndexes = this.selection.selected
+            .map((node) => this.dataSource.getData().indexOf(node))
+            .filter((index) => index >= 0);
+        if (Math.min(...selectionIndexes) < nodeIndex) {
+            for (let i = Math.min(...selectionIndexes) + 1; i <= nodeIndex; i++) {
+                this.selection.select(this.dataSource.getData()[i]);
+            }
+        } else if (Math.max(...selectionIndexes) > nodeIndex) {
+            for (let i = nodeIndex; i < Math.max(...selectionIndexes); i++) {
+                this.selection.select(this.dataSource.getData()[i]);
+            }
+        }
+    }
+}

package/src/lib/services/node-helper.service.ts

@@ -0,0 +1,239 @@
+import { Injectable } from '@angular/core';
+import {
+    ApiHelpersService,
+    ConfigService,
+    NetworkService,
+    Node,
+    ProposalNode,
+    RestConstants,
+} from 'ngx-edu-sharing-api';
+import { TranslateService } from '@ngx-translate/core';
+import * as Workflow from '../types/workflow';
+import { RepoUrlService } from './repo-url.service';
+import { Params } from '@angular/router';
+import { UIConstants } from '../util/ui-constants';
+@Injectable({
+    providedIn: 'root',
+})
+export class NodeHelperService {
+    constructor(
+        protected translate: TranslateService,
+        protected apiHelpersService: ApiHelpersService,
+        protected networkService: NetworkService,
+        protected configService: ConfigService,
+        protected repoUrlService: RepoUrlService,
+    ) {}
+
+    public getCollectionScopeInfo(node: Node): { icon: string; scopeName: string } {
+        const scope = node.collection ? node.collection.scope : null;
+        let icon = 'help';
+        let scopeName = 'UNKNOWN';
+        if (scope === RestConstants.COLLECTIONSCOPE_MY) {
+            icon = 'lock';
+            scopeName = 'MY';
+        }
+        if (
+            scope === RestConstants.COLLECTIONSCOPE_ORGA ||
+            scope === RestConstants.COLLECTIONSCOPE_CUSTOM
+        ) {
+            icon = 'group';
+            scopeName = 'SHARED';
+        }
+        if (
+            scope === RestConstants.COLLECTIONSCOPE_ALL ||
+            scope === RestConstants.COLLECTIONSCOPE_CUSTOM_PUBLIC
+        ) {
+            icon = 'language';
+            scopeName = 'PUBLIC';
+        }
+        if (node.collection?.type === RestConstants.COLLECTIONTYPE_EDITORIAL) {
+            icon = 'star';
+            scopeName = 'TYPE_EDITORIAL';
+        }
+        if (node.collection?.type === RestConstants.COLLECTIONTYPE_MEDIA_CENTER) {
+            icon = 'business';
+            scopeName = 'TYPE_MEDIA_CENTER';
+        }
+        return { icon, scopeName };
+    }
+    /**
+     * Return the license icon of a node
+     */
+    async getLicenseIcon(node: Node): Promise<string> {
+        // prefer manual mapping instead of backend data to support custom states from local edits
+        const license = node.properties?.[RestConstants.CCM_PROP_LICENSE]?.[0];
+        if (license) {
+            return this.getLicenseIconByString(license);
+        }
+        return node.license ? this.repoUrlService.getRepoUrl(node.license.icon, node) : null;
+    }
+
+    /**
+     * Get a license icon by using the property value string
+     */
+    public getLicenseIconByString(string: String, useNoneAsFallback = true): string {
+        let icon = string.replace(/_/g, '-').toLowerCase();
+        if (icon == '') icon = 'none';
+
+        const LICENSE_ICONS = [
+            'cc-0',
+            'cc-by-nc',
+            'cc-by-nc-nd',
+            'cc-by-nc-sa',
+            'cc-by-nd',
+            'cc-by-sa',
+            'cc-by',
+            'copyright-free',
+            'copyright-license',
+            'custom',
+            'edu-nc-nd-noDo',
+            'edu-nc-nd',
+            'edu-p-nr-nd-noDo',
+            'edu-p-nr-nd',
+            'none',
+            'pdm',
+            'schulfunk',
+            'unterrichts-und-lehrmedien',
+        ];
+        if (LICENSE_ICONS.indexOf(icon) == -1 && !useNoneAsFallback) return null; // icon='none';
+        if (icon == 'none' && !useNoneAsFallback) return null;
+        const result =
+            this.apiHelpersService.getServerUrl() + '/../ccimages/licenses/' + icon + '.svg';
+        return this.repoUrlService.withCurrentOrigin(result);
+    }
+    /**
+     * Return a translated name of a license name for a node
+     * @param node
+     * @param translate
+     * @returns {string|any|string|any|string|any|string|any|string|any|string}
+     */
+    public getLicenseName(node: Node) {
+        let prop = node.properties[RestConstants.CCM_PROP_LICENSE]?.[0];
+        if (!prop) prop = '';
+        return this.getLicenseNameByString(prop);
+    }
+
+    /**
+     * Return a translated name for a license string
+     * @param string
+     * @param translate
+     * @returns {any}
+     */
+    public getLicenseNameByString(name: string) {
+        if (name == '') {
+            name = 'NONE';
+        }
+        return this.translate.instant('LICENSE.NAMES.' + name);
+        // return name.replace(/_/g,"-");
+    }
+
+    /**
+     * return the License URL (e.g. for CC_BY licenses) for a license string and version
+     * @param licenseProperty
+     * @param licenseVersion
+     */
+    public getLicenseUrlByString(licenseProperty: string, licenseVersion: string) {
+        const url = (RestConstants.LICENSE_URLS as any)[licenseProperty];
+        if (!url) return null;
+        return url.replace('#version', licenseVersion);
+    }
+
+    public getWorkflowStatusById(id: string) {
+        const workflows = this.getWorkflows();
+        return workflows.filter((w) => w.id === id)?.[0];
+    }
+    public getWorkflowStatus(node: Node, useFromConfig = false): Workflow.WorkflowDefinitionStatus {
+        let value = node.properties[RestConstants.CCM_PROP_WF_STATUS]?.[0];
+        if (!value) {
+            return this.getDefaultWorkflowStatus(useFromConfig);
+        }
+        return {
+            current: this.getWorkflowStatusById(value),
+            initial: this.getWorkflowStatusById(value),
+        };
+    }
+    getDefaultWorkflowStatus(useFromConfig = false): Workflow.WorkflowDefinitionStatus {
+        const result = {
+            current: null as Workflow.WorkflowDefinition,
+            initial: null as Workflow.WorkflowDefinition,
+        };
+        result.initial = this.getWorkflows()[0];
+        let defaultStatus: string = null;
+        if (useFromConfig) {
+            defaultStatus = this.configService.instant('workflow.defaultStatus');
+        }
+        if (defaultStatus) {
+            result.current = this.getWorkflows().find((w) => w.id === defaultStatus);
+        } else {
+            result.current = result.initial;
+        }
+        return result;
+    }
+    getWorkflows(): Workflow.WorkflowDefinition[] {
+        return this.configService.instant('workflow.workflows', [
+            Workflow.WORKFLOW_STATUS_UNCHECKED,
+            Workflow.WORKFLOW_STATUS_TO_CHECK,
+            Workflow.WORKFLOW_STATUS_HASFLAWS,
+            Workflow.WORKFLOW_STATUS_CHECKED,
+        ]);
+    }
+    copyDataToNode<T extends Node>(target: T, source: T) {
+        target.properties = source.properties;
+        target.name = source.name;
+        target.title = source.title;
+    }
+    isNodeCollection(node: Node): boolean {
+        return node.aspects?.includes(RestConstants.CCM_ASPECT_COLLECTION) || !!node.collection;
+    }
+    public getSourceIconPath(src: string) {
+        return 'assets/images/sources/' + src.toLowerCase() + '.png';
+    }
+
+    getNodeLink(mode: 'routerLink' | 'queryParams', node: Node) {
+        if (!node?.ref) {
+            return null;
+        }
+        let data: { routerLink: string; queryParams: Params } = null;
+        if (this.isNodeCollection(node)) {
+            data = {
+                routerLink: UIConstants.ROUTER_PREFIX + 'collections',
+                queryParams: { id: node.ref.id },
+            };
+        } else {
+            if (node.isDirectory) {
+                let path;
+                if (
+                    node.properties?.[RestConstants.CCM_PROP_EDUSCOPENAME]?.[0] ===
+                    RestConstants.SAFE_SCOPE
+                ) {
+                    path = UIConstants.ROUTER_PREFIX + 'workspace/safe';
+                } else {
+                    path = UIConstants.ROUTER_PREFIX + 'workspace';
+                }
+                data = {
+                    routerLink: path,
+                    queryParams: { id: node.ref.id },
+                };
+            } else if (node.ref) {
+                const fromHome = this.networkService.isFromHomeRepository(node);
+                data = {
+                    routerLink: UIConstants.ROUTER_PREFIX + 'render/' + node.ref.id,
+                    queryParams: {
+                        repository: fromHome ? null : node.ref.repo,
+                        proposal: (node as ProposalNode).proposal?.ref.id,
+                        proposalCollection: (node as ProposalNode).proposalCollection?.ref.id,
+                    },
+                };
+            }
+        }
+        if (data === null) {
+            return '';
+        }
+        if (mode === 'routerLink') {
+            return '/' + data.routerLink;
+        }
+        // enforce clearing of parameters which should only be consumed once
+        data.queryParams.redirectFromSSO = null;
+        return data.queryParams;
+    }
+}

package/src/lib/services/nodes-drag-drop.service.ts

@@ -0,0 +1,165 @@
+import { Injectable, NgZone } from '@angular/core';
+import * as rxjs from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
+import { distinctUntilChanged, map, pairwise } from 'rxjs/operators';
+import { CanDrop, DropAction } from '../types/drag-drop';
+import { NodesDropTargetDirective } from '../directives/drag-nodes/nodes-drop-target.directive';
+import { Node } from 'ngx-edu-sharing-api';
+import { Toast } from './abstract/toast.service';
+import { UIService } from './ui.service';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class NodesDragDropService {
+    /** The node(s) currently being dragged. */
+    private draggedNodesSubject = new BehaviorSubject<Node[]>(null);
+    /** The drop target that something is currently dragged above. */
+    private dropTargetSubject = new BehaviorSubject<NodesDropTargetDirective>(null);
+    /** Whether the current drop target allows dropping the dragged node(s). */
+    private canDropSubject = new BehaviorSubject<CanDrop | null>(null);
+    /** A target being hovered with the cursor. Does not mean anything is dragged yet. */
+    private hoveredTargetSubject = new BehaviorSubject<NodesDropTargetDirective>(null);
+    /** Current drop action based on pressed modifier keys. */
+    private dropActionSubject = new BehaviorSubject<DropAction>('move');
+    /** The current cursor style. */
+    private curserSubject = new BehaviorSubject<string>(null);
+
+    set draggedNodes(nodes: Node[]) {
+        this.draggedNodesSubject.next(nodes);
+    }
+
+    get canDrop() {
+        return this.canDropSubject.value;
+    }
+
+    constructor(private ngZone: NgZone, private toast: Toast, private uiService: UIService) {
+        this.registerDropTarget();
+        this.registerCanDrop();
+        this.registerDropActionSubject();
+        this.registerCursor();
+        this.registerActiveDropTargetStyle();
+        // this.draggedNodesSubject.subscribe((draggedNodes) =>
+        //     console.log('draggedNodes', draggedNodes),
+        // );
+        // this.dropTargetSubject.subscribe((dropTarget) => console.log('dropTarget', dropTarget));
+        // this.canDropSubject.subscribe((canDrop) => console.log('canDrop', canDrop));
+    }
+
+    /** Call when the cursor enters a possible drop target. Runs outside ngZone. */
+    onMouseEnter(target: NodesDropTargetDirective) {
+        this.hoveredTargetSubject.next(target);
+    }
+
+    /** Call when the cursor leaves a possible drop target. Runs outside ngZone. */
+    onMouseLeave(target: NodesDropTargetDirective) {
+        if (this.hoveredTargetSubject.value === target) {
+            this.hoveredTargetSubject.next(null);
+        }
+    }
+
+    onDropped(nodes: Node[]) {
+        if (this.canDrop?.accept) {
+            this.dropTargetSubject.value?.nodeDropped.emit({
+                draggedNodes: nodes,
+                action: this.dropActionSubject.value,
+                target: this.dropTargetSubject.value.target,
+            });
+        } else if (this.canDrop?.denyReason) {
+            this.toast.error(null, this.canDrop.denyReason);
+        }
+    }
+
+    private registerDropTarget() {
+        rxjs.combineLatest([this.draggedNodesSubject, this.hoveredTargetSubject])
+            .pipe(
+                map(([draggedNodes, hoveredNode]) => draggedNodes && hoveredNode),
+                distinctUntilChanged(),
+            )
+            .subscribe((target) => {
+                this.ngZone.run(() => {
+                    this.dropTargetSubject.next(target);
+                });
+            });
+    }
+
+    private registerCanDrop() {
+        rxjs.combineLatest([this.dropTargetSubject, this.dropActionSubject])
+            .pipe(
+                map(([dropTarget, dropAction]) =>
+                    dropTarget?.canDropNodes({
+                        draggedNodes: this.draggedNodesSubject.value,
+                        action: dropAction,
+                        target: dropTarget.target,
+                    }),
+                ),
+                // FIXME: this won't filter equal objects
+                distinctUntilChanged(),
+            )
+            .subscribe((canDrop) => {
+                this.ngZone.run(() => this.canDropSubject.next(canDrop));
+            });
+    }
+
+    private registerCursor() {
+        rxjs.combineLatest([
+            this.draggedNodesSubject,
+            this.canDropSubject,
+            this.dropActionSubject,
+        ]).subscribe(([draggedNodes, canDrop, dropAction]) => {
+            this.curserSubject.next(this.getCursor(draggedNodes, canDrop, dropAction));
+        });
+        let style: HTMLStyleElement;
+        this.curserSubject.subscribe((cursor) => {
+            if (cursor && !style) {
+                style = document.createElement('style');
+                document.body.appendChild(style);
+            } else if (style && !cursor) {
+                document.body.removeChild(style);
+                style = null;
+            }
+            if (cursor) {
+                style.innerHTML = `* {cursor: ${cursor} !important; }`;
+            }
+        });
+    }
+
+    private registerActiveDropTargetStyle() {
+        rxjs.combineLatest([this.dropTargetSubject, this.canDropSubject, this.dropActionSubject])
+            .pipe(pairwise())
+            .subscribe(([[previous], [current, canDrop, action]]) => {
+                // console.log('can drop', canDrop);
+                previous?._setActiveDropTarget(null);
+                current?._setActiveDropTarget({ canDrop, action });
+            });
+    }
+
+    private registerDropActionSubject() {
+        this.uiService
+            .observeCtrlOrCmdKeyPressedOutsideZone()
+            .pipe(map((ctrlOrCmdPressed) => this.getDropAction(ctrlOrCmdPressed)))
+            .subscribe((dropAction) =>
+                this.ngZone.run(() => this.dropActionSubject.next(dropAction)),
+            );
+    }
+
+    private getDropAction(ctrlOrCmdPressed: boolean): DropAction {
+        if (ctrlOrCmdPressed) {
+            return 'copy';
+        } else {
+            return 'move';
+        }
+    }
+
+    private getCursor(draggedNodes: Node[], canDrop: CanDrop, dropAction: DropAction): string {
+        if (!draggedNodes) {
+            return null;
+        } else if (canDrop?.denyExplicit) {
+            return 'no-drop';
+        } else if (dropAction === 'copy') {
+            return 'copy';
+        } else {
+            return 'grabbing';
+        }
+    }
+}