@massimo-cassandro/minimo 1.7.2 → 1.8.1

package/src/web-components/TODO json-table/src/__json-table-react/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/src/__json-table-react/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/src/__json-table-react/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/src/__json-table-react/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/src/__json-table-react/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/src/__json-table-react/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/src/css/custom-media.css

@@ -0,0 +1,16 @@
+/*
+90rem    : 1440px
+64rem    : 1024px
+47.5rem  : 760px
+*/
+
+@custom-media --media-xlarge-viewport-up (width > 90rem);
+@custom-media --media-large-viewport-up (width > 64rem);
+@custom-media --media-medium-viewport-up (width > 47.5rem);
+
+@custom-media --media-large-viewport-only (64rem < width <= 90rem);
+@custom-media --media-medium-viewport-only (47.5rem < width <= 64rem);
+@custom-media --media-small-viewport-only (width <= 47.5rem);
+
+@custom-media --media-xlarge-viewport-down (max-width: 90rem);
+@custom-media --media-large-viewport-down (max-width: 64rem);

package/src/web-components/TODO json-table/src/css/icons.module.css

@@ -0,0 +1,22 @@
+.icon { /* applied to the td */
+  text-align: center;
+
+  svg {
+    position: relative;
+    top: -3px;
+    width: var(--jt-bool-icon-size, 1.3em);
+    aspect-ratio: 1;
+    fill: none;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 8px;
+  }
+
+  &.true {
+    color: var(--jt-bool-true-color, #0a7202);
+  }
+  &.false {
+    color: var(--jt-bool-false-color, #c00);
+  }
+}

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

@@ -0,0 +1,78 @@
+/* TODO dark mode */
+
+.infoOuterContainer {
+  position: sticky;
+  top: var(--js-info-container-sticky-top, 0);
+  left: var(--js-info-container-sticky-left, 0);
+  z-index: 10;
+  padding-block-end: var(--jt-outer-padding-block-end, 1rem);
+  background-color: var(--jt-outer-info-bg, #fff);
+}
+.infoContainer {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: stretch;
+}
+
+.resultInfo {
+  font-size: var(--jt-info-font-size, clamp(0.85rem, 0.6824rem + 0.3529vw, 1rem));
+  text-align: center;
+}
+
+@media (--media-medium-viewport-up) {
+  .infoContainer {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .resultInfo {
+    flex: 1;
+    text-align: start;
+  }
+  .search {
+    flex: 0 1 20rem;
+  }
+}
+
+
+.searchInput {
+  display: block;
+  width: 100%;
+  padding: var(--jt-search-input-padding-y, .375rem) var(--jt-search-input-padding-x, .75rem);
+  font-size: var(--jt-search-input-font-size, clamp(0.85rem, 0.6824rem + 0.3529vw, 1rem));
+  color: var(--jt-search-input-text-color, currentColor);
+  background-color: var(--jt-search-input-bg-color, transparent);
+  border: 1px solid var(--jt-search-input-border-color, #999);
+  border-radius: .4rem;
+
+  &:focus {
+    outline: 2px solid hsl(192deg 84% 63% / .7);
+  }
+  &::placeholder {
+    color: var(--jt-placeholder-color, #999);
+    text-align: center;
+    opacity: 1;
+
+    @media (--media-medium-viewport-up) {
+      text-align: start;
+    }
+  }
+  &[disabled] {
+    opacity: .6;
+    &::placeholder {
+      font-style: italic;
+    }
+  }
+
+
+
+  /* @media (prefers-color-scheme: dark) {
+    border-color: var(--jt -search-input-border-color-dark, #ecede8);
+    &:focus {
+      outline-color: var(--green-2);
+    }
+  } */
+}

package/src/web-components/TODO json-table/src/css/main-builder.module.css

@@ -0,0 +1,6 @@
+
+.wrapper {
+  position: relative;
+  display: block;
+  margin-block: var(--jt-wrapper-margin-block, 1rem);
+}

package/src/web-components/TODO json-table/src/css/table.module.css

@@ -0,0 +1,172 @@
+/* stylelint-disable max-nesting-depth */
+
+.tableWrapper {
+  position: relative;
+  max-width: 100%;
+  height: var(--js-table-wrapper-height, auto);
+  overflow-x: auto;
+  overflow-y: visible;
+
+  /* TODO ombra laterale su overflow della tabella (vedi pannello staff dashboard) */
+}
+
+.table {
+
+  --sort-arrows-wrapper-translate-x: -2px;
+
+  /* TODO fix thead sticky -> vedi TODO in main-builder per impostare l'altezza di tableWrapper */
+  /* TODO ombra a sostituire il bordo che scompare nello scroll sticky */
+  /* TODO attivare sticky su info e thead con due opzioni default true */
+  thead  {
+    position: sticky;
+    top: var(--js-thead-sticky-top, 0);
+    z-index: var(--js-thead-zindex, 10);
+    /* background-clip: padding-box; */
+
+    th  {
+      &.sort {
+        position: relative;
+
+      }
+
+      &.sortingOn {
+        .sortArrowsWrapper {
+          display: flex;
+        }
+      }
+
+      /* sorting ASC activated */
+      &.sortingAsc {
+        .sortDesc {
+          display: none;
+        }
+      }
+
+      /* sorting DESC activated */
+      &.sortingDesc {
+        .sortAsc {
+          display: none;
+        }
+      }
+    }
+
+    &:hover, &:focus, &:focus-within {
+
+      /* only needed to maintan hover status while hovering mouse from a column to the other  */
+      &::after {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: 1;
+        display: block;
+        width: 100%;
+        height: calc(var(--jt-sort-arrows-size, .9rem) * 1.5);
+        content: '';
+        background-color: var(--jt-thead-sort-overlay-bg, rgb(0 0 0 / .1));
+        filter: blur(1rem);
+      }
+
+      .sortArrowsWrapper {
+        z-index: 2;
+        box-shadow: var(--jt-sort-arrows-wrapper-hover-box-shadow, 0 2px 1rem rgb(0 0 0 / .6));
+        scale: 1.4;
+        translate: var(--sort-arrows-wrapper-translate-x) 100%;
+
+        .sortArrow {
+          display: block;
+
+          &.sortActive {
+            color: var(--jt-sort-arrows-active-fill, #33ef15);
+          }
+
+          @media (hover: hover) {
+            &:hover {
+              color: var(--jt-sort-arrows-hover-fill, #000);
+              background-color: var(--jt-sort-arrows-hover-bg, #fff);
+
+            }
+          }
+
+          &:active {
+            color: var(--jt-sort-arrows-btn-active-color, #000);
+            background-color: var(--jt-sort-arrows-btn-active-bg, #33ef15);
+          }
+        }
+      }
+    } /* end hover... thead */
+
+  }
+}
+
+
+/* sort */
+.sortBtn {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+.sortArrowsWrapper {
+  position: absolute;
+  top: auto;
+  right: 0;
+  bottom: 0;
+  left: auto;
+
+  display: flex;
+  flex-flow: row nowrap;
+  gap: .3rem;
+  align-items: center;
+  justify-content: flex-end;
+
+  background-color: var(--jt-sort-arrows-wrapper-bg-color, #000);
+  border: var(--jt-sort-arrows-wrapper-border, 1px solid #666);
+  border-radius: 99rem;
+  box-shadow: var(--jt-sort-arrows-wrapper-box-shadow, 0 0 5px rgb(0 0 0 / .4));
+  transition: scale, translate .1s linear;
+  transform-origin: bottom right;
+  scale: 0;
+  translate: var(--sort-arrows-wrapper-translate-x) 35%;
+
+  /* sorting has been activated for this col */
+  .sortingOn & {
+    scale: 1;
+  }
+}
+
+.sortArrow { /* role button */
+  position: relative;
+  width: var(--jt-sort-arrows-size, .9rem);
+  aspect-ratio: 1;
+  padding: var(--jt-sort-arrows-wrapper-padding, 3px);
+  color: var(--jt-sort-arrows-fill, #fff);
+  /* cursor: pointer; */
+  border-radius: 50%;
+
+  svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    fill: currentColor;
+    transform-origin: center;
+    translate: -50% -50%;
+  }
+
+}
+
+.sortAsc {
+  svg {
+    /* top: var(--jt-sort-asc-arrow-svg-vertical-adjust, 3px); */
+    rotate: var(--jt-sort-asc-arrow-rotate, 180deg);
+  }
+}
+.sortDesc {
+  svg {
+    /* top: var(--jt-sort-desc-arrow-svg-vertical-adjust, -3px); */
+    rotate: var(--jt-sort-desc-arrow-rotate, 0);
+  }
+}

package/src/web-components/TODO json-table/src/css/utility.module.css

@@ -0,0 +1,9 @@
+.centerAlign {
+  text-align: center;
+}
+.endAlign {
+  text-align: end;
+}
+.nowrap {
+  white-space: nowrap;
+}

package/src/web-components/TODO json-table/src/icons/arrow-down-bold.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M208.49,152.49l-72,72a12,12,0,0,1-17,0l-72-72a12,12,0,0,1,17-17L116,187V40a12,12,0,0,1,24,0V187l51.51-51.52a12,12,0,0,1,17,17Z"></path></svg>

package/src/web-components/TODO json-table/src/icons/false.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg"><path d="M48 84c19.882 0 36-16.118 36-36S67.882 12 48 12 12 28.118 12 48s16.118 36 36 36zm16-52L33 63m31 0L33 32"/></svg>

package/src/web-components/TODO json-table/src/icons/true.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg"><path d="m64.5 39-22.013 21-10.987-10.5"/><path d="m48 84c19.8823 0 36-16.1177 36-36s-16.1177-36-36-36-36 16.1177-36 36 16.1177 36 36 36z"/></svg>