develop tabular UI in angular

client/src/app/app.component.css

@@ -0,0 +1,14 @@
+.main{
+    align-items: center;
+    padding: 15px;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 40px;
+    margin-top: 20px;
+}
+.main button{
+    padding: 10px;
+    font-size: 16px;
+    font-weight: 600;
+    border-radius: 10px;
+}

client/src/app/app.component.html

@@ -1 +1,4 @@
-<p>das</p>
+<div class="main">
+    <button (click)="onLoadData()">{{loadButton}}</button>
+</div>
+<app-tabular *ngIf="showTable" [userdata]="userData"></app-tabular>

client/src/app/app.component.ts

@@ -1,10 +1,26 @@
 import { Component } from '@angular/core';
+import { UserModel } from './user.model';
+import { UserService } from './user.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'client';
+  userData: UserModel[] = [];
+  loadButton="Load Data";
+  showTable = false;
+
+  constructor(private userService: UserService) { }
+
+  onLoadData(){
+    this.loadButton = "Refresh data";
+    this.showTable = true;
+    this.userService.getUsers().subscribe(
+      responseData=>{
+        this.userData = responseData;
+      }
+    )
+  }
 }

client/src/app/app.module.ts

@@ -1,14 +1,24 @@
+import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
+import { ReactiveFormsModule} from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
+import { TabularComponent } from './tabular/tabular.component';
+import { UserAddComponent } from './tabular/user-add/user-add.component';
+import { DateformatPipe } from './tabular/dateformat.pipe';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    TabularComponent,
+    UserAddComponent,
+    DateformatPipe
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    ReactiveFormsModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

