Refactor code and reuse dialog+button component in install failure

Author: auri-f5bde6

src/renderer/views/SetupUI.vue

@@ -671,6 +671,13 @@
                                 <a href="https://rentry.org/winboat_retry_install" @click="openAnchorLink">these</a>
                                 instructions.
                             </x-label>
+                            <LogButton
+                                childrenClass="text-lg text-gray-400 text-center"
+                                title="Install log (winboat.log)"
+                                logFile="install.log"
+                                :dialog="logDialog!!"
+                            />
+                            <LogDialog ref="logDialog"></LogDialog>
                         </div>
 
                         <!-- Completed -->
@@ -698,11 +705,13 @@ import { computed, onMounted, onUnmounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import { computedAsync } from "@vueuse/core";
 import { InstallConfiguration, Specs } from "../../types";
-import { getSpecs, getMemoryInfo, defaultSpecs, satisfiesPrequisites, type MemoryInfo } from "../lib/specs";
-import { WINDOWS_VERSIONS, WINDOWS_LANGUAGES, type WindowsVersionKey, GUEST_NOVNC_PORT } from "../lib/constants";
+import { defaultSpecs, getMemoryInfo, getSpecs, type MemoryInfo, satisfiesPrequisites } from "../lib/specs";
+import { GUEST_NOVNC_PORT, WINDOWS_LANGUAGES, WINDOWS_VERSIONS, type WindowsVersionKey } from "../lib/constants";
 import { InstallManager, type InstallState, InstallStates } from "../lib/install";
 import { openAnchorLink } from "../utils/openLink";
 import license from "../assets/LICENSE.txt?raw";
+import LogButton from "./buttons/LogButton.vue";
+import LogDialog from "./dialogs/LogDialog.vue";
 
 const path: typeof import("path") = require("node:path");
 const electron: typeof import("electron") = require("electron").remote || require("@electron/remote");
@@ -811,6 +820,7 @@ const confirmPassword = ref("");
 const homeFolderSharing = ref(false);
 const installState = ref<InstallState>(InstallStates.IDLE);
 const preinstallMsg = ref("");
+const logDialog = ref<typeof LogDialog | null>(null);
 
 let installManager: InstallManager | null = null;
 

src/renderer/views/buttons/LogButton.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { WINBOAT_DIR } from "../../lib/constants";
+import LogDialog from "../dialogs/LogDialog.vue";
+const fs: typeof import("fs") = require("node:fs");
+const path: typeof import("path") = require("node:path");
+
+defineProps({ title: String, dialog: LogDialog, logFile: String, childrenClass: String });
+</script>
+
+<template>
+    <x-button
+        @click="
+            dialog!.setTitle(title!!);
+            dialog!.setContent(fs.readFileSync(path.join(WINBOAT_DIR, logFile!!), 'utf8'));
+            dialog!.showModal();
+        "
+        :class="childrenClass"
+    >
+        <x-label>Winboat log (winboat.log)</x-label>
+    </x-button>
+</template>

src/renderer/views/config/LogsCard.vue

@@ -1,13 +1,10 @@
 <script setup lang="ts">
 import { ref } from "vue";
-const fs: typeof import("fs") = require("node:fs");
-const path: typeof import("path") = require("node:path");
-const logContent = ref("");
-const logTitle = ref("");
-const logDialog = ref<typeof LogDialog | null>(null);
-import { WINBOAT_DIR } from "../../lib/constants";
 import LogDialog from "../dialogs/LogDialog.vue";
 import { Icon } from "@iconify/vue";
+import LogButton from "../buttons/LogButton.vue";
+
+const logDialog = ref<typeof LogDialog | null>(null);
 </script>
 
 <template>
@@ -22,25 +19,9 @@ import { Icon } from "@iconify/vue";
             <p class="text-neutral-400 text-[0.9rem] !pt-0 !mt-0">Select the log you want to open</p>
         </div>
         <div class="flex flex-row gap-2 justify-center items-center" style="font-size: 0.8125rem">
-            <x-button
-                @click="
-                    logTitle = 'Winboat log (winboat.log)';
-                    logContent = fs.readFileSync(path.join(WINBOAT_DIR, 'winboat.log'), 'utf8');
-                    logDialog!.showModal();
-                "
-            >
-                Winboat log (winboat.log)
-            </x-button>
-            <x-button
-                @click="
-                    logTitle = 'Install log (install.log)';
-                    logContent = fs.readFileSync(path.join(WINBOAT_DIR, 'install.log'), 'utf8');
-                    logDialog!.showModal();
-                "
-            >
-                Install log (install.log)
-            </x-button>
+            <LogButton title="Winboat log (winboat.log)" logFile="winboat.log" :dialog="logDialog!!" />
+            <LogButton title="Install log (install.log)" logFile="install.log" :dialog="logDialog!!" />
         </div>
-        <LogDialog :title="logTitle" :content="logContent" ref="logDialog"></LogDialog>
+        <LogDialog ref="logDialog"></LogDialog>
     </x-card>
 </template>

src/renderer/views/dialogs/LogDialog.vue

@@ -3,15 +3,22 @@ import { ref } from "vue";
 import { Icon } from "@iconify/vue";
 const electron: typeof import("electron") = require("electron");
 
-defineProps({ title: String, content: String });
+defineProps({ title: String });
 const dialogRef = ref<HTMLDialogElement | null>(null);
 const copied = ref(false);
+const title = ref("");
+const content = ref("");
 function showModal() {
     copied.value = false;
     dialogRef.value!.showModal();
 }
-
-defineExpose({ showModal });
+function setTitle(newTitle: string) {
+    title.value = newTitle;
+}
+function setContent(newContent: string) {
+    content.value = newContent;
+}
+defineExpose({ showModal, setTitle, setContent });
 </script>
 
 <template>