Add settings page and remove unused features (#40) (#41)

* Add settings page * Rename function * Add if statements where merge requests are run * Fix loading issues text and pull request bug * Reformat * (#42) Remove not used features * Add board version env * Fix lint * #40 persisted MR settings * fix syntax --------- Co-authored-by: Tigran Muradyan <muradyan@amediateka.ru> Co-authored-by: Konstantin Polsky <kpolsky@ntv.ru>
use-the-force · Oct 23, 2023 · 8f17d10 · 8f17d10
1 parent f19a29a
commit 8f17d10
Show file tree

Hide file tree

Showing 12 changed files with 123 additions and 40 deletions.
diff --git a/.env.example b/.env.example
@@ -14,6 +14,7 @@ POSTGRES_DB=board
 POSTGRES_USER=board
 POSTGRES_PASSWORD=board
 
+VITE_BOARD_VERSION=0.5.0
 VITE_BOARD_API_URL=http://localhost:8000/api/v1
 VITE_GITLAB_API_URL=
 VITE_GITLAB_API_TOKEN=
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/board/frontend/lib/api/gitlab.js b/board/frontend/lib/api/gitlab.js
@@ -1,3 +1,6 @@
+import { get } from "svelte/store";
+import { settingsMergeRequests } from "../store.js";
+
 const GITLAB_API_URL = import.meta.env.VITE_GITLAB_API_URL;
 const GITLAB_API_TOKEN = import.meta.env.VITE_GITLAB_API_TOKEN;
 
@@ -38,6 +41,7 @@ export const getAllProjectsMembers = async (projectIds) => {
     const uniqMembers = [...new Map(members.map((i) => [i.id, i])).values()];
     const filteredMembers = uniqMembers.filter(i => i.state === "active");
     console.log(">>> filteredMembers", filteredMembers);
+
     return filteredMembers;
 };
 
@@ -76,29 +80,38 @@ export const getAllProjectsIssues = async (projectIds) => {
 };
 
 export const getProjectIssues = async (projectId) => {
+    const storeSettingsMergeRequests = get(settingsMergeRequests);
     const perPage = 100;
     const issues = [];
     let page = 1;
     let data = null;
 
     do {
         try {
-            const res = await fetch(`${GITLAB_API_URL}/projects/${projectId}/issues?state=opened&per_page=${perPage}&page=${page}`,
+            const res = await fetch(
+                `${GITLAB_API_URL}/projects/${projectId}/issues?state=opened&per_page=${perPage}&page=${page}`,
                 {
                     headers: {
                         "PRIVATE-TOKEN": GITLAB_API_TOKEN
                     }
-                });
+                }
+            );
             data = await res.json();
+
             for (const i of data) {
-                const mrs = await getProjectIssueMRs(projectId, i.iid);
-                i.merge_requests = mrs;
+                i.merge_requests = [];
+
+                if (storeSettingsMergeRequests) {
+                    i.merge_requests = await getProjectIssueMergeRequests(projectId, i.iid);
+                }
             }
+
             issues.push(...data);
         } catch {
         }
         ++page;
     } while (data.length === perPage || !data);
+
     return issues;
 };
 
@@ -137,15 +150,15 @@ export const getProjectLabels = async (projectId) => {
     return labels;
 };
 
-export const getProjectIssueMRs = async (projectId, issueId) => {
+export const getProjectIssueMergeRequests = async (projectId, issueId) => {
     const res = await fetch(`${GITLAB_API_URL}/projects/${projectId}/issues/${issueId}/related_merge_requests`,
         {
             headers: {
                 "PRIVATE-TOKEN": GITLAB_API_TOKEN
             }
         });
-    const data = await res.json();
-    return data;
+
+    return await res.json();
 };
 
 export const updateIssueLabels = async (projectId, issueId, labels) => {

diff --git a/board/frontend/lib/components/SubNav.svelte b/board/frontend/lib/components/SubNav.svelte
@@ -42,10 +42,16 @@
             <div class="float-end">
                 <div class="float-start mx-3">
                     <div class="input-group">
-                        <button class="btn btn-outline-secondary {$displaymode == "kanban" ? "active" : ""}" type="button" on:click={handleKanbanMode}>
+                        <button
+                                class="btn btn-outline-secondary {$displaymode == "kanban" ? "active" : ""}"
+                                type="button"
+                                on:click={handleKanbanMode}>
                             <span class="bi bi-kanban"></span>
                         </button>
-                        <button class="btn btn-outline-secondary {$displaymode == "list" ? "active" : ""}" type="button" on:click={handleListMode}>
+                        <button
+                                class="btn btn-outline-secondary {$displaymode == "list" ? "active" : ""}"
+                                type="button"
+                                on:click={handleListMode}>
                             <span class="bi bi-list"></span>
                         </button>
                     </div>

diff --git a/board/frontend/lib/components/board/IssuesRow.svelte b/board/frontend/lib/components/board/IssuesRow.svelte
@@ -63,8 +63,7 @@
                     (iss.merge_requests.length > 0 && iss.merge_requests[0].assignee && iss.merge_requests[0].assignee.id != iss.assignee.id && iss.assignee.id != member.id ? "in_review" : ""),
                 ].join(" ")}>
                     <td class="status">
-                        <select class="form-select form-select-sm"
-                                on:change={e => {handleChangeIssueStatus(e.target.value, iss)}}>
+                        <select class="form-select form-select-sm" on:change={e => {handleChangeIssueStatus(e.target.value, iss)}}>
                             {#each doGetTeamColumns() as c, ci}
                                 <optgroup label={c.name}>
                                     {#each getUniqLabelNamesByIds(c.gitlab_label_ids) as label}
@@ -113,7 +112,6 @@
     </div>
 {/if}
 
-
 <style>
     table {
         font-size: 14px;

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/board/UserBoard.svelte b/board/frontend/lib/components/board/UserBoard.svelte
@@ -1,8 +1,8 @@
 <script>
     import IssuesColumn from "./IssuesColumn.svelte";
     import IssuesRow from "./IssuesRow.svelte";
-    import {beforeUpdate, afterUpdate} from "svelte";
-    import { issues, activeProjectFilter, teamprojects, displaymode, teams } from "../../store";
+    import { beforeUpdate, afterUpdate } from "svelte";
+    import { settingsMergeRequests, issues, activeProjectFilter, teamprojects, displaymode, teams } from "../../store";
     import { getLabelNameById } from "../utils/labels";
     import { getTeamColumns } from "../utils/columns";
     import { getMemberAvatar } from "../utils/member";
@@ -41,9 +41,12 @@
                 if (i.assignee && i.assignee.id == member.id && col.gitlab_label_ids.filter(x => i.labels.includes(getLabelNameById(x))).length > 0) {
                     return i;
                 }
-                // Issues by merge requests
-                if (i.merge_requests.filter(mr => member.id && mr.assignee && mr.assignee.id == member.id).length > 0 && col.gitlab_label_ids.filter(x => i.labels.includes(getLabelNameById(x))).length > 0) {
-                    return i;
+
+                if ($settingsMergeRequests) {
+                    // Issues by merge requests
+                    if (i.merge_requests.filter(mr => member.id && mr.assignee && mr.assignee.id == member.id).length > 0 && col.gitlab_label_ids.filter(x => i.labels.includes(getLabelNameById(x))).length > 0) {
+                        return i;
+                    }
                 }
             }
         });
@@ -119,7 +122,7 @@
         margin: 0;
     }
 
-    .assignee-wrap:hover .assignee-name{
+    .assignee-wrap:hover .assignee-name {
         text-decoration: underline;
     }
 

diff --git a/board/frontend/lib/components/layout/Footer.svelte b/board/frontend/lib/components/layout/Footer.svelte
@@ -6,7 +6,7 @@
     <div class="container">
         <div class="row py-5 my-5">
             <div class="col-6 mb-3 offset-2">
-                <p class="version mb-4">GitLab Board 0.4.1</p>
+                <p class="version mb-4">GitLab Board {import.meta.env.VITE_BOARD_VERSION}</p>
                 <p class="p-small">Kanban board for GitLab Community Edition.</p>
             </div>
 

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
@@ -1,6 +1,7 @@
 <script>
     import { onMount } from "svelte";
     import {
+        settingsMergeRequests,
         projects,
         teamprojects,
         members,
@@ -23,7 +24,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";
@@ -96,7 +97,12 @@
         $members = await getAllProjectsMembers($projects.map(({id}) => id));
         $members = [...$members, {name: "No Assignee", id: null}].sort((a, b) => a.name.localeCompare(b.name));
 
-        $loadingBoardInfo = "Fetching issues and pull requests...";
+        if ($settingsMergeRequests) {
+            $loadingBoardInfo = "Fetching issues and pull requests...";
+        } else {
+            $loadingBoardInfo = "Fetching issues...";
+        }
+
         $issues = await getAllProjectsIssues($projects.map(({id}) => id));
         showLoading = false;
     });
@@ -111,27 +117,8 @@
 
 <Offcanvas isOpen={showBoardSettings} toggle={toggleBoardSettings} placement="end" scroll style="width: 50vw;">
     <Settings/>
-    <!-- {#each $statuses as status, index (status.name)}
-        <div>
-        {status.name}
-        </div>
-    {/each} -->
 </Offcanvas>
 
-<!-- <Offcanvas isOpen={columnSettingsOpen} toggle={toggleColumnSettings} placement="end" scroll style="width: 30vw;">
-  {#each $statuses as status, index (status.name)}
-    <div animate:flip
-      draggable={true}
-      on:dragstart={event => dragstart(event, index)}
-      on:drop|preventDefault={event => drop(event, index)}
-      on:dragover={() => {return false}}
-      on:dragenter={() => hovering = index}>
-      {status.name}
-    </div>
-  {/each}
-</Offcanvas> -->
-
-
 <Container fluid class="py-4 bg-white">
     <div>
         {#if showLoading}

diff --git a/board/frontend/lib/components/pages/Settings.svelte b/board/frontend/lib/components/pages/Settings.svelte
@@ -0,0 +1,62 @@
+<script>
+    import {
+        Container,
+        Styles
+    } from "sveltestrap";
+    import Navbar from "../layout/Navbar.svelte";
+    import Footer from "../layout/Footer.svelte";
+    import {settingsMergeRequests} from "../../store.js";
+
+    const handleChangeSettingGeneralMergeRequests = async (e) => {
+        $settingsMergeRequests = e.target.checked;
+    }
+</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"
+                                    checked={$settingsMergeRequests == "true"}
+                                    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);
 
+const storedSettingsMergeRequests = localStorage.getItem("settingsMergeRequests");
+export const settingsMergeRequests = writable(storedSettingsMergeRequests);
+settingsMergeRequests.subscribe(val => {
+    localStorage.setItem("settingsMergeRequests", val);
+});
+
 export const projects = writable([]);
 export const teamprojects = writable({});
 export const issues = writable([]);