Adding Backend

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

@@ -47,7 +47,7 @@
 }
 
 .toggle{
-    position: absolute;
+    position: fixed;
     right: 2.5rem;
     bottom: 0;
 }

src/app/shared/components/table/table.component.html

@@ -9,6 +9,7 @@
             <tbody>
                 <tr *ngFor="let rowData of rowDataList; let i = index" (click)="toggleRow(i)">
                     <td *ngFor="let field_name of tableHeaders">{{ rowData[field_name] | shorten:getRowNumber(i) }}</td>
+                    <td class="actions"><button (click)="onComplete()" class="complete"><i class="bi bi-check-lg"></i></button><button (click)="onDelete()" class="delete"><i class="bi bi-x-lg"></i></button></td>
                 </tr>
             </tbody>
         </table>

src/app/shared/components/table/table.component.scss

@@ -61,8 +61,36 @@ tr:nth-child(even) {
 }
 
 td {
-    padding: 0.7rem 0.5rem;
+    padding: 0.7rem 1.5rem;
     -webkit-user-select: none; /* Safari */
     -ms-user-select: none; /* IE 10 and IE 11 */
     user-select: none; /* Standard syntax */
-}
+    max-width: 300px;
+}
+
+.actions {
+    display: grid;
+}
+
+.complete{
+    background-color: $txt-heading-color;
+    border: none;
+    height: 2rem;
+    width: 2.5rem;
+    border-radius: 10px;
+    &:hover {
+        background-color: darken($txt-heading-color, 20);
+    }
+}
+
+.delete {
+    background-color: $danger;
+    border: none;
+    height: 2rem;
+    width: 2.5rem;
+    border-radius: 10px;
+    margin-top: 5px;
+    &:hover {
+        background-color: darken($danger, 20);
+    }
+}

src/app/shared/components/table/table.component.ts

@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import { Update } from '../../model/update.model';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { ShortenPipe } from '../../pipe/shorten.pipe';
 
 interface RowData {
@@ -18,6 +17,9 @@ export class TableComponent {
 @Input() 
 @Input() tableHeaders: string[] = ['demo1','demo2','demo3']
 @Input() rowDataList!: any[];
+@Output() complete: EventEmitter<string> = new EventEmitter<string>()
+@Output() delete: EventEmitter<boolean> = new EventEmitter<boolean>()
+
 
 expandRowIndex: number | null = null;
 
@@ -29,4 +31,12 @@ getRowNumber(index: number): number {
   return this.expandRowIndex === index ? 15000 : 75;
 }
 
+onComplete() {
+ this.complete.emit("Complete")
+}
+
+onDelete() {
+  this.delete.emit(true)
+}
+
 }

src/app/shared/scss/colors.scss

@@ -2,4 +2,5 @@ $bg-color: #FEF9F2;
 $txt-heading-color: #72BF78;
 $txt-color: #1E201E;
 $hover-color: #B6FFA1;
-$title: #62825D;
+$title: #62825D;
+$danger: #D91656;