@massimo-cassandro/minimo 1.7.1 → 1.8.0

package/src/web-components/TODO json-table/_work/OLD/src/js/parse-params.js

@@ -0,0 +1,121 @@
+
+import { defaults_params, columns_default } from './defaults';
+import { defaultDataTypes } from './default-columns-data-types';
+
+export function parseParams({custom_params = {}, custom_data_types = {}}) {
+
+  try {
+
+
+    const params = {
+      ...defaults_params,
+      ...(JSON.parse(custom_params?.container?.dataset?.params?? null)?? {}), // params from `data-params` attribute
+      ...custom_params
+    };
+
+    if(!params.container) {
+      throw '`container` parameter not present';
+    }
+    if(typeof params.container === 'string') {
+      throw '`container` parameter must be a dom element';
+    }
+
+    // ENHANCEMENT jqDatatableCompliant
+    // temporarily force `jqDatatableCompliant` to true
+    params.jqDatatableCompliant = true;
+
+
+
+    // ENHANCEMENT download btn
+    // if(params.ajax === true) {
+    //   params.showDownloadBtn = false;
+    // }
+
+
+    // =>> DATA TYPES
+    // parse default datatypes
+    params.dataTypes = defaultDataTypes(params);
+
+    // if custom_data_types are provided, they are merged with the one defined in the `inheritsFrom` key
+    if(Object.keys(custom_data_types).length) {
+
+      for(const key in custom_data_types) {
+        if(custom_data_types[key].inheritsFrom) {
+          custom_data_types[key] = {
+            ...params.dataTypes[custom_data_types[key].inheritsFrom],
+            ...custom_data_types[key]
+          };
+        }
+      }
+      // merge custom data types with the default ones
+      params.dataTypes = {...params.dataTypes, ...custom_data_types};
+    }
+
+
+    // check if the dataTypes are valid
+    const dataTypesList = Object.keys(params.dataTypes);
+    params.columns.forEach(col => {
+      if(col.dataType && !dataTypesList.includes(col.dataType)) {
+        throw `JsonTable: Invalid data type for column with key '${col.key}' (${col.dataType})`;
+      }
+    });
+
+
+    // =>> COLUMNS
+
+    // build columns definition array
+    params.columns = params.columns.map(col => {
+
+      const inheritedDatatype = params.dataTypes[col.dataType]?.inheritsFrom?? null;
+
+      return {
+        // default values
+        ...columns_default,
+
+        // override values for columns with specific dataTypes (from the `colDefaultsOverrides` object in dataTypes)`)
+        ...(params.dataTypes[col.dataType]?.colDefaultsOverrides?? {}),
+
+        // same, from the inherited dataType, if exists
+        ...(inheritedDatatype? params.dataTypes[inheritedDatatype].colDefaultsOverrides?? {} : {}),
+
+        // user settings
+        ...col
+      };
+    });
+
+
+    // columns key list and check for missing ones
+    params.fieldKeysList = params.columns.reduce((acc, col, idx) => {
+      if(!col.key) {
+        throw `JsonTable: Missing key for column #${idx}`;
+      }
+      acc.push(col.key);
+      return acc;
+    }, []);
+
+    // default sorting check
+    params.defaultSorting??= {}; // force null to empty object
+
+    Object.keys(params.defaultSorting).forEach(sort_key => {
+
+      if(!params.fieldKeysList.includes(sort_key)) {
+        throw `JsonTable: Invalid sort key '${sort_key}'`;
+      }
+
+      // force sorting direction to lowercase
+      params.defaultSorting[sort_key] = params.defaultSorting[sort_key].toLowerCase();
+      if(['asc', 'desc'].indexOf(params.defaultSorting[sort_key]) === -1) {
+        throw `JsonTable: Invalid sorting direction for column with key '${sort_key}' `+
+          `(${params.defaultSorting[sort_key]} instead of 'sort' or 'desc')`;
+      }
+    });
+
+    return params;
+
+  } catch(e) {
+    return {err: e};
+  }
+
+}
+
+

