From f3eb2aabca73813603bb0474ec41c3407340f710 Mon Sep 17 00:00:00 2001
From: Martichou <m@rtin.fyi>
Date: Sun, 11 Aug 2024 19:19:18 +0200
Subject: [PATCH] chore(refactor): move settings modal to own composables

Signed-off-by: Martichou <m@rtin.fyi>
---
 app/legacy/src/components/HomePage.vue       | 61 ++---------------
 app/legacy/src/composables/SettingsModal.vue | 72 ++++++++++++++++++++
 2 files changed, 79 insertions(+), 54 deletions(-)
 create mode 100644 app/legacy/src/composables/SettingsModal.vue

diff --git a/app/legacy/src/components/HomePage.vue b/app/legacy/src/components/HomePage.vue
index 8d9465d..d8ab1df 100644
--- a/app/legacy/src/components/HomePage.vue
+++ b/app/legacy/src/components/HomePage.vue
@@ -1,46 +1,7 @@
 <template>
 	<div class="flex flex-col w-full h-full bg-green-50 max-w-full max-h-full overflow-hidden">
 		<ToastNotification />
-		<div v-if="settingsOpen" class="absolute z-10 w-full h-full flex justify-center items-center bg-black bg-opacity-25">
-			<div class="bg-white rounded-xl shadow-xl p-4 w-[24rem]">
-				<div class="flex flex-row justify-between items-center">
-					<h3 class="font-medium text-xl">
-						Settings
-					</h3>
-					<div class="btn px-3 rounded-xl active:scale-95 transition duration-150 ease-in-out" @click="settingsOpen = false">
-						Close
-					</div>
-				</div>
-				<div class="py-4 flex flex-col">
-					<div class="form-control hover:bg-gray-500 hover:bg-opacity-10 rounded-xl p-3">
-						<label class="cursor-pointer flex flex-row justify-between items-center" @click="setAutoStart(vm, !autostart)">
-							<span class="label-text">Start on boot</span>
-							<input type="checkbox" :checked="autostart" class="checkbox focus:outline-none">
-						</label>
-					</div>
-					<div class="form-control hover:bg-gray-500 hover:bg-opacity-10 rounded-xl p-3">
-						<label class="cursor-pointer flex flex-row justify-between items-center" @click="setRealClose(vm, !realclose)">
-							<span class="label-text">Keep running on close</span>
-							<input type="checkbox" :checked="!realclose" class="checkbox focus:outline-none">
-						</label>
-					</div>
-					<div class="form-control hover:bg-gray-500 hover:bg-opacity-10 rounded-xl p-3">
-						<label class="cursor-pointer flex flex-row justify-between items-center" @click="setStartMinimized(vm, !startminimized)">
-							<span class="label-text">Start minimized</span>
-							<input type="checkbox" :checked="startminimized" class="checkbox focus:outline-none">
-						</label>
-					</div>
-					<div class="form-control hover:bg-gray-500 hover:bg-opacity-10 rounded-xl p-3">
-						<label class="cursor-pointer flex flex-col items-start" @click="openDownloadPicker()">
-							<span class="">Change download folder</span>
-							<span class="overflow-hidden whitespace-nowrap text-ellipsis text-xs max-w-80">
-								> {{ downloadPath ?? 'OS User\'s download folder' }}
-							</span>
-						</label>
-					</div>
-				</div>
-			</div>
-		</div>
+		<SettingsModal :vm="vm" @close="settingsOpen = false" />
 
 		<div class="flex flex-row justify-between items-center px-6 py-4">
 			<!-- Header, Pc name left and options right -->
@@ -367,11 +328,14 @@ import { Visibility } from '@martichou/core_lib/bindings/Visibility';
 
 import { ToastNotification, ToDelete, stateToDisplay, autostartKey, DisplayedItem, useToastStore, opt, ToastType, utils } from '../vue_lib';
 
+import SettingsModal from '../composables/SettingsModal.vue';
+
 export default {
 	name: "HomePage",
 
 	components: {
-		ToastNotification
+		ToastNotification,
+		SettingsModal
 	},
 
 	setup() {
@@ -457,6 +421,8 @@ export default {
 						});
 					}
 
