ngx-edu-sharing-ui 0.7.0

package/src/lib/list-items/node-row/node-row.component.ts

@@ -0,0 +1,16 @@
+import { Component, ContentChild, Input, TemplateRef } from '@angular/core';
+import { Node } from 'ngx-edu-sharing-api';
+import { ListItem } from '../../types/list-item';
+
+@Component({
+    selector: 'es-node-row',
+    templateUrl: 'node-row.component.html',
+    styleUrls: ['node-row.component.scss'],
+})
+export class NodeRowComponent {
+    @ContentChild('customMetadata') customMetadataRef: TemplateRef<any>;
+    @Input() node: Node;
+    @Input() columns: ListItem[];
+
+    constructor() {}
+}

package/src/lib/list-items/node-source.pipe.ts

@@ -0,0 +1,48 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { NetworkService, Repository } from 'ngx-edu-sharing-api';
+import { NodeHelperService } from '../services/node-helper.service';
+
+@Pipe({ name: 'appNodeSource' })
+export class NodeSourcePipe implements PipeTransform {
+    private homeRepository: Repository;
+
+    constructor(private nodeHelper: NodeHelperService, private networkApi: NetworkService) {
+        this.networkApi.getHomeRepository().subscribe((homeRepository) => {
+            this.homeRepository = homeRepository;
+        });
+    }
+
+    transform(
+        replicationSource: string,
+        args: {
+            mode: 'text' | 'url' | 'escaped';
+        },
+    ): string {
+        const rawSrc = replicationSource ? replicationSource.toString().trim() : 'home';
+        if (args.mode === 'text') {
+            if (rawSrc === 'home') {
+                // FIXME: This will fix the pipe's return value to 'home' for calls before
+                // `this.homeRepository` was populated (although that doesn't seem to happen).
+                return this.homeRepository?.title || 'home';
+            }
+            return rawSrc;
+        } else if (args.mode === 'url') {
+            const src = this.escape(rawSrc);
+            return this.nodeHelper.getSourceIconPath(src);
+        } else if (args.mode === 'escaped') {
+            return this.escape(rawSrc);
+        }
+        return null;
+    }
+
+    private escape(src: string) {
+        if (!src) {
+            return src;
+        }
+        src = src.substring(src.lastIndexOf(':') + 1).toLowerCase();
+        src = src.replace(/\s/g, '_');
+        src = src.replace(/\./g, '_');
+        src = src.replace(/\//g, '_');
+        return src;
+    }
+}

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

@@ -0,0 +1,51 @@
+import { Observable, of } from 'rxjs';
+import { NodeDataSource } from './node-data-source';
+import { Node, GenericAuthority } from 'ngx-edu-sharing-api';
+
+/**
+ * data source which joins multiple underlying data sources
+ * used for the "all" search
+ */
+export class CombinedDataSource<T extends Node | GenericAuthority> extends NodeDataSource<T> {
+    constructor(private dataSources: NodeDataSource<T>[]) {
+        super();
+    }
+
+    connect(): Observable<T[]> {
+        // @TODO: Using a forkJoin and real connect would be better
+        return of(this.getData());
+        /*
+        return forkJoin(this.dataSources.map(ds => ds.connect())).pipe(
+            switchMap(d => d)
+        ) as Observable<T[]>;
+         */
+    }
+
+    disconnect() {}
+    hasMore() {
+        return this.dataSources.filter((ds) => ds.hasMore()).length > 0;
+    }
+
+    getData() {
+        return [].concat.apply(
+            [],
+            this.dataSources.map((ds) => ds.getData()),
+        );
+    }
+
+    isEmpty(): boolean {
+        return this.getData()?.length === 0;
+    }
+
+    getTotal() {
+        return this.dataSources.map((ds) => ds.getTotal()).reduce((a, b) => a + b);
+    }
+
+    isFullyLoaded() {
+        return this.getTotal() <= this.getData()?.length;
+    }
+
+    getDatasource(position: number) {
+        return this.dataSources[position];
+    }
+}

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

@@ -0,0 +1,6 @@
+import { NodeDataSource } from './node-data-source';
+
+/**
+ * this is a special data source to provide custom card layouts into the node-entries components
+ */
+export class CustomTemplatesDataSource extends NodeDataSource<any> {}

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

@@ -0,0 +1,6 @@
+<div class="drag-preview" [matBadge]="selected.length > 1 ? selected.length : null">
+  <div class="drag-preview-icon">
+    <img *ngIf="node.iconURL" [src]="node | esNodeIcon" />
+  </div>
+  <es-list-text class="drag-preview-text" [node]="node" [item]="item"></es-list-text>
+</div>

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

@@ -0,0 +1,35 @@
+@use 'sass:color';
+@import '../../../../assets/scss/mixins';
+
+.drag-preview {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    height: 48px;
+    padding: 0 12px;
+    background-color: var(--palette-primary-50);
+}
+
+.drag-preview-icon {
+    width: 30px;
+    height: 30px;
+    padding: 3px;
+    margin: 1px 0;
+    background-color: #fff;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    @include materialShadowSmall();
+    > img {
+        width: 18px;
+        height: auto;
+    }
+}
+
+.drag-preview-text {
+    max-width: 300px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

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

@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+import { ListItem } from '../../types/list-item';
+import { Node } from 'ngx-edu-sharing-api';
+import { NodeEntriesDataType } from '../entries-model';
+
+@Component({
+    selector: 'es-drag-preview',
+    templateUrl: './drag-preview.component.html',
+    styleUrls: ['./drag-preview.component.scss'],
+})
+export class DragPreviewComponent<T extends NodeEntriesDataType> {
+    @Input() node: Node;
+    @Input() selected: T[];
+    @Input() item: ListItem;
+}

package/src/lib/node-entries/entries-model.ts

@@ -0,0 +1,120 @@
+import { Sort } from '@angular/material/sort';
+
+import { SelectionModel } from '@angular/cdk/collections';
+import { CustomOptions, OptionItem, Target } from '../types/option-item';
+import { ListItem, ListItemSort } from '../types/list-item';
+import { CanDrop, DragData, DropAction } from '../types/drag-drop';
+import { Node, GenericAuthority } from 'ngx-edu-sharing-api';
+import { ActionbarComponent } from '../actionbar/actionbar.component';
+
+export type NodeRoot =
+    | 'MY_FILES'
+    | 'SHARED_FILES'
+    | 'MY_SHARED_FILES'
+    | 'TO_ME_SHARED_FILES'
+    | 'WORKFLOW_RECEIVE'
+    | 'RECYCLE'
+    | 'ALL_FILES';
+
+export enum NodeEntriesDisplayType {
+    Table,
+    Grid,
+    SmallGrid,
+}
+
+export enum InteractionType {
+    // create router link
+    DefaultActionLink,
+    // emit an event
+    Emitter,
+    None,
+}
+
+export type ListOptions = { [key in Target]?: OptionItem[] };
+export type ListOptionsConfig = {
+    actionbar?: ActionbarComponent;
+    parent?: Node;
+    customOptions?: CustomOptions;
+};
+
+export interface ListSortConfig extends Sort {
+    columns: ListItemSort[];
+    allowed?: boolean;
+    customSortingInProgress?: boolean;
+}
+
+export type DropTarget = Node | NodeRoot;
+
+export interface DropSource<T extends NodeEntriesDataType> {
+    element: T[];
+    // sourceList: ListEventInterface<T>;
+    mode: DropAction;
+}
+
+export interface ListDragGropConfig<T extends NodeEntriesDataType> {
+    dragAllowed: boolean;
+    dropAllowed?: (dragData: DragData<T>) => CanDrop;
+    dropped?: (target: Node, source: DropSource<NodeEntriesDataType>) => void;
+}
+
+export enum ClickSource {
+    Preview,
+    Icon,
+    Metadata,
+    Comments,
+    Overlay,
+}
+
+export type NodeClickEvent<T extends NodeEntriesDataType> = {
+    element: T;
+    source: ClickSource;
+    attribute?: ListItem; // only when source === Metadata
+};
+export type FetchEvent = {
+    offset: number;
+    amount?: number;
+    /**
+     * is a reset of the current data required?
+     * this should be true if this was a pagination request
+     */
+    reset?: boolean;
+};
+export type NodeEntriesDataType = Node | GenericAuthority;
+export type GridLayout = 'grid' | 'scroll';
+export type GridConfig = {
+    /**
+     * max amount of rows that should be visible, unset for no limit
+     */
+    maxRows?: number;
+    /**
+     * layout, defaults to 'grid'
+     * 'scroll' may only be used when maxRows is not set
+     */
+    layout?: GridLayout;
+};
+
+export interface ListEventInterface<T extends NodeEntriesDataType> {
+    updateNodes(nodes: void | T[]): void;
+
+    getDisplayType(): NodeEntriesDisplayType;
+
+    setDisplayType(displayType: NodeEntriesDisplayType): void;
+
+    showReorderColumnsDialog(): void;
+
+    addVirtualNodes(virtual: T[]): void;
+
+    setOptions(options: ListOptions): void;
+
+    /**
+     * activate option (dropdown) generation
+     */
+    initOptionsGenerator(config: ListOptionsConfig): void | Promise<void>;
+
+    getSelection(): SelectionModel<T>;
+
+    /**
+     * triggered when nodes/objects are deleted and should not be shown in the list anymore
+     */
+    deleteNodes(objects: T[]): void;
+}

package/src/lib/node-entries/items-cap.ts

@@ -0,0 +1,54 @@
+import * as rxjs from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { distinctUntilChanged, map } from 'rxjs/operators';
+
+export class ItemsCap<T> {
+    /** The number of items to which the data should be capped. */
+    get cap(): number | null {
+        return this._cap.value;
+    }
+    set cap(value: number | null) {
+        this._cap.next(value ?? null);
+    }
+    private _cap = new BehaviorSubject<number | null>(null);
+
+    /** Whether to temporarily disable capping. */
+    get disabled(): boolean {
+        return this._disabled.value;
+    }
+    set disabled(value: boolean) {
+        this._disabled.next(value);
+    }
+    private _disabled = new BehaviorSubject(false);
+
+    /** Whether there is more data available that is currently being capped. */
+    get isActivelyCapping(): boolean {
+        return this._isActivelyCapping;
+    }
+    private _isActivelyCapping = false;
+
+    private _effectiveCap: Observable<number | null> = rxjs
+        .combineLatest([this._cap, this._disabled])
+        .pipe(
+            map(([cap, disabled]) => (disabled ? null : cap)),
+            distinctUntilChanged(),
+        );
+
+    connect(dataStream: Observable<T[]>): Observable<T[]> {
+        return rxjs.combineLatest([this._effectiveCap, dataStream]).pipe(
+            map(([effectiveCap, originalData]) => {
+                const needToCap = this._needToCap(effectiveCap, originalData);
+                this._isActivelyCapping = needToCap;
+                if (needToCap) {
+                    return originalData.slice(0, effectiveCap);
+                } else {
+                    return originalData;
+                }
+            }),
+        );
+    }
+
+    private _needToCap(effectiveCap: number | null, originalData: T[]): boolean {
+        return effectiveCap && originalData?.length > effectiveCap;
+    }
+}

package/src/lib/node-entries/list-item-label.pipe.ts

@@ -0,0 +1,28 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import * as rxjs from 'rxjs';
+import { Observable } from 'rxjs';
+import { ListItem } from '../types/list-item';
+
+@Pipe({ name: 'esListItemLabel' })
+export class ListItemLabelPipe implements PipeTransform {
+    constructor(private translate: TranslateService) {}
+
+    transform(item: ListItem, args = { fallback: item.name }): Observable<string> {
+        const mapping = {
+            NODE: 'NODE',
+            COLLECTION: 'NODE',
+            NODE_PROPOSAL: 'NODE_PROPOSAL',
+            ORG: 'ORG',
+            GROUP: 'GROUP',
+            USER: 'USER',
+        };
+        if (item.label) {
+            return rxjs.of(item.label);
+        } else {
+            return this.translate.get(mapping[item.type] + '.' + item.name, {
+                fallback: args.fallback,
+            });
+        }
+    }
+}

package/src/lib/node-entries/mixins.scss

@@ -0,0 +1,23 @@
+@import '../../../assets/scss/mixins';
+
+@mixin card-top-bar-badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    border-radius: 50%;
+    background-color: #fff;
+    padding: 5px;
+    position: relative;
+    z-index: 1;
+    @include materialShadow();
+    i {
+        // TODO: do we want to style based on collection type?
+        font-size: 18px;
+        color: #333;
+    }
+    img {
+        width: 18px;
+        height: 18px;
+    }
+}

package/src/lib/node-entries/node-cache.spec.ts

@@ -0,0 +1,199 @@
+import { NodeCache } from './node-cache';
+
+const ARRAY_0_5 = [0, 1, 2, 3, 4];
+const ARRAY_5_10 = [5, 6, 7, 8, 9];
+const ARRAY_0_10 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+
+describe('NodeCache', () => {
+    let nodeCache: NodeCache<number>;
+
+    beforeEach(() => {
+        nodeCache = new NodeCache();
+    });
+
+    it('should find an exact match from 0', () => {
+        nodeCache.add({
+            startIndex: 0,
+            endIndex: 10,
+            data: ARRAY_0_10,
+        });
+        expect(nodeCache.get({ startIndex: 0, endIndex: 10 })).toEqual(ARRAY_0_10);
+    });
+
+    it('should find an exact match from 10', () => {
+        nodeCache.add({
+            startIndex: 10,
+            endIndex: 20,
+            data: ARRAY_0_10,
+        });
+        expect(nodeCache.get({ startIndex: 10, endIndex: 20 })).toEqual(ARRAY_0_10);
+    });
+
+    it('should find an exact match among multiple slices', () => {
+        nodeCache.add({
+            startIndex: 0,
+            endIndex: 10,
+            data: ARRAY_0_10,
+        });
+        nodeCache.add({
+            startIndex: 20,
+            endIndex: 30,
+            data: ARRAY_0_10,
+        });
+        expect(nodeCache.get({ startIndex: 20, endIndex: 30 })).toEqual(ARRAY_0_10);
+    });
+
+    it('should find a partial match', () => {
+        nodeCache.add({
+            startIndex: 0,
+            endIndex: 10,
+            data: ARRAY_0_10,
+        });
+        expect(nodeCache.get({ startIndex: 3, endIndex: 7 })).toEqual([3, 4, 5, 6]);
+    });
+
+    it('should merge two connected slices', () => {
+        nodeCache.add({
+            startIndex: 0,
+            endIndex: 5,
+            data: ARRAY_0_5,
+        });
+        nodeCache.add({
+            startIndex: 5,
+            endIndex: 10,
+            data: ARRAY_5_10,
+        });
+        expect(nodeCache.get({ startIndex: 0, endIndex: 10 })).toEqual(ARRAY_0_10);
+    });
+
+    it('should remove residual slices', () => {
+        nodeCache.add({
+            startIndex: 0,
+            endIndex: 5,
+            data: ARRAY_0_5,
+        });
+        nodeCache.add({
+            startIndex: 5,
+            endIndex: 10,
+            data: ARRAY_5_10,
+        });
+        expect(nodeCache['_slices'].length).toEqual(1);
+    });
+
+    it('should merge two reverse-connected slices', () => {
+        nodeCache.add({
+            startIndex: 5,
+            endIndex: 10,
+            data: ARRAY_5_10,
+        });
+        nodeCache.add({
+            startIndex: 0,
+            endIndex: 5,
+            data: ARRAY_0_5,
+        });
+        expect(nodeCache.get({ startIndex: 0, endIndex: 10 })).toEqual(ARRAY_0_10);
+    });
+
+    it('should merge two overlapping slices', () => {
+        nodeCache.add({
+            startIndex: 0,
+            endIndex: 7,
+            data: [0, 1, 2, 3, 4, 5, 6],
+        });
+        nodeCache.add({
+            startIndex: 3,
+            endIndex: 8,
+            data: [3, 4, 5, 6, 7],
+        });
+        expect(nodeCache.get({ startIndex: 0, endIndex: 8 })).toEqual([0, 1, 2, 3, 4, 5, 6, 7]);
+    });
+
+    it('should fill a gap', () => {
+        nodeCache.add({
+            startIndex: 0,
+            endIndex: 3,
+            data: [0, 1, 2],
+        });
+        nodeCache.add({
+            startIndex: 6,
+            endIndex: 9,
+            data: [6, 7, 8],
+        });
+        nodeCache.add({
+            startIndex: 3,
+            endIndex: 6,
+            data: [3, 4, 5],
+        });
+        expect(nodeCache.get({ startIndex: 0, endIndex: 9 })).toEqual([0, 1, 2, 3, 4, 5, 6, 7, 8]);
+    });
+
+    it('should find an exact missing range at the beginning', () => {
+        nodeCache.add({
+            startIndex: 6,
+            endIndex: 9,
+            data: [6, 7, 8],
+        });
+        expect(nodeCache.getMissingRange({ startIndex: 0, endIndex: 9 })).toEqual({
+            startIndex: 0,
+            endIndex: 6,
+        });
+    });
+
+    it('should find an exact missing range at the end', () => {
+        nodeCache.add({
+            startIndex: 0,
+            endIndex: 3,
+            data: [0, 1, 2],
+        });
+        expect(nodeCache.getMissingRange({ startIndex: 0, endIndex: 9 })).toEqual({
+            startIndex: 3,
+            endIndex: 9,
+        });
+    });
+
+    it('should find an exact missing range in the middle', () => {
+        nodeCache.add({
+            startIndex: 0,
+            endIndex: 3,
+            data: [0, 1, 2],
+        });
+        nodeCache.add({
+            startIndex: 6,
+            endIndex: 9,
+            data: [6, 7, 8],
+        });
+        expect(nodeCache.getMissingRange({ startIndex: 0, endIndex: 9 })).toEqual({
+            startIndex: 3,
+            endIndex: 6,
+        });
+    });
+
+    it('should find an overlapped missing range at the beginning', () => {
+        nodeCache.add({
+            startIndex: 6,
+            endIndex: 9,
+            data: [6, 7, 8],
+        });
+        expect(nodeCache.getMissingRange({ startIndex: 0, endIndex: 7 })).toEqual({
+            startIndex: 0,
+            endIndex: 6,
+        });
+    });
+
+    it('should find an overlapped missing range in the middle', () => {
+        nodeCache.add({
+            startIndex: 0,
+            endIndex: 3,
+            data: [0, 1, 2],
+        });
+        nodeCache.add({
+            startIndex: 6,
+            endIndex: 9,
+            data: [6, 7, 8],
+        });
+        expect(nodeCache.getMissingRange({ startIndex: 2, endIndex: 7 })).toEqual({
+            startIndex: 3,
+            endIndex: 6,
+        });
+    });
+});

package/src/lib/node-entries/node-cache.ts

@@ -0,0 +1,81 @@
+import { notNull } from '../util/functions';
+
+export interface NodeCacheRange {
+    startIndex: number;
+    endIndex: number;
+}
+
+export interface NodeCacheSlice<T> extends NodeCacheRange {
+    data: readonly T[];
+}
+
+export class NodeCache<T> {
+    private _slices: readonly NodeCacheSlice<T>[] = [];
+
+    add(slice: NodeCacheSlice<T>): void {
+        if (slice.endIndex - slice.startIndex !== slice.data.length) {
+            throw new Error('Tried to add invalid slice to cache: ' + JSON.stringify(slice));
+        }
+        this._slices = this._normalizeSlices([...this._slices, slice]);
+    }
+
+    clear() {
+        this._slices = [];
+    }
+
+    get(range: NodeCacheRange): T[] | null {
+        for (const slice of this._slices) {
+            if (slice.startIndex <= range.startIndex && slice.endIndex >= range.endIndex) {
+                return slice.data.slice(
+                    range.startIndex - slice.startIndex,
+                    range.endIndex - slice.startIndex,
+                );
+            }
+        }
+        return null;
+    }
+
+    getMissingRange(requestedRange: NodeCacheRange): NodeCacheRange | null {
+        let fromIndex = requestedRange.startIndex;
+        let toIndex = requestedRange.endIndex;
+        for (const slice of this._slices) {
+            if (slice.startIndex <= fromIndex && slice.endIndex > fromIndex) {
+                fromIndex = slice.endIndex;
+            } else if (slice.startIndex < toIndex && slice.endIndex >= toIndex) {
+                toIndex = slice.startIndex;
+            }
+            if (fromIndex >= toIndex) {
+                return null;
+            }
+        }
+        return { startIndex: fromIndex, endIndex: toIndex };
+    }
+
+    private _normalizeSlices(slices: NodeCacheSlice<T>[]): NodeCacheSlice<T>[] {
+        slices.sort((lhs, rhs) => lhs.startIndex - rhs.startIndex);
+        for (let i = 0; i < slices.length - 1; i++) {
+            for (let j = i + 1; j < slices.length; j++) {
+                if (this._canMerge(slices[i], slices[j])) {
+                    slices[i] = this._merge(slices[i], slices[j]);
+                    slices[j] = null; // Mark for deletion
+                }
+            }
+        }
+        return slices.filter(notNull);
+    }
+
+    private _canMerge(lhs: NodeCacheSlice<T>, rhs: NodeCacheSlice<T>): boolean {
+        if (!lhs || !rhs) {
+            return false;
+        }
+        return lhs.endIndex >= rhs.startIndex;
+    }
+
+    private _merge(lhs: NodeCacheSlice<T>, rhs: NodeCacheSlice<T>): NodeCacheSlice<T> {
+        return {
+            startIndex: lhs.startIndex,
+            endIndex: rhs.endIndex,
+            data: [...lhs.data, ...rhs.data.slice(lhs.endIndex - rhs.startIndex)],
+        };
+    }
+}