From 33420963417ee5abe07835a53046ec477e8dca85 Mon Sep 17 00:00:00 2001
From: Zara Mudassar <zara.1310@hotmail.com>
Date: Fri, 29 Apr 2022 14:54:44 +0200
Subject: [PATCH] Join an open community functionality added,
---
.../BaseComponents/CommunityHeader.vue | 50 ++++++++++++++++++-
.../CommunityComponents/CommunityHome.vue | 1 +
.../CommunityComponents/CommunityListItem.vue | 32 +++++++++++-
src/utils/apiutil.js | 42 ++++++++++++++++
4 files changed, 121 insertions(+), 4 deletions(-)
diff --git a/src/components/BaseComponents/CommunityHeader.vue b/src/components/BaseComponents/CommunityHeader.vue
index ba09d59..3f9db4d 100644
--- a/src/components/BaseComponents/CommunityHeader.vue
+++ b/src/components/BaseComponents/CommunityHeader.vue
@@ -28,13 +28,33 @@
</div>
</div>
<div>
- <span class="hidden sm:block"> <!-- Legg dette til i button: v-if="adminStatus" -->
+ <span class="hidden sm:block">
- <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">
+ <!-- If the user is not a member in the community, this button will show -->
+ <div v-if="!member">
+ <ColoredButton
+ v-if="!member"
+ :text="'Bli med'"
+ @click="joinCommunity(community.communityId)"
+ class="m-2"
+ />
+
+ <CustomFooterModal
+ @close="this.dialogOpen = false"
+ :visible="dialogOpen"
+ title="Kan ikke bli med"
+ message="Logg inn først for å bli med i en gruppe."
+ />
+ </div>
+
+ <!-- If the user is member of the community, this hamburger menu will show -->
+ <div v-if="member">
+ <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" -->
+ </div>
</span>
</div>
@@ -43,14 +63,22 @@
<script>
import CommunityHamburger from "@/components/CommunityComponents/CommunityHamburger";
+import ColoredButton from "@/components/BaseComponents/ColoredButton";
+import { JoinOpenCommunity, GetIfUserAlreadyInCommunity } from "@/utils/apiutil";
+import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal";
+
export default {
name: "CommunityHeader",
components: {
CommunityHamburger,
+ ColoredButton,
+ CustomFooterModal,
},
data(){
return{
hamburgerOpen: false,
+ dialogOpen: false,
+ member: true,
}
},
props: {
@@ -65,6 +93,7 @@ export default {
}
},
methods: {
+ //To open and close the hamburger menu
toggle: function (){
if(this.hamburgerOpen){
this.hamburgerOpen = false;
@@ -72,7 +101,24 @@ export default {
else{
this.hamburgerOpen = true;
}
+ },
+ joinCommunity: async function(id){
+ const response = await JoinOpenCommunity(id);
+ console.log("response: " + response);
+ if(response === "Login to join any community"){
+ this.dialogOpen = true;
+ }
+ else{
+ window.location.reload();
+ }
+ },
+ getIfUserInCommunity: async function(){
+ this.member = await GetIfUserAlreadyInCommunity(this.$router.currentRoute.value.params.communityID);
+ console.log("in: " + this.member);
}
},
+ beforeMount() {
+ this.getIfUserInCommunity();
+ }
};
</script>
diff --git a/src/components/CommunityComponents/CommunityHome.vue b/src/components/CommunityComponents/CommunityHome.vue
index 8004946..20ad43c 100644
--- a/src/components/CommunityComponents/CommunityHome.vue
+++ b/src/components/CommunityComponents/CommunityHome.vue
@@ -6,6 +6,7 @@
class="mb-5"
/>
+
<!-- Search field -->
<div class="relative" id="searchComponent">
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
diff --git a/src/components/CommunityComponents/CommunityListItem.vue b/src/components/CommunityComponents/CommunityListItem.vue
index d75938f..e6806f5 100644
--- a/src/components/CommunityComponents/CommunityListItem.vue
+++ b/src/components/CommunityComponents/CommunityListItem.vue
@@ -6,17 +6,37 @@
:message="community.description"
>
<div class="flex justify-center p-2">
+ <!-- If a user is not a member in the community, this button will show -->
<ColoredButton
v-if="!member"
:text="'Bli med'"
@click="goToJoin(community.communityId)"
+ class="m-2"
/>
+
+ <!-- If a user is member this button will show -->
<ColoredButton
v-if="member"
:text="'GÃ¥ til'"
@click="goToGroup(community.communityId)"
+ class="m-2"
+ />
+
+ <!-- If a user isn't member but the community is open, the user is able to get in to see listings(items) -->
+ <ColoredButton
+ v-if="!member && community.visibility===1"
+ :text="'GÃ¥ til'"
+ @click="goToGroup(community.communityId)"
+ class="m-2"
/>
</div>
+
+ <!-- If a user is not logges in and tries to join a community, this message shows -->
+ <div class="flex justify-center p-2">
+ <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+ {{ responseToUser }}
+ </p>
+ </div>
</CustomFooterModal>
<div
@click="toggleDialog()"
@@ -44,6 +64,7 @@
import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal.vue";
import ColoredButton from "@/components/BaseComponents/ColoredButton.vue";
import { UserGroupIcon, LockClosedIcon } from "@heroicons/vue/outline";
+import { JoinOpenCommunity } from "@/utils/apiutil";
export default {
name: "CommunityListItem",
@@ -56,6 +77,7 @@ export default {
data() {
return {
dialogOpen: false,
+ responseToUser: '',
};
},
props: {
@@ -66,8 +88,14 @@ export default {
goToGroup(id) {
this.$router.push("/community/" + id);
},
- goToJoin(id) {
- this.$router.push("/community/" + id + "/join");
+ async goToJoin(id) {
+ const response = await JoinOpenCommunity(id);
+ if(response === "Login to join any community"){
+ this.responseToUser = "Logg inn først for å bli med i en gruppe";
+ }
+ else{
+ this.$router.push("/community/" + id);
+ }
},
toggleDialog() {
this.dialogOpen = !this.dialogOpen;
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index 254d776..e17065b 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -186,3 +186,45 @@ export async function GetMembersOfCommunity(communityID) {
console.error(error);
});
}
+
+export function JoinOpenCommunity(communityId) {
+
+ if(tokenHeader().Authorization == "Bearer " + null){
+ console.log("ikke logget på!");
+ return "Login to join any community";
+ }
+
+ return axios
+ .post(API_URL + "communities/" + communityId + "/join", communityId, {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ return response;
+ })
+ .catch((error) => {
+ console.log(error.response);
+ return error;
+ });
+}
+
+export async function GetIfUserAlreadyInCommunity(communityID) {
+ console.log("token: " + tokenHeader().Authorization);
+
+ if(tokenHeader().Authorization == "Bearer " + null){
+ console.log("ikke logget på!");
+ return false;
+ }
+
+ return axios
+ .get(API_URL + "communities/" + communityID + "/user/status", {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ console.log("res: " + response.data);
+ return response.data;
+ })
+ .catch((error) => {
+ console.error("err: " + error);
+ return error;
+ });
+}
--
GitLab