Delete self contained Thunder Tests

Back to .net8.0
api/v4/InfinityQS
ApiExplorerSettings
Wafer Counter
Color Sorting

Server/wwwroot/package/dist/collection/components/table/buttonCellRenderer.js

@@ -0,0 +1,93 @@
+import { ButtonKeys } from "./interfaces";
+export class ButtonCellRenderer {
+  // gets called once before the renderer is used
+  init(params) {
+    const config = params.data.button;
+    this.eGui = document.createElement('div');
+    if (this.hasRequiredKeys(config)) {
+      // create the cell
+      this.eGui.innerHTML = `
+        <span>
+          <ifx-button
+          disabled=${config.disabled}
+          variant=${config.variant}
+          size=${config.size}
+          target=${config.target}
+          color=${config.color}>
+          ${config.text}
+        </ifx-button>
+        </span>
+       `;
+      // get references to the elements we want
+      this.eButton = this.eGui.querySelector('ifx-button');
+    }
+    // // add event listener to button
+    // this.eventListener = () => alert('Button clicked!');
+    // this.eButton?.addEventListener('click', this.eventListener);
+    else {
+      this.eGui.innerHTML = `
+      <span>
+        ${config}
+      </span>
+     `;
+    }
+  }
+  getGui() {
+    return this.eGui;
+  }
+  // gets called whenever the cell refreshes
+  refresh(params) {
+    // set value into cell again
+    const config = params.data.button;
+    this.eGui = document.createElement('div');
+    if (this.hasRequiredKeys(config)) {
+      // create the cell
+      this.eGui.innerHTML = `
+        <span>
+          <ifx-button
+          disabled=${config.disabled}
+          variant=${config.variant}
+          size=${config.size}
+          target=${config.target}
+          color=${config.color}>
+          ${config.text}
+        </ifx-button>
+        </span>
+       `;
+      // get references to the elements we want
+      this.eButton = this.eGui.querySelector('ifx-button');
+    }
+    // // add event listener to button
+    // this.eventListener = () => alert('Button clicked!');
+    // this.eButton?.addEventListener('click', this.eventListener);
+    else {
+      this.eGui.innerHTML = `
+      <span>
+        ${config}
+      </span>
+     `;
+    }
+    // return true to tell the grid we refreshed successfully
+    return true;
+  }
+  // gets called when the cell is removed from the grid
+  destroy() {
+    // do cleanup, remove event listener from button
+    if (this.eButton) {
+      // check that the button element exists as destroy() can be called before getGui()
+      this.eButton.removeEventListener('click', this.eventListener);
+    }
+  }
+  getFieldValueToDisplay(params) {
+    return params.valueFormatted ? params.valueFormatted : params.value;
+  }
+  isObject(value) {
+    return value && typeof value === 'object' && value.constructor === Object;
+  }
+  hasRequiredKeys(obj) {
+    if (!this.isObject(obj))
+      return false;
+    return ButtonKeys.every(key => key in obj);
+  }
+}
+//# sourceMappingURL=buttonCellRenderer.js.map

Server/wwwroot/package/dist/collection/components/table/interfaces.js

@@ -0,0 +1,2 @@
+export const ButtonKeys = ['disabled', 'variant', 'size', 'target', 'color', 'text'];
+//# sourceMappingURL=interfaces.js.map

Server/wwwroot/package/dist/collection/components/table/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/components/table/interfaces.ts"],"names":[],"mappings":"AASA,MAAM,CAAC,MAAM,UAAU,GAAiC,CAAC,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC","sourcesContent":["export interface ButtonInterface {\n  disabled?: boolean;\n  variant?: string,\n  size?: string,\n  target?: string,\n  color?: string,\n  text: string\n}\n\nexport const ButtonKeys: Array<keyof ButtonInterface> = ['disabled', 'variant', 'size', 'target', 'color', 'text'];\n\n\n"]}

Server/wwwroot/package/dist/collection/components/table/table.js

