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

penambahan table device

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