Merge pull request #2 from arun1205/generic-table-creation-and-features

generic table features add

angular.json

@@ -13,6 +13,14 @@
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
+      "i18n": {
+        "sourceLocale": "en-CA",
+        "locales": {
+          "ar": {
+            "translation": "src/locale/messages.ar.xlf"
+          }
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
@@ -31,9 +39,7 @@
             ],
             "styles": [
               "src/styles.scss",
-              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
-              "node_modules/primeng/resources/primeng.min.css",
-              "node_modules/primeicons/primeicons.css"
+              "node_modules/basscss/css/basscss.min.css"
             ],
             "scripts": []
           },

package.json

@@ -11,15 +11,16 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^15.1.0",
+    "@angular/cdk": "^15.2.9",
     "@angular/common": "^15.1.0",
     "@angular/compiler": "^15.1.0",
     "@angular/core": "^15.1.0",
     "@angular/forms": "^15.1.0",
+    "@angular/material": "^15.2.9",
     "@angular/platform-browser": "^15.1.0",
     "@angular/platform-browser-dynamic": "^15.1.0",
     "@angular/router": "^15.1.0",
-    "primeicons": "^6.0.1",
-    "primeng": "^15.0.1",
+    "basscss": "^8.1.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.12.0"
@@ -28,6 +29,7 @@
     "@angular-devkit/build-angular": "^15.1.6",
     "@angular/cli": "~15.1.6",
     "@angular/compiler-cli": "^15.1.0",
+    "@angular/localize": "^15.2.9",
     "@types/jasmine": "~4.3.0",
     "jasmine-core": "~4.5.0",
     "karma": "~6.4.0",

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

+<div style="margin: 105px;">
+    <h2 class="mx-auto m3 p3" i18n>{{msgs.manageExamsText}}</h2>
+</div>
+
+
 <app-shared-table> </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 { SharedTableComponent } from '../../../shared/components/shared-table/shared-table.component';
+import {msgs} from "../../../../../locale/en";
 
 @Component({
   selector: 'app-exams-table',
@@ -9,4 +9,9 @@ import { SharedTableComponent } from '../../../shared/components/shared-table/sh
 })
 export class ExamsTableComponent {
 
+  msgs = msgs;
+
+ngOnInit() {
+  console.log(this.msgs.manageExamsText);
+}
 }

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">
-            Products
+            
         </div>
     </ng-template>
     <ng-template pTemplate="header" let-columns>
@@ -21,6 +21,7 @@ styleClass="p-datatable-striped"
             <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">
@@ -28,4 +29,43 @@ styleClass="p-datatable-striped"
             In total there are ... products.
         </div>
     </ng-template>
-</p-table>
\ No newline at end of file
+</p-table> -->
+
+<div style="margin: 105px;">
+
+    <mat-form-field>
+        <input matInput  appearance="standard" (keyup)="applyFilter($event.target.value)" placeholder="Search">
+    </mat-form-field>
+    <span>
+        <mat-icon class="" fontIcon="filter_list_alt"></mat-icon>
+        <mat-label class="p1">Filter</mat-label>
+    </span>
+
+    <table class="m4" mat-table [dataSource]="dataSource" class="mat-elevation-z1" matSort
+        sortActionDescription="Sort by number" (matSortChange)="announceSortChange($event)">
+        <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>
+
+            <td mat-cell *matCellDef="let element">
+                <span *ngIf="!disCol.isLink; else link">
+                    {{ disCol.cell(element) }}
+                </span>
+
+                <ng-template #link>
+                    <a>
+                        {{ disCol.cell(element) }}
+                    </a>
+                </ng-template>
+            </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+
+        <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>
+</div>
\ No newline at end of file

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

+table {
+    width: 90%;
+  }
+  th.mat-sort-header-sorted {
+    color: black;
+  }
\ No newline at end of file

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