@@ -0,0 +1,295 @@
+import { h } from "@stencil/core";
+import { Grid } from "ag-grid-community";
+import { ButtonCellRenderer } from "./buttonCellRenderer";
+export class Table {
+  constructor() {
+    this.gridOptions = undefined;
+    this.cols = undefined;
+    this.rows = undefined;
+    this.columnDefs = [];
+    this.rowData = [];
+    this.rowHeight = 'default';
+    this.uniqueKey = undefined;
+    this.tableHeight = 'auto';
+    this.pagination = false;
+    this.paginationPageSize = 10;
+  }
+  componentWillLoad() {
+    this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;
+    if (typeof this.rows === 'string' && typeof this.cols === 'string') {
+      try {
+        this.columnDefs = JSON.parse(this.cols);
+        this.rowData = JSON.parse(this.rows);
+      }
+      catch (err) {
+        console.error('Failed to parse input:', err);
+      }
+    }
+    else if ((Array.isArray(this.rows) || typeof this.rows === 'object') && (Array.isArray(this.cols) || typeof this.cols === 'object')) {
+      this.columnDefs = this.cols;
+      this.rowData = this.rows;
+    }
+    else {
+      console.error('Unexpected value for cols and rows:', this.rows, this.cols);
+    }
+    this.setButtonRenderer();
+    this.gridOptions = {
+      rowHeight: this.rowHeight === 'default' ? 40 : 32,
+      headerHeight: 40,
+      defaultColDef: {
+        resizable: true,
+      },
+      suppressDragLeaveHidesColumns: true,
+      onFirstDataRendered: this.onFirstDataRendered,
+      columnDefs: this.columnDefs,
+      rowData: this.rowData,
+      icons: {
+        sortAscending: '<ifx-icon icon="arrowtriangleup16"></ifx-icon>',
+        sortDescending: '<ifx-icon icon="arrowtriangledown16"></ifx-icon>',
+        sortUnSort: '<a class="unsort-icon-custom-color"><ifx-icon icon="arrowtrianglevertikal16"></ifx-icon></a>'
+      },
+      rowDragManaged: this.columnDefs.some(col => col.dndSource === true) ? true : false,
+      animateRows: this.columnDefs.some(col => col.dndSource === true) ? true : false,
+      pagination: this.pagination,
+      paginationPageSize: this.paginationPageSize,
+    };
+  }
+  onFirstDataRendered(params) {
+    params.api.sizeColumnsToFit();
+  }
+  componentWillUpdate() {
+    this.gridOptions.columnDefs = this.columnDefs;
+    this.gridOptions.rowData = this.rowData;
+    if (this.gridOptions.api) {
+      this.gridOptions.api.setRowData(this.rowData);
+      this.gridOptions.api.setColumnDefs(this.columnDefs);
+    }
+  }
+  componentDidLoad() {
+    new Grid(document.getElementById(`ifxTable-${this.uniqueKey}`), this.gridOptions);
+    if (this.gridOptions.api) {
+      this.gridOptions.api.sizeColumnsToFit();
+    }
+  }
+  render() {
+    // if (this.gridOptions.rowDragManaged) {
+    //   // console.log("draggable table render")
+    // }
+    return (h("div", { id: "grid-wrapper", class: { 'auto-height': this.tableHeight === 'auto' ? true : false } }, h("div", { id: `ifxTable-${this.uniqueKey}`, class: "ag-theme-alpine", style: {
+        'height': `${this.tableHeight}`, width: '100%'
+      } })));
+  }
+  hasButtonCol() {
+    return this.columnDefs.some(column => column.field === 'button');
+  }
+  setButtonRenderer() {
+    const buttonColumn = this.columnDefs.find(column => column.field === 'button');
+    if (buttonColumn) {
+      buttonColumn.cellRenderer = ButtonCellRenderer;
+    }
+  }
+  // setIconButtonRenderer() {
+  //   const iconButtonColumn = this.columnDefs.find(column => column.field === 'iconButton');
+  //   if (iconButtonColumn) {
+  //     iconButtonColumn.cellRenderer = IconButtonCellRenderer;
+  //   }
+  // }
+  // setLinkRenderer() {
+  //   const linkColumn = this.columnDefs.find(column => column.field === 'link');
+  //   if (linkColumn) {
+  //     linkColumn.cellRenderer = LinkCellRenderer;
+  //   }
+  // }
+  onDragOver(event) {
+    var dragSupported = event.dataTransfer.length;
+    if (dragSupported) {
+      event.dataTransfer.dropEffect = 'move';
+    }
+    event.preventDefault();
+  }
+  onDrop(event) {
+    var jsonData = event.dataTransfer.getData('application/json');
+    var eJsonRow = document.createElement('div');
+    eJsonRow.classList.add('json-row');
+    eJsonRow.innerText = jsonData;
+    var eJsonDisplay = document.querySelector('#eJsonDisplay');
+    eJsonDisplay.appendChild(eJsonRow);
+    event.preventDefault();
+  }
+  static get is() { return "ifx-table"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["table.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["table.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cols": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "any[] | string",
+          "resolved": "any[] | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "cols",
+        "reflect": false
+      },
+      "rows": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "any[] | string",
+          "resolved": "any[] | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "rows",
+        "reflect": false
+      },
+      "columnDefs": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "any[]",
+          "resolved": "any[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "rowData": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "any[]",
+          "resolved": "any[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "rowHeight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "row-height",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "uniqueKey": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "unique-key",
+        "reflect": false
+      },
+      "tableHeight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "table-height",
+        "reflect": false,
+        "defaultValue": "'auto'"
+      },
+      "pagination": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "pagination",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "paginationPageSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "pagination-page-size",
+        "reflect": false,
+        "defaultValue": "10"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "gridOptions": {}
+    };
+  }
+}
+//# sourceMappingURL=table.js.map

Server/wwwroot/package/dist/collection/components/table/table.stories.js

