Added Shift update

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

@@ -2,8 +2,19 @@ export const sample_update = [
     {
         id: "1",
         date: "10/10/24",
-        detail: "everything to show here",
+        detail: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum imperdiet libero, sed fermentum velit placerat id. Duis volutpat dictum fermentum. Phasellus tellus mauris, interdum quis purus nec, faucibus lacinia justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed eu finibus quam. Aenean ac tristique nulla. Mauris diam urna, dictum ut faucibus vel, pharetra ut tellus. Integer pellentesque dignissim lorem. Quisque sit amet tempor lectus. Vivamus a quam a diam fringilla interdum sit amet a ante. Proin est neque, mollis quis mi vitae, viverra fermentum justo. Vestibulum vehicula mollis dui, aliquet facilisis magna faucibus et. Mauris quis accumsan metus, quis dignissim lacus. Aliquam erat volutpat. Nullam dui mauris, vehicula et hendrerit ut, facilisis et urna. Donec lobortis venenatis sapien in cursus.Vivamus vel elit turpis. Suspendisse tristique ornare neque non condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In id placerat est. Pellentesque placerat nisi id nibh ornare facilisis. Nunc mi quam, vehicula eu dolor vel, tincidunt vehicula magna. Praesent nec mauris vitae nibh fermentum viverra. Donec finibus ex libero, vel ultricies arcu molestie id. Ut tincidunt venenatis massa, nec aliquam lacus varius quis. Aenean id ex nec velit gravida placerat sit amet vel ligula. Vivamus dignissim commodo justo, non pharetra ex sagittis sit amet.",
+        remarks:"test",
+        Sales: "Test Sales",
         ref: "Mail Reference",
         handler: "xy"
+    },
+    {
+        id: "2",
+        date: "10/12/24",
+        detail: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum imperdiet libero, sed fermentum velit placerat id. Duis volutpat dictum fermentum. Phasellus tellus mauris, interdum quis purus nec, faucibus lacinia justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed eu finibus quam. Aenean ac tristique nulla. Mauris diam urna, dictum ut faucibus vel, pharetra ut tellus. Integer pellentesque dignissim lorem. Quisque sit amet tempor lectus. Vivamus a quam a diam fringilla interdum sit amet a ante. Proin est neque, mollis quis mi vitae, viverra fermentum justo. Vestibulum vehicula mollis dui, aliquet facilisis magna faucibus et. Mauris quis accumsan metus, quis dignissim lacus. Aliquam erat volutpat. Nullam dui mauris, vehicula et hendrerit ut, facilisis et urna. Donec lobortis venenatis sapien in cursus.Vivamus vel elit turpis. Suspendisse tristique ornare neque non condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In id placerat est. Pellentesque placerat nisi id nibh ornare facilisis. Nunc mi quam, vehicula eu dolor vel, tincidunt vehicula magna. Praesent nec mauris vitae nibh fermentum viverra. Donec finibus ex libero, vel ultricies arcu molestie id. Ut tincidunt venenatis massa, nec aliquam lacus varius quis. Aenean id ex nec velit gravida placerat sit amet vel ligula. Vivamus dignissim commodo justo, non pharetra ex sagittis sit amet.",
+        ref: "Mail Reference 3",
+        remarks:"test",
+        Sales: "Test Sales",
+        handler: "xy z"
     }
 ]

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

@@ -1,22 +1,2 @@
-<div class="container">
+<page-title title="Shift Update"></page-title>
-    <table>
+<app-table  [tableHeaders]="tableHeaderList" [rowDataList]="updateDataList"></app-table>
-        <thead>
-            <tr>
-                <th>Sr.</th>
-                <th>Date</th>
-                <th>Details</th>
-                <th>Reference</th>
-                <th>Personnel</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Issue Count + 1</td>
-                <td>Date Of the Issue</td>
-                <td>Details of the issue</td>
-                <td>Mail or bcp reference of the issue</td>
-                <td>Personnel Name</td>
-            </tr>        
-        </tbody>
-    </table>
-</div>

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

