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

src/app/app.config.ts

@@ -2,7 +2,8 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
+import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideHttpClient()]
 };

src/app/backup.ts

@@ -130,5 +130,17 @@ export const vols = [
         projectURL: "http://118.67.215.11/dashboard/auth/switch/e21290ae6e9845ddacb7158ba1d35867/?next=/dashboard/project/",
         volumeName: "Owncloud-Intercloud-VM-01-Vol-02-SAS",
         volumeURL: "http://118.67.215.11/dashboard/project/volumes/7dde4fc3-7a0e-4a5d-bca8-12fe6832d8d5/"
-    }
+    },
+    {
+        projectName: "Revenue-Assurance",
+        projectURL: "http://118.67.215.11/dashboard/auth/switch/344358e7b22049a0bff2ac785417ab4e/?next=/dashboard/project/i",
+        volumeName: "revenue-assurence-VM-01-Vol-1",
+        volumeURL: "http://118.67.215.11/dashboard/project/volumes/76905062-4af5-405e-b485-3bd66d031a57/"
+    },
+    {
+        projectName: "Revenue-Assurance",
+        projectURL: "http://118.67.215.11/dashboard/auth/switch/344358e7b22049a0bff2ac785417ab4e/?next=/dashboard/project/i",
+        volumeName: "revenue-assurence-VM-01-Vol-2",
+        volumeURL: "http://118.67.215.11/dashboard/project/volumes/f59c48b8-23c2-4f60-bc75-047d6363edc2/"
+    },
 ]

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)
+        })
     }
 }
 

src/app/shared/components/input-form/input-form.component.html

@@ -7,7 +7,7 @@
                     <input class="form-control" type="text" [id]="field" [name]="field"  [(ngModel)]="formData[field]" [placeholder]="'enter '+field" required>
                 </div>
                 <div class="btn">
-                    <button [disabled]="inputForm.invalid">Submit</button>
+                    <button [disabled]="inputForm.invalid" (click)="onClick()">Submit</button>
                 </div>
             </div>
         </form>

src/app/shared/components/input-form/input-form.component.ts

@@ -14,6 +14,7 @@ export class InputFormComponent {
   @Output() formValues: EventEmitter<{}> = new EventEmitter<{}>();
   formData: {[key: string]: string} = {}
   @Input() isFormVisible: boolean = false;
+  @Output() clicked: EventEmitter<void> = new EventEmitter<void>()
 
   onSubmit(formData: NgForm){
     this.formValues.emit(formData.value)
@@ -21,4 +22,8 @@ export class InputFormComponent {
   toggleForm() {
     this.isFormVisible = !this.isFormVisible;
   }
+
+  onClick(){
+    this.clicked.emit()
+  }
 }

src/app/shared/constants/backend.ts

@@ -0,0 +1,5 @@
+const MAIN_URL = "http://localhost:3000/api"
+
+export const BACKUP_GET_URL = `${MAIN_URL}/backup`;
+export const UPDATE_GET_URL = `${MAIN_URL}/update`;
+export const UPDATE_ADD_URL = `${UPDATE_GET_URL}/add`

src/app/shared/model/update.model.ts

@@ -1,9 +1,11 @@
 export class Update{
     id!: string;
-    date!: string;
-    details!: string;
-    remarks!: string;
+    Date!: string;
+    Details!: string;
+    Remarks!: string;
     Sales_Concern!: string;
-    reference!: string;
-    handler!: string;
+    Reference!: string;
+    Handler!: string;
+    Status!: string;
+    deleted!: Boolean;
 }