diff --git a/src/components/CommunityComponents/CommunityHamburger.vue b/src/components/CommunityComponents/CommunityHamburger.vue
index 2ff217132d67798d84e31a7d166ee007e4d615ba..704b199bc9876af2f3a4e222d34269d2a33b4947 100644
--- a/src/components/CommunityComponents/CommunityHamburger.vue
+++ b/src/components/CommunityComponents/CommunityHamburger.vue
@@ -27,7 +27,8 @@
</li>
<li id="leaveGroup">
<div
- class="cursor-pointer block py-2 px-4 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+ class="cursor-pointer block py-2 px-4 text-sm text-error hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+ @click="leaveCommunity"
>
Forlat Gruppe
</div>
@@ -37,10 +38,26 @@
</template>
<script>
+
+import { LeaveCommunity } from "@/utils/apiutil";
+
export default {
name: "CommunityHamburger",
props: {
communityID: Number,
},
+ data(){
+ return{
+ id: -1,
+ }
+ },
+
+ methods:{
+ leaveCommunity: async function(){
+ this.id = await this.$router.currentRoute.value.params.communityID;
+ await LeaveCommunity(this.id);
+ this.$router.push('/');
+ }
+ }
};
</script>
diff --git a/src/components/CommunityComponents/CommunityHeader.vue b/src/components/CommunityComponents/CommunityHeader.vue
index 2d3773fa6d281f83f60f2c8eb8d33b348b96daa2..9be1167a1da7b4871f785ffbc460bf6c4471f7c8 100644
--- a/src/components/CommunityComponents/CommunityHeader.vue
+++ b/src/components/CommunityComponents/CommunityHeader.vue
@@ -5,7 +5,7 @@
class="flex-1 min-w-0"
>
<h2
- class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate"
+ class="text-xl md:text-2xl text-gray-600 font-medium w-full sm:truncate"
>
{{ community.name }}
</h2>
diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index d9bf923296a42c70521274ba6dcc5e275b75bb22..0a756fcd785cbaf623af7b4612d26ee63d1642d1 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -1,50 +1,50 @@
<template>
<div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4">
<!-- Component heading -->
- <h3
- class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+ <div
+ class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-10"
>
Opprett ny gruppe
- </h3>
+ </div>
<!-- Radio boxes -->
<div class="mt-6">
<label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- id="radioBoxLabel"
- >Synlighet</label
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+ id="radioBoxLabel"
+ >Synlighet</label
>
<div class="form-check">
<input
- class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
- type="radio"
- name="flexRadioDefault"
- id="flexRadioOpen"
- value="Ã…pen"
- @change="checkRadioButton($event)"
- checked
+ class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+ type="radio"
+ name="flexRadioDefault"
+ id="flexRadioOpen"
+ value="Ã…pen"
+ @change="checkRadioButton($event)"
+ checked
/>
<label
- class="form-check-label inline-block text-gray-800"
- for="flexRadioOpen"
- id="radioBoxOpenLabel"
+ class="form-check-label inline-block text-gray-800"
+ for="flexRadioOpen"
+ id="radioBoxOpenLabel"
>
Ã…pen
</label>
</div>
<div class="form-check">
<input
- class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
- type="radio"
- name="flexRadioDefault"
- id="flexRadioPrivate"
- value="Privat"
- @change="checkRadioButton($event)"
+ class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+ type="radio"
+ name="flexRadioDefault"
+ id="flexRadioPrivate"
+ value="Privat"
+ @change="checkRadioButton($event)"
/>
<label
- class="form-check-label inline-block text-gray-800"
- for="flexRadioPrivate"
- id="radioBoxPrivateLabel"
+ class="form-check-label inline-block text-gray-800"
+ for="flexRadioPrivate"
+ id="radioBoxPrivateLabel"
>
Privat
</label>
@@ -54,23 +54,23 @@
<!-- Title -->
<div class="mt-6" :class="{ error: v$.group.name.$errors.length }">
<label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- id="titleLabel"
- >Gruppenavn</label
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+ id="titleLabel"
+ >Gruppenavn</label
>
<input
- type="text"
- id="title"
- class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
- v-model="v$.group.name.$model"
- required
+ type="text"
+ id="title"
+ class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+ v-model="v$.group.name.$model"
+ required
/>
<!-- error message for title-->
<div
- class="text-error"
- v-for="(error, index) of v$.group.name.$errors"
- :key="index"
+ class="text-error"
+ v-for="(error, index) of v$.group.name.$errors"
+ :key="index"
>
<div class="text-error text-sm">
{{ error.$message }}
@@ -81,21 +81,22 @@
<!-- Place -->
<div class="mt-6" :class="{ error: v$.group.place.$errors.length }">
<label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- >By/Sted</label
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+ id="positionLabel"
+ >By/Sted</label
>
<input
- type="text"
- class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
- v-model="v$.group.place.$model"
- required
+ type="text"
+ class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+ v-model="v$.group.place.$model"
+ required
/>
<!-- error message for place-->
<div
- class="text-error"
- v-for="(error, index) of v$.group.place.$errors"
- :key="index"
+ class="text-error"
+ v-for="(error, index) of v$.group.place.$errors"
+ :key="index"
>
<div class="text-error text-sm">
{{ error.$message }}
@@ -106,23 +107,23 @@
<!-- Description -->
<div class="mt-6" :class="{ error: v$.group.description.$errors.length }">
<label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
- id="descriptionLabel"
- >Beskrivelse</label
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+ id="descriptionLabel"
+ >Beskrivelse</label
>
<textarea
- id="description"
- rows="4"
- v-model="v$.group.description.$model"
- class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
- required
+ id="description"
+ rows="4"
+ v-model="v$.group.description.$model"
+ class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+ required
></textarea>
<!-- error message for description -->
<div
- class="text-error"
- v-for="(error, index) of v$.group.description.$errors"
- :key="index"
+ class="text-error"
+ v-for="(error, index) of v$.group.description.$errors"
+ :key="index"
>
<div class="text-error text-sm">
{{ error.$message }}
@@ -133,19 +134,19 @@
<!-- Images -->
<div class="mt-6">
<label
- class="block mb-2 text-xl font-medium text-gray-900 dark:text-gray-400"
- id="imageLabel"
+ class="block mb-2 text-xl font-medium text-gray-900 dark:text-gray-400"
+ id="imageLabel"
>
Bilde
</label>
<input
- type="file"
- ref="file"
- style="display: none"
- @change="addImage"
- multiple
- accept="image/png, image/jpeg"
+ type="file"
+ ref="file"
+ style="display: none"
+ @change="addImage"
+ multiple
+ accept="image/png, image/jpeg"
/>
<!-- Button for adding an image -->
@@ -171,9 +172,9 @@
<!-- Save item button -->
<div class="flex justify-center mt-10 float-right">
<Button
- @click="saveClicked"
- id="saveButton"
- :text="'Lagre'"
+ @click="saveClicked"
+ id="saveButton"
+ :text="'Lagre'"
>
</Button>
</div>
@@ -201,32 +202,32 @@ export default {
group: {
name: {
required: helpers.withMessage(
- () => "Navnt kan ikke være tom",
- required
+ () => "Navnt kan ikke være tom",
+ required
),
max: helpers.withMessage(
- () => `Navnet kan være på max 50 tegn`,
- maxLength(50)
+ () => `Navnet kan være på max 50 tegn`,
+ maxLength(50)
),
},
place: {
required: helpers.withMessage(
- () => "Stedsnavn kan ikke være tom",
- required
+ () => "Stedsnavn kan ikke være tom",
+ required
),
max: helpers.withMessage(
- () => `Stednavn kan være på max 50 tegn`,
- maxLength(50)
+ () => `Stednavn kan være på max 50 tegn`,
+ maxLength(50)
),
},
description: {
required: helpers.withMessage(
- () => "Beskrivelsen kan ikke være tom",
- required
+ () => "Beskrivelsen kan ikke være tom",
+ required
),
max: helpers.withMessage(
- () => `Beskrivelsen kan inneholde max 200 tegn`,
- maxLength(200)
+ () => `Beskrivelsen kan inneholde max 200 tegn`,
+ maxLength(200)
),
},
},
diff --git a/src/components/FormComponents/LoginForm.vue b/src/components/FormComponents/LoginForm.vue
index a3c4dd2f9e049ec7b1fe18c68427659223bbd9d7..9bd28d962bc2bebea069c4515535485a3c991ad9 100644
--- a/src/components/FormComponents/LoginForm.vue
+++ b/src/components/FormComponents/LoginForm.vue
@@ -1,11 +1,11 @@
<template>
<div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full">
<div class="px-6 py-4 mt-4">
- <h3
- class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+ <div
+ class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
>
Logg på
- </h3>
+ </div>
<div>
<div
diff --git a/src/components/FormComponents/NewPasswordForm.vue b/src/components/FormComponents/NewPasswordForm.vue
index 667da928ac0430fea928a78723f73af715622209..0675e051a873b2717bb96a3cc4a43fb4f4e67114 100644
--- a/src/components/FormComponents/NewPasswordForm.vue
+++ b/src/components/FormComponents/NewPasswordForm.vue
@@ -3,7 +3,7 @@
class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
>
- <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Endre passord</h3>
+ <div class="text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Endre passord</div>
<div
id="firstPasswordField"
diff --git a/src/components/FormComponents/RegisterForm.vue b/src/components/FormComponents/RegisterForm.vue
index a2fc3c208a551402412bb31dffc3e73fac640275..c79d4c0af2b58a9a901a908ac9d12490317d8584 100644
--- a/src/components/FormComponents/RegisterForm.vue
+++ b/src/components/FormComponents/RegisterForm.vue
@@ -2,11 +2,11 @@
<div
class="w-full max-w-md mx-auto mb-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl p-4"
>
- <h3
- class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+ <div
+ class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8" id="registerLabel"
>
- Opprett ny bruker
- </h3>
+ Opprett ny konto
+ </div>
<form @submit.prevent>
<div class="grid grid-cols-1 gap-6 mt-4">
@@ -157,7 +157,7 @@
</div>
<div class="flex justify-end mt-6">
- <Button @click="submit" :text="'Lagre'"></Button>
+ <Button @click="submit" :text="'Opprett'"></Button>
</div>
</form>
</div>
diff --git a/src/components/FormComponents/ResetPasswordForm.vue b/src/components/FormComponents/ResetPasswordForm.vue
index a3232e339f78a7ce82eee0a3199b966d9bc90178..5443c3c0bab2cc57db4b1a3425a3e781343c1f69 100644
--- a/src/components/FormComponents/ResetPasswordForm.vue
+++ b/src/components/FormComponents/ResetPasswordForm.vue
@@ -1,7 +1,7 @@
<template>
<div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4">
- <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Glemt passordet ditt?</h3>
+ <div class="text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Glemt passordet ditt?</div>
<div
id="emailField"
diff --git a/src/components/ItemComponents/NewItemForm.vue b/src/components/ItemComponents/NewItemForm.vue
index ea6abb83500cae80226ad71f2816b129cce4fb85..570ef7df0b97a804d3ef1326754a182938b4adef 100644
--- a/src/components/ItemComponents/NewItemForm.vue
+++ b/src/components/ItemComponents/NewItemForm.vue
@@ -1,7 +1,7 @@
<template>
<div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4">
<!-- Component heading -->
- <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Opprett ny utleie</h3>
+ <div class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-10">Opprett ny utleie</div>
<!-- Title -->
<div class="mb-6" :class="{ error: v$.item.title.$errors.length }">
@@ -33,22 +33,22 @@
<!-- Select category -->
<div class="mb-6">
<label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
- id="selectCategoryLabel"
- >Kategori</label
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+ id="selectCategoryLabel"
+ >Kategori</label
>
<select
- v-model="v$.item.select.$model"
- id="categories"
- class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+ v-model="v$.item.select.$model"
+ id="categories"
+ class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
>
<option class="text-gray-400" value="" disabled selected>
- Select a category
+ Velg en kategori
</option>
<option
- v-for="category in categories"
- :key="category"
- class="text-gray-900 text-sm"
+ v-for="category in categories"
+ :key="category"
+ class="text-gray-900 text-sm"
>
{{ category }}
</option>
@@ -56,9 +56,9 @@
<!-- error message for select box -->
<div
- class="text-error"
- v-for="(error, index) of v$.item.select.$errors"
- :key="index"
+ class="text-error"
+ v-for="(error, index) of v$.item.select.$errors"
+ :key="index"
>
<div class="text-error text-sm">
{{ error.$message }}
@@ -66,42 +66,36 @@
</div>
</div>
- <!-- Select Group -->
+ <!-- Grupper -->
<div class="mb-6">
<label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
- >Gruppe</label
- >
- <select
- v-model="v$.item.selectGroup.$model"
- class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
- >
- <option class="text-gray-400" value="" disabled selected>
- Select a Group
- </option>
- <option
- v-for="group in groups"
- :key="group"
- class="text-gray-900 text-sm"
- >
- {{ group }}
- </option>
- </select>
-
- <!-- error message for select box -->
+ class="block text-sm font-medium text-gray-900 dark:text-gray-400"
+ >Grupper</label>
<div
- class="text-error"
- v-for="(error, index) of v$.item.selectGroup.$errors"
- :key="index"
+ class="overflow-auto w-full h-32 mt-2 text-base list-none bg-white rounded divide-y divide-gray-100 dark:bg-gray-700"
>
- <div class="text-error text-sm">
- {{ error.$message }}
- </div>
+ <ul class="py-1" aria-labelledby="dropdownDefault">
+ <li>
+ <div class="form-check" v-for="group in groups" :key="group">
+ <input
+
+ class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-primary-medium checked:bg-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+ type="checkbox"
+ :value="group.communityId"
+ @change="onChangeGroup($event)"
+ >
+ <label class="form-check-label inline-block text-gray-800">
+ {{ group.name }}
+ </label>
+ </div>
+ </li>
+ </ul>
</div>
+ <label class="text-error text-sm block">{{ groupErrorMessage }}</label>
</div>
<!-- price -->
- <div class="mb-6" :class="{ error: v$.item.price.$errors.length }">
+ <div class="mb-6 mt-4" :class="{ error: v$.item.price.$errors.length }">
<label
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
id="priceLabel"
@@ -158,6 +152,7 @@
<div class="mb-6" :class="{ error: v$.item.address.$errors.length }">
<label
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+ id="addressLabel"
>Adresse</label
>
<input
@@ -215,7 +210,7 @@
<script>
import useVuelidate from "@vuelidate/core";
import { parseUserFromToken } from "@/utils/token-utils";
-import { postNewItem } from "@/utils/apiutil";
+import { postNewItem, getMyGroups } from "@/utils/apiutil";
import Button from "@/components/BaseComponents/ColoredButton";
import {
@@ -274,9 +269,6 @@ export default {
select: {
required: helpers.withMessage(() => `Velg en kategori`, required),
},
- selectGroup: {
- required: helpers.withMessage(() => `Velg en gruppe`, required),
- },
address: {
required: helpers.withMessage(
() => "Addressen kan ikke være tom",
@@ -303,11 +295,13 @@ export default {
type: "",
images: [],
userId: -1,
- selectGroup: null,
+ selectedGroupId: -1,
+ selectedGroups: [],
},
//Kategorier skal legges inn ved api/hente fra db, her må det endres etterhvert
categories: ["Hage", "Kjøkken", "Musikk", "Annet"],
- groups: [4040, 4041],
+ groups: [],
+ groupErrorMessage: '',
};
},
methods: {
@@ -315,7 +309,10 @@ export default {
console.log("sjekker validering");
this.v$.item.$touch();
- if (this.v$.item.$invalid) {
+ if (this.v$.item.$invalid || this.item.selectedGroups.length === 0) {
+ if(this.item.selectedGroups.length === 0){
+ this.groupErrorMessage = "Velg gruppe/grupper";
+ }
console.log("Invalid, avslutter...");
return false;
}
@@ -338,7 +335,7 @@ export default {
console.log("Addressen: " + this.item.address);
console.log("Pris: " + this.item.price);
console.log("bilder: " + this.item.images);
- console.log("gruppe: " + this.item.selectGroup);
+ console.log("gruppe: " + this.item.selectedGroups);
const itemInfo = {
title: this.item.title,
@@ -347,7 +344,7 @@ export default {
address: this.item.address,
userID: this.item.userId,
categoryNames: [],
- communityIDs: [this.item.selectGroup],
+ communityIDs: this.item.selectedGroups,
};
console.log(itemInfo);
@@ -355,20 +352,49 @@ export default {
const postRequest = await postNewItem(itemInfo);
console.log("posted: " + postRequest);
+
+ this.$router.push('/');
}
},
checkUser: async function () {
let user = parseUserFromToken(this.$store.state.user.token);
this.item.userId = parseInt(user.accountId);
- console.log("id: " + this.item.userId);
},
addImage: function (event) {
console.log(event.target.files);
this.item.images.push(URL.createObjectURL(event.target.files[0]));
- console.log("antall bilder: " + this.item.images.length);
+ },
+
+ getGroups: async function(){
+ this.groups = await getMyGroups();
+ },
+
+ onChangeGroup: function(e){
+ this.selectedGroupId = e.target.value;
+ let alreadyInGroupList = false;
+ console.log("selected clicked");
+
+ for (let i = 0; i <= this.item.selectedGroups.length; i++) {
+ if (this.selectedGroupId == this.item.selectedGroups[i]) {
+ const index = this.item.selectedGroups.indexOf(this.selectedGroupId);
+ if (index > -1) {
+ this.item.selectedGroups.splice(index, 1);
+ }
+ alreadyInGroupList = true;
+ }
+ }
+
+ if(!alreadyInGroupList){
+ this.item.selectedGroups.push(this.selectedGroupId);
+ this.groupErrorMessage = "";
+ }
+
},
},
+ beforeMount() {
+ this.getGroups();
+ }
};
</script>
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index 5f6a2261b6e74816f4c69cb3646ccbe51bf84928..fd412f2d0aa88bc3a2798753caab284afaf6cb2b 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -223,3 +223,17 @@ export async function GetIfUserAlreadyInCommunity(communityID) {
return error;
});
}
+
+export async function LeaveCommunity(communityID) {
+ return axios
+ .patch(API_URL + "communities/" + communityID + "/leave", communityID, {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ return response.data;
+ })
+ .catch((error) => {
+ console.log(error.data);
+ return error;
+ });
+}
diff --git a/src/views/CommunityViews/CommunityView.vue b/src/views/CommunityViews/CommunityView.vue
index 97b774a1c48dc778df7996ae32c0e743e7435f6e..2c988245f6333e1cf07dd2efba9a6055668bb9c3 100644
--- a/src/views/CommunityViews/CommunityView.vue
+++ b/src/views/CommunityViews/CommunityView.vue
@@ -1,24 +1,23 @@
<template>
<div v-if="loggedIn">
<div class="flex flex-row p-4 relative">
- <p class="capitalize font-bold w-full">Mine felleskap</p>
+ <div class="text-xl md:text-2xl text-gray-600 font-medium w-full">Mine grupper</div>
<UserAddIcon
- class="cursor-pointer max-h-6 max-w-6 float-right grow"
- @click="$router.push('/newCommunity')"
- v-if="loggedIn"
- alt="Lag ett nytt felleskap"
+ class="cursor-pointer max-h-6 max-w-6 float-right grow"
+ @click="$router.push('/newCommunity')"
+ alt="Opprett ny gruppe"
/>
</div>
- <CommunityList :communities="myCommunities" :member="true" />
+ <CommunityList :communities="myCommunities" :member="true"/>
</div>
- <p class="capitalize font-bold w-full p-4">Offentlige felleskap</p>
- <CommunityList :communities="publicCommunities" :member="false" />
+ <p class="text-xl md:text-2xl text-gray-600 font-medium w-full p-4">Offentlige grupper</p>
+ <CommunityList :communities="publicCommunities" :member="false"/>
</template>
<script>
import CommunityList from "@/components/CommunityComponents/CommunityList.vue";
-import { getMyGroups, getVisibleGroups } from "@/utils/apiutil";
-import { UserAddIcon } from "@heroicons/vue/outline";
+import {getMyGroups, getVisibleGroups} from "@/utils/apiutil";
+import {UserAddIcon} from "@heroicons/vue/outline";
export default {
name: "HomeView",
@@ -42,7 +41,7 @@ export default {
// Remove all of the user's communities from the public communities arrays
this.publicCommunities = this.publicCommunities.filter(
- (val) => !this.myCommunities.includes(val)
+ (val) => !this.myCommunities.includes(val)
);
},
};
diff --git a/tests/unit/component-tests/community-component-tests/add-new-item.spec.js b/tests/unit/component-tests/community-component-tests/add-new-item.spec.js
index 9026411b4cfe97a22636a8eb1d54fa12a224bc0c..286a81848eb1b42f673d18a0f7bbc8db36af0aef 100644
--- a/tests/unit/component-tests/community-component-tests/add-new-item.spec.js
+++ b/tests/unit/component-tests/community-component-tests/add-new-item.spec.js
@@ -6,7 +6,6 @@ describe("addNewItem elements rendering", () => {
const wrapper = shallowMount(AddNewItem);
expect(wrapper.find("#titleLabel").text()).toMatch("Tittel");
- expect(wrapper.find("#selectCategoryLabel").text()).toMatch("Kategori");
expect(wrapper.find("#priceLabel").text()).toMatch("Pris");
expect(wrapper.find("#descriptionLabel").text()).toMatch("Beskrivelse");
expect(wrapper.find("#imageLabel").text()).toMatch("Bilde");
@@ -19,10 +18,6 @@ describe("addNewItem elements rendering", () => {
await titleInput.setValue("Dyson");
expect(titleInput.element.value).toBe("Dyson");
- const selectedCategory = wrapper.find("#categories");
- await selectedCategory.setValue("Hage");
- expect(selectedCategory.element.value).toBe("Hage");
-
const priceInput = wrapper.find("#price");
await priceInput.setValue(500);
expect(priceInput.element.value).toBe("500");
diff --git a/tests/unit/component-tests/user-component-tests/register-user-component.spec.js b/tests/unit/component-tests/user-component-tests/register-user-component.spec.js
index 142860bf75a1138bfa4351ffb688c9982f01adbe..9accd167543e4b2291397821c4aeaedf42804313 100644
--- a/tests/unit/component-tests/user-component-tests/register-user-component.spec.js
+++ b/tests/unit/component-tests/user-component-tests/register-user-component.spec.js
@@ -17,7 +17,7 @@ describe("RegisterFormComponent", () => {
});
it("renders the h2 text correctly", () => {
- expect(wrapper.find("h3").text()).toBe("Opprett ny bruker");
+ expect(wrapper.find("#registerLabel").text()).toBe("Opprett ny konto");
});
it("has a button", () => {