Finished the Client-delivery COmponent, Added AG-Grid for managing table

2025-03-24 14:02:43 +06:00
parent 000ea0b72b
commit a4bddd68a1
10 changed files with 210 additions and 30 deletions
--- a/backend-server/src/index.ts
+++ b/backend-server/src/index.ts
@@ -285,8 +285,8 @@ app.put("/api/delivery/update/:id", async(req, res)=> {
    res.status(200).send("Delivery Type Updated")
 })

-//TODO: FIx the file structure
-//TODO: delivery Delete
+//TODO1: FIx the file structure
+//TODO2: delivery Delete

 const PORT = 3000;
 app.listen(PORT,()=>{
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,8 @@
        "@angular/platform-browser": "^18.2.0",
        "@angular/platform-browser-dynamic": "^18.2.0",
        "@angular/router": "^18.2.0",
+        "ag-grid-angular": "^33.1.1",
+        "ag-grid-community": "^33.1.1",
        "express": "^4.21.1",
        "ngx-clipboard": "^16.0.0",
        "rxjs": "~7.8.0",
@@ -4769,6 +4771,35 @@
        "node": ">=8.9.0"
      }
    },
+    "node_modules/ag-charts-types": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-11.1.1.tgz",
+      "integrity": "sha512-bRmUcf5VVhEEekhX8Vk0NSwa8Te8YM/zchjyYKR2CX4vDYiwoohM1Jg9RFvbIhVbLC1S6QrPEbx5v2C6RDfpSA==",
+      "license": "MIT"
+    },
+    "node_modules/ag-grid-angular": {
+      "version": "33.1.1",
+      "resolved": "https://registry.npmjs.org/ag-grid-angular/-/ag-grid-angular-33.1.1.tgz",
+      "integrity": "sha512-6U0oM4ofcXB1q318dYkWnsFuz6Ne2aKZ9E8A+6IPsx5/9UaF9VlBaA2hIlKXDf2O1JPdoO6gnkm81OAyVu81wQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ag-grid-community": "33.1.1",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">= 17.0.0",
+        "@angular/core": ">= 17.0.0"
+      }
+    },
+    "node_modules/ag-grid-community": {
+      "version": "33.1.1",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-33.1.1.tgz",
+      "integrity": "sha512-CNubIro0ipj4nfQ5WJPG9Isp7UI6MMDvNzrPdHNf3W+IoM8Uv3RUhjEn7xQqpQHuu6o/tMjrqpacipMUkhzqnw==",
+      "license": "MIT",
+      "dependencies": {
+        "ag-charts-types": "11.1.1"
+      }
+    },
    "node_modules/agent-base": {
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
--- a/package.json
+++ b/package.json
@@ -18,6 +18,8 @@
    "@angular/platform-browser": "^18.2.0",
    "@angular/platform-browser-dynamic": "^18.2.0",
    "@angular/router": "^18.2.0",
+    "ag-grid-angular": "^33.1.1",
+    "ag-grid-community": "^33.1.1",
    "express": "^4.21.1",
    "ngx-clipboard": "^16.0.0",
    "rxjs": "~7.8.0",
--- a/src/app/components/pages/client-service/client-service.component.html
+++ b/src/app/components/pages/client-service/client-service.component.html
@@ -1,8 +1,10 @@
 <div class="container">
    <div class="form-container">
        <form action="" #clientForm="ngForm" (ngSubmit)="addNewClient()">
-            <label for="clientName">Client Name</label>
-            <input type="text" id="clientName" name="clientName" placeholder="Enter client name" [(ngModel)]="newClient.client_name" #clientName="ngModel" required>
+            <div class="form-control">
+                <label for="clientName">Client Name</label>
+                <input type="text" id="clientName" name="clientName" placeholder="Enter client name" [(ngModel)]="newClient.client_name" #clientName="ngModel" required>
+            </div>
            <div class="form-control">
                <label for="clientDeliveryStatus">Client Delivery Status</label>
                <select type="text" id="clientDeliveryStatus" name="clientDeliveryStatus"  placeholder="Enter delivery status" [(ngModel)]="newClient.delivery_status" #clientDeliveryStatus="ngModel" required>
@@ -14,27 +16,35 @@
            <div class="form-control" id="type">
                <label for="clientDeliveryType">Client Delivery Type</label>
                <select type="text" id="clientDeliveryType" name="clientDeliveryType" placeholder="Enter delivery type" [(ngModel)]="newClient.delivery_type" #clientDeliveryType="ngModel" required>
-                    <option value="test">Test</option>
+                    <option value="remove">Delivery</option>
+                    <option value="test">Test - End</option>
                    <option value="termination">Termination</option>
                    <option value="remove">Remove VM</option>
                </select>
            </div>
-            <label for="clientDeliveryDate">Client Delivery Date</label>
-            <input type="date" id="clientDeliveryDate" name="clientDeliveryDate"  placeholder="Enter delivery date" [(ngModel)]="newClient.delivery_date" #clientDeliveryDate="ngModel" required>
-            <label for="remarks">Remarks</label>
-            <input type="text" id="remarks" name="remarks"  placeholder="Enter Remarks" [(ngModel)]="newClient.remarks" #remarks="ngModel" required>
-            <button type="submit" [disabled]="clientForm.invalid">Add</button>
+            <div class="form-control">
+                <label for="clientDeliveryDate">Client Delivery Date</label>
+                <input type="date" id="clientDeliveryDate" name="clientDeliveryDate"  placeholder="Enter delivery date" [(ngModel)]="newClient.delivery_date" #clientDeliveryDate="ngModel" required>
+            </div>
+            <div class="from-control">
+                <label for="remarks">Remarks</label>
+                <input type="text" id="remarks" name="remarks"  placeholder="Enter Remarks" [(ngModel)]="newClient.remarks" #remarks="ngModel" required>
+            </div>
+            <div class="form-control">
+                <button type="submit" [disabled]="clientForm.invalid">Add</button>
+            </div>
        </form>
    </div>
    <div class="client_list today-task">
        <h1>Todays Task</h1>
-        <table>
+        <!-- <table>
            <thead>
                <tr>
                    <th>Client Name</th>
                    <th>Delivery Status</th>
                    <th>Delivery Type</th>
                    <th>Delivery Date</th>
+                    <th>Remarks</th>
                    <th>Action</th>
                </tr>
            </thead>
@@ -45,17 +55,23 @@
                        <td>{{client.delivery_status}}</td>
                        <td>{{client.delivery_type}}</td>
                        <td>{{client.delivery_date }}</td>
+                        <td>{{ client.remarks }}</td>
                        <td>
                            <button (click)="completedTask(client)">Completed</button>
                        </td>
                    </ng-container>
                </tr>
            </tbody>
-        </table>
+        </table> -->
+        <ag-grid-angular
+        class="task-table"
+        [rowData]="filteredDeliveryTask"
+        [columnDefs]="colDefs" />
    </div>
    
    <div class="pending-cotainer">
-        <div class="client_list">
+        <h1>Pending Tasks</h1>
+   <!-- <div class="client_list">
            <h1>Pending Task</h1>
            <table>
                <thead>
@@ -77,10 +93,14 @@
                            <td>
                                <button (click)="completedTask(client)">Completed</button>
                            </td>
-                        </ng-container>
-                    </tr>
+                        </ng-container> -->
+                    <!-- </tr>
                </tbody>
-            </table>
-        </div>
+            </table> -->
+            <ag-grid-angular
+            class="task-table"
+            [rowData]="filteredPreviousTasks"
+            [columnDefs]="colDefs" 
+             />
    </div>
 </div>
--- a/src/app/components/pages/client-service/client-service.component.scss
+++ b/src/app/components/pages/client-service/client-service.component.scss
@@ -1,2 +1,55 @@
-// TODO: Style the Input fields
-// TODO: Style the Table
+// TODO1: Style the Input fields
+// TODO2: Style the Table
+@import "../../../shared/scss/colors.scss";
+
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-top: 5rem;
+    padding-left: 15rem;
+    position: relative;
+}
+
+.container div {
+    padding-top: 0.7rem;
+}
+
+// form-container css
+.form-container {
+    position: absolute;
+    left: 3rem;
+    top: 5rem;
+}
+
+form, form div {
+    display: flex;
+    flex-direction: column;
+}
+
+.form-control {
+    margin-bottom: 1rem;
+}
+
+input, select {
+    border-radius: 10px;
+}
+
+button {
+    margin-top: 0.5rem;
+}
+
+// table-container css
+.task-table {
+    height: 300px;
+    width: 70rem;
+}
+
+h1 {
+    text-align: center;
+}
+
+.pending-cotainer h1 {
+    color: $danger;
+}
--- a/src/app/components/pages/client-service/client-service.component.ts
+++ b/src/app/components/pages/client-service/client-service.component.ts
@@ -4,40 +4,80 @@ import { ClientDeliveryService } from './client-service.service';
 import { DeliveryModel } from './client-service.model';
 import { Subscription } from 'rxjs';
 import { FormsModule } from '@angular/forms';
