UserManagement Feature: Issue Number 54 [Angular]

 * Tenants
 * Users
 * Roles

Listings have Edit/Delete/ToggleActive on an action menu, refresh at top right.
 * Added IsActive and Description to Role
 * Angular paged-listing-component-base to implement for paging
 * jquery.validate to show errors before submission if possible (unique ie, username etc require callbacks to be coded)
 * ngx-paginate for paging
 * Implements the AsyncCrudAppService but uses the Management classes for Create/Update/Delete Uses base service for Get and GetAll. Feels like there should be an AsyncReadOnlyAppService that implements Get and GetAll in the base. Then more complex situations that use management classes and additional methods could be layered over the top without feeling like your going against the intent of the original classes.

TODO:
Add: Separate Modal required to edit a users password.
Fix: Messy Mappings in ApplicationModule, Add a class for the map
Check: Service Interfaces and inheritance
Check: Sorting issue in AsyncCrudServiceBaseClass

Author: AlanFlaherty

angular/.angular-cli.json

@@ -72,7 +72,8 @@
         "../node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.sweet-alert.js",
         "../node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.moment.js",
         "../src/bsb-theme/js/admin.js",
-        "../src/bsb-theme/js/demo.js"
+        "../src/bsb-theme/js/demo.js",
+        "../src/bsb-theme/js/jquery.validate.js"
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {

angular/package.json

@@ -25,6 +25,7 @@
     "@types/bootstrap": "^3.3.33",
     "@types/jquery": "^2.0.41",
     "@types/jquery.blockui": "0.0.27",
+    "@types/jquery.validation": "^1.16.3",
     "@types/lodash": "^4.14.62",
     "@types/moment": "^2.13.0",
     "@types/moment-timezone": "^0.2.34",
@@ -53,6 +54,7 @@
     "moment-timezone": "^0.5.13",
     "morris.js": "^0.5.0",
     "ngx-bootstrap": "^1.6.6",
+    "ngx-pagination": "^3.0.0",
     "node-waves": "^0.7.5",
     "push.js": "0.0.12",
     "raphael": "^2.2.7",

angular/src/app/app-routing.module.ts

@@ -6,6 +6,7 @@ import { HomeComponent } from './home/home.component';
 import { AboutComponent } from './about/about.component';
 import { UsersComponent } from './users/users.component';
 import { TenantsComponent } from './tenants/tenants.component';
+import { RolesComponent } from "app/roles/roles.component";
 
 @NgModule({
     imports: [
@@ -16,6 +17,7 @@ import { TenantsComponent } from './tenants/tenants.component';
                 children: [
                     { path: 'home', component: HomeComponent,  canActivate: [AppRouteGuard] },
                     { path: 'users', component: UsersComponent, data: { permission: 'Pages.Users' }, canActivate: [AppRouteGuard] },
+                    { path: 'roles', component: RolesComponent, data: { permission: 'Pages.Roles' }, canActivate: [AppRouteGuard] },
                     { path: 'tenants', component: TenantsComponent, data: { permission: 'Pages.Tenants' }, canActivate: [AppRouteGuard] },
                     { path: 'about', component: AboutComponent }
                 ]

angular/src/app/app.module.ts

@@ -4,6 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { HttpModule, JsonpModule } from '@angular/http';
 
 import { ModalModule } from 'ngx-bootstrap';
+import { NgxPaginationModule } from 'ngx-pagination';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -16,9 +17,14 @@ import { SharedModule } from '@shared/shared.module';
 import { HomeComponent } from '@app/home/home.component';
 import { AboutComponent } from '@app/about/about.component';
 import { UsersComponent } from '@app/users/users.component';
-import { CreateUserModalComponent } from '@app/users/create-user-modal.component';
+import { CreateUserComponent } from '@app/users/create-user/create-user.component';
+import { EditUserComponent } from './users/edit-user/edit-user.component';
+import { RolesComponent } from '@app/roles/roles.component';
+import { CreateRoleComponent } from '@app/roles/create-role/create-role.component';
+import { EditRoleComponent } from './roles/edit-role/edit-role.component';
 import { TenantsComponent } from '@app/tenants/tenants.component';
-import { CreateTenantModalComponent } from '@app/tenants/create-tenant-modal.component';
+import { CreateTenantComponent } from './tenants/create-tenant/create-tenant.component';
+import { EditTenantComponent } from './tenants/edit-tenant/edit-tenant.component';
 import { TopBarComponent } from '@app/layout/topbar.component';
 import { TopBarLanguageSwitchComponent } from '@app/layout/topbar-languageswitch.component';
 import { SideBarUserAreaComponent } from '@app/layout/sidebar-user-area.component';
@@ -31,16 +37,22 @@ import { RightSideBarComponent } from '@app/layout/right-sidebar.component';
         AppComponent,
         HomeComponent,
         AboutComponent,
-        UsersComponent,
-        CreateUserModalComponent,
         TenantsComponent,
-        CreateTenantModalComponent,
+		CreateTenantComponent,
+		EditTenantComponent,
+        UsersComponent,
+		CreateUserComponent,
+		EditUserComponent,
+      	RolesComponent,        
+		CreateRoleComponent,
+		EditRoleComponent,
         TopBarComponent,
         TopBarLanguageSwitchComponent,
         SideBarUserAreaComponent,
         SideBarNavComponent,
         SideBarFooterComponent,
         RightSideBarComponent
+    
     ],
     imports: [
         CommonModule,
@@ -51,7 +63,8 @@ import { RightSideBarComponent } from '@app/layout/right-sidebar.component';
         AbpModule,
         AppRoutingModule,
         ServiceProxyModule,
-        SharedModule
+        SharedModule,
+        NgxPaginationModule
     ],
     providers: [
 

angular/src/app/layout/sidebar-nav.component.ts

@@ -11,9 +11,12 @@ export class SideBarNavComponent extends AppComponentBase {
 
     menuItems: MenuItem[] = [
         new MenuItem(this.l("HomePage"), "", "home", "/app/home"),
+
         new MenuItem(this.l("Tenants"), "Pages.Tenants", "business", "/app/tenants"),
         new MenuItem(this.l("Users"), "Pages.Users", "people", "/app/users"),
+        new MenuItem(this.l("Roles"), "Pages.Roles", "local_offer", "/app/roles"),
         new MenuItem(this.l("About"), "", "info", "/app/about"),
+
         new MenuItem(this.l("MultiLevelMenu"), "", "menu", "", [
             new MenuItem("ASP.NET Boilerplate", "", "", "", [
                 new MenuItem("Home", "", "", "https://aspnetboilerplate.com"),

angular/src/app/roles/create-role/create-role.component.html

@@ -0,0 +1,97 @@
+<div bsModal #createRoleModal="bs-modal" class="modal fade" (onShown)="onShown()" tabindex="-1" role="dialog" aria-labelledby="createRoleModal" aria-hidden="true" [config]="{backdrop: 'static'}">
+    <div class="modal-dialog">
+
+        <div #modalContent class="modal-content">
+
+            <form *ngIf="active" #createRoleForm="ngForm" id="frm_create_role" novalidate (ngSubmit)="save()">
+
+                <div class="modal-header">
+                    <button type="button" class="close" (click)="close()" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title">
+                        <span>{{l("CreateNewRole")}}</span>
+                    </h4>
+                </div>
+                <div class="modal-body">
+                    <ul class="nav nav-tabs tab-nav-right" role="tablist">
+                        <li role="presentation" class="active"><a href="#role-details" data-toggle="tab">Role Details</a></li>
+                        <li role="presentation"><a href="#role-description" data-toggle="tab">Role Description</a></li>
+                    </ul>
+                    <div class="tab-content">
+                        <div role="tabpanel" class="tab-pane animated fadeIn active" id="role-details">
+
+                            <div class="row clearfix" style="margin-top:20px;">
+                                <div class="col-sm-6">
+                                    <div class="form-group form-float">
+                                        <div class="form-line">
+                                            <input id="rolename"  type="text" name="RoleName" [(ngModel)]="role.name" required maxlength="32" minlength="2" class="validate form-control">
+                                            <label for="username" class="form-label">{{l("RoleName")}}</label>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-sm-6">
+                                    <div class="form-group form-float">
+                                        <div class="">
+                                            <input id="isactive" type="checkbox" name="IsActive" [(ngModel)]="role.isActive" checked class="form-control"/>
+                                            <label for="isactive" class="form-label">{{l("IsActive")}}</label>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="row clearfix" style="margin-top:20px;">
+                                <div class="col-sm-12">
+                                    <div class="form-group form-float">
+                                        <div class="form-line">
+                                            <input id="displayname"  type="text" name="DisplayName" [(ngModel)]="role.displayName" required maxlength="32" minlength="2" class="validate form-control">
+                                            <label for="displayname" class="form-label">{{l("DisplayName")}}</label>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="row clearfix">
+                              <div class="col-sm-12">
+                                <fieldset class="show-fieldset col s12">
+									<legend class="show-legend">Permissions</legend>
+
+									<ng-template ngFor let-permission [ngForOf]="permissions.items" let-permissionIndex="index">
+									<div class="col-sm-6">
+										<input type="checkbox" name="permission" value="{{permission.name}}" class="filled-in" id="permission-{{permissionIndex}}" checked="checked" />
+										<label for="permission-{{permissionIndex}}">{{permission.displayName}}</label>
+									</div>
+									</ng-template>
+                                </fieldset>
+                              </div>
+                            </div>
+                        </div>
+                        <div role="tabpanel" class="tab-pane animated fadeIn" id="role-description">
+
+                            <div class="row" style="margin-top:20px;">
+                                <div class="col-sm-12">
+									<div class="form-group form-float">
+                                        <div class="form-line">
+											<textarea id="role-description" name="Description" [(ngModel)]="role.description" required class="validate form-control"></textarea>
+											<label for="role-description" class="form-label">Role Description</label>
+										</div>
+									</div>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button [disabled]="saving" type="button" class="btn btn-default waves-effect" (click)="close()">
+                        <i class="material-icons">clear</i>{{l("Cancel")}}
+                    </button>
+                    <button [disabled]="!createRoleForm.form.valid || saving" type="submit" class="btn btn-primary waves-effect">
+                        <i class="material-icons">check</i>{{l("Save")}}
+                    </button>
+                </div>
+
+            </form>
+        </div>
+    </div>
+</div>

angular/src/app/roles/create-role/create-role.component.ts

@@ -0,0 +1,92 @@
+import { Component, ViewChild, Injector, Output, EventEmitter, ElementRef, OnInit } from '@angular/core';
+import { ModalDirective } from 'ngx-bootstrap';
+import { RoleServiceProxy, CreateRoleDto, RoleDto, ListResultDtoOfPermissionDto } from '@shared/service-proxies/service-proxies';
+import { AppComponentBase } from '@shared/app-component-base';
+
+@Component({
+  selector: 'create-role-modal',
+  templateUrl: './create-role.component.html'
+})
+export class CreateRoleComponent extends AppComponentBase implements OnInit {
+@ViewChild('createRoleModal') modal: ModalDirective;
+@ViewChild('modalContent') modalContent: ElementRef;
+
+    active: boolean = false;
+    saving: boolean = false;
+
+    permissions: ListResultDtoOfPermissionDto = null;
+    role: CreateRoleDto = null;
+
+    @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();
+    constructor(
+        injector: Injector,
+        private _roleService: RoleServiceProxy
+    ) {
+        super(injector);
+    }
+
+    ngOnInit(): void {
+        this._roleService.getAllPermissions()
+            .subscribe((permissions:ListResultDtoOfPermissionDto) => 
+            {
+                this.permissions = permissions;
+                console.log(permissions);
+            });
+    }
+
+    show(): void {
+        this.active = true;
+        this.modal.show();
+        this.role = new CreateRoleDto({isStatic:false,
+                                        description:'',
+                                        isActive:false,
+                                        name:''});
+
+        // // shouldn't have to do this!
+        // this.role.description = "";
+        // this.role.isActive = false;
+        // this.role.name = "";
+    }
+
+    onShown(): void {
+        ($ as any).AdminBSB.input.activate($(this.modalContent.nativeElement));
+
+        $('#frm_create_role').validate({
+            highlight: function (input) {
+                $(input).parents('.form-line').addClass('error');
+            },
+            unhighlight: function (input) {
+                $(input).parents('.form-line').removeClass('error');
+            },
+            errorPlacement: function (error, element) {
+                $(element).parents('.form-group').append(error);
+            }
+        });
+    }
+
+    save(): void {
+        var permissions = [];
+        $(this.modalContent.nativeElement).find("[name=permission]").each(
+            function( index:number, elem: Element){
+                if($(elem).is(":checked") == true){
+                    permissions.push(elem.getAttribute("value").valueOf());
+                }
+            }
+        )
+
+        this.role.permissions = permissions;
+        this.saving = true;
+        this._roleService.create(this.role)
+            .finally(() => { this.saving = false; })
+            .subscribe(() => {
+                this.notify.info(this.l('SavedSuccessfully'));
+                this.close();
+                this.modalSave.emit(null);
+            });
+    }
+
+    close(): void {
+        this.active = false;
+        this.modal.hide();
+    }
+}