@guiexpert/table 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guiexpert/table",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "scripts": {
     "typedoc:json": "npx typedoc --json ../../apps/table-website/src/assets/json/doctype.json src/index.ts",
     "typedoc:docs": "npx typedoc --out ../../apps/table-website/src/assets/docs src/index.ts",

package/src/index.ts

@@ -134,6 +134,9 @@ export * from "./lib/table/renderer/true-false-cell-renderer";
 export * from "./lib/table/renderer/date-to-tec-cell-renderer";
 export * from "./lib/table/renderer/renderer-cleanup-fn.type";
 export * from "./lib/table/renderer/number-cell-renderer";
+export * from "./lib/table/renderer/star-rating-cell-renderer";
+export * from "./lib/table/renderer/progress-bar-cell-renderer";
+
 export * from "./lib/table/renderer/edit/edit-cell-renderer.type";
 export * from "./lib/table/renderer/edit/edit-input-pipe.if";
 export * from "./lib/table/renderer/edit/edit-input-pipe-for-number";

package/src/lib/table/action/shortcut.service.ts

@@ -33,7 +33,7 @@ export class ShortcutService {
     }
     Object.assign(this.shortcutActionIdMapping, this.tableScope.tableOptions.shortcutActionIdMapping);
     if (this.isDebug()) {
-      console.info("ShortcutService", this.shortcutActionIdMapping);
+      console.debug("ShortcutService", this.shortcutActionIdMapping);
     }
     // add key down listener:
     this.tableScope.hostElement.addEventListener("keydown", this.onKeyDown.bind(this));