+import { AgGridAngular } from 'ag-grid-angular'; // Angular Data Grid Component
+import type { ColDef } from 'ag-grid-community'; // Column Definition Type Interface
+import { ChangeDetectorRef } from '@angular/core';
+
+

-// ###############################################
-// TODO: Client-Service
-// Hide the Full Task if the isCompleted Field is true
-// Add button for update



@Component({
  selector: 'app-client-service',
  standalone: true,
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, AgGridAngular],
  templateUrl: './client-service.component.html',
  styleUrl: './client-service.component.scss'
 })
 export class ClientServiceComponent implements OnInit, OnDestroy {

+  // Define the date variables
  date = new Date();
  day = String(this.date.getDate()).padStart(2,'0');
  month = String(this.date.getMonth()+1).padStart(2,'0');
  year = this.date.getFullYear();
+
+  // Formate todays date in YYYY-MM-DD
  today =  this.year + "-" + this.month +"-"+ this.day;
-  isCompleted= false;
+
+  // Array to store all delivery tasks
  allDeliveryTasks!: DeliveryModel[];
+  filteredDeliveryTask!: DeliveryModel[];
+  filteredPreviousTasks!: DeliveryModel[];
+
+  // Object to hold data for a new client
  newClient: DeliveryModel = new DeliveryModel()
+
+  // Subscription object to manage observable subscriptions
  allDeliverySubscription!: Subscription;

+  // ColDef
+  colDefs: ColDef[] = [
+    { field: 'client_name', headerName: 'Client Name', sortable: true, filter: true },
+    { field: 'delivery_status', headerName: 'Delivery Status', sortable: true, filter: true },
+    { field: 'delivery_type', headerName: 'Delivery Type', sortable: true, filter: true },
+    { field: 'delivery_date', headerName: 'Delivery Date', sortable: true, filter: true },
+    { field: 'remarks', headerName: 'Remarks', sortable: true, filter: true },
+    { headerName: 'Action',
+      cellRenderer: (params: any) => {
+      // Create the button directly and return it as HTML
+      const button = document.createElement('button');
+      button.innerText = 'Complete';
      
-  constructor(private clientDeliveryService: ClientDeliveryService){}
+      // Add a click event listener to handle the click
+      button.addEventListener('click', () => {
+        this.completedTask(params.data); // Call the completedTask method
+      });
+
+      return button;      }
+     }
+  ]


+
+  constructor(private clientDeliveryService: ClientDeliveryService, private cdr: ChangeDetectorRef){}
+
+  /**
+  * Lifecycle hook that runs when the component initializes.
+  * Fetches all delivery tasks from the service.
+  */
  ngOnInit(): void {
    this.allDeliverySubscription = this.clientDeliveryService.allDelivery().subscribe(data=>{
      this.allDeliveryTasks = data;
+
+      this.filteredDeliveryTask = this.allDeliveryTasks.filter(tasks=>tasks.delivery_status!= "Completed" && tasks.delivery_date===this.today)
+      this.filteredPreviousTasks = this.allDeliveryTasks.filter(tasks=>tasks.delivery_status!= "Completed" && tasks.delivery_date<this.today)
    })
  }

@@ -45,23 +85,46 @@ export class ClientServiceComponent implements OnInit, OnDestroy {
    this.allDeliverySubscription.unsubscribe();
  }

+  /**
+   * Marks a task as completed by updating its status.
+   * Calls the service to update the status in the database.
+   * @param client - The delivery task to be marked as completed.
+   */
  completedTask(client: DeliveryModel): void {
    client.delivery_status = "Completed";
    this.clientDeliveryService.updateStatus(client).subscribe(response=>{
      console.log(response)
+
+      // Refresh the delivery tasks list after adding a new client
      this.clientDeliveryService.allDelivery().subscribe(data=>{
        this.allDeliveryTasks = data;
+        this.filteredDeliveryTask = this.allDeliveryTasks.filter(tasks=>tasks.delivery_status!= "Completed" && tasks.delivery_date=== this.today)
+        this.filteredPreviousTasks = this.allDeliveryTasks.filter(tasks=>tasks.delivery_status!= "Completed" && tasks.delivery_date<this.today)
+        this.cdr.detectChanges();
+
      })
    })
  }

+
+    /**
+   * Adds a new client to the database.
+   * Calls the service to save the new client and refreshes the task list.
+   */
  addNewClient() {
    this.clientDeliveryService.addNewClientToDB(this.newClient).subscribe(response=>{
      console.log("response", response);
+
+      // Reset the newClient object after adding a new entry
      this.newClient = new DeliveryModel();
+
+      // Refresh the delivery tasks list after adding a new client
      this.clientDeliveryService.allDelivery().subscribe(data=>{
        this.allDeliveryTasks = data;
+        this.filteredDeliveryTask = this.allDeliveryTasks.filter(tasks=>tasks.delivery_status!= "Completed" && tasks.delivery_date=== this.today)
+        this.filteredPreviousTasks = this.allDeliveryTasks.filter(tasks=>tasks.delivery_status!= "Completed" && tasks.delivery_date<this.today)
      },error=>{console.log("error", error)}) 
    })
  }
+
 }