package/src/web-components/TODO json-table/_work/OLD/src/js/set-column-classname.js

@@ -0,0 +1,22 @@
+// returns the string of classes for the given column
+// according to the column definition and to the data_types object
+
+
+export function setColumClassname(col, addClassAttrName = true) {
+  let classname ='';
+
+  if(col.className) {
+    classname = col.className;
+
+  } else if(col.dataType) {
+    classname = this.params.dataTypes[col.dataType]?.className?? '';
+  }
+
+  classname = classname.trim();
+
+  if(addClassAttrName) {
+    return classname? ` class="${classname}"` : '';
+  } else {
+    return classname? classname : null;
+  }
+}

package/src/web-components/TODO json-table/_work/OLD/src/js/table-builder.js

@@ -0,0 +1,64 @@
+import { nanoid } from 'nanoid';
+import { isFunction } from './utilities';
+
+import * as styles from '../css/table.module.css';
+
+
+export function tableBuilder() {
+
+  this.params.tableId ??= nanoid();
+
+  try {
+
+    const table = document.createElement('table');
+    table.className = this.params.tableAltClassName??
+      styles.table + (this.params.tableExtraClassName? ` ${this.params.tableExtraClassName}` : '');
+    table.id = this.params.tableId;
+
+    if(this.params.caption) {
+      table.insertAdjacentHTML('beforeend', `<caption>${this.params.caption}</caption>`);
+    }
+
+    // headings
+    table.insertAdjacentElement('beforeend', this.tableHead());
+
+    // rows
+    const data = this.params.data; // TODO  dati da ajax
+
+    const tbody = document.createElement('tbody');
+    table.appendChild(tbody);
+
+    data.forEach((row_data, idx) => {
+      tbody.insertAdjacentElement('beforeend', this.tableRow(row_data, idx));
+    });
+
+    // TODO tfoot ajax ???
+    // tfoot
+    if(this.params.footerData) {
+      table.insertAdjacentElement('beforeend', this.tableFoot());
+    }
+
+
+    // TODO table sort (vedi custom sort function in defaults.js)
+
+    // tr callback
+    if(isFunction(this.params.trCallback) ) {
+      table.querySelectorAll('tbody tr').forEach((row, idx) => this.params.trCallback(row, data[idx], this.params));
+    }
+
+    // responsive wrapper
+    if(this.params.addTableWrapper) {
+      const wrapper = document.createElement('div');
+      wrapper.className = this.params.tableWrapperClassName?? styles.tableWrapper;
+      wrapper.appendChild(table);
+      return wrapper;
+
+    } else {
+      table.classList.add(styles.stickyHeaders);
+      return table;
+    }
+
+  } catch(e) { //throw error
+    console.error( e ); // eslint-disable-line
+  } // finally {}
+}

package/src/web-components/TODO json-table/_work/OLD/src/js/table-foot.js

@@ -0,0 +1,8 @@
+
+export function tableFoot() {
+  const tfoot = document.createElement('tfoot');
+  this.params.footerData.forEach((row_data) => {
+    tfoot.insertAdjacentElement('beforeend', this.tableRow(row_data, null, 'tfoot'));
+  });
+  return tfoot;
+}

package/src/web-components/TODO json-table/_work/OLD/src/js/table-head.js

