@massimo-cassandro/minimo 1.18.4 → 1.19.1

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

@@ -1,172 +0,0 @@
-/**
- * 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

@@ -1,156 +0,0 @@
-/**
- * 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

@@ -1,31 +0,0 @@
-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

@@ -1,17 +0,0 @@
-/*
-
-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

@@ -1,26 +0,0 @@
-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 } }));
-}

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

@@ -1,121 +0,0 @@
-
-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

@@ -1,22 +0,0 @@
-// 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

@@ -1,64 +0,0 @@
-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

@@ -1,8 +0,0 @@
-
-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

@@ -1,47 +0,0 @@
-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;
-}