Add settings page

use-the-force · Oct 18, 2023 · 1f67ca2 · 1f67ca2
1 parent f19a29a
commit 1f67ca2
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 1 deletion.
diff --git a/board/frontend/App.svelte b/board/frontend/App.svelte
@@ -2,6 +2,7 @@
     import {Router, Route} from "svelte-navigator";
     import Home from "./lib/components/pages/Home.svelte";
     import Login from "./lib/components/pages/Login.svelte";
+    import Settings from "./lib/components/pages/Settings.svelte";
     import {beforeUpdate} from "svelte";
     import {authRequired} from "./lib/api/auth.js";
 
@@ -19,6 +20,9 @@
     <Route path="/login">
         <Login/>
     </Route>
+    <Route path="/settings">
+        <Settings/>
+    </Route>
 </Router>
 
 <style>

diff --git a/...d/lib/components/settings/Settings.svelte → ...tend/lib/components/board/Settings.svelte b/...d/lib/components/settings/Settings.svelte → ...tend/lib/components/board/Settings.svelte
diff --git a/board/frontend/lib/components/layout/Navbar.svelte b/board/frontend/lib/components/layout/Navbar.svelte
@@ -24,6 +24,9 @@
                         <UserAvatar></UserAvatar>
                     </DropdownToggle>
                     <DropdownMenu end>
+                        <DropdownItem href="/settings">
+                            Settings
+                        </DropdownItem>
                         <DropdownItem divider/>
                         <DropdownItem on:click={(e) => logout()}>
                             Logout

diff --git a/board/frontend/lib/components/pages/Home.svelte b/board/frontend/lib/components/pages/Home.svelte
@@ -23,7 +23,7 @@
     } from "sveltestrap";
     import UserBoard from "../board/UserBoard.svelte"
     import SubNav from "../SubNav.svelte";
-    import Settings from "../settings/Settings.svelte";
+    import Settings from "../board/Settings.svelte";
     import Navbar from "../layout/Navbar.svelte";
     import Footer from "../layout/Footer.svelte";
     import Loading from "../layout/Loading.svelte";

diff --git a/board/frontend/lib/components/pages/Settings.svelte b/board/frontend/lib/components/pages/Settings.svelte
@@ -0,0 +1,61 @@
+<script>
+    import {
+        Container,
+        Styles
+    } from "sveltestrap";
+    import Navbar from "../layout/Navbar.svelte";
+    import Footer from "../layout/Footer.svelte";
+    import {settings} from "../../store.js";
+    console.log($settings);
+    const handleChangeSettingGeneralMergeRequests = async (e) => {
+        $settings.general.mergeRequests = e.target.checked;
+        console.log($settings);
+    }
+</script>
+
+<Styles/>
+
+<Navbar></Navbar>
+
+<Container fluid class="py-4 bg-white">
+    <div class="col-12 col-lg-10 col-xl-8 mx-auto">
+        <h2 class="h3 mb-4 page-title">Settings</h2>
+        <div class="my-4">
+            <ul class="nav nav-tabs mb-4" id="myTab" role="tablist">
+                <li class="nav-item">
+                    <a class="nav-link active" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
+                       aria-selected="false">General</a>
+                </li>
+            </ul>
+            <h5 class="mb-0 mt-5">Feature Settings</h5>
+            <p>Select features you want to enable.</p>
+            <div class="list-group mb-5">
+                <div class="list-group-item">
+                    <div class="row align-items-center">
+                        <div class="col">
+                            <strong class="mb-0">Merge Requests</strong>
+                            <p class="text-muted mb-0">Include merge requests in kanban desk.</p>
+                        </div>
+                        <div class="col-auto">
+                            <!-- <input type="checkbox" on:change={(e) => handleCheckMergeRequests(e)}/> -->
+                            <input type="checkbox" bind:checked={$settings.general.mergeRequests} on:change={handleChangeSettingGeneralMergeRequests}/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</Container>
+
+<Footer></Footer>
+
+<style>
+    h2:focus-visible {
+        outline: none;
+    }
+
+    input[type=checkbox] {
+        width: 2rem;
+        height: 2rem;
+    }
+</style>
diff --git a/board/frontend/lib/store.js b/board/frontend/lib/store.js
@@ -3,6 +3,12 @@ import { writable, readable } from "svelte/store";
 export const loadingBoardInfo = writable("Loading...");
 export let authorized = writable(false);
 
+export const settings = writable({
+    general: {
+        mergeRequests: false
+    }
+});
+
 export const projects = writable([]);
 export const teamprojects = writable({});
 export const issues = writable([]);
@@ -27,4 +33,9 @@ export const setAuthorized = (value) => {
     authorized = value;
 };
 
+export const setSettingGeneralMergeRequests = (value) => {
+    console.log(settings);
+    settings.general.mergeRequests = value;
+};
+
 export const displaymode = writable("kanban");