@massimo-cassandro/minimo 1.7.2 → 1.8.1

package/src/web-components/TODO json-table/src/js/table-thead.js

@@ -0,0 +1,91 @@
+import { titleCase } from './utilities.js';
+import * as styles from '../css/table.module.css';
+import { classnames } from '@massimo-cassandro/js-utilities/index.js';
+
+
+
+// TODO gestire this.params.stickyThead
+
+export function tableThead() {
+
+console.log(typeof this.params.sortArrowIcon);
+console.log(this.params.sortArrowIcon instanceof Element);
+console.log(this.params.sortArrowIcon instanceof HTMLElement);
+console.log(this.params.sortArrowIcon instanceof SVGElement);
+
+  return {
+    tag: 'thead',
+    callback: el => this.params.elements.thead = el,
+
+    children: [
+      {
+        tag: 'tr',
+        children: this.params.columns.map(col => {
+          /*
+          {
+            title              : null, // column title (th text)
+            key                : null, // json object key
+            dataType           : 'string', // cell data type, it must be one of the keys of the `data_types` object
+            className          : null, // class to be assigned to the cell. If present it overrides the default class of the data_types object
+            render             : null, // rendering function for the cell. If present it overrides the default render function of the data_types object
+            parse              : null, // parsing function for the cell. If present the value is passed to this function before rendering
+            rowHeading         : false, // if true, the cell is a th[scope=row] instead of a td (tbody only)
+            tfoot              : true, // if false, the cell will not be rendered in the tfoot element
+            searchable         : true, // if true, the column content is searchable
+            sortable           : true, // if true, the column content is sortable
+            sortValueCustomParser    : null, // custom sort function for the column, overrides the default one
+            searchValueCustomParser  : null,
+          }
+          */
+
+          const sorting_available = this.params.sort && col.sortable,
+            sorting_activated = sorting_available && this.params.defaultSorting[col.key] != null,
+            sorting_direction = sorting_activated? titleCase(this.params.defaultSorting[col.key]) : null;
+
+          return {
+            tag: 'th',
+            attrs: {
+              scope: 'col',
+              'data-key': col.key
+            },
+            className: classnames(
+              sorting_available? styles.sort : null,
+              sorting_activated? styles.sortingOn : null,
+              sorting_direction? styles[`sorting${sorting_direction}`] : null
+            ),
+
+            content: sorting_available? null : col.title,
+            // sort arrows
+            children: [
+              {
+                condition: sorting_available,
+                tag: 'button',
+                className: classnames(
+                  styles.sortBtn,
+                  styles[`sort${sorting_direction}`],
+                  sorting_direction === sorting_direction? styles.sortActive : null
+                ),
+                // attrs: {
+                //   'aria-label': this.params[`sortButton${direction}AriaLabel`],
+                //   title: this.params[`sortButton${direction}AriaLabel`],
+                // },
+
+//TODO icona inserita in modo non corretto, problema di dombuilder?
+// capire se cambiare approccio (content come funzione?)
+                content: col.title,
+                children: [
+                  {
+                    tag: 'span',
+                    className: '',
+                    content: this.params.sortArrowIcon,
+                  }
+                ]
+              }
+            ]
+          };
+        }) // end col map
+      } // end tr
+    ]
+
+  };
+}

package/src/web-components/TODO json-table/src/js/update-info.js

@@ -0,0 +1,42 @@
+export function updateInfo(){
+  let info;
+  if(this.params.ajax) {
+    /* 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>
+
+          </>);
+    */
+
+  } else {
+    // when first loaded the table is not defined and the number of rows displayed corresponds to data length
+    const search_result = this.params.elements.table?.querySelectorAll('tbody tr:not([hidden])').length ?? this.params.data.length;
+
+    // TODO parametrizzare il testo
+    info = search_result === 1
+      ? `Visualizzata <strong>${search_result}</strong> riga su <strong>${this.params.data.length}</strong>`
+      : `Visualizzate <strong>${search_result}</strong> righe su <strong>${this.params.data.length}</strong>`;
+
+    // TODO paginazione record statici???
+  }
+
+  this.params.elements.info.innerHTML = info;
+}
+

package/src/web-components/TODO json-table/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/s-datatable-component/s-datatable-component.js

@@ -13,6 +13,8 @@ import caretRightIcon from '../../icons/caret-right.svg?inline';
  * Implementazione di simple-datatable (https://fiduswriter.github.io/simple-datatables/documentation/)
  * per generare una tabella da dati json e da un oggetto `cols` di configurazione
  *
+ * @deprecated Componente destinato alla dismissione
+ *
  * ─────────────────────────────────────────────────────────────────────────────
  * PARAMETRI
  * ─────────────────────────────────────────────────────────────────────────────
@@ -206,11 +208,23 @@ function resolveTemplate(tpl, row, { nullAs = '', warnColIdx } = {}) {
   return tpl;
 }
 
+let _deprecationWarned = false;
+
+/**
+ * @deprecated Componente destinato alla dismissione, verrà sostituito da `json-table`.
+ * Vedi la documentazione all'inizio del file per i dettagli.
+ */
 class SimpleDatatableAdapter extends HTMLElement {
   constructor() {
     super();
     // this.attachShadow({ mode: 'open' }); // commentare per light dom
 
+    if (!_deprecationWarned) {
+      _deprecationWarned = true;
+      // eslint-disable-next-line no-console
+      console.warn('[s-datatable] componente deprecato');
+    }
+
     this._config = null;
     this._initCalledProgrammatically = false;
     this._isConnected = false;