Connected with DB and complted the Backup Service, Shift Update ongoin

src/app/components/pages/backup-list/backup-list.component.ts

@@ -1,7 +1,8 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { BackupService } from './backup-list.service';
 import { Backup } from '../../../shared/model/backup.model';
 import { CommonModule } from '@angular/common';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-backup-list',
@@ -11,14 +12,21 @@ import { CommonModule } from '@angular/common';
   styleUrl: './backup-list.component.scss',
   providers: [BackupService]
 })
-export class BackupListComponent implements OnInit{
+export class BackupListComponent implements OnInit, OnDestroy{
   backupVolumes: Backup[] = []
   currentDate = new Date();
   innerHTML!: string;
+  backupVolumesSubscription!: Subscription;
   constructor(private backupService: BackupService) {}
 
   ngOnInit(): void {
-      this.backupVolumes = this.backupService.allBackups;
+      this.backupVolumesSubscription = this.backupService.allBackups().subscribe((volumes)=>{
+        this.backupVolumes = volumes;
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.backupVolumesSubscription.unsubscribe();
   }
 
   copyName(copyName: HTMLTableCellElement){

src/app/components/pages/backup-list/backup-list.service.ts

@@ -1,12 +1,24 @@
 import { Injectable } from "@angular/core";
 import { vols } from "../../../backup";
+import { HttpClient } from "@angular/common/http";
+import { Backup } from "../../../shared/model/backup.model";
+import { Observable } from "rxjs";
+import { BACKUP_GET_URL } from "../../../shared/constants/backend";
 
-Injectable({
-    providedIn: 'root'
+@Injectable({
+    providedIn: 'root',
 })
 
+
 export class BackupService {
-    get allBackups() {
-        return vols
+    // get allBackups() {
+    //     return vols
+    // }
+    private backupUrl = '';
+
+    constructor(private httpClient: HttpClient){}
+
+    allBackups(): Observable<Backup[]> {
+        return this.httpClient.get<Backup[]>(BACKUP_GET_URL)
     }
 }

src/app/components/pages/shift-update/shift-update.component.html

@@ -1,3 +1,4 @@
 <page-title title="Shift Update"></page-title>
-<app-input-form [fields]="tableHeaderList"></app-input-form>
+<app-input-form [fields]="tableHeaderList" (formValues)="addUpdate($event)"
+(clicked)="onClick()"></app-input-form>
 <app-table  [tableHeaders]="tableHeaderList" [rowDataList]="updateDataList" (complete)="completeTask($event)" (delete)="deleteTask($event)"></app-table>

src/app/components/pages/shift-update/shift-update.component.ts

@@ -1,10 +1,11 @@
-import { Component, EventEmitter, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+
 import { TableComponent } from '../../../shared/components/table/table.component';
 import { UpdateService } from './update.service';
 import { TitleComponent } from '../../../shared/components/title/title.component';
-import { ShortenPipe } from '../../../shared/pipe/shorten.pipe';
 import { InputFormComponent } from "../../../shared/components/input-form/input-form.component";
-import { BehaviorSubject } from 'rxjs';
+import { Update } from '../../../shared/model/update.model';
 
 @Component({
   selector: 'app-shift-update',
@@ -14,24 +15,40 @@ import { BehaviorSubject } from 'rxjs';
   styleUrl: './shift-update.component.scss',
   providers: [UpdateService]
 })
-export class ShiftUpdateComponent implements OnInit {
+export class ShiftUpdateComponent implements OnInit, OnDestroy {
   tableHeaderList = ['Date','Details','Remarks','Sales','Reference','Handler', 'Status']
-  updateDataList: any[] = [];
-
+  updateDataList: Update[] = [];
+  updateListSubscription!: Subscription;
 
 
   constructor(private updateService: UpdateService) {}
 
   ngOnInit(): void {
-      this.updateDataList = this.updateService.allUpdate;
+       this.updateListSubscription = this.updateService.allUpdate().subscribe((update)=>{
+        this.updateDataList = update;
+        console.log(this.updateDataList.keys)
+       });
       console.log(this.completeTask)
   }
 
+  ngOnDestroy(): void {
+    this.updateListSubscription.unsubscribe();
+  }
+
   completeTask(event: string) {
-    console.log(event)
+    //
   }
 
   deleteTask(event: boolean) {
+    //
+  }
 
+  addUpdate(newUpdate:any){
+  this.updateService.addUpdate(newUpdate);
+  }
+  onClick(){
+    this.updateService.allUpdate().subscribe((update)=>{
+      this.updateDataList = update;
+    })
   }
 }

src/app/components/pages/shift-update/update.service.ts

@@ -1,13 +1,27 @@
 import { Injectable } from "@angular/core";
 import { sample_update } from "./sample_update";
+import { Observable } from "rxjs";
+import { Update } from "../../../shared/model/update.model";
+import { HttpClient } from "@angular/common/http";
+import { UPDATE_ADD_URL, UPDATE_GET_URL } from "../../../shared/constants/backend";
 
-Injectable({
+@Injectable({
     providedIn: 'root'
 })
 
 export class UpdateService{
-    get allUpdate(){
-        return sample_update;
+
+    constructor(private httpClient: HttpClient){}
+
+    allUpdate() {
+        return this.httpClient.get<Update[]>(UPDATE_GET_URL)
+    }
+
+    addUpdate(newUpdate: Update) {
+        newUpdate.deleted = false;
+        this.httpClient.post(UPDATE_ADD_URL,newUpdate).subscribe((log)=>{
+            console.log(log)
+        })
     }
 }