penambahan form edit dan view

src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.html

@@ -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

src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts

@@ -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

src/app/content/hemat-app/device/device.component.html

@@ -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>&nbsp; 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>&nbsp; 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>

src/app/content/hemat-app/device/device.component.ts

@@ -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 = {
+    this.fetchData();
-      mainlabel: "Device List",
+  }
-      links: [
-        {
-          name: "Home",
-          isLink: false,
-          link: "/dashboard/sales",
-        },
-        {
-          name: "Device",
-          isLink: false,
-        },
-      ],
-    };
-    this.tableApiservice.getTableApiData().subscribe((Response) => {
-      console.log(Response);
 
-      this.data = Response;
+  fetchData() {
-      this.getTabledata();
+    this.tableApiservice.getTableApiData().subscribe((response) => {
+      this.data = response;
+      this.filteredRows = this.data.rows;
     });
   }
 
-  getTabledata() {
+  filterRows() {
-    this.rows = this.data.rows;
+    if (!this.searchTerm) {
-    this.row = this.data.row;
+      this.filteredRows = [...this.data.rows];
+    } else {
+      this.filteredRows = this.data.rows.filter((row) =>
+        this.rowContainsSearchTerm(row)
+      );
+    }
   }
 
-  private newAttribute = {
+  rowContainsSearchTerm(row: any): boolean {
-    id: 15,
+    const searchTermLC = this.searchTerm.toLowerCase();
-    name: "Mark",
+    return Object.values(row).some(
-    position: "Otto",
+      (value) =>
-    office: "@mdo",
+        value !== null &&
-    age: "31",
+        value.toString().toLowerCase().includes(searchTermLC)
-    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);
@@ -102,5 +108,20 @@ export class DeviceComponent implements OnInit {
       console.log(`Dismissed: ${reason}`);
     });
   }
+
+  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);
+  }
+  
   
 }

src/app/content/hemat-app/device/device.module.ts

@@ -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' } 
       }
     ])
   ]