fix save journal button and reactive city filtering by country

This commit is contained in:
haerikimmm
2026-06-16 18:32:48 +09:00
parent 92fae28383
commit ec4eea0977
2 changed files with 16 additions and 5 deletions

View File

@@ -27,7 +27,7 @@ export function initEntriesListener(uid) {
} }
export async function addEntry(data) { export async function addEntry(data) {
if (!_uid) return null; if (!_uid) throw new Error('Not logged in');
const ref = await addDoc(collection(db, 'users', _uid, 'entries'), { const ref = await addDoc(collection(db, 'users', _uid, 'entries'), {
...data, ...data,
createdAt: serverTimestamp(), createdAt: serverTimestamp(),

View File

@@ -1,5 +1,4 @@
<script> <script>
import { get } from 'svelte/store';
import { journals, addJournal } from '../stores/journalStore.js'; import { journals, addJournal } from '../stores/journalStore.js';
import { countryNames } from '../shared/countries.js'; import { countryNames } from '../shared/countries.js';
import SearchInput from '../shared/SearchInput.svelte'; import SearchInput from '../shared/SearchInput.svelte';
@@ -13,6 +12,13 @@
let { initialCountry = '', onBack, onSaved = onBack } = $props(); let { initialCountry = '', onBack, onSaved = onBack } = $props();
// ── Journal store (reactive) ────────────────────────────────────────
let journalEntries = $state([]);
$effect(() => {
const unsub = journals.subscribe(v => { journalEntries = v; });
return unsub;
});
// ── Fields ───────────────────────────────────────────────────────── // ── Fields ─────────────────────────────────────────────────────────
let cities = $state([]); let cities = $state([]);
let cityInput = $state(''); let cityInput = $state('');
@@ -55,8 +61,8 @@
// otherwise show all known cities. // otherwise show all known cities.
let cityOptions = $derived( let cityOptions = $derived(
country.trim() country.trim()
? [...new Set(get(journals).filter(j => (j.location.country || '').toLowerCase() === country.trim().toLowerCase()).flatMap(e => e.location.cities))].sort() ? [...new Set(journalEntries.filter(j => (j.location?.country || '').toLowerCase() === country.trim().toLowerCase()).flatMap(e => e.location?.cities ?? []))].sort()
: [...new Set(get(journals).flatMap(e => e.location.cities))].sort() : [...new Set(journalEntries.flatMap(e => e.location?.cities ?? []))].sort()
); );
function addCity(val) { function addCity(val) {
@@ -106,9 +112,11 @@
// ── Save ─────────────────────────────────────────────────────────── // ── Save ───────────────────────────────────────────────────────────
let saving = $state(false); let saving = $state(false);
let saveError = $state('');
async function save() { async function save() {
saving = true; saving = true;
saveError = '';
const memo = questions const memo = questions
.map((q, i) => answers[i].trim() ? `Q: ${q.split('\n')[0]}\nA: ${answers[i].trim()}` : '') .map((q, i) => answers[i].trim() ? `Q: ${q.split('\n')[0]}\nA: ${answers[i].trim()}` : '')
.filter(Boolean) .filter(Boolean)
@@ -125,8 +133,9 @@
location: { cities, country }, location: { cities, country },
}); });
onSaved(); onSaved();
} catch { } catch (e) {
saving = false; saving = false;
saveError = e?.message ?? 'Failed to save. Please try again.';
} }
} }
</script> </script>
@@ -153,6 +162,7 @@
<button class="save-btn" onclick={save} disabled={saving}> <button class="save-btn" onclick={save} disabled={saving}>
{saving ? 'Saving…' : 'Save trip'} {saving ? 'Saving…' : 'Save trip'}
</button> </button>
{#if saveError}<span class="save-err">{saveError}</span>{/if}
{/if} {/if}
</div> </div>
</header> </header>
@@ -326,6 +336,7 @@
} }
.save-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); } .save-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.save-btn:disabled { opacity: 0.6; cursor: not-allowed; } .save-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.save-err { font-size: 12px; color: #ef4444; margin-top: 4px; display: block; text-align: right; }
/* scroll + form */ /* scroll + form */
.scroll { flex: 1; overflow-y: auto; } .scroll { flex: 1; overflow-y: auto; }