ngx-edu-sharing-ui 0.7.0 → 9.0.1

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

@@ -1,40 +0,0 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { Target } from '../../types/option-item';
-import { ClickSource, InteractionType } from '../entries-model';
-
-import { NodeEntriesTemplatesService } from '../node-entries-templates.service';
-import { NodeEntriesService } from '../../services/node-entries.service';
-import { NodeHelperService } from '../../services/node-helper.service';
-import { Node } from 'ngx-edu-sharing-api';
-
-@Component({
-    selector: 'es-node-entries-card-small',
-    templateUrl: 'node-entries-card-small.component.html',
-    styleUrls: ['node-entries-card-small.component.scss'],
-})
-export class NodeEntriesCardSmallComponent<T extends Node> implements OnChanges {
-    readonly ClickSource = ClickSource;
-    readonly InteractionType = InteractionType;
-    readonly Target = Target;
-    @Input() node: T;
-    constructor(
-        public entriesService: NodeEntriesService<T>,
-        public nodeHelper: NodeHelperService,
-        public templatesService: NodeEntriesTemplatesService,
-    ) {}
-
-    ngOnChanges(changes: SimpleChanges): void {}
-    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;
-        }
-        return options.filter((o) => o.showAsAction && o.showCallback(this.node)).slice(0, 3);
-    }
-
-    openContextmenu(event: MouseEvent | Event) {
-        event.preventDefault();
-        event.stopPropagation();
-    }
-}

package/src/lib/node-entries/node-entries-global-options/node-entries-global-options.component.html

@@ -1,23 +0,0 @@
-<div
-  *ngIf="entriesService.globalOptions?.length"
-  role="listitem"
-  class="global-options"
-  [class.global-options-small]="displayType === NodeEntriesDisplayType.SmallGrid"
-  [class.global-options-table]="displayType === NodeEntriesDisplayType.Table"
->
-  <button
-    mat-button
-    *ngFor="let option of entriesService.globalOptions"
-    (click)="option.callback()"
-    class="global-option-btn"
-    attr.data-test="card-button-{{ option.name }}"
-  >
-    <ng-container *ngTemplateOutlet="globalOption; context: { option: this.option }"></ng-container>
-  </button>
-</div>
-<ng-template #globalOption let-option="option">
-  <span class="global-option">
-    <i [esIcon]="option.icon"></i>
-    <span class="label">{{ option.name | translate }}</span>
-  </span>
-</ng-template>

package/src/lib/node-entries/node-entries-global-options/node-entries-global-options.component.scss

@@ -1,58 +0,0 @@
-@import '../../../../assets/scss/variables';
-@import '../../../../assets/scss/mixins';
-
-.global-options {
-    display: grid;
-    grid-template-columns: auto;
-    grid-template-rows: repeat(auto-fit, minmax(70px, 1fr));
-    grid-row-gap: 20px;
-    height: 100%;
-    min-height: 250px;
-    &.global-options-small {
-        min-height: 130px;
-    }
-    &.global-options-table {
-        min-height: 100px;
-        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-        grid-column-gap: 20px;
-    }
-    .global-option-btn {
-        display: flex;
-        height: 100%;
-        padding: 0;
-    }
-    .global-option {
-        cursor: pointer;
-        display: flex;
-        @include materialShadow();
-        width: 100%;
-        height: 100%;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        border: 3px dashed var(--primary);
-        color: var(--primary);
-        > i {
-            font-size: 32px;
-            margin-bottom: 5px;
-        }
-        > .label {
-            cursor: pointer;
-            font-weight: bold;
-        }
-        &:hover,
-        &:focus {
-            background-color: rgb(var(--palette-primary-50));
-        }
-    }
-}
-:host ::ng-deep {
-    .global-options {
-        .global-option-btn {
-            .mdc-button__label {
-                width: 100%;
-                height: 100%;
-            }
-        }
-    }
-}

package/src/lib/node-entries/node-entries-global-options/node-entries-global-options.component.ts

