Feature/add organization page

.angular-cli.json

@@ -21,6 +21,7 @@
       "styles": [
         "../node_modules/bulma/css/bulma.css",
         "../node_modules/font-awesome/css/font-awesome.css",
+        "../node_modules/ng-org-chart/styles.css",
         "styles.scss"
       ],
       "scripts": [],

package.json

@@ -29,6 +29,7 @@
     "core-js": "^2.4.1",
     "font-awesome": "^4.7.0",
     "moment": "^2.18.1",
+    "ng-org-chart": "^1.2.0",
     "ng2-charts": "^1.6.0",
     "ng2-google-charts": "^3.0.1",
     "rxjs": "^5.4.2",

src/app/app-routing.module.ts

@@ -1,3 +1,4 @@
+import { OrganizationPageComponent } from './home-page/organization-page/organization-page.component';
 import { NotFoundPageComponent } from './home-page/not-found-page/not-found-page.component';
 import { CrudPageComponent } from './home-page/crud-page/crud-page.component';
 import { MapsPageComponent } from './maps-page/maps-page.component';
@@ -52,6 +53,7 @@ const routes: Routes = [
         path: 'fileupload', component: FileUploadPageComponent
       },
       { path: 'crud', component: CrudPageComponent },
+      { path: 'organization', component: OrganizationPageComponent},
     ]
   },
 

src/app/app.module.ts

@@ -31,6 +31,8 @@ import { GoogleChartPageComponent } from './home-page/chart-page/google-chart-pa
 import { HighchartsPageComponent } from './home-page/chart-page/highcharts-page/highcharts-page.component';
 import { Ng2GoogleChartsModule } from 'ng2-google-charts';
 import { NotFoundPageComponent } from './home-page/not-found-page/not-found-page.component';
