fix: correctly parse nwp files

Author: mtdvlpr

app/app.vue

@@ -25,7 +25,9 @@
     </UHeader>
 
     <UMain>
-      <NuxtPage />
+      <UContainer>
+        <NuxtPage />
+      </UContainer>
     </UMain>
 
     <USeparator icon="i-simple-icons-nuxtdotjs" />

app/components/TranslationFileForm.vue

@@ -55,6 +55,10 @@ const state = reactive<Partial<Schema>>({
   translations: model.value,
 });
 
+watch(model, (newVal) => {
+  state.translations = newVal;
+});
+
 const { showSuccess } = useFlash();
 
 const handleSubmit = (event: FormSubmitEvent<Schema>) => {

app/pages/export.vue

@@ -1,5 +1,5 @@
 <template>
-  <UPage class="px-4">
+  <UPage>
     <UPageHeader :title="title" :description="description" />
     <UPageBody>
       <UPageCard title="Veranderingen">

app/pages/import.vue

@@ -1,11 +1,26 @@
 <template>
-  <UPage class="px-4">
+  <UPage>
     <UPageHeader :title="title" :description="description" />
     <UPageBody>
       <UPageCard title="Vertaling">
         <TranslationFileForm v-model="translationsString" required />
       </UPageCard>
       <UPageCard title="Origineel">
+        <div class="flex gap-4">
+          <UButton
+            loading-auto
+            class="w-fit"
+            color="neutral"
+            label="Vul automatisch in"
+            @click="autoFillOriginals"
+          />
+          <UButton
+            class="w-fit"
+            color="error"
+            label="Reset"
+            @click="originalsString = undefined"
+          />
+        </div>
         <TranslationFileForm
           v-model="originalsString"
           :field="{
@@ -34,4 +49,24 @@ const { originalsString, translationsString } = storeToRefs(importStore);
 watch(translationsString, (newVal) => {
   importStore.translations = parseTranslationFile(newVal);
 });
+
+const { showError } = useFlash();
+const loadingOriginals = ref(false);
+
+const autoFillOriginals = async () => {
+  loadingOriginals.value = true;
+  try {
+    const strings = await $fetch<string>(
+      "https://docs.google.com/feeds/download/documents/export/Export?exportFormat=txt&id=1KOm9MTLrWv_lll6f1YvnlWlq3srXYVKMSo2a9KZ39a8",
+      { responseType: "text" },
+    );
+    originalsString.value = strings.trim().replaceAll("\r", "");
+  } catch {
+    showError({
+      description:
+        "Er is een fout opgetreden bij het ophalen van de originele teksten.",
+    });
+  }
+  loadingOriginals.value = false;
+};
 </script>

app/pages/translate.vue

@@ -1,5 +1,5 @@
 <template>
-  <UPage class="px-4">
+  <UPage>
     <template #left>
       <UPageAside>
         <template #top>

app/pages/update.vue

@@ -1,5 +1,5 @@
 <template>
-  <UPage class="px-4">
+  <UPage>
     <UPageHeader :title="title" :description="description" />
 
     <UPageBody>

app/utils/nws.ts

@@ -63,11 +63,11 @@ const normalizeTranslationLine = (
 ): NWSTranslationLine => {
   if (isNWPTranslationLine(line)) {
     const key = line.match(/^"([^"]+)"/)?.[1];
-    const value = line.match(/:"([^"]+)"/)?.[1];
-    return `${key}: ${value}`;
+    const value = line.match(/: "([^"]+)"/)?.[1];
+    return `${key}: ${value || "<empty>"}`;
   }
 
-  return line;
+  return (line.endsWith("\r") ? line.slice(0, -1) : line) as NWSTranslationLine;
 };
 
 export const parseTranslationFile = (file: TranslationFile): ProgramUIFile => {
@@ -79,9 +79,13 @@ export const parseTranslationFile = (file: TranslationFile): ProgramUIFile => {
 
   lines.forEach((line) => {
     const [key, ...rest] = line.trim().split(KEY_VALUE_SEPARATOR);
-    const value = rest.join(KEY_VALUE_SEPARATOR);
 
-    if (key) programUI[key] = value ?? ""; // Value can be empty in NWP translation file
+    // Some strings end with a colon and space (": "), keep it in the value
+    const value = line.endsWith(KEY_VALUE_SEPARATOR)
+      ? rest.join(KEY_VALUE_SEPARATOR) + " "
+      : rest.join(KEY_VALUE_SEPARATOR);
+
+    if (key && value) programUI[key] = value === "<empty>" ? "" : value; // Value can be empty in NWP translation file
   });
 
   return programUI;
@@ -93,9 +97,9 @@ export const serializeTranslationFile = (
   const isNWP = isNWPProgramUIFile(record);
   return Object.entries(record)
     .map(
-      ([key, value]): TranslationLine =>
+      ([key, value], i): TranslationLine =>
         isNWP
-          ? `"${key}"${KEY_VALUE_SEPARATOR}"${value}",`
+          ? `"${key}"${KEY_VALUE_SEPARATOR}"${value}"${i < Object.keys(record).length - 1 ? "," : ""}`
           : `${key}: ${value}`,
     )
     .join(LINE_SEPARATOR);

app/utils/schemas.ts

@@ -7,7 +7,7 @@ export const translationFileSchema = z.custom<TranslationFile>(
     /^("?[a-zA-Z_\d]+"?: "?.*?"?,?\n)+("?[a-zA-Z_\d]+"?: "?.*?"?,?\n*)$/.test(
       val,
     ),
-  "Kan waarde niet parseren.",
+  "Kan waarde niet valideren.",
 );
 
 export const programUISchema = z.record(z.string(), z.string());