Merge pull request #15308 from abpframework/Issue-15246

check group length to add ResetToDefault button

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

@@ -5,113 +5,124 @@
 
   <ng-template #abpBody>
     <div class="row">
-      <div class="col-md-4">
-        <ul
-          ngbNav
-          #nav="ngbNav"
-          [(activeId)]="selectedGroupDisplayName"
-          class="nav-pills"
-          orientation="vertical"
-        >
-          <li
-            *ngFor="let group of groups; trackBy: track.by('name')"
-            [ngbNavItem]="group.displayName"
+      <ng-container *ngIf="groups.length">
+        <div class="col-md-4">
+          <ul
+            ngbNav
+            #nav="ngbNav"
+            [(activeId)]="selectedGroupDisplayName"
+            class="nav-pills"
+            orientation="vertical"
           >
-            <a ngbNavLink>{{ group.displayName }}</a>
-            <ng-template ngbNavContent>
-              <h4>{{ selectedGroupDisplayName }}</h4>
-              <hr class="mt-2 mb-3" />
+            <li
+              *ngFor="let group of groups; trackBy: track.by('name')"
+              [ngbNavItem]="group.displayName"
+            >
+              <a ngbNavLink>{{ group.displayName }}</a>
+              <ng-template ngbNavContent>
+                <h4>{{ selectedGroupDisplayName }}</h4>
+                <hr class="mt-2 mb-3" />
 
-              <div
-                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()"
-              >
-                <ng-container *ngSwitchCase="valueTypes.ToggleStringValueType">
-                  <div class="form-check">
-                    <input
-                      class="form-check-input"
-                      type="checkbox"
-                      [id]="feature.name"
-                      [(ngModel)]="feature.value"
-                      (ngModelChange)="onCheckboxClick($event, feature)"
-                    />
+                <div
+                  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()"
+                >
+                  <ng-container *ngSwitchCase="valueTypes.ToggleStringValueType">
+                    <div class="form-check">
+                      <input
+                        class="form-check-input"
+                        type="checkbox"
+                        [id]="feature.name"
+                        [(ngModel)]="feature.value"
+                        (ngModelChange)="onCheckboxClick($event, feature)"
+                      />
 
-                    <label class="form-check-label" [htmlFor]="feature.name">{{
-                      feature.displayName
-                    }}</label>
-                    <ng-container
-                      *ngTemplateOutlet="descTmp; context: { $implicit: feature.description }"
-                    ></ng-container>
-                  </div>
-                </ng-container>
-                <ng-container *ngSwitchCase="valueTypes.FreeTextStringValueType">
-                  <div class="mb-3 form-group">
-                    <label [htmlFor]="feature.name" class="form-label">{{
-                      feature.displayName
-                    }}</label>
-                    <input
-                      class="form-control"
-                      type="text"
-                      [id]="feature.name"
-                      [(ngModel)]="feature.value"
-                      [abpFeatureManagementFreeText]="feature"
-                    />
-
-                    <ng-container
-                      *ngTemplateOutlet="descTmp; context: { $implicit: feature.description }"
-                    ></ng-container>
-                  </div>
-                </ng-container>
-                <ng-container *ngSwitchCase="valueTypes.SelectionStringValueType">
-                  <ng-container *ngIf="feature.valueType.itemSource?.items?.length">
+                      <label class="form-check-label" [htmlFor]="feature.name">{{
+                        feature.displayName
+                      }}</label>
+                      <ng-container
+                        *ngTemplateOutlet="descTmp; context: { $implicit: feature.description }"
+                      ></ng-container>
+                    </div>
+                  </ng-container>
+                  <ng-container *ngSwitchCase="valueTypes.FreeTextStringValueType">
                     <div class="mb-3 form-group">
                       <label [htmlFor]="feature.name" class="form-label">{{
                         feature.displayName
                       }}</label>
-                      <select class="form-select" [id]="feature.name" [(ngModel)]="feature.value">
-                        <option
-                          *ngFor="
-                            let item of feature.valueType.itemSource?.items;
-                            trackBy: track.by('value')
-                          "
-                          [ngValue]="item.value"
-                        >
-                          {{
-                            item.displayText?.resourceName + '::' + item.displayText?.name
-                              | abpLocalization
-                          }}
-                        </option>
-                      </select>
+                      <input
+                        class="form-control"
+                        type="text"
+                        [id]="feature.name"
+                        [(ngModel)]="feature.value"
+                        [abpFeatureManagementFreeText]="feature"
+                      />
+
                       <ng-container
                         *ngTemplateOutlet="descTmp; context: { $implicit: feature.description }"
                       ></ng-container>
                     </div>
                   </ng-container>
-                </ng-container>
-                <ng-container *ngSwitchDefault>{{ feature.displayName }}</ng-container>
-              </div>
-            </ng-template>
-          </li>
-        </ul>
-      </div>
+                  <ng-container *ngSwitchCase="valueTypes.SelectionStringValueType">
+                    <ng-container *ngIf="feature.valueType.itemSource?.items?.length">
+                      <div class="mb-3 form-group">
+                        <label [htmlFor]="feature.name" class="form-label">{{
+                          feature.displayName
+                        }}</label>
+                        <select class="form-select" [id]="feature.name" [(ngModel)]="feature.value">
+                          <option
+                            *ngFor="
+                              let item of feature.valueType.itemSource?.items;
+                              trackBy: track.by('value')
+                            "
+                            [ngValue]="item.value"
+                          >
+                            {{
+                              item.displayText?.resourceName + '::' + item.displayText?.name
+                                | abpLocalization
+                            }}
+                          </option>
+                        </select>
+                        <ng-container
+                          *ngTemplateOutlet="descTmp; context: { $implicit: feature.description }"
+                        ></ng-container>
+                      </div>
+                    </ng-container>
+                  </ng-container>
+                  <ng-container *ngSwitchDefault>{{ feature.displayName }}</ng-container>
+                </div>
+              </ng-template>
+            </li>
+          </ul>
+        </div>
 
-      <ng-template #descTmp let-description>
-        <small *ngIf="description" class="d-block form-text text-muted">{{ description }}</small>
-      </ng-template>
+        <ng-template #descTmp let-description>
+          <small *ngIf="description" class="d-block form-text text-muted">{{ description }}</small>
+        </ng-template>
 
-      <div class="col-md-8"><div [ngbNavOutlet]="nav"></div></div>
+        <div class="col-md-8"><div [ngbNavOutlet]="nav"></div></div>
+      </ng-container>
 
-      <div class="mx-3" *ngIf="!groups.length">
+      <div class="col" *ngIf="!groups.length">
         {{ 'AbpFeatureManagement::NoFeatureFoundMessage' | abpLocalization }}
       </div>
     </div>
   </ng-template>
 
   <ng-template #abpFooter>
-    <abp-button iconClass="fa fa-refresh" [disabled]="modalBusy" (click)="resetToDefault()">
+    <abp-button
+      *ngIf="groups.length"
+      iconClass="fa fa-refresh"
+      [disabled]="modalBusy"
+      (click)="resetToDefault()"
+    >
       {{ 'AbpFeatureManagement::ResetToDefault' | abpLocalization }}
     </abp-button>