diff --git a/src/components/UserProfileComponents/LargeProfileCard.vue b/src/components/UserProfileComponents/LargeProfileCard.vue index f8ec7c083c839b58825a4e0e5ac9e7222bc99b21..c3955059409b1a7896ea9d0df93310823f008a57 100644 --- a/src/components/UserProfileComponents/LargeProfileCard.vue +++ b/src/components/UserProfileComponents/LargeProfileCard.vue @@ -37,7 +37,7 @@ </li> <li> <router-link - to="" + :to="'/user/' + id + '/groups'" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white" >Mine grupper </router-link> @@ -51,9 +51,10 @@ </li> <li> <div - @click="logout" - class="cursor-pointer block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white" - >Logg ut + @click="logout" + class="cursor-pointer block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white" + > + Logg ut </div> </li> <li> @@ -143,10 +144,10 @@ export default { } return "../assets/defaultUserProfileImage.jpg"; }, - logout(){ - this.$store.commit('logout'); - this.$router.push('/') - } + logout() { + this.$store.commit("logout"); + this.$router.push("/"); + }, }, beforeMount() { this.getUser(); diff --git a/src/router/index.js b/src/router/index.js index aaf73035d6c411fa3070c9ef04d443d321b4de15..c08939d96dda4b8767218915320964be7152b88f 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -89,7 +89,13 @@ const routes = [ name: "notifications", component: () => import("../views/NotificationView.vue"), beforeEnter: guardRoute, - } + }, + { + path: "/user/:id/groups", + name: "myGroups", + component: () => import("../views/MyGroupsView.vue"), + beforeEnter: guardRoute, + }, ]; const router = createRouter({ diff --git a/src/views/MyGroupsView.vue b/src/views/MyGroupsView.vue new file mode 100644 index 0000000000000000000000000000000000000000..74714cd8414e2285beaca948cf6f243b98877efa --- /dev/null +++ b/src/views/MyGroupsView.vue @@ -0,0 +1,32 @@ +<template> + <div> + <div id="myGroups"> + <div>Mine grupper:</div> + <group-list :groupList="myGroups" /> + </div> + </div> +</template> + +<script> +import GroupList from "@/components/GroupeComponents/GroupList.vue"; +import { getMyGroups } from "@/utils/apiutil"; + +export default { + data() { + return { + myGroups: [], + }; + }, + components: { + GroupList, + }, + methods: { + async getMyGroups() { + this.myGroups = await getMyGroups(); + }, + }, + beforeMount() { + this.getMyGroups(); + }, +}; +</script>