Implement Sub Groups for the Menu

ui/src/components/base/ItemGroup.vue

@@ -1,41 +1,49 @@
 <template>
   <v-list-group
+    :value="item.title"
     :prepend-icon="item.icon"
     :subgroup="subGroup"
     append-icon="mdi-menu-down"
     :color="store.barColor !== 'rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7)' ? 'white' : 'grey darken-1'"
   >
-    <template #activator>
-      <v-list-item v-if="text">
-        {{ computedText }}
+    <template #activator="{ props }">
+      <v-list-item v-if="text"
+                   v-bind="props"
+                   :tile="item.title"
+      >
+        {{ item.title }}
       </v-list-item>
 
-      <v-list-item 
-        v-else-if="item.avatar"
+      <v-list-item
+        v-else-if="item.icon"
+        v-bind="props"
+        :tile="item.title"
+        :prepend-icon="item.icon"
         class="align-self-center"
         color="white"
         contain
       >
-        <v-img src="https://demos.creative-tim.com/vuetify-material-dashboard/favicon.ico" />
       </v-list-item>
-
-
-      <v-list-item-title> {{ item.title }} </v-list-item-title>
     </template>
 
     <template v-for="(child, i) in children">
-      <v-list-group
-        v-if="child.children"
+      <div
+        v-if="child.visible"
         :key="`sub-group-${i}`"
-        :item="child"
-      />
+      >
+        <v-list-group
+          v-if="child.children"
+          :item="child"
+        />
+
+        <base-item
+          v-else
+          :id="child.id"
+          :key="`item-${i}`"
+          :item="child"
+        />
+      </div>
 
-      <v-list-item
-        v-else
-        :key="`item-${i}`"
-        :item="child"
-        text
-      />
     </template>
   </v-list-group>
 </template>
@@ -120,4 +128,10 @@ export default {
 .v-list-group__activator p {
   margin-bottom: 0;
 }
+
+.v-list-group {
+  --list-indent-size: 0px;
+  --prepend-width: 0px;
+}
+
 </style>

ui/src/components/core/Drawer.vue

@@ -54,10 +54,24 @@
             v-if="item.children"
             :key="`group-${i}`"
             :item="item"
+            :subGroup="item.subGroup"
+            :text="item.text"
           >
           <!--  -->
           </base-item-group>
 
+          <div
+            v-else-if="item.divider && !item.title"
+          >
+            <v-divider />
+          </div>
+
+          <div
+            v-else-if="item.divider && item.title"
+          >
+            <v-divider>{{ item.title }}</v-divider>
+          </div>
+
           <base-item
             v-else
             :id="item.id"
@@ -172,12 +186,50 @@ export default {
             to: '/services/vendors',
             visible: this.userStore.isUserDeveloper,
           },
+          // {
+          //   id: 'main-menu-button-admin',
+          //   title: this.$t('drawer.section.admin.title'),
+          //   icon: 'mdi-shield-account-variant-outline',
+          //   to: '/admin',
+          //   visible: this.userStore.userRoles.includes('slm-admin'),
+          // },
+          {
+            id: 'main-menu-divider-admin',
+            title: this.$t('drawer.section.admin.title'),
+            divider: true,
+            visible: true
+          },
           {
             id: 'main-menu-button-admin',
             title: this.$t('drawer.section.admin.title'),
             icon: 'mdi-shield-account-variant-outline',
-            to: '/admin',
+            group: '/admin',
+            subGroup:true,
+            text: true,
             visible: this.userStore.userRoles.includes('slm-admin'),
+            children: [
+              {
+                id: 'main-menu-button-admin-components',
+                title: this.$t('drawer.section.admin.components.title'),
+                icon: 'mdi-shield-account-variant-outline',
+                to: 'components',
+                visible: this.userStore.userRoles.includes('slm-admin'),
+              },
+              {
+                id: 'main-menu-button-admin-service-categories',
+                title: this.$t('drawer.section.admin.service-categories.title'),
+                icon: 'mdi-shield-account-variant-outline',
+                to: 'service-categories',
+                visible: this.userStore.userRoles.includes('slm-admin'),
+              },
+              {
+                id: 'main-menu-button-admin-service-vendors',
+                title: this.$t('drawer.section.admin.service-vendors.title'),
+                icon: 'mdi-shield-account-variant-outline',
+                to: 'service-vendors',
+                visible: this.userStore.userRoles.includes('slm-admin'),
+              }
+            ],
           },
         ]
       },

