<template> <!-- TODO PUT A LOADER HERE --> <div v-if="loading">LASTER...</div> <div v-else class="flex items-center justify-between mx-4"> <router-link :to="'/community/' + community.communityId" class="flex-1 min-w-0" > <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 @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" /> </svg> <CommunityHamburger v-if="hamburgerOpen" class="origin-top-right absolute right-0" :community-i-d="community.communityId" :admin="admin" /> <!-- class="absolute" --> </div> </div> </div> </template> <script> import CommunityHamburger from "@/components/CommunityComponents/CommunityHamburger"; import ColoredButton from "@/components/BaseComponents/ColoredButton"; import CommunityService from "@/services/community.service"; import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal"; import { parseCurrentUser } from "@/utils/token-utils"; import { JoinOpenCommunity, // GetIfUserAlreadyInCommunity, } from "@/utils/apiutil"; export default { name: "CommunityHeader", components: { CommunityHamburger, ColoredButton, CustomFooterModal, }, computed: { userid() { return parseCurrentUser().accountId; }, }, data() { return { hamburgerOpen: false, dialogOpen: false, member: false, community: {}, loading: true, }; }, props: { admin: Boolean, }, methods: { toggleHamburgerMenu() { this.hamburgerOpen = !this.hamburgerOpen; }, async load() { this.community = await CommunityService.getCommunity( this.$route.params.communityID ); const members = await CommunityService.getCommunityMembers( this.$route.params.communityID ); for (let i = 0; i < members.length; i++) { if (members[i].userId == this.userid) { this.member = true; return; } } }, joinCommunity: async function (id) { const response = await JoinOpenCommunity(id); if (response === "Login to join any community") { this.dialogOpen = true; } else { window.location.reload(); } }, }, // beforeMount() { // this.getIfUserInCommunity(); // }, async created() { await this.load(); this.loading = false; }, }; </script>