From c5c54cd45e9a2c7e8c3730e665525a8d0faa5d3b Mon Sep 17 00:00:00 2001
From: Erik Borgeteien Hansen <erik@erikbhan.no>
Date: Fri, 29 Apr 2022 09:52:04 +0200
Subject: [PATCH] refactor
---
.../CommunityComponents/CommunityList.vue | 13 +++--
.../CommunityComponents/CommunityListItem.vue | 57 ++++++++++++-------
src/views/CommunityViews/CommunityView.vue | 51 +++++++----------
3 files changed, 66 insertions(+), 55 deletions(-)
diff --git a/src/components/CommunityComponents/CommunityList.vue b/src/components/CommunityComponents/CommunityList.vue
index 045eead..859e69d 100644
--- a/src/components/CommunityComponents/CommunityList.vue
+++ b/src/components/CommunityComponents/CommunityList.vue
@@ -1,21 +1,22 @@
<template>
<ul>
- <li v-for="(group, index) in groupList" :key="index">
- <group-list-item :group="group" />
+ <li v-for="community in communities" :key="community">
+ <CommunityListItem :community="community" :member="member" />
</li>
</ul>
</template>
<script>
-import GroupListItem from "@/components/CommunityComponents/CommunityListItem.vue";
+import CommunityListItem from "@/components/CommunityComponents/CommunityListItem.vue";
export default {
- name: "GroupList",
+ name: "CommunityList",
props: {
- groupList: Array,
+ communities: Array,
+ member: Boolean,
},
components: {
- GroupListItem,
+ CommunityListItem,
},
};
</script>
diff --git a/src/components/CommunityComponents/CommunityListItem.vue b/src/components/CommunityComponents/CommunityListItem.vue
index 81d2b7d..ee57763 100644
--- a/src/components/CommunityComponents/CommunityListItem.vue
+++ b/src/components/CommunityComponents/CommunityListItem.vue
@@ -1,26 +1,42 @@
<template>
+ <NotificationModal
+ @close="this.dialogOpen = false"
+ :visible="dialogOpen"
+ :title="community.name"
+ :message="community.description"
+ >
+ </NotificationModal>
<div
+ @click="toggleDialog()"
class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-4"
>
<div class="h-10 w-10 flex flex-col justify-center items-center mr-4">
<img alt="groupIMG" src="../../assets/group.png" />
</div>
- <div class="flex-1 pl-1">
- <div class="font-medium dark:text-white">
- {{ group.name }}
+ <div class="flex-1 pl-1 overflow-hidden">
+ <div class="font-medium dark:text-white truncate">
+ {{ community.name }}
</div>
</div>
- <div class="flex flex-row justify-center">
+ <div class="flex flex-row justify-center items-center">
+ <LockClosedIcon
+ v-if="community.visibility === 0"
+ class="max-h-6 max-w-6 shrink m-2"
+ />
+ <LockOpenIcon
+ v-if="community.visibility === 1"
+ class="max-h-6 max-w-6 shrink m-2"
+ />
<button
- @click="goToJoin(group.communityId)"
- v-if="!isMember"
+ @click="goToJoin(community.communityId)"
+ v-if="!member"
class="px-4 py-2 w-24 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80"
>
Bli med
</button>
<button
- v-if="isMember"
- @click="goToGroup(group.communityId)"
+ v-if="member"
+ @click="goToGroup(community.communityId)"
class="px-4 py-2 w-24 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80"
>
GÃ¥ til
@@ -30,17 +46,24 @@
</template>
<script>
-import { getMyGroups } from "@/utils/apiutil";
+import { LockClosedIcon, LockOpenIcon } from "@heroicons/vue/outline";
+import NotificationModal from "@/components/BaseComponents/NotificationModal.vue";
export default {
- name: "GroupListItem",
+ name: "CommunityListItem",
+ components: {
+ NotificationModal,
+ LockClosedIcon,
+ LockOpenIcon,
+ },
data() {
return {
- myGroups: [],
+ dialogOpen: false,
};
},
props: {
- group: Object,
+ community: Object,
+ member: Boolean,
},
methods: {
goToGroup(id) {
@@ -49,15 +72,9 @@ export default {
goToJoin(id) {
this.$router.push("/community/" + id + "/join");
},
- async getMyGroups() {
- this.myGroups = await getMyGroups();
+ toggleDialog() {
+ this.dialogOpen = !this.dialogOpen;
},
- isMember(group) {
- return this.myGroups.includes(group);
- },
- },
- beforeMount() {
- this.getMyGroups();
},
};
</script>
diff --git a/src/views/CommunityViews/CommunityView.vue b/src/views/CommunityViews/CommunityView.vue
index a227905..3106b92 100644
--- a/src/views/CommunityViews/CommunityView.vue
+++ b/src/views/CommunityViews/CommunityView.vue
@@ -1,56 +1,49 @@
<template>
<div>
<img
- class="cursor-pointer h-8 mr-4 mt-4 float-right"
- v-if="isLoggedIn"
- src="@/assets/newCommunity.png"
- alt="Legg til gruppe"
- @click="$router.push('/createNewGroup')"
+ class="cursor-pointer h-8 mr-4 mt-4 float-right"
+ v-if="loggedIn"
+ src="@/assets/newCommunity.png"
+ alt="Legg til gruppe"
+ @click="$router.push('/createNewGroup')"
/>
</div>
<div>
- <div id="myGroups" v-if="isLoggedIn">
- <div class="m-4" >Mine grupper:</div>
- <group-list :groupList="myGroups" />
+ <div id="myGroups" v-if="loggedIn">
+ <div class="m-4">Mine grupper:</div>
+ <CommunityList :communities="myCommunities" :member="true" />
</div>
<div id="localGroups">
<div class="m-4">Offentlige grupper:</div>
- <group-list :groupList="localGroups" />
+ <CommunityList :communities="publicCommunities" :member="false" />
</div>
</div>
-
</template>
<script>
-import GroupList from "@/components/CommunityComponents/CommunityList.vue";
+import CommunityList from "@/components/CommunityComponents/CommunityList.vue";
import { getMyGroups, getVisibleGroups } from "@/utils/apiutil";
export default {
name: "HomeView",
data() {
return {
- isLoggedIn: false,
- myGroups: [],
- localGroups: [],
+ loggedIn: false,
+ myCommunities: [],
+ publicCommunities: [],
};
},
components: {
- GroupList,
- },
- methods: {
- async getMyGroups() {
- this.myGroups = await getMyGroups();
- },
- async getPotentialGroups() {
- this.localGroups = await getVisibleGroups();
- },
+ CommunityList,
},
async created() {
- await this.getMyGroups();
- await this.getPotentialGroups();
- if(this.$store.state.user.token !== null){
- this.isLoggedIn = true
- }
- },
+ this.loggedIn = this.$store.state.user.token !== null;
+ this.publicCommunities = await getVisibleGroups();
+ if (!this.loggedIn) return;
+ this.myCommunities = await getMyGroups();
+ this.publicCommunities = this.publicCommunities.filter(
+ (val) => !this.myCommunities.includes(val)
+ );
+ },
};
</script>
--
GitLab