fuzi_fauzia/hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

penambahan table device

Browse Source
This commit is contained in:
Fuzi_fauzia 2024-04-19 16:09:00 +07:00
parent 14ad53025f
commit dbc89d326f
2 changed files with 210 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

229
src/app/content/hemat-app/device/device.component.html
View File

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

203
src/app/content/hemat-app/device/device.component.ts
View File

@ -1,28 +1,35 @@
import { Component, OnInit, ViewChild } from '@angular/core'; import { Component, OnInit, ViewChild } from "@angular/core";
import { NgBlockUI, BlockUI } from 'ng-block-ui'; import { log } from "console";
import { PerfectScrollbarDirective, PerfectScrollbarComponent, PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar'; import { NgBlockUI, BlockUI } from "ng-block-ui";
import { TableApiService } from 'src/app/_services/table-api.service'; import {
PerfectScrollbarDirective,
PerfectScrollbarComponent,
PerfectScrollbarConfigInterface,
} from "ngx-perfect-scrollbar";
import { TableApiService } from "src/app/_services/table-api.service";
@Component({ @Component({
selector: 'app-device', selector: "app-device",
templateUrl: './device.component.html', templateUrl: "./device.component.html",
styleUrls: ['./device.component.css'] styleUrls: ["./device.component.css"],
}) })
export class DeviceComponent implements OnInit{ export class DeviceComponent implements OnInit {
data: any; data: any;
@BlockUI('addRows') blockUIAddRows: NgBlockUI; @BlockUI("addRows") blockUIAddRows: NgBlockUI;
@BlockUI('rowSelection') blockUIRowSelection: NgBlockUI; @BlockUI("rowSelection") blockUIRowSelection: NgBlockUI;
public config: PerfectScrollbarConfigInterface = { wheelPropagation: true }; public config: PerfectScrollbarConfigInterface = { wheelPropagation: true };
@ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent; @ViewChild(PerfectScrollbarComponent)
@ViewChild(PerfectScrollbarDirective, { static: true }) directiveRef?: PerfectScrollbarDirective; componentRef?: PerfectScrollbarComponent;
@ViewChild(PerfectScrollbarDirective, { static: true })
directiveRef?: PerfectScrollbarDirective;
options = { options = {
close: true, close: true,
expand: true, expand: true,
minimize: true, minimize: true,
reload: true reload: true,
}; };
temp = []; temp = [];
selected = []; selected = [];
@ -33,171 +40,49 @@ export class DeviceComponent implements OnInit{
row: any; row: any;
public breadcrumb: any; public breadcrumb: any;
constructor(private tableApiservice: TableApiService) { } constructor(private tableApiservice: TableApiService) {}
ngOnInit() { ngOnInit() {
this.breadcrumb = { this.breadcrumb = {
'mainlabel': 'Device List', mainlabel: "Device List",
'links': [ links: [
{ {
'name': 'Home', name: "Home",
'isLink': false, isLink: false,
'link': '/dashboard/sales' link: "/dashboard/sales",
}, },
{ {
'name': 'Device', name: "Device",
'isLink': false isLink: false,
} },
] ],
}; };
this.tableApiservice.getTableApiData().subscribe(Response => { this.tableApiservice.getTableApiData().subscribe((Response) => {
console.log(Response);
this.data = Response; this.data = Response;
this.getTabledata(); this.getTabledata();
}); });
} }
getTabledata() { getTabledata() {
this.rows = this.data.rows; this.rows = this.data.rows;
this.row = this.data.row; 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 // 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' }; private newAttribute = {
id: 15,
name: "Mark",
position: "Otto",
office: "@mdo",
age: "31",
salary: "12000",
startdate: "16/05/2017",
};
addFieldValue() { addFieldValue() {
this.rows.push(this.newAttribute); this.rows.push(this.newAttribute);
this.rows = [...this.rows]; 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 = [];
}
} }