@massimo-cassandro/minimo 1.7.2 → 1.8.1

package/src/web-components/TODO json-table/src/js/defaults.js

@@ -0,0 +1,510 @@
+/** Module defaults and inline JSDoc for `defaults_params` */
+/**
+ * @typedef {Object} DateLocaleOpts
+ * @property {'numeric'|'2-digit'|'short'|'long'|'narrow'} [year]
+ * @property {'numeric'|'2-digit'|'short'|'long'|'narrow'} [month]
+ * @property {'numeric'|'2-digit'|'short'|'long'|'narrow'} [day]
+ *
+ * @typedef {Object} TimeLocaleOpts
+ * @property {boolean} [hour12]
+ * @property {'2-digit'|'numeric'} [hour]
+ * @property {'2-digit'|'numeric'} [minute]
+ * @property {'2-digit'|'numeric'} [second]
+ *
+ * @typedef {Object} NumberFormatOpts
+ * @property {number} [maximumFractionDigits]
+ * @property {number} [minimumFractionDigits]
+ *
+ *
+ * @typedef {'string'|'number'|'date'|'boolean'|'currency'|'percentage'|'custom'} DataType
+ */
+
+import trueIcon from '../icons/true.svg?inline';
+import falseIcon from '../icons/false.svg?inline';
+import sortArrow from '../icons/arrow-down-bold.svg?inline';
+
+export const defaults_params = {
+  /**
+   * If true, logs debug info to the console.
+   * @type {boolean}
+   */
+  debug : false,
+
+  /**
+   * Element to insert the table into.
+   * @type {HTMLElement|null}
+   */
+  container : null,
+
+  /**
+   * Collection of generated DOM elements used by the table instance.
+   * @type {Object}
+   */
+  elements : {},
+
+  /**
+   * Columns definitions (see `columns_default`).
+   * @type {Array<ColumnDefault>}
+   */
+  columns : [],
+
+  /**
+   * If true, fetch rows from `ajaxUrl` and ignore `data`.
+   * @type {boolean}
+   */
+  ajax : false,
+
+  /**
+   * Ajax URL for rows data.
+   * @type {string|null}
+   */
+  ajaxUrl : null,
+
+  /**
+   * If null, default config (see `ajax_config_default` at bottom of this file) is used
+   * If Object, must provide parameters about ajax request, according to `ajax_config_default` obj
+   * @type {null|Object}
+   */
+  ajaxConfig : null,
+
+  /**
+   * Static rows data.
+   * @type {Array}
+   */
+  data : [],
+
+  /**
+   * Footer data for static tables.
+   * @type {Array}
+   */
+  footerData : [],
+
+  /**
+   * Table caption (string or HTML).
+   * @type {string|null}
+   */
+  caption : null,
+
+  /**
+   * Enable search input.
+   * @type {boolean}
+   */
+  search : true,
+
+  /**
+   * Enable column sorting.
+   * @type {boolean}
+   */
+  sort : true,
+
+  /**
+   * Default sorting object: { key: 'asc'|'desc' }.
+   * @type {Object}
+   */
+  defaultSorting : {},
+
+  /**
+   * Aria label for ascending sort button.
+   * @type {string}
+   */
+  sortButtonAriaLabelAsc : 'Ordina questa colonna in senso ascendente (A\u00A0→\u00A0Z)',
+
+  /**
+   * Aria label for descending sort button.
+   * @type {string}
+   */
+  sortButtonAriaLabelDesc : 'Ordina questa colonna in senso discendente (Z\u00A0→\u00A0A)',
+
+  /**
+   * Aria label to remove sorting.
+   * @type {string}
+   */
+  sortButtonAriaLabelNone : 'Rimuovi l’ordinamento a questa colonna',
+
+  /**
+   * Locale string used for date/number formatting.
+   * @type {string}
+   */
+  locale : 'it-IT',
+
+  /**
+   * Options passed to Intl.DateTimeFormat for dates.
+   * @type {DateLocaleOpts}
+   */
+  datesLocaleOpts : { year: 'numeric', month: 'short', day: 'numeric' },
+
+  /**
+   * Options passed to Intl.DateTimeFormat for times.
+   * @type {TimeLocaleOpts}
+   */
+  timesLocaleOpts : { hour12: false, hour:'2-digit', minute:'2-digit' },
+
+  /**
+   * Number formatting options.
+   * @type {NumberFormatOpts}
+   */
+  numbersLocaleOpts : { maximumFractionDigits: 2 },
+
+  /**
+   * Currency/percentage formatting options.
+   * @type {NumberFormatOpts}
+   */
+  currPercLocaleOpts : { maximumFractionDigits: 2, minimumFractionDigits: 2 },
+
+  /**
+   * Custom table id if needed.
+   * @type {string|null}
+   */
+  tableId : null,
+
+  /**
+   * Extra class for the div that wraps the table.
+   * @type {string|null}
+   */
+  tableWrapperExtraClassName : null,
+
+  /**
+   * Class name to assign to the <table> element.
+   * @type {string|null}
+   */
+  tableClassName : null,
+
+  /**
+   * Extra class for main wrapper (contains info and table).
+   * @type {string|null}
+   */
+  mainWrapperExtraClassName : null,
+
+  /**
+   * Extra class for outer info section.
+   * @type {string|null}
+   */
+  outerInfoExtraClassName : null,
+
+  /**
+   * Extra class for info section.
+   * @type {string|null}
+   */
+  infoExtraClassName : null,
+
+  /**
+   * If true, make info container sticky.
+   * @type {boolean}
+   */
+  stickyInfo : true,
+
+  /**
+   * If true, make the table header sticky.
+   * @type {boolean}
+   */
+  stickyThead : true,
+
+  /**
+   * Class for inline-end alignment.
+   * @type {string|null}
+   */
+  inlineEndAlignClassName : null,
+
+  /**
+   * Class to prevent wrapping of content.
+   * @type {string|null}
+   */
+  nowrapClassName : null,
+
+  /**
+   * Class for euro currency formatting.
+   * @type {string|null}
+   */
+  euroClassName : null,
+
+  /**
+   * Class for percentage formatting.
+   * @type {string|null}
+   */
+  percClassName : null,
+
+  /**
+   * If true, date cells are rendered with nowrap.
+   * @type {boolean}
+   */
+  datesNowrap : true,
+
+  /**
+   * If true, treat 0 as an alternate (dash) character.
+   * @type {boolean}
+   */
+  useZeroAltChar : true,
+
+  /**
+   * Character used for zero values when `useZeroAltChar` is true.
+   * @type {string}
+   */
+  zeroAltChar : '\u2014',
+
+  /**
+   * Character used for NaN numeric values or `false` to disable.
+   * @type {string|boolean}
+   */
+  isNaNChar : '\u2014',
+
+  /**
+   * Class added to both true/false boolean icon cells.
+   * @type {string|null}
+   */
+  boolValuesClassName : null,
+
+  /**
+   * Class added to true icons.
+   * @type {string|null}
+   */
+  boolTrueClassName : null,
+
+  /**
+   * Class added to false icons.
+   * @type {string|null}
+   */
+  boolFalseClassName : null,
+
+  /**
+   * Icons used by the table for booleans and sorting.
+   *
+   * - `boolTrueIcon`: icon/markup for boolean true
+   * - `boolFalseIcon`: icon/markup for boolean false
+   * - `sortArrowIcon`: icon/markup for the sort arrow
+   *
+   * Imported icons can be a string, HTMLElement, SVGElement or a function returning markup.
+   * Note: if you use custom icons, until you recompile the library, the default icons markup
+   * remains embedded in the build even if you provide custom icons.
+   * Note: The default sortArrowIcon is downward-oriented; if the custom one is upward-oriented,
+   * you'll need to change the CSS properties `--jt-sort-asc-arrow-rotate` and `--jt-sort-desc-arrow-rotate`
+   * or change something else in the CSS.
+   * @type {string|HTMLElement|SVGElement|Function}
+   */
+  boolTrueIcon : trueIcon,
+  boolFalseIcon : falseIcon,
+  sortArrowIcon : sortArrow,
+
+  /**
+   * Alternative class for the search input (overrides default).
+   * @type {string|null}
+   */
+  searchInputAltClassName : null,
+
+  /**
+   * Additional class for the search input.
+   * @type {string|null}
+   */
+  searchInputExtraClassName : null,
+
+  /**
+   * Title attribute for search input.
+   * @type {string}
+   */
+  searchInputTitle : 'Filtra records: inserisci un termine per eseguire la ricerca',
+
+  /**
+   * Placeholder text for search input.
+   * @type {string}
+   */
+  searchInputPlaceholder : 'Inserisci il termine da cercare',
+
+  /**
+   * Aria-label for search input.
+   * @type {string}
+   */
+  searchInputAriaLabel : 'Filtra risultati',
+
+  /**
+   * Callback invoked after each row (<tr>) rendering.
+   * Signature: (trElement: HTMLElement, rowData: Object, params: Object)
+   * @type {Function|null}
+   */
+  trCallback : null,
+
+  // TODO download button (xlsx) (???)
+  /*
+  showDownloadBtn : false,      // se `ajax` === true, è forzato su false
+  downloadBtnLabel : 'Download',
+  downloadBtnClassName : 'btn btn-outline-secondary btn-sm',
+  separateDownloadBtn : false, // se true viene restituito un array con tabella e pulsante download separati
+  downloadFilename : 'download',
+  downloadFormat : 'excel', // 'excel' o 'csv'
+  */
+
+};
+
+
+/**
+ * Column default options.
+ * @typedef {Object} ColumnDefault
+ * @property {string|null} key - REQUIRED json object key (= db column name).
+ * @property {string|null} title - Column title (th text, can be an HTML string).
+ * @property {string} [dataType='string'] - Cell data type; must be one of keys of `data_types`.
+ * @property {string|null} className - Class assigned to the cell; overrides default.
+ * @property {Function|null} render - Rendering function for the cell.
+ * @property {Function|null} parse - Parsing function for the cell.
+ * @property {boolean} [rowHeading=false] - If true, the cell is a row heading (th[scope=row]).
+ * @property {boolean} [tfoot=true]
+ * @property {boolean} [searchable=true]
+ * @property {boolean} [sortable=true]
+ * @property {Function|null} sortValueCustomParser - Custom sort function for static tables.
+ * @property {Function|null} searchValueCustomParser - Custom search function for static tables.
+ */
+
+export const columns_default = {
+
+  /**
+   * REQUIRED: json object key (db column name)
+   * @type {string|null}
+   */
+  key : null,
+
+  /**
+   * Column title (th text, can be an HTML string)
+   * @type {string|null}
+   */
+  title : null,
+
+  /**
+   * Cell data type (one of keys in `data_types`).
+   * @type {DataType}
+   */
+  dataType : 'string',
+
+  /**
+   * Class to assign to the cell; overrides default for the data type.
+   * @type {string|null}
+   */
+  className : null,
+
+  /**
+   * Custom rendering function for the cell.
+   * @type {Function|null}
+   */
+  render : null,
+
+  /**
+   * Parsing function applied to the raw value before rendering.
+   * @type {Function|null}
+   */
+  parse : null,
+
+  /**
+   * If true, render cell as a row heading (th[scope=row]).
+   * @type {boolean}
+   */
+  rowHeading : false,
+
+  /**
+   * If false, cell won't be rendered in the tfoot element.
+   * @type {boolean}
+   */
+  tfoot : true,
+
+  /**
+   * If true, column content is searchable.
+   * @type {boolean}
+   */
+  searchable : true,
+
+  /**
+   * If true, column content is sortable.
+   * @type {boolean}
+   */
+  sortable : true,
+
+  /**
+   * Custom sort function for static tables; should match default parser signature.
+   * @type {Function|null}
+   */
+  sortValueCustomParser : null,
+
+  /**
+   * Custom search function for static tables; should match default parser signature.
+   * @type {Function|null}
+   */
+  searchValueCustomParser : null,
+};
+
+
+/**
+ * ajax config default options.
+ * Defaults values are referred to datatables keys
+ * @typedef {Object} AjaxConfigDefault
+ */
+
+export const ajax_config_default = {
+
+
+  /**
+    * Config for ajax url
+    * @type {Object|null}
+    */
+  urlParamsKeys: {
+
+
+    /**
+     * Key for start item, record or page, of the returned data
+     * @type {string|null}
+     */
+    startItem: `start`,
+
+    /**
+     * Key for number of record to be returned
+     * @type {string|null}
+     */
+    perPage : 'length',
+
+    /**
+     * Key for search strings
+     * @type {string|null}
+     */
+    search : 'search[value]',
+
+    // TODO columns + order
+  },
+
+  urlParams: {
+    /**
+     * array of static item to be appended to query string
+     * Each item is a key-value array
+     * @type {array|null}
+     */
+    staticValues: [['draw', 1]],
+
+    perPageValue: 25
+
+  },
+
+
+  /**
+    * Config for returned object keys
+    * @type {Object|null}
+    */
+  jsonKeys: {
+    /**
+     * array of static item to be appended to returned object
+     * Each item is a key-value array
+     * @type {array|null}
+     */
+    staticParams: [['draw', 1]],
+
+    /**
+     * Key for number of records found
+     * @type {string|null}
+     */
+    totRec : 'recordsTotal',
+
+    /**
+     * Key for number of records found when filtered by search
+     * @type {string|null}
+     */
+    totRecFiltered : 'recordsFiltered',
+
+    /**
+     * Key for data object
+     * @type {string|null}
+     */
+    data : 'data',
+  }
+}

