Merge pull request #4 from arun1205/further-features-generic-table

Further features generic table

src/app/modules/manage-exams-module/components/exams-table/exams-table.component.html

@@ -3,4 +3,11 @@
 </div>
 
 
-<app-shared-table> </app-shared-table>
+<app-shared-table
\ No newline at end of file
+    [tableColumns]="examsTableColumns"
+    [tableData]="exams"
+    [isPageable]="true"
+    (rowAction)="removeItem($event)"
+    > 
+
+</app-shared-table>
\ No newline at end of file

src/app/modules/manage-exams-module/components/exams-table/exams-table.component.ts

 import { Component } from '@angular/core';
 
-import {msgs} from "../../../../../locale/en";
+import { msgs } from "../../../../../locale/en";
+import { TableColumn } from '../../../shared/components/shared-table/shared-table.component';
 
+export interface Exams {
+  examId: string;
+  description: string;
+  startDate: string;
+  endDate: string;
+  isActive?: boolean;
+}
 @Component({
   selector: 'app-exams-table',
   templateUrl: './exams-table.component.html',
   styleUrls: ['./exams-table.component.scss']
 })
+
+
 export class ExamsTableComponent {
 
   msgs = msgs;
 
-ngOnInit() {
-  console.log(this.msgs.manageExamsText);
-}
+  exams: Exams[];
+  examsTableColumns: TableColumn[];
+
+  ngOnInit(): void {
+    this.initializeColumns();
+    console.log(this.examsTableColumns)
+    this.getExams();
+    console.log(this.exams)
+  }
+
+  initializeColumns(): void {
+    this.examsTableColumns = [
+      {
+        columnDef: 'examId',
+        header: 'Exam Cycle',
+        isSortable: true,
+        cell: (element: Record<string, any>) => `${element['examId']}`
+      },
+      {
+        columnDef: 'description',
+        header: 'Course Name',
+        isSortable: true,
+        cell: (element: Record<string, any>) => `${element['description']}`
+      },
+      {
+        columnDef: 'startDate',
+        header: 'Start Date',
+        isSortable: true,
+        cell: (element: Record<string, any>) => `${element['startDate']}`
+      },
+      {
+        columnDef: 'endDate',
+        header: 'End Date',
+        isSortable: true,
+        cell: (element: Record<string, any>) => `${element['endDate']}`
+      },
+      {
+        columnDef: 'schedule',
+        header: '',
+        isSortable: false,
+        cell: (element: Record<string, any>) => `View Schedule`
+      },
+      {
+        columnDef: 'isActive',
+        header: '',
+        isSortable: false,
+        isAction: true,
+        cell: (element: Record<string, any>) => `${element['isActive']}`
+      }
+
+    ];
+  }
+
+  getExams() {
+    this.exams = [
+      {
+        examId: "M SC ( NURSING ) - SEMESTER 1",
+        description: 'M SC ( NURSING )',
+        startDate: "23-06-2023",
+        endDate: "23-12-2023",
+
+        isActive: true
+      },
+      {
+        examId: "M SC ( NURSING ) - SEMESTER 1",
+        description: 'M SC ( NURSING )',
+        startDate: "23-06-2023",
+        endDate: "23-12-2023",
+
+        isActive: true
+      },
+      {
+        examId: "M SC ( NURSING ) - SEMESTER 1",
+        description: 'M SC ( NURSING )',
+        startDate: "23-06-2023",
+        endDate: "23-12-2023",
+
+        isActive: true
+      },
+      {
+        examId: "M SC ( NURSING ) - SEMESTER 2",
+        description: 'M SC ( NURSING )',
+        startDate: "23-06-2023",
+        endDate: "23-12-2023",
+
+        isActive: true
+      },
+      {
+        examId: "M SC ( NURSING ) - SEMESTER 2",
+        description: 'M SC ( NURSING )',
+        startDate: "23-06-2023",
+        endDate: "23-12-2023",
+
+        isActive: true
+      }, {
+        examId: "M SC ( NURSING ) - SEMESTER 2",
+        description: 'M SC ( NURSING )',
+        startDate: "23-06-2023",
+        endDate: "23-12-2023",
+
+        isActive: true
+      },
+      {
+        examId: "B SC ( NURSING ) - SEMESTER 1",
+        description: 'B SC ( NURSING )',
+        startDate: "23-06-2023",
+        endDate: "23-12-2023",
+
+        isActive: true
+      },
+      {
+        examId: "B SC ( NURSING ) - SEMESTER 2",
+        description: 'B SC ( NURSING )',
+        startDate: "23-06-2023",
+        endDate: "23-12-2023",
+
+        isActive: true
+      },
+      {
+        examId: "B SC ( NURSING ) - SEMESTER 1",
+        description: 'B SC ( NURSING )',
+        startDate: "23-06-2023",
+        endDate: "23-12-2023",
+
+        isActive: true
+      },
+      {
+        examId: "B SC ( NURSING ) - SEMESTER 2",
+        description: 'B SC ( NURSING )',
+        startDate: "23-06-2023",
+        endDate: "23-12-2023",
+
+        isActive: true
+      },
+      {
+        examId: "B SC ( NURSING ) - SEMESTER 2",
+        description: 'B SC ( NURSING )',
+        startDate: "23-06-2023",
+        endDate: "23-12-2023",
+
+        isActive: true
+      }
+    ];
+  }
+
+  removeItem(e: Event) {
+    console.log(e)
+  }
 }

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

