Added the edit button

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

@@ -12,23 +12,43 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <tr *ngFor="let updateData of updateDataList; let i = index" (click)="toggleRow(i)">
-                        <td>{{updateData.Date}}</td>
-                        <td>{{updateData.Details | shorten:getRowNumber(i)}}</td>
-                        <td>{{updateData.Remarks | shorten:getRowNumber(i)}}</td>
-                        <td>{{updateData.Sales_Concern}}</td>
-                        <td>{{updateData.Reference | shorten:getRowNumber(i)}}</td>
-                        <td>{{updateData.Handler}}</td>
-                        <td>{{updateData.Status}}</td>
-                        <td class="actions">
-                            <button (click)="onComplete(updateData)" class="complete">
-                                <i class="bi bi-check-lg"></i>
-                            </button>
-                            <button (click)="onDelete(updateData)" class="delete">
-                                <i class="bi bi-x-lg"></i>
-                            </button>
-                        </td>
-                    </tr>
+                    <ng-container *ngFor="let updateData of updateDataList; let i = index" >
+                        <ng-container *ngIf="editIndex!==i">
+                            <tr (click)="toggleRow(i)">
+                                <td>{{updateData.Date}}</td>
+                                <td>{{updateData.Details | shorten:getRowNumber(i)}}</td>
+                                <td>{{updateData.Remarks | shorten:getRowNumber(i)}}</td>
+                                <td>{{updateData.Sales_Concern}}</td>
+                                <td>{{updateData.Reference | shorten:getRowNumber(i)}}</td>
+                                <td>{{updateData.Handler}}</td>
+                                <td>{{updateData.Status}}</td>
+                                <td class="actions">
+                                    <button (click)="onComplete(updateData)" class="complete">
+                                        <i class="bi bi-check-lg"></i>
+                                    </button>
+                                    <button (click)="onDelete(updateData)" class="delete">
+                                        <i class="bi bi-x-lg"></i>
+                                    </button>
+                                </td>
+                                <td>
+                                    <button (click)="onEdit(i)" class="edit">
+                                        <i class="bi bi-pencil"></i>
+                                    </button>
+                                </td>
+                            </tr>
+                        </ng-container>
+                        <ng-container *ngIf="editIndex===i">
+                            <td class="edit-input"><input type="text" [(ngModel)]="updateData.Date"></td>
+                            <td class="edit-input"><textarea name="text" [(ngModel)]="updateData.Details" id="">updateData.Details</textarea></td>
+                            <td class="edit-input"><input type="text" [(ngModel)]="updateData.Remarks"></td>
+                            <td class="edit-input"><input type="text" [(ngModel)]="updateData.Sales_Concern"></td>
+                            <td class="edit-input"><input type="text" [(ngModel)]="updateData.Reference"></td>
+                            <td class="edit-input"><input type="text" [(ngModel)]="updateData.Handler"></td>
+                            <td class="edit-input"><input type="text" [(ngModel)]="updateData.Status"></td>
+                            <td><button (click)="onEditSave()">Save</button></td>
+                            <td><button (click)="onCancel()" >Cancel</button></td>
+                        </ng-container>
+                    </ng-container>
                 </tbody>
             </table>
         </div>

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

@@ -94,3 +94,23 @@ td {
         background-color: darken($danger, 20);
     }
 }
+
+.edit{
+    background-color: yellowgreen;
+    border: none;
+    height: 2rem;
+    width: 2.5rem;
+    border-radius: 10px;
+    margin-top: 5px;
+    &:hover {
+        background-color: darken(yellowgreen, 20);
+    }
+}
+
+
+.edit-input {
+    input{
+        max-width: 100px;
+
+    }
+}

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

@@ -7,11 +7,12 @@ import { InputFormComponent } from "../../../shared/components/input-form/input-
 import { Update } from '../../../shared/model/update.model';
 import { CommonModule } from '@angular/common';
 import { ShortenPipe } from '../../../shared/pipe/shorten.pipe';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-shift-update',
   standalone: true,
-  imports: [TitleComponent, InputFormComponent, CommonModule, ShortenPipe],
+  imports: [TitleComponent, InputFormComponent, CommonModule, ShortenPipe, FormsModule],
   templateUrl: './shift-update.component.html',
   styleUrl: './shift-update.component.scss',
   providers: [UpdateService]
@@ -21,7 +22,8 @@ export class ShiftUpdateComponent implements OnInit, OnDestroy {
   updateDataList!: Update[];
   updateListSubscription!: Subscription;
   todayDate!: String;
-
+  editMode = false;
+  editIndex: number | null = null;
 
   constructor(private updateService: UpdateService) {}
 
@@ -78,6 +80,9 @@ onDelete(data: any) {
   })
 }
 
+onEdit(index: number) {
+  this.editIndex = index;
+}
 // clickToAdd(){
 //   const test_update: Update = { 
 //     id: "",
@@ -96,6 +101,15 @@ onDelete(data: any) {
 //   })
 // }
 
+onEditSave() {
+  //
+}
+
+onCancel()
+{
+  this.editIndex = null;
+}
+
 private fetchUpdates(): void {
   this.updateService.allUpdate().subscribe((update) => {
     this.updateDataList = update;

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

@@ -51,8 +51,9 @@
 
 .toggle{
     position: fixed;
-    right: 2.5rem;
+    right: 2rem;
     bottom: 0;
+    z-index: 100;
 }
 
 i {