Added Shift 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;
+    }
+}