Added community name to communityrequest

package-lock.json

@@ -16,6 +16,7 @@
         "axios": "^0.26.1",
         "core-js": "^3.8.3",
         "cssom": "^0.5.0",
+        "heroicons": "^1.0.6",
         "jwt-decode": "^3.1.2",
         "net": "^1.0.2",
         "roboto-fontface": "*",
@@ -7540,6 +7541,11 @@
         "he": "bin/he"
       }
     },
+    "node_modules/heroicons": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/heroicons/-/heroicons-1.0.6.tgz",
+      "integrity": "sha512-5bxTsG2hyNBF0l+BrFlZlR5YngQNMfl0ggJjIRkMSADBQbaZMoTg47OIQzq6f1mpEZ85HEIgSC4wt5AeFM9J2Q=="
+    },
     "node_modules/highlight.js": {
       "version": "10.7.3",
       "dev": true,
@@ -19967,6 +19973,11 @@
       "version": "1.2.0",
       "dev": true
     },
+    "heroicons": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/heroicons/-/heroicons-1.0.6.tgz",
+      "integrity": "sha512-5bxTsG2hyNBF0l+BrFlZlR5YngQNMfl0ggJjIRkMSADBQbaZMoTg47OIQzq6f1mpEZ85HEIgSC4wt5AeFM9J2Q=="
+    },
     "highlight.js": {
       "version": "10.7.3",
       "dev": true

package.json

@@ -17,6 +17,7 @@
     "axios": "^0.26.1",
     "core-js": "^3.8.3",
     "cssom": "^0.5.0",
+    "heroicons": "^1.0.6",
     "jwt-decode": "^3.1.2",
     "net": "^1.0.2",
     "roboto-fontface": "*",

src/components/CommunityComponents/CommunityList.vue

@@ -8,6 +8,7 @@
 
 <script>
 import CommunityListItem from "@/components/CommunityComponents/CommunityListItem.vue";
+//import Join
 
 export default {
   name: "CommunityList",

src/components/CommunityComponents/CommunityListItem.vue

@@ -8,12 +8,20 @@
     <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"
+        v-if="!member && community.visibility!==0"
         :text="'Bli med'"
         @click="goToJoin(community.communityId)"
         class="m-2"
       />
 
+        <ColoredButton
+        v-if="!member && community.visibility===0"
+        :text="'Spør om å bli med'"
+        @click="goToRequest(community.communityId)"
+        class="m-2"
+        />
+
+      
       <!-- If a user is member this button will show -->
       <ColoredButton
         v-if="member"
@@ -96,6 +104,9 @@ export default {
         this.$router.push("/community/" + id);
       }
     },
+    goToRequest(id){
+        this.$router.push("/community/" + id + "/private/join")
+    },
     toggleDialog() {
       this.dialogOpen = !this.dialogOpen;
     },

src/components/CommunityComponents/CommunityRequestForm.vue

@@ -6,7 +6,7 @@
     <div
       class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-10"
     >
-      Bli med i: {{gruppenavn}}
+      Bli med i: {{community.name}}
     </div>
 
 
@@ -49,6 +49,7 @@ import axios from "axios";
 import useVuelidate from "@vuelidate/core";
 import { required, helpers, maxLength } from "@vuelidate/validators";
 import Button from "@/components/BaseComponents/ColoredButton";
+import {GetCommunity} from "@/utils/apiutil";
 
 export default {
   name: "CommunityRequestForm.vue",
@@ -78,10 +79,9 @@ export default {
   },
   data() {
     return {
-      group: {
         description: "",
         communityId: null,
-      },
+        community: {},
     };
   },
   computed: {
@@ -91,6 +91,16 @@ export default {
     async saveClicked() {
       await axios.post(process.env.VUE_APP_BASEURL+ `community/${this.communityId}/private/join`);
     },
+     getCommunityFromAPI: async function () {
+      this.communityID = await this.$router.currentRoute.value.params
+        .communityID;
+        console.log("Dette er community id =" + this.communityID)
+      this.community = await GetCommunity(this.communityID);
+      console.log(this.community)
+    }
+  },
+   async created() {
+    await this.getCommunityFromAPI(); //To get the id of the community before mounting the view
   },
 };
 </script>

src/main.js

@@ -5,4 +5,4 @@ import store from "./store";
 import ws from "./services/ws";
 
 createApp(App).use(router).use(store).mount("#app");
-//console.log("WS", ws.test);
+console.log("WS", ws.test);

src/utils/apiutil.js

@@ -215,6 +215,8 @@ export async function GetListingsInCommunity(communityID) {
     });
 }
 
+
+
 export async function GetMembersOfCommunity(communityID) {
   return axios
     .get(API_URL + "community/" + communityID + "/members", {