@@ -1,12 +1,26 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+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';
 
 @Component({
   selector: 'app-shift-update',
   standalone: true,
-  imports: [],
+  imports: [TableComponent, TitleComponent, ],
   templateUrl: './shift-update.component.html',
-  styleUrl: './shift-update.component.scss'
+  styleUrl: './shift-update.component.scss',
+  providers: [UpdateService]
 })
-export class ShiftUpdateComponent {
+export class ShiftUpdateComponent implements OnInit {
+  tableHeaderList = ['date','detail','ref','handler']
+  updateDataList: any[] = [];
+
+  constructor(private updateService: UpdateService) {}
+
+  ngOnInit(): void {
+      this.updateDataList = this.updateService.allUpdate;
+  }
+
 
 }

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

@@ -0,0 +1,13 @@
+import { Injectable } from "@angular/core";
+import { sample_update } from "./sample_update";
+
+Injectable({
+    providedIn: 'root'
+})
+
+export class UpdateService{
+    get allUpdate(){
+        return sample_update;
+    }
+}
+

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

@@ -0,0 +1 @@
+<p>input-form works!</p>

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

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

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-input-form',
+  standalone: true,
+  imports: [],
+  templateUrl: './input-form.component.html',
+  styleUrl: './input-form.component.scss'
+})
+export class InputFormComponent {
+
+}

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

@@ -0,0 +1,16 @@
+<div class="container">
+    <div class="table">
+        <table>
+            <thead>
+                <tr>
+                    <th *ngFor="let tableHeader of tableHeaders">{{tableHeader}}</th>
+                </tr>
+            </thead>
+            <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>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>

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

@@ -0,0 +1,67 @@
+@import './../../../shared/scss/colors.scss';
+
+.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;
+}
+
+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 0.5rem;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+}

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

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

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

@@ -0,0 +1,32 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { Update } from '../../model/update.model';
+import { ShortenPipe } from '../../pipe/shorten.pipe';
+
+interface RowData {
+  [key: string]: string;
+}
+
+@Component({
+  selector: 'app-table',
+  standalone: true,
+  imports: [CommonModule, ShortenPipe],
+  templateUrl: './table.component.html',
+  styleUrl: './table.component.scss',
+})
+export class TableComponent {
+@Input() 
+@Input() tableHeaders: string[] = ['demo1','demo2','demo3']
+@Input() rowDataList!: any[];
+
+expandRowIndex: number | null = null;
+
+toggleRow(index: number){
+  this.expandRowIndex = this.expandRowIndex === index ? null : index;
+}
+
+getRowNumber(index: number): number {
+  return this.expandRowIndex === index ? 15000 : 75;
+}
+
+}

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

@@ -0,0 +1,5 @@
+<div class="container">
+    <div class="title">
+        <h1>{{ title }}</h1>
+    </div>
+</div>

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

@@ -0,0 +1,18 @@
+@import './../../../shared/scss/colors.scss';
+
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    
+}
+
+.title {
+    padding: 2rem 0;
+    margin: 1rem 2rem 0 2rem;
+}
+
+h1{
+    color: $title;
+}

src/app/shared/components/title/title.component.spec.ts

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

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

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'page-title',
+  standalone: true,
+  imports: [],
+  templateUrl: './title.component.html',
+  styleUrl: './title.component.scss'
+})
+export class TitleComponent {
+@Input() title!: string;
+}

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

@@ -0,0 +1,7 @@
+export class Update{
+    id!: string;
+    date!: string;
+    detail!: string;
+    ref!: string;
+    handler!: string;
+}

src/app/shared/pipe/shorten.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+    name: 'shorten',
+    standalone: true
+})
+
+export class ShortenPipe implements PipeTransform{
+    transform(value: string | null | undefined, limit=20, ellipsis="..."): string | null | undefined {
+        if(value=== null || value === undefined) {
+            return value;
+        }
+        return value.length > limit ? value.slice(0, limit) + ellipsis : value;
+    }
+}