+					// TODO - Automatically open || copy to clipboard + toast
+
 					if (idx !== -1) {
 						const prev = this.requests.at(idx);
 						// Update the existing message at index 'idx'
@@ -573,19 +539,6 @@ export default {
 				this.discoveryRunning = true;
 			})
 		},
-		openDownloadPicker: function() {
-			dialog.open({
-				title: "Select the destination for files",
-				directory: true,
-				multiple: false,
-			}).then(async (el) => {
-				if (el === null) {
-					return;
-				}
-
-				await this.setDownloadPath(this, el as string);
-			})
-		},
 		openUrl: async function(url: string) {
 			try {
 				await open(url);
diff --git a/app/legacy/src/composables/SettingsModal.vue b/app/legacy/src/composables/SettingsModal.vue
new file mode 100644
index 0000000..09f37e3
--- /dev/null
+++ b/app/legacy/src/composables/SettingsModal.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { dialog } from '@tauri-apps/api';
+import { utils } from '../vue_lib';
+import { PropType } from 'vue';
+import { TauriVM } from '../vue_lib/helper/ParamsHelper';
+
+const props = defineProps({
+	vm: {
+		type: Object as PropType<TauriVM>,
+		required: true
+	}
+});
+
+const emit = defineEmits(['close']);
+
+function openDownloadPicker() {
+	dialog.open({
+		title: "Select the destination for files",
+		directory: true,
+		multiple: false,
+	}).then(async (el) => {
+		if (el === null) {
+			return;
+		}
+
+		await utils.setDownloadPath(props.vm, el as string);
+	})
+}
+</script>
+
+<template>
+	<div v-if="vm.settingsOpen" class="absolute z-10 w-full h-full flex justify-center items-center bg-black bg-opacity-25">
+		<div class="bg-white rounded-xl shadow-xl p-4 w-[24rem]">
+			<div class="flex flex-row justify-between items-center">
+				<h3 class="font-medium text-xl">
+					Settings
+				</h3>
+				<div class="btn px-3 rounded-xl active:scale-95 transition duration-150 ease-in-out" @click="emit('close')">
+					Close
+				</div>
+			</div>
+			<div class="py-4 flex flex-col">
+				<div class="form-control hover:bg-gray-500 hover:bg-opacity-10 rounded-xl p-3">
+					<label class="cursor-pointer flex flex-row justify-between items-center" @click="utils.setAutoStart(vm, !vm.autostart)">
+						<span class="label-text">Start on boot</span>
+						<input type="checkbox" :checked="vm.autostart" class="checkbox focus:outline-none">
+					</label>
+				</div>
+				<div class="form-control hover:bg-gray-500 hover:bg-opacity-10 rounded-xl p-3">
+					<label class="cursor-pointer flex flex-row justify-between items-center" @click="utils.setRealClose(vm, !vm.realclose)">
+						<span class="label-text">Keep running on close</span>
+						<input type="checkbox" :checked="!vm.realclose" class="checkbox focus:outline-none">
+					</label>
+				</div>
+				<div class="form-control hover:bg-gray-500 hover:bg-opacity-10 rounded-xl p-3">
+					<label class="cursor-pointer flex flex-row justify-between items-center" @click="utils.setStartMinimized(vm, !vm.startminimized)">
+						<span class="label-text">Start minimized</span>
+						<input type="checkbox" :checked="vm.startminimized" class="checkbox focus:outline-none">
+					</label>
+				</div>
+				<div class="form-control hover:bg-gray-500 hover:bg-opacity-10 rounded-xl p-3">
+					<label class="cursor-pointer flex flex-col items-start" @click="openDownloadPicker()">
+						<span class="">Change download folder</span>
+						<span class="overflow-hidden whitespace-nowrap text-ellipsis text-xs max-w-80">
+							> {{ vm.downloadPath ?? 'OS User\'s download folder' }}
+						</span>
+					</label>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
\ No newline at end of file