penambahan page cost management
This commit is contained in:
parent
7b4f471047
commit
4f4dde0d07
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -1 +1,191 @@
|
||||||
<p>cost-management works!</p>
|
<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">
|
||||||
|
<section id="configuration">
|
||||||
|
<div class="row">
|
||||||
|
<div
|
||||||
|
class="col-12"
|
||||||
|
*blockUI="'zeroConfiguration'; message: 'Loading'"
|
||||||
|
>
|
||||||
|
<m-card>
|
||||||
|
<ng-container mCardHeaderTitle>
|
||||||
|
Cost Management Table
|
||||||
|
</ng-container>
|
||||||
|
<ng-container mCardBody>
|
||||||
|
<div class="row mb-2">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
placeholder="Search..."
|
||||||
|
[(ngModel)]="searchTerm"
|
||||||
|
(input)="filterRows()"
|
||||||
|
(touchstart)="onTouchStart($event)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 text-right">
|
||||||
|
<button
|
||||||
|
class="btn btn-secondary"
|
||||||
|
[routerLink]="['/device/add-row']"
|
||||||
|
>
|
||||||
|
<i class="feather ft-plus"></i> Add new data
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-dashboard">
|
||||||
|
<ngx-datatable
|
||||||
|
class="bootstrap table-bordered"
|
||||||
|
[limit]="7"
|
||||||
|
[rows]="filteredRows"
|
||||||
|
[columnMode]="'force'"
|
||||||
|
[headerHeight]="50"
|
||||||
|
[footerHeight]="50"
|
||||||
|
[rowHeight]="50"
|
||||||
|
fxFlex="auto"
|
||||||
|
[scrollbarH]="true"
|
||||||
|
>
|
||||||
|
<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]="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-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-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]="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="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="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"
|
||||||
|
>
|
||||||
|
<ng-template
|
||||||
|
ngx-datatable-cell-template
|
||||||
|
let-rowIndex="rowIndex"
|
||||||
|
let-row="row"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="btn btn-sm btn-info mr-1"
|
||||||
|
(click)="viewRow(row)"
|
||||||
|
>
|
||||||
|
<i class="ficon feather ft-eye"></i>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="btn btn-sm btn-warning mr-1"
|
||||||
|
(click)="editRow(row)"
|
||||||
|
>
|
||||||
|
<i class="ficon feather ft-edit"></i>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="btn btn-sm btn-danger"
|
||||||
|
(click)="deleteRow(row)"
|
||||||
|
>
|
||||||
|
<i class="ficon feather ft-trash-2"></i>
|
||||||
|
</button>
|
||||||
|
</ng-template>
|
||||||
|
</ngx-datatable-column>
|
||||||
|
</ngx-datatable>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</m-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,84 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
import { BlockUI, NgBlockUI } from 'ng-block-ui';
|
||||||
|
import { TableApiService } from 'src/app/_services/table-api.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-cost-management',
|
selector: 'app-cost-management',
|
||||||
templateUrl: './cost-management.component.html',
|
templateUrl: './cost-management.component.html',
|
||||||
styleUrls: ['./cost-management.component.css']
|
styleUrls: ['./cost-management.component.css']
|
||||||
})
|
})
|
||||||
export class CostManagementComponent {
|
export class CostManagementComponent implements OnInit{
|
||||||
|
public breadcrumb: any;
|
||||||
|
data: any;
|
||||||
|
filteredRows: any[];
|
||||||
|
searchTerm: string = "";
|
||||||
|
rows: any = [];
|
||||||
|
@BlockUI("zeroConfiguration") blockUIZeroConfiguration: NgBlockUI;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private tableApiservice: TableApiService,
|
||||||
|
private router: Router
|
||||||
|
) {}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.breadcrumb = {
|
||||||
|
mainlabel: "Cost Management",
|
||||||
|
links: [
|
||||||
|
{
|
||||||
|
name: "Home",
|
||||||
|
isLink: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Cost Management",
|
||||||
|
isLink: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
this.fetchData();
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchData() {
|
||||||
|
this.tableApiservice.getTableInitialisationData().subscribe((response) => {
|
||||||
|
this.data = response;
|
||||||
|
this.filteredRows = this.data.rows;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
filterRows() {
|
||||||
|
if (!this.searchTerm) {
|
||||||
|
this.filteredRows = [...this.data.rows];
|
||||||
|
} else {
|
||||||
|
this.filteredRows = this.data.rows.filter((row) =>
|
||||||
|
this.rowContainsSearchTerm(row)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
rowContainsSearchTerm(row: any): boolean {
|
||||||
|
const searchTermLC = this.searchTerm.toLowerCase();
|
||||||
|
return Object.values(row).some(
|
||||||
|
(value) =>
|
||||||
|
value !== null &&
|
||||||
|
value.toString().toLowerCase().includes(searchTermLC)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
viewRow(row) {
|
||||||
|
console.log("View row:", row);
|
||||||
|
this.router.navigate(["/device/view", row.name]);
|
||||||
|
}
|
||||||
|
|
||||||
|
editRow(row) {
|
||||||
|
console.log("Edit row:", row);
|
||||||
|
this.router.navigate(["/device/edit", row.name]);
|
||||||
|
}
|
||||||
|
|
||||||
|
deleteRow(row) {
|
||||||
|
console.log("Delete row:", row);
|
||||||
|
}
|
||||||
|
|
||||||
|
onTouchStart(event: Event) {
|
||||||
|
event.preventDefault(); // Add this if necessary
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,11 @@ import { NgModule } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { CostManagementComponent } from './cost-management.component';
|
import { CostManagementComponent } from './cost-management.component';
|
||||||
import { RouterModule } from '@angular/router';
|
import { RouterModule } from '@angular/router';
|
||||||
|
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
||||||
|
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
|
||||||
|
import { BlockUIModule } from 'ng-block-ui';
|
||||||
|
import { BlockTemplateComponent } from 'src/app/_layout/blockui/block-template.component';
|
||||||
|
import { CardModule } from '../../partials/general/card/card.module';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -11,6 +16,12 @@ import { RouterModule } from '@angular/router';
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule,
|
CommonModule,
|
||||||
|
CardModule,
|
||||||
|
BreadcrumbModule,
|
||||||
|
NgxDatatableModule,
|
||||||
|
BlockUIModule.forRoot({
|
||||||
|
template: BlockTemplateComponent
|
||||||
|
}),
|
||||||
RouterModule.forChild([
|
RouterModule.forChild([
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
|
|
|
||||||
|
|
@ -6,9 +6,15 @@
|
||||||
<div class="content-body">
|
<div class="content-body">
|
||||||
<section id="configuration">
|
<section id="configuration">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12" *blockUI="'zeroConfiguration'; message: 'Loading'">
|
<div
|
||||||
<m-card [options]="options" (reloadFunction)="reloadZeroConfiguration($event)">
|
class="col-12"
|
||||||
|
*blockUI="'zeroConfiguration'; message: 'Loading'"
|
||||||
|
>
|
||||||
|
<m-card>
|
||||||
<ng-container mCardHeaderTitle>
|
<ng-container mCardHeaderTitle>
|
||||||
|
Device Table
|
||||||
|
</ng-container>
|
||||||
|
<ng-container mCardBody>
|
||||||
<div class="row mb-2">
|
<div class="row mb-2">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<input
|
<input
|
||||||
|
|
@ -17,6 +23,7 @@
|
||||||
placeholder="Search..."
|
placeholder="Search..."
|
||||||
[(ngModel)]="searchTerm"
|
[(ngModel)]="searchTerm"
|
||||||
(input)="filterRows()"
|
(input)="filterRows()"
|
||||||
|
(touchstart)="onTouchStart($event)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6 text-right">
|
<div class="col-md-6 text-right">
|
||||||
|
|
@ -28,68 +35,124 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ng-container>
|
|
||||||
<ng-container mCardBody>
|
|
||||||
<div class="card-dashboard">
|
<div class="card-dashboard">
|
||||||
<ngx-datatable class="bootstrap table-bordered" [limit]="7" [rows]="filteredRows" [columnMode]="'force'"
|
<ngx-datatable
|
||||||
[headerHeight]="50" [footerHeight]="50" [rowHeight]="50" fxFlex="auto" [perfectScrollbar]="config">
|
class="bootstrap table-bordered"
|
||||||
<ngx-datatable-column name="#" [flexGrow]="1" [minWidth]="10">
|
[limit]="7"
|
||||||
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex">
|
[rows]="filteredRows"
|
||||||
{{rowIndex+1}}
|
[columnMode]="'force'"
|
||||||
|
[headerHeight]="50"
|
||||||
|
[footerHeight]="50"
|
||||||
|
[rowHeight]="50"
|
||||||
|
fxFlex="auto"
|
||||||
|
[scrollbarH]="true"
|
||||||
|
>
|
||||||
|
<ngx-datatable-column
|
||||||
|
name="#"
|
||||||
|
[flexGrow]="1"
|
||||||
|
[minWidth]="10"
|
||||||
|
>
|
||||||
|
<ng-template
|
||||||
|
ngx-datatable-cell-template
|
||||||
|
let-rowIndex="rowIndex"
|
||||||
|
>
|
||||||
|
{{ rowIndex + 1 }}
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</ngx-datatable-column>
|
</ngx-datatable-column>
|
||||||
<ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="90">
|
<ngx-datatable-column
|
||||||
|
name="Name"
|
||||||
|
[flexGrow]="1"
|
||||||
|
[minWidth]="90"
|
||||||
|
>
|
||||||
<ng-template ngx-datatable-header-template>
|
<ng-template ngx-datatable-header-template>
|
||||||
<span>Device Name</span>
|
<span>Device Name</span>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<ng-template let-value="value" ngx-datatable-cell-template>
|
<ng-template
|
||||||
{{value}}
|
let-value="value"
|
||||||
|
ngx-datatable-cell-template
|
||||||
|
>
|
||||||
|
{{ value }}
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</ngx-datatable-column>
|
</ngx-datatable-column>
|
||||||
<ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
|
<ngx-datatable-column
|
||||||
|
name="Position"
|
||||||
|
[flexGrow]="1"
|
||||||
|
[minWidth]="90"
|
||||||
|
>
|
||||||
<ng-template ngx-datatable-header-template>
|
<ng-template ngx-datatable-header-template>
|
||||||
<span>Category</span>
|
<span>Category</span>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<ng-template ngx-datatable-cell-template let-value="value">
|
<ng-template
|
||||||
{{value}}
|
ngx-datatable-cell-template
|
||||||
|
let-value="value"
|
||||||
|
>
|
||||||
|
{{ value }}
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</ngx-datatable-column>
|
</ngx-datatable-column>
|
||||||
<ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
|
<ngx-datatable-column
|
||||||
|
name="Office"
|
||||||
|
[flexGrow]="1"
|
||||||
|
[minWidth]="90"
|
||||||
|
>
|
||||||
<ng-template ngx-datatable-header-template>
|
<ng-template ngx-datatable-header-template>
|
||||||
<span>Location</span>
|
<span>Location</span>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<ng-template ngx-datatable-cell-template let-value="value">
|
<ng-template
|
||||||
{{value}}
|
ngx-datatable-cell-template
|
||||||
|
let-value="value"
|
||||||
|
>
|
||||||
|
{{ value }}
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</ngx-datatable-column>
|
</ngx-datatable-column>
|
||||||
<ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="40">
|
<ngx-datatable-column
|
||||||
|
name="Age"
|
||||||
|
[flexGrow]="1"
|
||||||
|
[minWidth]="40"
|
||||||
|
>
|
||||||
<ng-template ngx-datatable-header-template>
|
<ng-template ngx-datatable-header-template>
|
||||||
<span>Location Room</span>
|
<span>Location Room</span>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<ng-template ngx-datatable-cell-template let-value="value">
|
<ng-template
|
||||||
{{value}}
|
ngx-datatable-cell-template
|
||||||
|
let-value="value"
|
||||||
|
>
|
||||||
|
{{ value }}
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</ngx-datatable-column>
|
</ngx-datatable-column>
|
||||||
<ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
|
<ngx-datatable-column
|
||||||
|
name="Startdate"
|
||||||
|
[flexGrow]="1"
|
||||||
|
[minWidth]="90"
|
||||||
|
>
|
||||||
<ng-template ngx-datatable-header-template>
|
<ng-template ngx-datatable-header-template>
|
||||||
<span>Duration Use</span>
|
<span>Duration Use</span>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<ng-template ngx-datatable-cell-template let-value="value">
|
<ng-template
|
||||||
{{value}}
|
ngx-datatable-cell-template
|
||||||
|
let-value="value"
|
||||||
|
>
|
||||||
|
{{ value }}
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</ngx-datatable-column>
|
</ngx-datatable-column>
|
||||||
<ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
|
<ngx-datatable-column
|
||||||
|
name="Salary"
|
||||||
|
[flexGrow]="1"
|
||||||
|
[minWidth]="90"
|
||||||
|
>
|
||||||
<ng-template ngx-datatable-header-template>
|
<ng-template ngx-datatable-header-template>
|
||||||
<span>Status</span>
|
<span>Status</span>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<ng-template ngx-datatable-cell-template let-value="value">
|
<ng-template
|
||||||
{{value}}
|
ngx-datatable-cell-template
|
||||||
|
let-value="value"
|
||||||
|
>
|
||||||
|
{{ value }}
|
||||||
</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]="90"
|
[minWidth]="150"
|
||||||
>
|
>
|
||||||
<ng-template
|
<ng-template
|
||||||
ngx-datatable-cell-template
|
ngx-datatable-cell-template
|
||||||
|
|
|
||||||
|
|
@ -15,21 +15,10 @@ export class DeviceComponent implements OnInit {
|
||||||
filteredRows: any[];
|
filteredRows: any[];
|
||||||
searchTerm: string = "";
|
searchTerm: string = "";
|
||||||
rows: any = [];
|
rows: any = [];
|
||||||
defaultrows: any;
|
|
||||||
DOMrows: any;
|
|
||||||
Scrollrows: any;
|
|
||||||
temp2 = this.rows;
|
|
||||||
public breadcrumb: any;
|
public breadcrumb: any;
|
||||||
|
|
||||||
@BlockUI("zeroConfiguration") blockUIZeroConfiguration: NgBlockUI;
|
@BlockUI("zeroConfiguration") blockUIZeroConfiguration: NgBlockUI;
|
||||||
|
|
||||||
options = {
|
|
||||||
close: true,
|
|
||||||
expand: true,
|
|
||||||
minimize: true,
|
|
||||||
reload: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private tableApiservice: TableApiService,
|
private tableApiservice: TableApiService,
|
||||||
private modalService: NgbModal,
|
private modalService: NgbModal,
|
||||||
|
|
@ -120,4 +109,8 @@ export class DeviceComponent implements OnInit {
|
||||||
deleteRow(row) {
|
deleteRow(row) {
|
||||||
console.log("Delete row:", row);
|
console.log("Delete row:", row);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onTouchStart(event: Event) {
|
||||||
|
event.preventDefault(); // Add this if necessary
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue