feat: added GroupManager Component

src/components/GroupManager.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { faPlusCircle } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import {
+  NeButton,
+  NeInlineNotification,
+  NeSkeleton,
+  NeTextInput
+} from '@nethserver/vue-tailwind-lib'
+import { useGroups } from '@/composables/useGroups'
+import { onMounted } from 'vue'
+
+const { fetch, loading, data, error } = useGroups()
+
+onMounted(() => {
+  fetch()
+})
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div class="flex flex-col gap-y-4 sm:flex-row">
+      <NeButton class="sm:order-2 sm:ml-auto">
+        <template #prefix>
+          <FontAwesomeIcon :icon="faPlusCircle" />
+        </template>
+        {{ $t('user_manager.add_group') }}
+      </NeButton>
+      <NeTextInput :placeholder="$t('user_manager.search_group')" class="sm:order-1" />
+    </div>
+    <NeInlineNotification
+      v-if="error"
+      kind="error"
+      :title="$t('errors.generic')"
+      :description="$t(error?.message)"
+    />
+    <NeSkeleton v-if="loading" :lines="10" />
+    <!-- TODO: replace with proper table -->
+    <table v-else>
+      <thead>
+        <tr>
+          <th>{{ $t('user_manager.group_name') }}</th>
+          <th>{{ $t('user_manager.description') }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <template v-if="data?.groups != undefined && data.groups.length > 0">
+          <tr v-for="(group, index) in data?.groups" :key="index">
+            <td>{{ group.group }}</td>
+            <td>{{ group.description }}</td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>

src/composables/useGroups.ts

@@ -0,0 +1,30 @@
+import axios from 'axios'
+import { ref } from 'vue'
+
+interface Group {
+  description: string
+  group: string
+}
+
+interface ListGroupsResponse {
+  groups: Array<Group>
+}
+
+export function useGroups() {
+  const error = ref<Error>()
+  const loading = ref(true)
+  const data = ref<ListGroupsResponse>()
+
+  async function fetch() {
+    try {
+      data.value = (await axios.post<ListGroupsResponse>('/api/list-groups', {})).data
+    } catch (reason: any) {
+      error.value = reason
+      console.log(reason)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return { data, error, loading, fetch }
+}

src/views/UserManager.vue

@@ -6,6 +6,7 @@ import ContentPage from '@/components/ContentPage.vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faPlusCircle } from '@fortawesome/free-solid-svg-icons'
 import axios from 'axios'
+import GroupManager from '@/components/GroupManager.vue'
 
 interface User {
   display_name: string
@@ -84,15 +85,7 @@ onMounted(() => {
         </ol>
       </div>
       <div v-if="selectedTab == 'groups'">
-        <div class="flex flex-col gap-y-4 sm:flex-row">
-          <NeButton class="sm:order-2 sm:ml-auto">
-            <template #prefix>
-              <FontAwesomeIcon :icon="faPlusCircle" />
-            </template>
-            {{ $t('user_manager.add_group') }}
-          </NeButton>
-          <NeTextInput :placeholder="$t('user_manager.search_group')" class="sm:order-1" />
-        </div>
+        <GroupManager />
       </div>
     </template>
   </ContentPage>