Merge branch 'master' into dev

6 years ago · 056f626158
9 changed files with 514 additions and 26 deletions
--- a/docs/en/How-To/Customize-Login-Page-MVC.md
+++ b/docs/en/How-To/Customize-Login-Page-MVC.md
@ -26,7 +26,7 @@ Then you can override any method you need and add new methods and properties nee
 ## Overriding the Login Page UI
-Create folder named **Account** under **Pages** directory and create a **Login.cshtml** under this folder. It will automatically override the `Login.cshtml` file defined in the Account Module thanks to the [Virtual File System](../Virtual-File-System.md).
+Create folder named **Account** under **Pages** directory and create a **Login.cshtml** under this folder. It will automatically override the `Login.cshtml` file defined in the Account Module.
 A good way to customize a page is to copy its source code. [Click here](https://github.com/abpframework/abp/blob/dev/modules/account/src/Volo.Abp.Account.Web/Pages/Account/Login.cshtml) for the source code of the login page. At the time this document has been written, the source code was like below:
--- a/docs/en/UI/Angular/Component-Replacement.md
+++ b/docs/en/UI/Angular/Component-Replacement.md
@ -543,6 +543,10 @@ The final UI looks like below:
 ![New nav-items](./images/replaced-nav-items-component.png)
 ## See Also
 - [How to Replace PermissionManagementComponent](./Permission-Management-Component-Replacement.md)
 ## What's Next?
 - [Custom Setting Page](./Custom-Setting-Page.md)
--- a/docs/en/UI/Angular/Permission-Management-Component-Replacement.md
+++ b/docs/en/UI/Angular/Permission-Management-Component-Replacement.md
@ -0,0 +1,500 @@
 # How to Replace PermissionManagementComponent
 ![Permission management modal](./images/permission-management-modal.png)
 Run the following command in `angular` folder to create a new component called `PermissionManagementComponent`.
 ```bash
 yarn ng generate component permission-management --entryComponent --inlineStyle
 # You don't need the --entryComponent option in Angular 9
 ```
 Open the generated `permission-management.component.ts` in `src/app/permission-management` folder and replace the content with the following:
 ```js
 import {
  Component,
  EventEmitter,
  Input,
  Output,
  Renderer2,
  TrackByFunction,
  Inject,
  Optional,
 } from '@angular/core';
 import { ReplaceableComponents } from '@abp/ng.core';
 import { Select, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
 import { finalize, map, pluck, take, tap } from 'rxjs/operators';
 import {
  GetPermissions,
  UpdatePermissions,
  PermissionManagement,
  PermissionManagementState,
 } from '@abp/ng.permission-management';
 type PermissionWithMargin = PermissionManagement.Permission & {
  margin: number;
 };
@Component({
  selector: 'app-permission-management',
  templateUrl: './permission-management.component.html',
  styles: [
    `
      .overflow-scroll {
        max-height: 70vh;
        overflow-y: scroll;
      }
    `,
  ],
 })
 export class PermissionManagementComponent
  implements
    PermissionManagement.PermissionManagementComponentInputs,
    PermissionManagement.PermissionManagementComponentOutputs {
  protected _providerName: string;
  @Input()
  get providerName(): string {
    if (this.replaceableData) return this.replaceableData.inputs.providerName;
    return this._providerName;
  }
  set providerName(value: string) {
    this._providerName = value;
  }
  protected _providerKey: string;
  @Input()
  get providerKey(): string {
    if (this.replaceableData) return this.replaceableData.inputs.providerKey;
    return this._providerKey;
  }
  set providerKey(value: string) {
    this._providerKey = value;
  }
  protected _hideBadges = false;
  @Input()
  get hideBadges(): boolean {
    if (this.replaceableData) return this.replaceableData.inputs.hideBadges;
    return this._hideBadges;
  }
  set hideBadges(value: boolean) {
    this._hideBadges = value;
  }
  protected _visible = false;
  @Input()
  get visible(): boolean {
    return this._visible;
  }
  set visible(value: boolean) {
    if (value === this._visible) return;
    if (value) {
      this.openModal().subscribe(() => {
        this._visible = true;
        this.visibleChange.emit(true);
        if (this.replaceableData) this.replaceableData.outputs.visibleChange(true);
      });
    } else {
      this.selectedGroup = null;
      this._visible = false;
      this.visibleChange.emit(false);
      if (this.replaceableData) this.replaceableData.outputs.visibleChange(false);
    }
  }
  @Output() readonly visibleChange = new EventEmitter<boolean>();
  @Select(PermissionManagementState.getPermissionGroups)
  groups$: Observable<PermissionManagement.Group[]>;
  @Select(PermissionManagementState.getEntityDisplayName)
  entityName$: Observable<string>;
  selectedGroup: PermissionManagement.Group;
  permissions: PermissionManagement.Permission[] = [];
  selectThisTab = false;
  selectAllTab = false;
  modalBusy = false;
  trackByFn: TrackByFunction<PermissionManagement.Group> = (_, item) => item.name;
  get selectedGroupPermissions$(): Observable<PermissionWithMargin[]> {
    return this.groups$.pipe(
      map((groups) =>
        this.selectedGroup
          ? groups.find((group) => group.name === this.selectedGroup.name).permissions
          : []
      ),
      map<PermissionManagement.Permission[], PermissionWithMargin[]>((permissions) =>
        permissions.map(
          (permission) =>
            (({
              ...permission,
              margin: findMargin(permissions, permission),
              isGranted: this.permissions.find((per) => per.name === permission.name).isGranted,
            } as any) as PermissionWithMargin)
        )
      )
    );
  }
  get isVisible(): boolean {
    if (!this.replaceableData) return this.visible;
    return this.replaceableData.inputs.visible;
  }
  constructor(
    @Optional()
    @Inject('REPLACEABLE_DATA')
    public replaceableData: ReplaceableComponents.ReplaceableTemplateData<
      PermissionManagement.PermissionManagementComponentInputs,
      PermissionManagement.PermissionManagementComponentOutputs
    >,
    private store: Store
  ) {}
  getChecked(name: string) {
    return (this.permissions.find((per) => per.name === name) || { isGranted: false }).isGranted;
  }
  isGrantedByOtherProviderName(grantedProviders: PermissionManagement.GrantedProvider[]): boolean {
    if (grantedProviders.length) {
      return grantedProviders.findIndex((p) => p.providerName !== this.providerName) > -1;
    }
    return false;
  }
  onClickCheckbox(clickedPermission: PermissionManagement.Permission, value) {
    if (
      clickedPermission.isGranted &&
      this.isGrantedByOtherProviderName(clickedPermission.grantedProviders)
    )
      return;
    setTimeout(() => {
      this.permissions = this.permissions.map((per) => {
        if (clickedPermission.name === per.name) {
          return { ...per, isGranted: !per.isGranted };
        } else if (clickedPermission.name === per.parentName && clickedPermission.isGranted) {
          return { ...per, isGranted: false };
        } else if (clickedPermission.parentName === per.name && !clickedPermission.isGranted) {
          return { ...per, isGranted: true };
        }
        return per;
      });
      this.setTabCheckboxState();
      this.setGrantCheckboxState();
    }, 0);
  }
  setTabCheckboxState() {
    this.selectedGroupPermissions$.pipe(take(1)).subscribe((permissions) => {
      const selectedPermissions = permissions.filter((per) => per.isGranted);
      const element = document.querySelector('#select-all-in-this-tabs') as any;
      if (selectedPermissions.length === permissions.length) {
        element.indeterminate = false;
        this.selectThisTab = true;
      } else if (selectedPermissions.length === 0) {
        element.indeterminate = false;
        this.selectThisTab = false;
      } else {
        element.indeterminate = true;
      }
    });
  }
  setGrantCheckboxState() {
    const selectedAllPermissions = this.permissions.filter((per) => per.isGranted);
    const checkboxElement = document.querySelector('#select-all-in-all-tabs') as any;
    if (selectedAllPermissions.length === this.permissions.length) {
      checkboxElement.indeterminate = false;
      this.selectAllTab = true;
    } else if (selectedAllPermissions.length === 0) {
      checkboxElement.indeterminate = false;
      this.selectAllTab = false;
    } else {
      checkboxElement.indeterminate = true;
    }
  }
  onClickSelectThisTab() {
    this.selectedGroupPermissions$.pipe(take(1)).subscribe((permissions) => {
      permissions.forEach((permission) => {
        if (permission.isGranted && this.isGrantedByOtherProviderName(permission.grantedProviders))
          return;
        const index = this.permissions.findIndex((per) => per.name === permission.name);
        this.permissions = [
          ...this.permissions.slice(0, index),
          { ...this.permissions[index], isGranted: !this.selectThisTab },
          ...this.permissions.slice(index + 1),
        ];
      });
    });
    this.setGrantCheckboxState();
  }
  onClickSelectAll() {
    this.permissions = this.permissions.map((permission) => ({
      ...permission,
      isGranted:
        this.isGrantedByOtherProviderName(permission.grantedProviders) || !this.selectAllTab,
    }));
    this.selectThisTab = !this.selectAllTab;
  }
  onChangeGroup(group: PermissionManagement.Group) {
    this.selectedGroup = group;
    this.setTabCheckboxState();
  }
  submit() {
    this.modalBusy = true;
    const unchangedPermissions = getPermissions(
      this.store.selectSnapshot(PermissionManagementState.getPermissionGroups)
    );
    const changedPermissions: PermissionManagement.MinimumPermission[] = this.permissions
      .filter((per) =>
        unchangedPermissions.find((unchanged) => unchanged.name === per.name).isGranted ===
        per.isGranted
          ? false
          : true
      )
      .map(({ name, isGranted }) => ({ name, isGranted }));
    if (changedPermissions.length) {
      this.store
        .dispatch(
          new UpdatePermissions({
            providerKey: this.providerKey,
            providerName: this.providerName,
            permissions: changedPermissions,
          })
        )
        .pipe(finalize(() => (this.modalBusy = false)))
        .subscribe(() => {
          this.visible = false;
        });
    } else {
      this.modalBusy = false;
      this.visible = false;
    }
  }
  openModal() {
    if (!this.providerKey || !this.providerName) {
      throw new Error('Provider Key and Provider Name are required.');
    }
    return this.store
      .dispatch(
        new GetPermissions({
          providerKey: this.providerKey,
          providerName: this.providerName,
        })
      )
      .pipe(
        pluck('PermissionManagementState', 'permissionRes'),
        tap((permissionRes: PermissionManagement.Response) => {
          this.selectedGroup = permissionRes.groups[0];
          this.permissions = getPermissions(permissionRes.groups);
        })
      );
  }
  initModal() {
    this.setTabCheckboxState();
    this.setGrantCheckboxState();
  }
  onVisibleChange(visible: boolean) {
    this.visible = visible;
    if (this.replaceableData) {
      this.replaceableData.inputs.visible = visible;
      this.replaceableData.outputs.visibleChange(visible);
    }
  }
 }
 function findMargin(
  permissions: PermissionManagement.Permission[],
  permission: PermissionManagement.Permission
 ) {
  const parentPermission = permissions.find((per) => per.name === permission.parentName);
  if (parentPermission && parentPermission.parentName) {
    let margin = 20;
    return (margin += findMargin(permissions, parentPermission));
  }
  return parentPermission ? 20 : 0;
 }
 function getPermissions(groups: PermissionManagement.Group[]): PermissionManagement.Permission[] {
  return groups.reduce((acc, val) => [...acc, ...val.permissions], []);
 }
 ```
 Open the generated `permission-management.component.html` in `src/app/permission-management` folder and replace the content with the below:
 ```html
 <abp-modal
  [visible]="isVisible"
  (visibleChange)="onVisibleChange($event)"
  (init)="initModal()"
  [busy]="modalBusy"
 >
  <ng-container *ngIf="{ entityName: entityName$ | async } as data">
    <ng-template #abpHeader>
      <h4>
        {%{{{ 'AbpPermissionManagement::Permissions' | abpLocalization }}}%} - {%{{{ data.entityName }}}%}
      </h4>
    </ng-template>
    <ng-template #abpBody>
      <div class="custom-checkbox custom-control mb-2">
        <input
          type="checkbox"
          id="select-all-in-all-tabs"
          name="select-all-in-all-tabs"
          class="custom-control-input"
          [(ngModel)]="selectAllTab"
          (click)="onClickSelectAll()"
        />
        <label class="custom-control-label" for="select-all-in-all-tabs">{%{{{
          'AbpPermissionManagement::SelectAllInAllTabs' | abpLocalization
        }}}%}</label>
      </div>
      <hr class="mt-2 mb-2" />
      <div class="row">
        <div class="overflow-scroll col-md-4">
          <ul class="nav nav-pills flex-column">
            <li *ngFor="let group of groups$ | async; trackBy: trackByFn" class="nav-item">
              <a
                class="nav-link pointer"
                [class.active]="selectedGroup?.name === group?.name"
                (click)="onChangeGroup(group)"
                >{%{{{ group?.displayName }}}%}</a
              >
            </li>
          </ul>
        </div>
        <div class="col-md-8 overflow-scroll">
          <h4>{%{{{ selectedGroup?.displayName }}}%}</h4>
          <hr class="mt-2 mb-3" />
          <div class="pl-1 pt-1">
            <div class="custom-checkbox custom-control mb-2">
              <input
                type="checkbox"
                id="select-all-in-this-tabs"
                name="select-all-in-this-tabs"
                class="custom-control-input"
                [(ngModel)]="selectThisTab"
                (click)="onClickSelectThisTab()"
              />
              <label class="custom-control-label" for="select-all-in-this-tabs">{%{{{
                'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization
              }}}%}</label>
            </div>
            <hr class="mb-3" />
            <div
              *ngFor="
                let permission of selectedGroupPermissions$ | async;
                let i = index;
                trackBy: trackByFn
              "
              [style.margin-left]="permission.margin + 'px'"
              class="custom-checkbox custom-control mb-2"
            >
              <input
                #permissionCheckbox
                type="checkbox"
                [checked]="getChecked(permission.name)"
                [value]="getChecked(permission.name)"
                [attr.id]="permission.name"
                class="custom-control-input"
                [disabled]="isGrantedByOtherProviderName(permission.grantedProviders)"
              />
              <label
                class="custom-control-label"
                [attr.for]="permission.name"
                (click)="onClickCheckbox(permission, permissionCheckbox.value)"
                >{%{{{ permission.displayName }}}%}
                <ng-container *ngIf="!hideBadges">
                  <span
                    *ngFor="let provider of permission.grantedProviders"
                    class="badge badge-light"
                    >{%{{{ provider.providerName }}}%}: {%{{{ provider.providerKey }}}%}</span
                  >
                </ng-container>
              </label>
            </div>
          </div>
        </div>
      </div>
    </ng-template>
    <ng-template #abpFooter>
      <button type="button" class="btn btn-secondary" #abpClose>
        {%{{{ 'AbpIdentity::Cancel' | abpLocalization }}}%}
      </button>
      <abp-button iconClass="fa fa-check" (click)="submit()">{%{{{
        'AbpIdentity::Save' | abpLocalization
      }}}%}</abp-button>
    </ng-template>
  </ng-container>
 </abp-modal>
 ```
 Open `app.component.ts` in `src/app` folder and modify it as shown below:
 ```js
 import { AddReplaceableComponent } from '@abp/ng.core';
 import { ePermissionManagementComponents } from '@abp/ng.permission-management';
 import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { PermissionManagementComponent } from './permission-management/permission-management.component';
 //...
 export class AppComponent implements OnInit {
  constructor(private store: Store) {} // injected store
  ngOnInit() {
    // added dispatching the AddReplaceableComponent action
    this.store.dispatch(
      new AddReplaceableComponent({
        component: PermissionManagementComponent,
        key: ePermissionManagementComponents.PermissionManagement,
      })
    );
  }
 }
 ```
 ## See Also
 - [Component Replacement](./Component-Replacement.md)
--- a/docs/en/UI/Angular/images/permission-management-modal.png
+++ b/docs/en/UI/Angular/images/permission-management-modal.png
--- a/docs/en/UI/AspNetCore/Customization-User-Interface.md
+++ b/docs/en/UI/AspNetCore/Customization-User-Interface.md
@ -51,15 +51,13 @@ namespace Acme.BookStore.Web.Pages.Identity.Users
 ### Overriding a Razor Page (.CSHTML)
-Overriding a `.cshtml` file (razor page, razor view, view component... etc.) is possible through the [Virtual File System](../../Virtual-File-System.md).
+Overriding a `.cshtml` file (razor page, razor view, view component... etc.) is possible through creating the same `.cshtml` file under the same path.
 Virtual File system allows us to **embed resources into assemblies**. In this way, pre-built modules define the razor pages inside their NuGet packages. When you depend a module, you can override any file added to the virtual file system by that module, including pages/views.
 #### Example
 This example overrides the **login page** UI defined by the [Account Module](../../Modules/Account.md).
-Physical files override the embedded files defined in the same location. The account module defines a `Login.cshtml` file under the `Pages/Account` folder. So, you can override it by creating a file in the same path:
+The account module defines a `Login.cshtml` file under the `Pages/Account` folder. So, you can override it by creating a file in the same path:
 ![overriding-login-cshtml](../../images/overriding-login-cshtml.png)
--- a/docs/en/Virtual-File-System.md
+++ b/docs/en/Virtual-File-System.md
@ -1,6 +1,6 @@
 ## Virtual File System
-The Virtual File System makes it possible to manage files that do not physically exist on the file system (disk). It's mainly used to embed (js, css, image, cshtml...) files into assemblies and use them like physical files at runtime.
+The Virtual File System makes it possible to manage files that do not physically exist on the file system (disk). It's mainly used to embed (js, css, image..) files into assemblies and use them like physical files at runtime.
 ### Volo.Abp.VirtualFileSystem Package
@ -147,7 +147,7 @@ The code above assumes that `MyWebAppModule` and `MyModule` are two different pr
 The Virtual File System is well integrated to ASP.NET Core:
 * Virtual files can be used just like physical (static) files in a web application.
-* Razor Views, Razor Pages, js, css, image files and all other web content types can be embedded into assemblies and used just like the physical files.
+* Js, css, image files and all other web content types can be embedded into assemblies and used just like the physical files.
 * An application (or another module) can override a virtual file of a module just like placing a file with the same name and extension into the same folder of the virtual file.
 #### Virtual Files Middleware
@ -161,9 +161,3 @@ app.UseVirtualFiles();
 Adding virtual files middleware after the static files middleware makes it possible to override a virtual file with a real physical file simply by placing it in the same location as the virtual file.
 >The Virtual File Middleware only serves the virtual wwwroot folder contents - just like the other static files.
 #### Views & Pages
 Embedded razor views/pages are available in the application without any configuration. Simply place them into the standard Views/Pages virtual folders of the module being developed.
 An embedded view/page can be overrided if a module/application locates a new file into the same location as mentioned above.
--- a/docs/zh-Hans/How-To/Customize-Login-Page-MVC.md
+++ b/docs/zh-Hans/How-To/Customize-Login-Page-MVC.md
@ -26,7 +26,7 @@ public class CustomLoginModel : LoginModel
 ## 重写登录页面UI
-在 **Pages** 目录下创建名为 **Account** 的文件夹,并在这个文件夹中创建 `Login.cshtml` ,借助[虚拟文件系统](../Virtual-File-System.md)它会自动覆盖账户模块的页面文件.
+在 **Pages** 目录下创建名为 **Account** 的文件夹,并在这个文件夹中创建 `Login.cshtml` , 它会自动覆盖账户模块的页面文件.
 自定义页面一个很好的开始是复制它的源代码. [点击这里](https://github.com/abpframework/abp/blob/dev/modules/account/src/Volo.Abp.Account.Web/Pages/Account/Login.cshtml)找到登录页面的源码. 在编写本文档时,源代码如下:
--- a/docs/zh-Hans/UI/AspNetCore/Customization-User-Interface.md
+++ b/docs/zh-Hans/UI/AspNetCore/Customization-User-Interface.md
@ -51,15 +51,13 @@ namespace Acme.BookStore.Web.Pages.Identity.Users
 ### 重写Razor页面 (.CSHTML)
-使用[虚拟文件系统](../../Virtual-File-System.md)可以重写 `.cshtml` 文件(razor page, razor view, view component... 等.)
+同一路径下创建相同的`.cshtml`文件可以实现重写功能(razor page, razor view, view component... 等.)
 虚拟文件系统允许我们将**资源嵌入到程序集中**. 通过这个方式,预构建的模块在Nuget包中定义了Razor页面. 当你依赖模块时,可以覆盖这个模块向虚拟文件系统添加的任何文件,包括页面/视图.
 #### 示例
 这个示例重写了[账户模块](../../Modules/Account.md)定义的**登录页面**UI
-物理文件可以覆盖相同位置的嵌入文件. 账户模块在 `Pages/Account` 文件夹下定义了 `Login.cshtml` 文件. 所以你可以在同一路径下创建文件覆盖它:
+账户模块在 `Pages/Account` 文件夹下定义了 `Login.cshtml` 文件. 所以你可以在同一路径下创建文件覆盖它:
 ![overriding-login-cshtml](../../images/overriding-login-cshtml.png)
 通常你想要拷贝模块的 `.cshtml` 原文件,然后进行需要的更改. 你可以在[这里](https://github.com/abpframework/abp/blob/dev/modules/account/src/Volo.Abp.Account.Web/Pages/Account/Login.cshtml)找到源文件. 不要拷贝 `Login.cshtml.cs` 文件,它是隐藏razor页面的代码,我们不希望覆盖它(见下节).
--- a/docs/zh-Hans/Virtual-File-System.md
+++ b/docs/zh-Hans/Virtual-File-System.md
@ -1,6 +1,6 @@
 ## 虚拟文件系统
-虚拟文件系统使得管理物理上不存在于文件系统中(磁盘)的文件成为可能. 它主要用于将(js, css, image, cshtml ...)文件嵌入到程序集中, 并在运行时将它们象物理文件一样使用.
+虚拟文件系统使得管理物理上不存在于文件系统中(磁盘)的文件成为可能. 它主要用于将(js, css, image...)文件嵌入到程序集中, 并在运行时将它们象物理文件一样使用.
 ### Volo.Abp.VirtualFileSystem nuget包
@ -147,7 +147,7 @@ public class MyWebAppModule : AbpModule
 虚拟文件系统与 ASP.NET Core 无缝集成:
 * 虚拟文件可以像Web应用程序上的物理(静态)文件一样使用.
-* Razor Views, Razor Pages, js, css, 图像文件和所有其他Web内容可以嵌入到程序集中并像物理文件一样使用.
+* Js, css, 图像文件和所有其他Web内容可以嵌入到程序集中并像物理文件一样使用.
 * 应用程序(或其他模块)可以覆盖模块的虚拟文件, 就像将具有相同名称和扩展名的文件放入虚拟文件的同一文件夹中一样.
 #### 虚拟文件中间件
@ -161,9 +161,3 @@ app.UseVirtualFiles();
 在静态文件中间件之后添加虚拟文件中间件, 使得通过在虚拟文件相同的位置放置物理文件, 从而用物理文件覆盖虚拟文件成为可能.
 > 虚拟文件中间件可以虚拟wwwroot文件夹中的内容 - 就像静态文件一样.
 #### Views & Pages
 无需任何配置即可在应用程序中使用嵌入式的 razor Views/pages. 只需要将它们放置在要开发的模块中的标准 Views/Pages 虚拟文件夹即可.
 如果模块/应用程序将新文件放置同一位置, 则会覆盖嵌入式的 Views/Pages.