Merge pull request #73 from ya-erm/dev

Coment suggestions
ya-erm · Oct 27, 2024 · b143a36 · b143a36
2 parents 1bec178 + acf816d
commit b143a36
Show file tree

Hide file tree

Showing 11 changed files with 2,238 additions and 3,121 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "2.9.2",
+  "version": "2.9.3",
   "private": true,
   "scripts": {
     "dev": "vite dev",
@@ -21,43 +21,43 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.1.0",
-    "@iconify/json": "^2.2.242",
+    "@iconify/json": "^2.2.260",
     "@iconify/svelte": "^4.0.2",
-    "@iconify/utils": "^2.1.32",
-    "@playwright/test": "^1.46.1",
-    "@sveltejs/adapter-auto": "^3.2.4",
-    "@sveltejs/adapter-node": "^5.2.2",
-    "@sveltejs/kit": "^2.5.25",
+    "@iconify/utils": "^2.1.33",
+    "@playwright/test": "^1.48.0",
+    "@sveltejs/adapter-auto": "^3.2.5",
+    "@sveltejs/adapter-node": "^5.2.6",
+    "@sveltejs/kit": "^2.7.0",
     "@types/bcrypt": "^5.0.2",
     "@types/uuid": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "8.3.0",
-    "@typescript-eslint/parser": "^8.3.0",
-    "@vite-pwa/sveltekit": "^0.6.1",
+    "@typescript-eslint/eslint-plugin": "8.9.0",
+    "@typescript-eslint/parser": "^8.9.0",
+    "@vite-pwa/sveltekit": "^0.6.5",
     "autoprefixer": "^10.4.20",
     "dotenv": "^16.4.5",
-    "eslint": "^9.9.1",
+    "eslint": "^9.12.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.43.0",
-    "globals": "^15.9.0",
+    "eslint-plugin-svelte": "^2.44.1",
+    "globals": "^15.11.0",
     "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.6",
-    "prisma": "^5.19.0",
+    "prettier-plugin-svelte": "^3.2.7",
+    "prisma": "^5.20.0",
     "svelte": "^4.2.19",
     "svelte-chartjs": "^3.1.5",
-    "svelte-check": "^3.8.6",
+    "svelte-check": "^4.0.5",
     "svelte-i18n": "^4.0.0",
-    "svelte-preprocess": "^6.0.2",
+    "svelte-preprocess": "^6.0.3",
     "tslib": "^2.7.0",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.6"
+    "typescript": "^5.6.3",
+    "vite": "^5.4.9"
   },
   "dependencies": {
-    "@prisma/client": "^5.19.0",
+    "@prisma/client": "^5.20.0",
     "@vercel/analytics": "^1.3.1",
     "bcrypt": "^5.1.1",
     "dayjs": "^1.11.13",
     "idb": "^8.0.0",
-    "svelte-dnd-action": "^0.9.50",
+    "svelte-dnd-action": "^0.9.51",
     "timezones-list": "^3.0.3",
     "uuid": "^10.0.0"
   },

diff --git a/src/lib/data/operations.ts b/src/lib/data/operations.ts
@@ -1,11 +1,10 @@
 import dayjs from 'dayjs';
-import { derived, get } from 'svelte/store';
+import { derived, get, type Readable } from 'svelte/store';
 
 import { translate } from '$lib/translate';
 import { showErrorToast } from '$lib/ui/toasts';
 import { Logger } from '$lib/utils/logger';
 
