Added Forms Module and Form for adding Tasks

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

@@ -25,4 +25,17 @@
             </tbody>
         </table>
     </div>
+    <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>
+            <label for="clientName">Client Delivery Status</label>
+            <input type="text" id="clientDeliveryStatus" name="clientDeliveryStatus"  placeholder="Enter delivery status" [(ngModel)]="newClient.delivery_status" #clientDeliveryStatus="ngModel" required>
+            <label for="clientName">Client Delivery Type</label>
+            <input type="text" id="clientDeliveryType" name="clientDeliveryType" placeholder="Enter delivery type" [(ngModel)]="newClient.delivery_type" #clientDeliveryType="ngModel" required>
+            <label for="clientName">Client Delivery Date</label>
+            <input type="date" id="clientDeliveryDate" name="clientDeliveryDate"  placeholder="Enter delivery date" [(ngModel)]="newClient.delivery_date" #clientDeliveryDate="ngModel" required>
+            <button type="submit" [disabled]="clientForm.invalid">Add</button>
+        </form>
+    </div>
 </div>

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

@@ -1,26 +1,33 @@
 import { CommonModule } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ClientDeliveryService } from './client-service.service';
 import { DeliveryModel } from './client-service.model';
+import { Subscription } from 'rxjs';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-client-service',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, FormsModule],
   templateUrl: './client-service.component.html',
   styleUrl: './client-service.component.scss'
 })
-export class ClientServiceComponent implements OnInit {
+export class ClientServiceComponent implements OnInit, OnDestroy {
 
   date = new Date();
   day = String(this.date.getDate()).padStart(2,'0');
   month = String(this.date.getMonth()+1).padStart(2,'0');
   year = this.date.getFullYear();
-  today = this.day + '/' + this.month + '/' + this.year;
+  today =  this.year + "-" + this.month +"-"+ this.day;
   isCompleted= false;
   allDeliveryTasks!: DeliveryModel[];
+  newClient: DeliveryModel = new DeliveryModel()
+  allDeliverySubscription!: Subscription;
 
+  
   constructor(private clientDeliveryService: ClientDeliveryService){}
+
+
   ngOnInit(): void {
     // if(this.data.delivery_date === this.today) {
     //   console.log("Date Matched")
@@ -29,12 +36,28 @@ export class ClientServiceComponent implements OnInit {
     //   console.log(this.data.delivery_date)
     //   console.log(this.today)
     // }
-    this.clientDeliveryService.allDelivery().subscribe(data=>{
+    this.allDeliverySubscription = this.clientDeliveryService.allDelivery().subscribe(data=>{
       this.allDeliveryTasks = data;
+      console.log(data[0].delivery_date)
     })
+    console.log(this.today)
+  }
+
+  ngOnDestroy(): void {
+    this.allDeliverySubscription.unsubscribe();
   }
 
   completedTask() {
     this.isCompleted = true;
   }
+
+  addNewClient() {
+    this.clientDeliveryService.addNewClientToDB(this.newClient).subscribe(res=>{
+      console.log(res);
+      this.newClient = new DeliveryModel();
+      this.clientDeliveryService.allDelivery().subscribe(data=>{
+        this.allDeliveryTasks = data;
+      })
+    })
+  }
 }

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

@@ -14,4 +14,8 @@ export class ClientDeliveryService {
     allDelivery(): Observable<DeliveryModel[]> {
         return this.httpClient.get<DeliveryModel[]>("http://localhost:3000/api/delivery")
     }
+
+    addNewClientToDB(newClient: DeliveryModel){
+        return this.httpClient.post("http://localhost:3000/api/delivery/create", newClient)
+    }
 }