@@ -0,0 +1,47 @@
+import { titleCase } from './utilities';
+import searchArrow from '../icons/search-arrows.svg?inline';
+import * as styles from '../css/table.module.css';
+
+export function tableHead() {
+
+  const thead = document.createElement('thead'),
+    tr = document.createElement('tr');
+
+  this.params.columns.forEach(col => {
+
+    const th = document.createElement('th'),
+      sorting_available = this.params.sort && col.sortable,
+      sorting_activated = sorting_available && this.params.defaultSorting[col.key],
+      sorting_direction = sorting_activated && (this.params.defaultSorting[col.key]?? null),
+
+      className = [
+        this.setColumClassname(col, false),
+        ...(sorting_available? [styles.sort] : []),
+        ...(sorting_activated? [styles.sortingOn] : []),
+        ...(sorting_direction? [ styles[`sorting${titleCase(sorting_direction)}`] ] : []),
+      ];
+
+
+    th.setAttribute('scope', 'col');
+    th.className = className.join(' ');
+
+// TODO defaul desc sorting non si vede (freccia non colorata)
+    th.innerHTML = sorting_available?
+      '<div>' +
+        `<span>${col.title}</span>` +
+        `<span class="${styles.sortArrows}">` +
+          `<span class="${styles.sortArrowUp}">${searchArrow}</span>` +
+          `<span class="${styles.sortArrowDn}">${searchArrow}</span>` +
+        '</span>' +
+      '</div>'
+      : col.title;
+
+    tr.appendChild(th);
+  });
+
+
+  // TODO sort listener
+
+  thead.appendChild(tr);
+  return thead;
+}

package/src/web-components/TODO json-table/_work/OLD/src/js/table-row.js

@@ -0,0 +1,83 @@
+import { isFunction } from './utilities';
+import * as iconStyles from '../css/icons.module.css';
+
+export function tableRow(row, idx, target = 'null') {
+
+  const tr = document.createElement('tr');
+  if (this.params.addRowIndex && idx) {
+    tr.dataset.id = idx;
+  }
+
+  this.params.columns.forEach((col, i) => {
+    let raw_content, content;
+
+    const datatypeObj = this.params.dataTypes[col.dataType]?? {};
+
+    if(col.parse && isFunction(col.parse)) {
+      raw_content = col.parse(row);
+    } else {
+      raw_content = row[col.key];
+    }
+
+    // if target is 'tfoot', columns with `tfoot: false` in their column definitions are not rendered
+    if(target === 'tfoot' && !col.tfoot) {
+      content = '';
+
+    } else if(raw_content === 0 && this.params.useZeroAltChar) {
+      content = this.params.zeroAltChar;
+
+    // All `render` functions are invoked with the `raw_content` value and the global params object as arguments
+    } else if(col.render && isFunction(col.render)) {
+      content = col.render(raw_content, this.params);
+
+    } else if(col.dataType && isFunction(datatypeObj?.render)) {
+      content = datatypeObj.render(raw_content, this.params);
+
+    } else  if(raw_content == null) {
+      content = '';
+
+    } else {
+      content = raw_content;
+    }
+
+    const isTh = col.rowHeading && i === 0,
+      CellTag = isTh? 'th' : 'td'
+    ;
+    let classnames = this.setColumClassname(col, false);
+    classnames = classnames? [classnames] : [];
+
+
+    // adding different classes for true and false boolean icons
+    // NB: main icon class is added in setColumClassname() and is defined in the `default-columns-data-types.js` script
+    if(col.dataType === 'bool') {
+
+      if(this.params.boolValuesClassName !== null) { // custom class for icons
+        classnames = [
+          ...classnames,
+          ...(this.params.boolTrueClassName && raw_content === true? [this.params.boolTrueClassName] : []),
+          ...(this.params.boolFalseClassName && raw_content === false? [this.params.boolFalseClassName] : []),
+        ];
+      } else {
+        classnames.push(raw_content === true? iconStyles.true : (raw_content === false? iconStyles.false : ''));
+      }
+    }
+
+    tr.insertAdjacentHTML('beforeend',
+      `<${CellTag}` +
+        (isTh? ' scope="row"' : '') +
+        (classnames.length? ` class="${classnames.join(' ')}"` : '') +
+
+        // dataset values: // TODO necessari? possibile accedere ai dati in altro modo?
+  // TODO sort e search solo se abilitati
+  // TODO custom sort e search data su col, deve prevalere sulle funzioni di default
+        ` data-key="${col.key}"` +
+        ` data-search="${datatypeObj.searchValue? datatypeObj.searchValue(raw_content, this.params) : raw_content}"` +
+        ` data-sort="${datatypeObj.sortValue? datatypeObj.sortValue(raw_content, this.params) : raw_content}"` +
+        ` data-type="${col.dataType}"` +
+      `>${content}</${CellTag}>`
+    );
+  });
+
+  return tr;
+
+}