-<!-- 
-<p-table [columns]="cols" [value]="value"
-styleClass="p-datatable-striped"
- [tableStyle]="{'min-width': '60rem'}">
-    <ng-template pTemplate="caption">
-        <div class="flex align-items-center justify-content-between">
-            
-        </div>
-    </ng-template>
-    <ng-template pTemplate="header" let-columns>
-        <tr>
-            <th *ngFor="let col of columns">
-                {{ col.header }}
-            </th>
-        </tr>
-    </ng-template>
-    <ng-template pTemplate="body" let-product>
-        <tr>
-            <td>{{product.name}}</td>
-            <td><img [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" /></td>
-            <td>{{product.price | currency:'USD'}}</td>
-            <td>{{product.category}}</td>
-            <td>{{product.category}}</td>
-           <td> <button><i class="pi pi-times" style="font-size: 1.5rem"></i></button></td>
-        </tr>
-    </ng-template>
-    <ng-template pTemplate="summary">
-        <div class="flex align-items-center justify-content-between">
-            In total there are ... products.
-        </div>
-    </ng-template>
-</p-table> -->
-
 <div style="margin: 105px;">
 
     <mat-form-field>
-        <input matInput  appearance="standard" (keyup)="applyFilter($event.target.value)" placeholder="Search">
+        <input matInput appearance="standard" (keyup)="applyFilter($event.target.value)" placeholder="Search">
     </mat-form-field>
     <span>
         <mat-icon class="" fontIcon="filter_list_alt"></mat-icon>
@@ -42,23 +9,35 @@ styleClass="p-datatable-striped"
     </span>
 
     <table class="m4" mat-table [dataSource]="dataSource" class="mat-elevation-z1" matSort
-        sortActionDescription="Sort by number" (matSortChange)="announceSortChange($event)">
+        sortActionDescription="Sort by number">
         <ng-container matColumnDef="position" *ngFor="let disCol of tableColumns let colIndex = index;"
             matColumnDef="{{disCol.columnDef}}">
-            <td mat-header-cell *matHeaderCellDef mat-sort-header>
-                {{ disCol.header }}
-            </td>
+            <!-- if sortable column header -->
+            <ng-container *ngIf="disCol.isSortable; else notSortable">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    {{disCol.header}}
+                </th>
+            </ng-container>
+            <!-- else not sortable -->
+            <ng-template #notSortable>
+                <th mat-header-cell *matHeaderCellDef>
+                    {{disCol.header}}
+                </th>
+
+            </ng-template>
 
-            <td mat-cell *matCellDef="let element">
-                <span *ngIf="!disCol.isLink; else link">
+            <td mat-cell *matCellDef="let element" [id]="rowAction" (click)="onRowClick(element)">
+                <span *ngIf="!disCol.isAction; else action">
                     {{ disCol.cell(element) }}
                 </span>
 
-                <ng-template #link>
-                    <a>
-                        {{ disCol.cell(element) }}
-                    </a>
+                <ng-template #action>
+                    <button mat-button [id]="rowActionIcon" (click)="emitRowAction(element)">
+                        <mat-icon>delete</mat-icon>
+                    </button>
                 </ng-template>
+
+
             </td>
         </ng-container>
 
@@ -66,6 +45,9 @@ styleClass="p-datatable-striped"
 
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
-    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons aria-label="Select page of periodic elements">
+
+    <mat-paginator *ngIf="isPageable" 
+        [pageSizeOptions]="[10, 20, 50]" 
+        showFirstLastButtons aria-label="Select page..">
     </mat-paginator>
 </div>
\ No newline at end of file

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

-import { AfterViewInit, Component, ViewChild } from '@angular/core';
-import {LiveAnnouncer} from '@angular/cdk/a11y';
+import { AfterViewInit, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
 import {MatPaginator} from '@angular/material/paginator';
 import {MatSort, Sort} from '@angular/material/sort';
@@ -16,30 +15,20 @@ export interface TableProps {
   rating?: number;
 }
 
-export interface TableProps1 {
-  firstColumnData?: string;
-  secondColumnData?: string;
-  thirdColumnData?: string;
-  fourthColumnData?: string;
-  fifthColumnData?: number;
-  sixthColumnData?: number;
-  seventhColumnData?: string;
-  eighthColumnData?: string;
-  ninthColumnData?: string;
-  tenthColumnData?: number;
-}
 
 /* interface Column {
   field: string;
   header: string;
 } */
 
-export interface Column {
+export interface TableColumn {
   columnDef: string;
   header: string;
   cell: Function;
   isLink?: boolean;
+  isAction?: boolean;
   url?: string;
+  isSortable?: boolean;
 }
 
 @Component({
@@ -48,153 +37,37 @@ export interface Column {
   styleUrls: ['./shared-table.component.scss']
 })
 export class SharedTableComponent implements AfterViewInit {
-  constructor(private _liveAnnouncer: LiveAnnouncer) {}
+
   value!: TableProps[];
 
-  cols!: Column[];
-
-  tableColumns: Array<Column> = [
-    {
-      columnDef: 'position',
-      header: 'Exam cycle',
-      cell: (element: Record<string, any>) => `${element['position']}`
-    },
-    {
-      columnDef: 'name',
-      header: 'Course Name',
-      cell: (element: Record<string, any>) => `${element['name']}`,
-      isLink: true,
-      url: 'abc'
-    },
-    {
-      columnDef: 'weight',
-      header: 'Start date',
-      cell: (element: Record<string, any>) => `${element['weight']}`
-    },
-    {
-      columnDef: 'symbol',
-      header: 'End date',
-      cell: (element: Record<string, any>) => `${element['symbol']}`
-    }
-  ];
-
-  anotherTableColumns: Array<Column> = [
-    {
-      columnDef: 'name',
-      header: 'Name',
-      cell: (element: Record<string, any>) => `${element['name']}`
-    },
-    {
-      columnDef: 'role',
-      header: 'Role',
-      cell: (element: Record<string, any>) => `${element['role']}`
-    },
-    {
-      columnDef: 'skills',
-      header: 'Skills',
-      cell: (element: Record<string, any>) => `${element['skills']}`
-    }
-  ];
-
-  anotherTableData: Array<any> = [
-    {
-      name: 'John',
-      role: 'Fullstack Developer',
-      skills: 'Angular, Typescript, React'
-    },
-    { name: 'Mile', role: 'Java Developer', skills: 'Java' },
-    { name: 'Peter', role: 'DevOps', skills: 'AWS, GCP' }
-  ];
-
-
-  tableData: Array<any> =  [
-    { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
-    { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
-    { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
-    { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
-    { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
-    { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
-    { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
-    { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
-    { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
-    { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' }
-  ];;
-
-  
+  cols!: TableColumn[];
+
   displayedColumns: Array<string> = [];
-  dataSource: MatTableDataSource<[any]> = new MatTableDataSource();
-  //dataSource = new MatTableDataSource([])
+  //dataSource: MatTableDataSource<[any]> = new MatTableDataSource();
+  public dataSource = new MatTableDataSource([]);
+ // dataSource = new MatTableDataSource([])
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
+  @Input() isPageable = true;
+  @Input() tableColumns: TableColumn[];
+  @Input() set tableData(data: any[]) {
+    this.setTableDataSource(data);
+  }
+
+  @Output() rowAction: EventEmitter<any> = new EventEmitter<any>();
+
+
+  constructor() {}
+
   ngAfterViewInit() {
-    this.dataSource.sort = this.sort;
     this.dataSource.paginator = this.paginator;
-   
+    this.dataSource.sort = this.sort;
   }
-  announceSortChange(sortState: Sort) {
-    console.log(sortState)
-    // This example uses English messages. If your application supports
-    // multiple language, you would internationalize these strings.
-    // Furthermore, you can customize the message to add additional
-    // details about the values being sorted.
-    if (sortState.direction) {
-      this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
-    } else {
-      this._liveAnnouncer.announce('Sorting cleared');
-    }
+
+  ngOnInit(): void {
+    this.displayedColumns = this.tableColumns.map((tableColumn:any) => tableColumn.columnDef);
   }
-  ngOnInit() {
-
-    this.displayedColumns = this.tableColumns.map((c) => c.columnDef);
-    this.dataSource = new MatTableDataSource(this.tableData);
-   
-   
-/*     this.value = [{
-      id: '1000',
-      code: 'f230fh0g3',
-      name: 'Bamboo Watch',
-      description: 'Product Description',
-      image: 'bamboo-watch.jpg',
-      price: 65,
-      category: 'Accessories',
-      quantity: 24,
-      inventoryStatus: 'INSTOCK',
-      rating: 5
-    }, {
-      id: '1000',
-      code: 'f230fh0g3',
-      name: 'Bamboo Watch',
-      description: 'Product Description',
-      image: 'bamboo-watch.jpg',
-      price: 65,
-      category: 'Accessories',
-      quantity: 24,
-      inventoryStatus: 'INSTOCK',
-      rating: 5
-    },
-    {
-      id: '1000',
-      code: 'f230fh0g3',
-      name: 'Bamboo Watch',
-      description: 'Product Description',
-      image: 'bamboo-watch.jpg',
-      price: 65,
-      category: 'Accessories',
-      quantity: 24,
-      inventoryStatus: 'INSTOCK',
-      rating: 5
-    },] */
-
-/*     this.cols = [
-      { field: 'code', header: 'Exam Cycle' },
-      { field: 'name', header: 'Course Name' },
-      { field: 'category', header: 'Start Date' },
-      { field: 'quantity', header: 'End Date' },
-      { field: '', header: '' }
-    ];
- */
-    };
 
     applyFilter(filterValue: string) {
       this.dataSource.filter = filterValue.trim().toLowerCase();
@@ -203,4 +76,19 @@ export class SharedTableComponent implements AfterViewInit {
         this.dataSource.paginator.firstPage();
       }
     }
+
+    onRowClick(e: Event){
+      console.log(e);
+    }
+
+    setTableDataSource(data : any) {
+     
+      this.dataSource = new MatTableDataSource(data);
+      this.dataSource.paginator = this.paginator;
+      this.dataSource.sort = this.sort;
+    }
+
+    emitRowAction(row: any) {
+      this.rowAction.emit(row);
+    }
 }