From 7ee1a72302c00d113d9b8e31bcee6f3441534b0e Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Sun, 7 Jul 2024 03:10:50 +0400
Subject: [PATCH] Added radio item, replaced menu item on profiles listing
 screen

---
 src/components/ui/menu/MenuRadioItem.svelte  | 36 ++++++++++++++++++++
 src/routes/settings/maintenance/+page.svelte | 21 ++++++++++--
 2 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ui/menu/MenuRadioItem.svelte

diff --git a/src/components/ui/menu/MenuRadioItem.svelte b/src/components/ui/menu/MenuRadioItem.svelte
new file mode 100644
index 0000000..54bb9a4
--- /dev/null
+++ b/src/components/ui/menu/MenuRadioItem.svelte
@@ -0,0 +1,36 @@
+<script>
+    import MenuLink from "$components/ui/menu/MenuItem.svelte";
+
+    /**
+     * @type {boolean}
+     */
+    export let checked;
+
+    /**
+     * @type {string}
+     */
+    export let name;
+
+    /**
+     * @type {string}
+     */
+    export let value;
+
+    /**
+     * @type {string|null}
+     */
+    export let href = null;
+</script>
+
+<MenuLink {href}>
+    <input type="radio" {name} {value} {checked} on:input on:click|stopPropagation>
+    <slot></slot>
+</MenuLink>
+
+<style lang="scss">
+    :global(.menu-item) input {
+        width: 16px;
+        height: 16px;
+        margin-right: 6px;
+    }
+</style>
diff --git a/src/routes/settings/maintenance/+page.svelte b/src/routes/settings/maintenance/+page.svelte
index 340e0b4..e2f2cb5 100644
--- a/src/routes/settings/maintenance/+page.svelte
+++ b/src/routes/settings/maintenance/+page.svelte
@@ -1,6 +1,7 @@
 <script>
     import Menu from "$components/ui/menu/Menu.svelte";
     import MenuItem from "$components/ui/menu/MenuItem.svelte";
+    import MenuRadioItem from "$components/ui/menu/MenuRadioItem.svelte";
     import {activeProfileStore, maintenanceProfilesStore} from "$stores/maintenance-profiles-store.js";
 
     /** @type {import('$lib/extension/entities/MaintenanceProfile.js').default[]} */
@@ -11,6 +12,17 @@
     function resetActiveProfile() {
         $activeProfileStore = null;
     }
+
+    /**
+     * @param {Event} event
+     */
+    function enableSelectedProfile(event) {
+        const target = event.target;
+
+        if (target instanceof HTMLInputElement && target.checked) {
+            activeProfileStore.set(target.value);
+        }
+    }
 </script>
 
 <Menu>
@@ -20,10 +32,13 @@
         <hr>
     {/if}
     {#each profiles as profile}
-        <MenuItem href="/settings/maintenance/{profile.id}"
-                  icon="{$activeProfileStore === profile.id ? 'tag' : null}">
+        <MenuRadioItem href="/settings/maintenance/{profile.id}"
+                       name="active-profile"
+                       value="{profile.id}"
+                       checked="{$activeProfileStore === profile.id}"
+                       on:input={enableSelectedProfile}>
             {profile.settings.name}
-        </MenuItem>
+        </MenuRadioItem>
     {/each}
     <hr>
     <MenuItem href="#" on:click={resetActiveProfile}>Reset Active Profile</MenuItem>