package/src/web-components/TODO json-table/src/js/get-ajax-data.js

@@ -0,0 +1,72 @@
+export async function getAjaxData(urlParams = {}){
+
+  urlParams = {
+    ...{
+      startValue: 0,
+      searchValue: null
+    },
+    ...urlParams
+  };
+
+
+  /* urlParamsKeys: {
+
+
+
+    startItem: `start`,
+
+
+    perPage : 'length',
+
+
+    search : 'search[value]',
+
+    // TODO columns + order
+  },
+
+  urlParams: {
+
+    staticValues: [['draw', 1]],
+
+    perPageValue: 25,
+
+
+  }, */
+
+  const searchParams = new URLSearchParams({
+    [this.params.ajaxConfig.urlParamsKeys.startItem]: urlParams.startValue,
+    [this.params.ajaxConfig.urlParamsKeys.perPage]: this.params.ajaxConfig.urlParams.perPageValue,
+
+    ...(urlParams.searchValue != null
+      ? {[this.params.ajaxConfig.urlParamsKeys.search]: urlParams.searchValue}
+      : {}
+    ),
+
+    ...(
+      (this.params.ajaxConfig.urlParams.staticValues != null && Array.isArray(this.params.ajaxConfig.urlParams.staticValues))
+        ? this.params.ajaxConfig.urlParams.staticValues.map(i => ({[i[0]]: i[1]}))
+        : {}
+    ),
+
+    '_': Date.now()
+  });
+
+
+  const url = new URL(this.params.ajaxUrl);
+  url.search = searchParams.toString();
+
+  try {
+    const response = await fetch(url.toString());
+
+    this.params.data = await response.json();
+
+
+  } catch(err) {
+    /* eslint-disable no-console */
+    console.error(url);
+    console.error(err);
+    /* eslint-enable no-console */
+  }
+
+
+}