-import { store } from '$lib/store';
 import { accountsService, accountsStore } from './accounts';
 import {
   SYSTEM_CATEGORY_TRANSFER_IN,
@@ -21,22 +20,27 @@ import { BaseService } from './service';
 const logger = new Logger('OperationsService', { disabled: false });
 
 export class OperationsService extends BaseService<Transaction> {
-  private _operations = store<TransactionViewModel[]>([]);
+  private _operations: Readable<TransactionViewModel[]>;
+  private _comments: Readable<string[]>;
   private _errorToastShown = false;
 
   get $operations() {
     return this._operations;
   }
 
+  get $comments() {
+    return this._comments;
+  }
+
   constructor() {
     super('OperationsService', 'transactions', 'transaction');
 
     accountsService.deleteAccountOperations = this.deleteTransactionsByAccount;
 
-    derived(
+    this._operations = derived(
       [this.$items, $initialized, accountsStore, categoriesStore, operationTagsStore],
       ([transactions, initialized, accounts, _categories, tags]) => {
-        if (!initialized) return null;
+        if (!initialized) return [];
 
         const categories = _categories.concat(SYSTEM_CATEGORY_TRANSFER_IN, SYSTEM_CATEGORY_TRANSFER_OUT);
 
@@ -125,9 +129,11 @@ export class OperationsService extends BaseService<Transaction> {
 
         return items;
       },
-    ).subscribe((items) => {
-      if (items) this._operations.set(items);
-    });
+    );
+
+    this._comments = derived(this.$operations, (items) =>
+      Array.from(new Set(items.map((item) => item.comment?.trim()).filter(Boolean) as string[])),
+    );
   }
 
   deleteTransactionsByAccount(accountId: string): void {
@@ -140,3 +146,4 @@ export class OperationsService extends BaseService<Transaction> {
 export const operationsService = new OperationsService();
 
 export const operationsStore = operationsService.$operations;
+export const operationsCommentsStore = operationsService.$comments;
diff --git a/src/lib/ui/Icon.svelte b/src/lib/ui/Icon.svelte
@@ -15,7 +15,7 @@
 
 <span class="icon-container" style:padding={_padding}>
   <span style:width={_width} style:height={_height}>
-    <Icon icon={name} width={_width} height={_height} {color} inline />
+    <Icon icon={name} style={`width:${_width}; height: ${_height}`} {color} inline />
   </span>
 </span>
 

diff --git a/src/lib/ui/header/HeaderFormSubmitButton.svelte b/src/lib/ui/header/HeaderFormSubmitButton.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { translate } from '$lib/translate';
+  import Button from '$lib/ui/Button.svelte';
+
+  const handleSave = () => {
+    const form = document.querySelector('form');
+    const submitButton = form?.querySelector("button[type='submit']") as HTMLButtonElement;
+    if (submitButton) {
+      submitButton.click();
+    } else {
+      form?.dispatchEvent(new Event('submit'));
+    }
+  };
+</script>
+
+<Button appearance="transparent" on:click={handleSave} text={$translate('common.done')} />
diff --git a/src/routes/accounts/GroupedOperationsList.svelte b/src/routes/accounts/GroupedOperationsList.svelte
@@ -8,11 +8,11 @@
   import { translate } from '$lib/translate';
   import Layout from '$lib/ui/Layout.svelte';
   import Portal from '$lib/ui/Portal.svelte';
+  import HeaderFormSubmitButton from '$lib/ui/header/HeaderFormSubmitButton.svelte';
   import { findCurrencyRate, getSearchParam, setSearchParam } from '$lib/utils';
 
   import TransactionListItem from '../transactions/TransactionListItem.svelte';
   import EditTransaction from '../transactions/edit/EditTransaction.svelte';
-  import SaveTransactionButton from '../transactions/edit/SaveTransactionButton.svelte';
 
   $: currencyRates = $currencyRatesStore;
   $: settings = $memberSettingsStore;
@@ -55,7 +55,7 @@
         onClick: closeOperationForm,
       },
       leftButton: null,
-      rightButton: SaveTransactionButton,
+      rightButton: HeaderFormSubmitButton,
       title: $translate('transactions.edit_transaction'),
     }}
   >

diff --git a/src/routes/transactions/TransactionList.svelte b/src/routes/transactions/TransactionList.svelte
@@ -9,11 +9,11 @@
   import Layout from '$lib/ui/Layout.svelte';
   import Portal from '$lib/ui/Portal.svelte';
   import ShowMoreContainer from '$lib/ui/ShowMoreContainer.svelte';
+  import HeaderFormSubmitButton from '$lib/ui/header/HeaderFormSubmitButton.svelte';
   import { findCurrencyRate, getSearchParam, setSearchParam } from '$lib/utils';
 
   import TransactionListItem from './TransactionListItem.svelte';
   import EditTransaction from './edit/EditTransaction.svelte';
-  import SaveTransactionButton from './edit/SaveTransactionButton.svelte';
 
   export let transactions: TransactionViewModel[];
   export let hideAccount: boolean = false;
@@ -61,7 +61,7 @@
         onClick: closeOperationForm,
       },
       leftButton: null,
-      rightButton: SaveTransactionButton,
+      rightButton: HeaderFormSubmitButton,
       title: $translate('transactions.edit_transaction'),
     }}
   >

diff --git a/src/routes/transactions/create/+page.svelte b/src/routes/transactions/create/+page.svelte
@@ -5,9 +5,9 @@
   import Button from '$lib/ui/Button.svelte';
   import { useTitle } from '$lib/ui/header';
   import HeaderBackButton from '$lib/ui/header/HeaderBackButton.svelte';
+  import HeaderFormSubmitButton from '$lib/ui/header/HeaderFormSubmitButton.svelte';
   import { useLeftButton, useRightButton } from '$lib/ui/header/model';
 
-  import SaveTransactionButton from '../edit/SaveTransactionButton.svelte';
   import TransactionForm from '../form/TransactionForm.svelte';
 
   $: accounts = $accountsStore;
@@ -16,7 +16,7 @@
 
   useLeftButton(HeaderBackButton);
   useTitle($translate('transactions.new_transaction'));