client/src/app/tabular/dateformat.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { DateformatPipe } from './dateformat.pipe';
+
+describe('DateformatPipe', () => {
+  it('create an instance', () => {
+    const pipe = new DateformatPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

client/src/app/tabular/dateformat.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'dateformat'
+})
+export class DateformatPipe implements PipeTransform {
+
+  transform(value: string): string {
+    const date = new Date(value);
+    return date.getDate()+" "+date.toLocaleString('en-US', {month: 'long',})+" "+date.getFullYear()+" Time: "+date.getHours()+":"+date.getMinutes();
+  }
+
+}

client/src/app/tabular/tabular.component.css

@@ -0,0 +1,43 @@
+.table_tag{
+    display:revert;
+    width: 100%;
+    border: 2px solid;
+    border-radius: 10px;
+    border-color: darkgray;
+    padding: 5px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    box-shadow: 2px 5px 2px gainsboro;
+    border-collapse: separate;
+    border-spacing: 0 1em;
+}
+.table_tag tr{
+    border-bottom: 2px solid;
+}
+.table_tag th{
+    font-size: 20px;
+    padding: 10px;
+    text-align: center;
+}
+.table_tag td{
+    text-align: center;
+    font-size: 1em;
+    /* box-sizing: border-box; */
+
+}
+td input{
+    height: 30px;
+    font-size: 1em;
+    background-color: white;
+
+}
+.btn{
+    margin-right: 10px;
+    background-color: dodgerblue !important;
+    color: white;
+    border-radius: 12px;
+}
+.btn-danger{
+    background-color: coral !important;
+    border-radius: 12px;
+}

client/src/app/tabular/tabular.component.html

@@ -0,0 +1,18 @@
+<app-user-add (updatedData)="onUpdatedData()"></app-user-add>
+<table class="table_tag">
+    <tr><th *ngFor="let head of header">{{head}}</th></tr>
+    <tr *ngFor="let data of userData">
+        <td><input type="text" name="firstName" [value]="data.firstName" disabled></td>
+        <td><input type="text" name="middleName" [value]="data.middleName" disabled></td>
+        <td><input type="text" name="lastName" [value]="data.lastName" disabled></td>
+        <td><input type="email" name="email" [value]="data.email" disabled></td>
+        <td><input type="number" name="phoneNumber" [value]="data.phoneNumber" disabled></td>
+        <td><input type="text" name="role" [value]="data.role" disabled></td>
+        <td><input type="text" name="address" [value]="data.address" disabled></td>
+        <td><input type="text" name="createdDate" [value]="data.createdDate | dateformat" disabled></td>
+        <td>
+            <input type="button" class="btn" (click)="saveEnable ? onSave($event,data) : onEdit($event)" value="Edit">
+            <input type="button" class="btn-danger" (click)="saveEnable ? onCancel($event) : onDelete(data)" value="Delete">
+        </td>
+    </tr>
+</table>

client/src/app/tabular/tabular.component.spec.ts

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

client/src/app/tabular/tabular.component.ts

@@ -0,0 +1,77 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { UserModel, columnName} from '../user.model';
+import { UserService } from '../user.service';
+
+@Component({
+  selector: 'app-tabular',
+  templateUrl: './tabular.component.html',
+  styleUrls: ['./tabular.component.css']
+})
+export class TabularComponent implements OnInit {
+  prevArray:string[] = [];
+  @Input ('userdata') userData:UserModel[];
+  saveEnable = false;
+  header = Object.values(columnName);
+
+  constructor(private userService: UserService) { }
+
+  ngOnInit(): void {
+  }
+
+  onUpdatedData(){
+    this.userService.getUsers().subscribe(newData=>{
+      this.userData = newData;
+    });
+  }
+
+  onEdit(event:any){
+    event.path[0].value = "Save";
+    event.path[1].childNodes[1].value = "Cancel";
+    for(let j=0;j<event.path[2].cells.length-2;j++){
+      event.path[2].cells[j].childNodes[0].disabled = false;
+      this.prevArray.push(event.path[2].cells[j].childNodes[0].value);
+    }
+    this.saveEnable = true
+  }
+
+  onSave(event:any,data:UserModel){
+    this.saveEnable = false;
+    let editData: {[key: string]: string}={};
+    event.path[0].value = "Edit";
+    event.path[1].childNodes[1].value = "Delete";
+    let j:number=0;
+    for(j=0;j<event.path[2].cells.length-2;j++){
+      event.path[2].cells[j].childNodes[0].disabled = true;
+      // data[event.path[2].cells[j].childNodes[0].name]=event.path[2].cells[j].childNodes[0].value;
+      editData[event.path[2].cells[j].childNodes[0].name]=event.path[2].cells[j].childNodes[0].value;
+    }
+    editData[event.path[2].cells[j].childNodes[0].name]=data.createdDate;
+    this.userService.editUser(data.userId as string,editData).subscribe(_=>{
+      this.userService.getUsers().subscribe(newData=>{
+        this.userData = newData;
+      });
+    });
+
+  }
+
+  onCancel(event:any){
+    this.saveEnable = false;
+    event.path[0].value = "Delete";
+    event.path[1].childNodes[0].value = "Edit";
+    let j:number=0;
+    for(j=0;j<event.path[2].cells.length-2;j++){
+      event.path[2].cells[j].childNodes[0].disabled = true;
+      event.path[2].cells[j].childNodes[0].value = this.prevArray[j];
+    }
+  }
+
+  onDelete(selectedUser:UserModel){
+    this.userService.deleteUser(selectedUser.userId as string).subscribe(_=>{
+      this.userService.getUsers().subscribe(newData=>{
+        this.userData = newData;
+      });
+    })
+  }
+
+
+}

client/src/app/tabular/user-add/user-add.component.css

@@ -0,0 +1,25 @@
+.input_tag{
+    display: flex;
+    justify-content: space-around;
+    text-align: center;
+    font-size: 1em;
+    margin-bottom: 10px;
+}
+.input_tag input{
+    height: 30px;
+    font-size: 1em;
+    background-color: white;
+    border-color: #cbb3b3;
+    border-radius: 10px;
+}
+.btn{
+    padding: 10px;
+    padding-bottom: 25px;
+    background-color: dodgerblue !important;
+    color:white
+}
+.input_tag p{
+    margin-block-start:5px;
+    margin-block-end: 5px;
+    color: red;
+}

client/src/app/tabular/user-add/user-add.component.html

@@ -0,0 +1,37 @@
+<form class="input_tag" [formGroup]="addUserForm" (ngSubmit)="onSubmit()">
+    <div>
+        <input type="text" placeholder="First Name" required formControlName="firstName" />
+        <p *ngIf="!addUserForm.get('firstName')?.valid && addUserForm.get('firstName')?.touched">This field is required!</p>
+    </div>
+    <div>
+        <input type="text" placeholder="Middle Name" formControlName="middleName" />
+    </div>
+    <div>
+        <input type="text" placeholder="Last Name" required formControlName="lastName" />
+        <p *ngIf="!addUserForm.get('lastName')?.valid && addUserForm.get('lastName')?.touched">This field is required!</p>
+    </div>
+    <div>
+        <input type="email" placeholder="Email" required formControlName="email" />
+        <p *ngIf="!addUserForm.get('email')?.valid && addUserForm.get('email')?.touched">Please enter a valid email!</p>
+    </div>
+    <div>
+        <input type="number" placeholder="Phone Number" required formControlName="phoneNumber" />
+        <p *ngIf="!addUserForm.get('phoneNumber')?.valid && addUserForm.get('phoneNumber')?.touched">This field is required!</p>
+    </div>
+    <div>
+        <input type="text" placeholder="Role" required formControlName="role" />
+        <div>
+            <p *ngIf="!addUserForm.get('role')?.valid && addUserForm.get('role')?.touched">Please choose from given role:</p>
+            <p *ngIf="!addUserForm.get('role')?.valid && addUserForm.get('role')?.touched">SuperAdmin , Admin , Subscriber</p>
+        </div>
+    </div>
+    <div>
+        <input type="text" placeholder="Address" required formControlName="address" />
+        <p *ngIf="!addUserForm.get('address')?.valid && addUserForm.get('address')?.touched">This field is required!</p>
+    </div>
+    <div>
+        <input type="submit" class="btn" value="Add User"/>
+        <p *ngIf="!addUserForm?.valid && addButtonClicked">Please Enter the valid data!</p>
+    </div>
+</form>
+

client/src/app/tabular/user-add/user-add.component.spec.ts

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