backup urls added

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

@@ -0,0 +1,24 @@
+<div class="container">
+    <div class="table">
+        <table>
+            <thead>
+                <tr>
+                    <th>
+                        Project name
+                    </th>
+                    <th>
+                        backup volume
+                    </th>
+                    <th>Copy Name</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let backup of backupVolumes">
+                    <td><a target="_blank" [href]=backup.projectURL>{{backup.projectName}}</a></td>
+                    <td><a target="_blank" [href]=backup.volumeURL>{{backup.volumeName}}</a></td>
+                    <td class="copyName" #copy (click)="copyName(copy)">{{backup.volumeName}}-{{currentDate | date: 'dd-MM-YYYY'}}-Cloud</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>

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

@@ -0,0 +1,47 @@
+@import './../../../shared/scss/colors.scss';
+
+table {
+    margin-left: 1rem;
+}
+
+table, tr, td {
+    border-collapse: collapse;
+    border: none;
+}
+
+th{
+    color: $txt-heading-color;
+    font-size: 1.5rem;
+}
+
+tbody tr {
+    transition: all 0.3s 
+}
+
+tbody tr:hover {
+    transform: scale(1.03);
+    background-color: $hover-color;
+    border-collapse: collapse;
+    border: none;
+}
+
+td:first-child{
+    border-radius: 1rem 0rem 0rem 1rem;
+}
+
+td:last-child{
+    border-radius: 0rem 1rem 1rem 0rem;
+}
+
+
+td {
+    padding: 1rem;
+}
+
+a{
+    text-decoration: none;
+}
+
+.copyName:hover {
+    cursor: pointer;
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BackupListComponent } from './backup-list.component';
+
+describe('BackupListComponent', () => {
+  let component: BackupListComponent;
+  let fixture: ComponentFixture<BackupListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BackupListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(BackupListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,30 @@
+import { Component, ElementRef, OnInit, QueryList, ViewChild, ViewChildren, viewChildren } from '@angular/core';
+import { BackupService } from './backup-list.service';
+import { Backup } from '../../../shared/model/backup.model';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-backup-list',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './backup-list.component.html',
+  styleUrl: './backup-list.component.scss',
+  providers: [BackupService]
+})
+export class BackupListComponent implements OnInit{
+  backupVolumes: Backup[] = []
+  currentDate = new Date();
+  innerHTML!: string;
+  constructor(private backupService: BackupService) {}
+
+  ngOnInit(): void {
+      this.backupVolumes = this.backupService.allBackups;
+  }
+
+  copyName(copyName: HTMLTableCellElement){
+    this.innerHTML = copyName.innerHTML;
+    navigator.clipboard.writeText(this.innerHTML).then(()=>{
+      console.log("Copied")
+    }).catch(err=>console.log(err))
+  }
+}

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

@@ -0,0 +1,12 @@
+import { Injectable } from "@angular/core";
+import { vols } from "../../../backup";
+
+Injectable({
+    providedIn: 'root'
+})
+
+export class BackupService {
+    get allBackups() {
+        return vols
+    }
+}