@massimo-cassandro/minimo 0.1.11 → 0.2.0

package/src/web-components/simple-datatable/simple-datatable.module.css

@@ -0,0 +1,214 @@
+/* frontend/src/web-components/simple-datatable.module.css */
+
+/* import delle custom properties gestito da jit-props */
+
+
+/* purgecss start ignore */
+
+/* .datatable-wrapper.no-header .datatable-container {
+	border-top: 1px solid #d9d9d9;
+} */
+.datatableWrapper {
+  margin-block: var(--size-md);
+}
+
+.topArea {
+  display: flex;
+  flex-flow: row nowrap;
+  /* gap: 1rem; */
+  align-items: center;
+  justify-content: flex-end;
+  padding-block-end: var(--size-xs);
+}
+
+.searchWrapper {
+  max-width: 50%;
+}
+
+.table {
+  margin-block: 0;
+  border-block: var(--_border); /* definito in minimo table */
+
+  thead {
+    th:has(.sortBtn) {
+      padding-inline-end: 0;
+    }
+  }
+
+}
+
+/* cella unica per indicare l'assenza di record */
+.empty {
+  /* stylelint-disable-next-line declaration-no-important */
+  padding: var(--size-sm) !important;
+  font-style: italic;
+  color: var(--text-muted);
+  /* stylelint-disable-next-line declaration-no-important */
+  text-align: center !important;
+}
+
+.hasIcon {
+  /* stylelint-disable-next-line declaration-no-important */
+  text-align: center !important;
+  svg {
+    display: inline-block;
+    width: 1.05em;
+  }
+}
+
+
+[data-sortable='true'] {
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--sdt-thead-hover-background-color);
+    }
+  }
+
+  .sortBtn {
+    padding: 0 1.5em 0 0;
+    &::after {
+      position: absolute;
+      top: 50%;
+      right: .1em;
+      display: block;
+      width: 1em;
+      height: 1em;
+      translate: 0 -50%;
+    }
+  }
+
+  &:not(.sortAscending):not(.sortDescending){
+    .sortBtn::after {
+      content: url('./icons/arrows-down-up.svg?cssInline');
+      opacity: .4;
+    }
+  }
+}
+.sortAscending {
+  .sortBtn::after {
+    content: url('./icons/arrow-up.svg?cssInline');
+  }
+}
+.sortDescending {
+  .sortBtn::after {
+    content: url('./icons/arrow-down.svg?cssInline');
+  }
+}
+
+.sortBtn {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+
+  padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
+  line-height: var(--table-cell-line-height);
+
+  text-align: start;
+}
+
+/* stylelint-disable selector-class-pattern */
+:global(.text-start), :global(.text-left) {
+  .sortBtn {
+    text-align: start;
+  }
+}
+:global(.text-end), :global(.text-right) {
+  .sortBtn {
+    text-align: end;
+  }
+}
+:global(.text-center) {
+  .sortBtn {
+    text-align: center;
+  }
+}
+/* stylelint-enable selector-class-pattern */
+
+.bottomArea {
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--size-md);
+  align-content: center;
+  align-items: center;
+  justify-content: space-between;
+  margin-block-start: var(--size-xs);
+}
+.info {
+  font-size: var(--font-size-sm);
+  font-style: italic;
+  color: var(--text-muted);
+}
+
+/* pagination */
+/* .paginationNav {} */
+.paginationList, .paginationListItem, .paginationListItemBtn {
+  padding: 0;
+  margin: 0;
+}
+
+.paginationList {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 0;
+  align-items: stretch;
+  justify-content: flex-start;
+  list-style: none;
+}
+.paginationListItem {
+  border: var(--sdt-pagination-border);
+  border-style: solid solid solid none;
+
+  &:first-child {
+    border-inline-start-style: solid;
+    border-radius: var(--radius-xxs) 0 0 var(--radius-xxs);
+  }
+  &:last-child {
+    border-radius: 0 var(--radius-xxs) var(--radius-xxs) 0;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--sdt-hover-color);
+      background-color: var(--sdt-hover-background-color);
+    }
+  }
+
+}
+
+.paginationDisabled {
+  pointer-events: none;
+
+  .paginationListItemBtn {
+    opacity: .7;
+  }
+}
+
+.paginationActive {
+  color: var(--sdt-hover-color);
+  background-color: var(--sdt-hover-background-color);
+}
+
+.paginationListItemBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--sdt-pagination-padding-block) var(--sdt-pagination-padding-inline);
+  color: inherit;
+  background-color: transparent;
+  border: none;
+
+  &.hasSvg {
+    padding-inline: calc(var(--sdt-pagination-padding-inline) / 2);
+  }
+
+  svg {
+    width: 1em;
+    aspect-ratio: 1;
+    fill: currentColor;
+  }
+}
+
+/* purgecss end ignore */

