Added the backend code for completed task and also frontend is completed

src/app/components/pages/client-service/client-service.component.html

@@ -1,31 +1,4 @@
 <div class="container">
-    <div class="client_list">
-        <h1>Todays Task</h1>
-        <table>
-            <thead>
-                <tr>
-                    <th>Client Name</th>
-                    <th>Delivery Status</th>
-                    <th>Delivery Type</th>
-                    <th>Delivery Date</th>
-                    <th>Action</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr *ngFor="let client of allDeliveryTasks">
-                    <ng-container  *ngIf="client.delivery_date === today && client.delivery_status !='Completed'">
-                        <td>{{client.client_name}}</td>
-                        <td>{{client.delivery_status}}</td>
-                        <td>{{client.delivery_type}}</td>
-                        <td>{{client.delivery_date }}</td>
-                        <td>
-                            <button (click)="completedTask()">Completed</button>
-                        </td>
-                    </ng-container>
-                </tr>
-            </tbody>
-        </table>
-    </div>
     <div class="form-container">
         <form action="" #clientForm="ngForm" (ngSubmit)="addNewClient()">
             <label for="clientName">Client Name</label>
@@ -53,6 +26,34 @@
             <button type="submit" [disabled]="clientForm.invalid">Add</button>
         </form>
     </div>
+    <div class="client_list today-task">
+        <h1>Todays Task</h1>
+        <table>
+            <thead>
+                <tr>
+                    <th>Client Name</th>
+                    <th>Delivery Status</th>
+                    <th>Delivery Type</th>
+                    <th>Delivery Date</th>
+                    <th>Action</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let client of allDeliveryTasks">
+                    <ng-container  *ngIf="client.delivery_date === today && client.delivery_status !='Completed'">
+                        <td>{{client.client_name}}</td>
+                        <td>{{client.delivery_status}}</td>
+                        <td>{{client.delivery_type}}</td>
+                        <td>{{client.delivery_date }}</td>
+                        <td>
+                            <button (click)="completedTask(client)">Completed</button>
+                        </td>
+                    </ng-container>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    
     <div class="pending-cotainer">
         <div class="client_list">
             <h1>Pending Task</h1>
@@ -68,13 +69,13 @@
                 </thead>
                 <tbody>
                     <tr *ngFor="let client of allDeliveryTasks">
-                        <ng-container  *ngIf="client.delivery_date < today">
+                        <ng-container  *ngIf="client.delivery_date < today && client.delivery_status !='Completed'">
                             <td>{{client.client_name}}</td>
                             <td>{{client.delivery_status}}</td>
                             <td>{{client.delivery_type}}</td>
                             <td>{{client.delivery_date }}</td>
                             <td>
-                                <button (click)="completedTask()">Completed</button>
+                                <button (click)="completedTask(client)">Completed</button>
                             </td>
                         </ng-container>
                     </tr>

src/app/components/pages/client-service/client-service.component.ts

@@ -52,17 +52,24 @@ export class ClientServiceComponent implements OnInit, OnDestroy {
     this.allDeliverySubscription.unsubscribe();
   }
 
-  completedTask() {
-    
-  }
-
-  addNewClient() {
-    this.clientDeliveryService.addNewClientToDB(this.newClient).subscribe(res=>{
-      console.log(res);
-      this.newClient = new DeliveryModel();
+  completedTask(client: DeliveryModel): void {
+    client.delivery_status = "Completed";
+    //TODO11: When Completed is pressed send request to backend to change delivery Status to completed
+    this.clientDeliveryService.updateStatus(client).subscribe(response=>{
+      console.log(response)
       this.clientDeliveryService.allDelivery().subscribe(data=>{
         this.allDeliveryTasks = data;
       })
     })
   }
+
+  addNewClient() {
+    this.clientDeliveryService.addNewClientToDB(this.newClient).subscribe(response=>{
+      console.log("response", response);
+      this.newClient = new DeliveryModel();
+      this.clientDeliveryService.allDelivery().subscribe(data=>{
+        this.allDeliveryTasks = data;
+      },error=>{console.log("error", error)})
+    })
+  }
 }

src/app/components/pages/client-service/client-service.model.ts

@@ -1,4 +1,5 @@
 export class DeliveryModel {
+    _id?: string;
     client_name!: string;
     // Termination, provision, Test
     delivery_type!: string; 

src/app/components/pages/client-service/client-service.service.ts

@@ -20,4 +20,10 @@ export class ClientDeliveryService {
     addNewClientToDB(newClient: DeliveryModel){
         return this.httpClient.post("http://localhost:3000/api/delivery/create", newClient)
     }
+
+    updateStatus(newStatus: DeliveryModel) {
+        return this.httpClient.put(`http://localhost:3000/api/delivery/update/${newStatus._id}`, newStatus, {responseType: 'text'})
+    }
+
+
 }

src/app/components/pages/dashboard/dashboard-data.ts

@@ -132,3 +132,10 @@ export const service_links: navLink[] =[
       "url" : "https://s3.brilliant.com.bd/bucket-1-ee86738d/client-doc/friendship-diagram.html"
     }
   ]
+
+  export const documents = [
+    {
+      "name": "Test",
+      "url" : "Test"
+    }
+  ]