@yuuvis/client-framework 2.5.0 → 2.5.1

package/fesm2022/yuuvis-client-framework-forms.mjs

@@ -13,7 +13,7 @@ import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
 import * as i4 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
 import * as i2 from '@yuuvis/client-core';
-import { SystemService, Situation, TranslateModule, TranslateService, Operator, OperatorLabel, Utils, LocaleNumberPipe, FileSizePipe, Classification, UserService, IdmService, YuvUser, SearchUtils, LocaleDatePipe, ClassificationPrefix } from '@yuuvis/client-core';
+import { SystemService, Situation, TranslateModule, TranslateService, Operator, OperatorLabel, Utils, LocaleNumberPipe, FileSizePipe, Classification, IdmService, UserService, SearchUtils, LocaleDatePipe, ClassificationPrefix } from '@yuuvis/client-core';
 import { YUV_ICONS } from '@yuuvis/client-framework/icons';
 import { MetadataFormFieldComponent, ObjectMetadataElementLabelDirective } from '@yuuvis/client-framework/metadata-form';
 import { RendererDirective } from '@yuuvis/client-framework/renderer';
@@ -1010,16 +1010,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Input
             }] } });
 
-// function mapOrginationNode<T extends { id: string; title: string }, U extends { user: { id: string } }>(node: T[], innerValue: U[]) {
-//   return node
-//     .filter((e) => !innerValue?.some((value) => value.user.id === e.id))
-//     .map((user) => ({ label: user.title, value: { user, state: {} } }) as AutocompleteItem);
-// }
-const mapOrginationNode = (innerValue) => map$1((node) => node
-    .filter((e) => !innerValue?.some((value) => value.user.id === e.id))
-    .map((user) => ({ label: user.title, value: { user, state: {} } })));
+const mapOrganizationNode = (innerValue) => map$1((node) => node
+    .filter((e) => !innerValue?.some((value) => value?.id === e.id))
+    .map((e) => ({
+    label: e.title,
+    value: {
+        id: e.id,
+        title: e.title,
+        type: 'user' in e ? 'user' : 'role'
+    }
+})));
 /**
- * Creates form input for organisation values.
+ * Creates form input for organization values.
  *
  * @example
  * <yuv-organization [multiselect]="true"></yuv-organization>
@@ -1028,8 +1030,8 @@ class OrganizationComponent extends AbstractMatFormField {
     constructor() {
         super(...arguments);
         this.#system = inject(SystemService);
-        this.#userService = inject(UserService);
         this.#idmService = inject(IdmService);
+        this.#userService = inject(UserService);
         this.#dRef = inject(DestroyRef);
         this.translate = inject(TranslateService);
         this.minLength = 2;
@@ -1049,25 +1051,31 @@ class OrganizationComponent extends AbstractMatFormField {
         /**
          * Additional semantics for the form element.
          */
-        this.#organizationType = Classification.STRING_ORGANIZATION;
+        // #organizationType: Classification = Classification.STRING_ORGANIZATION;
+        this.#organizationType = computed(() => {
+            const c = this.classifications();
+            if (c?.length) {
+                const classifications = this.#system.getClassifications(c);
+                if (classifications.has(Classification.STRING_ORGANIZATION_SET)) {
+                    return Classification.STRING_ORGANIZATION_SET;
+                }
+            }
+            return Classification.STRING_ORGANIZATION;
+        });
         this.classifications = input(undefined);
         this.#filterRoles = computed(() => {
+            const t = this.#organizationType();
             const c = this.classifications();
             if (c?.length) {
                 const classifications = this.#system.getClassifications(c);
-                if (classifications.has(Classification.STRING_ORGANIZATION)) {
-                    this.#organizationType = Classification.STRING_ORGANIZATION;
+                if (t === Classification.STRING_ORGANIZATION) {
                     return classifications.get(Classification.STRING_ORGANIZATION).options;
                 }
-                else if (classifications.has(Classification.STRING_ORGANIZATION_SET)) {
-                    this.#organizationType = Classification.STRING_ORGANIZATION_SET;
+                else if (t === Classification.STRING_ORGANIZATION_SET) {
                     return classifications.get(Classification.STRING_ORGANIZATION_SET).options;
                 }
-                return [];
-            }
-            else {
-                return [];
             }
+            return [];
         });
         /**
          * Will prevent the input from being changed (default: false)
@@ -1086,8 +1094,8 @@ class OrganizationComponent extends AbstractMatFormField {
         this.propagateChange = (_) => { };
     }
     #system;
-    #userService;
     #idmService;
+    #userService;
     #dRef;
     set innerValue(iv) {
         this._innerValue = iv || [];
@@ -1098,13 +1106,14 @@ class OrganizationComponent extends AbstractMatFormField {
     /**
      * Additional semantics for the form element.
      */
+    // #organizationType: Classification = Classification.STRING_ORGANIZATION;
     #organizationType;
     #filterRoles;
     writeValue(value) {
-        if (this.#organizationType === Classification.STRING_ORGANIZATION) {
+        if (this.#organizationType() === Classification.STRING_ORGANIZATION) {
             if (value) {
                 this.value = value;
-                this.resolveFn(value);
+                this.resolveFn(Array.isArray(value) ? value : [value]);
             }
             else {
                 this.value = null;
@@ -1112,12 +1121,8 @@ class OrganizationComponent extends AbstractMatFormField {
             }
         }
         else {
-            const val = Array.isArray(value) ? value.map((v) => (typeof v === 'string' ? JSON.parse(v) : v)) : value ? [JSON.parse(value)] : [];
-            this.innerValue = val;
-            this.value = val.map((v) => JSON.stringify(v));
-            if (!this.multiselect) {
-                this.value = this.value[0] || null;
-            }
+            this.value = value;
+            this.resolveFn(Array.isArray(value) ? value : [value]);
         }
     }
     registerOnChange(fn) {
@@ -1138,52 +1143,54 @@ class OrganizationComponent extends AbstractMatFormField {
         }
     }
     #getPropagateValue() {
-        const value = this.innerValue.map((v) => (this.withMetadata() ? { id: v.user.id, title: v.user.title } : v.user.id));
+        const value = this.innerValue.map((v) => (this.withMetadata() ? { id: v.id, title: v.title } : v.id));
         return this.multiselect() ? value : value[0];
     }
     resolveFn(value) {
-        const obs = (value instanceof Array ? value : [value]).map((v) => {
-            const valueID = typeof v === 'string' ? v : v.id;
-            const match = this.innerValue.find((iv) => iv.user.id === valueID);
-            return match
-                ? of(match)
-                : this.#userService.getUserById(valueID).pipe(map$1((res) => ({
-                    user: res,
-                    state: {}
-                })), catchError((e) => {
-                    const user = new YuvUser({ id: typeof v === 'string' ? v : v.id });
-                    user.title = typeof v === 'string' ? v : v.title;
-                    return of({
-                        user,
-                        state: {
-                            notFound: e.status === 404
-                        },
-                        titleString: e.status === 404 ? this.translate.instant('yuv.form.element.organization.user.not-found') : undefined
-                    });
-                }));
-        });
-        return forkJoin(obs).subscribe((data) => {
+        // check if entry is a user
+        const userRegExp = new RegExp('^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$');
+        const tasks = value.map((v) => v.match(userRegExp)
+            ? this.#idmService.getUserById(v).pipe(map$1((res) => {
+                return res
+                    ? {
+                        id: res.id,
+                        title: res.title,
+                        type: 'user'
+                    }
+                    : {
+                        id: v,
+                        title: v,
+                        type: 'user',
+                        notFound: true
+                    };
+            }))
+            : of({
+                id: v,
+                title: v,
+                type: 'role'
+            }));
+        forkJoin(tasks).subscribe((data) => {
             this.innerValue = data;
-            const mapped = this.innerValue.map((u) => ({
-                label: u.user.title,
-                value: u
+            const mapped = this.innerValue.map((n) => ({
+                label: n.title,
+                value: n
             }));
             this.acFormControl.setValue(this.multiselect() ? mapped : [mapped[0]], { emitEvent: false });
             this.acFormControl.updateValueAndValidity({ emitEvent: false });
         });
     }
-    #resolveOrgination(query, excludeMe, filterRoles) {
-        return this.#userService.queryUser(query, excludeMe, filterRoles).pipe(mapOrginationNode(this.innerValue), catchError(() => of([])));
+    #resolveOrganization(query, excludeMe, filterRoles) {
+        return this.#userService.queryUser(query, excludeMe, filterRoles).pipe(mapOrganizationNode(this.innerValue), catchError(() => of([])));
     }
-    #resolveOrginationSet(query, filterRoles) {
-        return this.#idmService.queryOrganizationEntity(query, filterRoles).pipe(mapOrginationNode(this.innerValue), catchError(() => of([])));
+    #resolveOrganizationSet(query, filterRoles) {
+        return this.#idmService.queryOrganizationEntity(query, filterRoles).pipe(mapOrganizationNode(this.innerValue), catchError(() => of([])));
     }
     autocompleteFn(query) {
         if (query.length >= this.minLength) {
             this.busy.set(true);
-            (this.#organizationType === Classification.STRING_ORGANIZATION
-                ? this.#resolveOrgination(query, this.excludeMe(), this.#filterRoles())
-                : this.#resolveOrginationSet(query, this.#filterRoles())).subscribe({
+            (this.#organizationType() === Classification.STRING_ORGANIZATION
+                ? this.#resolveOrganization(query, this.excludeMe(), this.#filterRoles())
+                : this.#resolveOrganizationSet(query, this.#filterRoles())).subscribe({
                 next: (res) => {
                     this.busy.set(false);
                     this.autocompleteRes = res;
@@ -1216,11 +1223,11 @@ class OrganizationComponent extends AbstractMatFormField {
         super.onNgOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OrganizationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: OrganizationComponent, isStandalone: true, selector: "yuv-organization", inputs: { situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, excludeMe: { classPropertyName: "excludeMe", publicName: "excludeMe", isSignal: true, isRequired: false, transformFunction: null }, withMetadata: { classPropertyName: "withMetadata", publicName: "withMetadata", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: OrganizationComponent }], usesInheritance: true, ngImport: i0, template: "<yuv-autocomplete\n  [required]=\"required\"\n  [busy]=\"busy()\"\n  [formControl]=\"acFormControl\"\n  #autocomplete\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly()\"\n  [autocompleteValues]=\"autocompleteRes\"\n  [forceSelection]=\"true\"\n  [distinctValues]=\"true\"\n  (autocompleteFnc)=\"autocompleteFn($event)\"\n  [multiple]=\"true\"\n  [maxItems]=\"multiselect() ? -1 : 1\"\n>\n  <!-- template for item inside the dropdown -->\n  <ng-template #optionTemplate let-item>\n    @if (item.value.user) {\n      <span class=\"chip\">{{ item.value.user.title }}</span>\n    }\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    @if (item.value.user) {\n      <span class=\"chip\" [ngClass]=\"{ notFound: item.value.state.notFound }\" [matTooltip]=\"item.value.titleString\">\n        {{ item.value.user.title || '...' }}\n      </span>\n    }\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.organization.classify.icon.title' | translate\">\n  {{ multiselect() ? 'group' : 'person' }}\n</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host .chip.notFound{color:var(--ymt-on-danger-container);text-decoration:line-through}:host .chip.notFound:before{content:\"!\";display:inline-block;background-color:var(--ymt-danger-container);color:#fff;border-radius:2px;padding-inline:.3em;text-decoration:none;margin-inline-end:.75em}:host yuv-autocomplete{flex:1}:host mat-icon{color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: YuvAutocompleteModule }, { kind: "component", type: i3$1.AutocompleteComponent, selector: "yuv-autocomplete", inputs: ["ariaLabel", "busy", "multiple", "distinctValues", "addOnBlur", "minLength", "maxItems", "forceSelection", "autocompleteValues"], outputs: ["autocompleteFnc", "acBlur"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: OrganizationComponent, isStandalone: true, selector: "yuv-organization", inputs: { situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, excludeMe: { classPropertyName: "excludeMe", publicName: "excludeMe", isSignal: true, isRequired: false, transformFunction: null }, withMetadata: { classPropertyName: "withMetadata", publicName: "withMetadata", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: OrganizationComponent }], usesInheritance: true, ngImport: i0, template: "<yuv-autocomplete\n  [required]=\"required\"\n  [busy]=\"busy()\"\n  [formControl]=\"acFormControl\"\n  #autocomplete\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly()\"\n  [autocompleteValues]=\"autocompleteRes\"\n  [forceSelection]=\"true\"\n  [distinctValues]=\"true\"\n  (autocompleteFnc)=\"autocompleteFn($event)\"\n  [multiple]=\"true\"\n  [maxItems]=\"multiselect() ? -1 : 1\"\n>\n  <!-- template for item inside the dropdown -->\n  <ng-template #optionTemplate let-item>\n    @if (item.value) {\n      <span class=\"chip\">{{ item.value.title }}</span>\n    }\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    @if (item.value) {\n      <span class=\"chip\" [ngClass]=\"{ notFound: item.value.notFound }\" [matTooltip]=\"item.value.titleString\">\n        {{ item.value.title || '...' }}\n      </span>\n    }\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.organization.classify.icon.title' | translate\">\n  {{ multiselect() ? 'group' : 'person' }}\n</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host .chip.notFound{color:var(--ymt-on-danger-container);text-decoration:line-through}:host .chip.notFound:before{content:\"!\";display:inline-block;background-color:var(--ymt-danger-container);color:#fff;border-radius:2px;padding-inline:.3em;text-decoration:none;margin-inline-end:.75em}:host yuv-autocomplete{flex:1}:host mat-icon{color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: YuvAutocompleteModule }, { kind: "component", type: i3$1.AutocompleteComponent, selector: "yuv-autocomplete", inputs: ["ariaLabel", "busy", "multiple", "distinctValues", "addOnBlur", "minLength", "maxItems", "forceSelection", "autocompleteValues"], outputs: ["autocompleteFnc", "acBlur"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OrganizationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-organization', standalone: true, imports: [CommonModule, FormsModule, YuvAutocompleteModule, MatTooltipModule, MatIconModule, ReactiveFormsModule, TranslateModule], providers: [{ provide: MatFormFieldControl, useExisting: OrganizationComponent }], template: "<yuv-autocomplete\n  [required]=\"required\"\n  [busy]=\"busy()\"\n  [formControl]=\"acFormControl\"\n  #autocomplete\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly()\"\n  [autocompleteValues]=\"autocompleteRes\"\n  [forceSelection]=\"true\"\n  [distinctValues]=\"true\"\n  (autocompleteFnc)=\"autocompleteFn($event)\"\n  [multiple]=\"true\"\n  [maxItems]=\"multiselect() ? -1 : 1\"\n>\n  <!-- template for item inside the dropdown -->\n  <ng-template #optionTemplate let-item>\n    @if (item.value.user) {\n      <span class=\"chip\">{{ item.value.user.title }}</span>\n    }\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    @if (item.value.user) {\n      <span class=\"chip\" [ngClass]=\"{ notFound: item.value.state.notFound }\" [matTooltip]=\"item.value.titleString\">\n        {{ item.value.user.title || '...' }}\n      </span>\n    }\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.organization.classify.icon.title' | translate\">\n  {{ multiselect() ? 'group' : 'person' }}\n</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host .chip.notFound{color:var(--ymt-on-danger-container);text-decoration:line-through}:host .chip.notFound:before{content:\"!\";display:inline-block;background-color:var(--ymt-danger-container);color:#fff;border-radius:2px;padding-inline:.3em;text-decoration:none;margin-inline-end:.75em}:host yuv-autocomplete{flex:1}:host mat-icon{color:var(--ymt-text-color-subtle)}\n"] }]
+            args: [{ selector: 'yuv-organization', standalone: true, imports: [CommonModule, FormsModule, YuvAutocompleteModule, MatTooltipModule, MatIconModule, ReactiveFormsModule, TranslateModule], providers: [{ provide: MatFormFieldControl, useExisting: OrganizationComponent }], template: "<yuv-autocomplete\n  [required]=\"required\"\n  [busy]=\"busy()\"\n  [formControl]=\"acFormControl\"\n  #autocomplete\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly()\"\n  [autocompleteValues]=\"autocompleteRes\"\n  [forceSelection]=\"true\"\n  [distinctValues]=\"true\"\n  (autocompleteFnc)=\"autocompleteFn($event)\"\n  [multiple]=\"true\"\n  [maxItems]=\"multiselect() ? -1 : 1\"\n>\n  <!-- template for item inside the dropdown -->\n  <ng-template #optionTemplate let-item>\n    @if (item.value) {\n      <span class=\"chip\">{{ item.value.title }}</span>\n    }\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    @if (item.value) {\n      <span class=\"chip\" [ngClass]=\"{ notFound: item.value.notFound }\" [matTooltip]=\"item.value.titleString\">\n        {{ item.value.title || '...' }}\n      </span>\n    }\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.organization.classify.icon.title' | translate\">\n  {{ multiselect() ? 'group' : 'person' }}\n</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host .chip.notFound{color:var(--ymt-on-danger-container);text-decoration:line-through}:host .chip.notFound:before{content:\"!\";display:inline-block;background-color:var(--ymt-danger-container);color:#fff;border-radius:2px;padding-inline:.3em;text-decoration:none;margin-inline-end:.75em}:host yuv-autocomplete{flex:1}:host mat-icon{color:var(--ymt-text-color-subtle)}\n"] }]
         }] });
 
 /**