refactor: change the permission directive usage

#6273
6 years ago · cd9f0332c6
8 changed files with 104 additions and 100 deletions
--- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
+++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
@ -51,14 +51,15 @@
              >
                {{ 'AbpIdentity::Permissions' | abpLocalization }}
              </button>
-              <button
-                *ngIf="!row.isStatic"
-                [abpPermission]="'AbpIdentity.Roles.Delete'"
-                ngbDropdownItem
-                (click)="delete(row.id, row.name)"
-              >
-                {{ 'AbpIdentity::Delete' | abpLocalization }}
-              </button>
+              <ng-container *ngIf="!row.isStatic">
+                <button
+                  *abpPermission="'AbpIdentity.Roles.Delete'"
+                  ngbDropdownItem
+                  (click)="delete(row.id, row.name)"
+                >
+                  {{ 'AbpIdentity::Delete' | abpLocalization }}
+                </button>
+              </ng-container>
            </div>
          </div>
        </ng-template>
--- a/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.html
+++ b/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.html
@ -16,20 +16,21 @@
      <div class="row">
        <div class="col-12 col-md-3">
          <ul class="nav flex-column nav-pills" id="nav-tab" role="tablist">
-            <li
-              *abpFor="let setting of settings; trackBy: trackByFn"
-              (click)="selected = setting"
-              class="nav-item pointer"
-              [abpPermission]="setting.requiredPolicy"
-            >
-              <a
-                class="nav-link"
-                [id]="setting.name + '-tab'"
-                role="tab"
-                [class.active]="setting.name === selected.name"
-                >{{ setting.name | abpLocalization }}</a
+            <ng-container *abpFor="let setting of settings; trackBy: trackByFn">
+              <li
+                (click)="selected = setting"
+                class="nav-item pointer"
+                *abpPermission="setting.requiredPolicy"
              >
-            </li>
+                <a
+                  class="nav-link"
+                  [id]="setting.name + '-tab'"
+                  role="tab"
+                  [class.active]="setting.name === selected.name"
+                  >{{ setting.name | abpLocalization }}</a
+                >
+              </li>
+            </ng-container>
          </ul>
        </div>
        <div class="col-12 col-md-9">
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html
@ -1,18 +1,16 @@
 <ul class="navbar-nav">
  <ng-container *ngFor="let item of navItems.items$ | async; trackBy: trackByFn">
-    <li
-      class="nav-item d-flex align-items-center"
-      *ngIf="item.visible()"
-      [abpPermission]="item.requiredPolicy"
-    >
-      <ng-container
-        *ngIf="item.component; else htmlTemplate"
-        [ngComponentOutlet]="item.component"
-      ></ng-container>
+    <ng-container *ngIf="item.visible()">
+      <li class="nav-item d-flex align-items-center" *abpPermission="item.requiredPolicy">
+        <ng-container
+          *ngIf="item.component; else htmlTemplate"
+          [ngComponentOutlet]="item.component"
+        ></ng-container>

-      <ng-template #htmlTemplate>
-        <div [innerHTML]="item.html" (click)="item.action ? item.action() : null"></div>
-      </ng-template>
-    </li>
+        <ng-template #htmlTemplate>
+          <div [innerHTML]="item.html" (click)="item.action ? item.action() : null"></div>
+        </ng-template>
+      </li>
+    </ng-container>
  </ng-container>
 </ul>
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html
@ -16,37 +16,40 @@
  </ng-template>

  <ng-template #dropdownLink let-route>
-    <li
-      #navbarRootDropdown
-      class="nav-item dropdown"
-      display="static"
-      *ngIf="route.children?.length"
-      [abpPermission]="route.requiredPolicy"
-      (click)="
-        navbarRootDropdown.expand
-          ? (navbarRootDropdown.expand = false)
-          : (navbarRootDropdown.expand = true)
-      "
-    >
-      <a
-        class="nav-link dropdown-toggle"
-        data-toggle="dropdown"
-        aria-haspopup="true"
-        aria-expanded="false"
-        href="javascript:void(0)"
-      >
-        <i *ngIf="route.iconClass" [ngClass]="route.iconClass"></i>
-        {{ route.name | abpLocalization }}
-      </a>
-      <div
-        #routeContainer
-        class="dropdown-menu border-0 shadow-sm"
-        (click)="$event.preventDefault(); $event.stopPropagation()"
-        [class.d-block]="smallScreen && navbarRootDropdown.expand"
+    <ng-container *ngIf="route.children?.length">
+      <li
+        #navbarRootDropdown
+        class="nav-item dropdown"
+        display="static"
+        *abpPermission="route.requiredPolicy"
+        (click)="
+          navbarRootDropdown.expand
+            ? (navbarRootDropdown.expand = false)
+            : (navbarRootDropdown.expand = true)
+        "
      >
-        <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: route }"></ng-container>
-      </div>
-    </li>
+        <a
+          class="nav-link dropdown-toggle"
+          data-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
+          href="javascript:void(0)"
+        >
+          <i *ngIf="route.iconClass" [ngClass]="route.iconClass"></i>
+          {{ route.name | abpLocalization }}
+        </a>
+        <div
+          #routeContainer
+          class="dropdown-menu border-0 shadow-sm"
+          (click)="$event.preventDefault(); $event.stopPropagation()"
+          [class.d-block]="smallScreen && navbarRootDropdown.expand"
+        >
+          <ng-container
+            *ngTemplateOutlet="forTemplate; context: { $implicit: route }"
+          ></ng-container>
+        </div>
+      </li>
+    </ng-container>
  </ng-template>

  <ng-template #forTemplate let-route>