--- a/src/app/components/pages/client-service/client-service.service.ts
+++ b/src/app/components/pages/client-service/client-service.service.ts
@@ -8,7 +8,6 @@ import { DELIVERY_CREATE_URL, DELIVERY_UPDATE_URL, DELIVERY_URL } from "../../..
    providedIn: 'root'
  })

-//TODO: change the URI of the Delivery API after Full development

 export class ClientDeliveryService {

--- a/src/app/components/pages/dashboard/dashboard-data.ts
+++ b/src/app/components/pages/dashboard/dashboard-data.ts
@@ -75,6 +75,14 @@ export const service_links: navLink[] =[
    {
        "name" : "FortiAnalyzer",
        "url" : "https://118.67.209.115/p/login/"
+    },
+    {
+      "name" : "Observium",
+      "url" : "http://observium.brilliant.com.bd/",
+    },
+    {
+      "name" : "smokeping",
+      "url" : "http://103.209.42.218:10180/smokeping/"
    }
  ]

--- a/src/app/components/pages/dashboard/dashboard.component.ts
+++ b/src/app/components/pages/dashboard/dashboard.component.ts
@@ -3,7 +3,7 @@ import { monitoring_tools_links, service_links, tools_links, shift_tasks, client
 import { navLink } from '../../../shared/model/nav-link.model';
 import { CommonModule } from '@angular/common';

-//TODO10: Create a document list in data-ts file
+//TODO3: Create a document list in data-ts file


@Component({
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,10 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
+import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
+
+
+ModuleRegistry.registerModules([AllCommunityModule]);

 bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));