package/src/web-components/TODO json-table/_work/OLD/src/js/utilities.js

@@ -0,0 +1,5 @@
+export function isFunction (item) { return item && typeof item === 'function';}
+
+export function titleCase(str) {
+  return str.at(0).toUpperCase() + str.substring(1);
+}

package/src/web-components/TODO json-table/_work/__json-table-react/index.js

@@ -0,0 +1,4 @@
+import StaticTable from './components/StaticTable';
+import JsonTable from './components/JsonTable';
+
+export {StaticTable, JsonTable};

package/src/web-components/TODO json-table/_work/__json-table-react/src/build-page-array.js

@@ -0,0 +1,73 @@
+export function calcTotPages(records, pageRows) {
+  return  Math.ceil(records / pageRows);
+}
+
+export default function (currentPage, pageRows, records, showed_pages = 11) {
+
+
+  const pages = calcTotPages(records, pageRows);
+
+  let pages_array = [];
+
+  if (pages <= showed_pages) {
+    pages_array = [...Array(pages).fill().map((_, idx) => idx + 1)];
+
+  } else {
+
+
+    let side_pages = 2, // pagine a dx/sx della pagina corrente
+
+      step_min = Math.max(1, currentPage - side_pages),
+      step_max = Math.min(pages, currentPage + side_pages),
+
+      // spazi aggiuntibi a dx/sx da lasciare liberi per '1', '...', <pages>
+      slots_left = step_min > 2? 2 : step_min - 1,
+      slots_right = step_max < pages - 1? 2 : pages - step_max;
+
+    // console.log(step_min, step_max, slots_left, slots_right);
+    // console.log(step_max - step_min + 1 + slots_left + slots_right);
+
+    // fix per avere sempre il numero prefissato di pagine
+    while (step_max - step_min + 1 + slots_left + slots_right < showed_pages) {
+      step_min = Math.max(1, step_min - 1);
+      step_max = Math.min(pages, step_max + 1);
+
+    }
+
+    // console.log(step_max - step_min + 1 + slots_left + slots_right);
+
+    // if(step_max - step_min + 1 + slots_left + slots_right > showed_pages) {
+    //   step_min++;
+    // }
+
+    pages_array = [
+      ...Array(step_max - step_min + 1)
+        .fill()
+        .map((_, idx) => step_min + idx)
+    ];
+
+    // console.log(pages_array.slice(0));
+
+    if(pages_array[0] === 2) {
+      pages_array.unshift(1);
+
+    } else if (pages_array[0] === 3) {
+      pages_array.unshift(1, 2);
+
+    } else if (pages_array[0] > 3) {
+      pages_array.unshift(1, null);
+    }
+
+    if(pages_array.at(-1) === pages - 1) {
+      pages_array.push(pages);
+
+    } else if(pages_array.at(-1) === pages - 2) {
+      pages_array.push(pages -1, pages);
+
+    } else if(pages_array.at(-1) < pages - 2) {
+      pages_array.push(null, pages);
+    }
+  }
+
+  return pages_array;
+}

package/src/web-components/TODO json-table/_work/__json-table-react/src/columns-data-types.js

