Working on complete task

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

@@ -1,4 +1,31 @@
-<page-title title="Shift Update"></page-title>
+<div class="container">
+    <page-title title="Shift Update"></page-title>
 <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>
+    <div class="table-container">
+        <div class="table">
+            <table>
+                <thead>
+                    <tr>
+                        <th *ngFor="let tableHeader of tableHeaderList">{{tableHeader}}</th>
+                    </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()" class="delete"><i class="bi bi-x-lg"></i></button></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+
+<!-- <app-table  [tableHeaders]="tableHeaderList" [rowDataList]="updateDataList" (complete)="completeTask($event)" (delete)="deleteTask($event)"></app-table> -->

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

@@ -0,0 +1,96 @@
+@import './../../../shared/scss/colors.scss';
+
+.table-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    
+}
+
+.table{
+    padding: 0rem 2rem;
+}
+
+table {
+    margin-left: 1rem;
+}
+
+table, tr, td {
+    border-collapse: collapse;
+    border: none;
+}
+
+th{
+    color: $txt-heading-color;
+    font-size: 1.5rem;
+    padding-bottom: 3rem;
+    position:sticky;
+}
+
+tbody tr {
+    transition: all 0.3s 
+}
+
+tbody tr:hover {
+    transform: scale(1.01);
+    background-color: rgba($hover-color,0.5);
+    border-collapse: collapse;
+    border: none;
+}
+
+td:first-child{
+    border-radius: 1rem 0rem 0rem 1rem;
+    padding-left: 2rem;
+}
+
+td:nth-child(3){
+    transition: color 0.09s ease-in-out;
+}
+td:last-child{
+    border-radius: 0rem 1rem 1rem 0rem;
+    padding-right: 2rem;
+}
+
+td:nth-child(3):active {
+    color: rgb(168, 168, 168);
+}
+
+tr:nth-child(even) {
+   background-color: rgba(0,0,0,0.03);
+}
+
+td {
+    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/components/pages/shift-update/shift-update.component.ts

@@ -1,16 +1,17 @@
 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 { InputFormComponent } from "../../../shared/components/input-form/input-form.component";
 import { Update } from '../../../shared/model/update.model';
+import { CommonModule } from '@angular/common';
+import { ShortenPipe } from '../../../shared/pipe/shorten.pipe';
 
 @Component({
   selector: 'app-shift-update',
   standalone: true,
-  imports: [TableComponent, TitleComponent, InputFormComponent],
+  imports: [TitleComponent, InputFormComponent, CommonModule, ShortenPipe],
   templateUrl: './shift-update.component.html',
   styleUrl: './shift-update.component.scss',
   providers: [UpdateService]
@@ -28,21 +29,12 @@ export class ShiftUpdateComponent implements OnInit, OnDestroy {
         this.updateDataList = update;
         console.log(this.updateDataList.keys)
        });
-      console.log(this.completeTask)
   }
 
   ngOnDestroy(): void {
     this.updateListSubscription.unsubscribe();
   }
 
-  completeTask(event: string) {
-    //
-  }
-
-  deleteTask(event: boolean) {
-    //
-  }
-
   addUpdate(newUpdate:any){
   this.updateService.addUpdate(newUpdate);
   }
@@ -51,4 +43,22 @@ export class ShiftUpdateComponent implements OnInit, OnDestroy {
       this.updateDataList = update;
     })
   }
+
+  expandRowIndex: number | null = null;
+
+toggleRow(index: number){
+  this.expandRowIndex = this.expandRowIndex === index ? null : index;
+}
+getRowNumber(index: number): number {
+  return this.expandRowIndex === index ? 15000 : 75;
+}
+
+onComplete(update: Update){
+  update.Status = "completed";
+  this.updateService.updateStatus(update)
+}
+
+onDelete() {
+  //
+}
 }

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

@@ -3,7 +3,7 @@ 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";
+import { UPDATE_ADD_URL, UPDATE_COMPLETE_URL, UPDATE_GET_URL } from "../../../shared/constants/backend";
 
 @Injectable({
     providedIn: 'root'
@@ -23,5 +23,11 @@ export class UpdateService{
             console.log(log)
         })
     }
+
+    updateStatus(newUpdate: Update) {
+        this.httpClient.post(UPDATE_COMPLETE_URL,newUpdate).subscribe((res)=>{
+            console.log(res)
+        })
+    }
 }