bugfix

heinerwalter · Jul 2, 2024 · 04c0592 · 04c0592
1 parent 9c81abc
commit 04c0592
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 64 deletions.
diff --git a/...property-editor/src/lib/components/bootstrap/dropdown-button/dropdown-button.component.ts b/...property-editor/src/lib/components/bootstrap/dropdown-button/dropdown-button.component.ts
@@ -1,16 +1,16 @@
-import { Component, Input, Output, EventEmitter, HostBinding } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { PEGlobalFunctions } from '../../../controller/pe-global-functions';
 import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
 import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning';
 
 @Component({
   selector: 'ngb-dropdown-button',
   templateUrl: './dropdown-button.component.html',
-  styleUrls: ['./dropdown-button.component.scss']
+  styleUrls: ['./dropdown-button.component.scss'],
 })
 export class DropdownButtonComponent {
 
-  /** Id attribute of the dropdown button container element. */
+  /** ID attribute of the dropdown button container element. */
   @Input() public id: string = PEGlobalFunctions.generateRandomId();
 
   /**
@@ -28,7 +28,7 @@ export class DropdownButtonComponent {
    * Assign true, if the `.disabled` class should be added to the dropdown <button> element.
    */
   @Input() public disabled: boolean = false;
-  
+
   /**
    * FontAwesome icon displayed on the button.
    *
@@ -82,18 +82,16 @@ export class DropdownButtonComponent {
   @Input() public displayPropertyName: string | undefined = undefined;
 
   /**
-   * Evaluate this property name on the data source items to get a
-   * boolean value defining the active state of the dropdown menu items.
-   * Without this property no item is marked as active.
+   * List of item values which should be displayed as active in the dropdown menu.
+   * Without this property no item is displayed as active.
    */
-  @Input() public isActivePropertyName: string | undefined = undefined;
+  @Input() public activeItems: any[] = [];
 
   /**
-   * Evaluate this property name on the data source items to get a
-   * boolean value defining the disabled state of the dropdown menu items.
-   * Without this property no item is marked as disabled.
+   List of item values which should be displayed as disabled in the dropdown menu.
+   Without this property no item is displayed as disabled.
    */
-  @Input() public isDisabledPropertyName: string | undefined = undefined;
+  @Input() public disabledItems: any[] = [];
 
   /**
    * This event is emitted when the user clicked a dropdown menu item.
@@ -113,21 +111,21 @@ export class DropdownButtonComponent {
   /**
    * Determines whether the given data source `item` is active.
    * @param item An data source item.
-   * @see isActivePropertyName
    */
   protected isItemActive(item: any): boolean {
-    if (!item || typeof item !== 'object' || !this.isActivePropertyName) return false;
-    return !!item[this.isActivePropertyName];
+    if (!this.activeItems?.length) return false;
+    item = PEGlobalFunctions.evaluateValuePropertyName(this.valuePropertyName, item);
+    return this.activeItems.includes(item);
   }
 
   /**
    * Determines whether the given data source `item` is disabled.
    * @param item An data source item.
-   * @see isDisabledPropertyName
    */
   protected isItemDisabled(item: any): boolean {
-    if (!item || typeof item !== 'object' || !this.isDisabledPropertyName) return false;
-    return !!item[this.isDisabledPropertyName];
+    if (!this.disabledItems?.length) return false;
+    item = PEGlobalFunctions.evaluateValuePropertyName(this.valuePropertyName, item);
+    return this.disabledItems.includes(item);
   }
 
   /**

diff --git a/...ngx-property-editor/src/lib/components/input/dropdown-input/dropdown-input.component.html b/...ngx-property-editor/src/lib/components/input/dropdown-input/dropdown-input.component.html
@@ -21,8 +21,7 @@
                        [dataSource]="dataSource"
                        [valuePropertyName]="undefined"
                        [displayPropertyName]="displayPropertyName"
-                       [isActivePropertyName]="isActivePropertyName"
-                       [isDisabledPropertyName]="isDisabledPropertyName"
+                       [activeItems]="multiple ? value : value != undefined ? [value] : []"
                        (itemClick)="onItemClicked($event)">
   </ngb-dropdown-button>
 </ng-template>
diff --git a/...s/ngx-property-editor/src/lib/components/input/dropdown-input/dropdown-input.component.ts b/...s/ngx-property-editor/src/lib/components/input/dropdown-input/dropdown-input.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { InputBaseWithValueAndDataSource } from '../input-base';
 import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
 import { PEGlobalFunctions } from '../../../controller/pe-global-functions';
@@ -9,7 +9,7 @@ import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning';
   templateUrl: './dropdown-input.component.html',
   styleUrls: ['./dropdown-input.component.scss'],
 })
-export class DropdownInputComponent extends InputBaseWithValueAndDataSource<any | any[]> implements OnChanges {
+export class DropdownInputComponent extends InputBaseWithValueAndDataSource<any | any[]> {
 
   /**
    * Define the bootstrap button style class of the dropdown button (e.g. "btn-primary") here.
@@ -43,43 +43,10 @@ export class DropdownInputComponent extends InputBaseWithValueAndDataSource<any
   /** If true, multiple items can be selected. */
   @Input() public multiple: boolean = false;
 
-  /**
-   * Evaluate this property name on the data source items to get a
-   * boolean value defining the active state of the dropdown menu items.
-   * Without this property no item is marked as active.
-   */
-  protected readonly isActivePropertyName: string = '__isActive__';
-
-  /**
-   * Evaluate this property name on the data source items to get a
-   * boolean value defining the disabled state of the dropdown menu items.
-   * Without this property no item is marked as disabled.
-   */
-  @Input() public isDisabledPropertyName: string | undefined = undefined;
-
   public constructor() {
     super();
   }
 
-  public ngOnChanges(changes: SimpleChanges): void {
-    if (changes.hasOwnProperty('dataSource')) {
-      // Update the `isActive` property of all data source items
-      for (const item of this.dataSource || []) {
-        const itemValue: any = PEGlobalFunctions.evaluateValuePropertyName(this.valuePropertyName, item);
-
-        // Determine whether the current item is contained in the currently selected value (== is active)
-        let isActive: boolean = false;
-        if (this.multiple && Array.isArray(this.value)) {
-          isActive = this.value.includes(itemValue);
-        } else {
-          isActive = this.value == itemValue;
-        }
-
-        item[this.isActivePropertyName] = isActive;
-      }
-    }
-  }
-
   /**
    * This function is called when the user clicked a dropdown menu item.
    * @param item The data source item related to the clicked dropdown menu item.
@@ -99,23 +66,14 @@ export class DropdownInputComponent extends InputBaseWithValueAndDataSource<any
       if (index >= 0) {
         // Remove selection
         (this.value as any[]).splice(index, 1);
-        if (item && typeof item === 'object')
-          item[this.isActivePropertyName] = false;
       } else {
         // Add selection
         (this.value as any[]).push(itemValue);
-        if (item && typeof item === 'object')
-          item[this.isActivePropertyName] = true;
       }
 
     } else {
       // Single selected value
-      for (const i of this.dataSource || []) {
-        i[this.isActivePropertyName] = false;
-      }
       this.value = itemValue;
-      if (item && typeof item === 'object')
-        item[this.isActivePropertyName] = true;
     }
 
     this.emitValueChange(this.value);