Merge remote-tracking branch 'origin/main' into feat/investments

frontend/src/js/select.js

@@ -3,6 +3,31 @@ import * as Popper from "@popperjs/core";
 import '../styles/_tom-select.scss'
 
 
+// Mini version of cotton/transaction/item.html, used by TransactionSelect
+function renderTransaction(data, escape, compact) {
+    if (!data.date) {
+        return `<div>${escape(data.text)}</div>`;
+    }
+    const kind = data.type === 'EX' ? 'expense' : 'income';
+    const meta = [
+        data.category && `<span><i class="fa-solid fa-icons fa-fw"></i>${escape(data.category)}</span>`,
+        data.tags && data.tags.length && `<span><i class="fa-solid fa-hashtag fa-fw"></i>${escape(data.tags.join(', '))}</span>`,
+        data.entities && data.entities.length && `<span><i class="fa-solid fa-user-group fa-fw"></i>${escape(data.entities.join(', '))}</span>`,
+    ].filter(Boolean).join('');
+    return `<div class="ts-tx ts-tx-${kind}${compact ? ' ts-tx-compact' : ''}">
+        <i class="ts-tx-paid fa-regular ${data.is_paid ? 'fa-circle-check' : 'fa-circle'}"></i>
+        <div class="ts-tx-main">
+            <div class="ts-tx-date"><i class="fa-solid fa-calendar fa-fw"></i>${escape(data.date)}</div>
+            <div class="ts-tx-desc">${escape(data.description || '')}</div>
+            ${meta && !compact ? `<div class="ts-tx-meta">${meta}</div>` : ''}
+        </div>
+        <div class="ts-tx-side">
+            <div class="ts-tx-amount text-${kind}">${escape(data.amount)}</div>
+            <div class="ts-tx-account">${escape(data.account)}</div>
+        </div>
+    </div>`;
+}
+
 window.TomSelect = function createDynamicTomSelect(element) {
     const schedulePopperUpdate = function (instance) {
         // Wait for TomSelect DOM updates before recalculating dropdown position.
@@ -98,12 +123,25 @@ window.TomSelect = function createDynamicTomSelect(element) {
         };
     }
 
+    if (element.dataset.render === 'transaction') {
+        config.dataAttr = 'data'; // dataset key of the data-data attribute
+        config.render.option = (data, escape) => renderTransaction(data, escape, false);
+        config.render.item = (data, escape) => renderTransaction(data, escape, true);
+    }
+
     if (element.dataset.load) {
+        // The server searches and orders; don't let tom-select re-filter or re-sort the results
+        config.score = () => () => 1;
+        config.sortField = [{field: '$order'}];
+        config.preload = 'focus';
+        config.shouldLoad = () => true;
         config.load = function (query, callback) {
             let url = element.dataset.load + '?q=' + encodeURIComponent(query);
             fetch(url)
                 .then(response => response.json())
                 .then(json => {
+                    // Drop results from the previous query, keeping the selected item
+                    this.clearOptions();
                     callback(json);
                 }).catch(() => {
                     callback();

frontend/src/styles/_tom-select.scss

@@ -399,3 +399,98 @@
 .tomselect-checkbox {
   margin-right: 0.5rem;
 }
+
+/* Mini transaction (TransactionSelect) */
+.ts-tx {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  min-width: 0;
+  padding: 0.375rem 0.5rem;
+  border-left: 4px solid var(--color-success);
+  border-radius: var(--radius-field, 0.25rem);
+  background-color: var(--color-base-100);
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  text-align: left;
+}
+
+.ts-tx-expense {
+  border-left-color: var(--color-error);
+}
+
+.ts-tx-paid {
+  color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
+  font-size: 1.125rem;
+}
+
+.ts-tx-main,
+.ts-tx-side {
+  min-width: 0;
+}
+
+.ts-tx-main {
+  flex: 1 1 auto;
+}
+
+.ts-tx-side {
+  flex: 0 1 auto;
+  max-width: 45%;
+  text-align: right;
+}
+
+.ts-tx-date,
+.ts-tx-meta,
+.ts-tx-account {
+  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+  font-size: 0.75rem;
+}
+
+.ts-tx i.fa-fw {
+  margin-right: 0.25rem;
+  font-size: 0.625rem;
+}
+
+.ts-tx-desc {
+  color: var(--color-base-content);
+  font-size: 0.875rem;
+}
+
+.ts-tx-meta {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 0.75rem;
+}
+
+.ts-tx-amount {
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.ts-tx-desc,
+.ts-tx-account {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Selected value inside the control: no card chrome, leave room for the clear button and arrow */
+.ts-control .ts-tx-compact {
+  padding: 0 1.5rem 0 0.5rem;
+  background: transparent;
+}
+
+.ts-dropdown .option:has(.ts-tx) {
+  padding: 0.25rem 0.375rem;
+}
+
+.ts-dropdown .active .ts-tx {
+  background-color: transparent;
+}
+
+.ts-control > .item:has(.ts-tx) {
+  flex: 1 1 auto;
+  min-width: 0;
+}