Create working PoC of frontend app

2025-05-09 14:32:05 +02:00
parent 149d8f01b7
commit 192f21c3a6
17 changed files with 482 additions and 37 deletions
--- a/web/src/pages/PrepareTransactionsPage/ImportBar.tsx
+++ b/web/src/pages/PrepareTransactionsPage/ImportBar.tsx
@@ -0,0 +1,77 @@
+import { useCallback, useState } from "react";
+import type { ImportOptions } from "../../types/api";
+
+export type ImportBarProps = {
+  onSubmit: (opts: ImportOptions) => void;
+};
+
+export default function ImportBar({ onSubmit }: ImportBarProps) {
+  const [formData, setFormData] = useState<ImportOptions>({ mode: 'import' });
+
+  
+  const handleSubmit = useCallback((e: React.FormEvent) => {
+    e.preventDefault();
+
+
+
+    onSubmit(formData);
+  }, [formData, onSubmit]);
+
+  const changeMode = useCallback((mode: ImportOptions['mode']) => {
+    if (mode === 'add') {
+      setFormData({ ...formData, mode });
+    }
+
+    else {
+      setFormData({ mode });
+    }
+  }, [formData, setFormData]);
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className="field">
+        <label className="label">Import mode</label>
+        <div className="control">
+          <div className="buttons has-addons is-left">
+            <button 
+              type="button"
+              className={`button ${formData.mode === 'import' ? "is-primary is-selected" : ""}`}
+              onClick={() => changeMode('import')}>Import</button>
+            <button 
+              type="button"
+              className={`button ${formData.mode === 'add' ? "is-primary is-selected" : ""}`}
+              onClick={() => changeMode('add')}>Add</button>
+          </div>
+        </div>
+      </div>
+
+      {formData.mode === 'add' && <div className="field">
+        <label className="label">Additional options</label>
+        <div className="control">
+          <label className="checkbox">
+            <input 
+              type="checkbox" 
+              checked={formData.learnCategories}
+              onChange={e => setFormData({ ...formData, learnCategories: e.target.checked})}/> Learn categories
+          </label>          
+        </div>
+        <div className="control">
+          <label className="checkbox">
+            <input 
+              type="checkbox" 
+              checked={formData.runTransfers}
+              onChange={e => setFormData({ ...formData, runTransfers: e.target.checked})}/> Run transfers
+          </label>
+        </div>
+      </div>}
+
+      <div className="field mt-5">
+        <div className="control">
+          <button 
+            type="submit" 
+            className="button is-link is-fullwidth">Submit transactions</button>
+        </div>
+      </div>
+    </form>
+  ); 
+}