diff --git a/src/app/components/pages/shift-update/sample_update.ts b/src/app/components/pages/shift-update/sample_update.ts index 7601c7c..f44a6ff 100644 --- a/src/app/components/pages/shift-update/sample_update.ts +++ b/src/app/components/pages/shift-update/sample_update.ts @@ -2,19 +2,46 @@ export const sample_update = [ { id: "1", date: "10/10/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.", - remarks:"test", - Sales: "Test Sales", - ref: "Mail Reference", + details: "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:"Called Client did not picked up he is facing compute node issueasdfasdfasdfasdfasdfa sdfasdfasdfasdfasd asdf asdfasdfasdfasdfasdf asdfasdfasdfa sdfasdfasdfasdfasd asdfasdfasdfa asdfasdfas adfasdf", + Sales_Concern: "Test Sales", + reference: "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", + details: "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.", + reference: "Mail Reference 3", remarks:"test", - Sales: "Test Sales", + Sales_Concern: "Test Sales", handler: "xy z" - } + }, + { + id: "3", + date: "10/12/24", + details: "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.", + reference: "Mail Reference 3", + remarks:"test", + Sales_Concern: "Test Sales", + handler: "xy z" + }, + { + id: "4", + date: "10/12/24", + details: "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.", + reference: "Mail Reference 3", + remarks:"test", + Sales_Concern: "Test Sales", + handler: "xy z" + }, + { + id: "5", + date: "10/12/24", + details: "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.", + reference: "Mail Reference 3", + remarks:"test", + Sales_Concern: "Test Sales", + handler: "xy z" + }, ] \ No newline at end of file diff --git a/src/app/components/pages/shift-update/shift-update.component.html b/src/app/components/pages/shift-update/shift-update.component.html index cff79b6..9274bda 100644 --- a/src/app/components/pages/shift-update/shift-update.component.html +++ b/src/app/components/pages/shift-update/shift-update.component.html @@ -1,2 +1,3 @@ + \ No newline at end of file diff --git a/src/app/components/pages/shift-update/shift-update.component.ts b/src/app/components/pages/shift-update/shift-update.component.ts index 3df7ed3..4c7fd57 100644 --- a/src/app/components/pages/shift-update/shift-update.component.ts +++ b/src/app/components/pages/shift-update/shift-update.component.ts @@ -3,17 +3,18 @@ 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'; +import { InputFormComponent } from "../../../shared/components/input-form/input-form.component"; @Component({ selector: 'app-shift-update', standalone: true, - imports: [TableComponent, TitleComponent, ], + imports: [TableComponent, TitleComponent, InputFormComponent], templateUrl: './shift-update.component.html', styleUrl: './shift-update.component.scss', providers: [UpdateService] }) export class ShiftUpdateComponent implements OnInit { - tableHeaderList = ['date','detail','ref','handler'] + tableHeaderList = ['date','details','remarks','Sales_Concern','reference','handler'] updateDataList: any[] = []; constructor(private updateService: UpdateService) {} diff --git a/src/app/shared/components/input-form/input-form.component.html b/src/app/shared/components/input-form/input-form.component.html index 8310de4..ce391cf 100644 --- a/src/app/shared/components/input-form/input-form.component.html +++ b/src/app/shared/components/input-form/input-form.component.html @@ -1 +1,18 @@ -

input-form works!

+
+
+
+
+
+ + +
+
+ +
+
+
+
+
+

+
+
\ No newline at end of file diff --git a/src/app/shared/components/input-form/input-form.component.scss b/src/app/shared/components/input-form/input-form.component.scss index e69de29..d1af97e 100644 --- a/src/app/shared/components/input-form/input-form.component.scss +++ b/src/app/shared/components/input-form/input-form.component.scss @@ -0,0 +1,63 @@ +@import "../../scss/colors.scss"; + +.hidden { + display: none; +} + +.form-container { + display: flex; + align-items: center; + margin-bottom: 2rem; + .control { + display: flex; + flex-direction: column; + + >* { + margin: 0.3rem 0.5rem 0rem 1rem; + } + input { + border: none; + background-color: $bg-color; + border-bottom: 1px solid $txt-color; + &:focus{ + outline: none; + } + } + + } + .btn{ + margin-left: 2rem; + button{ + background-color: $hover-color; + height: 3rem; + width: 7rem; + border: none; + border-radius: 1rem; + &:hover { + background-color: darken($color: $hover-color, $amount: 10); + } + &:active { + background-color: darken($color: $hover-color, $amount: 50); + } + &:disabled { + background-color: darken($color: $hover-color, $amount: 0); + } + } + } +} + +.toggle{ + position: absolute; + right: 2.5rem; + bottom: 0; +} + +i { + color:$title; + font-size: 5rem; +} + +i:hover{ + color: darken($title,20) +} + diff --git a/src/app/shared/components/input-form/input-form.component.ts b/src/app/shared/components/input-form/input-form.component.ts index 1d2b0ef..4d91aa8 100644 --- a/src/app/shared/components/input-form/input-form.component.ts +++ b/src/app/shared/components/input-form/input-form.component.ts @@ -1,12 +1,24 @@ -import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { FormsModule, NgForm } from '@angular/forms'; @Component({ selector: 'app-input-form', standalone: true, - imports: [], + imports: [FormsModule, CommonModule], templateUrl: './input-form.component.html', styleUrl: './input-form.component.scss' }) export class InputFormComponent { + @Input() fields: string[] = ["demo1", "demo2", "demo3", "demo4"] + @Output() formValues: EventEmitter<{}> = new EventEmitter<{}>(); + formData: {[key: string]: string} = {} + @Input() isFormVisible: boolean = false; + onSubmit(formData: NgForm){ + this.formValues.emit(formData.value) + } + toggleForm() { + this.isFormVisible = !this.isFormVisible; + } } diff --git a/src/app/shared/components/table/table.component.scss b/src/app/shared/components/table/table.component.scss index 4a9b866..a8edc49 100644 --- a/src/app/shared/components/table/table.component.scss +++ b/src/app/shared/components/table/table.component.scss @@ -25,6 +25,7 @@ th{ color: $txt-heading-color; font-size: 1.5rem; padding-bottom: 3rem; + position:sticky; } tbody tr { diff --git a/src/app/shared/model/update.model.ts b/src/app/shared/model/update.model.ts index d9e5893..00a9791 100644 --- a/src/app/shared/model/update.model.ts +++ b/src/app/shared/model/update.model.ts @@ -1,7 +1,9 @@ export class Update{ id!: string; date!: string; - detail!: string; - ref!: string; + details!: string; + remarks!: string; + Sales_Concern!: string; + reference!: string; handler!: string; } \ No newline at end of file diff --git a/src/index.html b/src/index.html index e5503fb..42c6ca1 100644 --- a/src/index.html +++ b/src/index.html @@ -6,6 +6,7 @@ +