package/src/web-components/simple-datatable/src/parse-cols.js

@@ -0,0 +1,117 @@
+
+// pre-elaborazione tipi dati predefiniti
+// le chiavi che cominciano con '_' sono di questa applicazione, le altre sono di simple-datatable
+
+import { classnames } from '@massimo-cassandro/js-utilities/index.js';
+
+import * as styles from '../simple-datatable.module.css';
+
+import checkIcon from '../icons/check-bold.svg?inline';
+import xIcon from '../icons/x-bold.svg?inline';
+
+// col_obj è l'oggetto che descrive una singola colonna del datatable
+// vine utilizzato per produrre l'oggetto columns di simple-datatable
+export function parseCols(col_obj){
+
+
+  if(col_obj.render == null) {
+
+    // campi template
+    if(col_obj._renderTpl) {
+
+      return {
+        ...col_obj,
+        type: col_obj.type?? 'html',
+
+        // render: (value, cell /*, dataIndex, rowIndex */) => {
+
+        //   cell.attributes['data-order'] = value.replace(/(<([^>]+)>)/ig,'');
+        //   return value;
+        //   // non viene elaborato qui perché non è possibile raggiungere la riga del json
+        //   // return `<a href="${col_obj._href}">${value}</a>`;
+        // }
+
+      };
+
+    } else if(col_obj._renderMode === 'id') {
+
+      return {
+        ...col_obj,
+        type: 'number',
+        searchable: false,
+        cellClass: 'text-end',
+        headerClass: 'text-end',
+      };
+
+    } else if(col_obj._renderMode === 'email') {
+      return {
+        ...col_obj,
+        type: 'string',
+        render: value => value.text?.replace('@', '<wbr />@<wbr />')
+      };
+
+    // campi booleani
+    } else if (col_obj.type === 'boolean') {
+      // TODO caso in cui il valore è null nel caso si voglia differenziarlo da false
+
+      return {
+        ...col_obj,
+        cellClass: styles.hasIcon,
+        headerClass: 'text-center',
+        render: (value, td) => {
+
+          if(Boolean(value)) {
+            td.attributes.class = classnames(td.attributes.class, 'text-success');
+            return checkIcon;
+          } else {
+            td.attributes.class = classnames(td.attributes.class, 'text-danger');
+            return xIcon;
+          }
+        }
+      };
+
+    // gestione campi data symfony
+    } else if(col_obj._renderMode === 'sf_datetime') {
+      return {
+        ...col_obj,
+        type: 'string',
+        cellClass: 'text-end',
+        headerClass: 'text-end',
+
+        render: (value, cell /*, dataIndex, rowIndex */) => { // value si riferisce al valore già trasformato nella pre-elaborazione dei dati
+          /* {
+            "date": "2026-03-31 07:54:31.000000",
+            "timezone_type": 3,
+            "timezone": "UTC"
+          } */
+
+
+          if(value == null) {
+            cell.attributes['data-order'] = ' ';
+            return '\u2014';
+
+          } else {
+
+            cell.attributes['data-order'] = value;
+
+            const dateObj = new Date(value);
+
+            return `<span class="text-nowrap">${dateObj.toLocaleString('it-IT', {
+              year: '2-digit',
+              month: 'short',
+              day: 'numeric',
+            })}</span>` +
+            `\u2009<span class="text-xs">${dateObj.toLocaleString('it-IT', {
+              hour12: false,
+              hour:'2-digit',
+              minute:'2-digit'
+            })}</span>`;
+          }
+
+        }
+      };
+    }
+  } // end if not render
+
+  return col_obj;
+}

package/src/components/init.js

@@ -1,7 +0,0 @@
-import './modal-alert/flash-alerts.js';
-
-import '@minimo/utility/inner-nav.js';
-import '@minimo/utility/dismiss-alerts.js';
-
-
-

package/src/css/forms/form-edit-info.css

@@ -1,17 +0,0 @@
-/*
-<div class="form-edit-info" title="Ultima modifica effettuata da Gino Bianchi il xxxx">
-  <span>13 Aug 2025 <small>11:54</small></span>
-  <span>Gino Bianchi</span>
-</div>
-*/
-
-.form-edit-info {
-  display: flex;
-  flex-flow: row wrap;
-  gap: .5rem;
-  /* align-content: flex-start; */ /* multiline container */
-  align-items: center;
-  justify-content: flex-end;
-  font-size: var(--font-size-xxs);
-  color: var(--text-muted-color);
-}