penambahan menu device

src/app/content/hemat-app/device/device.component.css

@@ -0,0 +1,190 @@
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label {
+    font-family: inherit;
+    font-size: medium;
+    font-weight: bold;
+    color: #6B6F82;
+}
+:host ::ng-deep .ngx-datatable .datatable-row-center, .ngx-datatable .datatable-row-group, .ngx-datatable .datatable-row-right {
+    position: relative;
+    height: 50px !important;
+}
+
+:host ::ng-deep .datatable-icon-right:before {
+    font-family: 'icofont';
+    font-style: normal;
+}
+
+:host ::ng-deep .datatable-icon-skip:before {
+    font-family: 'icofont';
+    font-style: normal;
+}
+
+:host ::ng-deep .datatable-icon-left:before {
+    font-family: 'icofont';
+    font-style: normal;
+}
+
+:host ::ng-deep .datatable-icon-left:before {
+    content: "\2039";
+    font-size: x-large;
+}
+
+:host ::ng-deep .datatable-icon-prev:before {
+    content: "\00AB";
+    font-size: x-large;
+}
+
+:host ::ng-deep .datatable-icon-right:before {
+    content: "\203A";
+    font-size: x-large;
+}
+
+:host ::ng-deep .datatable-icon-skip:before {
+    content: "\00BB";
+    font-size: x-large;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
+.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
+.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
+    font-size: 16px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #d4d2e7;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
+.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right {
+    font-size: 16px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #d4d2e7;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip {
+    font-size: 16px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #d4d2e7;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
+    font-size: 16px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #d4d2e7;
+}
+
+:host ::ng-deep .datatable-footer .datatable-pager ul li:not(.disabled).active a,
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] ul[_ngcontent-c11] li[_ngcontent-c11]:not(.disabled):hover a[_ngcontent-c11] {
+    background-color: #d4d2e7;
+    font-weight: bold;
+    font-size: larger;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager a {
+    height: 32px;
+    min-width: 34px;
+    line-height: 22px;
+    padding: 0;
+    border-radius: 3px;
+    margin: 0 3px;
+    text-align: center;
+    vertical-align: top;
+    padding-top: 3px;
+    text-decoration: none;
+    vertical-align: bottom;
+    color: #7c8091;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
+    font-size: 14px;
+    line-height: 9px;
+    padding: 0px 08px;
+    background-color: #ffffff;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
+    font-size: 0px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #ffffff;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
+    font-size: 0px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #ffffff;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip,
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
+    font-size: 0px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #ffffff;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev,
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
+    font-size: 0px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #ffffff;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
+    background-color: #545454;
+    font-weight: bold;
+    color: white;
+
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a,
+.ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
+    background-color: #545454;
+    font-weight: bold;
+    color: white;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
+    background: #727e8e;
+    color: #ededed;
+    margin-top: -1px;
+    overflow: inherit;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
+    font-weight: bold;
+    height: unset !important;
+    overflow: inherit
+}
+
+:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager {
+    flex: 0 0 0%;
+}
+
+:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager .pager {
+    display: flex;
+}
+
+:host ::ng-deep .block-ui-wrapper {
+    background: rgba(255, 249, 249, 0.5) !important;
+}
+:host ::ng-deep .ngx-datatable .datatable-footer .selected-count .datatable-pager {
+   flex: 0 0 0%;
+}
+
+:host ::ng-deep .ngx-datatable {
+  display: -webkit-box;
+}
+

src/app/content/hemat-app/device/device.component.html

@@ -0,0 +1,74 @@
+<div class="app-content content">
+    <div class="content-wrapper">
+      <div class="content-header row mb-1">
+        <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
+      </div>
+      <div class="content-body">
+        <!-- Add rows table -->
+        <section id="add-row">
+          <div class="row">
+            <div class="col-12" *blockUI="'addRows'; message: 'Loading'">
+              <m-card [options]="options" (reloadFunction)="reloadAddRows($event)">
+                <ng-container mCardBody>
+                  <!-- <p class="card-text">New rows can be added to a DataTable very easily using the
+                    (addFieldValue()) function.
+                  </p> -->
+                  <button id="addRow" class="btn btn-secondary my-1 mb-2" (click)="addFieldValue()"><i class="feather ft-plus"></i>&nbsp;
+                    Add new row</button>
+                  <div class="table table-striped table-bordered add-rows">
+                    <ngx-datatable class="bootstrap" [sortType]="'multi'" [headerHeight]="50" [limit]="7"
+                      [footerHeight]="40" [rowHeight]="40" [rows]="rows" [columnMode]="'force'"
+                      [loadingIndicator]="loadingIndicator" fxFlex="auto" [perfectScrollbar]="config">
+                      <ngx-datatable-column name="ID" [flexGrow]="1" [minWidth]="20">
+                        <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" *ngfor let element of rows>
+                          <b>{{element.id}}</b>
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="70">
+                        <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" *ngfor let element of rows>
+                          <span>
+                            {{element.name}}
+                          </span>
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
+                        <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row" *ngfor let element
+                          of rows>
+                          <span>
+                            {{element.position}}
+                          </span>
+                        </ng-template>
+                      </ngx-datatable-column>
+  
+                      <ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
+                        <ng-template ngx-datatable-cell-template *ngfor let element of rows>
+                          {{element.office}}
+                        </ng-template>
+                      </ngx-datatable-column>
+  
+                      <ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="30">
+                        <ng-template ngx-datatable-cell-template *ngfor let element of rows>
+                          {{element.age}}
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
+                        <ng-template ngx-datatable-cell-template *ngfor let element of rows>
+                          {{element.salary}}
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
+                        <ng-template ngx-datatable-cell-template *ngfor let element of rows>
+                          {{element.startdate}}
+                        </ng-template>
+                      </ngx-datatable-column>
+                    </ngx-datatable>
+  
+                  </div>
+                </ng-container>
+              </m-card>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>

src/app/content/hemat-app/device/device.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeviceComponent } from './device.component';
+
+describe('DeviceComponent', () => {
+  let component: DeviceComponent;
+  let fixture: ComponentFixture<DeviceComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DeviceComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DeviceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/content/hemat-app/device/device.component.ts

@@ -0,0 +1,203 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgBlockUI, BlockUI } from 'ng-block-ui';
+import { PerfectScrollbarDirective, PerfectScrollbarComponent, PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
+import { TableApiService } from 'src/app/_services/table-api.service';
+
+@Component({
+  selector: 'app-device',
+  templateUrl: './device.component.html',
+  styleUrls: ['./device.component.css']
+})
+export class DeviceComponent implements OnInit{
+  data: any;
+
+  @BlockUI('addRows') blockUIAddRows: NgBlockUI;
+  @BlockUI('rowSelection') blockUIRowSelection: NgBlockUI;
+
+  public config: PerfectScrollbarConfigInterface = { wheelPropagation: true };
+  @ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;
+  @ViewChild(PerfectScrollbarDirective, { static: true }) directiveRef?: PerfectScrollbarDirective;
+
+  options = {
+    close: true,
+    expand: true,
+    minimize: true,
+    reload: true
+  };
+  temp = [];
+  selected = [];
+  id: number;
+  loadingIndicator: true;
+  rows: any;
+  editing = {};
+  row: any;
+  public breadcrumb: any;
+
+  constructor(private tableApiservice: TableApiService) { }
+
+  ngOnInit() {
+    this.breadcrumb = {
+      'mainlabel': 'Device List',
+      'links': [
+        {
+          'name': 'Home',
+          'isLink': false,
+          'link': '/dashboard/sales'
+        },
+        {
+          'name': 'Device',
+          'isLink': false
+        }
+      ]
+    };
+      this.tableApiservice.getTableApiData().subscribe(Response => {
+      this.data = Response;
+      this.getTabledata();
+      });
+  }
+  getTabledata() {
+    this.rows = this.data.rows;
+    this.row = this.data.row;
+  }
+  updateFiltername(event) {
+    const val = event.target.value.toLowerCase();
+
+    // filter our data
+    const temp = this.rows.filter(function (d) {
+      return d.name.toLowerCase().indexOf(val) !== -1 || !val;
+    });
+
+
+    this.rows = temp;
+
+  }
+  updateFilterposition(event) {
+    const val = event.target.value.toLowerCase();
+
+    // filter our data
+    const temp = this.rows.filter(function (d) {
+      return d.position.toLowerCase().indexOf(val) !== -1 || !val;
+    });
+
+
+    this.rows = temp;
+
+  }
+  updateFilteroffice(event) {
+    const val = event.target.value.toLowerCase();
+
+    // filter our data
+    const temp = this.rows.filter(function (d) {
+      return d.office.toLowerCase().indexOf(val) !== -1 || !val;
+    });
+
+
+    this.rows = temp;
+
+  }
+
+  updateFilterage(event) {
+    const val = event.target.value.toLowerCase();
+
+    // filter our data
+    const temp = this.rows.filter(function (d) {
+      return d.age.toLowerCase().indexOf(val) !== -1 || !val;
+    });
+
+
+    this.rows = temp;
+
+  }
+  updateFiltersalary(event) {
+    const val = event.target.value.toLowerCase();
+
+    // filter our data
+    const temp = this.rows.filter(function (d) {
+      return d.salary.toLowerCase().indexOf(val) !== -1 || !val;
+    });
+
+
+    this.rows = temp;
+
+  }
+  updateFilterstartdate(event) {
+    const val = event.target.value.toLowerCase();
+
+    // filter our data
+    const temp = this.rows.filter(function (d) {
+      return d.startdate.toLowerCase().indexOf(val) !== -1 || !val;
+    });
+
+
+    this.rows = temp;
+
+  }
+
+  // eslint-disable-next-line @typescript-eslint/member-ordering
+  private newAttribute = { 'id': 15, name: 'Mark', position: 'Otto', office: '@mdo', age: '31', salary: '12000', startdate: '16/05/2017' };
+
+  addFieldValue() {
+    this.rows.push(this.newAttribute);
+    this.rows = [...this.rows];
+  }
+  deleteFieldValue(index) {
+    this.rows.splice(index, 1);
+  }
+  deleteRow(id) {
+    let i = 0;
+    for (const row of this.rows) {
+      if (row.id === id) {
+        break;
+      }
+      i++;
+    }
+    const temp = [...this.rows];
+    temp.splice(i, 1);
+    this.rows = temp;
+  }
+   updateValue(event, cell, rowIndex) {
+
+    this.editing[rowIndex + '-' + cell] = false;
+    this.row[rowIndex][cell] = event.target.value;
+    const temp = [...this.row];
+    this.row = temp;
+  }
+
+  reloadAddRows() {
+    this.blockUIAddRows.start('Loading..');
+
+    setTimeout(() => {
+      this.blockUIAddRows.stop();
+    }, 2500);
+  }
+  onSelect({ selected }) {
+    this.selected.splice(0, this.selected.length);
+    this.selected.push(...selected);
+  }
+  reloadRowSelection() {
+    this.blockUIRowSelection.start('Loading..');
+
+    setTimeout(() => {
+      this.blockUIRowSelection.stop();
+    }, 2500);
+  }
+  deleteCheckedRow() {
+    let index = 0;
+    const removedIndex = [];
+    const temp = [...this.rows];
+    for (const row of temp) {
+      for (const selectedRow of this.selected) {
+        if (row.id === selectedRow.id) {
+          removedIndex.push(index);
+        }
+      }
+      index++;
+    }
+
+    for (let i = removedIndex.length - 1; i >= 0; i--) {
+      temp.splice(removedIndex[i], 1);
+    }
+    this.rows = temp;
+    this.selected = [];
+  }
+}

src/app/content/hemat-app/device/device.module.ts

@@ -0,0 +1,42 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DeviceComponent } from './device.component';
+import { RouterModule } from '@angular/router';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+
+import { NgSelectModule } from '@ng-select/ng-select';
+import { FormsModule } from '@angular/forms';
+import { ClipboardModule } from 'ngx-clipboard';
+import { CardModule } from '../../partials/general/card/card.module';
+import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
+import { BlockUIModule } from 'ng-block-ui';
+import { BlockTemplateComponent } from '../../../_layout/blockui/block-template.component';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+
+
+
+@NgModule({
+  declarations: [
+    DeviceComponent
+  ],
+  imports: [
+    CommonModule,
+    CardModule,
+    BreadcrumbModule,
+    NgSelectModule,
+    FormsModule,
+    ClipboardModule,
+    PerfectScrollbarModule,
+    NgxDatatableModule,
+    BlockUIModule.forRoot({
+      template: BlockTemplateComponent
+    }),
+    RouterModule.forChild([
+      {
+        path: '',
+        component: DeviceComponent
+      }
+    ])
+  ]
+})
+export class DeviceModule { }