@yuuvis/user-management-app 1.2.0 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/yuuvis-user-management-app-extensions.mjs +3 -3
- package/fesm2022/yuuvis-user-management-app-extensions.mjs.map +1 -1
- package/fesm2022/yuuvis-user-management-app.mjs +131 -132
- package/fesm2022/yuuvis-user-management-app.mjs.map +1 -1
- package/lib/assets/i18n/de.json +3 -1
- package/lib/assets/i18n/en.json +28 -25
- package/lib/pages/users/users.component.d.ts +6 -5
- package/package.json +5 -4
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import * as i1$3 from '@angular/common';
|
|
2
1
|
import { CommonModule } from '@angular/common';
|
|
3
2
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { inject, Component, Injectable, signal, linkedSignal, input, output, computed, effect, Inject,
|
|
3
|
+
import { inject, Component, Injectable, signal, Input, linkedSignal, input, output, computed, effect, Inject, HostBinding, ViewChild } from '@angular/core';
|
|
5
4
|
import * as i1 from '@angular/router';
|
|
6
5
|
import { RouterModule } from '@angular/router';
|
|
7
6
|
import * as i2 from '@yuuvis/client-core';
|
|
@@ -10,43 +9,44 @@ import { Title } from '@angular/platform-browser';
|
|
|
10
9
|
import { ShellService } from '@yuuvis/client-shell-core';
|
|
11
10
|
import * as i2$1 from '@angular/material/button';
|
|
12
11
|
import { MatButtonModule } from '@angular/material/button';
|
|
12
|
+
import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
|
|
13
13
|
import * as i1$2 from '@angular/material/icon';
|
|
14
14
|
import { MatIconModule } from '@angular/material/icon';
|
|
15
|
-
import * as
|
|
16
|
-
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
17
|
-
import { MatSortModule } from '@angular/material/sort';
|
|
18
|
-
import * as i5$1 from '@angular/material/paginator';
|
|
15
|
+
import * as i2$2 from '@angular/material/paginator';
|
|
19
16
|
import { MatPaginatorModule } from '@angular/material/paginator';
|
|
20
|
-
import
|
|
17
|
+
import { MatSortModule } from '@angular/material/sort';
|
|
18
|
+
import * as i3$3 from '@angular/material/table';
|
|
21
19
|
import { MatTableModule } from '@angular/material/table';
|
|
20
|
+
import { MatTabsModule } from '@angular/material/tabs';
|
|
21
|
+
import * as i4 from '@angular/material/tooltip';
|
|
22
|
+
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
23
|
+
import { SelectionModel } from '@angular/cdk/collections';
|
|
24
|
+
import { ConfirmService, BusyOverlayDirective, DialogComponent, ClickDoubleDirective } from '@yuuvis/client-framework/common';
|
|
25
|
+
import { SimpleSearchComponent } from '@yuuvis/client-framework/simple-search';
|
|
26
|
+
import * as i9 from '@yuuvis/client-framework/overflow-menu';
|
|
27
|
+
import { YuvOverflowMenuModule } from '@yuuvis/client-framework/overflow-menu';
|
|
28
|
+
import * as i8 from '@yuuvis/client-shell';
|
|
29
|
+
import { YuvClientShellModule } from '@yuuvis/client-shell';
|
|
22
30
|
import { YmtButtonDirective, YmtIconButtonDirective } from '@yuuvis/material';
|
|
23
|
-
import * as
|
|
31
|
+
import * as i6 from '@yuuvis/material/layout';
|
|
24
32
|
import { YmtLayoutModule } from '@yuuvis/material/layout';
|
|
25
|
-
import * as
|
|
33
|
+
import * as i7$1 from '@yuuvis/material/panes';
|
|
26
34
|
import { YmtPanesModule } from '@yuuvis/material/panes';
|
|
27
35
|
import { HttpParams } from '@angular/common/http';
|
|
28
36
|
import { map, switchMap, of, forkJoin } from 'rxjs';
|
|
29
|
-
import {
|
|
30
|
-
import
|
|
31
|
-
import
|
|
32
|
-
import { YuvClientShellModule } from '@yuuvis/client-shell';
|
|
37
|
+
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
38
|
+
import * as i3 from '@angular/material/chips';
|
|
39
|
+
import { MatChipsModule } from '@angular/material/chips';
|
|
33
40
|
import * as i1$1 from '@angular/forms';
|
|
34
41
|
import { ReactiveFormsModule, FormBuilder, FormControl, Validators } from '@angular/forms';
|
|
35
|
-
import
|
|
36
|
-
import * as i3 from '@angular/material/form-field';
|
|
42
|
+
import * as i3$1 from '@angular/material/form-field';
|
|
37
43
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
38
|
-
import * as i4 from '@angular/material/slide-toggle';
|
|
39
|
-
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
40
44
|
import * as i5 from '@angular/material/input';
|
|
41
45
|
import { MatInputModule } from '@angular/material/input';
|
|
42
|
-
import * as
|
|
46
|
+
import * as i7 from '@angular/material/slide-toggle';
|
|
47
|
+
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
48
|
+
import * as i3$2 from '@angular/material/list';
|
|
43
49
|
import { MatListModule } from '@angular/material/list';
|
|
44
|
-
import { SelectionModel } from '@angular/cdk/collections';
|
|
45
|
-
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
46
|
-
import * as i3$2 from '@angular/material/chips';
|
|
47
|
-
import { MatChipsModule } from '@angular/material/chips';
|
|
48
|
-
import * as i10 from '@yuuvis/client-framework/overflow-menu';
|
|
49
|
-
import { YuvOverflowMenuModule } from '@yuuvis/client-framework/overflow-menu';
|
|
50
50
|
|
|
51
51
|
const APP_ID = 'io.yuuvis.app.user-management';
|
|
52
52
|
const APP_ICONS = {
|
|
@@ -74,10 +74,10 @@ class YuvUserManagementComponent {
|
|
|
74
74
|
: this.appName;
|
|
75
75
|
this.#titleService.setTitle(translatedTitle);
|
|
76
76
|
}
|
|
77
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
78
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
77
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: YuvUserManagementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
78
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: YuvUserManagementComponent, isStandalone: true, selector: "ymusrmgmt-root", ngImport: i0, template: "<section class=\"usrmgmt-main__content\" [attr.aria-label]=\"'yuv.app.user-management.content.aria.label' | translate\">\n <router-outlet></router-outlet>\n</section>\n\n<router-outlet name=\"modal\"></router-outlet>\n", styles: [":host{display:flex;flex-flow:column;height:100%}:host .usrmgmt-main__content{flex:1;overflow-y:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
79
79
|
}
|
|
80
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
80
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: YuvUserManagementComponent, decorators: [{
|
|
81
81
|
type: Component,
|
|
82
82
|
args: [{ selector: 'ymusrmgmt-root', standalone: true, imports: [
|
|
83
83
|
CommonModule,
|
|
@@ -122,6 +122,7 @@ class YuvUserManagementService {
|
|
|
122
122
|
.confirm({
|
|
123
123
|
title: this.#translateService.instant('yuv.app.user-management.users.action.delete.label'),
|
|
124
124
|
message: this.#translateService.instant('yuv.app.user-management.users.action.delete.confirm.message', { username: user.username }),
|
|
125
|
+
confirmLabel: this.#translateService.instant('yuv.app.user-management.users.action.delete.confirm.label'),
|
|
125
126
|
})
|
|
126
127
|
.pipe(switchMap((confirmed) => {
|
|
127
128
|
if (confirmed) {
|
|
@@ -151,16 +152,81 @@ class YuvUserManagementService {
|
|
|
151
152
|
})));
|
|
152
153
|
return combined$;
|
|
153
154
|
}
|
|
154
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
155
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
155
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: YuvUserManagementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
156
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: YuvUserManagementService, providedIn: 'root' });
|
|
156
157
|
}
|
|
157
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
158
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: YuvUserManagementService, decorators: [{
|
|
158
159
|
type: Injectable,
|
|
159
160
|
args: [{
|
|
160
161
|
providedIn: 'root',
|
|
161
162
|
}]
|
|
162
163
|
}] });
|
|
163
164
|
|
|
165
|
+
class UserDetailsComponent {
|
|
166
|
+
userService;
|
|
167
|
+
formBuilder;
|
|
168
|
+
userDetails = signal(undefined);
|
|
169
|
+
userDetailsForm;
|
|
170
|
+
currentUserId;
|
|
171
|
+
set userId(value) {
|
|
172
|
+
this.currentUserId = value;
|
|
173
|
+
this.loadUserDetails();
|
|
174
|
+
}
|
|
175
|
+
loadUserDetails() {
|
|
176
|
+
if (this.currentUserId) {
|
|
177
|
+
this.userService.getUserDetails(this.currentUserId).subscribe(user => {
|
|
178
|
+
this.userDetails.set(user);
|
|
179
|
+
this.userDetailsForm.patchValue({
|
|
180
|
+
id: user.id,
|
|
181
|
+
username: user.username,
|
|
182
|
+
firstName: user.firstName,
|
|
183
|
+
lastName: user.lastName,
|
|
184
|
+
email: user.email,
|
|
185
|
+
enabled: user.enabled
|
|
186
|
+
});
|
|
187
|
+
});
|
|
188
|
+
}
|
|
189
|
+
else {
|
|
190
|
+
this.userDetails.set(undefined);
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
/**
|
|
194
|
+
* Refresh the user details by reloading the data from the server
|
|
195
|
+
*/
|
|
196
|
+
refresh() {
|
|
197
|
+
this.loadUserDetails();
|
|
198
|
+
}
|
|
199
|
+
constructor(userService, formBuilder) {
|
|
200
|
+
this.userService = userService;
|
|
201
|
+
this.formBuilder = formBuilder;
|
|
202
|
+
this.userDetailsForm = this.formBuilder.group({
|
|
203
|
+
id: [{ value: '' }],
|
|
204
|
+
username: [{ value: '' }],
|
|
205
|
+
firstName: [{ value: '' }],
|
|
206
|
+
lastName: [{ value: '' }],
|
|
207
|
+
email: [{ value: '' }],
|
|
208
|
+
enabled: [{ value: false, disabled: true }]
|
|
209
|
+
});
|
|
210
|
+
}
|
|
211
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: UserDetailsComponent, deps: [{ token: YuvUserManagementService }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
212
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: UserDetailsComponent, isStandalone: true, selector: "ymusrmgmt-user-details", inputs: { userId: "userId" }, ngImport: i0, template: "@let currentUserDetails = userDetails();\n@if (currentUserDetails) {\n <form [formGroup]=\"userDetailsForm\" class=\"user-details-form\">\n <mat-form-field appearance=\"outline\">\n <mat-label>{{('yuv.app.user-management.users.object.property.id' | translate)}}</mat-label>\n <input matInput formControlName=\"id\" readonly>\n </mat-form-field>\n <mat-form-field>\n <mat-label>{{('yuv.app.user-management.users.object.property.username' | translate)}}</mat-label>\n <input matInput formControlName=\"username\" readonly>\n <mat-icon matPrefix>account_box</mat-icon>\n </mat-form-field>\n <mat-form-field>\n <mat-label>{{('yuv.app.user-management.users.object.property.email' | translate)}}</mat-label>\n <input matInput formControlName=\"email\" readonly>\n <mat-icon matPrefix>email</mat-icon>\n </mat-form-field> \n <mat-form-field>\n <mat-label>{{('yuv.app.user-management.users.object.property.firstname' | translate)}}</mat-label>\n <input matInput formControlName=\"firstName\" readonly>\n </mat-form-field>\n <mat-form-field>\n <mat-label>{{('yuv.app.user-management.users.object.property.lastname' | translate)}}</mat-label>\n <input matInput formControlName=\"lastName\" readonly>\n </mat-form-field>\n <mat-form-field class=\"groups-field\">\n <mat-label>{{('yuv.app.user-management.users.object.property.groups' | translate)}}</mat-label>\n <mat-chip-grid #groupChipGrid>\n @if (currentUserDetails.groups) {\n @for (group of currentUserDetails.groups.sort(); track group) {\n <mat-chip-row [editable]=\"false\"><div class=\"chip\">{{group}}</div></mat-chip-row>\n }\n }\n <input [matChipInputFor]=\"groupChipGrid\" readonly/>\n </mat-chip-grid>\n </mat-form-field>\n <mat-form-field class=\"roles-field\">\n <mat-label>{{('yuv.app.user-management.users.object.property.roles' | translate)}}</mat-label>\n <mat-chip-grid #roleChipGrid>\n @if (currentUserDetails.effectiveRoles) {\n @for (role of currentUserDetails.effectiveRoles; track role) {\n <mat-chip-row [editable]=\"false\" [disabled]=\"currentUserDetails.roles.indexOf(role) === -1\"><div class=\"chip\">{{role}}</div></mat-chip-row>\n }\n }\n <input [matChipInputFor]=\"roleChipGrid\" readonly/>\n </mat-chip-grid>\n </mat-form-field>\n <mat-slide-toggle formControlName=\"enabled\">\n {{ userDetailsForm.get('enabled')?.value ? ('yuv.app.user-management.users.object.property.enabled' | translate) :\n ('yuv.app.user-management.users.object.property.disabled' | translate) }}\n </mat-slide-toggle> \n </form>\n}", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .user-details-form{flex:1;overflow-y:auto;display:grid;align-items:start;align-content:start;gap:var(--ymt-spacing-m);padding:1rem}:host .user-details-form mat-chip-row{overflow:hidden}:host .user-details-form .groups-field mat-chip-grid,:host .user-details-form .roles-field mat-chip-grid{max-height:300px;overflow-y:auto;display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { 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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { 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: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
213
|
+
}
|
|
214
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: UserDetailsComponent, decorators: [{
|
|
215
|
+
type: Component,
|
|
216
|
+
args: [{ selector: 'ymusrmgmt-user-details', imports: [
|
|
217
|
+
MatChipsModule,
|
|
218
|
+
MatFormFieldModule,
|
|
219
|
+
MatInputModule,
|
|
220
|
+
MatIconModule,
|
|
221
|
+
MatCheckboxModule,
|
|
222
|
+
MatSlideToggleModule,
|
|
223
|
+
ReactiveFormsModule,
|
|
224
|
+
TranslateModule
|
|
225
|
+
], template: "@let currentUserDetails = userDetails();\n@if (currentUserDetails) {\n <form [formGroup]=\"userDetailsForm\" class=\"user-details-form\">\n <mat-form-field appearance=\"outline\">\n <mat-label>{{('yuv.app.user-management.users.object.property.id' | translate)}}</mat-label>\n <input matInput formControlName=\"id\" readonly>\n </mat-form-field>\n <mat-form-field>\n <mat-label>{{('yuv.app.user-management.users.object.property.username' | translate)}}</mat-label>\n <input matInput formControlName=\"username\" readonly>\n <mat-icon matPrefix>account_box</mat-icon>\n </mat-form-field>\n <mat-form-field>\n <mat-label>{{('yuv.app.user-management.users.object.property.email' | translate)}}</mat-label>\n <input matInput formControlName=\"email\" readonly>\n <mat-icon matPrefix>email</mat-icon>\n </mat-form-field> \n <mat-form-field>\n <mat-label>{{('yuv.app.user-management.users.object.property.firstname' | translate)}}</mat-label>\n <input matInput formControlName=\"firstName\" readonly>\n </mat-form-field>\n <mat-form-field>\n <mat-label>{{('yuv.app.user-management.users.object.property.lastname' | translate)}}</mat-label>\n <input matInput formControlName=\"lastName\" readonly>\n </mat-form-field>\n <mat-form-field class=\"groups-field\">\n <mat-label>{{('yuv.app.user-management.users.object.property.groups' | translate)}}</mat-label>\n <mat-chip-grid #groupChipGrid>\n @if (currentUserDetails.groups) {\n @for (group of currentUserDetails.groups.sort(); track group) {\n <mat-chip-row [editable]=\"false\"><div class=\"chip\">{{group}}</div></mat-chip-row>\n }\n }\n <input [matChipInputFor]=\"groupChipGrid\" readonly/>\n </mat-chip-grid>\n </mat-form-field>\n <mat-form-field class=\"roles-field\">\n <mat-label>{{('yuv.app.user-management.users.object.property.roles' | translate)}}</mat-label>\n <mat-chip-grid #roleChipGrid>\n @if (currentUserDetails.effectiveRoles) {\n @for (role of currentUserDetails.effectiveRoles; track role) {\n <mat-chip-row [editable]=\"false\" [disabled]=\"currentUserDetails.roles.indexOf(role) === -1\"><div class=\"chip\">{{role}}</div></mat-chip-row>\n }\n }\n <input [matChipInputFor]=\"roleChipGrid\" readonly/>\n </mat-chip-grid>\n </mat-form-field>\n <mat-slide-toggle formControlName=\"enabled\">\n {{ userDetailsForm.get('enabled')?.value ? ('yuv.app.user-management.users.object.property.enabled' | translate) :\n ('yuv.app.user-management.users.object.property.disabled' | translate) }}\n </mat-slide-toggle> \n </form>\n}", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .user-details-form{flex:1;overflow-y:auto;display:grid;align-items:start;align-content:start;gap:var(--ymt-spacing-m);padding:1rem}:host .user-details-form mat-chip-row{overflow:hidden}:host .user-details-form .groups-field mat-chip-grid,:host .user-details-form .roles-field mat-chip-grid{max-height:300px;overflow-y:auto;display:block}\n"] }]
|
|
226
|
+
}], ctorParameters: () => [{ type: YuvUserManagementService }, { type: i1$1.FormBuilder }], propDecorators: { userId: [{
|
|
227
|
+
type: Input
|
|
228
|
+
}] } });
|
|
229
|
+
|
|
164
230
|
const components$1 = [BusyOverlayDirective, YmtButtonDirective, DialogComponent];
|
|
165
231
|
const modules$1 = [
|
|
166
232
|
CommonModule,
|
|
@@ -251,10 +317,10 @@ class CreateUserComponent {
|
|
|
251
317
|
this.changedInput.set(value);
|
|
252
318
|
});
|
|
253
319
|
}
|
|
254
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
255
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
320
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CreateUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
321
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: CreateUserComponent, isStandalone: true, selector: "ymusrmgmt-create-user", host: { properties: { "class.busy": "!busy()" } }, ngImport: i0, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.users.action.create.label' | translate\">\n <main class=\"yuv-dialog-content\">\n <form [formGroup]=\"form\">\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{\"yuv.app.user-management.users.object.property.username\" | translate }}</mat-label>\n <input matInput [formControl]=\"username\" type=\"text\"/>\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{\"yuv.app.user-management.users.object.property.email\" | translate}}</mat-label>\n <input matInput [formControl]=\"email\" type=\"text\"/>\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{\"yuv.app.user-management.users.object.property.firstname\" | translate}}</mat-label>\n <input matInput [formControl]=\"firstname\" type=\"text\"/>\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{\"yuv.app.user-management.users.object.property.lastname\" | translate}}</mat-label>\n <input matInput [formControl]=\"lastname\" type=\"text\"/>\n </mat-form-field>\n <div class=\"yuv-form-field\" id=\"enabledPropDiv\">\n <mat-slide-toggle formControlName=\"enabled\">\n {{ form.get('enabled')?.value ? ('yuv.app.user-management.users.object.property.enabled' | translate) : ('yuv.app.user-management.users.object.property.disabled' | translate) }}\n </mat-slide-toggle>\n </div>\n @if (error()) {\n <p class=\"error\">{{ error() }}</p>\n }\n </form>\n </main>\n <footer>\n <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n {{ \"yuv.app.user-management.users.action.button.cancel\" | translate }}\n </button>\n <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"createUser()\">\n {{ 'yuv.app.user-management.users.action.button.create' | translate }}\n </button>\n </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form #enabledPropDiv{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { 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: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }] });
|
|
256
322
|
}
|
|
257
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
323
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CreateUserComponent, decorators: [{
|
|
258
324
|
type: Component,
|
|
259
325
|
args: [{ selector: 'ymusrmgmt-create-user', standalone: true, imports: [...modules$1, ...components$1], host: {
|
|
260
326
|
'[class.busy]': '!busy()',
|
|
@@ -342,10 +408,10 @@ class EditUserRolesComponent {
|
|
|
342
408
|
isAssignedSelected(role) {
|
|
343
409
|
return this.selectedAssigned().includes(role);
|
|
344
410
|
}
|
|
345
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
346
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
411
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: EditUserRolesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
412
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: EditUserRolesComponent, isStandalone: true, selector: "ymusrmgmt-edit-user-roles", inputs: { allRoles: { classPropertyName: "allRoles", publicName: "allRoles", isSignal: true, isRequired: true, transformFunction: null }, assignedRoles: { classPropertyName: "assignedRoles", publicName: "assignedRoles", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { rolesChange: "rolesChange" }, ngImport: i0, template: "<div class=\"role-selector\">\n <!-- Available Roles (Left) -->\n <div class=\"role-list-container\">\n <div class=\"role-list-header\">\n {{ 'yuv.app.user-management.users.roles.available' | translate }}\n </div>\n <mat-selection-list class=\"role-list\" #availableList hideSingleSelectionIndicator=\"true\">\n @for (role of availableRoles(); track role) {\n <mat-list-option \n [value]=\"role\" \n [selected]=\"isAvailableSelected(role)\"\n (click)=\"toggleAvailableRole(role)\">\n {{ role }}\n </mat-list-option>\n }\n @empty {\n <div class=\"empty-message\">\n {{ 'yuv.app.user-management.users.roles.noAvailable' | translate }}\n </div>\n }\n </mat-selection-list>\n </div>\n\n <!-- Control Buttons (Center) -->\n <div class=\"control-buttons\">\n <button \n mat-icon-button \n [disabled]=\"availableRoles().length === 0\"\n (click)=\"assignAllRoles()\"\n [title]=\"'yuv.app.user-management.users.roles.assignAll' | translate\">\n <mat-icon>keyboard_double_arrow_right</mat-icon>\n </button>\n <button \n mat-icon-button \n [disabled]=\"!canAssign()\"\n (click)=\"assignRoles()\"\n [title]=\"'yuv.app.user-management.users.roles.assign' | translate\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n <button \n mat-icon-button \n [disabled]=\"!canRemove()\"\n (click)=\"removeRoles()\"\n [title]=\"'yuv.app.user-management.users.roles.remove' | translate\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n <button \n mat-icon-button \n [disabled]=\"userRoles().length === 0\"\n (click)=\"removeAllRoles()\"\n [title]=\"'yuv.app.user-management.users.roles.removeAll' | translate\">\n <mat-icon>keyboard_double_arrow_left</mat-icon>\n </button>\n </div>\n\n <!-- Assigned Roles (Right) -->\n <div class=\"role-list-container\">\n <div class=\"role-list-header\">\n {{ 'yuv.app.user-management.users.roles.assigned' | translate }}\n </div>\n <mat-selection-list class=\"role-list\" #assignedList hideSingleSelectionIndicator=\"true\">\n @for (role of userRoles(); track role) {\n <mat-list-option \n [value]=\"role\" \n [selected]=\"isAssignedSelected(role)\"\n (click)=\"toggleAssignedRole(role)\">\n {{ role }}\n </mat-list-option>\n }\n @empty {\n <div class=\"empty-message\">\n {{ 'yuv.app.user-management.users.roles.noAssigned' | translate }}\n </div>\n }\n </mat-selection-list>\n </div>\n</div>\n", styles: [".role-selector{display:flex;gap:var(--ymt-spacing-m);align-items:stretch;min-height:300px;padding:var(--ymt-spacing-xs) 0}.role-list-container{flex:1;display:flex;flex-direction:column;border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-xs);overflow:hidden;background-color:var(--ymt-surface-container-lowest);max-height:300px}.role-list-header{padding:var(--ymt-spacing-s) var(--ymt-spacing-m);background-color:var(--ymt-surface-container-high);color:var(--ymt-on-surface);font:var(--ymt-font-title-smallest);border-bottom:var(--ymt-outline-width) solid var(--ymt-outline-variant)}.role-list{flex:1;overflow-y:auto;min-height:0}.role-list ::ng-deep .mat-mdc-list-option{font:var(--ymt-font-body-subtle);min-height:var(--ymt-sizing-2xl)}.role-list ::ng-deep .mdc-list-item__primary-text{font:var(--ymt-font-body-subtle)}.role-list ::ng-deep .mdc-checkbox{display:none}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true]{background-color:var(--ymt-selection-background)!important}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true] .mdc-list-item__primary-text{color:var(--ymt-on-selection-background);font-weight:500}.role-list ::ng-deep .mat-mdc-list-option:hover:not([aria-selected=true]){background-color:var(--ymt-hover-background)}.control-buttons{display:flex;flex-direction:column;justify-content:center;gap:var(--ymt-spacing-xs)}.empty-message{padding:var(--ymt-spacing-m);text-align:center;color:var(--ymt-text-color-subtle);font:var(--ymt-font-body-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$2.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3$2.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
347
413
|
}
|
|
348
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
414
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: EditUserRolesComponent, decorators: [{
|
|
349
415
|
type: Component,
|
|
350
416
|
args: [{ selector: 'ymusrmgmt-edit-user-roles', imports: [
|
|
351
417
|
CommonModule,
|
|
@@ -468,10 +534,10 @@ class EditUserComponent {
|
|
|
468
534
|
close() {
|
|
469
535
|
this.#dialogRef.close();
|
|
470
536
|
}
|
|
471
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
472
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
537
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: EditUserComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
538
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: EditUserComponent, isStandalone: true, selector: "ymusrmgmt-edit-user", host: { properties: { "class.busy": "!busy()" } }, ngImport: i0, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.users.action.edit.label' | translate\">\n <main class=\"yuv-dialog-content\">\n <form [formGroup]=\"form\">\n <mat-form-field class=\"yuv-form-field readonly-field\">\n <mat-label class=\"readonly-label\">{{\"yuv.app.user-management.users.object.property.username\" | translate }}</mat-label>\n <input matInput [formControl]=\"username\" type=\"text\" [attr.tabindex]=\"-1\" readonly/>\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{\"yuv.app.user-management.users.object.property.email\" | translate}}</mat-label>\n <input matInput [formControl]=\"email\" type=\"text\" #emailField/>\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{\"yuv.app.user-management.users.object.property.firstname\" | translate}}</mat-label>\n <input matInput [formControl]=\"firstName\" type=\"text\"/>\n </mat-form-field>\n <mat-form-field class=\"yuv-form-field\">\n <mat-label>{{\"yuv.app.user-management.users.object.property.lastname\" | translate}}</mat-label>\n <input matInput [formControl]=\"lastName\" type=\"text\"/>\n </mat-form-field>\n \n <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n <ymusrmgmt-edit-user-roles\n [allRoles]=\"allAvailableRoles()\"\n [assignedRoles]=\"userRoles()\"\n (rolesChange)=\"onRolesChange($event)\">\n </ymusrmgmt-edit-user-roles>\n </div>\n \n @if (error()) {\n <p class=\"error\">{{ error() }}</p>\n }\n </form>\n </main>\n <footer>\n <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n {{ \"yuv.app.user-management.users.action.button.cancel\" | translate }}\n </button>\n <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"editUser()\">\n {{ 'yuv.app.user-management.users.action.button.save' | translate }}\n </button>\n </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .readonly-field{opacity:.5;pointer-events:none}:host main form .readonly-label{pointer-events:none}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form .roles-section{margin:var(--ymt-spacing-m) 0}:host main form .roles-section .roles-label{display:block;font-size:12px;font-weight:400;color:#0009;margin-bottom:var(--ymt-spacing-xs)}:host main form .roles-section.has-error .roles-label{color:var(--ymt-danger)}:host main form .roles-section.has-error ymusrmgmt-edit-user-roles{border:2px solid var(--ymt-danger);border-radius:var(--ymt-corner-xs);display:block}:host main form .roles-section .roles-error{color:var(--ymt-danger);font-size:12px;margin-top:var(--ymt-spacing-xs);padding-left:var(--ymt-spacing-m)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { 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: "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: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "component", type: EditUserRolesComponent, selector: "ymusrmgmt-edit-user-roles", inputs: ["allRoles", "assignedRoles"], outputs: ["rolesChange"] }] });
|
|
473
539
|
}
|
|
474
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
540
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: EditUserComponent, decorators: [{
|
|
475
541
|
type: Component,
|
|
476
542
|
args: [{ selector: 'ymusrmgmt-edit-user', standalone: true, imports: [...modules, ...components], host: {
|
|
477
543
|
'[class.busy]': '!busy()',
|
|
@@ -481,71 +547,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
481
547
|
args: [MAT_DIALOG_DATA]
|
|
482
548
|
}] }] });
|
|
483
549
|
|
|
484
|
-
class UserDetailsComponent {
|
|
485
|
-
userService;
|
|
486
|
-
formBuilder;
|
|
487
|
-
userDetails = signal(undefined);
|
|
488
|
-
userDetailsForm;
|
|
489
|
-
currentUserId;
|
|
490
|
-
set userId(value) {
|
|
491
|
-
this.currentUserId = value;
|
|
492
|
-
this.loadUserDetails();
|
|
493
|
-
}
|
|
494
|
-
loadUserDetails() {
|
|
495
|
-
if (this.currentUserId) {
|
|
496
|
-
this.userService.getUserDetails(this.currentUserId).subscribe(user => {
|
|
497
|
-
this.userDetails.set(user);
|
|
498
|
-
this.userDetailsForm.patchValue({
|
|
499
|
-
id: user.id,
|
|
500
|
-
username: user.username,
|
|
501
|
-
firstName: user.firstName,
|
|
502
|
-
lastName: user.lastName,
|
|
503
|
-
email: user.email,
|
|
504
|
-
enabled: user.enabled
|
|
505
|
-
});
|
|
506
|
-
});
|
|
507
|
-
}
|
|
508
|
-
else {
|
|
509
|
-
this.userDetails.set(undefined);
|
|
510
|
-
}
|
|
511
|
-
}
|
|
512
|
-
/**
|
|
513
|
-
* Refresh the user details by reloading the data from the server
|
|
514
|
-
*/
|
|
515
|
-
refresh() {
|
|
516
|
-
this.loadUserDetails();
|
|
517
|
-
}
|
|
518
|
-
constructor(userService, formBuilder) {
|
|
519
|
-
this.userService = userService;
|
|
520
|
-
this.formBuilder = formBuilder;
|
|
521
|
-
this.userDetailsForm = this.formBuilder.group({
|
|
522
|
-
id: [{ value: '' }],
|
|
523
|
-
username: [{ value: '' }],
|
|
524
|
-
firstName: [{ value: '' }],
|
|
525
|
-
lastName: [{ value: '' }],
|
|
526
|
-
email: [{ value: '' }],
|
|
527
|
-
enabled: [{ value: false, disabled: true }]
|
|
528
|
-
});
|
|
529
|
-
}
|
|
530
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: UserDetailsComponent, deps: [{ token: YuvUserManagementService }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
531
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: UserDetailsComponent, isStandalone: true, selector: "ymusrmgmt-user-details", inputs: { userId: "userId" }, ngImport: i0, template: "@let currentUserDetails = userDetails();\n@if (currentUserDetails) {\n <form [formGroup]=\"userDetailsForm\" class=\"user-details-form\">\n <mat-form-field appearance=\"outline\">\n <mat-label>{{('yuv.app.user-management.users.object.property.id' | translate)}}</mat-label>\n <input matInput formControlName=\"id\" readonly>\n </mat-form-field>\n <mat-form-field>\n <mat-label>{{('yuv.app.user-management.users.object.property.username' | translate)}}</mat-label>\n <input matInput formControlName=\"username\" readonly>\n <mat-icon matPrefix>account_box</mat-icon>\n </mat-form-field>\n <mat-form-field>\n <mat-label>{{('yuv.app.user-management.users.object.property.email' | translate)}}</mat-label>\n <input matInput formControlName=\"email\" readonly>\n <mat-icon matPrefix>email</mat-icon>\n </mat-form-field> \n <mat-form-field>\n <mat-label>{{('yuv.app.user-management.users.object.property.firstname' | translate)}}</mat-label>\n <input matInput formControlName=\"firstName\" readonly>\n </mat-form-field>\n <mat-form-field>\n <mat-label>{{('yuv.app.user-management.users.object.property.lastname' | translate)}}</mat-label>\n <input matInput formControlName=\"lastName\" readonly>\n </mat-form-field>\n <mat-form-field>\n <mat-label>{{('yuv.app.user-management.users.object.property.groups' | translate)}}</mat-label>\n <mat-chip-grid #groupChipGrid>\n @if (currentUserDetails.groups) {\n @for (group of currentUserDetails.groups.sort(); track group) {\n <mat-chip-row [editable]=\"false\"><div class=\"chip\">{{group}}</div></mat-chip-row>\n }\n }\n <input [matChipInputFor]=\"groupChipGrid\" readonly/>\n </mat-chip-grid>\n </mat-form-field>\n <mat-form-field>\n <mat-label>{{('yuv.app.user-management.users.object.property.roles' | translate)}}</mat-label>\n <mat-chip-grid #roleChipGrid>\n @if (currentUserDetails.effectiveRoles) {\n @for (role of currentUserDetails.effectiveRoles; track role) {\n <mat-chip-row [editable]=\"false\" [disabled]=\"currentUserDetails.roles.indexOf(role) === -1\"><div class=\"chip\">{{role}}</div></mat-chip-row>\n }\n }\n <input [matChipInputFor]=\"roleChipGrid\" readonly/>\n </mat-chip-grid>\n </mat-form-field>\n <mat-slide-toggle formControlName=\"enabled\">\n {{ userDetailsForm.get('enabled')?.value ? ('yuv.app.user-management.users.object.property.enabled' | translate) :\n ('yuv.app.user-management.users.object.property.disabled' | translate) }}\n </mat-slide-toggle> \n </form>\n}", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .user-details-form{display:grid;gap:var(--ymt-spacing-m);padding:1rem}:host .user-details-form mat-chip-row{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i3$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { 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: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
532
|
-
}
|
|
533
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: UserDetailsComponent, decorators: [{
|
|
534
|
-
type: Component,
|
|
535
|
-
args: [{ selector: 'ymusrmgmt-user-details', imports: [
|
|
536
|
-
MatChipsModule,
|
|
537
|
-
MatFormFieldModule,
|
|
538
|
-
MatInputModule,
|
|
539
|
-
MatIconModule,
|
|
540
|
-
MatCheckboxModule,
|
|
541
|
-
MatSlideToggleModule,
|
|
542
|
-
ReactiveFormsModule,
|
|
543
|
-
TranslateModule
|
|
544
|
-
], template: "@let currentUserDetails = userDetails();\n@if (currentUserDetails) {\n <form [formGroup]=\"userDetailsForm\" class=\"user-details-form\">\n <mat-form-field appearance=\"outline\">\n <mat-label>{{('yuv.app.user-management.users.object.property.id' | translate)}}</mat-label>\n <input matInput formControlName=\"id\" readonly>\n </mat-form-field>\n <mat-form-field>\n <mat-label>{{('yuv.app.user-management.users.object.property.username' | translate)}}</mat-label>\n <input matInput formControlName=\"username\" readonly>\n <mat-icon matPrefix>account_box</mat-icon>\n </mat-form-field>\n <mat-form-field>\n <mat-label>{{('yuv.app.user-management.users.object.property.email' | translate)}}</mat-label>\n <input matInput formControlName=\"email\" readonly>\n <mat-icon matPrefix>email</mat-icon>\n </mat-form-field> \n <mat-form-field>\n <mat-label>{{('yuv.app.user-management.users.object.property.firstname' | translate)}}</mat-label>\n <input matInput formControlName=\"firstName\" readonly>\n </mat-form-field>\n <mat-form-field>\n <mat-label>{{('yuv.app.user-management.users.object.property.lastname' | translate)}}</mat-label>\n <input matInput formControlName=\"lastName\" readonly>\n </mat-form-field>\n <mat-form-field>\n <mat-label>{{('yuv.app.user-management.users.object.property.groups' | translate)}}</mat-label>\n <mat-chip-grid #groupChipGrid>\n @if (currentUserDetails.groups) {\n @for (group of currentUserDetails.groups.sort(); track group) {\n <mat-chip-row [editable]=\"false\"><div class=\"chip\">{{group}}</div></mat-chip-row>\n }\n }\n <input [matChipInputFor]=\"groupChipGrid\" readonly/>\n </mat-chip-grid>\n </mat-form-field>\n <mat-form-field>\n <mat-label>{{('yuv.app.user-management.users.object.property.roles' | translate)}}</mat-label>\n <mat-chip-grid #roleChipGrid>\n @if (currentUserDetails.effectiveRoles) {\n @for (role of currentUserDetails.effectiveRoles; track role) {\n <mat-chip-row [editable]=\"false\" [disabled]=\"currentUserDetails.roles.indexOf(role) === -1\"><div class=\"chip\">{{role}}</div></mat-chip-row>\n }\n }\n <input [matChipInputFor]=\"roleChipGrid\" readonly/>\n </mat-chip-grid>\n </mat-form-field>\n <mat-slide-toggle formControlName=\"enabled\">\n {{ userDetailsForm.get('enabled')?.value ? ('yuv.app.user-management.users.object.property.enabled' | translate) :\n ('yuv.app.user-management.users.object.property.disabled' | translate) }}\n </mat-slide-toggle> \n </form>\n}", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .user-details-form{display:grid;gap:var(--ymt-spacing-m);padding:1rem}:host .user-details-form mat-chip-row{overflow:hidden}\n"] }]
|
|
545
|
-
}], ctorParameters: () => [{ type: YuvUserManagementService }, { type: i1$1.FormBuilder }], propDecorators: { userId: [{
|
|
546
|
-
type: Input
|
|
547
|
-
}] } });
|
|
548
|
-
|
|
549
550
|
class YuvUsersPageComponent {
|
|
550
551
|
layoutSettingsID = APP_ID + '#root.layout.settings';
|
|
551
552
|
#logger = inject(Logger);
|
|
@@ -565,6 +566,7 @@ class YuvUsersPageComponent {
|
|
|
565
566
|
};
|
|
566
567
|
dataSource = signal([]);
|
|
567
568
|
selection = signal(new SelectionModel(false, undefined));
|
|
569
|
+
detailsActive = true;
|
|
568
570
|
layoutOptions = {
|
|
569
571
|
resizable: true,
|
|
570
572
|
detailsSize: 25,
|
|
@@ -575,6 +577,7 @@ class YuvUsersPageComponent {
|
|
|
575
577
|
#updateActions(selectedUser) {
|
|
576
578
|
if (!selectedUser) {
|
|
577
579
|
this.actions = [];
|
|
580
|
+
this.detailsActive = false;
|
|
578
581
|
return;
|
|
579
582
|
}
|
|
580
583
|
const currentUser = this.#userService.getCurrentUser();
|
|
@@ -606,6 +609,7 @@ class YuvUsersPageComponent {
|
|
|
606
609
|
callback: () => this.deleteSelectedUser(),
|
|
607
610
|
};
|
|
608
611
|
this.actions = [editAction, activateAction, deactivateAction, deleteAction];
|
|
612
|
+
this.detailsActive = true;
|
|
609
613
|
}
|
|
610
614
|
createNewUser() {
|
|
611
615
|
this.#logger.debug('Create new user ...');
|
|
@@ -634,7 +638,7 @@ class YuvUsersPageComponent {
|
|
|
634
638
|
if (editedUserId) {
|
|
635
639
|
this.#logger.debug("User edited with ID: " + editedUserId);
|
|
636
640
|
this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.users.action.edit.success', { username: selected.username }));
|
|
637
|
-
this.refresh();
|
|
641
|
+
this.refresh(true);
|
|
638
642
|
}
|
|
639
643
|
});
|
|
640
644
|
}
|
|
@@ -662,7 +666,7 @@ class YuvUsersPageComponent {
|
|
|
662
666
|
complete: () => {
|
|
663
667
|
this.#notificationService.success(this.#translateService.instant(`yuv.app.user-management.users.action.${action}.success`, { username: selected.username }));
|
|
664
668
|
this.busy.set(false);
|
|
665
|
-
this.refresh();
|
|
669
|
+
this.refresh(true);
|
|
666
670
|
},
|
|
667
671
|
});
|
|
668
672
|
};
|
|
@@ -671,6 +675,7 @@ class YuvUsersPageComponent {
|
|
|
671
675
|
.confirm({
|
|
672
676
|
title: this.#translateService.instant('yuv.app.user-management.users.action.deactivate.label'),
|
|
673
677
|
message: this.#translateService.instant('yuv.app.user-management.users.action.deactivate.confirm.message', { username: selected.username }),
|
|
678
|
+
confirmLabel: this.#translateService.instant('yuv.app.user-management.users.action.deactivate.confirm.label'),
|
|
674
679
|
})
|
|
675
680
|
.subscribe({
|
|
676
681
|
next: (confirmed) => {
|
|
@@ -693,7 +698,7 @@ class YuvUsersPageComponent {
|
|
|
693
698
|
if (result) {
|
|
694
699
|
this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.users.action.delete.success', { username: selected.username }));
|
|
695
700
|
this.deselect();
|
|
696
|
-
this.
|
|
701
|
+
this.#loadUserList(this.pagination?.page || 0);
|
|
697
702
|
}
|
|
698
703
|
},
|
|
699
704
|
error: (e) => {
|
|
@@ -719,8 +724,11 @@ class YuvUsersPageComponent {
|
|
|
719
724
|
isSelected(row) {
|
|
720
725
|
return this.selection().selected?.some(item => item.id === row.id);
|
|
721
726
|
}
|
|
722
|
-
refresh() {
|
|
727
|
+
refresh(refreshDetails = false) {
|
|
723
728
|
this.#loadUserList(this.pagination?.page || 0);
|
|
729
|
+
if (refreshDetails) {
|
|
730
|
+
this.refreshUserDetails();
|
|
731
|
+
}
|
|
724
732
|
}
|
|
725
733
|
refreshUserDetails() {
|
|
726
734
|
if (this.userDetailsComponent) {
|
|
@@ -759,45 +767,36 @@ class YuvUsersPageComponent {
|
|
|
759
767
|
this.busy.set(false);
|
|
760
768
|
},
|
|
761
769
|
complete: () => {
|
|
770
|
+
if (this.dataSource().length === 0 && page > 0) {
|
|
771
|
+
this.#loadUserList(page - 1);
|
|
772
|
+
return;
|
|
773
|
+
}
|
|
762
774
|
const selected = this.selection().hasValue() ? this.selection().selected[0] : undefined;
|
|
763
|
-
if (selected) {
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
this.select(updatedSelected);
|
|
767
|
-
}
|
|
768
|
-
else {
|
|
769
|
-
this.#userManagementService.getUserDetails(selected.id).subscribe({
|
|
770
|
-
next: (user) => {
|
|
771
|
-
this.select(user);
|
|
772
|
-
},
|
|
773
|
-
error: (e) => {
|
|
774
|
-
this.#logger.error(`Failed to fetch data for selected user with id '${selected.id}'. Deselecting user...`, e);
|
|
775
|
-
this.deselect();
|
|
776
|
-
}
|
|
777
|
-
});
|
|
778
|
-
}
|
|
779
|
-
this.refreshUserDetails();
|
|
775
|
+
if (selected && this.dataSource().some(u => u.id === selected.id)) {
|
|
776
|
+
const updatedSelected = this.dataSource().find(u => u.id === selected.id);
|
|
777
|
+
this.select(updatedSelected);
|
|
780
778
|
}
|
|
781
779
|
else {
|
|
782
|
-
this.
|
|
780
|
+
this.select(this.dataSource()[0]);
|
|
783
781
|
}
|
|
784
782
|
this.busy.set(false);
|
|
785
783
|
},
|
|
786
784
|
});
|
|
787
785
|
}
|
|
788
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
789
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
786
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: YuvUsersPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
787
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: YuvUsersPageComponent, isStandalone: true, selector: "ymusrmgmt-users", host: { properties: { "class.busy": "!busy()", "class.pagination": "this.pagination" } }, viewQueries: [{ propertyName: "userDetailsComponent", first: true, predicate: UserDetailsComponent, descendants: true }], ngImport: i0, template: "<ng-template yuvAppHeaderSlot=\"actions\">\n <button ymtButton=\"primary\" (click)=\"createNewUser()\" [matTooltip]=\"'yuv.app.user-management.users.action.create.description' | translate\">\n <mat-icon>{{icons.actionCreateNewUser}}</mat-icon>{{'yuv.app.user-management.users.action.create.label' | translate }}\n </button>\n</ng-template>\n\n<ng-template yuvAppHeaderSlot=\"search\">\n <yuv-simple-search (queryChange)=\"onQueryChange($event)\"></yuv-simple-search>\n</ng-template>\n\n<ymt-master-details-layout [yuvBusyOverlay]=\"busy()\" [(detailsActive)]=\"detailsActive\" [options]=\"layoutOptions\" [layoutSettingsID]=\"layoutSettingsID\">\n <ng-template ymtLayoutPane role=\"master\" [topBarActions]=\"masterPaneActions\">\n <ymt-pane-body>\n <mat-table [dataSource]=\"dataSource()\" class=\"user-table mat-elevation-z8\" row>\n <ng-container matColumnDef=\"state\">\n <mat-header-cell *matHeaderCellDef />\n <mat-cell *matCellDef=\"let element\"><mat-icon>{{ element.enabled ? icons.stateActive : icons.stateInactive\n }}</mat-icon></mat-cell>\n </ng-container>\n <ng-container matColumnDef=\"name\">\n <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.username' | translate\n }}</mat-header-cell>\n <mat-cell *matCellDef=\"let element\"> {{element.username}} </mat-cell>\n </ng-container>\n <ng-container matColumnDef=\"firstName\">\n <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.firstname' | translate\n }}</mat-header-cell>\n <mat-cell *matCellDef=\"let element\"> {{element.firstName}} </mat-cell>\n </ng-container>\n <ng-container matColumnDef=\"lastName\">\n <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.lastname' | translate\n }}</mat-header-cell>\n <mat-cell *matCellDef=\"let element\"> {{element.lastName}} </mat-cell>\n </ng-container>\n <ng-container matColumnDef=\"email\">\n <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.email' | translate\n }}</mat-header-cell>\n <mat-cell *matCellDef=\"let element\"> {{element.email}} </mat-cell>\n </ng-container>\n <ng-container matColumnDef=\"id\">\n <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.id' | translate\n }}</mat-header-cell>\n <mat-cell *matCellDef=\"let element\"> {{element.id}} </mat-cell>\n </ng-container>\n <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n <mat-row \n *matRowDef=\"let row; columns: displayedColumns;\" \n (click.single)=\"select(row)\" \n [class.selected-row]=\"this.isSelected(row)\" class=\"user-row\">\n </mat-row>\n </mat-table>\n </ymt-pane-body>\n </ng-template>\n <ng-template ymtLayoutPane role=\"details\">\n @let selectedUser = selection().selected.at(0);\n <ymt-pane-header [icon]=\"'person'\" [title]=\"'yuv.app.user-management.users.details.title' | translate\" [subtitle]=\"selectedUser?.id || ('yuv.app.user-management.users.details.empty' | translate)\" [actions]=\"listActions\"></ymt-pane-header>\n <ymt-pane-body>\n <ymusrmgmt-user-details [userId]=\"selectedUser?.id\" />\n </ymt-pane-body>\n </ng-template>\n</ymt-master-details-layout>\n\n<ng-template #masterPaneActions>\n @if (pagination) {\n <mat-paginator class=\"paginator\" [length]=\"pagination.total\" [pageSize]=\"getPageSize()\" aria-label=\"Select page\" (page)=\"onChangePage($event)\" hidePageSize></mat-paginator>\n }\n <button ymt-icon-button (click)=\"refresh(true)\" [matTooltip]=\"'yuv.app.user-management.users.navigation.refresh.tooltip' | translate\"><mat-icon>{{icons.refresh}}</mat-icon></button>\n</ng-template>\n\n<ng-template #listActions>\n <yuv-overflow-menu [menuItems]=\"actions\"></yuv-overflow-menu>\n</ng-template>", styles: [":host{--mat-table-row-item-outline-color: var(--ymt-outline-variant);height:100%;overflow:hidden;display:flex;flex-flow:column}:host ymt-master-details-layout{height:100%;padding:1rem}:host .user-table{overflow:auto;height:100%}:host .user-row:hover{background-color:var(--ymt-hover-background)}:host .selected-row{background-color:var(--ymt-selection-background)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: SimpleSearchComponent, selector: "yuv-simple-search", inputs: ["query"], outputs: ["querySubmit", "clearInput", "targetSelectionChanged", "queryChange", "typeAggregation"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: ClickDoubleDirective, selector: "[click.single],[click.double]", inputs: ["debounceTime"], outputs: ["click.double", "click.single"] }, { kind: "component", type: UserDetailsComponent, selector: "ymusrmgmt-user-details", inputs: ["userId"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: YmtLayoutModule }, { kind: "component", type: i6.MasterDetailsLayoutComponent, selector: "ymt-master-details-layout", inputs: ["layoutSettingsID", "options", "direction", "gutterSize", "detailsActive"], outputs: ["detailsActiveChange"] }, { kind: "directive", type: i6.YmtLayoutPaneDirective, selector: "[ymtLayoutPane]", inputs: ["role", "topBarActions"] }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i7$1.YmtPaneHeaderComponent, selector: "ymt-pane-header", inputs: ["title", "icon", "subtitle", "actions", "badges"] }, { kind: "component", type: i7$1.YmtPaneBodyComponent, selector: "ymt-pane-body" }, { kind: "ngmodule", type: YuvClientShellModule }, { kind: "directive", type: i8.YuvAppHeaderSlotDirective, selector: "ng-template[yuvAppHeaderSlot]", inputs: ["yuvAppHeaderSlot"] }, { kind: "ngmodule", type: YuvOverflowMenuModule }, { kind: "component", type: i9.OverflowMenuComponent, selector: "yuv-overflow-menu", inputs: ["overflowIcon", "groupLabels", "menuItems", "vertical"] }] });
|
|
790
788
|
}
|
|
791
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
789
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: YuvUsersPageComponent, decorators: [{
|
|
792
790
|
type: Component,
|
|
793
791
|
args: [{ selector: 'ymusrmgmt-users', standalone: true, imports: [
|
|
794
792
|
CommonModule,
|
|
795
793
|
MatButtonModule,
|
|
796
794
|
MatIconModule,
|
|
797
|
-
MatTooltipModule,
|
|
798
|
-
MatTableModule,
|
|
799
795
|
MatPaginatorModule,
|
|
800
796
|
MatSortModule,
|
|
797
|
+
MatTableModule,
|
|
798
|
+
MatTabsModule,
|
|
799
|
+
MatTooltipModule,
|
|
801
800
|
RouterModule,
|
|
802
801
|
TranslateModule,
|
|
803
802
|
SimpleSearchComponent,
|
|
@@ -812,7 +811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
812
811
|
YuvOverflowMenuModule,
|
|
813
812
|
], host: {
|
|
814
813
|
'[class.busy]': '!busy()',
|
|
815
|
-
}, template: "<ng-template yuvAppHeaderSlot=\"actions\">\n <button ymtButton=\"primary\" (click)=\"createNewUser()\" [matTooltip]=\"'yuv.app.user-management.users.action.create.description' | translate\">\n <mat-icon>{{icons.actionCreateNewUser}}</mat-icon>{{'yuv.app.user-management.users.action.create.label' | translate }}\n </button>\n</ng-template>\n\n<ng-template yuvAppHeaderSlot=\"search\">\n <yuv-simple-search (queryChange)=\"onQueryChange($event)\"></yuv-simple-search>\n</ng-template>\n\n<ymt-master-details-layout [yuvBusyOverlay]=\"busy()\"
|
|
814
|
+
}, template: "<ng-template yuvAppHeaderSlot=\"actions\">\n <button ymtButton=\"primary\" (click)=\"createNewUser()\" [matTooltip]=\"'yuv.app.user-management.users.action.create.description' | translate\">\n <mat-icon>{{icons.actionCreateNewUser}}</mat-icon>{{'yuv.app.user-management.users.action.create.label' | translate }}\n </button>\n</ng-template>\n\n<ng-template yuvAppHeaderSlot=\"search\">\n <yuv-simple-search (queryChange)=\"onQueryChange($event)\"></yuv-simple-search>\n</ng-template>\n\n<ymt-master-details-layout [yuvBusyOverlay]=\"busy()\" [(detailsActive)]=\"detailsActive\" [options]=\"layoutOptions\" [layoutSettingsID]=\"layoutSettingsID\">\n <ng-template ymtLayoutPane role=\"master\" [topBarActions]=\"masterPaneActions\">\n <ymt-pane-body>\n <mat-table [dataSource]=\"dataSource()\" class=\"user-table mat-elevation-z8\" row>\n <ng-container matColumnDef=\"state\">\n <mat-header-cell *matHeaderCellDef />\n <mat-cell *matCellDef=\"let element\"><mat-icon>{{ element.enabled ? icons.stateActive : icons.stateInactive\n }}</mat-icon></mat-cell>\n </ng-container>\n <ng-container matColumnDef=\"name\">\n <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.username' | translate\n }}</mat-header-cell>\n <mat-cell *matCellDef=\"let element\"> {{element.username}} </mat-cell>\n </ng-container>\n <ng-container matColumnDef=\"firstName\">\n <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.firstname' | translate\n }}</mat-header-cell>\n <mat-cell *matCellDef=\"let element\"> {{element.firstName}} </mat-cell>\n </ng-container>\n <ng-container matColumnDef=\"lastName\">\n <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.lastname' | translate\n }}</mat-header-cell>\n <mat-cell *matCellDef=\"let element\"> {{element.lastName}} </mat-cell>\n </ng-container>\n <ng-container matColumnDef=\"email\">\n <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.email' | translate\n }}</mat-header-cell>\n <mat-cell *matCellDef=\"let element\"> {{element.email}} </mat-cell>\n </ng-container>\n <ng-container matColumnDef=\"id\">\n <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.id' | translate\n }}</mat-header-cell>\n <mat-cell *matCellDef=\"let element\"> {{element.id}} </mat-cell>\n </ng-container>\n <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n <mat-row \n *matRowDef=\"let row; columns: displayedColumns;\" \n (click.single)=\"select(row)\" \n [class.selected-row]=\"this.isSelected(row)\" class=\"user-row\">\n </mat-row>\n </mat-table>\n </ymt-pane-body>\n </ng-template>\n <ng-template ymtLayoutPane role=\"details\">\n @let selectedUser = selection().selected.at(0);\n <ymt-pane-header [icon]=\"'person'\" [title]=\"'yuv.app.user-management.users.details.title' | translate\" [subtitle]=\"selectedUser?.id || ('yuv.app.user-management.users.details.empty' | translate)\" [actions]=\"listActions\"></ymt-pane-header>\n <ymt-pane-body>\n <ymusrmgmt-user-details [userId]=\"selectedUser?.id\" />\n </ymt-pane-body>\n </ng-template>\n</ymt-master-details-layout>\n\n<ng-template #masterPaneActions>\n @if (pagination) {\n <mat-paginator class=\"paginator\" [length]=\"pagination.total\" [pageSize]=\"getPageSize()\" aria-label=\"Select page\" (page)=\"onChangePage($event)\" hidePageSize></mat-paginator>\n }\n <button ymt-icon-button (click)=\"refresh(true)\" [matTooltip]=\"'yuv.app.user-management.users.navigation.refresh.tooltip' | translate\"><mat-icon>{{icons.refresh}}</mat-icon></button>\n</ng-template>\n\n<ng-template #listActions>\n <yuv-overflow-menu [menuItems]=\"actions\"></yuv-overflow-menu>\n</ng-template>", styles: [":host{--mat-table-row-item-outline-color: var(--ymt-outline-variant);height:100%;overflow:hidden;display:flex;flex-flow:column}:host ymt-master-details-layout{height:100%;padding:1rem}:host .user-table{overflow:auto;height:100%}:host .user-row:hover{background-color:var(--ymt-hover-background)}:host .selected-row{background-color:var(--ymt-selection-background)!important}\n"] }]
|
|
816
815
|
}], propDecorators: { userDetailsComponent: [{
|
|
817
816
|
type: ViewChild,
|
|
818
817
|
args: [UserDetailsComponent]
|