Hierarchy-maintenance NPM

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

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;
}