diff --git a/src/app/modules/manage-exams-module/components/exams-table/exams-table.component.html b/src/app/modules/manage-exams-module/components/exams-table/exams-table.component.html
index 8f855b7e3034940ca4f104a36e71e6fbab338d46..347bbffb217e8e305e6a73e7de882f317ece8049 100644
--- a/src/app/modules/manage-exams-module/components/exams-table/exams-table.component.html
+++ b/src/app/modules/manage-exams-module/components/exams-table/exams-table.component.html
@@ -3,4 +3,11 @@
</div>
-<app-shared-table> </app-shared-table>
\ No newline at end of file
+<app-shared-table
+ [tableColumns]="examsTableColumns"
+ [tableData]="exams"
+ [isPageable]="true"
+ (rowAction)="removeItem($event)"
+ >
+
+</app-shared-table>
\ No newline at end of file
diff --git a/src/app/modules/manage-exams-module/components/exams-table/exams-table.component.ts b/src/app/modules/manage-exams-module/components/exams-table/exams-table.component.ts
index f3ea26d7b65247f7822a834b748ef4198c0c9e2b..82a91a385dda8c1a43e92d6c620f2d74c15cd2a0 100644
--- a/src/app/modules/manage-exams-module/components/exams-table/exams-table.component.ts
+++ b/src/app/modules/manage-exams-module/components/exams-table/exams-table.component.ts
@@ -1,17 +1,126 @@
import { Component } from '@angular/core';
import {msgs} from "../../../../../locale/en";
+import {TableColumn} from '../../../shared/components/shared-table/shared-table.component';
+export interface Exams {
+ id: number;
+ description: string;
+ amount: number;
+ price: number;
+ discount: number;
+ 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: 'id',
+ header: 'Exam Cycle',
+ isSortable:true,
+ cell: (element: Record<string, any>) => `${element['id']}`
+ },
+ {
+ columnDef: 'description',
+ header: 'Course Name',
+ isSortable:true,
+ cell: (element: Record<string, any>) => `${element['description']}`
+ },
+ {
+ columnDef: 'amount',
+ header: 'Start Date',
+ isSortable:true,
+ cell: (element: Record<string, any>) => `${element['amount']}`
+ },
+ {
+ columnDef: 'price',
+ header: 'End Date',
+ isSortable:true,
+ cell: (element: Record<string, any>) => `${element['price']}`
+ },
+ {
+ columnDef: 'discount',
+ 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 = [
+ {
+ id: 1,
+ description: 'first book',
+ amount: 100,
+ price: 120,
+ discount: 20,
+ isActive: true
+ },
+ {
+ id: 2,
+ description: 'second book',
+ amount: 100,
+ price: 120,
+ discount: 20,
+ isActive: true
+ },
+ {
+ id: 3,
+ description: 'third book',
+ amount: 100,
+ price: 120,
+ discount: 20,
+ isActive: true
+ },
+ {
+ id: 4,
+ description: 'fourth book',
+ amount: 100,
+ price: 120,
+ discount: 20,
+ isActive: true
+ },
+ {
+ id: 5,
+ description: 'fifth book',
+ amount: 100,
+ price: 120,
+ discount: 20,
+ isActive: true
+ }
+ ];
+ }
+
+ removeItem(e : Event){
+ console.log(e)
+ }
}
diff --git a/src/app/modules/shared/components/shared-table/shared-table.component.html b/src/app/modules/shared/components/shared-table/shared-table.component.html
index f3a9ba805d67e84010359a1cae3e8e711f0d8f24..13dd76ef1e5623729b9bbc3feff2c34c1168a115 100644
--- a/src/app/modules/shared/components/shared-table/shared-table.component.html
+++ b/src/app/modules/shared/components/shared-table/shared-table.component.html
@@ -1,40 +1,7 @@
-<!--
-<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
diff --git a/src/app/modules/shared/components/shared-table/shared-table.component.ts b/src/app/modules/shared/components/shared-table/shared-table.component.ts
index f95d9e7f2028d3dc73fbbef655ebcc4a1c0816fd..73cdb6aa184c469523712c0c0bca291359691e13 100644
--- a/src/app/modules/shared/components/shared-table/shared-table.component.ts
+++ b/src/app/modules/shared/components/shared-table/shared-table.component.ts
@@ -1,5 +1,4 @@
-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);
+ }
}