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

perubahan label kolom table device

This commit is contained in:
Fuzi_fauzia 2024-04-20 22:55:45 +07:00
parent e3315bd761
commit 7b4f471047
2 changed files with 117 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,167 +4,92 @@
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
</div>
<div class="content-body">
<!-- Add rows table -->
<section id="add-row">
<div class="row mb-2">
<div class="col-md-6">
<input
type="text"
class="form-control"
placeholder="Search..."
[(ngModel)]="searchTerm"
(input)="filterRows()"
/>
</div>
<div class="col-md-6 text-right">
<button
class="btn btn-secondary"
[routerLink]="['/device/add-row']"
>
<i class="feather ft-plus"></i>&nbsp; Add new row
</button>
</div>
</div>
<section id="configuration">
<div class="row">
<div class="col-12" *blockUI="'addRows'; message: 'Loading'">
<m-card
[options]="options"
(reloadFunction)="reloadAddRows($event)"
>
<div class="col-12" *blockUI="'zeroConfiguration'; message: 'Loading'">
<m-card [options]="options" (reloadFunction)="reloadZeroConfiguration($event)">
<ng-container mCardHeaderTitle>
<div class="row mb-2">
<div class="col-md-6">
<input
type="text"
class="form-control"
placeholder="Search..."
[(ngModel)]="searchTerm"
(input)="filterRows()"
/>
</div>
<div class="col-md-6 text-right">
<button
class="btn btn-secondary"
[routerLink]="['/device/add-row']"
>
<i class="feather ft-plus"></i>&nbsp; Add new device
</button>
</div>
</div>
</ng-container>
<ng-container mCardBody>
<div class="table table-striped table-bordered add-rows">
<ngx-datatable
class="bootstrap"
[sortType]="'multi'"
[headerHeight]="50"
[limit]="10"
[footerHeight]="40"
[rowHeight]="40"
[rows]="filteredRows"
[columnMode]="'force'"
[loadingIndicator]="loadingIndicator"
fxFlex="auto"
[perfectScrollbar]="config"
>
<ngx-datatable-column
name="#"
[flexGrow]="1"
[minWidth]="20"
>
<ng-template
ngx-datatable-cell-template
let-rowIndex="rowIndex"
>
<b>{{ rowIndex + 1 }}</b>
<div class="card-dashboard">
<ngx-datatable class="bootstrap table-bordered" [limit]="7" [rows]="filteredRows" [columnMode]="'force'"
[headerHeight]="50" [footerHeight]="50" [rowHeight]="50" fxFlex="auto" [perfectScrollbar]="config">
<ngx-datatable-column name="#" [flexGrow]="1" [minWidth]="10">
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex">
{{rowIndex+1}}
</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>
<ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="90">
<ng-template ngx-datatable-header-template>
<span>Device Name</span>
</ng-template>
<ng-template let-value="value" ngx-datatable-cell-template>
{{value}}
</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>
<ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
<ng-template ngx-datatable-header-template>
<span>Category</span>
</ng-template>
<ng-template ngx-datatable-cell-template let-value="value">
{{value}}
</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 }}
<ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
<ng-template ngx-datatable-header-template>
<span>Location</span>
</ng-template>
<ng-template ngx-datatable-cell-template let-value="value">
{{value}}
</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 }}
<ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="40">
<ng-template ngx-datatable-header-template>
<span>Location Room</span>
</ng-template>
<ng-template ngx-datatable-cell-template let-value="value">
{{value}}
</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 }}
<ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
<ng-template ngx-datatable-header-template>
<span>Duration Use</span>
</ng-template>
<ng-template ngx-datatable-cell-template let-value="value">
{{value}}
</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 }}
<ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
<ng-template ngx-datatable-header-template>
<span>Status</span>
</ng-template>
<ng-template ngx-datatable-cell-template let-value="value">
{{value}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="Actions"
[flexGrow]="1"
[minWidth]="150"
[minWidth]="90"
>
<ng-template
ngx-datatable-cell-template

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

@ -1,11 +1,6 @@
import { Component, OnInit, ViewChild } from "@angular/core";
import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
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 { ModalAddEditComponent } from "./modal-add-edit/modal-add-edit.component";
import { ActivatedRoute, Router } from "@angular/router";
@ -18,16 +13,15 @@ import { ActivatedRoute, Router } from "@angular/router";
export class DeviceComponent implements OnInit {
data: any;
filteredRows: any[];
searchTerm: string = '';
searchTerm: string = "";
rows: any = [];
defaultrows: any;
DOMrows: any;
Scrollrows: any;
temp2 = this.rows;
public breadcrumb: any;
@BlockUI("addRows") blockUIAddRows: NgBlockUI;
@BlockUI("rowSelection") blockUIRowSelection: NgBlockUI;
public config: PerfectScrollbarConfigInterface = { wheelPropagation: true };
@ViewChild(PerfectScrollbarComponent)
componentRef?: PerfectScrollbarComponent;
@ViewChild(PerfectScrollbarDirective, { static: true })
directiveRef?: PerfectScrollbarDirective;
@BlockUI("zeroConfiguration") blockUIZeroConfiguration: NgBlockUI;
options = {
close: true,
@ -35,14 +29,6 @@ export class DeviceComponent implements OnInit {
minimize: true,
reload: true,
};
temp = [];
selected = [];
id: number;
loadingIndicator: true;
rows: any;
editing = {};
row: any;
public breadcrumb: any;
constructor(
private tableApiservice: TableApiService,
@ -51,11 +37,25 @@ export class DeviceComponent implements OnInit {
) {}
ngOnInit() {
this.breadcrumb = {
mainlabel: "Device",
links: [
{
name: "Home",
isLink: false,
link: "/dashboard/sales",
},
{
name: "Device",
isLink: false,
},
],
};
this.fetchData();
}
fetchData() {
this.tableApiservice.getTableApiData().subscribe((response) => {
this.tableApiservice.getTableInitialisationData().subscribe((response) => {
this.data = response;
this.filteredRows = this.data.rows;
});
@ -80,48 +80,44 @@ export class DeviceComponent implements OnInit {
);
}
// 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];
// }
addFieldValue() {
const modalRef = this.modalService.open(ModalAddEditComponent, { size: 'lg' });
modalRef.componentInstance.newAttribute = { id: null, name: '', position: '', office: '', age: '', salary: '', startdate: '' };
modalRef.result.then((result) => {
if (result) {
this.rows.push(result);
this.rows = [...this.rows];
}
}, (reason) => {
console.log(`Dismissed: ${reason}`);
const modalRef = this.modalService.open(ModalAddEditComponent, {
size: "lg",
});
modalRef.componentInstance.newAttribute = {
id: null,
name: "",
position: "",
office: "",
age: "",
salary: "",
startdate: "",
};
modalRef.result.then(
(result) => {
if (result) {
this.rows.push(result);
this.rows = [...this.rows];
}
},
(reason) => {
console.log(`Dismissed: ${reason}`);
}
);
}
viewRow(row) {
console.log("View row:", row);
this.router.navigate(['/device/view', row.id]);
this.router.navigate(["/device/view", row.name]);
}
editRow(row) {
console.log("Edit row:", row);
this.router.navigate(['/device/edit', row.id]);
this.router.navigate(["/device/edit", row.name]);
}
deleteRow(row) {
console.log("Delete row:", row);
}
}