@@ -66,7 +66,7 @@ export class ShortcutService {
 
   private emit(actionId: ActionId): boolean {
     if (this.isDebug()) {
-      console.info("ShortcutService emit:", actionId);
+      console.debug("ShortcutService emit:", actionId);
     }
     let ret = false;
     for (const l of this.listener) {
@@ -81,7 +81,7 @@ export class ShortcutService {
   private findEnty(evt: KeyboardEvent): ActionId | undefined {
     const tokens = this.getTokenByEvent(evt);
     if (this.isDebug()) {
-      console.info("ShortcutService tokens:", tokens);
+      console.debug("ShortcutService tokens:", tokens);
     }
     for (const key in this.shortcutActionIdMapping) {
       const shortcutTokens = key

package/src/lib/table/mouse-handler.ts

@@ -44,7 +44,6 @@ export class MouseHandler {
 
   private onHostElementClicked(event: MouseEvent) {
     const mouseTargetData: MouseTargetData = new MouseTargetData(event.target, this.tableScope);
-console.info(mouseTargetData)
     if (mouseTargetData.action === 'toggleExpandCollapseAll'){
       this.expandedAll = !this.expandedAll;
       this.tableScope.toggleExpandCollapseAll(this.expandedAll);

package/src/lib/table/renderer/checkbox-boolean-property-cell-renderer.ts

@@ -11,7 +11,8 @@ export class CheckboxBooleanPropertyCellRenderer<T> implements CellRendererIf {
 
   constructor(
     public property: string,
-    public skipCheckableCheck: boolean = true
+    public skipCheckableCheck: boolean = true,
+    public readonly: boolean = false
   ) {
   }
 
@@ -24,11 +25,12 @@ export class CheckboxBooleanPropertyCellRenderer<T> implements CellRendererIf {
     _cellValue: any,
     domService: DomServiceIf): RendererCleanupFnType | undefined {
 
-    if (this.skipCheckableCheck || areaModel.isRowCheckable(rowIndex)) {
+    if (this.readonly || this.skipCheckableCheck || areaModel.isRowCheckable(rowIndex)) {
       domService.addClass(cellDiv, "ge-table-row-checkbox-div");
       const row = areaModel.getRowByIndex(rowIndex);
-      const rowChecked = areaModel.getValueByT(row, this.property) === true;
-      const checked = rowChecked ? "checked" : "";
+      const boxChecked = areaModel.getValueByT(row, this.property) === true;
+      const checked = boxChecked ? "checked" : "";
+      const readonly = this.readonly ? " readonly " : "";
 
       domService.addClass(cellDiv, "ge-padding-property-checkbox");
       cellDiv.innerHTML = `
@@ -40,16 +42,19 @@ export class CheckboxBooleanPropertyCellRenderer<T> implements CellRendererIf {
           data-property-index="${this.property}"
           data-input-type="checkbox"
           ${checked}
+          ${readonly}
           class="ge-input-checkbox">`;
 
-      const inputEle = cellDiv.querySelector<HTMLInputElement>(".ge-input-checkbox");
-      if (inputEle) {
-        // @ts-ignore
-        inputEle.addEventListener("click", (_ele: HTMLInputElement, _evt: MouseEvent) => {
+      if (!this.readonly) {
+        const inputEle = cellDiv.querySelector<HTMLInputElement>(".ge-input-checkbox");
+        if (inputEle) {
           // @ts-ignore
-          row[this.property] = !row[this.property];
-          return true;
-        });
+          inputEle.addEventListener("click", (_ele: HTMLInputElement, _evt: MouseEvent) => {
+            // @ts-ignore
+            row[this.property] = !row[this.property];
+            return true;
+          });
+        }
       }
     }
     return undefined;

package/src/lib/table/renderer/date-to-int-date-cell-renderer.ts

@@ -15,18 +15,23 @@ export class DateToIntlDDMMYYYYCellRenderer implements CellRendererIf {
 
   render(
     cellDiv: HTMLDivElement,
-    _rowIndex: number,
-    _columnIndex: number,
-    _areaIdent: AreaIdent,
+    rowIndex: number,
+    columnIndex: number,
+    areaIdent: AreaIdent,
     _areaModel: AreaModelIf,
     cellValue: any,
     _domService: DomServiceIf): RendererCleanupFnType | undefined {
     if (cellValue) {
+      let dateStr = '';
       try {
-        cellDiv.innerText = this.formatter.format(new Date(cellValue));
+        dateStr = this.formatter.format(new Date(cellValue));
       } catch (e) {
-        cellDiv.innerText = cellValue;
+        dateStr = cellValue;
       }
+      cellDiv.innerHTML = `
+          <div class="ge-table-label-div" data-row-index="${rowIndex}" data-col-index="${columnIndex}" data-area="${areaIdent}" style="position: relative; background: transparent; width: 100%; height: 100%;">
+            <div class="ge-table-label" data-row-index="${rowIndex}" data-col-index="${columnIndex}" data-area="${areaIdent}">${dateStr}</div>
+          </div>`;
     }
     return undefined;
   }

package/src/lib/table/renderer/progress-bar-cell-renderer.ts

@@ -0,0 +1,60 @@
+import {CellRendererIf} from "./cell-render.if";
+import {DomServiceIf} from "../service/dom-service.if";
+import {AreaIdent} from "../data/tablemodel/area-ident.type";
+import {RendererCleanupFnType} from "./renderer-cleanup-fn.type";
+import {AreaModelObjectyArray} from "../data/tablemodel/areamodel/area-model-object-array";
+
+/**
+ * Works with AreaModelObjectArray only
+ */
+export class ProgressBarCellRenderer<T> implements CellRendererIf {
+
+  constructor(
+    public property: string,
+    public maxValue: number=100,
+    public labelVisible = false
+  ) {
+  }
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    columnIndex: number,
+    areaIdent: AreaIdent,
+    areaModel: AreaModelObjectyArray<T>,
+    _cellValue: any,
+    domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    domService.addClass(cellDiv, "ge-star-rating-div");
+    const row = areaModel.getRowByIndex(rowIndex);
+    const count: number = Number('' + areaModel.getValueByT(row, this.property));
+
+    if (!isNaN(count)) {
+      const per = count * 100 / this.maxValue;
+      const label = this.labelVisible? (Math.round(per) + '%'):'';
+      cellDiv.innerHTML = `
+          <div class="ge-table-label-div"
+          data-row-index="${rowIndex}"
+          data-col-index="${columnIndex}"
+          data-area="${areaIdent}"
+          title="${label}"
+          style="position: relative; background: transparent; width: 100%; height: 100%;">
+              <div class="ge-table-progress-container"
+                  style="width:100%;height:50%;padding:0;margin-top:6px;"
+                  data-row-index="${rowIndex}"
+                  data-col-index="${columnIndex}"
+                  data-area="${areaIdent}">
+                  <div class="ge-table-progress-bar"
+                      style="width:${per}%;height:100%;padding:0;margin:0;"
+                      data-row-index="${rowIndex}"
+                      data-col-index="${columnIndex}"
+                      data-area="${areaIdent}">&nbsp;
+                  </div>
+              </div>
+          </div>`;
+    }
+
+    return undefined;
+  }
+
+}

package/src/lib/table/renderer/star-rating-cell-renderer.ts

@@ -0,0 +1,45 @@
+import {CellRendererIf} from "./cell-render.if";
+import {DomServiceIf} from "../service/dom-service.if";
+import {AreaIdent} from "../data/tablemodel/area-ident.type";
+import {RendererCleanupFnType} from "./renderer-cleanup-fn.type";
+import {AreaModelObjectyArray} from "../data/tablemodel/areamodel/area-model-object-array";
+
+/**
+ * Works with AreaModelObjectArray only
+ */
+export class StarRatingCellRenderer<T> implements CellRendererIf {
+
+  constructor(
+    public property: string
+  ) {
+  }
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    columnIndex: number,
+    areaIdent: AreaIdent,
+    areaModel: AreaModelObjectyArray<T>,
+    _cellValue: any,
+    domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    domService.addClass(cellDiv, "ge-star-rating-div");
+    const row = areaModel.getRowByIndex(rowIndex);
+    const count: number = Number('' + areaModel.getValueByT(row, this.property));
+
+    if (!isNaN(count)) {
+      const sb: string[] = [];
+      for (let i = 0; i < count; i++) {
+        sb.push('★');
+      }
+      const text = sb.join(' ');
+      cellDiv.innerHTML = `
+          <div class="ge-table-label-div" data-row-index="${rowIndex}" data-col-index="${columnIndex}" data-area="${areaIdent}" style="position: relative; background: transparent; width: 100%; height: 100%;">
+            <div class="ge-table-label" data-row-index="${rowIndex}" data-col-index="${columnIndex}" data-area="${areaIdent}">${text}</div>
+          </div>`;
+    }
+
+    return undefined;
+  }
+
+}