@@ -0,0 +1,150 @@
+//default
+const columnDefs = [
+  { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },
+  { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },
+  { headerName: 'Price', field: 'price' },
+  { headerName: 'Age', field: 'age' }
+];
+const rowData = [
+  { make: 'Toyota', model: 'Celica', price: 35000, age: 10 },
+  { make: 'Ford', model: 'Mondeo', price: 32000, age: 12 },
+  { make: 'Porsche', model: 'Boxster', price: 72000 }
+];
+//table with button col
+const columnDefsWithButtonCol = [
+  { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },
+  { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },
+  { headerName: 'Price', field: 'price' },
+  { headerName: 'Age', field: 'age' },
+  { headerName: '', field: 'button' }
+];
+const rowDataWithButtonCol = [
+  {
+    make: 'Toyota', model: 'Celica', price: 35000, age: 10, button: 'something about Toyota'
+  },
+  { make: 'Ford', model: 'Mondeo', price: 32000, age: 12, button: 'something about Ford' },
+  {
+    make: 'Porsche', model: 'Boxster', price: 72000, button: {
+      disabled: false,
+      variant: "secondary",
+      size: "s",
+      target: "_blank",
+      color: "secondary",
+      text: "Button"
+      // ... you can extend this as per the properties of `ifx-button`
+    }
+  }
+];
+//other example
+// const columnDefsDragAndDrop = [
+//   { valueGetter: '"Drag"', dndSource: true },
+//   { field: 'id' },
+//   { field: 'color' },
+//   { field: 'value1' },
+//   { field: 'value2' },
+// ];
+// var rowIdSequence = 100;
+// function getRowDataDragAndDrop() {
+//   var rowDataDragAndDrop = [];
+//   [
+//     'Red',
+//     'Green',
+//     'Blue',
+//     'Red',
+//     'Green',
+//     'Blue',
+//     'Red',
+//     'Green',
+//     'Blue',
+//   ].forEach(function (color) {
+//     var newDataItem = {
+//       id: rowIdSequence++,
+//       color: color,
+//       value1: Math.floor(Math.random() * 100),
+//       value2: Math.floor(Math.random() * 100),
+//     };
+//     rowDataDragAndDrop.push(newDataItem);
+//   });
+//   return rowDataDragAndDrop;
+// }
+export default {
+  title: 'Under Development/Table (advanced)',
+  // tags: ['autodocs'],
+  args: {
+    tableHeight: 'auto',
+    pagination: false,
+    paginationPageSize: 10,
+    rowHeight: 40,
+  },
+  argTypes: {
+    tableHeight: {
+      table: {
+        type: {
+          summary: 'Options',
+          detail: 'Default: "auto"\nExample for fixed height: "400px"',
+        }
+      },
+    },
+    rowHeight: {
+      options: ['compact', 'default'],
+      control: { type: 'radio' },
+    },
+    columnDefs: {
+      table: {
+        type: {
+          summary: 'Column header options',
+          detail: 'Standard columns:\nheaderName: "Model", \nfield: "model", \nsortable: true (optional),\nsort: "desc" (optional) => descending sort (show icon)\nunSortIcon: true (optional) => unsorted (show icon)\n\nSpecial columns:\nheaderName: "",\nfield: "button"\nheaderName: "",\nfield: "link"',
+        },
+      },
+    },
+    rowData: {
+      table: {
+        type: {
+          summary: 'Row data options',
+          detail: 'Standard row values:\nmake: "Toyota", \nmodel: "Celica", \nprice: 35000 \n\nSpecial row values (incl buttons):\nmake: "Porsche",\nmodel: "Boxster",\nprice: "72000",\nbutton: { \ndisabled: false (optional),\nvariant: "outline" (optional)\nsize: "s" (optional),\ntext: "Button"\n...other ifx-button properties\n}',
+        },
+      },
+    }
+  }
+};
+const DefaultTemplate = (args) => `<ifx-table 
+row-height='${args.rowHeight}'
+cols='${JSON.stringify(args.columnDefs)}' 
+rows='${JSON.stringify(args.rowData)}'
+table-height='${args.tableHeight}'
+pagination='${args.pagination}'
+pagination-page-size='${args.paginationPageSize}'>
+</ifx-table>`;
+// export const Default = DefaultTemplate.bind({});
+// Default.args = {
+//   rowHeight: 'default',
+//   columnDefs: columnDefs,
+//   rowData: rowData,
+// };
+// export const FixedHeight = DefaultTemplate.bind({});
+// FixedHeight.args = {
+//   tableHeight: '400px',
+//   rowHeight: 'default',
+//   columnDefs: columnDefs,
+//   rowData: rowData,
+// };
+export const Pagination = DefaultTemplate.bind({});
+Pagination.args = {
+  pagination: true,
+  paginationPageSize: 10,
+  rowHeight: 'default',
+  columnDefs: columnDefs,
+  rowData: rowData,
+};
+export const IncludesButtons = DefaultTemplate.bind({});
+IncludesButtons.args = {
+  rowHeight: 'default',
+  columnDefs: columnDefsWithButtonCol,
+  rowData: rowDataWithButtonCol,
+};
+// export const DragAndDrop = DefaultTemplate.bind({});
+// DragAndDrop.args = {
+//   columnDefs: columnDefsDragAndDrop,
+//   rowData: getRowDataDragAndDrop(),
+// };
+//# sourceMappingURL=table.stories.js.map