-  useRightButton(SaveTransactionButton);
+  useRightButton(HeaderFormSubmitButton);
 
   const handleSubmit = async (transactions: Transaction[]) => {
     transactions.forEach((transaction) => operationsService.save(transaction));

diff --git a/src/routes/transactions/edit/+page.svelte b/src/routes/transactions/edit/+page.svelte
@@ -3,13 +3,13 @@
 
   import { translate } from '$lib/translate';
   import { useRightButton, useTitle } from '$lib/ui/header';
+  import HeaderFormSubmitButton from '$lib/ui/header/HeaderFormSubmitButton.svelte';
   import { getSearchParam } from '$lib/utils';
 
   import EditTransaction from './EditTransaction.svelte';
-  import SaveTransactionButton from './SaveTransactionButton.svelte';
 
   useTitle($translate('transactions.edit_transaction'));
-  useRightButton(SaveTransactionButton);
+  useRightButton(HeaderFormSubmitButton);
 
   $: id = getSearchParam($page, 'id');
 </script>

diff --git a/src/routes/transactions/edit/SaveTransactionButton.svelte b/src/routes/transactions/edit/SaveTransactionButton.svelte
diff --git a/src/routes/transactions/form/TransactionForm.svelte b/src/routes/transactions/form/TransactionForm.svelte
@@ -6,12 +6,16 @@
   import { memberSettingsStore, operationTagsService } from '$lib/data';
   import { SYSTEM_CATEGORY_TRANSFER_IN, SYSTEM_CATEGORY_TRANSFER_OUT } from '$lib/data/categories';
   import type { AccountViewModel, Category, Tag, Transaction, TransactionViewModel } from '$lib/data/interfaces';
+  import { operationsCommentsStore } from '$lib/data/operations';
   import { translate } from '$lib/translate';
   import Button from '$lib/ui/Button.svelte';
+  import Checkbox from '$lib/ui/Checkbox.svelte';
   import Input from '$lib/ui/Input.svelte';
   import InputLabel from '$lib/ui/InputLabel.svelte';
   import Layout from '$lib/ui/Layout.svelte';
   import Portal from '$lib/ui/Portal.svelte';
+  import Spoiler from '$lib/ui/Spoiler.svelte';
+  import SpoilerToggle from '$lib/ui/SpoilerToggle.svelte';
   import { showErrorToast } from '$lib/ui/toasts';
   import { formatMoney, getSearchParam, getTimeZoneOffset, handleError } from '$lib/utils';
   import { replaceCalcExpressions } from '$lib/utils/calc';
@@ -23,9 +27,6 @@
   import TagsList from '$lib/widgets/TagsList.svelte';
   import TimeZoneList from '$lib/widgets/TimeZoneList.svelte';
 
-  import Checkbox from '$lib/ui/Checkbox.svelte';
-  import Spoiler from '$lib/ui/Spoiler.svelte';
-  import SpoilerToggle from '$lib/ui/SpoilerToggle.svelte';
   import AccountSelector from './AccountSelector.svelte';
   import AnotherCurrencyModal from './AnotherCurrencyModal.svelte';
   import CategorySelect from './CategorySelect.svelte';
@@ -95,6 +96,26 @@
 
   let excludeFromAnalysis = transaction?.excludeFromAnalysis ?? false;
 
+  let suggestions: string[] = [];
+
+  const comments = $operationsCommentsStore;
+
+  const handleCommentChange = (value: string) => {
+    comment = value;
+    if (comment.length < 2) {
+      suggestions = [];
+      return;
+    }
+    const newSuggestions = comments.filter((item) => item.startsWith(comment)).slice(0, 3);
+    if (newSuggestions.length === 1 && newSuggestions[0] === comment) {
+      suggestions = [];
+      return;
+    }
+    if (newSuggestions.join(',') !== suggestions.join(',')) {
+      suggestions = newSuggestions;
+    }
+  };
+
   const handleSubmit = async (e: Event) => {
     try {
       const formData = new FormData(e.target as HTMLFormElement);
@@ -150,7 +171,7 @@
           date: datetime,
           ...(timeZone ? { timeZone } : {}),
           amount: checkNumberFormParameter(formData, 'destinationAmount'),
-          comment: checkStringOptionalFormParameter(formData, 'comment'),
+          comment: checkStringOptionalFormParameter(formData, 'comment')?.trim(),
           tagIds,
           linkedTransactionId: transactions[0].id,
           ...(excludeFromAnalysis ? { excludeFromAnalysis } : {}),
@@ -292,9 +313,15 @@
       label={$translate('transactions.comment')}
       name="comment"
       value={transaction?.comment}
-      onChange={(value) => (comment = value)}
+      onChange={handleCommentChange}
+      list="suggestions"
       optional
     />
+    <datalist id="suggestions">
+      {#each suggestions as option}
+        <option value={option} />
+      {/each}
+    </datalist>
     {#if comment && replaceCalcExpressions(comment) !== comment}
       <div class="comment-preview">
         {replaceCalcExpressions(comment)}