@@ -1,16 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { Node } from 'ngx-edu-sharing-api';
-import { NodeEntriesDisplayType } from '../entries-model';
-import { NodeEntriesService } from '../../services/node-entries.service';
-
-@Component({
-    selector: 'es-node-entries-global-options',
-    templateUrl: './node-entries-global-options.component.html',
-    styleUrls: ['./node-entries-global-options.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class NodeEntriesGlobalOptionsComponent<T extends Node> {
-    readonly NodeEntriesDisplayType = NodeEntriesDisplayType;
-    @Input() displayType: NodeEntriesDisplayType;
-    constructor(public entriesService: NodeEntriesService<T>) {}
-}

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

@@ -1,79 +0,0 @@
-import { Injectable, TemplateRef } from '@angular/core';
-import { Node } from 'ngx-edu-sharing-api';
-import { ListItemType } from '../types/list-item';
-import { Scope } from '../types/option-item';
-
-export type CustomField = {
-    type: ListItemType;
-    name: string | CustomFieldSpecialType;
-};
-export enum CustomFieldSpecialType {
-    preview,
-    type,
-}
-export type CustomFieldInfo = {
-    type: ListItemType;
-    /**
-     * Either the property name (i.e. "cm:name") or a special value.
-     */
-    name: string | CustomFieldSpecialType;
-
-    /**
-     * Custom callback which should return true if the template should be used for the given item.
-     */
-    useCallback?: (node: Node) => boolean;
-    templateRef: TemplateRef<unknown>;
-};
-
-export type PaginationStrategy = 'infinite-scroll' | 'paginator';
-
-type PaginationScope = Scope | 'DEFAULT';
-/**
- * this service is intended to add custom behaviour to the global tables & grid views
- */
-@Injectable({
-    providedIn: 'root',
-})
-export class NodeEntriesGlobalService {
-    private customFields: CustomFieldInfo[] = [];
-    private paginationStrategy: { [key in PaginationScope]?: PaginationStrategy } = {
-        [Scope.WorkspaceList]: 'infinite-scroll',
-        [Scope.Search]: 'infinite-scroll',
-        DEFAULT: 'infinite-scroll',
-    };
-    private paginatorSizeOptions: { [key in PaginationScope]?: number[] } = {
-        DEFAULT: [25, 50, 75, 100],
-    };
-
-    constructor() {}
-
-    public setPaginationStrategy(scope: PaginationScope, strategy: PaginationStrategy) {
-        this.paginationStrategy[scope] = strategy;
-    }
-    public getPaginationStrategy(scope: Scope) {
-        return this.paginationStrategy[scope] ?? this.paginationStrategy['DEFAULT'];
-    }
-    public setPaginatorSizeOptions(scope: PaginationScope, size: number[]) {
-        this.paginatorSizeOptions[scope] = size;
-    }
-    public getPaginatorSizeOptions(scope: Scope) {
-        return this.paginatorSizeOptions[scope] ?? this.paginatorSizeOptions['DEFAULT'];
-    }
-    public getCustomFieldTemplate(item: CustomField, node: Node) {
-        return this.customFields.filter(
-            (c) =>
-                c.type === item.type &&
-                c.name === item.name &&
-                (!c.useCallback || c.useCallback(node)),
-        )?.[0]?.templateRef;
-    }
-
-    /**
-     * Registers a custom (node) attribute you want to render via the given template.
-     *
-     * You may also override existing attributes if you want to provide a custom view.
-     */
-    registerCustomFieldRendering(customFieldInfo: CustomFieldInfo) {
-        this.customFields.push(customFieldInfo);
-    }
-}

package/src/lib/node-entries/node-entries-table/column-chooser/column-chooser.component.html

@@ -1,25 +0,0 @@
-<ng-template
-  cdkConnectedOverlay
-  [cdkConnectedOverlayOrigin]="origin"
-  [cdkConnectedOverlayOpen]="columnChooserVisible"
-  [cdkConnectedOverlayHasBackdrop]="true"
-  [cdkConnectedOverlayFlexibleDimensions]="true"
-  [cdkConnectedOverlayViewportMargin]="5"
-  (backdropClick)="columnChooserVisibleChange.emit(false)"
-  cdkConnectedOverlayBackdropClass="column-chooser-backdrop"
->
-  <div
-    cdkDropList
-    class="column-chooser mat-elevation-z2"
-    (cdkDropListDropped)="columnChooserDrop($event)"
-  >
-    <div class="column-chooser-item" *ngFor="let column of columns; index as index" cdkDrag>
-      <mat-checkbox [checked]="column.visible" (change)="columnChooserToggle(index)">
-        {{ column | esListItemLabel | async }}
-      </mat-checkbox>
-      <div class="drag-handle" cdkDragHandle>
-        <i esIcon="drag_handle"></i>
-      </div>
-    </div>
-  </div>
-</ng-template>

package/src/lib/node-entries/node-entries-table/column-chooser/column-chooser.component.scss

@@ -1,32 +0,0 @@
-.column-chooser {
-    max-width: 100%;
-    border: solid 1px #ccc;
-    min-height: 60px;
-    display: block;
-    background: white;
-    border-radius: 4px;
-    overflow: auto;
-}
-
-.column-chooser-item {
-    border-bottom: solid 1px #ccc;
-    color: rgba(0, 0, 0, 0.87);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    background: white;
-    font-size: 14px;
-    justify-content: space-between;
-    mat-checkbox {
-        margin: 0 12px;
-    }
-    .drag-handle {
-        color: rgba(0, 0, 0, 0.5);
-        cursor: move;
-        padding: 20px;
-    }
-}
-
-.column-chooser-backdrop {
-    background: none;
-}

package/src/lib/node-entries/node-entries-table/column-chooser/column-chooser.component.ts

@@ -1,31 +0,0 @@
-import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { CdkOverlayOrigin } from '@angular/cdk/overlay';
-import { ListItem } from '../../../types/list-item';
-
-@Component({
-    selector: 'es-column-chooser',
-    templateUrl: './column-chooser.component.html',
-    styleUrls: ['./column-chooser.component.scss'],
-})
-export class ColumnChooserComponent {
-    @Input() origin: CdkOverlayOrigin;
-    @Input() columnChooserVisible = false;
-    @Output() columnChooserVisibleChange = new EventEmitter<boolean>();
-
-    @Input() columns: ListItem[];
-    @Output() columnsChange = new EventEmitter<ListItem[]>();
-
-    constructor() {}
-
-    columnChooserDrop(event: CdkDragDrop<string[]>) {
-        moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
-        this.columnsChange.emit(this.columns);
-    }
-
-    columnChooserToggle(columnIndex: number): void {
-        const column = this.columns[columnIndex];
-        column.visible = !column.visible;
-        this.columnsChange.emit(this.columns);
-    }
-}

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

@@ -1,270 +0,0 @@
-<es-dropdown #dropdown [options]="entriesService.options?.[Target.ListDropdown]"></es-dropdown>
-<button
-  #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>
-<es-node-entries-global-options
-  *ngIf="entriesService.globalOptions?.length"
-  [displayType]="NodeEntriesDisplayType.Table"
->
-</es-node-entries-global-options>
-<mat-table
-  [dataSource]="entriesService.dataSource"
-  matSort
-  [matSortDisableClear]="true"
-  [matSortActive]="entriesService.sort?.active"
-  [matSortDirection]="entriesService.sort?.direction"
-  esInfiniteScroll
-  (scrolled)="loadData('scroll')"
->
-  <!-- Checkbox Column -->
-  <ng-container matColumnDef="select">
-    <mat-header-cell *matHeaderCellDef>
-      <mat-checkbox
-        [ngModel]="entriesService.selection.selected.length > 0"
-        [indeterminate]="
-          entriesService.selection.selected.length > 0 &&
-          entriesService.selection.selected.length !== entriesService.dataSource.getData().length
-        "
-        (ngModelChange)="toggleAll($event)"
-        aria-label="{{ 'LIST_TABLE.TOGGLE_ALL' | translate }}"
-      ></mat-checkbox>
-    </mat-header-cell>
-    <mat-cell *matCellDef="let node">
-      <mat-checkbox
-        [checked]="entriesService.selection.isSelected(node)"
-        (change)="entriesService.onCheckboxChanged(node, $event.checked)"
-        aria-label="{{ 'SELECT' | translate : { element: (node | nodeTitle) } }}"
-      ></mat-checkbox>
-    </mat-cell>
-  </ng-container>
-  <div matColumnDef="icon">
-    <mat-header-cell *matHeaderCellDef class="cell-icon cell-count">
-      ({{ entriesService.selection.selected.length
-      }}<ng-container *ngIf="entriesService.dataSource?.getTotal() !== undefined">
-        / {{ entriesService.dataSource?.getTotal() }}</ng-container
-      >)
-    </mat-header-cell>
-    <mat-cell *matCellDef="let node" class="cell-icon">
-      <ng-container
-        *ngIf="entriesService.elementInteractionType === InteractionType.DefaultActionLink"
-      >
-        <ng-container *ngTemplateOutlet="icon; context: { node: this.node }"></ng-container>
-      </ng-container>
-      <div
-        *ngIf="entriesService.elementInteractionType !== InteractionType.DefaultActionLink"
-        (click)="
-          entriesService.onClicked({ event: $event, element: node, source: ClickSource.Icon })
-        "
-        (dblclick)="entriesService.dblClickItem.emit({ element: node, source: ClickSource.Icon })"
-      >
-        <ng-container
-          *ngTemplateOutlet="icon; context: { node: this.node }"
-          (click)="
-            entriesService.onClicked({ event: $event, element: node, source: ClickSource.Icon })
-          "
-          (dblclick)="entriesService.dblClickItem.emit({ element: node, source: ClickSource.Icon })"
-        ></ng-container>
-      </div>
-    </mat-cell>
-  </div>
-  <ng-container matColumnDef="actions">
-    <mat-header-cell *matHeaderCellDef>
-      <button
-        *ngIf="entriesService.configureColumns"
-        mat-icon-button
-        (click)="columnChooserVisible = !columnChooserVisible"
-        cdkOverlayOrigin
-        #columnChooserTrigger="cdkOverlayOrigin"
-        [matTooltip]="'LIST_TABLE.CONFIGURE_COLUMNS' | translate"
-        [attr.aria-label]="'LIST_TABLE.CONFIGURE_COLUMNS' | translate"
-      >
-        <i esIcon="settings"></i>
-      </button>
-    </mat-header-cell>
-    <mat-cell *matCellDef="let node">
-      <button
-        mat-icon-button
-        *ngIf="entriesService.options?.[Target.List]?.length"
-        color="primary"
-        (click)="openMenu(node)"
-        [matMenuTriggerFor]="dropdown.menu"
-      >
-        <i esIcon="more_vert" [aria]="true"></i>
-      </button>
-    </mat-cell>
-  </ng-container>
-  <!-- Data Columns -->
-  <ng-container
-    *ngFor="let column of visibleDataColumns$ | async; let first = first"
-    [matColumnDef]="column.name"
-  >
-    <ng-container>
-      <mat-header-cell
-        *matHeaderCellDef
-        mat-sort-header
-        [disabled]="!(entriesService.sort?.allowed && isSortable(column))"
-        [class.mat-column-primary]="first"
-        >{{ column | esListItemLabel | async }}</mat-header-cell
-      >
-    </ng-container>
-    <mat-cell
-      *matCellDef="let node"
-      #cell
-      [class.mat-column-primary]="first"
-      attr.data-test="table-cell-{{ column.name }}"
-    >
-      <ng-container
-        *ngIf="entriesService.elementInteractionType === InteractionType.DefaultActionLink"
-      >
-        <es-node-url cdkMonitorSubtreeFocus [node]="node" [mode]="first ? 'link' : 'wrapper'">
-          <es-list-base
-            [forceText]="true"
-            [node]="node"
-            [item]="column"
-            esCheckTextOverflow
-            #text="esCheckTextOverflow"
-            [matTooltip]="text.hasTextOverflow() ? cell.innerText : null"
-            matTooltipTouchGestures="off"
-          ></es-list-base>
-        </es-node-url>
-      </ng-container>
-      <es-list-base
-        *ngIf="entriesService.elementInteractionType !== InteractionType.DefaultActionLink"
-        [forceText]="true"
-        [node]="node"
-        [item]="column"
-        (click)="
-          entriesService.onClicked({
-            event: $event,
-            element: node,
-            source: ClickSource.Metadata,
-            attribute: column
-          })
-        "
-        (dblclick)="
-          entriesService.dblClickItem.emit({
-            element: node,
-            source: ClickSource.Metadata,
-            attribute: column
-          })
-        "
-        esCheckTextOverflow
-        #text="esCheckTextOverflow"
-        [matTooltip]="text.hasTextOverflow() ? cell.innerText : null"
-        matTooltipTouchGestures="off"
-      ></es-list-base>
-      <ng-container *ngIf="first">
-        <div class="childobjects" *ngIf="node.properties?.['virtual:childobjectcount'] > 0">
-          <div
-            class="childobject-count"
-            matTooltip="{{
-              'CHILDOBJECT_COUNT'
-                | translate : { count: node.properties['virtual:childobjectcount'] * 1 + 1 }
-            }}"
-          >
-            <span>{{ node.properties['virtual:childobjectcount'] * 1 + 1 }}</span
-            ><i esIcon="filter_none"></i>
-          </div>
-        </div>
-      </ng-container>
-    </mat-cell>
-  </ng-container>
-  <mat-header-row mat-header-row *matHeaderRowDef="visibleColumnNames$ | async"></mat-header-row>
-  <mat-row
-    mat-row
-    matRipple
-    cdkDrag
-    esNodesDrag
-    [cdkDragDisabled]="!entriesService.dragDrop?.dragAllowed || ui.isMobile()"
-    [cdkDragData]="getDragData(node)"
-    (cdkDragStarted)="onDragStarted(node)"
-    (cdkDragEnded)="onDragEnded()"
-    [esNodesDropTarget]="node"
-    [canDropNodes]="canDrop"
-    (nodeDropped)="drop($event)"
-    class="mat-row"
-    [class.mat-row-selected]="entriesService.selection.isSelected(node)"
-    [class.selected-when-dragging]="isDragging && entriesService.selection.isSelected(node)"
-    [class.mat-row-virtual]="node.virtual"
-    [class.mat-row-virtual-first]="
-      node.virtual && !$any(entriesService.dataSource.getData()[i - 1])?.virtual
-    "
-    [class.mat-row-virtual-last]="
-      node.virtual && !$any(entriesService.dataSource.getData()[i + 1])?.virtual
-    "
-    [class.dynamic-single-click]="entriesService.singleClickHint === 'dynamic'"
-    *matRowDef="let node; let i = index; let last = last; columns: visibleColumnNames$ | async"
-    (contextmenu)="onRowContextMenu({ event: $event, node: node })"
-    (keydown.ContextMenu)="onRowContextMenu({ event: $event, node: node })"
-  >
-    <es-drag-preview
-      *cdkDragPreview
-      [node]="node"
-      [selected]="entriesService.selection.selected"
-      [item]="(visibleDataColumns$ | async)[0]"
-    ></es-drag-preview>
-  </mat-row>
-</mat-table>
-<ng-container
-  *ngIf="
-    (entriesService.dataSource.isLoadingSubject | async) === false &&
-    entriesService.dataSource.hasMore() &&
-    entriesService.paginationStrategy === 'infinite-scroll'
-  "
->
-  <div class="load-more">
-    <button mat-button color="primary" (click)="loadData('button')">
-      <i esIcon="refresh"></i>
-      <span>{{ 'LOAD_MORE' | translate }}</span>
-    </button>
-  </div>
-</ng-container>
-<ng-container *ngIf="entriesService.dataSource.isLoadingSubject | async">
-  <ng-container *ngTemplateOutlet="loading"> </ng-container>
-</ng-container>
-<!--
-<mat-paginator #paginator [pageSizeOptions]="pageSizeOptions"></mat-paginator>
--->
-
-<!-- Wait for ready state to avoid changed-after-checked error when `columnChooserTrigger` becomes
-available. -->
-<es-column-chooser
-  *ngIf="columnChooserTriggerReady"
-  [(columns)]="entriesService.columns"
-  [(columnChooserVisible)]="columnChooserVisible"
-  [origin]="columnChooserTrigger"
-  (columnsChange)="entriesService.columnsChange.emit($event)"
-></es-column-chooser>
-<ng-template #loading>
-  <es-spinner></es-spinner>
-</ng-template>
-<ng-template #icon let-node="node">
-  <div class="icon-bg">
-    <img
-      *ngIf="node.iconURL"
-      [src]="node | esNodeIcon | async"
-      [alt]="
-        node.mediatype
-          ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)
-          : ''
-      "
-      [matTooltip]="
-        node.mediatype
-          ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)
-          : ''
-      "
-      matTooltipTouchGestures="off"
-    />
-    <i
-      *ngIf="!node.iconURL"
-      [esIcon]="node.authorityType ? (node.authorityType === 'GROUP' ? 'group' : 'person') : null"
-    ></i>
-  </div>
-</ng-template>