@ -74,7 +77,7 @@
      #dropdownSubmenu="ngbDropdown"
      placement="right-top"
      [autoClose]="true"
-      [abpPermission]="child.requiredPolicy"
+      *abpPermission="child.requiredPolicy"
    >
      <div ngbDropdownToggle [class.dropdown-toggle]="false">
        <a
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
@ -1,4 +1,4 @@
-<div class="form-group" [abpPermission]="prop.permission" [ngSwitch]="getComponent(prop)">
+<div class="form-group" *abpPermission="prop.permission" [ngSwitch]="getComponent(prop)">
  <ng-template ngSwitchCase="input">
    <label [htmlFor]="prop.id">{{ prop.displayName | abpLocalization }} {{ asterisk }}</label>
    <input
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.html
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.html
@ -11,11 +11,7 @@
        *ngTemplateOutlet="actionsTemplate || gridActions; context: { $implicit: row, index: i }"
      ></ng-container>
      <ng-template #gridActions>
-        <abp-grid-actions
-          [index]="i"
-          [record]="row"
-          text="AbpUi::Actions"
-        ></abp-grid-actions>
+        <abp-grid-actions [index]="i" [record]="row" text="AbpUi::Actions"></abp-grid-actions>
      </ng-template>
    </ng-template>
  </ngx-datatable-column>
@ -28,11 +24,13 @@
      [sortable]="prop.sortable"
    >
      <ng-template let-row="row" let-i="index" ngx-datatable-cell-template>
-        <ng-container [abpPermission]="prop.permission">
+        <ng-container *abpPermission="prop.permission">
          <div
            *ngIf="row['_' + prop.name].visible"
            [innerHTML]="row['_' + prop.name].value | async"
-            (click)="prop.action && prop.action({ getInjected: getInjected, record: row, index: i })"
+            (click)="
+              prop.action && prop.action({ getInjected: getInjected, record: row, index: i })
+            "
            [class.pointer]="prop.action"
          ></div>
        </ng-container>
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.html
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.html
@ -24,19 +24,20 @@
 ></ng-container>

 <ng-template #btnItem let-action>
-  <button
-    *ngIf="action.visible(data)"
-    ngbDropdownItem
-    [abpPermission]="action.permission"
-    (click)="action.action(data)"
-    type="button"
-    class="{{ actionList.length === 1 ? 'btn btn-primary' : '' }}"
-    [class.text-center]="actionList.length === 1"
-  >
-    <i [ngClass]="action.icon" [class.mr-1]="action.icon"></i>
-    <span *ngIf="action.icon; else ellipsis">{{ action.text | abpLocalization }}</span>
-    <ng-template #ellipsis>
-      <div abpEllipsis>{{ action.text | abpLocalization }}</div>
-    </ng-template>
-  </button>
+  <ng-container *ngIf="action.visible(data)">
+    <button
+      ngbDropdownItem
+      *abpPermission="action.permission"
+      (click)="action.action(data)"
+      type="button"
+      class="{{ actionList.length === 1 ? 'btn btn-primary' : '' }}"
+      [class.text-center]="actionList.length === 1"
+    >
+      <i [ngClass]="action.icon" [class.mr-1]="action.icon"></i>
+      <span *ngIf="action.icon; else ellipsis">{{ action.text | abpLocalization }}</span>
+      <ng-template #ellipsis>
+        <div abpEllipsis>{{ action.text | abpLocalization }}</div>
+      </ng-template>
+    </button>
+  </ng-container>
 </ng-template>
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html
@ -1,18 +1,20 @@
 <div class="row justify-content-end mx-n1" id="AbpContentToolbar">
  <div class="col-auto px-1 pt-2" *ngFor="let action of actionList; trackBy: trackByFn">
-    <ng-container *ngIf="action.visible(data)" [abpPermission]="action.permission">
-      <ng-container *ngIf="action.component as component; else button">
-        <ng-container
-          *ngComponentOutlet="component; injector: createInjector(action)"
-        ></ng-container>
-      </ng-container>
+    <ng-container *ngIf="action.visible(data)">
+      <ng-container *abpPermission="action.permission">
+        <ng-container *ngIf="action.component as component; else button">
+          <ng-container
+            *ngComponentOutlet="component; injector: createInjector(action)"
+          ></ng-container>
+        </ng-container>

-      <ng-template #button>
-        <button (click)="action.action(data)" type="button" class="btn btn-primary btn-sm">
-          <i [ngClass]="action.icon" [class.mr-1]="action.icon"></i>
-          {{ action.text | abpLocalization }}
-        </button>
-      </ng-template>
+        <ng-template #button>
+          <button (click)="action.action(data)" type="button" class="btn btn-primary btn-sm">
+            <i [ngClass]="action.icon" [class.mr-1]="action.icon"></i>
+            {{ action.text | abpLocalization }}
+          </button>
+        </ng-template>
+      </ng-container>
    </ng-container>
  </div>
 </div>