penambahan form edit dan view
This commit is contained in:
parent
dc74154a27
commit
e3315bd761
@ -11,7 +11,15 @@
|
||||
(reloadFunction)="reloadProjectInfo($event)"
|
||||
>
|
||||
<ng-container mCardHeaderTitle>
|
||||
Project Info (Reactive Forms Validation)
|
||||
<h2>
|
||||
{{
|
||||
isEditMode()
|
||||
? "Edit Device"
|
||||
: isViewMode()
|
||||
? "View Device"
|
||||
: "Add New Device"
|
||||
}}
|
||||
</h2>
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<form
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Component, ViewChild } from "@angular/core";
|
||||
import { FormBuilder, FormGroup, NgForm, Validators } from "@angular/forms";
|
||||
import { Router } from "@angular/router";
|
||||
import { ActivatedRoute, Router } from "@angular/router";
|
||||
import { BlockUI, NgBlockUI } from "ng-block-ui";
|
||||
|
||||
@Component({
|
||||
@ -12,6 +12,7 @@ export class AddEditDeviceComponent {
|
||||
@ViewChild("f", { read: true }) userProfileForm: NgForm;
|
||||
|
||||
model: any = {};
|
||||
mode: string;
|
||||
|
||||
@BlockUI("projectInfo") blockUIProjectInfo: NgBlockUI;
|
||||
@BlockUI("userProfile") blockUIUserProfile: NgBlockUI;
|
||||
@ -49,9 +50,17 @@ export class AddEditDeviceComponent {
|
||||
priority = ["Low", "Medium", "High"];
|
||||
status = ["Not Started", "Started", "Fixed"];
|
||||
|
||||
constructor(private formBuilder: FormBuilder, private router: Router) {}
|
||||
constructor(
|
||||
private formBuilder: FormBuilder,
|
||||
private router: Router,
|
||||
private route: ActivatedRoute
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.route.data.subscribe((data) => {
|
||||
this.mode = data.mode;
|
||||
console.log(this.mode);
|
||||
});
|
||||
this.breadcrumb = {
|
||||
mainlabel: "Basic Forms",
|
||||
links: [
|
||||
@ -85,6 +94,18 @@ export class AddEditDeviceComponent {
|
||||
});
|
||||
}
|
||||
|
||||
isEditMode() {
|
||||
return this.mode === "edit";
|
||||
}
|
||||
|
||||
isViewMode() {
|
||||
return this.mode === "view";
|
||||
}
|
||||
|
||||
isAddMode() {
|
||||
return this.mode === "add";
|
||||
}
|
||||
|
||||
get f() {
|
||||
return this.projectInfo.controls;
|
||||
}
|
||||
@ -122,9 +143,7 @@ export class AddEditDeviceComponent {
|
||||
}
|
||||
}
|
||||
|
||||
addData(){
|
||||
|
||||
}
|
||||
addData() {}
|
||||
|
||||
cancel() {
|
||||
this.router.navigate(["/device"]); // Adjust the path as per your routing setup
|
||||
|
||||
@ -6,6 +6,25 @@
|
||||
<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> Add new row
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'addRows'; message: 'Loading'">
|
||||
<m-card
|
||||
@ -13,42 +32,30 @@
|
||||
(reloadFunction)="reloadAddRows($event)"
|
||||
>
|
||||
<ng-container mCardBody>
|
||||
<button
|
||||
id="addRow"
|
||||
class="btn btn-secondary my-1 mb-2"
|
||||
[routerLink]="['/device/add-row']"
|
||||
>
|
||||
<i class="feather ft-plus"></i> Add new row
|
||||
</button>
|
||||
<div class="table table-striped table-bordered add-rows">
|
||||
<ngx-datatable
|
||||
class="bootstrap"
|
||||
[sortType]="'multi'"
|
||||
[headerHeight]="50"
|
||||
[limit]="7"
|
||||
[limit]="10"
|
||||
[footerHeight]="40"
|
||||
[rowHeight]="40"
|
||||
[rows]="rows"
|
||||
[rows]="filteredRows"
|
||||
[columnMode]="'force'"
|
||||
[loadingIndicator]="loadingIndicator"
|
||||
fxFlex="auto"
|
||||
[perfectScrollbar]="config"
|
||||
>
|
||||
<ngx-datatable-column
|
||||
name="ID"
|
||||
name="#"
|
||||
[flexGrow]="1"
|
||||
[minWidth]="20"
|
||||
>
|
||||
<ng-template
|
||||
ngx-datatable-cell-template
|
||||
let-rowIndex="rowIndex"
|
||||
*ngfor
|
||||
let
|
||||
element
|
||||
of
|
||||
rows
|
||||
>
|
||||
<b>{{ element.id }}</b>
|
||||
<b>{{ rowIndex + 1 }}</b>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column
|
||||
@ -90,7 +97,6 @@
|
||||
</span>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
|
||||
<ngx-datatable-column
|
||||
name="Office"
|
||||
[flexGrow]="1"
|
||||
@ -107,7 +113,6 @@
|
||||
{{ element.office }}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
|
||||
<ngx-datatable-column
|
||||
name="Age"
|
||||
[flexGrow]="1"
|
||||
@ -156,6 +161,36 @@
|
||||
{{ element.startdate }}
|
||||
</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>
|
||||
|
||||
@ -8,6 +8,7 @@ import {
|
||||
} 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";
|
||||
|
||||
@Component({
|
||||
selector: "app-device",
|
||||
@ -16,6 +17,8 @@ import { ModalAddEditComponent } from "./modal-add-edit/modal-add-edit.component
|
||||
})
|
||||
export class DeviceComponent implements OnInit {
|
||||
data: any;
|
||||
filteredRows: any[];
|
||||
searchTerm: string = '';
|
||||
|
||||
@BlockUI("addRows") blockUIAddRows: NgBlockUI;
|
||||
@BlockUI("rowSelection") blockUIRowSelection: NgBlockUI;
|
||||
@ -43,46 +46,49 @@ export class DeviceComponent implements OnInit {
|
||||
|
||||
constructor(
|
||||
private tableApiservice: TableApiService,
|
||||
private modalService: NgbModal
|
||||
private modalService: NgbModal,
|
||||
private router: Router
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
mainlabel: "Device List",
|
||||
links: [
|
||||
{
|
||||
name: "Home",
|
||||
isLink: false,
|
||||
link: "/dashboard/sales",
|
||||
},
|
||||
{
|
||||
name: "Device",
|
||||
isLink: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
this.tableApiservice.getTableApiData().subscribe((Response) => {
|
||||
console.log(Response);
|
||||
this.fetchData();
|
||||
}
|
||||
|
||||
this.data = Response;
|
||||
this.getTabledata();
|
||||
fetchData() {
|
||||
this.tableApiservice.getTableApiData().subscribe((response) => {
|
||||
this.data = response;
|
||||
this.filteredRows = this.data.rows;
|
||||
});
|
||||
}
|
||||
|
||||
getTabledata() {
|
||||
this.rows = this.data.rows;
|
||||
this.row = this.data.row;
|
||||
filterRows() {
|
||||
if (!this.searchTerm) {
|
||||
this.filteredRows = [...this.data.rows];
|
||||
} else {
|
||||
this.filteredRows = this.data.rows.filter((row) =>
|
||||
this.rowContainsSearchTerm(row)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
private newAttribute = {
|
||||
id: 15,
|
||||
name: "Mark",
|
||||
position: "Otto",
|
||||
office: "@mdo",
|
||||
age: "31",
|
||||
salary: "12000",
|
||||
startdate: "16/05/2017",
|
||||
};
|
||||
rowContainsSearchTerm(row: any): boolean {
|
||||
const searchTermLC = this.searchTerm.toLowerCase();
|
||||
return Object.values(row).some(
|
||||
(value) =>
|
||||
value !== null &&
|
||||
value.toString().toLowerCase().includes(searchTermLC)
|
||||
);
|
||||
}
|
||||
|
||||
// private newAttribute = {
|
||||
// id: 15,
|
||||
// name: "Mark",
|
||||
// position: "Otto",
|
||||
// office: "@mdo",
|
||||
// age: "31",
|
||||
// salary: "12000",
|
||||
// startdate: "16/05/2017",
|
||||
// };
|
||||
|
||||
// addFieldValue() {
|
||||
// this.rows.push(this.newAttribute);
|
||||
@ -103,4 +109,19 @@ export class DeviceComponent implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
viewRow(row) {
|
||||
console.log("View row:", row);
|
||||
this.router.navigate(['/device/view', row.id]);
|
||||
}
|
||||
|
||||
editRow(row) {
|
||||
console.log("Edit row:", row);
|
||||
this.router.navigate(['/device/edit', row.id]);
|
||||
}
|
||||
|
||||
deleteRow(row) {
|
||||
console.log("Delete row:", row);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -43,7 +43,18 @@ import { ModalAddEditComponent } from './modal-add-edit/modal-add-edit.component
|
||||
},
|
||||
{
|
||||
path: 'add-row',
|
||||
component: AddEditDeviceComponent
|
||||
component: AddEditDeviceComponent,
|
||||
data: { mode: 'add' }
|
||||
},
|
||||
{
|
||||
path: 'edit/:id',
|
||||
component: AddEditDeviceComponent,
|
||||
data: { mode: 'edit' }
|
||||
},
|
||||
{
|
||||
path: 'view/:id',
|
||||
component: AddEditDeviceComponent,
|
||||
data: { mode: 'view' }
|
||||
}
|
||||
])
|
||||
]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user