RED-8342 - Component Editor not showing all values for a multi-value-component

src/lib/buttons/circle-button/circle-button.component.html

@@ -17,4 +17,6 @@
     </button>
 
     <div *ngIf="showDot" class="dot"></div>
+
+    <div *ngIf="dropdownButton" [class.disabled]="disabled" class="arrow-down"></div>
 </div>

src/lib/buttons/circle-button/circle-button.component.scss

@@ -1,4 +1,16 @@
 :host > div {
     width: var(--circle-button-size);
     height: var(--circle-button-size);
+
+    .arrow-down {
+        border: 5px solid transparent;
+        border-top-color: black;
+        position: fixed;
+        margin-left: 12px;
+        margin-top: -8px;
+
+        &.disabled {
+            border-top-color: var(--iqser-grey-3);
+        }
+    }
 }

src/lib/buttons/circle-button/circle-button.component.ts

@@ -33,6 +33,7 @@ export class CircleButtonComponent implements OnInit {
     @Input() helpModeButton = false;
     @Input() removeTooltip = false;
     @Input() isSubmit = false;
+    @Input() dropdownButton = false;
     @Input() size = 34;
     @Input() iconSize = 14;
     @Output() readonly action = new EventEmitter<MouseEvent>();

src/lib/inputs/editable-input/editable-input.component.html

@@ -1,6 +1,7 @@
 <ng-container *ngIf="!editing">
     <div *ngIf="showPreview">
-        {{ value }}
+        <li *ngIf="listValue; else simpleValue">{{ value }}</li>
+        <ng-template #simpleValue> {{ value }} </ng-template>
     </div>
 
     <div class="flex">
@@ -35,8 +36,8 @@
                     [placeholder]="placeholder"
                     [id]="id"
                     name="name"
-                    [style.width]="this.parentDimensions.width + 'px'"
+                    [style.width]="this.parentDimensions?.width + 'px'"
-                    [style.height]="this.parentDimensions.height + 'px'"
+                    [style.height]="this.parentDimensions?.height + 'px'"
                 ></textarea>
             </ng-template>
         </div>

src/lib/inputs/editable-input/editable-input.component.scss

@@ -18,3 +18,7 @@ textarea {
     margin: 0;
     min-height: 0;
 }
+
+form {
+    width: 100%;
+}

src/lib/inputs/editable-input/editable-input.component.ts

@@ -24,6 +24,8 @@ export class EditableInputComponent implements OnChanges {
     @Input() canEdit = true;
     @Input() buttonsType: CircleButtonType = CircleButtonTypes.default;
     @Input() helpModeKey: string = '';
+    @Input() lastChild = false;
+    @Input() listValue = false;
     @Output() readonly save = new EventEmitter<string>();
     parentDimensions?: { width: number; height: number };
     newValue = '';
@@ -44,12 +46,10 @@ export class EditableInputComponent implements OnChanges {
         if (changes['value']) {
             this.editing = false;
         }
-        if (changes['parentId']?.currentValue) {
+        setTimeout(() => {
-            setTimeout(() => {
+            const parent = document.getElementById(this.parentId as string) as HTMLElement;
-                const parent = document.getElementById(this.parentId as string) as HTMLElement;
+            this.parentDimensions = { width: parent.offsetWidth - 98, height: parent.offsetHeight - 16 };
-                this.parentDimensions = { width: parent.offsetWidth - 98, height: parent.offsetHeight - 16 };
+        }, 20);
-            }, 20);
-        }
     }
 
     saveValue(): void {

src/lib/services/toaster.service.ts

@@ -1,12 +1,12 @@
+import { HttpErrorResponse, HttpStatusCode } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { ActiveToast, ToastrService } from 'ngx-toastr';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { IndividualConfig } from 'ngx-toastr/toastr/toastr-config';
 import { NavigationStart, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
-import { HttpErrorResponse, HttpStatusCode } from '@angular/common/http';
+import { ActiveToast, ToastrService } from 'ngx-toastr';
+import { IndividualConfig } from 'ngx-toastr/toastr/toastr-config';
 import { filter, tap } from 'rxjs/operators';
 import { ErrorMessageService } from './error-message.service';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 const enum NotificationType {
     SUCCESS = 'SUCCESS',
@@ -26,6 +26,7 @@ export interface ToasterOptions extends IndividualConfig {
      */
     readonly params?: Record<string, string | number>;
     readonly actions?: ToasterActions[];
+    readonly useRaw?: boolean;
 }
 
 export interface ErrorToasterOptions extends ToasterOptions {
@@ -86,7 +87,7 @@ export class Toaster {
         notificationType = NotificationType.INFO,
         options?: Partial<ToasterOptions>,
     ): ActiveToast<unknown> {
-        const translatedMsg = this._translateService.instant(message, options?.params) as string;
+        const translatedMsg = options?.useRaw ? message : (this._translateService.instant(message, options?.params) as string);
 
         switch (notificationType) {
             case NotificationType.SUCCESS:

src/lib/users/guards/has-roles.guard.ts

@@ -1,17 +0,0 @@
-import { CanActivateFn, Router } from '@angular/router';
-import { inject } from '@angular/core';
-import { IqserUserService } from '../services/iqser-user.service';
-import { TenantsService } from '../../tenants';
-
-export function hasAnyRoleGuard(): CanActivateFn {
-    return async () => {
-        const router = inject(Router);
-        const activeTenantId = inject(TenantsService).activeTenantId;
-        const user = await inject(IqserUserService).loadCurrentUser();
-        if (user?.hasAnyRole) {
-            await router.navigate([`/${activeTenantId}/main`]);
-            return false;
-        }
-        return true;
-    };
-}

src/lib/users/guards/roles.guard.ts

@@ -0,0 +1,31 @@
+import { Router } from '@angular/router';
+import { inject } from '@angular/core';
+import { IqserUserService } from '../services/iqser-user.service';
+import { TenantsService } from '../../tenants';
+import { AsyncGuard } from '../../services';
+
+export function doesNotHaveAnyRole(): AsyncGuard {
+    return async () => {
+        const router = inject(Router);
+        const activeTenantId = inject(TenantsService).activeTenantId;
+        const user = await inject(IqserUserService).loadCurrentUser();
+        if (user?.hasAnyRole) {
+            await router.navigate([`/${activeTenantId}/main`]);
+            return false;
+        }
+        return true;
+    };
+}
+
+export function hasAnyRole(): AsyncGuard {
+    return async () => {
+        const router = inject(Router);
+        const activeTenantId = inject(TenantsService).activeTenantId;
+        const user = await inject(IqserUserService).loadCurrentUser();
+        if (!user?.hasAnyRole) {
+            await router.navigate([`/${activeTenantId}/auth-error`]);
+            return false;
+        }
+        return true;
+    };
+}

src/lib/users/index.ts

@@ -11,6 +11,6 @@ export * from './services/default-user.service';
 export * from './iqser-users.module';
 export * from './guards/iqser-auth-guard.service';
 export * from './guards/iqser-role-guard.service';
-export * from './guards/has-roles.guard';
+export * from './guards/roles.guard';
 export * from './components/user-button/user-button.component';
 export * from './components/initials-avatar/initials-avatar.component';