From 7f85493e0957796271b9c357d475bf3a9497647f Mon Sep 17 00:00:00 2001
From: Erik Borgeteien Hansen <erik@erikbhan.no>
Date: Thu, 5 May 2022 20:55:51 +0200
Subject: [PATCH] add modal dialog when leaving group
---
.../CommunityHamburger.vue | 11 +-
.../CommunityComponents/CommunityHeader.vue | 166 +++++++++++-------
2 files changed, 99 insertions(+), 78 deletions(-)
diff --git a/src/components/CommunityComponents/CommunityHamburger.vue b/src/components/CommunityComponents/CommunityHamburger.vue
index 30f68df..348e60a 100644
--- a/src/components/CommunityComponents/CommunityHamburger.vue
+++ b/src/components/CommunityComponents/CommunityHamburger.vue
@@ -28,7 +28,7 @@
<li id="leaveGroup" v-if="!admin">
<div
class="cursor-pointer block py-2 px-4 text-sm text-error-medium hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
- @click="leaveCommunity"
+ @click="this.$emit('openLeaveCommunityDialog')"
>
Forlat Gruppe
</div>
@@ -38,8 +38,6 @@
</template>
<script>
-import { LeaveCommunity } from "@/utils/apiutil";
-
export default {
name: "CommunityHamburger",
data() {
@@ -49,13 +47,6 @@ export default {
communityID: -1,
};
},
- methods: {
- leaveCommunity: async function () {
- this.id = this.$route.params.communityID;
- await LeaveCommunity(this.id);
- this.$router.push("/");
- },
- },
created() {
this.communityID = this.$route.params.communityID;
if (!Array.isArray(this.$store.state.user.adminList)) return;
diff --git a/src/components/CommunityComponents/CommunityHeader.vue b/src/components/CommunityComponents/CommunityHeader.vue
index 201d9fb..06d9157 100644
--- a/src/components/CommunityComponents/CommunityHeader.vue
+++ b/src/components/CommunityComponents/CommunityHeader.vue
@@ -1,81 +1,104 @@
<template>
- <div v-if="loading" class="flex place-content-center mx-4">
- <LoaderSpinner />
- </div>
- <div v-else class="flex items-center justify-between mx-4">
- <router-link
- :to="'/community/' + community.communityId"
- class="flex-1 min-w-0"
+ <div>
+ <CustomFooterModal
+ :title="'Er du sikker på at du vil forlate felleskapet?'"
+ :message="'Dersom felleskapet er låst er du nødt til å spørre om å bli med på nytt.'"
+ :visible="leaveDialog"
+ @close="this.leaveDialog = false"
>
- <h2
- class="text-xl md:text-2xl text-gray-600 font-medium w-full sm:truncate"
- >
- {{ community.name }}
- </h2>
- <div
- class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6"
+ <div class="flex place-content-center min-w-6">
+ <ColoredButton
+ class="m-2"
+ :buttonColor="'red'"
+ @click="leaveCommunity()"
+ :text="'Ja'"
+ />
+ <ColoredButton
+ class="m-2"
+ :text="'Nei'"
+ @click="this.leaveDialog = false"
+ />
+ </div>
+ </CustomFooterModal>
+ <div v-if="loading" class="flex place-content-center mx-4">
+ <LoaderSpinner />
+ </div>
+ <div v-else class="flex items-center justify-between mx-4">
+ <router-link
+ :to="'/community/' + community.communityId"
+ class="flex-1 min-w-0"
>
- <div class="mt-2 flex items-center text-sm text-gray-500">
+ <h2
+ class="text-xl md:text-2xl text-gray-600 font-medium w-full sm:truncate"
+ >
+ {{ community.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>
+ {{ community.location }}
+ </div>
+ </div>
+ </router-link>
+ <div>
+ <!-- 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
- class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
+ @click="toggleHamburgerMenu()"
xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 20 20"
- fill="currentColor"
- aria-hidden="true"
+ class="w-9 h-9 cursor-pointer"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
>
<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"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="2"
+ d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
- {{ community.location }}
- </div>
- </div>
- </router-link>
- <div>
- <!-- 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="toggleHamburgerMenu()"
- 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"
+ <CommunityHamburger
+ @openLeaveCommunityDialog="this.leaveDialog = true"
+ v-if="hamburgerOpen"
+ class="origin-top-right absolute right-0"
+ :community-i-d="community.communityId"
+ :admin="admin"
/>
- </svg>
-
- <CommunityHamburger
- v-if="hamburgerOpen"
- class="origin-top-right absolute right-0"
- :community-i-d="community.communityId"
- :admin="admin"
- />
- <!-- class="absolute" -->
+ <!-- class="absolute" -->
+ </div>
</div>
</div>
</div>
@@ -88,6 +111,8 @@ import LoaderSpinner from "@/components/BaseComponents/LoaderSpinner";
import CommunityService from "@/services/community.service";
import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal";
import { parseCurrentUser } from "@/utils/token-utils";
+import { LeaveCommunity } from "@/utils/apiutil";
+
import {
JoinOpenCommunity,
// GetIfUserAlreadyInCommunity,
@@ -109,10 +134,11 @@ export default {
data() {
return {
hamburgerOpen: false,
- dialogOpen: false,
+ leaveDialog: false,
member: false,
community: {},
loading: true,
+ openDialog: false,
};
},
props: {
@@ -122,6 +148,10 @@ export default {
toggleHamburgerMenu() {
this.hamburgerOpen = !this.hamburgerOpen;
},
+ leaveCommunity: async function () {
+ await LeaveCommunity(this.community.communityID);
+ this.$router.push("/");
+ },
async load() {
this.community = await CommunityService.getCommunity(
this.$route.params.communityID
--
GitLab