[gui] Create configuration menu option in the header

wandec · Apr 7, 2022 · 422d29d · 422d29d
1 parent 999ffda
commit 422d29d
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 3 deletions.
diff --git a/web/server/vue-cli/src/components/Layout/TheHeader.vue b/web/server/vue-cli/src/components/Layout/TheHeader.vue
@@ -78,6 +78,45 @@
       </v-btn>
     </span>
 
+    <v-menu
+      v-if="showConfigItems"
+      offset-y
+    >
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn
+          text
+          :class="configureMenuItems.map(c => c.route).includes($route.name) &&
+            'v-btn--active router-link-active'"
+          v-bind="attrs"
+          v-on="on"
+        >
+          <v-icon left>
+            mdi-cog-outline
+          </v-icon>
+          Configuration
+          <v-icon right>
+            mdi-menu-down
+          </v-icon>
+        </v-btn>
+      </template>
+
+      <v-list>
+        <v-list-item-group color="primary">
+          <v-list-item
+            v-for="item in configureMenuItems"
+            :key="item.title"
+            :to="{ name: item.route }"
+            exact
+          >
+            <v-list-item-avatar class="mr-1">
+              <v-icon>{{ item.icon }}</v-icon>
+            </v-list-item-avatar>
+            <v-list-item-title>{{ item.title }}</v-list-item-title>
+          </v-list-item>
+        </v-list-item-group>
+      </v-list>
+    </v-menu>
+
     <v-divider
       v-if="showUserInfo && menuItems.length"
       class="mx-2"
@@ -158,6 +197,18 @@ export default {
           query: defaultStatisticsFilterValues,
           hide: [ "products", "login", "404" ]
         }
+      ],
+      configureMenuItems: [
+        {
+          title: "Cleanup Plan",
+          icon: "mdi-sign-direction",
+          route: "cleanup-plan"
+        },
+        {
+          title: "Source Component",
+          icon: "mdi-puzzle-outline",
+          route: "source-component"
+        }
       ]
     };
   },
@@ -192,6 +243,11 @@ export default {
 
     showUserInfo() {
       return this.authParams?.requiresAuthentication && this.isAuthenticated;
+    },
+
+    showConfigItems() {
+      return ![ "products", "login", "404" ].includes(this.$route.name) &&
+        this.showMenuItems;
     }
   },
 

diff --git a/web/server/vue-cli/src/components/Report/CleanupPlan/CleanupPlanSubtitle.vue b/web/server/vue-cli/src/components/Report/CleanupPlan/CleanupPlanSubtitle.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="subtitle-1">
+    Use cleanup plans to track progress of reports in your product.
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CleanupPlanSubtitle"
+};
+</script>
diff --git a/web/server/vue-cli/src/components/Report/CleanupPlan/ManageCleanupPlanDialog.vue b/web/server/vue-cli/src/components/Report/CleanupPlan/ManageCleanupPlanDialog.vue
@@ -22,8 +22,8 @@
             Manage cleanup plans
           </v-row>
 
-          <v-row class="subtitle-1">
-            Use cleanup plans to track progress of reports in your product.
+          <v-row>
+            <cleanup-plan-subtitle />
           </v-row>
         </v-container>
 
@@ -58,11 +58,13 @@
 </template>
 
 <script>
+import CleanupPlanSubtitle from "./CleanupPlanSubtitle";
 import ListCleanupPlans from "./ListCleanupPlans";
 
 export default {
   name: "ManageCleanupPlanDialog",
   components: {
+    CleanupPlanSubtitle,
     ListCleanupPlans
   },
   props: {

diff --git a/web/server/vue-cli/src/components/Report/CleanupPlan/index.js b/web/server/vue-cli/src/components/Report/CleanupPlan/index.js
@@ -1,10 +1,12 @@
+import CleanupPlanSubtitle from "./CleanupPlanSubtitle";
 import EditCleanupPlanDialog from "./EditCleanupPlanDialog";
 import ListCleanupPlans from "./ListCleanupPlans";
 import ManageCleanupPlanDialog from "./ManageCleanupPlanDialog";
 import RemoveCleanupPlanDialog from "./RemoveCleanupPlanDialog";
 import SetCleanupPlanBtn from "./SetCleanupPlanBtn";
 
 export {
+  CleanupPlanSubtitle,
   EditCleanupPlanDialog,
   ListCleanupPlans,
   ManageCleanupPlanDialog,

diff --git a/web/server/vue-cli/src/router/index.js b/web/server/vue-cli/src/router/index.js
@@ -97,7 +97,17 @@ export default new Router({
           path: "report-detail",
           name: "report-detail",
           component: () => import("@/views/ReportDetail")
-        }
+        },
+        {
+          path: "cleanup-plan",
+          name: "cleanup-plan",
+          component: () => import("@/views/CleanupPlan")
+        },
+        {
+          path: "source-component",
+          name: "source-component",
+          component: () => import("@/views/SourceComponent")
+        },
       ]
     }
   ]

diff --git a/web/server/vue-cli/src/views/CleanupPlan.vue b/web/server/vue-cli/src/views/CleanupPlan.vue
@@ -0,0 +1,20 @@
+<template>
+  <v-container>
+    <h1>Manage Cleanup Plans</h1>
+    <cleanup-plan-subtitle />
+
+    <list-cleanup-plans />
+  </v-container>
+</template>
+
+<script>
+import {
+  CleanupPlanSubtitle,
+  ListCleanupPlans
+} from "@/components/Report/CleanupPlan";
+
+export default {
+  name: "CleanupPlan",
+  components: { CleanupPlanSubtitle, ListCleanupPlans }
+};
+</script>
diff --git a/web/server/vue-cli/src/views/SourceComponent.vue b/web/server/vue-cli/src/views/SourceComponent.vue
@@ -0,0 +1,15 @@
+<template>
+  <v-container>
+    <h1>Manage source components</h1>
+    <list-source-components />
+  </v-container>
+</template>
+
+<script>
+import { ListSourceComponents } from "@/components/Report/SourceComponent";
+
+export default {
+  name: "SourceComponent",
+  components: { ListSourceComponents }
+};
+</script>