From cc30b109265858475847c70ccd6be90850e22127 Mon Sep 17 00:00:00 2001
From: GeoffreyChen777 <geoffreychen777@gmail.com>
Date: Thu, 11 Jul 2024 21:56:09 +0100
Subject: [PATCH] fix: code editing bug (#578)

#577
---
 .../ui/edit-view/components/codes-input.vue   | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/app/renderer/ui/edit-view/components/codes-input.vue b/app/renderer/ui/edit-view/components/codes-input.vue
index 06e34026..a4a064e7 100644
--- a/app/renderer/ui/edit-view/components/codes-input.vue
+++ b/app/renderer/ui/edit-view/components/codes-input.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { BIconDashCircle, BIconPlusLg } from "bootstrap-icons-vue";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
 const props = defineProps({
   codes: {
@@ -9,7 +9,7 @@ const props = defineProps({
   },
 });
 
-const codes = ref(props.codes.map((code) => JSON.parse(code)));
+const parsedCodes = computed(() => props.codes.map((code) => JSON.parse(code)));
 const emits = defineEmits(["event:change"]);
 
 // ======================
@@ -23,25 +23,26 @@ const onInput = (payload: Event, index: number, key: string) => {
   } else {
     value = (payload.target as HTMLInputElement).checked;
   }
-  codes.value[index][key] = value;
+  parsedCodes.value[index][key] = value;
   emits(
     "event:change",
-    codes.value.map((code) => JSON.stringify(code))
+    parsedCodes.value.map((code) => JSON.stringify(code))
   );
 };
 
 const onAddClicked = () => {
-  codes.value.unshift({
-    code: "",
-    name: "",
-  });
+  const newCodes = [...parsedCodes.value, { url: "", isOfficial: false }];
+  emits(
+    "event:change",
+    newCodes.map((code) => JSON.stringify(code))
+  );
 };
 
 const onDeleteClicked = (index: number) => {
-  codes.value.splice(index, 1);
+  const newCodes = parsedCodes.value.filter((_, i) => i !== index);
   emits(
     "event:change",
-    codes.value.map((code) => JSON.stringify(code))
+    newCodes.map((code) => JSON.stringify(code))
   );
 };
 </script>
@@ -62,7 +63,7 @@ const onDeleteClicked = (index: number) => {
     </div>
     <div class="overflow-scroll">
       <div
-        v-for="(code, index) in codes"
+        v-for="(code, index) in parsedCodes"
         :key="index"
         class="flex space-x-2 bg-neutral-300 dark:bg-neutral-600 rounded-md px-2 py-1 my-1"
       >