Add Group View

app/assets/composable/group.ts

@@ -0,0 +1,66 @@
+import { ref, watch } from 'vue'
+import axios from 'axios'
+import type { GroupInterface } from '@userfrosting/sprinkle-account/types'
+import { type AlertInterface, AlertStyle } from '@userfrosting/sprinkle-core/types'
+
+/**
+ * Create GroupAPI interface, based on GroupInterface
+ */
+interface GroupApi extends GroupInterface {
+    users_count: number
+}
+
+/**
+ * API Composable
+ */
+export function useGroupApi(route: any) {
+    const loading = ref(false)
+    const error = ref<AlertInterface | null>()
+    const group = ref<GroupApi>({
+        id: 0,
+        name: '',
+        slug: '',
+        description: '',
+        icon: '',
+        created_at: '',
+        updated_at: '',
+        deleted_at: null,
+        users_count: 0
+    })
+
+    async function fetchApi() {
+        loading.value = true
+        error.value = null
+
+        await axios
+            .get<GroupApi>('/api/groups/g/' + route.params.slug)
+            .then((response) => {
+                group.value = response.data
+            })
+            .catch((err) => {
+                error.value = {
+                    ...{
+                        description: 'An error as occurred',
+                        style: AlertStyle.Danger,
+                        closeBtn: true
+                    },
+                    ...err.response.data
+                }
+            })
+            .finally(() => {
+                loading.value = false
+            })
+    }
+
+    watch(
+        () => route.params.slug,
+        () => {
+            fetchApi()
+        },
+        { immediate: true }
+    )
+
+    return { group, error, loading }
+}
+
+export type { GroupApi }

app/assets/views/Group/GroupInfo.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { GroupApi } from '../../composable/group'
+import { defineProps } from 'vue'
+
+const { group } = defineProps<{
+    group: GroupApi
+}>()
+</script>
+
+<template>
+    <UFCardBox>
+        <div class="uk-text-center">
+            <font-awesome-icon v-if="group.icon" :icon="group.icon" class="fa-5x" />
+        </div>
+        <h3 class="uk-text-center uk-margin-remove">{{ group.name }}</h3>
+        <p class="uk-text-meta">
+            {{ group.description }}
+        </p>
+
+        <div uk-grid>
+            <div class="uk-width-auto@m">
+                <strong><font-awesome-icon icon="users" /> Users</strong>
+            </div>
+            <div class="uk-width-expand@m uk-text-right">
+                <span class="uk-badge">{{ group.users_count }}</span>
+            </div>
+        </div>
+        <!-- TODO : Edit Btn -->
+        <!-- TODO : DElete Btn -->
+    </UFCardBox>
+</template>

app/assets/views/Group/GroupUsers.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import moment from 'moment'
+import { defineProps } from 'vue'
+
+const { slug } = defineProps<{
+    slug: string
+}>()
+</script>
+
+<template>
+    <UFCardBox title="Group Users">
+        <UFSprunjeTable :dataUrl="'/api/groups/g/' + slug + '/users'">
+            <template #header>
+                <UFSprunjeHeader sort="name">User</UFSprunjeHeader>
+                <UFSprunjeHeader sort="last_activity">Last Activity</UFSprunjeHeader>
+                <UFSprunjeHeader sort="status">Status</UFSprunjeHeader>
+                <UFSprunjeHeader>Actions</UFSprunjeHeader>
+            </template>
+
+            <template #body="{ item }">
+                <UFSprunjeColumn>
+                    <strong>
+                        <RouterLink
+                            :to="{
+                                name: 'admin.user',
+                                params: { user_name: item.user_name }
+                            }">
+                            {{ item.full_name }} ({{ item.user_name }})
+                        </RouterLink>
+                    </strong>
+                    <div class="uk-text-meta">{{ item.email }}</div>
+                </UFSprunjeColumn>
+                <UFSprunjeColumn>
+                    <div>
+                        {{ moment(item.last_activity.occurred_at).format('dddd') }}
+                    </div>
+                    <div>
+                        {{ moment(item.last_activity.occurred_at).format('MMM Do, YYYY h:mm a') }}
+                    </div>
+                    <i>{{ item.last_activity.description }}</i>
+                </UFSprunjeColumn>
+                <UFSprunjeColumn></UFSprunjeColumn>
+                <UFSprunjeColumn></UFSprunjeColumn>
+            </template>
+        </UFSprunjeTable>
+    </UFCardBox>
+</template>

app/assets/views/GroupView.vue

@@ -1,3 +1,26 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { useGroupApi } from '../composable/group'
+import GroupInfo from './Group/GroupInfo.vue'
+import GroupUsers from './Group/GroupUsers.vue'
+
+const route = useRoute()
+const { group, error } = useGroupApi(route)
+</script>
+
 <template>
-    <UFHeaderPage title="Group" />
+    <UFHeaderPage title="Group details" caption="Group information page" />
+    <template v-if="error">
+        <UFAlertContainer :alert="error" />
+    </template>
+    <template v-else>
+        <div uk-grid>
+            <div class="uk-width-1-3">
+                <GroupInfo :group="group" />
+            </div>
+            <div class="uk-width-2-3">
+                <GroupUsers :slug="group.slug" />
+            </div>
+        </div>
+    </template>
 </template>