@massimo-cassandro/minimo 1.7.1 → 1.8.0

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

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

@@ -0,0 +1,155 @@
+// 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 '../js/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/pagination-array-builder.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/pagination.js

@@ -0,0 +1,37 @@
+export default function () {
+
+  if(jsonData?.recordsFiltered) {
+
+    const page_array = build_page_array(currentPage, props.pageRows, jsonData.recordsFiltered);
+
+    return (
+      <nav id={navBarId} aria-label="Navigazione pagine" className={styles.paginationNav}>
+        <ul>
+          {page_array.map((pag, i) => {
+            let content;
+
+            if(pag === currentPage) {
+              content = <span className={styles.selected}>{pag}</span>;
+
+            } else if (pag !== null) {
+              content = <button
+                type="button"
+                title={`Vai a pagina ${pag}`}
+                onClick={ e => {
+                  setLoadingOffsetTop(e.target.offsetTop);
+                  updateUrl(pag);
+                }}
+              >{pag}</button>;
+
+            } else {
+              content = <span>&hellip;</span>;
+            }
+
+            return <li key={i}>{content}</li>;
+          })}
+        </ul>
+      </nav>
+    );
+  }
+
+}

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

@@ -0,0 +1,19 @@
+import {defaults} from '../js/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/table-info.js

@@ -0,0 +1,24 @@
+export default function () {
+  updateTableInfo(<>
+    {(+jsonData.recordsFiltered).toLocaleString('it-IT', {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    })} record trovati
+    {jsonData.recordsFiltered < jsonData.recordsTotal?
+      ` (su un totale di ${(+jsonData.recordsTotal).toLocaleString('it-IT', {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0
+      })})`
+      : ''}
+    <br />
+    <a href={`#${navBarId}`} title="Vai alla navigazione delle pagine"
+      onClick={e => {
+        e.preventDefault();
+        container?.current?.scrollIntoView({behavior: 'smooth', block: 'end', inline: 'end'});
+      }}
+    >
+      Pagina <strong>{currentPage}</strong> di <strong>{calcTotPages(jsonData.recordsFiltered, props.pageRows)}</strong>
+    </a>
+
+  </>);
+}