@rolatech/angular-authorization 20.0.6 → 20.0.8

package/fesm2022/rolatech-angular-authorization-users.routes-DGeI-_y0.mjs

@@ -0,0 +1,361 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, viewChild, Component, model, output } from '@angular/core';
+import * as i7 from '@angular/material/paginator';
+import { MatPaginator } from '@angular/material/paginator';
+import * as i8 from '@angular/material/table';
+import { MatTableDataSource } from '@angular/material/table';
+import { AuthUserService } from '@rolatech/angular-auth';
+import { APP_CONFIG, AngularCommonModule } from '@rolatech/angular-common';
+import { BaseComponent, AngularComponentsModule, SpinnerComponent, ToolbarComponent, IconButtonComponent } from '@rolatech/angular-components';
+import { BaseService, SnackBarService, NavigationService } from '@rolatech/angular-services';
+import * as i1 from '@angular/router';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/material/icon';
+import { MatIcon } from '@angular/material/icon';
+import * as i3$1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i5 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i6 from '@angular/material/menu';
+import { R as RoleService } from './rolatech-angular-authorization-role.service-C-U-KnqY.mjs';
+import * as i1$1 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i4 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i7$1 from '@angular/cdk/clipboard';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import * as i2$1 from '@angular/material/autocomplete';
+import { Location } from '@angular/common';
+
+class UserService extends BaseService {
+    init() {
+        this.endpoint = 'auth/users';
+        super.init();
+    }
+    updateRoles(id, data) {
+        return this.http.put(`${this.actionUrl}/${id}/roles`, data, {
+            withCredentials: true,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: UserService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: UserService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: UserService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class UserIndex extends BaseComponent {
+    environment = inject(APP_CONFIG);
+    pageEvent;
+    isLoading = false;
+    isSearch = false;
+    length = 100;
+    pageSize = 15;
+    pageSizeOptions = [5, 10, 25, 100];
+    users = [];
+    displayedColumns = ['name', 'email', 'createdAt', 'actions'];
+    paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "paginator" }] : []));
+    orderOptions = [
+        {
+            key: 'createdAt',
+            value: 'Created At',
+            icon: 'arrow_upward',
+            sort: 'asc',
+        },
+        {
+            key: 'createdAt',
+            value: 'Created At',
+            icon: 'arrow_downward',
+            sort: 'desc',
+        },
+        {
+            key: 'status',
+            value: 'Status',
+            icon: 'arrow_upward',
+            sort: 'asc',
+        },
+        {
+            key: 'status',
+            value: 'Status',
+            icon: 'arrow_downward',
+            sort: 'desc',
+        },
+    ];
+    orderString = 'createdAt desc';
+    dataSource = new MatTableDataSource();
+    searchWord;
+    userService = inject(UserService);
+    authUserService = inject(AuthUserService);
+    ngOnInit() {
+        this.findAll(null);
+    }
+    onClick(item) {
+        this.orderString = item.key + ' ' + item.sort;
+        this.paginator()?.firstPage();
+        this.findAll(null);
+    }
+    findAll(event) {
+        this.isLoading = true;
+        this.isSearch = false;
+        const page = event ? event.pageIndex + 1 : 1;
+        const limit = event ? event.pageSize : 15;
+        const sort = this.orderString;
+        const options = {
+            page,
+            limit,
+            sort,
+        };
+        this.userService.find(options).subscribe({
+            next: (res) => {
+                this.users = res.data;
+                this.dataSource.data = this.users;
+                this.length = res.meta.pagination.count;
+                this.isLoading = false;
+            },
+            error: (error) => {
+                this.isLoading = false;
+                this.snackBarService.open(error.message);
+            },
+        });
+    }
+    search(e) {
+        this.isLoading = true;
+        const options = {
+            filter: `phone:${e.target.value}`,
+        };
+        this.authUserService.findAll(options).subscribe({
+            next: (res) => {
+                this.users = res.data;
+                this.dataSource.data = this.users;
+                this.length = res.meta.pagination.count;
+                this.isLoading = false;
+            },
+            error: (error) => {
+                this.isLoading = false;
+                this.snackBarService.open(error.message);
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: UserIndex, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0", type: UserIndex, isStandalone: true, selector: "rolatech-user-index", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Users\">\n  <rolatech-icon-button routerLink=\"./create\">add</rolatech-icon-button>\n  <rolatech-icon-button (click)=\"isSearch = !isSearch\">search</rolatech-icon-button>\n  <rolatech-icon-button [matMenuTriggerFor]=\"beforeMenu\">reorder</rolatech-icon-button>\n  <!-- <button mat-icon-button [matMenuTriggerFor]=\"beforeMenu\">\n    <mat-icon>reorder</mat-icon>\n  </button> -->\n  <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n    @for (item of orderOptions; track item) {\n    <button mat-menu-item (click)=\"onClick(item)\">\n      <span>{{ item.value }}</span>\n      <mat-icon>{{ item.icon }}</mat-icon>\n    </button>\n    }\n  </mat-menu>\n</rolatech-toolbar>\n@if (isSearch) {\n<mat-form-field floatLabel=\"auto\">\n  <input type=\"text\" matInput placeholder=\"Phone\" (keyup.enter)=\"search($event)\" />\n  <button matSuffix mat-icon-button (click)=\"findAll(null); isSearch = false\">\n    <mat-icon>close</mat-icon>\n  </button>\n</mat-form-field>\n}\n<div class=\"py-3\">\n  <rolatech-spinner></rolatech-spinner>\n  <table mat-table [dataSource]=\"dataSource\">\n    <!-- name Column -->\n    <ng-container matColumnDef=\"name\">\n      <th mat-header-cell *matHeaderCellDef>Name</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item.name ? item.name : item.firstName + ',' + item.lastName }}</td>\n    </ng-container>\n\n    <!-- email Column -->\n    <ng-container matColumnDef=\"email\">\n      <th mat-header-cell *matHeaderCellDef>Email</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item.email }}</td>\n    </ng-container>\n\n    <!-- createdAt Column -->\n    <ng-container matColumnDef=\"createdAt\">\n      <th mat-header-cell *matHeaderCellDef>Created At</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item.createdAt }}</td>\n    </ng-container>\n\n    <!-- actions Column -->\n    <ng-container matColumnDef=\"actions\" stickyEnd>\n      <th mat-header-cell *matHeaderCellDef class=\"actions\"></th>\n      <td mat-cell *matCellDef=\"let item\" class=\"actions\">\n        <mat-icon>navigate_next</mat-icon>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr\n      class=\"cursor-pointer hover:bg-[--rt-raised-background]\"\n      mat-row\n      *matRowDef=\"let row; columns: displayedColumns\"\n      [routerLink]=\"['./', '@' + row.username]\"\n    ></tr>\n  </table>\n</div>\n<mat-paginator\n  #paginator\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"pageEvent = findAll($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;min-width:80px;font-size:.8rem;padding:0 28px}.mat-mdc-header-cell.actions{text-align:right;max-width:120px;width:120px;padding:0 28px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}.withdraw-button{background:var(--rt-brand-color);color:#fff!important;width:100px}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: IconButtonComponent, selector: "rolatech-icon-button" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: UserIndex, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-user-index', imports: [AngularCommonModule, AngularComponentsModule, SpinnerComponent, ToolbarComponent, IconButtonComponent], template: "<rolatech-toolbar title=\"Users\">\n  <rolatech-icon-button routerLink=\"./create\">add</rolatech-icon-button>\n  <rolatech-icon-button (click)=\"isSearch = !isSearch\">search</rolatech-icon-button>\n  <rolatech-icon-button [matMenuTriggerFor]=\"beforeMenu\">reorder</rolatech-icon-button>\n  <!-- <button mat-icon-button [matMenuTriggerFor]=\"beforeMenu\">\n    <mat-icon>reorder</mat-icon>\n  </button> -->\n  <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n    @for (item of orderOptions; track item) {\n    <button mat-menu-item (click)=\"onClick(item)\">\n      <span>{{ item.value }}</span>\n      <mat-icon>{{ item.icon }}</mat-icon>\n    </button>\n    }\n  </mat-menu>\n</rolatech-toolbar>\n@if (isSearch) {\n<mat-form-field floatLabel=\"auto\">\n  <input type=\"text\" matInput placeholder=\"Phone\" (keyup.enter)=\"search($event)\" />\n  <button matSuffix mat-icon-button (click)=\"findAll(null); isSearch = false\">\n    <mat-icon>close</mat-icon>\n  </button>\n</mat-form-field>\n}\n<div class=\"py-3\">\n  <rolatech-spinner></rolatech-spinner>\n  <table mat-table [dataSource]=\"dataSource\">\n    <!-- name Column -->\n    <ng-container matColumnDef=\"name\">\n      <th mat-header-cell *matHeaderCellDef>Name</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item.name ? item.name : item.firstName + ',' + item.lastName }}</td>\n    </ng-container>\n\n    <!-- email Column -->\n    <ng-container matColumnDef=\"email\">\n      <th mat-header-cell *matHeaderCellDef>Email</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item.email }}</td>\n    </ng-container>\n\n    <!-- createdAt Column -->\n    <ng-container matColumnDef=\"createdAt\">\n      <th mat-header-cell *matHeaderCellDef>Created At</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item.createdAt }}</td>\n    </ng-container>\n\n    <!-- actions Column -->\n    <ng-container matColumnDef=\"actions\" stickyEnd>\n      <th mat-header-cell *matHeaderCellDef class=\"actions\"></th>\n      <td mat-cell *matCellDef=\"let item\" class=\"actions\">\n        <mat-icon>navigate_next</mat-icon>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr\n      class=\"cursor-pointer hover:bg-[--rt-raised-background]\"\n      mat-row\n      *matRowDef=\"let row; columns: displayedColumns\"\n      [routerLink]=\"['./', '@' + row.username]\"\n    ></tr>\n  </table>\n</div>\n<mat-paginator\n  #paginator\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"pageEvent = findAll($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;min-width:80px;font-size:.8rem;padding:0 28px}.mat-mdc-header-cell.actions{text-align:right;max-width:120px;width:120px;padding:0 28px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}.withdraw-button{background:var(--rt-brand-color);color:#fff!important;width:100px}\n"] }]
+        }] });
+
+class UserCreate {
+    roleService = inject(RoleService);
+    authUserService = inject(AuthUserService);
+    snackBarService = inject(SnackBarService);
+    roles = [];
+    selectedRoles = [];
+    isLoading = false;
+    user = {
+        name: '',
+        email: '',
+        phone: ''
+    };
+    newUser = false;
+    password = '222';
+    ngOnInit() {
+        this.findRoles();
+    }
+    findRoles() {
+        this.isLoading = true;
+        this.roleService.find({ limit: 600 }).subscribe({
+            next: (res) => {
+                this.roles = res.data;
+                this.isLoading = false;
+            },
+            complete: () => { },
+            error: (error) => {
+                this.isLoading = false;
+                this.snackBarService.open(error.message);
+            },
+        });
+    }
+    onSelectionChange(event) {
+        this.selectedRoles = event.value;
+    }
+    save() {
+        const roles = [];
+        this.selectedRoles.forEach((item) => {
+            roles.push({ id: item.id, name: item.name });
+        });
+        const data = {
+            name: this.user.name,
+            email: this.user.email,
+            phone: this.user.phone,
+            roles
+        };
+        this.authUserService.createUserByAdmin(data).subscribe({
+            next: res => {
+                this.newUser = true;
+                this.password = res.data.password;
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: UserCreate, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0", type: UserCreate, isStandalone: true, selector: "rolatech-user-create", ngImport: i0, template: "<rolatech-toolbar title=\"Create User\" link=\"../\"></rolatech-toolbar>\n<div class=\"p-4\">\n  <div class=\"flex flex-col lg:w-1/2\">\n    <mat-form-field appearance=\"fill\">\n      <mat-label> Name </mat-label>\n      <input matInput [(ngModel)]=\"user.name\" required />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label> Email </mat-label>\n      <input matInput [(ngModel)]=\"user.email\" required />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label> Phone </mat-label>\n      <input matInput [(ngModel)]=\"user.phone\" required />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label>Role</mat-label>\n      <mat-select (selectionChange)=\"onSelectionChange($event)\" [(ngModel)]=\"selectedRoles\" multiple>\n        @for (item of roles; track item) {\n        <mat-option [value]=\"item\"> {{ item.name }} </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n    @if (newUser) {\n    <div class=\"mb-3\">\n      <div class=\"font-bold mb-2\">Copy password</div>\n      <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n        <input matInput type=\"password\" [value]=\"password\" readonly />\n        <button matIconButton matSuffix [cdkCopyToClipboard]=\"password\">\n          <mat-icon>content_copy</mat-icon>\n        </button>\n      </mat-form-field>\n    </div>\n    }\n  </div>\n\n  <button mat-flat-button (click)=\"save()\">Save</button>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i7$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: UserCreate, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-user-create', imports: [FormsModule, ToolbarComponent,
+                        MatFormFieldModule, MatInputModule, ReactiveFormsModule,
+                        MatSelectModule, MatButtonModule, ClipboardModule, MatIcon
+                    ], template: "<rolatech-toolbar title=\"Create User\" link=\"../\"></rolatech-toolbar>\n<div class=\"p-4\">\n  <div class=\"flex flex-col lg:w-1/2\">\n    <mat-form-field appearance=\"fill\">\n      <mat-label> Name </mat-label>\n      <input matInput [(ngModel)]=\"user.name\" required />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label> Email </mat-label>\n      <input matInput [(ngModel)]=\"user.email\" required />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label> Phone </mat-label>\n      <input matInput [(ngModel)]=\"user.phone\" required />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label>Role</mat-label>\n      <mat-select (selectionChange)=\"onSelectionChange($event)\" [(ngModel)]=\"selectedRoles\" multiple>\n        @for (item of roles; track item) {\n        <mat-option [value]=\"item\"> {{ item.name }} </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n    @if (newUser) {\n    <div class=\"mb-3\">\n      <div class=\"font-bold mb-2\">Copy password</div>\n      <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n        <input matInput type=\"password\" [value]=\"password\" readonly />\n        <button matIconButton matSuffix [cdkCopyToClipboard]=\"password\">\n          <mat-icon>content_copy</mat-icon>\n        </button>\n      </mat-form-field>\n    </div>\n    }\n  </div>\n\n  <button mat-flat-button (click)=\"save()\">Save</button>\n</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+class UserRolesUpdateDialogComponent {
+    roles = model(...(ngDevMode ? [undefined, { debugName: "roles" }] : []));
+    selectedRoles = model(...(ngDevMode ? [undefined, { debugName: "selectedRoles" }] : []));
+    selected = model(...(ngDevMode ? [undefined, { debugName: "selected" }] : []));
+    output = output();
+    onSelectionChange(event) {
+        this.selectedRoles = event.value;
+        this.output.emit(this.selectedRoles);
+    }
+    compareFn(o1, o2) {
+        return o1.id === o2.id;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: UserRolesUpdateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0", type: UserRolesUpdateDialogComponent, isStandalone: true, selector: "rolatech-authorization-user-roles-update-dialog", inputs: { roles: { classPropertyName: "roles", publicName: "roles", isSignal: true, isRequired: false, transformFunction: null }, selectedRoles: { classPropertyName: "selectedRoles", publicName: "selectedRoles", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { roles: "rolesChange", selectedRoles: "selectedRolesChange", selected: "selectedChange", output: "output" }, ngImport: i0, template: "<div>\n  <mat-form-field appearance=\"fill\">\n    <mat-label>Role</mat-label>\n    <mat-select [compareWith]=\"compareFn\" (selectionChange)=\"onSelectionChange($event)\" [(ngModel)]=\"selectedRoles\" multiple>\n      @for (item of roles(); track item) {\n        <mat-option [value]=\"item\">\n          {{ item.name }}\n        </mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: UserRolesUpdateDialogComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [AngularCommonModule, AngularComponentsModule], selector: 'rolatech-authorization-user-roles-update-dialog', template: "<div>\n  <mat-form-field appearance=\"fill\">\n    <mat-label>Role</mat-label>\n    <mat-select [compareWith]=\"compareFn\" (selectionChange)=\"onSelectionChange($event)\" [(ngModel)]=\"selectedRoles\" multiple>\n      @for (item of roles(); track item) {\n        <mat-option [value]=\"item\">\n          {{ item.name }}\n        </mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+class UserDetails extends BaseComponent {
+    user;
+    isLoading = false;
+    roles = [];
+    selectedRoleIds = [];
+    selectedRoles = [];
+    userService = inject(UserService);
+    authUserService = inject(AuthUserService);
+    roleService = inject(RoleService);
+    location = inject(Location);
+    navigationService = inject(NavigationService);
+    username = this.route.snapshot.params['username'];
+    ngOnInit() {
+        this.findByUsername();
+        this.findAllRoles();
+    }
+    back() {
+        this.navigationService.back();
+    }
+    findById() {
+        this.userService.get(this.id, {}).subscribe({
+            next: (res) => {
+                this.user = res.data;
+                if (res.data.roles) {
+                    res.data.roles.forEach((item) => {
+                        this.selectedRoles.push({ id: item.id, name: item.name });
+                    });
+                }
+            },
+        });
+    }
+    findByUsername() {
+        this.authUserService.findByUsername(this.username.substring(1)).subscribe({
+            next: (res) => {
+                this.user = res.data;
+                if (res.data.roles) {
+                    res.data.roles.forEach((item) => {
+                        this.selectedRoles.push({ id: item.id, name: item.name });
+                    });
+                }
+            },
+        });
+    }
+    findAllRoles() {
+        this.isLoading = true;
+        this.roleService.find({ limit: 600 }).subscribe({
+            next: (res) => {
+                this.roles = res.data;
+                this.isLoading = false;
+            },
+            complete: () => { },
+            error: (error) => {
+                this.isLoading = false;
+                this.snackBarService.open(error.message);
+            },
+        });
+    }
+    onSelectionChange(event) {
+        this.selectedRoleIds = event.value;
+    }
+    updateRoles() {
+        this.roleService.find({}).subscribe({
+            next: (res) => {
+                const roles = [];
+                res.data.forEach((element) => {
+                    roles.push({ id: element.id, name: element.name });
+                });
+                const options = {
+                    title: 'Update Roles',
+                    cancelText: 'Cancel',
+                    confirmText: 'Ok',
+                    component: UserRolesUpdateDialogComponent,
+                    data: {
+                        selectedRoles: this.selectedRoles,
+                        roles: roles,
+                    },
+                };
+                this.dialogService.open(options);
+                this.dialogService.confirmed().subscribe({
+                    next: (result) => {
+                        if (result) {
+                            const data = {
+                                roles: result,
+                            };
+                            this.selectedRoles = [];
+                            result.forEach((item) => {
+                                this.selectedRoles.push({ id: item.id, name: item.name });
+                            });
+                            this.userService.updateRoles(this.user.id, data).subscribe({
+                                next: (res) => {
+                                    this.user.roles = result;
+                                    this.snackBarService.open('Update successfully');
+                                },
+                                error: (error) => {
+                                    this.snackBarService.open(error.message);
+                                },
+                            });
+                        }
+                    },
+                });
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: UserDetails, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0", type: UserDetails, isStandalone: true, selector: "rolatech-user-details", usesInheritance: true, ngImport: i0, template: "@if (user) {\n<rolatech-toolbar [title]=\"user.name\" link=\"../\"></rolatech-toolbar>\n<div class=\"p-3\">\n  <div class=\"flex gap-3 py-3\">\n    <div>\n      @if (user.avatar) {\n      <img class=\"w-32 h-32 rounded-md object-cover\" [src]=\"user.avatar\" alt />\n      } @else {\n      <div class=\"w-32 h-32 rounded-md bg-[--rt-raised-background]\"></div>\n      }\n    </div>\n    <div>\n      <div class=\"text-lg font-medium\">{{ user.name }}</div>\n      <div>&#64;{{ user.username }}</div>\n      <div>{{ user.phone }}</div>\n    </div>\n  </div>\n  <div class=\"flex flex-row items-center flex-wrap\">\n    <span class=\"mr-2\">Roles: </span>\n    @for (item of user.roles; track item) {\n    <a class=\"mr-4 underline\" [href]=\"['/roles/' + item.id]\">{{ item.name }}</a>\n    }\n    <button mat-flat-button (click)=\"updateRoles()\" class=\"cursor-pointer\">Update</button>\n  </div>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: UserDetails, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-user-details', imports: [MatButtonModule, ToolbarComponent], template: "@if (user) {\n<rolatech-toolbar [title]=\"user.name\" link=\"../\"></rolatech-toolbar>\n<div class=\"p-3\">\n  <div class=\"flex gap-3 py-3\">\n    <div>\n      @if (user.avatar) {\n      <img class=\"w-32 h-32 rounded-md object-cover\" [src]=\"user.avatar\" alt />\n      } @else {\n      <div class=\"w-32 h-32 rounded-md bg-[--rt-raised-background]\"></div>\n      }\n    </div>\n    <div>\n      <div class=\"text-lg font-medium\">{{ user.name }}</div>\n      <div>&#64;{{ user.username }}</div>\n      <div>{{ user.phone }}</div>\n    </div>\n  </div>\n  <div class=\"flex flex-row items-center flex-wrap\">\n    <span class=\"mr-2\">Roles: </span>\n    @for (item of user.roles; track item) {\n    <a class=\"mr-4 underline\" [href]=\"['/roles/' + item.id]\">{{ item.name }}</a>\n    }\n    <button mat-flat-button (click)=\"updateRoles()\" class=\"cursor-pointer\">Update</button>\n  </div>\n</div>\n}\n" }]
+        }] });
+
+const usersRoutes = [
+    {
+        path: '',
+        component: UserIndex,
+    },
+    {
+        path: 'create',
+        component: UserCreate,
+    },
+    {
+        path: ':username',
+        component: UserDetails,
+    },
+];
+
+export { usersRoutes as default };
+//# sourceMappingURL=rolatech-angular-authorization-users.routes-DGeI-_y0.mjs.map