@massimo-cassandro/minimo 1.7.1 → 1.8.0

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

@@ -0,0 +1,154 @@
+/* stylelint-disable selector-max-compound-selectors */
+/* stylelint-disable max-nesting-depth */
+.tableWrapper {
+  max-width: 100%;
+  overflow-x: auto;
+
+  /* TODO ombra su scroll vedi pannello staff e  https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/ */
+
+}
+
+.table {
+  width: 100%;
+  margin-block: var(--jt-table-margin-block, 1rem);
+  caption-side: var(--jt-table-caption-side, bottom);
+  border-spacing: 0;
+  border-collapse: collapse;
+  border-color: var(--jt-table-border-color, #999);
+  border-style: var(--jt-table-border-style, solid);
+  border-width: var(--jt-table-border-width, 1px);
+
+  caption {
+    padding-block: .2rem;
+    margin-block: 0;
+  }
+
+  th, td {
+    padding: var(--jt-table-cell-padding-y, .5rem) var(--jt-table-cell-padding-x, .5rem);
+    vertical-align: top;
+    background-color: var(--jt-table-cell-bg-color, #fff);
+    border-color: var(--jt-table-cell-border-color, #999);
+    border-style: var(--jt-table-cell-border-style, solid);
+    border-bottom-width: var(--jt-table-cell-border-width, 1px);
+
+    &:not(:last-child) {
+      border-right-width: var(--jt-table-cell-vertical-border-width, 1px);
+    }
+  }
+  thead {
+
+    th, td {
+      font-weight: 700;
+      vertical-align: bottom;
+      background-color: var(--jt-table-thead-cell-bg-color, #e4e4e4);
+    }
+
+    /* currently only one tr is expected for thead, but the pseudo class `:last-child`
+       is used anyway, for compatibility with any future developments */
+    tr:last-child {
+      th, td {
+        border-bottom-color: var(--jt-table-thead-cell-border-color, #666);
+        border-bottom-width: var(--jt-table-thead-cell-border-width, 4px);
+      }
+
+      th {
+        /* sort feature is available */
+        &.sort {
+          > div {
+            display: flex;
+            flex-flow: row nowrap;
+            gap: .5rem;
+            align-items: flex-end;
+            justify-content: space-between;
+          }
+          @media (hover: hover) { /* @media (any-hover: hover) { */
+            &:has(.sortArrows > span:hover) {
+              background-color: var(--jt-table-thead-sort-cell-hover, #ebb8b8);
+            }
+          }
+        }
+
+        /* sorting has been activated */
+        &.sortingOn {
+          border-bottom-color: var(--jt-table-sort-color, #c00);
+        }
+
+        /* sorting ASC activated */
+        &.sortingAsc {
+          .sortArrowUp {
+            color: var(--jt-table-sort-arrow-on, #c00);
+          }
+        }
+
+        /* sorting DESC activated */
+        &.sortingDesc {
+          color: blue;
+        }
+
+      }
+    }
+  }
+
+  /*
+    sticky headers don't work if table wrapper is present since it has overflow
+    so this feature is added only if table is not wrapped
+  */
+  &.stickyHeaders {
+    position: relative;
+    thead {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+  }
+
+  tfoot {
+    th, td {
+      font-weight: 700;
+      background-color: var(--jt-table-tfoot-cell-bg-color, #f4f4f4);
+    }
+    tr:first-child {
+      th, td {
+        border-top-color: var(--jt-table-tfoot-cell-border-color, #666);
+        border-top-width: var(--jt-table-tfoot-cell-border-width, 3px);
+      }
+    }
+  }
+}
+
+/* sort arrows container */
+.sortArrows {
+  display: flex;
+  flex: 0;
+  flex-flow: column nowrap;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+  padding-block-end: .2em;
+  color: var(--jt-table-sort-arrow-off, #333);
+
+
+  > span {
+    flex: 0;
+    @media (hover: hover) { /* @media (any-hover: hover) { */
+      &:hover {
+        color: var(--jt-table-sort-arrow-hover, #c00);
+      }
+    }
+  }
+  svg {
+    display: block;
+    width: .5em;
+    aspect-ratio: 1;
+    cursor: pointer;
+    fill: currentColor;
+  }
+
+}
+/* inside `.sortArrows` element */
+/* .sortArrowUp {} */
+.sortArrowDn {
+  svg {
+    rotate: .5turn;
+  }
+}

package/src/web-components/TODO json-table/_work/OLD/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/_work/OLD/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/_work/OLD/src/icons/search-arrows.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><path d="m39.9 0-39.9 80h80z"/></svg>

package/src/web-components/TODO json-table/_work/OLD/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>

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

@@ -0,0 +1,56 @@
+/**
+ * JsonTable
+ * build a table from a static or ajax-imported JSON object.
+ *
+ * @param {object} params - parametri di configurazione.
+ * @author Massimo Cassandro
+ */
+
+import { parseParams } from './js/parse-params';
+import { mainBuilder } from './js/main-builder';
+import { infoSection } from './js/info-section';
+import { tableBuilder } from './js/table-builder';
+import { tableHead } from './js/table-head';
+import { tableFoot } from './js/table-foot';
+import { tableRow } from './js/table-row';
+import { setColumClassname } from './js/set-column-classname';
+
+
+class JsonTable {
+
+  constructor(custom_params, custom_data_types) {
+    this.params = parseParams({
+      custom_params: custom_params,
+      custom_data_types: custom_data_types,
+    });
+
+    if(this.params.debug) {
+      /* eslint-disable no-console */
+      console.groupCollapsed('JsonTable params');
+      console.log(this.params);
+      console.groupEnd();
+      /* eslint-enable no-console */
+    }
+
+
+    if(this.params.err) {
+      // eslint-disable-next-line no-console
+      console.error(this.params.err);
+
+    } else {
+      this.build();
+
+    }
+  }
+
+}
+
+JsonTable.prototype.build = mainBuilder;
+JsonTable.prototype.infoSection = infoSection;
+JsonTable.prototype.tableBuilder = tableBuilder;
+JsonTable.prototype.tableHead = tableHead;
+JsonTable.prototype.tableFoot = tableFoot;
+JsonTable.prototype.tableRow = tableRow;
+JsonTable.prototype.setColumClassname = setColumClassname;
+
+export default JsonTable;

package/src/web-components/TODO json-table/_work/OLD/src/js/default-columns-data-types.js

@@ -0,0 +1,172 @@
+/**
+ * data types default settings
+ *
+ * standard render function and classnames for each data type
+ * each of the them can be overridden in the columns definition
+ * the formatClassName is used to add a class to the tbody cells for formatting purposes
+ *
+ * default data types can be expanded with custom values when instatiating the JsonTable class
+ *
+ * @param {Object} params - the global params object. For clarity, render functions
+ *        use a `global_params` argument, instead of `params`, but it's the same thing
+ * @param {Object} datatypes - the default datatypes object
+ * @param {String} datatypes.className - default className for the data type
+ * @param {Function} datatypes.parse - parse function, to normalize/process data before rendering,
+ *        its argument is the complete data row, and must be applied to the column definition
+ *        (not with this function)
+ * @param {Function} datatypes.render - render function
+ * @param {Function} datatypes.sortValue - the value used for sorting. If not defined, the raw value is used
+ * @param {Function} datatypes.searchValue - the value used for searching. If not defined, the raw value is used
+ * @param {Object} datatypes.colDefaultsOverrides - Object with default values for the columns.
+ *        They override the default values in the `columns_default` object for the columns with the given dataType
+ * @returns {Object} - the default datatypes object
+ */
+
+import * as styles from '../css/utility.module.css';
+import * as iconsStyles from '../css/icons.module.css';
+
+export function defaultDataTypes(params) {
+
+  const inlineEndAlignClassName  = params.inlineEndAlignClassName?? styles.endAlign
+    // ,centerAlignClassName        = params.centerAlignClassName?? styles.centerAlign
+    ,nowrapClassName             = params.nowrapClassName?? styles.nowrap
+
+    ,date_datetime_datatype = isDatetime => {
+
+      const parseDateString = d => {
+        let date;
+        if(!d) {
+          date = null;
+
+        // allow using date objects (like the ones returned by symfony)
+        // like `{'date': '2022-12-02 06:18:55', 'timezone_type': 3, 'timezone': 'Europe/Berlin' }`
+        // added for compatibility reasons
+        // ENHANCEMENT parse timezones
+        } else if(typeof d === 'object' && Object.hasOwn(d, 'date')) {
+
+          date = new Date(d.date);
+
+        } else {
+          date = new Date(d);
+        }
+        return date;
+      };
+
+      return {
+        className: inlineEndAlignClassName + (params.datesNowrap? ` ${nowrapClassName}` : ''),
+
+        sortValue: (d/* , global_params */) => parseDateString(d)?.toISOString()?? '',
+        searchValue: (d, global_params) => {
+          // normalize the date string
+          const date = parseDateString(d);
+          if (date) {
+            return date.toLocaleString(global_params.locale, {
+              ...global_params.datesLocaleOpts,
+              ...(isDatetime? global_params.timesLocaleOpts : {})
+            });
+          } else {
+            return '';
+          }
+        },
+
+        render: (d, global_params) => {
+
+          // normalize the date string
+          const date = parseDateString(d);
+
+          if(date) {
+            const dateISO = date.toISOString();
+            return `<time datetime="${isDatetime? dateISO : dateISO.substring(0,10)}">` +
+              date.toLocaleString(global_params.locale, global_params.datesLocaleOpts) +
+              (isDatetime?
+                '\u00A0' +
+                '<small>' +
+                  date.toLocaleString(global_params.locale, global_params.timesLocaleOpts) +
+                '</small>'
+                : '') +
+            '</time>';
+
+          } else {
+            return '';
+          }
+        },
+        // force some columns default values (`columns_default` variable)  for this dataType.
+        // All of these values can in turn be overridden in the column definition.
+        colDefaultsOverrides: {
+          tfoot: false, // avoid rendering this value inside the tfoot element
+        }
+      }; // end of returned object
+    } // end date_datetime_datatype
+
+    ,parseNum = (val) => {
+      const num = +(val?? 0);
+      if(isNaN(num) && params.isNaNChar !== false) {
+        return params.isNaNChar;
+      } else {
+        return num;
+      }
+    }
+  ;
+
+  const datatypes =  {
+
+    string: {}, // default type
+
+    date: date_datetime_datatype(false),
+    datetime: date_datetime_datatype(true),
+
+    num: {
+      className        : inlineEndAlignClassName,
+      sortValue        : val => parseNum(val),
+      searchValue      : val => parseNum(val),
+      render           : (val, global_params) => {
+        const num = parseNum(val);
+        return isNaN(num)? num : num.toLocaleString(global_params.locale, global_params.numbersLocaleOpts);
+      }
+    },
+    perc: {
+      className        : inlineEndAlignClassName,
+      sortValue        : val => parseNum(val),
+      searchValue      : val => parseNum(val),
+      render           : (val, global_params) => {
+        const num = parseNum(val);
+        return isNaN(num)? num : num.toLocaleString(global_params.locale, global_params.currPercLocaleOpts) + '\u202F<small>%</small>';
+      }
+    },
+    percDecimal: {
+      className        : inlineEndAlignClassName,
+      sortValue        : val => parseNum(val),
+      searchValue      : val => parseNum(val),
+      render           : (val, global_params) => {
+        const num = parseNum(val);
+        return isNaN(num)? num : (num * 100).toLocaleString(global_params.locale, global_params.currPercLocaleOpts) + '\u202F<small>%</small>';
+      }
+    },
+    euro: {
+      className        : inlineEndAlignClassName,
+      sortValue        : val => parseNum(val),
+      searchValue      : val => parseNum(val),
+      render           : (val, global_params) => {
+        const num = parseNum(val);
+        return isNaN(num)? num : '<small>\u20AC</small>\u202F' + num.toLocaleString(global_params.locale, global_params.currPercLocaleOpts);
+      }
+    },
+
+    bool: {
+      // NB: `true` and `false` classes are added by the `table-row.js` script
+      className        : params.boolValuesClassName?? iconsStyles.icon,
+      render           : (val, global_params) => val === true? global_params.boolTrueIcon : (val === false? global_params.boolFalseIcon : ''),
+
+      // force some columns default values (`columns_default` variable)  for this dataType.
+      // All of these values can in turn be overridden in the column definition.
+      colDefaultsOverrides: {
+        tfoot            : false, // avoid rendering this value inside the tfoot element
+        searchable       : false, // disable searching
+        sortable         : false // disable sorting
+      }
+    }
+
+  };
+
+  return datatypes;
+}

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

@@ -0,0 +1,156 @@
+/**
+ * Parametri di configurazione
+ *
+ */
+import trueIcon from '../icons/true.svg?inline';
+import falseIcon from '../icons/false.svg?inline';
+
+export const defaults_params = {
+
+  // if true, logs debug info to the console
+  debug                   : false,
+
+  // element to insert the table into. Required
+  container               : null,
+
+  // if true, jsonTable uses the same json schema and query parameters (simplified)
+  // of jQuery Datatable (currently it is always active, setting it to false has no effect)
+  jqDatatableCompliant    : true,
+
+  columns                 : [],    // coluns definitions
+  ajax                    : false, // true: uses `ajaxUrl` and ignores `data`
+  ajaxUrl                 : null,  // ajax url for rows data
+  data                    : [],    // rows data (static version)
+  footerData              : [],    // TODO  che succede con ajax???
+  caption                 : null,
+  addRowIndex             : false, // if true adds a data-index attribute to the `tr` with the json record index
+
+  // activate search and sort features
+  search                  : true,
+  sort                    : true,
+  // object of column keys with 'asc` or `desc` for default sorting
+  // keys order must reflect the order of the database sorting statement
+  // example: { key1: 'asc', key2: 'desc' }
+  // sort directions strings will be forced to lowercase
+  defaultSorting          : {},
+
+  locale                  : 'it-IT', // locale string
+  datesLocaleOpts         : { year: 'numeric', month: 'short', day: 'numeric' },
+  timesLocaleOpts         : { hour12: false, hour:'2-digit', minute:'2-digit' },
+  numbersLocaleOpts       : { maximumFractionDigits: 2 }, // numbers
+  currPercLocaleOpts      : { maximumFractionDigits: 2, minimumFractionDigits: 2 }, // currency and percentages
+
+  tableId                 : null,  // custom table id, if needed
+
+  // extra or alternative classes for the main wrapper (contains info and table), info section or table
+  // extra classes are added to the default classes
+  // alternative classes replace them completely (and any extra classes are not taken into account)
+  // If `infoAltClassName` is defined, no default classes are added to the elements in the info section
+  // (anyway, the class specified in `searchInputClassName`, if defined, is added to the input element)
+  mainWrapperExtraClassName    : null,
+  mainWrapperAltClassName      : null,
+  infoExtraClassName           : null,
+  infoAltClassName             : null,
+  tableExtraClassName          : null,
+  tableAltClassName            : null,
+
+  // if true, wraps the table in a div to prevent overly large tables from breaking the layout
+  // since it uses the `overflow` property, it is not suitable for tables with sticky headers
+  addTableWrapper         : true,
+  // alternative class for the div that wraps table.
+  tableWrapperClassName     : null,
+
+  // custom classes for align and styling, if not defined or null, the default ones are used
+  // centerAlignClassName    : null, // currently unused
+  inlineEndAlignClassName : null,
+  nowrapClassName         : null,
+  euroClassName           : null,
+  percClassName           : null,
+
+  datesNowrap             : true,      // if true, renders cells containing a date “nowrap”
+  useZeroAltChar          : true,      // enables value conversions === `0`, overrides any column rendering function
+  zeroAltChar             : '\u2014',  // dash, used for values === `0` if useZeroAltChar === true
+  isNaNChar               : '\u2014',  // dash, used for NaN values of numeric datatypes, set it to false to avoid rendering
+
+  // class to be assigned to the cell containing boolean values, used for styling svg icons. Overrides the default class
+  // you may need to change it if you use a different icon set
+  boolValuesClassName     : null,
+
+  // Optional custom class names for `true` and `false` boolean values.
+  // They are added to the containing cell (`td`) beside the `boolValuesClassName` class,
+  // but only if the `boolValuesClassName` parameter is not null
+  boolTrueClassName       : null,
+  boolFalseClassName      : null,
+
+  // icons svg code for boolean values
+  boolTrueIcon            : trueIcon,  // icon for boolean true
+  boolFalseIcon           : falseIcon, // icon for boolean false
+
+  searchInputClassName    : null,      // custom class for the search input, overrides the default one,
+  searchInputTitle        : 'Filtra records',
+  searchInputPlaceholder  : 'INVIO per eseguire la ricerca',
+  searchInputAriaLabel    : 'Filtra risultati',
+
+  // TODO (??) alternative templates markups
+
+  // callback functions after `tr` elements rendering, it's called for each row
+  // It is invoked with three arguments: the tr element, the corresponding data object and the whole parsed params object
+  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'
+  */
+
+};
+
+
+
+/**
+ * Columns default values
+ * Some default (tfoot, searchable, sortable,...) can be changed for specific data types,
+ * according to the `colDefaultsOverrides` object in dataTypes
+ * (see the `default-columns-data-types.js` file)
+ *
+ */
+
+export const columns_default = {
+
+  // column title (th text)
+  title                     : null,
+
+  // json object key
+  key                       : null,
+
+  // cell data type, it must be one of the keys of the `data_types` object
+  dataType                  : 'string',
+
+  // class to be assigned to the cell. If present it overrides the default class of the data_types object
+  className                 : null,
+
+  // rendering function for the cell. If present it overrides the default render function of the data_types object
+  render                    : null,
+
+  // parsing function for the cell. If present the value is passed to this function before rendering
+  parse                     : null,
+
+  // if true, the cell is a th[scope=row] instead of a td
+  rowHeading                : false,
+
+  // if false, the cell will not be rendered in the tfoot element
+  tfoot                     : true,
+
+  // if true, the column content is searchable
+  searchable                : true,
+
+  // if true, the column content is sortable
+  sortable                  : true,
+
+  // custom sort function for the column, overrides the default one
+  customSortFunction        : null,
+};

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

@@ -0,0 +1,31 @@
+import * as styles from '../css/info.module.css';
+
+export function infoSection() {
+
+
+  const searchInputClassName = this.params.searchInputClassName?? (this.params.infoAltClassName?? styles.searchInput),
+    searchInput =
+      `<div class="${styles.search}">` +
+        '<input' +
+          ` title="${this.params.searchInputTitle}"` +
+          ` placeholder="${this.params.searchInputPlaceholder}"` +
+          ` aria-label="${this.params.searchInputAriaLabel}"` +
+          (searchInputClassName? ` class="${searchInputClassName}"` : '') +
+          ' type="search"' +
+        '/>' +
+      '</div>';
+
+  const infoSection = document.createElement('div');
+  infoSection.className = this.params.infoAltClassName??
+    styles.info + (this.params.infoExtraClassName? ` ${this.params.infoExtraClassName}` : '');
+
+  infoSection.innerHTML = '<div' +
+    (this.params.infoAltClassName? '' : ` class="${styles.resultInfo}"`) +
+    '>{{TODO resultInfoText}}</div>' +
+    (this.params.search? searchInput : '');
+
+  // TODO add event listener to search input
+
+  return infoSection;
+}
+

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

@@ -0,0 +1,17 @@
+/*
+
+onKeyDown={ e => {
+        if(e.code === 'Enter'){
+          updateUrl(1, e.target.value);
+        }
+      }}
+      onInput={ e => { // per il pulsante di reset
+        if(e.target.value === '') {
+          updateUrl(1, '');
+        }
+      }}
+ */
+
+
+// TODO defaultSorting => conversione nel formato datatable se jqDatatableCompliant = true
+// TODO customSortFunction

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

@@ -0,0 +1,26 @@
+import * as styles from '../css/main-wrapper.module.css';
+
+export function mainBuilder() {
+
+  // console.log(this);
+
+  const wrapper = document.createElement('section');
+  wrapper.className = this.params.mainWrapperAltClassNam??
+    styles.wrapper + (this.params.mainWrapperExtraClassName? ` ${this.params.mainWrapperExtraClassName}` : '');
+
+  // info section
+  wrapper.appendChild(this.infoSection());
+
+  // table responsive wrapper & table
+  wrapper.appendChild(this.tableBuilder());
+
+  // TODO pagination -> https://www.taniarascia.com/front-end-tables-sort-filter-paginate/
+  // TODO search
+  // TODO sort
+
+
+  this.params.container.replaceChildren(wrapper);
+
+  // TODO ready listeners
+  // this.params.container.dispatchEvent(new CustomEvent('jt:ready', { detail: { table: this } }));
+}