Skip to content
Snippets Groups Projects
Commit 3d22a9d6 authored by Zara Mudassar's avatar Zara Mudassar
Browse files

Implemented menu and connected "se medlemmer" to backend

parent 38b990d5
No related branches found
No related tags found
1 merge request!64Community hamburgermeny
Pipeline #178422 passed
Stage: test
Hide whitespace changes
Inline Side-by-side
src/components/BaseComponents/CommunityHeader.vue
+ 30
− 22
View file @ 3d22a9d6
......@@ -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>
src/components/CommunityComponents/CommunityHamburger.vue 0 → 100644
+ 50
− 0
View file @ 3d22a9d6
<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>
src/components/CommunityComponents/MemberList.vue
+ 18
− 12
View file @ 3d22a9d6
<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>
src/utils/apiutil.js
+ 13
− 0
View file @ 3d22a9d6
......@@ -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);
});
}
src/views/CommunityViews/MemberListView.vue
+ 1
− 71
View file @ 3d22a9d6
<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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment