RoleMaintenance

Role Maintainence Custom component to help the managers to create roles for providing access to different content in the application based on the permission. The roles are assigned to users while creating a user in user maintenance. The user can login and get access to content which is only assigned to the particular role. The so created roles can be modified, deleted, enabled, or disabled for Angular 4+.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Note: Don't forget to add --project template or else it will be added to the default project in your angular.json file.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Publishing

After building your library with ng build template, go to the dist folder cd dist/template and run npm publish.

Features

• Create Roles
• Modify and delete roles.
• Sort and filter roles.
• Supports pagination (10 records per page).
• Provide access to different content based on permission.
• Select composite roles.

Installation

• npm install @latitudenpm/role-maintainance

Other Packages Used

"npm i @latitudenpm/uam-components"

// main.ts
import { defineCustomElements } from '@latitudenpm/uam-components/loader';
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
  defineCustomElements();

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@latitudenpm/uam-components';
schemas: [CUSTOM_ELEMENTS_SCHEMA]

npm i moment

Using with webpack and tsc builds/ angular-cli builds

• import RoleMaintenanceModule into your app.module;

import { RoleMaintenanceModule } from '@latitudenpm/role-maintainance';

• add RoleMaintenanceModule to the imports of your NgModule:

@NgModule({
  imports: [
    ...,
    RoleMaintenanceModule,
  ],
  ...
})
class YourModule { ... }

• use <lib-role-maintenance></lib-role-maintenance> in your templates to add the custom role-maintainance in your view like below

<lib-role-maintenance [tableHeaders]="tableHeaders" [popUpMessage]="popUpMessage" [tableListing]="tableListing" [tWidth]="tWidth"
    [isLoading]="isLoading" [pageCount]="pageCount" [activeView]="activeView" [addRoleActive]="addRoleActive"
    [addTabHeader]="addTabHeader" [imageUrl]="image" [applicationList]="applicationList"
    [permissionCard]="permissionCard" [compositeRoles]="compositeRoles" [permissionTableHeader]="permissionTableHeader"
    [editTabHeader]="editTabHeader" [editRole]="editRole" [editRoleView]="editRoleView" [editData]="editData"
    [alertContent]="alertContent" [selectedApplicationData]="selectedApplicationData" [totalCount]="totalCount"
    [itemsPerPage]="itemsPerPage" [dropDownArray]="dropDownArray" (handleSortEvent)="handleSort($event)"
    (paginationEvent)="handlePagination($event)" (addRoleEvent)="handleAddRole($event)"
    (deleteRoleEvent)="handleDeleteRole($event)" (backToListEvent)="handleBackToList($event)"
    (getApplicationEvent)="handleGetApplication($event)" (getApplicationCardEvent)="handleGetPermissionCard($event)"
    (getCompositeEvent)="handleGetComposite()" (submitRoleEvent)="handleAddRoleSubmit($event)"
    (editRoleEvent)="handleEditRole($event)" (updateRoleEvent)="handleUpdateRole($event)"
    (searchEvent)="handleSearch($event)" (searchResetEvent)="handleSearchReset()"
    (itemsPerPageEvent)="handleItemsPerPage($event)">
</lib-role-maintenance>

Default Style (style.scss)

html{
    background-color: #f6f6f6;
}
body, h1, h2, h3, h4, h5, h6, ul, li, p{
    margin: 0;
}

li{
    list-style: none;
}

ul{
    padding: 0;
}

img{
    max-width: 100%;
    vertical-align: top;
}

Config

Input

• tableHeaders : any - Table header for user listing table.
• popUpMessage : any - Message for the popups.
• tableListing : any - Table data for user listing as per itemsPerPage.
• tWidth : any - Dynamic table width.
• isLoading : any - Show hide loader
• pageCount : any - Total page count for pagination.
• activeView : any - Handle tab click while adding represent active tab.
• addRoleActive : any - Add Role Active.
• addTabHeader : any - Tab details for add user and edit user.
• imageUrl : any - Application list image url.
• applicationList : any - Application list.
• permissionCard : any - Permission Card Data.
• compositeRoles : any - Composite Roles List.
• permissionTableHeader : any - Headers for Permission Table.
• editTabHeader : any - Tab details for add user and edit user.
• editRole : any - Edit Role Data.
• editRoleView : any - Edit role view data.
• editData : any - Edit Data.
• alertContent : any - Data for alert message.
• selectedApplicationData : any - Selected Application Data.
• totalCount : any - Total record count.
• itemsPerPage : any - Records per page.
• dropDownArray : any - Data for dropdown.

Output

• handleSortEvent : Event - sort the record based on ascending or descending.
• paginationEvent : Event - pagination next/previous click.
• addRoleEvent : Event - Add Role Event.
• deleteRoleEvent : Event - Delete Role Event.
• backToListEvent : Event - Back to Listing Event.
• getApplicationEvent : Event - Get Application Event.
• getApplicationCardEvent : Event - Get Application Card Event.
• getCompositeEvent : Event - Get composite Data Event.
• submitRoleEvent : Event - Submit Add Role Event.
• editRoleEvent : Event - Edit Role Event.
• updateRoleEvent : Event - Update Role Event.
• searchEvent : Event - search record event.
• searchResetEvent : Event - search reset event.
• itemsPerPageEvent : Event - records per page event.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.