ui/src/localisation/en.json

@@ -26,7 +26,16 @@
         "title": "Services"
       },
       "admin": {
-        "title": "Admin"
+        "title": "Admin",
+        "components":{
+          "title": "Components"
+        },
+        "service-categories":{
+          "title": "Service Categories"
+        },
+        "service-vendors":{
+          "title": "Service Vendors"
+        }
       }
     }
   },

ui/src/pages/AdminComponentsPage.vue

@@ -0,0 +1,35 @@
+<template>
+
+  <div>
+    <!-- Version !-->
+    <versions-overview />
+  </div>
+</template>
+<script>
+
+import VersionsOverview from '@/components/admin/VersionsOverview'
+import {useServicesStore} from "@/stores/servicesStore";
+
+export default {
+  name: 'AdminComponentsPage',
+  components: { VersionsOverview, },
+  setup(){
+    const servicesStore = useServicesStore();
+    return {servicesStore};
+  },
+  computed: {
+    serviceVendors() {
+      return this.servicesStore.serviceVendors
+    },
+  },
+  created () {
+    this.servicesStore.getServiceVendors();
+  },
+  methods: {
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

ui/src/pages/AdminServiceCategoriesPage.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <!-- Service Categories !-->
+    <service-categories-table />
+  </div>
+</template>
+<script>
+
+import ServiceCategoriesTable from '@/components/service_offerings/ServiceCategoriesTable'
+import {useServicesStore} from "@/stores/servicesStore";
+
+export default {
+  name: 'AdminServiceCategoriesPage',
+  components: { ServiceCategoriesTable, },
+  setup(){
+    const servicesStore = useServicesStore();
+    return {servicesStore};
+  },
+  computed: {
+    serviceVendors() {
+      return this.servicesStore.serviceVendors
+    },
+  },
+  created () {
+    this.servicesStore.getServiceVendors();
+  },
+  methods: {
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

ui/src/pages/AdminServiceVendorsPage.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <!-- Service Vendors !-->
+    <service-vendor-table @serviceVendorClicked="onServiceVendorClicked" />
+
+    <!-- Developers !-->
+    <service-vendors-developers-table
+      v-if="selectedServiceVendor != null"
+      :service-vendor="selectedServiceVendor"
+      @closed="selectedServiceVendor = null"
+    />
+  </div>
+</template>
+
+<script>
+
+
+import ServiceVendorsDevelopersTable from '@/components/service_vendors/ServiceVendorDevelopersTable'
+import ServiceVendorTable from '@/components/service_vendors/ServiceVendorTable'
+import {useServicesStore} from "@/stores/servicesStore";
+
+export default {
+  name: 'AdminServiceVendorsPage',
+  components: {ServiceVendorTable, ServiceVendorsDevelopersTable,},
+  setup() {
+    const servicesStore = useServicesStore();
+    return {servicesStore};
+  },
+  data() {
+    return {
+      selectedServiceVendor: null,
+      editServiceVendor: false,
+      showCreateOrEditServiceVendorDialog: false,
+    }
+  },
+  computed: {
+    serviceVendors() {
+      return this.servicesStore.serviceVendors
+    },
+  },
+  created() {
+    this.servicesStore.getServiceVendors();
+  },
+  methods: {
+    onServiceVendorClicked(serviceVendor) {
+      this.selectedServiceVendor = serviceVendor
+    },
+  },
+}
+</script>
+
+<style scoped>
+</style>

ui/src/pages/router.js

@@ -149,6 +149,24 @@ const routes = [
         component: () => import('@/pages/AdminPage'),
         meta: { adminPermissionRequired: true },
       },
+      {
+        name: 'AdminComponents',
+        path: '/admin/components',
+        component: () => import('@/pages/AdminComponentsPage'),
+        meta: { adminPermissionRequired: true },
+      },
+      {
+        name: 'AdminServiceCategories',
+        path: '/admin/service-categories',
+        component: () => import('@/pages/AdminServiceCategoriesPage'),
+        meta: { adminPermissionRequired: true },
+      },
+      {
+        name: 'AdminServiceVendors',
+        path: '/admin/service-vendors',
+        component: () => import('@/pages/AdminServiceVendorsPage'),
+        meta: { adminPermissionRequired: true },
+      },
     ],
   }
 ];