@@ -0,0 +1,73 @@
+// formattazioni std per i vari tipi di dati
+// la classe std viene sovrascritta se presente come parametro nella colonna
+import {defaults} from './defaults';
+
+export const data_types = {
+  // string: {} // default type
+  date: {
+    className: defaults.rightAlignClassName,
+    render: d => (new Date(d)).toLocaleString('it-IT', {
+      year    : 'numeric', // '2-digit'
+      month   : '2-digit', // 'short'
+      day     : '2-digit' // 'numeric
+    })
+  },
+  // symfony date field
+  sfDate: {
+    className: defaults.rightAlignClassName,
+    render: d => (new Date(d.date)).toLocaleString('it-IT', {
+      year    : 'numeric', // '2-digit'
+      month   : '2-digit', // 'short'
+      day     : '2-digit' // 'numeric
+    })
+  },
+  datetime: {
+    className: defaults.rightAlignClassName,
+    render: d => {
+      const date = new Date(d);
+      return date.toLocaleString('it-IT', {
+        year    : 'numeric', // '2-digit'
+        month   : '2-digit', // 'short'
+        day     : '2-digit', // 'numeric
+      }) +
+      '\u00A0' +
+      '<small>' +
+      date.toLocaleString('it-IT', {
+        hour12: false,
+        hour:'2-digit',
+        minute:'2-digit'
+      }) +
+      '</small>';
+    }
+  },
+  num: {
+    className: defaults.rightAlignClassName,
+    render: d => (d? +d : 0).toLocaleString('it-IT', {
+      maximumFractionDigits   : 2
+    })
+  },
+  perc: {
+    className: defaults.rightAlignClassName,
+    formatClassName           : defaults.percClassName,
+    render: d => (d? +d : 0).toLocaleString('it-IT', {
+      maximumFractionDigits   : 2,
+      minimumFractionDigits   : 2,
+    })
+  },
+  percDecimal: {
+    className: defaults.rightAlignClassName,
+    formatClassName           : defaults.percClassName,
+    render: d => ((d? +d : 0) * 100).toLocaleString('it-IT', {
+      maximumFractionDigits   : 2,
+      minimumFractionDigits   : 2,
+    })
+  },
+  euro: {
+    className: defaults.rightAlignClassName,
+    formatClassName           : defaults.euroClassName,
+    render: d => (d? +d : 0).toLocaleString('it-IT', {
+      minimumFractionDigits   : 2,
+      maximumFractionDigits   : 2
+    })
+  }
+};

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

@@ -0,0 +1,50 @@
+/**
+ * Parametri di configurazione
+ * @property {array} columns - colonne della tabella
+ * @property {array} data - array dei dati
+ * @property {array} footerData - array dei dati da renderizzare nell'elemento <tfoot>
+ * @author Massimo Cassandro
+ */
+
+
+export const defaults = {
+  columns                 : [], // definizione delle colonne
+  ajax                    : true, // se true usa `ajaxUrl` e ignora `data`
+  ajaxUrl                 : null, // url ajax
+  data                    : [], // dati (per versione statica)
+  footerData              : [],
+  caption                 : null,
+  addRowIndex             : false, // se true aggiunge un attributo data al tr con l'indice del record json
+
+  tableClassName          : 'table',
+  wrapperClassName        : 'table-responsive',
+  centerAlignClassName    : 'text-center',
+  rightAlignClassName     : 'text-right',
+  percClassName           : 'perc',
+  euroClassName           : 'euro',
+  showZero                : false,
+  zeroValuesChar          : '\u2014',
+  showDownloadBtn         : 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'
+  trCallback              : null,
+
+  // array di eventuali fogli da aggiungere all'excel nel download
+  // ogni elemento dell'array è un oggetto con
+  // name - nome dela foglio
+  // data - array già formattato da trasformare in excel
+  extraDownloadSheets     : null
+};
+
+export const columns_default = {
+  title                     : null, // titolo colonna (testo th)
+  key                       : null, // chiave oggetto del json
+  dataType                  : null, // tipo dati
+  className                 : null, // classe
+  render                    : null, // funzione ad hoc per il rendering
+  parse                     : null, // funzione ad hoc per elaborare il valore
+  rowHeading                : false // se true, viene creato un elemento th[scope=row] invece di un td
+};