@massimo-cassandro/minimo 1.7.2 → 1.8.1

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
+};

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

@@ -0,0 +1,156 @@
+// genera un json ottimizzato per l'esportazione in xslx partendo
+// dai dati assegnati alla tabella
+
+// import {data_types} from './columns-data-types';
+import setDownloadFilename from './set-download-filename';
+import { utils as utilsXSLX, writeFileXLSX } from 'xlsx/xlsx.mjs';
+
+
+export default function (params) {
+
+
+  function excel_sheet(columns, data) {
+
+    let excel_data = [];
+
+    const parser = new DOMParser();
+    excel_data.push(columns.map(item => {
+
+      const tit = parser.parseFromString(item.title, 'text/html');
+      return tit.documentElement.textContent;
+    }));
+
+    // https://www.codegrepper.com/code-examples/javascript/javascript+convert+number+to+letter+of+alphabet
+    // https://docs.sheetjs.com/docs/csf/features/formulae
+    // function numToSSColumnLetter(num) {
+    //   let columnLetter = "",
+    //     t;
+
+    //   while (num > 0) {
+    //     t = (num - 1) % 26;
+    //     columnLetter = String.fromCharCode(65 + t) + columnLetter;
+    //     num = (num - t) / 26 | 0;
+    //   }
+    //   return columnLetter || undefined;
+    // }
+
+    let values_lengths = {};
+
+    data.forEach(row => {
+      let excel_row = [];
+
+      columns.forEach(col => {
+        let cell_value;
+        if(col.parse && typeof col.parse === 'function') {
+          cell_value = col.parse(row);
+        } else {
+          cell_value = row[col.key];
+        }
+        values_lengths[col.key] = Math.max(values_lengths[col.key]?? 0, String(cell_value).length);
+
+
+        // https://docs.sheetjs.com/docs/csf/cell
+        // https://docs.sheetjs.com/docs/csf/features/#number-formats
+        // https://support.microsoft.com/it-it/office/codici-del-formato-numerico-5026bbd6-04bc-48cd-bf33-80f18b4eae68
+        let cell_obj;
+        switch (col.dataType) {
+          case 'date':
+            cell_obj = {
+              v: cell_value? new Date(cell_value).toISOString() : undefined,
+              t: 'd',
+              z: 'd-mmm-yyyy'
+            };
+            break;
+          case 'datetime':
+            cell_obj = {
+              v: cell_value? new Date(cell_value).toISOString() : undefined,
+              t: 'd',
+              z: 'd-mmm-yyyy hh:mm'
+            };
+            break;
+          case 'num':
+            cell_obj = {
+              v: cell_value? +cell_value : 0,
+              t: 'n',
+              z: '#,##0.00'
+            };
+            break;
+          case 'perc':
+            cell_obj = {
+              v: (cell_value? +cell_value : 0)/100,
+              t: 'n',
+              z: '#,##0.00%'
+            };
+            break;
+          case 'percDecimal':
+            cell_obj = {
+              v: cell_value? +cell_value : 0,
+              t: 'n',
+              z: '#,##0.00%'
+            };
+            break;
+          case 'euro':
+            cell_obj = {
+              v: cell_value? +cell_value : 0,
+              t: 'n',
+              z: '"€"\ #,##0.00' // eslint-disable-line no-useless-escape
+            };
+            break;
+
+          default:
+            cell_obj = {
+              v: cell_value,
+              t: 's'
+            };
+            break;
+        }
+
+        excel_row.push(cell_obj);
+      });
+      excel_data.push(excel_row);
+    });
+
+    let ws = utilsXSLX.aoa_to_sheet(excel_data); // worksheet
+    // larghezza colonne
+    ws['!cols'] = [];
+    columns.forEach(col => {
+      ws['!cols'].push({ wch: values_lengths[col.key] + 4 });
+    });
+
+    return ws;
+
+  }
+
+  function setSheetName(str) {
+    if(str.length > 31) {
+      return str.substring(0, 27)  + '...';
+    }
+
+    return str;
+  }
+
+  let wb = utilsXSLX.book_new(); // workbook
+
+  utilsXSLX.book_append_sheet(
+    wb,
+    excel_sheet(params.columns, params.data),
+    setSheetName(params.downloadFilename)
+  );
+
+  if(params.extraDownloadSheets) {
+    params.extraDownloadSheets.forEach(item => {
+
+      utilsXSLX.book_append_sheet(
+        wb,
+        utilsXSLX.aoa_to_sheet(item.data),
+        setSheetName(item.name)
+      );
+    });
+  }
+
+  const filename = setDownloadFilename(params.downloadFilename, params.downloadFormat);
+  writeFileXLSX(wb, filename, {
+    bookType: 'xlsx',
+    cellDates: true
+  });
+}

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

@@ -0,0 +1,19 @@
+// Restituisce la stringa delle classi per la colonna data
+import {data_types} from './columns-data-types';
+
+export default function setClassName(col, addFormatClass = true) {
+  if(col.className) {
+    return col.className;
+  }
+
+  if(col.dataType) {
+
+    return [
+      ...(data_types[col.dataType]?.className? [data_types[col.dataType]?.className] : []),
+      ...(addFormatClass? [data_types[col.dataType]?.formatClassName] : [])
+    ].join(' ');
+
+  } else {
+    return null;
+  }
+}