+import { OrgChartModule } from 'ng-org-chart';
+import { OrganizationPageComponent } from './home-page/organization-page/organization-page.component';
 
 export function highchartsFactory() {
   return highcharts;
@@ -57,7 +59,8 @@ export function highchartsFactory() {
     GoogleChartPageComponent,
     HighchartsPageComponent,
     NotFoundPageComponent,
-    FileUploadMasterPageComponent
+    FileUploadMasterPageComponent,
+    OrganizationPageComponent
   ],
   imports: [
     BrowserModule,
@@ -69,7 +72,8 @@ export function highchartsFactory() {
     }),
     ChartsModule,
     Ng2GoogleChartsModule,
-    ChartModule
+    ChartModule,
+    OrgChartModule
   ],
   providers: [AuthGuard, AuthService, ChatService, {
     provide: HighchartsStatic,

src/app/home-page/home-page.component.html

@@ -39,6 +39,9 @@
         <a [routerLink]="['/home/crud']" routerLinkActive="active" class="item">
           <span class="icon"><i class="fa fa-pencil-square-o"></i></span><span class="name">Crud Master</span>
         </a>
+        <a [routerLink]="['/home/organization']" routerLinkActive="active" class="item">
+          <span class="icon"><i class="fa fa-sitemap "></i></span><span class="name">Organization</span>
+        </a>
         <a (click)="signOut()" routerLinkActive="active" class="item">
           <span class="icon"><i class="fa fa-sign-out"></i></span><span class="name">Sign Out</span>
         </a>
@@ -106,6 +109,11 @@
           <a [routerLink]="['/home/crud']" routerLinkActive="active" class="item">
             <span class="icon"><i class="fa fa-pencil-square-o"></i></span><span class="name">Crud Master</span>
           </a>
+          <li>
+            <a [routerLink]="['/home/organization']" routerLinkActive="active" class="item" (click)="toggleMenu()">
+              <span class="icon"><i class="fa fa-sitemap"></i></span><span class="name">Organization</span>
+            </a>
+          </li>
           <li [routerLink]="['/login']" routerLinkActive="active" class="item" (click)="signOut()">
             <span class="icon"><i class="fa fa-sign-out"></i></span><span class="name">Sign Out</span>
           </li>

src/app/home-page/organization-page/organization-page.component.html

@@ -0,0 +1,24 @@
+<div class="tile is-ancestor">
+  <div class="tile is-vertical is-10">
+    <div class="tile">
+      <div class="tile is-parent is-vertical"></div>
+      <div class="tile is-parent is-10">
+        <div class="tile is-child box">
+          <div class="field">
+            <label class="label">Organization Structure</label>
+          </div>
+        </div>
+      </div>
+      <div class="tile is-parent is-vertical"></div>
+    </div>
+    <div class="tile">
+      <div class="tile is-parent is-vertical"></div>
+      <div class="tile is-parent is-10">
+        <div class="tile is-child box">
+          <ng-org-chart [topEmployee]="topEmployee"></ng-org-chart>
+        </div>
+      </div>
+      <div class="tile is-parent is-vertical"></div>
+    </div>
+  </div>
+</div>

src/app/home-page/organization-page/organization-page.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrganizationPageComponent } from './organization-page.component';
+
+describe('OrganizationPageComponent', () => {
+  let component: OrganizationPageComponent;
+  let fixture: ComponentFixture<OrganizationPageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OrganizationPageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrganizationPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home-page/organization-page/organization-page.component.ts

@@ -0,0 +1,64 @@
+import { EmployeeApi } from './../../../shared/services/custom/Employee';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-organization-page',
+  templateUrl: './organization-page.component.html',
+  styleUrls: ['./organization-page.component.scss']
+})
+export class OrganizationPageComponent implements OnInit {
+
+    topEmployee: any = {
+        name: 'No Data',
+        designation: '',
+        subordinates: []
+    };
+    dataEmployee: any = [];
+
+    constructor(
+        public employeeApi: EmployeeApi
+    ) { }
+
+    ngOnInit() {
+        this.loadData();
+    }
+
+    loadData() {
+        this.employeeApi.find({
+            order: 'parentid DESC',
+            include: 'employeeposition',
+        }).subscribe(result => {
+            if (result.length !== 0) {
+                for (const data of result) {
+                    this.dataEmployee.push({
+                        id: data['id'],
+                        name: data['name'],
+                        designation: data['employeeposition']['name'],
+                        subordinates: []
+                    });
+                }
+
+                result.forEach((data, index) => {
+                    if (data['parentid'] !== 'null') {
+                        const temp = this.dataEmployee[index];
+                        // Search parent by parentid
+                        result.forEach((cek, indexcek) => {
+                            if (data['parentid'] === cek['id']) {
+                                this.dataEmployee[indexcek]['subordinates'].push(temp);
+                                this.dataEmployee[indexcek]['subordinates']
+                                    .sort((a: any, b: any) => {
+                                        if (a.id < b.id) { return -1;
+                                        } else if (a.id > b.id) {  return 1;
+                                        } else { return 0; }
+                                    }
+                                );
+                                delete this.dataEmployee[index];
+                            }
+                        });
+                    }
+                });
+                this.topEmployee = this.dataEmployee.filter(item => item !== null)[0];
+            }
+        });
+    }
+}

src/shared/index.ts

@@ -59,6 +59,8 @@ import { ChatdetailApi } from './services/custom/Chatdetail';
 import { StorageUploadApi } from './services/custom/StorageUpload';
 import { MapApi } from './services/custom/Map';
 import { ProfiledataApi } from './services/custom/Profiledata';
+import { EmployeepositionApi } from './services/custom/Employeeposition';
+import { EmployeeApi } from './services/custom/Employee';
 /**
 * @module SDKBrowserModule
 * @description
@@ -101,6 +103,8 @@ export class SDKBrowserModule {
         StorageUploadApi,
         MapApi,
         ProfiledataApi,
+        EmployeepositionApi,
+        EmployeeApi,
         internalStorageProvider,
         { provide: SDKStorage, useClass: StorageBrowser },
         { provide: SocketDriver, useClass: SocketBrowser }

src/shared/models/Employee.ts

@@ -0,0 +1,79 @@
+/* tslint:disable */
+import {
+  Employeeposition
+} from '../index';
+
+declare var Object: any;
+export interface EmployeeInterface {
+  "parentid"?: number;
+  "id"?: number;
+  "name": string;
+  "employeepositionId": number;
+  employeeposition?: Employeeposition;
+}
+
+export class Employee implements EmployeeInterface {
+  "parentid": number;
+  "id": number;
+  "name": string;
+  "employeepositionId": number;
+  employeeposition: Employeeposition;
+  constructor(data?: EmployeeInterface) {
+    Object.assign(this, data);
+  }
+  /**
+   * The name of the model represented by this $resource,
+   * i.e. `Employee`.
+   */
+  public static getModelName() {
+    return "Employee";
+  }
+  /**
+  * @method factory
+  * @author Jonathan Casarrubias
+  * @license MIT
+  * This method creates an instance of Employee for dynamic purposes.
+  **/
+  public static factory(data: EmployeeInterface): Employee{
+    return new Employee(data);
+  }
+  /**
+  * @method getModelDefinition
+  * @author Julien Ledun
+  * @license MIT
+  * This method returns an object that represents some of the model
+  * definitions.
+  **/
+  public static getModelDefinition() {
+    return {
+      name: 'Employee',
+      plural: 'Employees',
+      path: 'Employees',
+      properties: {
+        "parentid": {
+          name: 'parentid',
+          type: 'number'
+        },
+        "id": {
+          name: 'id',
+          type: 'number'
+        },
+        "name": {
+          name: 'name',
+          type: 'string'
+        },
+        "employeepositionId": {
+          name: 'employeepositionId',
+          type: 'number'
+        },
+      },
+      relations: {
+        employeeposition: {
+          name: 'employeeposition',
+          type: 'Employeeposition',
+          model: 'Employeeposition'
+        },
+      }
+    }
+  }
+}

src/shared/models/Employeeposition.ts

@@ -0,0 +1,57 @@
+/* tslint:disable */
+
+declare var Object: any;
+export interface EmployeepositionInterface {
+  "name": string;
+  "id"?: number;
+}
+
+export class Employeeposition implements EmployeepositionInterface {
+  "name": string;
+  "id": number;
+  constructor(data?: EmployeepositionInterface) {
+    Object.assign(this, data);
+  }
+  /**
+   * The name of the model represented by this $resource,
+   * i.e. `Employeeposition`.
+   */
+  public static getModelName() {
+    return "Employeeposition";
+  }
+  /**
+  * @method factory
+  * @author Jonathan Casarrubias
+  * @license MIT
+  * This method creates an instance of Employeeposition for dynamic purposes.
+  **/
+  public static factory(data: EmployeepositionInterface): Employeeposition{
+    return new Employeeposition(data);
+  }
+  /**
+  * @method getModelDefinition
+  * @author Julien Ledun
+  * @license MIT
+  * This method returns an object that represents some of the model
+  * definitions.
+  **/
+  public static getModelDefinition() {
+    return {
+      name: 'Employeeposition',
+      plural: 'Employeepositions',
+      path: 'Employeepositions',
+      properties: {
+        "name": {
+          name: 'name',
+          type: 'string'
+        },
+        "id": {
+          name: 'id',
+          type: 'number'
+        },
+      },
+      relations: {
+      }
+    }
+  }
+}

src/shared/models/index.ts

@@ -10,5 +10,7 @@ export * from './Chatdetail';
 export * from './StorageUpload';
 export * from './Map';
 export * from './Profiledata';
+export * from './Employeeposition';
+export * from './Employee';
 export * from './BaseModels';
 export * from './FireLoopRef';