-import { Component } from '@angular/core';
-
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import {LiveAnnouncer} from '@angular/cdk/a11y';
+import { MatTableDataSource } from '@angular/material/table';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort, Sort} from '@angular/material/sort';
 export interface TableProps {
   id?: string;
   code?: string;
@@ -13,9 +16,30 @@ export interface TableProps {
   rating?: number;
 }
 
-interface Column {
+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 {
+  columnDef: string;
+  header: string;
+  cell: Function;
+  isLink?: boolean;
+  url?: string;
 }
 
 @Component({
@@ -23,14 +47,110 @@ interface Column {
   templateUrl: './shared-table.component.html',
   styleUrls: ['./shared-table.component.scss']
 })
-export class SharedTableComponent {
-  constructor() {}
+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' }
+  ];;
+
+  
+  displayedColumns: Array<string> = [];
+  dataSource: MatTableDataSource<[any]> = new MatTableDataSource();
+  //dataSource = new MatTableDataSource([])
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+
+  ngAfterViewInit() {
+    this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
+   
+  }
+  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() {
+
+    this.displayedColumns = this.tableColumns.map((c) => c.columnDef);
+    this.dataSource = new MatTableDataSource(this.tableData);
+   
    
-    this.value = [{
+/*     this.value = [{
       id: '1000',
       code: 'f230fh0g3',
       name: 'Bamboo Watch',
@@ -64,21 +184,23 @@ export class SharedTableComponent {
       quantity: 24,
       inventoryStatus: 'INSTOCK',
       rating: 5
-    },]
+    },] */
 
-    this.cols = [
-      { field: 'code', header: 'Code' },
-      { field: 'name', header: 'Name' },
-      { field: 'category', header: 'Category' },
-      { field: 'quantity', header: 'Quantity' },
+/*     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();
+      console.log(this.dataSource.filter);
+      if (this.dataSource.paginator) {
+        this.dataSource.paginator.firstPage();
+      }
+    }
 }

src/app/modules/shared/shared.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { TableModule } from 'primeng/table';
+//import { TableModule } from 'primeng/table';
 import { SharedTableComponent } from './components/shared-table/shared-table.component';
+
+import {MaterialModule} from '../../../material/material.module';
+
 import { HeaderComponent } from './components/header/header.component';
 
+
 @NgModule({
   declarations: [
     SharedTableComponent,
@@ -12,7 +16,8 @@ import { HeaderComponent } from './components/header/header.component';
   ],
   imports: [
     CommonModule,
-    TableModule
+    //TableModule,
+    MaterialModule
   ],
   exports :
   [

src/index.html

@@ -6,8 +6,11 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
+<body class="mat-typography">
   <app-root></app-root>
 </body>
 </html>

src/locale/en.ts

+export const msgs = {
+    "manageExamsText" : "Manage Exam Cycles and Exams",
+    "search":"Search"
+   
+  };
\ No newline at end of file

src/locale/messages.ar.xlf

+<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+  <file source-language="en-CA" datatype="plaintext" original="ng2.template">
+    <body>
+      <trans-unit id="7517014163348734512" datatype="html">
+        <source>AAAAA</source>
+         <target>أزكيديا</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/modules/manage-exams-module/components/exams-table/exams-table.component.html</context>
+          <context context-type="linenumber">2</context>
+        </context-group>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>

src/locale/messages.xlf

+<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+  <file source-language="en-CA" datatype="plaintext" original="ng2.template">
+    <body>
+      <trans-unit id="7517014163348734512" datatype="html">
+        <source>AAAAA</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/modules/manage-exams-module/components/exams-table/exams-table.component.html</context>
+          <context context-type="linenumber">2</context>
+        </context-group>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>

src/main.ts

+/// <reference types="@angular/localize" />
+
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';

src/material/material.module.ts

+import { NgModule } from '@angular/core';
+import {A11yModule} from '@angular/cdk/a11y';
+import {CdkAccordionModule} from '@angular/cdk/accordion';
+import {ClipboardModule} from '@angular/cdk/clipboard';
+import {DragDropModule} from '@angular/cdk/drag-drop';
+import {CdkListboxModule} from '@angular/cdk/listbox';
+import {PortalModule} from '@angular/cdk/portal';
+import {ScrollingModule} from '@angular/cdk/scrolling';
+import {CdkStepperModule} from '@angular/cdk/stepper';
+import {CdkTableModule} from '@angular/cdk/table';
+import {CdkTreeModule} from '@angular/cdk/tree';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatBadgeModule} from '@angular/material/badge';
+import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
+import {MatButtonModule} from '@angular/material/button';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatCardModule} from '@angular/material/card';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatChipsModule} from '@angular/material/chips';
+import {MatStepperModule} from '@angular/material/stepper';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatDividerModule} from '@angular/material/divider';
+import {MatExpansionModule} from '@angular/material/expansion';
+import {MatGridListModule} from '@angular/material/grid-list';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {MatListModule} from '@angular/material/list';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatNativeDateModule, MatRippleModule} from '@angular/material/core';
+import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatRadioModule} from '@angular/material/radio';
+import {MatSelectModule} from '@angular/material/select';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatSliderModule} from '@angular/material/slider';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatSortModule} from '@angular/material/sort';
+import {MatTableModule} from '@angular/material/table';
+import {MatTabsModule} from '@angular/material/tabs';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatTreeModule} from '@angular/material/tree';
+import {OverlayModule} from '@angular/cdk/overlay';
+import {CdkMenuModule} from '@angular/cdk/menu';
+import {DialogModule} from '@angular/cdk/dialog';
+
+@NgModule({
+  exports: [
+    A11yModule,
+    CdkAccordionModule,
+    ClipboardModule,
+    CdkListboxModule,
+    CdkMenuModule,
+    CdkStepperModule,
+    CdkTableModule,
+    CdkTreeModule,
+    DragDropModule,
+    MatAutocompleteModule,
+    MatBadgeModule,
+    MatBottomSheetModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatStepperModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MatTreeModule,
+    OverlayModule,
+    PortalModule,
+    ScrollingModule,
+    DialogModule,
+  ]
+})
+export class MaterialModule {}

src/styles.scss

+
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@use '@angular/material' as mat;
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat.core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$upsmf-examination-module-primary: mat.define-palette(mat.$indigo-palette);
+$upsmf-examination-module-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$upsmf-examination-module-warn: mat.define-palette(mat.$red-palette);
+
+// Create the theme object. A theme consists of configurations for individual
+// theming systems such as "color" or "typography".
+$upsmf-examination-module-theme: mat.define-light-theme((
+  color: (
+    primary: $upsmf-examination-module-primary,
+    accent: $upsmf-examination-module-accent,
+    warn: $upsmf-examination-module-warn,
+  )
+));
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include mat.all-component-themes($upsmf-examination-module-theme);
+
 /* You can add global styles to this file, and also import other style files */
 body {
     font-family: var(--font-family);
 }
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+

src/theme.scss

+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@use '@angular/material' as mat;
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat.core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$theme-primary: mat.define-palette(mat.$indigo-palette);
+$theme-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$theme-warn: mat.define-palette(mat.$red-palette);
+
+// Create the theme object. A theme consists of configurations for individual
+// theming systems such as "color" or "typography".
+$theme: mat.define-light-theme((
+  color: (
+    primary: $theme-primary,
+    accent: $theme-accent,
+    warn: $theme-warn,
+  ),
+  typography: mat.define-typography-config(),
+));
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include mat.all-component-themes($theme);

tsconfig.app.json

@@ -3,7 +3,9 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": []
+    "types": [
+      "@angular/localize"
+    ]
   },
   "files": [
     "src/main.ts"

tsconfig.json

@@ -7,6 +7,7 @@
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
+    "strictPropertyInitialization": false,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
@@ -28,6 +29,6 @@
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "strictTemplates": true
+    "strictTemplates": false
   }
 }

tsconfig.spec.json

@@ -4,7 +4,8 @@
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine"
+      "jasmine",
+      "@angular/localize"
     ]
   },
   "include": [