@netgrif/components
Version:
Netgrif Application Engine frontend Angular components
28 lines • 12.5 kB
JavaScript
import { Component } from '@angular/core';
import { AbstractUserAssignListComponent } from '@netgrif/components-core';
import * as i0 from "@angular/core";
import * as i1 from "@netgrif/components-core";
import * as i2 from "@angular/common";
import * as i3 from "@ngbracket/ngx-layout";
import * as i4 from "@angular/material/icon";
import * as i5 from "@angular/material/progress-spinner";
import * as i6 from "@angular/cdk/scrolling";
import * as i7 from "./user-assign-item/user-assign-item.component";
import * as i8 from "@ngx-translate/core";
/**
* Is responsible for displaying, filtering, loading and selecting users.
*/
export class UserAssignListComponent extends AbstractUserAssignListComponent {
_userListService;
constructor(_userListService) {
super(_userListService);
this._userListService = _userListService;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserAssignListComponent, deps: [{ token: i1.UserListService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: UserAssignListComponent, selector: "nc-user-assign-list", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex>\n <ng-container *ngIf=\"users$ | async as users\">\n <div *ngIf=\"!loading && users.length === 0\" fxFlex=\"100\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n <mat-icon color=\"accent\" class=\"margin-bottom-default\">person_add_disabled</mat-icon>\n <span class=\"font-size-20\">{{ 'side-menu.user.noUser' | translate }}</span>\n </div>\n\n <div class=\"full-height full-width\" fxFlex=\"100\">\n <cdk-virtual-scroll-viewport itemSize=\"60\" (scrolledIndexChange)=\"loadNextPage()\"\n class=\"full-height full-width\">\n <nc-user-assign-item\n *cdkVirtualFor=\"let user of users;\n trackBy: trackBy;\n templateCacheSize: 0\"\n [user]=\"user\"\n [selectedId$]=\"selectedUser$\"\n (click)=\"select(user)\">\n </nc-user-assign-item>\n\n <div *ngIf=\"loading\" fxLayout=\"column\" fxLayoutAlign=\"center center\"\n class=\"margin-top-default\">\n <mat-spinner color=\"primary\" diameter=\"40\"></mat-spinner>\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n </ng-container>\n</div>\n", styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.font-size-20{font-size:20px}.margin-bottom-default{margin-bottom:8px}.margin-top-default{margin-top:8px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i7.UserAssignItemComponent, selector: "nc-user-assign-item" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserAssignListComponent, decorators: [{
type: Component,
args: [{ selector: 'nc-user-assign-list', template: "<div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex>\n <ng-container *ngIf=\"users$ | async as users\">\n <div *ngIf=\"!loading && users.length === 0\" fxFlex=\"100\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n <mat-icon color=\"accent\" class=\"margin-bottom-default\">person_add_disabled</mat-icon>\n <span class=\"font-size-20\">{{ 'side-menu.user.noUser' | translate }}</span>\n </div>\n\n <div class=\"full-height full-width\" fxFlex=\"100\">\n <cdk-virtual-scroll-viewport itemSize=\"60\" (scrolledIndexChange)=\"loadNextPage()\"\n class=\"full-height full-width\">\n <nc-user-assign-item\n *cdkVirtualFor=\"let user of users;\n trackBy: trackBy;\n templateCacheSize: 0\"\n [user]=\"user\"\n [selectedId$]=\"selectedUser$\"\n (click)=\"select(user)\">\n </nc-user-assign-item>\n\n <div *ngIf=\"loading\" fxLayout=\"column\" fxLayoutAlign=\"center center\"\n class=\"margin-top-default\">\n <mat-spinner color=\"primary\" diameter=\"40\"></mat-spinner>\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n </ng-container>\n</div>\n", styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.font-size-20{font-size:20px}.margin-bottom-default{margin-bottom:8px}.margin-top-default{margin-top:8px}\n"] }]
}], ctorParameters: () => [{ type: i1.UserListService }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlci1hc3NpZ24tbGlzdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZXRncmlmLWNvbXBvbmVudHMvc3JjL2xpYi9zaWRlLW1lbnUvY29udGVudC1jb21wb25lbnRzL3VzZXItYXNzaWduL3VzZXItYXNzaWduLWxpc3QvdXNlci1hc3NpZ24tbGlzdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZXRncmlmLWNvbXBvbmVudHMvc3JjL2xpYi9zaWRlLW1lbnUvY29udGVudC1jb21wb25lbnRzL3VzZXItYXNzaWduL3VzZXItYXNzaWduLWxpc3QvdXNlci1hc3NpZ24tbGlzdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3hDLE9BQU8sRUFBQywrQkFBK0IsRUFBa0IsTUFBTSwwQkFBMEIsQ0FBQzs7Ozs7Ozs7OztBQUUxRjs7R0FFRztBQU1ILE1BQU0sT0FBTyx1QkFBd0IsU0FBUSwrQkFBK0I7SUFFbEQ7SUFBdEIsWUFBc0IsZ0JBQWlDO1FBQ25ELEtBQUssQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1FBRE4scUJBQWdCLEdBQWhCLGdCQUFnQixDQUFpQjtJQUV2RCxDQUFDO3dHQUpRLHVCQUF1Qjs0RkFBdkIsdUJBQXVCLGtGQ1hwQywrNENBMkJBOzs0RkRoQmEsdUJBQXVCO2tCQUxuQyxTQUFTOytCQUNJLHFCQUFxQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7QWJzdHJhY3RVc2VyQXNzaWduTGlzdENvbXBvbmVudCwgVXNlckxpc3RTZXJ2aWNlfSBmcm9tICdAbmV0Z3JpZi9jb21wb25lbnRzLWNvcmUnO1xuXG4vKipcbiAqIElzIHJlc3BvbnNpYmxlIGZvciBkaXNwbGF5aW5nLCBmaWx0ZXJpbmcsIGxvYWRpbmcgYW5kIHNlbGVjdGluZyB1c2Vycy5cbiAqL1xuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICduYy11c2VyLWFzc2lnbi1saXN0JyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vdXNlci1hc3NpZ24tbGlzdC5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vdXNlci1hc3NpZ24tbGlzdC5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFVzZXJBc3NpZ25MaXN0Q29tcG9uZW50IGV4dGVuZHMgQWJzdHJhY3RVc2VyQXNzaWduTGlzdENvbXBvbmVudCB7XG5cbiAgICBjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgX3VzZXJMaXN0U2VydmljZTogVXNlckxpc3RTZXJ2aWNlKSB7XG4gICAgICAgIHN1cGVyKF91c2VyTGlzdFNlcnZpY2UpO1xuICAgIH1cbn1cbiIsIjxkaXYgZnhMYXlvdXQ9XCJjb2x1bW5cIiBmeExheW91dEFsaWduPVwic3RhcnQgY2VudGVyXCIgZnhGbGV4PlxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJ1c2VycyQgfCBhc3luYyBhcyB1c2Vyc1wiPlxuICAgICAgICA8ZGl2ICpuZ0lmPVwiIWxvYWRpbmcgJiYgdXNlcnMubGVuZ3RoID09PSAwXCIgZnhGbGV4PVwiMTAwXCIgZnhMYXlvdXQ9XCJjb2x1bW5cIiBmeExheW91dEFsaWduPVwiY2VudGVyIGNlbnRlclwiPlxuICAgICAgICAgICAgPG1hdC1pY29uIGNvbG9yPVwiYWNjZW50XCIgY2xhc3M9XCJtYXJnaW4tYm90dG9tLWRlZmF1bHRcIj5wZXJzb25fYWRkX2Rpc2FibGVkPC9tYXQtaWNvbj5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiZm9udC1zaXplLTIwXCI+e3sgJ3NpZGUtbWVudS51c2VyLm5vVXNlcicgfCB0cmFuc2xhdGUgfX08L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJmdWxsLWhlaWdodCBmdWxsLXdpZHRoXCIgZnhGbGV4PVwiMTAwXCI+XG4gICAgICAgICAgICA8Y2RrLXZpcnR1YWwtc2Nyb2xsLXZpZXdwb3J0IGl0ZW1TaXplPVwiNjBcIiAoc2Nyb2xsZWRJbmRleENoYW5nZSk9XCJsb2FkTmV4dFBhZ2UoKVwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzPVwiZnVsbC1oZWlnaHQgZnVsbC13aWR0aFwiPlxuICAgICAgICAgICAgICAgIDxuYy11c2VyLWFzc2lnbi1pdGVtXG4gICAgICAgICAgICAgICAgICAgICpjZGtWaXJ0dWFsRm9yPVwibGV0IHVzZXIgb2YgdXNlcnM7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0cmFja0J5OiB0cmFja0J5O1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgdGVtcGxhdGVDYWNoZVNpemU6IDBcIlxuICAgICAgICAgICAgICAgICAgICBbdXNlcl09XCJ1c2VyXCJcbiAgICAgICAgICAgICAgICAgICAgW3NlbGVjdGVkSWQkXT1cInNlbGVjdGVkVXNlciRcIlxuICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwic2VsZWN0KHVzZXIpXCI+XG4gICAgICAgICAgICAgICAgPC9uYy11c2VyLWFzc2lnbi1pdGVtPlxuXG4gICAgICAgICAgICAgICAgPGRpdiAqbmdJZj1cImxvYWRpbmdcIiBmeExheW91dD1cImNvbHVtblwiIGZ4TGF5b3V0QWxpZ249XCJjZW50ZXIgY2VudGVyXCJcbiAgICAgICAgICAgICAgICAgICAgIGNsYXNzPVwibWFyZ2luLXRvcC1kZWZhdWx0XCI+XG4gICAgICAgICAgICAgICAgICAgIDxtYXQtc3Bpbm5lciBjb2xvcj1cInByaW1hcnlcIiBkaWFtZXRlcj1cIjQwXCI+PC9tYXQtc3Bpbm5lcj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDwvY2RrLXZpcnR1YWwtc2Nyb2xsLXZpZXdwb3J0PlxuICAgICAgICA8L2Rpdj5cbiAgICA8L25nLWNvbnRhaW5lcj5cbjwvZGl2PlxuIl19