✨ Add groups

app/components/artifact/ArtifactComponent.vue

@@ -1,5 +1,5 @@
 <template>
-    <ContentRow class="artifact pointer" @click="() => useRouter().push('artifacts/' + artifact.id)">
+    <ContentRow class="artifact pointer" @click="() => useRouter().push('/artifacts/' + artifact.id)">
         <ContentCell>{{ artifact.groupId }}</ContentCell>
         <ContentCell>{{ artifact.artifactId }}</ContentCell>
         <ContentCell><div v-if="artifact.versions" v-for="latest in [artifact.versions.at(0)]"><span v-if="latest">{{ latest.version }}</span></div></ContentCell>

app/components/artifact/ArtifactList.vue

@@ -18,13 +18,9 @@ import Table from "~/components/ui/table/Table.vue";
 import HeaderCell from "~/components/ui/table/HeaderCell.vue";
 import HeaderRow from "~/components/ui/table/HeaderRow.vue";
 
-const artifacts: Ref<Artifact[] | undefined> = ref(undefined);
-
-onMounted(() => {
-    Artifact.get((_artifacts: Artifact[]) => {
-        artifacts.value = _artifacts;
-    });
-})
+defineProps<{
+    artifacts: Artifact[]
+}>()
 </script>
 
 <style scoped>

app/components/group/Group.ts

@@ -1,9 +1,12 @@
 import axios from "axios";
+import type {Artifact} from "~/components/artifact/Artifact";
 
 export class Group
 {
     constructor(
-        public groupId: string
+        public id: string,
+        public groupId: string,
+        public artifacts: Artifact[]
     )
     {
     }
@@ -16,4 +19,13 @@ export class Group
                 onSuccess(response.data)
             });
     }
+
+    static getById(id: string, onSuccess: (group: Group) => void)
+    {
+        MavenApi.create().get<Group>("/groups/" + id)
+            .then((response) =>
+            {
+                onSuccess(response.data)
+            });
+    }
 }

app/components/group/GroupList.vue

@@ -3,7 +3,7 @@
         <HeaderRow>
             <HeaderCell>Group ID</HeaderCell>
         </HeaderRow>
-        <ContentRow v-for="group in groups">
+        <ContentRow style="cursor: pointer" v-for="group in groups" @click="useRouter().push('/groups/' + group.id)">
             <ContentCell>{{group.groupId}}</ContentCell>
         </ContentRow>
     </Table>

app/pages/artifacts/index.vue

@@ -1,12 +1,21 @@
 <template>
     <div class="content-l">
         <h1>Artifacts</h1>
-        <ArtifactList></ArtifactList>
+        <ArtifactList v-if="artifacts" :artifacts="artifacts"></ArtifactList>
     </div>
 </template>
 
 <script setup lang="ts">
 import ArtifactList from "~/components/artifact/ArtifactList.vue";
+import {Artifact} from "~/components/artifact/Artifact";
+
+const artifacts: Ref<Artifact[] | undefined> = ref(undefined);
+
+onMounted(() => {
+    Artifact.get((_artifacts: Artifact[]) => {
+        artifacts.value = _artifacts;
+    });
+})
 </script>
 
 <style scoped>

app/pages/groups/[group_id]/index.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="content-l" v-if="group">
+        <h1>Group: {{group.groupId}}</h1>
+        <ArtifactList :artifacts="group.artifacts"></ArtifactList>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {Group} from "~/components/group/Group";
+
+const group: Ref<Group | undefined> = ref();
+
+onMounted(() => {
+    const id = useRoute().params.group_id as string;
+    Group.getById(id, (_group: Group) => {
+        group.value = _group;
+    })
+})
+</script>
+
+<style scoped>
+
+</style>