From 3d22a9d6eedc9becc5ff3a3ed2912314cd6c1f69 Mon Sep 17 00:00:00 2001
From: Zara Mudassar <zara.1310@hotmail.com>
Date: Fri, 29 Apr 2022 11:18:48 +0200
Subject: [PATCH] Implemented menu and connected "se medlemmer" to backend
---
.../BaseComponents/CommunityHeader.vue | 52 ++++++++------
.../CommunityHamburger.vue | 50 +++++++++++++
.../CommunityComponents/MemberList.vue | 30 ++++----
src/utils/apiutil.js | 13 ++++
src/views/CommunityViews/MemberListView.vue | 72 +------------------
5 files changed, 112 insertions(+), 105 deletions(-)
create mode 100644 src/components/CommunityComponents/CommunityHamburger.vue
diff --git a/src/components/BaseComponents/CommunityHeader.vue b/src/components/BaseComponents/CommunityHeader.vue
index 99fde7e..03c55ee 100644
--- a/src/components/BaseComponents/CommunityHeader.vue
+++ b/src/components/BaseComponents/CommunityHeader.vue
@@ -27,35 +27,32 @@
</div>
</div>
</div>
- <div class="flex">
- <span class="hidden sm:block">
- <button
- v-if="adminStatus"
- @click="edit()"
- type="button"
- class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
- >
- <!-- Heroicon name: solid/pencil -->
- <svg
- xmlns="http://www.w3.org/2000/svg"
- class="h-5 w-5"
- viewBox="0 0 20 20"
- fill="currentColor"
- >
- <path
- d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
- />
- </svg>
- Edit
- </button>
+ <div>
+ <span class="hidden sm:block"> <!-- Legg dette til i button: v-if="adminStatus" -->
+
+ <svg @click="test" 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="absolute" :community-i-d="community.communityId"/> <!-- class="absolute" -->
+
</span>
</div>
</div>
</template>
<script>
+import CommunityHamburger from "@/components/CommunityComponents/CommunityHamburger";
export default {
name: "CommunityHeader",
+ components: {
+ CommunityHamburger,
+ },
+ data(){
+ return{
+ hamburgerOpen: false,
+ }
+ },
props: {
adminStatus: Boolean,
community: {
@@ -65,12 +62,23 @@ export default {
visibility: Number,
location: String,
picture: String,
- },
+ }
},
methods: {
edit() {
this.$emit("edit");
},
+ test: function (){
+ console.log("funker å trykke");
+ console.log("ID: " + this.community.communityId);
+ if(this.hamburgerOpen){
+ this.hamburgerOpen = false;
+ }
+ else{
+ this.hamburgerOpen = true;
+ }
+ console.log("Ã…pen: " + this.hamburgerOpen);
+ }
},
};
</script>
diff --git a/src/components/CommunityComponents/CommunityHamburger.vue b/src/components/CommunityComponents/CommunityHamburger.vue
new file mode 100644
index 0000000..2d09573
--- /dev/null
+++ b/src/components/CommunityComponents/CommunityHamburger.vue
@@ -0,0 +1,50 @@
+<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"
+ >
+ <ul class="py-1" >
+ <li>
+ <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>
+ <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
+ </router-link>
+ </li>
+ <li>
+ <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
+ >
+ </li>
+ <li class="text-red-500">
+ <div
+ 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"
+ >
+ Forlat Gruppe
+ </div>
+ </li>
+ </ul>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "CommunityHamburger",
+ props: {
+ communityID: Number,
+ },
+ beforeMount() {
+ console.log("id: " + this.communityID);
+ }
+}
+</script>
+
diff --git a/src/components/CommunityComponents/MemberList.vue b/src/components/CommunityComponents/MemberList.vue
index 7b44f5f..edd765f 100644
--- a/src/components/CommunityComponents/MemberList.vue
+++ b/src/components/CommunityComponents/MemberList.vue
@@ -1,4 +1,5 @@
<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" />
@@ -8,29 +9,34 @@
<script>
import UserListItemCard from "../UserProfileComponents/UserListItemCard.vue";
+import { GetMembersOfCommunity, GetCommunity } from "@/utils/apiutil";
+import CommunityHeader from "@/components/BaseComponents/CommunityHeader";
export default {
data() {
return {
- memberlist: [
- {
- userId: 2,
- firstName: "erik",
- lastName: "hansen",
- },
- {
- userId: 1,
- firstName: "Test",
- lastName: "Testesen",
- },
- ],
+ memberlist: [],
+ community: {},
};
},
components: {
+ CommunityHeader,
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/utils/apiutil.js b/src/utils/apiutil.js
index b3aa02d..8020757 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -173,3 +173,16 @@ export async function GetListingsInCommunity(communityID) {
console.error(error);
});
}
+
+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);
+ });
+}
diff --git a/src/views/CommunityViews/MemberListView.vue b/src/views/CommunityViews/MemberListView.vue
index d250c0d..f3b0bd4 100644
--- a/src/views/CommunityViews/MemberListView.vue
+++ b/src/views/CommunityViews/MemberListView.vue
@@ -1,83 +1,13 @@
<template>
- <div class="flex items-center justify-between mx-4">
- <div class="flex-1 min-w-0">
- <h2
- class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate"
- >
- {{ groupe.name }}
- </h2>
- <div
- class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6"
- >
- <div class="mt-2 flex items-center text-sm text-gray-500">
- <svg
- class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 20 20"
- fill="currentColor"
- aria-hidden="true"
- >
- <path
- fill-rule="evenodd"
- d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
- clip-rule="evenodd"
- />
- </svg>
- {{ groupe.address }}
- </div>
- </div>
- </div>
- <div class="flex">
- <span class="hidden sm:block">
- <button
- v-if="adminStatus"
- @click="edit()"
- type="button"
- class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
- >
- <!-- Heroicon name: solid/pencil -->
- <svg
- class="-ml-1 mr-2 h-5 w-5 text-gray-500"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 20 20"
- fill="currentColor"
- aria-hidden="true"
- >
- <path
- d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
- />
- </svg>
- Edit
- </button>
- </span>
- </div>
- </div>
- <div class="h-screen bg-gray-200 content-top grid place-items-top">
- <member-list :admin="editing" />
- </div>
+ <MemberList/>
</template>
<script>
import MemberList from "@/components/CommunityComponents/MemberList.vue";
export default {
- data() {
- return {
- groupe: {
- name: "Solsikken borettslag",
- address: "Sollia 6, 7033 Trondheim",
- },
- adminStatus: false,
- editing: false,
- };
- },
components: {
MemberList,
},
- methods: {
- edit() {
- this.editing = !this.editing;
- },
- },
};
</script>
--
GitLab