From 4fba9cc23ca364abf0df272c682dc3405ffa4012 Mon Sep 17 00:00:00 2001
From: Chris Kruining <c.kruining@4dotnet.nl>
Date: Fri, 3 Jan 2025 04:56:21 +0100
Subject: [PATCH] fix adding of language

---
 src/features/file/grid.tsx   | 14 ++++++++++----
 src/routes/(editor)/edit.tsx | 17 ++++++++++++++---
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/features/file/grid.tsx b/src/features/file/grid.tsx
index a6e5e0c..36d97d3 100644
--- a/src/features/file/grid.tsx
+++ b/src/features/file/grid.tsx
@@ -11,7 +11,7 @@ export interface GridApi {
     readonly selection: Accessor<SelectionItem<number, Entry>[]>;
     remove(indices: number[]): void;
     addKey(key: string): void;
-    addLocale(locale: string): void;
+    // addLocale(locale: string): void;
 };
 
 const groupBy = (rows: DataSetRowNode<number, Entry>[]) => {
@@ -49,6 +49,15 @@ export function Grid(props: { class?: string, rows: Entry[], locales: string[],
 
     const [api, setApi] = createSignal<GridCompApi<Entry>>();
 
+    createEffect(() => {
+        const r = rows();
+        const l = locales();
+
+        r.mutateEach(({ key, ...rest }) => {
+            return ({ key, ...Object.fromEntries(l.map(locale => [locale, rest[locale] ?? ''])) });
+        });
+    });
+
     createEffect(() => {
         const r = rows();
 
@@ -59,9 +68,6 @@ export function Grid(props: { class?: string, rows: Entry[], locales: string[],
             addKey(key) {
                 r.insert({ key, ...Object.fromEntries(locales().map(l => [l, ''])) });
             },
-            addLocale(locale) {
-                r.mutateEach(entry => ({ ...entry, [locale]: '' }));
-            },
         });
     });
 
diff --git a/src/routes/(editor)/edit.tsx b/src/routes/(editor)/edit.tsx
index 45601f4..661d234 100644
--- a/src/routes/(editor)/edit.tsx
+++ b/src/routes/(editor)/edit.tsx
@@ -74,7 +74,7 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
     const filesContext = useFiles();
 
     const tabs = createMemo(() => filesContext.files().map(({ key, handle }) => {
-        const [api, setApi] = createSignal<GridApi>();
+        const [api, setApi] = createSignal<(GridApi & { addLocale(locale: string): void })>();
         const [entries, setEntries] = createSignal<Entries>(new Map());
         const [files, setFiles] = createSignal<Map<string, { id: string, handle: FileSystemFileHandle }>>(new Map());
 
@@ -379,7 +379,7 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
     </div>;
 };
 
-const Content: Component<{ directory: FileSystemDirectoryHandle, api?: Setter<GridApi | undefined>, entries?: Setter<Entries> }> = (props) => {
+const Content: Component<{ directory: FileSystemDirectoryHandle, api?: Setter<(GridApi & { addLocale(locale: string): void }) | undefined>, entries?: Setter<Entries> }> = (props) => {
     const [entries, setEntries] = createSignal<Entries>(new Map());
     const [locales, setLocales] = createSignal<string[]>([]);
     const [rows, setRows] = createSignal<Entry[]>([]);
@@ -390,7 +390,18 @@ const Content: Component<{ directory: FileSystemDirectoryHandle, api?: Setter<Gr
     });
 
     createEffect(() => {
-        props.api?.(api());
+        const a = api();
+
+        if (!a) {
+            return;
+        }
+
+        props.api?.({
+            ...a,
+            addLocale(locale) {
+                setLocales(current => new Set([...current, locale]).values().toArray());
+            },
+        });
     });
 
     createEffect(() => {