feat: minor ui improvements and checkbox interactions

npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html

@@ -23,20 +23,22 @@
               <hr class="mt-2 mb-3" />
 
               <div
-                class="row my-3"
+                class="mt-2"
                 *ngFor="let feature of features[group.name]; let i = index; trackBy: track.by('id')"
                 [ngStyle]="feature.style"
                 [ngSwitch]="feature.valueType?.name"
                 (keyup.enter)="save()"
               >
-                <div *ngSwitchCase="valueTypes.ToggleStringValueType">
+                <ng-container *ngSwitchCase="valueTypes.ToggleStringValueType">
                   <div class="custom-checkbox custom-control">
                     <input
                       class="custom-control-input"
                       type="checkbox"
                       [id]="feature.name"
                       [(ngModel)]="feature.value"
+                      (ngModelChange)="onCheckboxClick($event, feature)"
                     />
+
                     <label class="custom-control-label" [htmlFor]="feature.name">{{
                       feature.displayName
                     }}</label>
@@ -44,27 +46,32 @@
                       *ngTemplateOutlet="descTmp; context: { $implicit: feature.description }"
                     ></ng-container>
                   </div>
-                </div>
+                </ng-container>
-                <div *ngSwitchCase="valueTypes.FreeTextStringValueType">
+                <ng-container *ngSwitchCase="valueTypes.FreeTextStringValueType">
-                  <div class="form-group mb-0">
+                  <div class="form-group">
                     <label [htmlFor]="feature.name">{{ feature.displayName }}</label>
                     <input
                       class="form-control"
                       type="text"
                       [id]="feature.name"
                       [(ngModel)]="feature.value"
+                      [abpFreeText]="feature"
                     />
 
                     <ng-container
                       *ngTemplateOutlet="descTmp; context: { $implicit: feature.description }"
                     ></ng-container>
                   </div>
-                </div>
+                </ng-container>
-                <div *ngSwitchCase="valueTypes.SelectionStringValueType">
+                <ng-container *ngSwitchCase="valueTypes.SelectionStringValueType">
                   <ng-container *ngIf="feature.valueType.itemSource?.items?.length">
-                    <div class="form-group mb-0">
+                    <div class="form-group">
                       <label [htmlFor]="feature.name">{{ feature.displayName }}</label>
-                      <select class="form-control" [id]="feature.name" [(ngModel)]="feature.value">
+                      <select
+                        class="form-control custom-select"
+                        [id]="feature.name"
+                        [(ngModel)]="feature.value"
+                      >
                         <option
                           *ngFor="
                             let item of feature.valueType.itemSource?.items;
@@ -83,8 +90,8 @@
                       ></ng-container>
                     </div>
                   </ng-container>
-                </div>
+                </ng-container>
-                <div *ngSwitchDefault>{{ feature.displayName }}</div>
+                <ng-container *ngSwitchDefault>{{ feature.displayName }}</ng-container>
               </div>
             </ng-template>
           </li>

npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts

@@ -119,6 +119,70 @@ export class FeatureManagementComponent
         }
       });
   }
+
+  onCheckboxClick(val: boolean, feature: FeatureDto) {
+    if (val) {
+      this.checkToggleAncestors(feature);
+    } else {
+      this.uncheckToggleDescendants(feature);
+    }
+  }
+
+  private uncheckToggleDescendants(feature: FeatureDto) {
+    this.findAllDescendantsOfByType(feature, ValueTypes.ToggleStringValueType).forEach(node =>
+      this.setFeatureValue(node, false),
+    );
+  }
+
+  private checkToggleAncestors(feature: FeatureDto) {
+    this.findAllAncestorsOfByType(feature, ValueTypes.ToggleStringValueType).forEach(node =>
+      this.setFeatureValue(node, true),
+    );
+  }
+
+  private findAllAncestorsOfByType(feature: FeatureDto, type: ValueTypes) {
+    let parent = this.findParentByType(feature, type);
+    const ancestors = [];
+    while (parent) {
+      ancestors.push(parent);
+      parent = this.findParentByType(parent, type);
+    }
+    return ancestors;
+  }
+
+  private findAllDescendantsOfByType(feature: FeatureDto, type: ValueTypes) {
+    const descendants = [];
+    const queue = [feature];
+
+    while (queue.length) {
+      const node = queue.pop();
+      const newDescendants = this.findChildrenByType(node, type);
+      descendants.push(...newDescendants);
+      queue.push(...newDescendants);
+    }
+
+    return descendants;
+  }
+
+  private findParentByType(feature: FeatureDto, type: ValueTypes) {
+    return this.getCurrentGroup().find(
+      f => f.valueType.name === type && f.name === feature.parentName,
+    );
+  }
+
+  private findChildrenByType(feature: FeatureDto, type: ValueTypes) {
+    return this.getCurrentGroup().filter(
+      f => f.valueType.name === type && f.parentName === feature.name,
+    );
+  }
+
+  private getCurrentGroup() {
+    return this.features[this.selectedGroupDisplayName] ?? [];
+  }
+
+  private setFeatureValue(feature: FeatureDto, val: boolean) {
+    feature.value = val as any;
+  }
 }
 
 function mapFeatures(features: FeatureDto[], dir: LocaleDirection) {