package/src/web-components/TODO json-table/_work/__json-table-react/src/set-download-filename.js

@@ -0,0 +1,17 @@
+import {defaults} from './defaults';
+export default function setDownloadFilename(str, format = 'excel') {
+  const ext = format.toLowerCase() === 'excel'? 'xlsx' : 'csv';
+  if(str) {
+    str = str
+      .replace(/(\.csv)$/, '')
+      .replace(/(\.xslx?)$/, '')
+      .replace(/[/:]/g, '-')
+      .replace(/-+/g, '-')
+      .replace(/^-/, '')
+      .replace(/-$/, '');
+
+    return str + ' [' + new Date().toISOString().split('T')[0] + `].${ext}`;
+  }
+
+  return defaults.downloadFilename;
+}

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

@@ -0,0 +1,48 @@
+export default function (tableEl, zeroValuesChar = null) {
+
+  const normalize = str => {
+    let is_number = !isNaN(parseFloat(str));
+
+    str = str.replace(/;/g, '').replace(/"/g, '""');
+    if(is_number) {
+      str = str.replace(/\./g, ''); // sep migliaia
+    }
+    return str;
+  };
+
+  try {
+    if(!tableEl) {
+      throw new Error( 'table element not present' );
+    }
+
+    // table to array
+    let download_array = [];
+    tableEl.querySelectorAll('tr').forEach(row => {
+      let rowArray = [];
+
+      row.querySelectorAll('th, td').forEach(item => {
+        rowArray.push(normalize(item.innerText));
+      });
+
+      download_array.push(rowArray.join(';'));
+    });
+
+    let csv = download_array.join('\n');
+
+    if(zeroValuesChar) {
+      csv = csv.replaceAll(zeroValuesChar, 0);
+    }
+
+    return csv;
+
+    // const url = new Blob([download_array.join('\n')], { type: 'text/csv;charset=utf-8;' });
+
+    // return URL.createObjectURL(url);
+
+  } catch(e) {
+    console.error( e ); // eslint-disable-line
+  }
+
+}
+
+

package/src/web-components/TODO json-table/_work/archived/table-to-csv.js

@@ -0,0 +1,48 @@
+export default function (tableEl, zeroAltChar = null) {
+
+  const normalize = str => {
+    let is_number = !isNaN(parseFloat(str));
+
+    str = str.replace(/;/g, '').replace(/"/g, '""');
+    if(is_number) {
+      str = str.replace(/\./g, ''); // sep migliaia
+    }
+    return str;
+  };
+
+  try {
+    if(!tableEl) {
+      throw new Error( 'table element not present' );
+    }
+
+    // table to array
+    let download_array = [];
+    tableEl.querySelectorAll('tr').forEach(row => {
+      let rowArray = [];
+
+      row.querySelectorAll('th, td').forEach(item => {
+        rowArray.push(normalize(item.innerText));
+      });
+
+      download_array.push(rowArray.join(';'));
+    });
+
+    let csv = download_array.join('\n');
+
+    if(zeroAltChar) {
+      csv = csv.replaceAll(zeroAltChar, 0);
+    }
+
+    return csv;
+
+    // const url = new Blob([download_array.join('\n')], { type: 'text/csv;charset=utf-8;' });
+
+    // return URL.createObjectURL(url);
+
+  } catch(e) {
+    console.error( e ); // eslint-disable-line
+  }
+
+}
+
+

package/src/web-components/TODO json-table/_work/arrow.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="8">
+  <path fill="#D8D8D8" fill-rule="evenodd" d="M0 0L16 0 7.959 8z" />
+</svg>

package/src/web-components/TODO json-table/_work/da decidere/get-cell-data.js

@@ -0,0 +1,18 @@
+// conviene questa strada o è più efficiente continuare a usare gli attributi data-*?
+
+
+/**
+ * Gets the original value and parameters of a static (non-ajax) table cell.
+ */
+
+export function getCellData(jtId, cell_key){
+  const rowData = this.params.data.filter(row => row.jtId === +jtId)?.[0]?? null,
+    colParams = this.params.columns.filter(col => col.key === cell_key)?.[0]?? null,
+    dataType = this.params.dataTypes[colParams?.dataType]?? null;
+
+  return {
+    data: rowData,
+    colParams: colParams,
+    dataType: dataType
+  };
+}

package/src/web-components/TODO json-table/_work/download-button.js

@@ -0,0 +1,29 @@
+const setDownloadFilename = str => {
+  str = str
+    .replace(/(\.csv)$/, '')
+    .replace(/[/:]/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-/, '')
+    .replace(/-$/, '');
+
+  return str + ' [' + new Date().toISOString().split('T')[0] + '].csv';
+};
+let downloadBtn = '';
+if(params.showDownloadBtn) {
+  const btn_id = table_id + '-dwnld-btn';
+  downloadBtn =
+    `<div class="${params.rightAlignClassName}">
+      <button type="button"
+        id="${btn_id}"
+        class="${params.downloadBtnClassName}"
+      >${params.downloadBtnLabel}</button>
+    </div>`;
+
+  document.body.addEventListener('click', e => {
+    if(e.target.id === btn_id) {
+
+      downloadExcel(params);
+
+    }
+  }, false);
+}