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> <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
</div> </div>
<div class="content-body"> <div class="content-body">
<!-- Add rows table --> <section id="configuration">
<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>
<div class="row"> <div class="row">
<div class="col-12" *blockUI="'addRows'; message: 'Loading'"> <div class="col-12" *blockUI="'zeroConfiguration'; message: 'Loading'">
<m-card <m-card [options]="options" (reloadFunction)="reloadZeroConfiguration($event)">
[options]="options" <ng-container mCardHeaderTitle>
(reloadFunction)="reloadAddRows($event)" <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> <ng-container mCardBody>
<div class="table table-striped table-bordered add-rows"> <div class="card-dashboard">
<ngx-datatable <ngx-datatable class="bootstrap table-bordered" [limit]="7" [rows]="filteredRows" [columnMode]="'force'"
class="bootstrap" [headerHeight]="50" [footerHeight]="50" [rowHeight]="50" fxFlex="auto" [perfectScrollbar]="config">
[sortType]="'multi'" <ngx-datatable-column name="#" [flexGrow]="1" [minWidth]="10">
[headerHeight]="50" <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex">
[limit]="10" {{rowIndex+1}}
[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>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column <ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="90">
name="Name" <ng-template ngx-datatable-header-template>
[flexGrow]="1" <span>Device Name</span>
[minWidth]="70" </ng-template>
> <ng-template let-value="value" ngx-datatable-cell-template>
<ng-template {{value}}
ngx-datatable-cell-template
let-rowIndex="rowIndex"
*ngfor
let
element
of
rows
>
<span>
{{ element.name }}
</span>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column <ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
name="Position" <ng-template ngx-datatable-header-template>
[flexGrow]="1" <span>Category</span>
[minWidth]="90" </ng-template>
> <ng-template ngx-datatable-cell-template let-value="value">
<ng-template {{value}}
ngx-datatable-cell-template
let-rowIndex="rowIndex"
let-row="row"
*ngfor
let
element
of
rows
>
<span>
{{ element.position }}
</span>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column <ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
name="Office" <ng-template ngx-datatable-header-template>
[flexGrow]="1" <span>Location</span>
[minWidth]="90" </ng-template>
> <ng-template ngx-datatable-cell-template let-value="value">
<ng-template {{value}}
ngx-datatable-cell-template
*ngfor
let
element
of
rows
>
{{ element.office }}
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column <ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="40">
name="Age" <ng-template ngx-datatable-header-template>
[flexGrow]="1" <span>Location Room</span>
[minWidth]="30" </ng-template>
> <ng-template ngx-datatable-cell-template let-value="value">
<ng-template {{value}}
ngx-datatable-cell-template
*ngfor
let
element
of
rows
>
{{ element.age }}
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column <ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
name="Salary" <ng-template ngx-datatable-header-template>
[flexGrow]="1" <span>Duration Use</span>
[minWidth]="90" </ng-template>
> <ng-template ngx-datatable-cell-template let-value="value">
<ng-template {{value}}
ngx-datatable-cell-template
*ngfor
let
element
of
rows
>
{{ element.salary }}
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column <ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
name="Startdate" <ng-template ngx-datatable-header-template>
[flexGrow]="1" <span>Status</span>
[minWidth]="90" </ng-template>
> <ng-template ngx-datatable-cell-template let-value="value">
<ng-template {{value}}
ngx-datatable-cell-template
*ngfor
let
element
of
rows
>
{{ element.startdate }}
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column <ngx-datatable-column
name="Actions" name="Actions"
[flexGrow]="1" [flexGrow]="1"
[minWidth]="150" [minWidth]="90"
> >
<ng-template <ng-template
ngx-datatable-cell-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 { Component, OnInit, ViewChild } from "@angular/core";
import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
import { NgBlockUI, BlockUI } from "ng-block-ui"; 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 { TableApiService } from "src/app/_services/table-api.service";
import { ModalAddEditComponent } from "./modal-add-edit/modal-add-edit.component"; import { ModalAddEditComponent } from "./modal-add-edit/modal-add-edit.component";
import { ActivatedRoute, Router } from "@angular/router"; import { ActivatedRoute, Router } from "@angular/router";
@ -18,16 +13,15 @@ import { ActivatedRoute, Router } from "@angular/router";
export class DeviceComponent implements OnInit { export class DeviceComponent implements OnInit {
data: any; data: any;
filteredRows: 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("zeroConfiguration") blockUIZeroConfiguration: NgBlockUI;
@BlockUI("rowSelection") blockUIRowSelection: NgBlockUI;
public config: PerfectScrollbarConfigInterface = { wheelPropagation: true };
@ViewChild(PerfectScrollbarComponent)
componentRef?: PerfectScrollbarComponent;
@ViewChild(PerfectScrollbarDirective, { static: true })
directiveRef?: PerfectScrollbarDirective;
options = { options = {
close: true, close: true,
@ -35,14 +29,6 @@ export class DeviceComponent implements OnInit {
minimize: true, minimize: true,
reload: true, reload: true,
}; };
temp = [];
selected = [];
id: number;
loadingIndicator: true;
rows: any;
editing = {};
row: any;
public breadcrumb: any;
constructor( constructor(
private tableApiservice: TableApiService, private tableApiservice: TableApiService,
@ -51,11 +37,25 @@ export class DeviceComponent implements OnInit {
) {} ) {}
ngOnInit() { ngOnInit() {
this.breadcrumb = {
mainlabel: "Device",
links: [
{
name: "Home",
isLink: false,
link: "/dashboard/sales",
},
{
name: "Device",
isLink: false,
},
],
};
this.fetchData(); this.fetchData();
} }
fetchData() { fetchData() {
this.tableApiservice.getTableApiData().subscribe((response) => { this.tableApiservice.getTableInitialisationData().subscribe((response) => {
this.data = response; this.data = response;
this.filteredRows = this.data.rows; 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() { addFieldValue() {
const modalRef = this.modalService.open(ModalAddEditComponent, { size: 'lg' }); const modalRef = this.modalService.open(ModalAddEditComponent, {
modalRef.componentInstance.newAttribute = { id: null, name: '', position: '', office: '', age: '', salary: '', startdate: '' }; size: "lg",
modalRef.result.then((result) => {
if (result) {
this.rows.push(result);
this.rows = [...this.rows];
}
}, (reason) => {
console.log(`Dismissed: ${reason}`);
}); });
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) { viewRow(row) {
console.log("View row:", row); console.log("View row:", row);
this.router.navigate(['/device/view', row.id]); this.router.navigate(["/device/view", row.name]);
} }
editRow(row) { editRow(row) {
console.log("Edit row:", row); console.log("Edit row:", row);
this.router.navigate(['/device/edit', row.id]); this.router.navigate(["/device/edit", row.name]);
} }
deleteRow(row) { deleteRow(row) {
console.log("Delete row:", row); console.log("Delete row:", row);
} }
} }