From 7ce4e2f397405e68ee18c8f1ba31f21636253e06 Mon Sep 17 00:00:00 2001
From: Erik Borgeteien Hansen <erik@erikbhan.no>
Date: Fri, 29 Apr 2022 15:37:12 +0200
Subject: [PATCH] start work
---
.../BaseComponents/CommunityHeader.vue | 44 +++++++++-----
.../Admin/AdministrateMembers.vue | 43 +++++++++++++
.../CommunityHamburger.vue | 29 +++++----
.../CommunityComponents/CommunityHome.vue | 1 -
.../CommunityComponents/MemberList.vue | 21 +++----
src/router/index.js | 5 ++
src/utils/apiutil.js | 20 +++----
.../CommunityViews/CommunityAdminView.vue | 60 +++++++++++++++++++
src/views/CommunityViews/MemberListView.vue | 9 ++-
tests/unit/apiutil-memberlist.spec.js | 54 ++++++++---------
tests/unit/community-hamburger.spec.js | 14 ++---
11 files changed, 214 insertions(+), 86 deletions(-)
create mode 100644 src/components/CommunityComponents/Admin/AdministrateMembers.vue
create mode 100644 src/views/CommunityViews/CommunityAdminView.vue
diff --git a/src/components/BaseComponents/CommunityHeader.vue b/src/components/BaseComponents/CommunityHeader.vue
index ba09d59..6e2b31a 100644
--- a/src/components/BaseComponents/CommunityHeader.vue
+++ b/src/components/BaseComponents/CommunityHeader.vue
@@ -28,14 +28,31 @@
</div>
</div>
<div>
- <span class="hidden sm:block"> <!-- Legg dette til i button: v-if="adminStatus" -->
+ <span class="hidden sm:block">
+ <!-- Legg dette til i button: v-if="adminStatus" -->
- <svg @click="toggle" xmlns="http://www.w3.org/2000/svg" class="w-9 h-9 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+ <svg
+ @click="toggle"
+ xmlns="http://www.w3.org/2000/svg"
+ class="w-9 h-9 cursor-pointer"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ >
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="2"
+ d="M4 6h16M4 12h16M4 18h16"
+ />
</svg>
- <CommunityHamburger v-if="hamburgerOpen" class="origin-top-right absolute right-0" :community-i-d="community.communityId"/> <!-- class="absolute" -->
-
+ <CommunityHamburger
+ v-if="hamburgerOpen"
+ class="origin-top-right absolute right-0"
+ :community-i-d="community.communityId"
+ />
+ <!-- class="absolute" -->
</span>
</div>
</div>
@@ -48,10 +65,10 @@ export default {
components: {
CommunityHamburger,
},
- data(){
- return{
+ data() {
+ return {
hamburgerOpen: false,
- }
+ };
},
props: {
adminStatus: Boolean,
@@ -62,17 +79,16 @@ export default {
visibility: Number,
location: String,
picture: String,
- }
+ },
},
methods: {
- toggle: function (){
- if(this.hamburgerOpen){
+ toggle: function () {
+ if (this.hamburgerOpen) {
this.hamburgerOpen = false;
- }
- else{
+ } else {
this.hamburgerOpen = true;
}
- }
+ },
},
};
</script>
diff --git a/src/components/CommunityComponents/Admin/AdministrateMembers.vue b/src/components/CommunityComponents/Admin/AdministrateMembers.vue
new file mode 100644
index 0000000..54668d9
--- /dev/null
+++ b/src/components/CommunityComponents/Admin/AdministrateMembers.vue
@@ -0,0 +1,43 @@
+<template>
+ <ul>
+ <li v-for="member in memberlist" :key="member.userId">
+ <UserListItemCard :admin="admin" :user="member" />
+ </li>
+ </ul>
+</template>
+
+<script>
+import UserListItemCard from "../UserProfileComponents/UserListItemCard.vue";
+import { GetMembersOfCommunity, GetCommunity } from "@/utils/apiutil";
+
+export default {
+ data() {
+ return {
+ memberlist: [],
+ community: {},
+ };
+ },
+ components: {
+ UserListItemCard,
+ },
+ props: {
+ admin: Boolean,
+ },
+ methods: {
+ getAllMembersOfCommunity: async function () {
+ this.memberlist = await GetMembersOfCommunity(
+ this.$router.currentRoute.value.params.id
+ );
+ },
+ getCommunity: async function () {
+ this.community = await GetCommunity(
+ this.$router.currentRoute.value.params.id
+ );
+ },
+ },
+ beforeMount() {
+ this.getAllMembersOfCommunity();
+ this.getCommunity();
+ },
+};
+</script>
diff --git a/src/components/CommunityComponents/CommunityHamburger.vue b/src/components/CommunityComponents/CommunityHamburger.vue
index 73e9d64..e32015c 100644
--- a/src/components/CommunityComponents/CommunityHamburger.vue
+++ b/src/components/CommunityComponents/CommunityHamburger.vue
@@ -1,33 +1,33 @@
<template>
<div
- id="dropdown"
- class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
+ id="dropdown"
+ class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
>
- <ul class="py-1" >
+ <ul class="py-1">
<li id="newItem">
<router-link
- to="/addNewItem"
- 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"
- >Opprett Utleie</router-link
+ to="/addNewItem"
+ 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"
+ >Opprett Utleie</router-link
>
</li>
<li id="getMembers">
<router-link
- :to="'/group/' + communityID + '/memberlist'"
- 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"
- >Se Medlemmer
+ :to="'/group/' + communityID + '/memberlist'"
+ 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"
+ >Se Medlemmer
</router-link>
</li>
<li id="adminGroup">
<router-link
- :to="'/group/' + communityID + '/memberlist'"
- 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"
- >Administrer Gruppe</router-link
+ :to="'/group/' + communityID + '/admin'"
+ 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"
+ >Administrer Gruppe</router-link
>
</li>
<li id="leaveGroup">
<div
- class="cursor-pointer block py-2 px-4 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+ class="cursor-pointer block py-2 px-4 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
Forlat Gruppe
</div>
@@ -42,6 +42,5 @@ export default {
props: {
communityID: Number,
},
-}
+};
</script>
-
diff --git a/src/components/CommunityComponents/CommunityHome.vue b/src/components/CommunityComponents/CommunityHome.vue
index 8004946..8856f6a 100644
--- a/src/components/CommunityComponents/CommunityHome.vue
+++ b/src/components/CommunityComponents/CommunityHome.vue
@@ -46,7 +46,6 @@ import CommunityHeader from "@/components/BaseComponents/CommunityHeader";
import { GetCommunity, GetListingsInCommunity } from "@/utils/apiutil";
export default {
name: "SearchItemListComponent",
-
components: {
CommunityHeader,
ItemCard,
diff --git a/src/components/CommunityComponents/MemberList.vue b/src/components/CommunityComponents/MemberList.vue
index edd765f..a86630f 100644
--- a/src/components/CommunityComponents/MemberList.vue
+++ b/src/components/CommunityComponents/MemberList.vue
@@ -1,5 +1,4 @@
<template>
- <CommunityHeader :admin-status="false" :community="community" class="mb-5 mt-5"/>
<ul>
<li v-for="member in memberlist" :key="member.userId">
<user-list-item-card :admin="admin" :user="member" />
@@ -10,7 +9,6 @@
<script>
import UserListItemCard from "../UserProfileComponents/UserListItemCard.vue";
import { GetMembersOfCommunity, GetCommunity } from "@/utils/apiutil";
-import CommunityHeader from "@/components/BaseComponents/CommunityHeader";
export default {
data() {
@@ -20,23 +18,26 @@ export default {
};
},
components: {
- CommunityHeader,
UserListItemCard,
},
props: {
admin: Boolean,
},
- methods:{
- getAllMembersOfCommunity: async function(){
- this.memberlist = await GetMembersOfCommunity(this.$router.currentRoute.value.params.id);
+ methods: {
+ getAllMembersOfCommunity: async function () {
+ this.memberlist = await GetMembersOfCommunity(
+ this.$router.currentRoute.value.params.id
+ );
+ },
+ getCommunity: async function () {
+ this.community = await GetCommunity(
+ this.$router.currentRoute.value.params.id
+ );
},
- getCommunity: async function(){
- this.community = await GetCommunity(this.$router.currentRoute.value.params.id);
- }
},
beforeMount() {
this.getAllMembersOfCommunity();
this.getCommunity();
- }
+ },
};
</script>
diff --git a/src/router/index.js b/src/router/index.js
index c8010e3..f6b7cbb 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -102,6 +102,11 @@ const routes = [
name: "test",
component: () => import("../views/TestView.vue"),
},
+ {
+ path: "/group/:id/admin",
+ name: "CommunityAdmin",
+ component: () => import("@/views/CommunityViews/CommunityAdminView.vue"),
+ },
];
const router = createRouter({
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index 254d776..4d7daa4 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -175,14 +175,14 @@ export async function GetListingsInCommunity(communityID) {
}
export async function GetMembersOfCommunity(communityID) {
- return axios
- .get(API_URL + "community/" + communityID + "/members", {
- headers: tokenHeader(),
- })
- .then((response) => {
- return response.data;
- })
- .catch((error) => {
- console.error(error);
- });
+ return axios
+ .get(API_URL + "community/" + communityID + "/members", {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ return response.data;
+ })
+ .catch((error) => {
+ console.error(error);
+ });
}
diff --git a/src/views/CommunityViews/CommunityAdminView.vue b/src/views/CommunityViews/CommunityAdminView.vue
new file mode 100644
index 0000000..c7bbc03
--- /dev/null
+++ b/src/views/CommunityViews/CommunityAdminView.vue
@@ -0,0 +1,60 @@
+<template>
+ <div class="flex border-b border-gray-200 dark:border-gray-700">
+ <button
+ v-for="(tab, index) in tabs"
+ :key="tab"
+ @click="changeTab(tab, index)"
+ class="h-10 px-4 py-2 -mb-px text-sm text-center bg-transparent border-b-2 sm:text-base whitespace-nowrap focus:outline-none"
+ :class="[activeTab === index ? activeClasses : inactiveClasses]"
+ >
+ {{ tabNames[index] }}
+ </button>
+ </div>
+ <MemberList v-if="loadedComponent === 'MemberList'" />
+</template>
+
+<script>
+import MemberList from "@/components/CommunityComponents/MemberList.vue";
+
+export default {
+ name: "CommunityAdminView",
+ components: {
+ MemberList,
+ },
+ data() {
+ return {
+ tabs: ["MemberList", "Hey"],
+ tabNames: ["Medlemsliste", "Medlemsforespørsler"],
+ activeTab: 0,
+ loadedComponent: "MemberList",
+ };
+ },
+ methods: {
+ changeTab(tab, index) {
+ this.loadedComponent = tab;
+ this.activeTab = index;
+ },
+ },
+ computed: {
+ activeClasses() {
+ return {
+ "text-blue-600": true,
+ "border-blue-500": true,
+ "dark:border-blue-400": true,
+ "dark:text-blue-300": true,
+ };
+ },
+ inactiveClasses() {
+ return {
+ "text-gray-700": true,
+ "border-transparent": true,
+ "dark:text-white": true,
+ "cursor-base": true,
+ "hover:border-gray-400": true,
+ };
+ },
+ },
+};
+</script>
+
+<style></style>
diff --git a/src/views/CommunityViews/MemberListView.vue b/src/views/CommunityViews/MemberListView.vue
index f3b0bd4..660cff6 100644
--- a/src/views/CommunityViews/MemberListView.vue
+++ b/src/views/CommunityViews/MemberListView.vue
@@ -1,12 +1,19 @@
<template>
- <MemberList/>
+ <CommunityHeader
+ :admin-status="false"
+ :community="community"
+ class="mb-5 mt-5"
+ />
+ <MemberList />
</template>
<script>
+import CommunityHeader from "@/components/BaseComponents/CommunityHeader";
import MemberList from "@/components/CommunityComponents/MemberList.vue";
export default {
components: {
+ CommunityHeader,
MemberList,
},
};
diff --git a/tests/unit/apiutil-memberlist.spec.js b/tests/unit/apiutil-memberlist.spec.js
index b3e4132..34fb550 100644
--- a/tests/unit/apiutil-memberlist.spec.js
+++ b/tests/unit/apiutil-memberlist.spec.js
@@ -1,37 +1,35 @@
-import {GetMembersOfCommunity} from "@/utils/apiutil";
+import { GetMembersOfCommunity } from "@/utils/apiutil";
import axios from "axios";
jest.mock("axios");
describe("testing mocking of apiutil.js", () => {
+ it("check that existing group returns correct members", async () => {
+ const expectedResponse = {
+ member1: {
+ userId: 2,
+ email: "erik@erik.com",
+ firstName: "erik",
+ lastName: "hansen",
+ address: "gløshaugen",
+ picture: "ok",
+ },
- it("check that existing group returns correct members", async () => {
+ member2: {
+ userId: 1,
+ email: "test@test.com",
+ firstName: "test",
+ lastName: "testesen",
+ address: "oslo",
+ picture: "ok",
+ },
+ };
- const expectedResponse = {
- member1: {
- userId: 2,
- email: "erik@erik.com",
- firstName: "erik",
- lastName: "hansen",
- address: "gløshaugen",
- picture: "ok"
- },
+ axios.get.mockImplementation(() =>
+ Promise.resolve({ data: expectedResponse })
+ );
- member2: {
- userId: 1,
- email: "test@test.com",
- firstName: "test",
- lastName: "testesen",
- address: "oslo",
- picture: "ok"
- },
- };
-
- axios.get.mockImplementation(() =>
- Promise.resolve({ data: expectedResponse })
- );
-
- const communityMembersResponse = await GetMembersOfCommunity(4040);
- expect(communityMembersResponse).toBe(expectedResponse);
- })
+ const communityMembersResponse = await GetMembersOfCommunity(4040);
+ expect(communityMembersResponse).toBe(expectedResponse);
+ });
});
diff --git a/tests/unit/community-hamburger.spec.js b/tests/unit/community-hamburger.spec.js
index 658e30e..a6834e8 100644
--- a/tests/unit/community-hamburger.spec.js
+++ b/tests/unit/community-hamburger.spec.js
@@ -2,12 +2,12 @@ import { shallowMount } from "@vue/test-utils";
import CommunityHamburger from "@/components/CommunityComponents/CommunityHamburger.vue";
describe("CommunityHamburger elements rendering", () => {
- it("renders all li fields", () => {
- const wrapper = shallowMount(CommunityHamburger);
+ it("renders all li fields", () => {
+ const wrapper = shallowMount(CommunityHamburger);
- expect(wrapper.find("#newItem").text()).toMatch("Opprett Utleie");
- expect(wrapper.find("#getMembers").text()).toMatch("Se Medlemmer");
- expect(wrapper.find("#adminGroup").text()).toMatch("Administrer Gruppe");
- expect(wrapper.find("#leaveGroup").text()).toMatch("Forlat Gruppe");
- });
+ expect(wrapper.find("#newItem").text()).toMatch("Opprett Utleie");
+ expect(wrapper.find("#getMembers").text()).toMatch("Se Medlemmer");
+ expect(wrapper.find("#adminGroup").text()).toMatch("Administrer Gruppe");
+ expect(wrapper.find("#leaveGroup").text()).toMatch("Forlat Gruppe");
+ });
});
--
GitLab