package/src/web-components/TODO json-table/src/js/info-section.js

@@ -0,0 +1,39 @@
+import * as styles from '../css/info-section.module.css';
+import { classnames } from '@massimo-cassandro/js-utilities/index.js';
+
+export function infoSection() {
+
+  return [
+    {
+      // TODO gestire this.params.stickyInfo
+
+      className: classnames(styles.infoOuterContainer, this.params.outerInfoExtraClassName),
+      children: [
+        {
+          className: classnames(styles.infoContainer, this.params.infoExtraClassName),
+          children: [
+            {
+              className: styles.resultInfo,
+              callback: el => this.params.elements.info = el
+            },
+            {
+              condition: this.params.search,
+
+              tag: [`div.${styles.search}`, 'input'],
+              className: this.params.searchInputAltClassName?? classnames(styles.searchInput, this.params.searchInputExtraClassName),
+              callback: el => this.params.elements.searchInput = el,
+              attrs: {
+                type: 'search',
+                title: this.params.searchInputTitle,
+                placeholder: this.params.searchInputPlaceholder,
+                'aria-label': this.params.searchInputAriaLabel
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ];
+
+}
+

package/src/web-components/TODO json-table/src/js/init-ajax-table.js

@@ -0,0 +1,30 @@
+import { ajax_config_default } from './js/defaults.js';
+
+export async function initAjaxTable(){
+
+  try {
+
+    if(!this.params.ajaxUrl) {
+      throw 'Missing `ajaxUrl` parameter';
+    }
+
+    if(this.params.ajaxConfig === null) {
+      this.params.ajaxConfig = structuredClone(ajax_config_default);
+
+    } else {
+
+      Object.keys(ajax_config_default).forEach(k => {
+        this.params.ajaxConfig[k] = {
+          ...ajax_config_default[k],
+          ...(this.params.ajaxConfig[k]?? {})
+        }
+      });
+    }
+
+  } catch(e) {
+    console.error( e ); // eslint-disable-line
+
+  }
+
+
+}

package/src/web-components/TODO json-table/src/js/init-static-table.js

@@ -0,0 +1,18 @@
+export function initStaticTable() {
+
+  this.params.data = this.params.data.map((row, idx) => this.parseDataRow({
+    dataRow: row,
+    idx: idx,
+  }));
+
+  if (this.params.footerData.length) {
+    this.params.footerData = this.params.footerData.map((row, idx) => this.parseDataRow({
+      dataRow: row,
+      idx: idx,
+      isTbody: false
+    }));
+  }
+
+  // first sorting
+  this.params.data = this.staticDataSorting(true);
+}