@massimo-cassandro/minimo 0.15.0 → 0.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "0.15.0",
+  "version": "0.16.1",
   "description": "Light css framework & utilities",
   "type": "module",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",

package/src/css/utilities.css

@@ -13,6 +13,9 @@
   border: 0 !important;
   clip-path: rect(0 0 0 0) !important;
 }
+.visibility-hidden {
+  visibility: hidden;
+}
 /* purgecss end ignore */
 
 .overflow-hidden {

package/src/web-components/s-datatable-component/docs.md

@@ -222,6 +222,32 @@ cols: [
                    //   cerca su entrambi i campi concatenati; "rossi mario" trova solo
                    //   le righe che contengono entrambe le parole, in qualsiasi ordine.
 
+    _footerRender, // Callback o stringa per il contenuto della cella nel <tfoot>.
+                   // Il <tfoot> (una sola riga) viene aggiunto automaticamente se
+                   // almeno una colonna definisce questa proprietà; le colonne senza
+                   // _footerRender producono una <td> vuota.
+                   //
+                   // Accetta:
+                   //   - funzione (data) => string
+                   //     `data` è l'array dei record da considerare per il calcolo.
+                   //     Il contenuto di `data` dipende dall'opzione `updateFooterOnPageChange`
+                   //     del componente (default false = dataset filtrato completo,
+                   //     indipendente dalla pagina corrente).
+                   //   - stringa statica (es. etichetta fissa "Totale:")
+                   //
+                   // La cella eredita le classi CSS di allineamento della colonna
+                   // (cellClass / headerClass), in modo da risultare visivamente coerente.
+                   //
+                   // Aggiornamenti automatici:
+                   //   - sempre: al cambio di filtro (ricerca / multisearch)
+                   //   - solo se updateFooterOnPageChange: true: al cambio di pagina
+                   //
+                   // Esempio – somma di una colonna numerica:
+                   //   _footerRender: (data) => {
+                   //     const tot = data.reduce((s, r) => s + (r.importo ?? 0), 0);
+                   //     return `<strong>${tot.toLocaleString('it-IT')} €</strong>`;
+                   //   }
+
     // ── Proprietà native simple-datatables (senza prefisso _) ────────────
 
     type,          // Tipo di dato: 'string' | 'number' | 'date' | 'boolean' | 'html' | 'other'
@@ -257,3 +283,122 @@ const cols = [
   }
 ];
 ```
+
+### Esempio con tfoot – somma e conteggio
+
+```javascript
+// updateFooterOnPageChange: false (default) – il footer mostra il totale del set filtrato,
+// indipendente dalla pagina. Non si aggiorna al cambio pagina.
+const el = document.querySelector('s-datatable');
+el.init({
+  json: '/api/commesse.json',
+  cols: [
+    {
+      _field: 'commessa',
+      _heading: 'Commessa',
+      _footerRender: '<strong>Totale:</strong>',   // etichetta fissa
+    },
+    {
+      _field: 'importo',
+      _heading: 'Importo',
+      type: 'number',
+      cellClass: 'text-end',
+      headerClass: 'text-end',
+      // data = tutti i record filtrati (intera ricerca, non solo la pagina corrente)
+      _footerRender: (data) => {
+        const tot = data.reduce((s, r) => s + (r.importo ?? 0), 0);
+        return `<strong>${tot.toLocaleString('it-IT', { style: 'currency', currency: 'EUR' })}</strong>`;
+      },
+    },
+    {
+      _field: 'stato',
+      _heading: 'Stato',
+      _footerRender: (data) => `${data.length} record`,
+    },
+  ],
+});
+
+// updateFooterOnPageChange: true – il footer mostra il subtotale della sola pagina corrente.
+// Si aggiorna sia al cambio filtro sia al cambio pagina.
+el.init({
+  json: '/api/commesse.json',
+  updateFooterOnPageChange: true,
+  cols: [ /* stesse colonne di sopra */ ],
+});
+```
+
+Il `<tfoot>` viene aggiunto solo se almeno una colonna definisce `_footerRender`.
+
+Con `updateFooterOnPageChange: false` (default) la callback riceve l'intero set filtrato: i totali
+non cambiano navigando tra le pagine e si aggiornano solo quando cambia la ricerca.
+
+Con `updateFooterOnPageChange: true` la callback riceve i record della pagina corrente: utile per
+subtotali di pagina; il footer si aggiorna sia al cambio filtro sia al cambio pagina.
+
+## Testo info
+
+Il componente sovrascrive il testo dell'area informativa (in basso a sinistra) per includere
+sempre il numero totale assoluto di record, distinto dal conteggio filtrato.
+
+Senza ricerca attiva:
+
+> Stai visualizzando le righe da 1 a 25, su un totale di 100.
+
+Con ricerca attiva:
+
+> Stai visualizzando le righe da 1 a 25 dei 50 record filtrati, su un totale di 100.
+
+Ricerca senza risultati:
+
+> Nessun risultato per la ricerca corrente (totale record: 100).
+
+Il testo si aggiorna automaticamente ad ogni cambio pagina, ricerca e multisearch.
+
+## Parametri `topSlot` e `showInfoAtTop`
+
+Entrambi occupano l'area in alto a sinistra del datatable — lo spazio normalmente
+riservato al selettore "righe per pagina" (qui disabilitato). I due parametri si
+escludono: se `showInfoAtTop` è `true`, `topSlot` viene ignorato.
+
+### `showInfoAtTop`
+
+Replica nell'area superiore lo stesso testo dell'area `.info` in basso,
+mantenuto in sincronia ad ogni cambio pagina o filtro. Il nodo viene nascosto
+automaticamente quando non ci sono record o la ricerca non produce risultati
+(evita di mostrare "Nessun risultato…" in due posti).
+
+```javascript
+el.init({
+  json: '/api/data.json',
+  cols: [...],
+  showInfoAtTop: true,
+});
+```
+
+### `topSlot`
+
+Inserisce un elemento DOM o markup HTML arbitrario, avvolto in un
+`<div class="datatable-top-slot">`. Accetta sia una stringa HTML che un `Element`
+già costruito (utile per mantenere un riferimento al nodo e aggiungervi listener).
+Non è leggibile da attributo HTML, solo via `init()`.
+
+```javascript
+// Stringa HTML
+el.init({
+  json: '/api/data.json',
+  cols: [...],
+  topSlot: '<button class="btn btn-sm btn-primary">Esporta CSV</button>',
+});
+
+// Elemento DOM
+const btn = document.createElement('button');
+btn.className = 'btn btn-sm btn-outline-secondary';
+btn.textContent = 'Nuova commessa';
+btn.addEventListener('click', () => { /* … */ });
+
+el.init({
+  json: '/api/commesse.json',
+  cols: [...],
+  topSlot: btn,
+});
+```

package/src/web-components/s-datatable-component/s-datatable-component.js

@@ -9,7 +9,7 @@ import caretRightIcon from '../../icons/caret-right.svg?inline';
 
 
 /**
- * Impementazione di simple-datatable (https://fiduswriter.github.io/simple-datatables/documentation/)
+ * 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
  *
  * ─────────────────────────────────────────────────────────────────────────────
@@ -42,6 +42,16 @@ import caretRightIcon from '../../icons/caret-right.svg?inline';
  *                                           - funzione `(row) => string`
  *                                           - se sono impostate sia `_cellRender` che l'opzione `render` di simple-datatable
  *                                             quest'ultima viene annullata per evitare potenziali conflitti
+ * @property {string|Function} [_footerRender] Contenuto della cella <td> nel <tfoot> per questa colonna.
+ *                                           Accetta:
+ *                                           - funzione `(data) => string` dove `data` è l'array dei
+ *                                             record visibili (filtrati dalla ricerca corrente, ma non
+ *                                             limitati alla pagina attuale): ideale per somme, medie, conteggi.
+ *                                           - stringa statica (es. etichetta fissa "Totale:")
+ *                                           Le colonne senza `_footerRender` producono una <td> vuota.
+ *                                           Il <tfoot> viene aggiunto solo se almeno una colonna lo definisce.
+ *                                           La cella eredita le classi CSS (allineamento) della colonna.
+ *
  * @property {string|Function} [_sortValue]   Percorso del campo da usare per l'ORDINAMENTO al posto
  *                                           del contenuto visualizzato, oppure una funzione
  *                                           `(row) => string|number` per casi complessi
@@ -89,6 +99,32 @@ import caretRightIcon from '../../icons/caret-right.svg?inline';
  *                                           colonna con `_renderNullAs`.
  *                                           Default: `\u2014` (em dash)
  *
+ * @param {boolean}       updateFooterOnPageChange     Se true, la callback `_footerRender` riceve i soli record
+ *                                           della pagina corrente (subtotale di pagina). Se false
+ *                                           (default), riceve l'intero set filtrato indipendentemente
+ *                                           dalla paginazione (totale complessivo).
+ *                                           Quando è false il footer si aggiorna solo al cambio di
+ *                                           filtro, non al cambio pagina.
+ *
+ * @param {Element|string} topSlot          Elemento DOM o stringa HTML da inserire nell'area in alto
+ *                                           a sinistra del datatable (lo spazio del selettore righe/pagina,
+ *                                           qui disabilitato). Utile per pulsanti contestuali, filtri
+ *                                           aggiuntivi o qualsiasi controllo da affiancare alla search box.
+ *                                           Viene avvolto in un `<div class="datatable-top-slot">`.
+ *                                           Accetta:
+ *                                           - `Element`: un nodo DOM già costruito
+ *                                           - stringa HTML: parsata via innerHTML
+ *                                           Ignorato se `showInfoAtTop` è true.
+ *                                           Non è leggibile da attributo HTML (solo via script).
+ *
+ * @param {boolean}        showInfoAtTop    Se true, mostra nell'area superiore (spazio top-sinistra)
+ *                                           lo stesso testo dell'area `.info` in basso, mantenuto in
+ *                                           sync ad ogni cambio pagina/filtro. Il nodo viene nascosto
+ *                                           automaticamente quando non ci sono record o la ricerca
+ *                                           non produce risultati. Ha precedenza su `topSlot`:
+ *                                           se entrambi sono definiti, `topSlot` viene ignorato.
+ *                                           Default: false.
+ *
  * @param {string[]}      refs  Elenco di percorsi URL da cui, se si proviene,
  *                                           la pagina corrente viene ripristinata dal cookie
  *                                           di sessione `sd-pag`. Se il referrer non è tra
@@ -597,6 +633,10 @@ class SimpleDatatableAdapter extends HTMLElement {
         })
       }));
 
+      // Conserva i dati grezzi e le definizioni di colonna per il tfoot
+      this._rawData    = rawData;
+      this._footerCols = cols;
+
       this.columns = cols.map((col_settings, idx) => {
         col_settings = parseCols(col_settings);
 
@@ -729,24 +769,25 @@ class SimpleDatatableAdapter extends HTMLElement {
     });
 
     this._dt.on('datatable.init', () => {
+      // ── Icone paginazione ─────────────────────────────────────────────────
       const pagination = this.querySelector(`.${styles.paginationList}`);
-      if (!pagination) return;
-
-      const items = pagination.querySelectorAll(`.${styles.paginationListItem}`);
-      if (!items.length) return;
-
-      pagination.querySelector(
-        `.${styles.paginationListItem}:first-child .${styles.paginationListItemBtn}`
-      ).innerHTML = caretLeftIcon;
-
-      pagination.querySelector(
-        `.${styles.paginationListItem}:last-child .${styles.paginationListItemBtn}`
-      ).innerHTML = caretRightIcon;
-
-      pagination.querySelectorAll(`.${styles.paginationListItemBtn}:has(svg)`)
-        .forEach(btn => btn.classList.add(styles.hasSvg));
+      if (pagination) {
+        const items = pagination.querySelectorAll(`.${styles.paginationListItem}`);
+        if (items.length) {
+          pagination.querySelector(
+            `.${styles.paginationListItem}:first-child .${styles.paginationListItemBtn}`
+          ).innerHTML = caretLeftIcon;
+
+          pagination.querySelector(
+            `.${styles.paginationListItem}:last-child .${styles.paginationListItemBtn}`
+          ).innerHTML = caretRightIcon;
+
+          pagination.querySelectorAll(`.${styles.paginationListItemBtn}:has(svg)`)
+            .forEach(btn => btn.classList.add(styles.hasSvg));
+        }
+      }
 
-      // Ripristino pagina dal cookie di sessione (se referrer autorizzato)
+      // ── Ripristino pagina dal cookie di sessione (se referrer autorizzato) ─
       // const isRefUrl = this._isReferrer(), refsCallback = this._getParam('refsCallback', null);
       // if (isRefUrl) {
       if (this._isReferrer()) {
@@ -762,6 +803,7 @@ class SimpleDatatableAdapter extends HTMLElement {
       //   refsCallback(isRefUrl);
       // }
 
+      // ── Filtro contestuale post-reload ────────────────────────────────────
       // Applica eventuale filtro contestuale passato via reload({ search: … })
       // Lo facciamo qui, dentro datatable.init, per essere certi che
       // simple-datatables abbia completato il render dei nuovi dati.
@@ -775,15 +817,254 @@ class SimpleDatatableAdapter extends HTMLElement {
           this._dt.search(ps.term, ps.columns);
         }
       }
+
+      // ── Tfoot, info, top slot ─────────────────────────────────────────────
+      // Eseguiti sempre, indipendentemente dalla presenza della paginazione.
+      this._renderTfoot();
+      this._injectTopSlot();   // va prima di _updateInfo per creare il nodo top-info
+      this._updateInfo();
     });
 
-    // Salva la pagina corrente nel cookie ad ogni cambio di pagina
+    // Salva la pagina corrente nel cookie ad ogni cambio di pagina;
+    // aggiorna il tfoot solo se updateFooterOnPageChange è attivo.
     this._dt.on('datatable.page', page => {
       this._savePageCookie(page);
+      if (this._getParam('updateFooterOnPageChange', false)) this._renderTfoot();
+      this._updateInfo();
     });
 
+    // Aggiorna il tfoot ad ogni cambio di filtro (ricerca / multisearch).
+    // Il sort non altera il set filtrato: il footer non deve cambiare.
+    this._dt.on('datatable.search',      () => { this._renderTfoot(); this._updateInfo(); });
+    this._dt.on('datatable.multisearch', () => { this._renderTfoot(); this._updateInfo(); });
+
   } // end _render
 
+
+  // ─── Footer (tfoot) ──────────────────────────────────────────────────────────
+
+  /**
+   * Costruisce o aggiorna la riga <tfoot> della tabella.
+   *
+   * Chiamato dopo il render iniziale, ad ogni cambio di filtro (ricerca /
+   * multisearch) e — se `updateFooterOnPageChange` è true — anche ad ogni cambio pagina.
+   *
+   * Dataset passato alla callback `_footerRender(data)`:
+   *
+   *   updateFooterOnPageChange: false (default)
+   *     → l'intero set filtrato, indipendente dalla pagina corrente.
+   *       I totali non cambiano navigando tra le pagine.
+   *       Se non c'è ricerca attiva, viene passato il dataset completo.
+   *
+   *   updateFooterOnPageChange: true
+   *     → solo i record della pagina corrente.
+   *       Utile per subtotali di pagina.
+   *
+   * `searchData` di simple-datatables è un array di indici nel dataset
+   * originale, disponibile (e non vuoto) solo quando `dt.searching === true`.
+   * Quando la ricerca è attiva ma non trova nulla, `searchData` è `[]`:
+   * in quel caso la callback riceve un array vuoto, non il dataset completo.
+   */
+  _renderTfoot() {
+    const cols    = this._footerCols;
+    const rawData = this._rawData;
+
+    if (!cols?.length || !rawData) return;
+
+    const hasFooter = cols.some(c => c._footerRender != null);
+    if (!hasFooter) return;
+
+    const table = this.querySelector('table');
+    if (!table) return;
+
+    const dt           = this._dt;
+    const updateFooterOnPageChange = this._getParam('updateFooterOnPageChange', false);
+
+    let visibleData;
+
+    if (updateFooterOnPageChange) {
+      // Dati della pagina corrente: ogni "pagina" in dt.pages è un array
+      // di oggetti riga; ciascuno ha una proprietà data-index che punta
+      // all'indice nel dataset originale.
+      const pageRows = dt.pages?.[dt.currentPage - 1] ?? [];
+      visibleData = pageRows
+        .map(row => rawData[row['data-index']])
+        .filter(Boolean);
+    } else {
+      // Dataset filtrato completo (ignorando la paginazione).
+      // dt.searching è true solo quando c'è una ricerca attiva;
+      // in quel caso searchData contiene gli indici dei match (può essere []).
+      visibleData = dt.searching
+        ? dt.searchData.map(idx => rawData[idx]).filter(Boolean)
+        : rawData;
+    }
+
+    // Riutilizza tfoot esistente o ne crea uno nuovo
+    let tfoot = table.querySelector('tfoot');
+    if (!tfoot) {
+      tfoot = document.createElement('tfoot');
+      table.appendChild(tfoot);
+    }
+
+    const tr = document.createElement('tr');
+
+    cols.forEach(col => {
+      const td = document.createElement('td');
+
+      if (col._footerRender != null) {
+        if (typeof col._footerRender === 'function') {
+          td.innerHTML = col._footerRender(visibleData) ?? '';
+        } else {
+          // Stringa statica (es. etichetta fissa "Totale:")
+          td.innerHTML = col._footerRender;
+        }
+      }
+
+      // Propaga le classi di allineamento della colonna per coerenza visiva
+      const cellClass = col.cellClass ?? col.headerClass ?? '';
+      if (cellClass) td.className = cellClass;
+
+      tr.appendChild(td);
+    });
+
+    tfoot.replaceChildren(tr);
+  }
+
+  // ─── Info label ──────────────────────────────────────────────────────────────
+
+  /**
+   * Sovrascrive il testo dell'area `.info` generato da simple-datatables per
+   * includere sempre il totale assoluto dei record (indipendente dal filtro).
+   * Se `showInfoAtTop` è attivo, aggiorna in sincronia anche il nodo `.info`
+   * nell'area superiore (creato da `_injectTopSlot`).
+   *
+   * Calcolo di start/end: si conta il numero di righe renderizzate nel tbody
+   * (`dt.pages[currentPage - 1]`) invece di fare aritmetica su perPage,
+   * perché `dt.currentPage` può essere undefined al primo render.
+   *
+   * Comportamento:
+   *   - Senza ricerca attiva:
+   *       "Stai visualizzando le righe da {start} a {end}, su un totale di {total}."
+   *   - Con ricerca attiva (risultati > 0):
+   *       "Stai visualizzando le righe da {start} a {end} dei {filtered} record
+   *        filtrati, su un totale di {total}."
+   *   - Nessun risultato (ricerca attiva, 0 match):
+   *       "Nessun risultato per la ricerca corrente (totale record: {total})."
+   *
+   * Il nodo top-info viene nascosto quando filtered = 0 o total = 0.
+   */
+  _updateInfo() {
+    const infoEl    = this.querySelector(`.${styles.info}`);
+    const topInfoEl = this.querySelector('.datatable-top-info');
+
+    if (!infoEl && !topInfoEl) return;
+
+    const dt       = this._dt;
+    const total    = this._rawData?.length ?? 0;
+    const filtered = dt.searching ? dt.searchData.length : total;
+
+    let text;
+
+    if (total === 0 || (filtered === 0 && dt.searching)) {
+      // Nessun risultato — nasconde il nodo top-info se presente
+      if (topInfoEl) topInfoEl.hidden = true;
+
+      text = filtered === 0 && dt.searching
+        ? `Nessun risultato per la ricerca corrente (totale record: ${total}).`
+        : `Nessun record trovato.`;
+
+      if (infoEl) infoEl.textContent = text;
+      return;
+    }
+
+    // Calcola start/end dalla pagina corrente in dt.pages (più affidabile di
+    // currentPage * perPage, che può dare NaN se currentPage è undefined
+    // al primo render oppure quando non c'è paginazione).
+    const currentPage  = dt.currentPage ?? 1;
+    const pageRows     = dt.pages?.[currentPage - 1] ?? [];
+    const perPage      = dt.options?.perPage ?? filtered;
+    const start        = pageRows.length > 0
+      ? (currentPage - 1) * perPage + 1
+      : 1;
+    const end          = pageRows.length > 0
+      ? start + pageRows.length - 1
+      : filtered;
+
+    if (dt.searching) {
+      text =
+        `Stai visualizzando le righe da ${start} a ${end} ` +
+        `dei ${filtered} record filtrati, su un totale di ${total}.`;
+    } else {
+      text =
+        `Stai visualizzando le righe da ${start} a ${end}, ` +
+        `su un totale di ${total}.`;
+    }
+
+    if (infoEl)    infoEl.textContent    = text;
+    if (topInfoEl) { topInfoEl.textContent = text; topInfoEl.hidden = false; }
+  }
+
+
+  // ─── Top slot ────────────────────────────────────────────────────────────────
+
+  /**
+   * Inietta nell'area in alto a sinistra del datatable il contenuto configurato.
+   *
+   * Modalità:
+   *
+   *   showInfoAtTop: true  (ha precedenza su topSlot)
+   *     Inserisce un nodo `.datatable-top-info` con la stessa stringa dell'area
+   *     `.info` in basso, mantenuta in sync da `_updateInfo`. Viene nascosto
+   *     automaticamente quando filtered = 0 o total = 0.
+   *     Il parametro `topSlot`, se presente, viene ignorato.
+   *
+   *   topSlot: Element | string  (usato solo se showInfoAtTop è false/assente)
+   *     Inserisce un elemento DOM o markup HTML arbitrario, avvolto in un
+   *     `<div class="datatable-top-slot">`.
+   *
+   * In entrambi i casi l'elemento viene inserito come primo figlio di `.topArea`,
+   * prima della search box.
+   *
+   * Esempi:
+   *   el.init({ showInfoAtTop: true });
+   *
+   *   el.init({ topSlot: '<button class="btn btn-sm btn-primary">Esporta</button>' });
+   *
+   *   const btn = document.createElement('button');
+   *   btn.textContent = 'Nuovo';
+   *   el.init({ topSlot: btn });
+   */
+  _injectTopSlot() {
+    const topArea = this.querySelector(`.${styles.topArea}`);
+    if (!topArea) return;
+
+    const showInfoAtTop = this._getParam('showInfoAtTop', false);
+
+    if (showInfoAtTop) {
+      // Crea il nodo info top (il testo verrà scritto da _updateInfo)
+      const infoTop = document.createElement('div');
+      infoTop.className = `datatable-top-info ${styles.info}`;
+      infoTop.hidden = true;   // nascosto finché _updateInfo non lo popola
+      topArea.insertBefore(infoTop, topArea.firstChild);
+      return;
+    }
+
+    const topSlot = this._getParam('topSlot', null);
+    if (topSlot == null) return;
+
+    const wrapper = document.createElement('div');
+    wrapper.className = 'datatable-top-slot';
+
+    if (topSlot instanceof Element) {
+      wrapper.appendChild(topSlot);
+    } else {
+      wrapper.innerHTML = topSlot;
+    }
+
+    topArea.insertBefore(wrapper, topArea.firstChild);
+  }
+
+
 } // end component
 
 

package/src/web-components/s-datatable-component/src/parse-cols.js

@@ -110,6 +110,15 @@ export function parseCols(col_obj){
 
         }
       };
+
+    // TODO completare, aggiungere formattazione
+    } else if(col_obj._renderMode === 'numeric') {
+      return {
+
+        cellClass: 'text-end text-numeric',
+        headerClass: 'text-end',
+      };
+
     }
   } // end if not render