@praful.pathare/q-table 0.0.1 → 0.0.2

package/README.md

@@ -1,63 +1,10 @@
-# QTable
-
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0.
-
-## Code scaffolding
-
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
-
-```bash
-ng generate component component-name
-```
-
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
-```
-
-## Building
-
-To build the library, run:
-
-```bash
-ng build q-table
-```
-
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
-
-### Publishing the Library
-
-Once the project is built, you can publish your library by following these steps:
-
-1. Navigate to the `dist` directory:
-   ```bash
-   cd dist/q-table
-   ```
-
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
-
-## Running unit tests
-
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
-
-```bash
-ng test
-```
-
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
-
-```bash
-ng e2e
-```
-
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
-
-## Additional Resources
-
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+# q-table
+[npmjs.com/q-table](https://www.npmjs.com/package/@praful.pathare/q-table)
+#### Usage 
+```html
+<q-table 
+   [data]="data" 
+/>
+```
+#
+[Reference](https://chatgpt.com/share/699064df-7c34-8000-a2b4-6907b359be5a)

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/q-table",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,23 +1,12 @@
-{
-  "name": "@praful.pathare/q-table",
-  "version": "0.0.1",
-  "peerDependencies": {
-    "@angular/common": "^21.1.0",
-    "@angular/core": "^21.1.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/q-table.mjs",
-  "typings": "types/q-table.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/q-table.d.ts",
-      "default": "./fesm2022/q-table.mjs"
-    }
-  }
-}
+{
+  "name": "@praful.pathare/q-table",
+  "version": "0.0.2",
+  "peerDependencies": {
+    "@angular/common": "^21.1.0",
+    "@angular/core": "^21.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/src/lib/q-table.css

@@ -0,0 +1,39 @@
+
+#q-table-wrapper {
+    white-space: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+.input {
+    border: 1px solid #888;
+    border-radius: 5px;
+    line-height: 26px;
+    padding: 0 10px;
+    cursor: text;
+}
+
+.search-result-description-wrapper {
+    margin: 10px;
+}
+
+.header {
+    text-transform: capitalize;
+    font-weight: bold;
+}
+
+.row-wrapper {
+}
+
+.row-wrapper:nth-child(even){
+    background-color: #f8f8f8;
+}
+
+.row {
+    display: flex;
+}
+
+.cell {
+    flex: 1;
+    padding: 10px;
+}

package/src/lib/q-table.html

@@ -0,0 +1,30 @@
+<div id="q-table-wrapper">
+
+
+  <div class="search-wrapper">
+    <input type="text" class="input search-input" placeholder="Search..." [(ngModel)]="q" (keyup)="search()" />
+
+    <div *ngIf="q" class="search-result-description-wrapper">
+      {{searchResultCount}} search results found for '{{q}}'
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="cell" *ngFor="let header of headers">
+      <div class="header">
+        {{header}}
+      </div>
+    </div>
+  </div>
+
+  <div class="row-wrapper" *ngFor="let row of rows">
+    <div class="row" *ngIf="row.visible">
+      <div *ngFor="let cell of row.cells" class="cell">
+        {{ cell.value }}
+      </div>
+    </div>
+  </div>
+
+
+
+</div>

package/src/lib/q-table.spec.ts

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

package/src/lib/q-table.ts

@@ -0,0 +1,110 @@
+import { NgFor, NgIf } from '@angular/common';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { FormsModule, NgModel } from '@angular/forms';
+
+@Component({
+  selector: 'q-table',
+  imports: [NgFor, NgIf, FormsModule],
+  templateUrl: `./q-table.html`,
+  styleUrl: `./q-table.css`
+})
+export class QTable implements OnChanges {
+
+  @Input('data')
+  data?: any[]
+
+  q: string = '';
+  searchResultCount: number = 0;
+
+  headers: string[] = []
+  rows: Row[] = []
+  columnIndex: any = {};
+  totalColumns: number = 0;
+
+
+  ngOnChanges(changes: SimpleChanges): void {
+
+    if (this.data === undefined) {
+      return;
+    }
+
+    this.data.forEach(item => this.updateHeaders(Object.keys(item)))
+    this.data.forEach(item => this.updateRows(item))
+  }
+
+  updateRows(item: any): void {
+    
+    let row: Row = new Row(this.totalColumns);
+
+    Object.keys(item).forEach(key => {
+      row.updateCell(this.columnIndex[key], item[key]);
+    })
+
+    this.rows.push(row);
+  }
+
+  updateHeaders(keys: string[]): void {
+
+    if (this.headers === undefined || this.headers.length == 0) {
+      this.headers = keys;
+    }
+    else {
+      keys.forEach(key => {
+        if (this.headers.indexOf(key) < 0) {
+          this.headers.push(key)
+        }
+      })
+    }
+
+    this.headers.forEach((header, index) => {
+      this.columnIndex[header] = index;
+    })
+
+    this.totalColumns = Object.keys(this.columnIndex).length;
+  }
+
+  search(): void {
+
+    this.searchResultCount = 0;
+
+    this.rows.forEach((row) => {
+
+      row.visible = false;
+
+      row.cells.forEach((cell) => {
+        if((""+cell.value).toLowerCase().includes(this.q.toLowerCase())) {
+          row.visible = true;
+          this.searchResultCount++;
+        }
+      })
+
+    })
+  }
+
+
+}
+
+class Cell {
+  value: any = undefined;
+  hidden: boolean = false;
+
+  constructor() {
+  }
+}
+
+class Row {
+  cells: Cell[] = []
+  visible: boolean = true;
+
+  constructor(totalCells: number) {
+    for (let i = 0; i < totalCells; i++) {
+      this.cells.push(new Cell());
+    }
+
+    this.visible = true;
+  }
+
+  updateCell(columnIndex: number, value: any): void {
+    this.cells[columnIndex].value = value;
+  }
+}

package/src/lib/services/utils.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { Utils } from './utils';
+
+describe('Utils', () => {
+  let service: Utils;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(Utils);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/services/utils.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class Utils {
+  
+}

package/src/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of q-table
+ */
+
+export * from './lib/q-table';
+export * from './lib/services/utils';

package/tsconfig.lib.json

@@ -0,0 +1,17 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "vitest/globals"
+    ]
+  },
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.spec.ts"
+  ]
+}

package/fesm2022/q-table.mjs

@@ -1,34 +0,0 @@
-import * as i0 from '@angular/core';
-import { Component, Injectable } from '@angular/core';
-
-class QTable {
-    headers = ['id', 'name', 'price'];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: QTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: QTable, isStandalone: true, selector: "q-table", ngImport: i0, template: "<div id=\"q-table-wrapper\">\r\n\r\n  <div *ngFor=\"let header of headers\">\r\n    <span>{{header}}</span>\r\n  </div>\r\n\r\n</div>", styles: [""] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: QTable, decorators: [{
-            type: Component,
-            args: [{ selector: 'q-table', imports: [], template: "<div id=\"q-table-wrapper\">\r\n\r\n  <div *ngFor=\"let header of headers\">\r\n    <span>{{header}}</span>\r\n  </div>\r\n\r\n</div>" }]
-        }] });
-
-class Utils {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: Utils, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: Utils, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: Utils, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-/*
- * Public API Surface of q-table
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { QTable, Utils };
-//# sourceMappingURL=q-table.mjs.map

package/fesm2022/q-table.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"q-table.mjs","sources":["../../../projects/q-table/src/lib/q-table.ts","../../../projects/q-table/src/lib/q-table.html","../../../projects/q-table/src/lib/services/utils.ts","../../../projects/q-table/src/public-api.ts","../../../projects/q-table/src/q-table.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'q-table',\r\n  imports: [],\r\n  templateUrl: `./q-table.html`,\r\n  styles: ``,\r\n})\r\nexport class QTable {\r\n\r\n  headers?: string[] = ['id', 'name', 'price']\r\n\r\n\r\n}\r\n","<div id=\"q-table-wrapper\">\r\n\r\n  <div *ngFor=\"let header of headers\">\r\n    <span>{{header}}</span>\r\n  </div>\r\n\r\n</div>","import { Injectable } from '@angular/core';\r\n\r\n@Injectable({\r\n  providedIn: 'root',\r\n})\r\nexport class Utils {\r\n  \r\n}\r\n","/*\r\n * Public API Surface of q-table\r\n */\r\n\r\nexport * from './lib/q-table';\r\nexport * from './lib/services/utils';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAQa,MAAM,CAAA;IAEjB,OAAO,GAAc,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC;uGAFjC,MAAM,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAN,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAM,mECRnB,uIAMM,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FDEO,MAAM,EAAA,UAAA,EAAA,CAAA;kBANlB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,WACV,EAAE,EAAA,QAAA,EAAA,uIAAA,EAAA;;;MECA,KAAK,CAAA;uGAAL,KAAK,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAL,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,KAAK,cAFJ,MAAM,EAAA,CAAA;;2FAEP,KAAK,EAAA,UAAA,EAAA,CAAA;kBAHjB,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA;;;ACJD;;AAEG;;ACFH;;AAEG;;;;"}

package/types/q-table.d.ts

@@ -1,14 +0,0 @@
-import * as i0 from '@angular/core';
-
-declare class QTable {
-    headers?: string[];
-    static ɵfac: i0.ɵɵFactoryDeclaration<QTable, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<QTable, "q-table", never, {}, {}, never, never, true, never>;
-}
-
-declare class Utils {
-    static ɵfac: i0.ɵɵFactoryDeclaration<Utils, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<Utils>;
-}
-
-export { QTable, Utils };