Hierarchy

Hierarchy Custom component to maintain different designations with departments, to assign different features to each of the above designation, to assign users to view applications based their position in the organization hierarchy , to maintain miscellaneous user information as attributes 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 group
• Edit group.
• Copy the existing user details while creating new group.
• Provide access to different content based on application, roles, hierarchy & attributes.
• Create Type.
• Edit Type.
• Delete and edit Type/Groups.

Installation

• npm install @latitudenpm/hierarchy-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 HeirarchyMaintenanceModule into your app.module;

import { HierarchyMaintenanceModule } from '@latitudenpm/user-maintainance';

• add HierarchyMaintenanceModule to the imports of your NgModule:

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

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

<lib-hierarchy-maintenance [tableHeader]="tableHeader" [popUpMessage]="popUpMessage" [isOpen]="isOpen"
    [showAdd]="showAdd" [showAddNode]="showAddNode" [groupTypes]="groupTypes" [groupNodeList]="groupNodeList"
    [isLoading]="isLoading" [colorList]="colorList" [path]="path" [isActive]="isActive" [tabList]="tabList"
    [activeView]="activeView" [typeName]="typeName" [applicationList]="applicationList" [imageUrl]="image"
    [roleList]="roleList" [typeAttributes]="typeAttributes" [showPreview]="showPreview" [activePreview]="activePreview"
    [typeObj]="typeObj" [checked]="checked" [editGroupData]="editGroupData" [editGroup]="editGroup"
    [editGroupView]="editGroupView" [alertContent]="alertContent" [mobileNodeView]="mobileNodeView"
    (groupListClickEvent)="handleClickListCard($event)" (groupAddBackEvent)="handleAddBack($event)"
    (groupAddAttributesEvent)="handleAddAttributes($event)" (groupAttributesBackEvent)="handleAttributesBack($event)"
    (groupAttributesSubmitEvent)="handleAttributesSubmit($event)" (groupSaveGoupTypeEvent)="handleSaveType($event)"
    (addNodeEvent)="handleAddNode($event)" (getApplicationEvent)="handleGetApplication()"
    (groupEditCardEvent)="handleEditGroupType($event)" (previewEditEvent)="handlePreviewEdit($event)"
    (editBackEvent)="handleEditBack($event)" (editBasicSubmitEvent)="handleEditBasicSubmit($event)"
    (editGroupsEvent)="handleEditGroups($event)" (submitGroupEvent)="handleAddGroup($event)"
    (updateGroupEvent)="handleUpdateGroup($event)" (backToListEvent)="handleBackToList()"
    (deleteGroupEvent)="handleDeleteGroup($event)" (breadCrumbEvent)="handleBreadCrumb($event)">
</lib-hierarchy-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

• tableHeader : any - Table Header used for listing.
• popUpMessage : any - Message for the popups.
• isOpen : any - For opening/closing the sidebar.
• showAdd : any - for showing add component.
• showAddNode : any - for showing add node component.
• groupTypes : any - Group Types data.
• groupNodeList :any - Node List Data.
• isLoading : any - For showing/hiding spinner.
• colorList : any - Colors for node list.
• path : any - paths
• isActive : any - For showing the current tab.
• tabList : any - For showing tab details.
• activeView : any - Current screen.
• typeName : any - Name of the current type.
• applicationList : any - Application list.
• imageUrl : any - Url for images.
• roleList : any - List of Roles.
• typeAttributes : any - List of type Attributes.
• showPreview : any - For showing preview.
• activePreview : any - Current Preview.
• typeObj : any - Object for adding type.
• checked : any - Checked data.
• editGroupData : any - Group Data for editing.
• editGroup : any - Data for group editing.
• editGroupView : any - Data for Group view.
• alertContent : any - Message for alert.
• mobileNodeView : any - Mobile View.

Output

• groupListClickEvent : Event - Group List Click Event.
• groupAddBackEvent : Event - Add Group Back Event.
• groupAddAttributesEvent : Event - Add Group Attributes Event.
• groupAttributesBackEvent : Event - Back to Group Attributes Event.
• groupAttributesSubmitEvent : Event - Submit Group Attributes Event.
• groupSaveGoupTypeEvent : Event - Save Group Type Event.
• addNodeEvent : Event - Add new node Event.
• getApplicationEvent : Event - Get Application Event.
• groupEditCardEvent : Event - Group Card Edit Event.
• previewEditEvent : Event - Preview of Edit.
• editBackEvent : Event - Back to editing.
• editBasicSubmitEvent : Event - Edit Basic Details Event.
• editGroupsEvent : Event - Edit Group Event.
• submitGroupEvent : Event - Submit Group Event.
• updateGroupEvent : Event - Update Group Event.
• backToListEvent : Event - Back To Listing Event.
• deleteGroupEvent : Event - Delete Group Event.
• breadCrumbEvent : Event - Bread Crumb Data.

Running unit tests

Run ng test template to execute the unit tests via Karma.

Further help

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

Keywords

none