diff --git a/src/components/ChatComponents/ChatMessage.vue b/src/components/ChatComponents/ChatMessage.vue
index 3c63cef6850cdad57f8a1dd9ca9a39a7e3f96099..8b046dc79ae9664a1cc82182337e6052a43333e3 100644
--- a/src/components/ChatComponents/ChatMessage.vue
+++ b/src/components/ChatComponents/ChatMessage.vue
@@ -58,18 +58,18 @@ export default {
calculateTime() {
var time = this?.message.timestamp;
var date = new Date(time);
-
+
var mmOfMessage = String(date.getMinutes());
var hhOfMessage = String(date.getHours());
- if(mmOfMessage <= 9){
+ if (mmOfMessage <= 9) {
mmOfMessage = "0" + mmOfMessage;
}
- if(hhOfMessage<=9){
+ if (hhOfMessage <= 9) {
hhOfMessage = "0" + hhOfMessage;
}
var ddOfMessage = String(date.getDate()).padStart(2, "0");
var dayOfMessage = date.toLocaleString("default", { weekday: "short" });
- var monthOfMessage = String(date.getMonth() + 1).padStart(2, "0");
+ var monthOfMessage = String(date.getMonth() + 1).padStart(2, "0");
const shortMonthOfMessage = date.toLocaleString("default", {
month: "short",
});
@@ -77,7 +77,7 @@ export default {
var today = new Date();
var dd = String(today.getDate()).padStart(2, "0");
- var mm = String(today.getMonth() + 1).padStart(2, "0");
+ var mm = String(today.getMonth() + 1).padStart(2, "0");
var yyyy = today.getFullYear();
if (ddOfMessage == dd) {
return "" + hhOfMessage + ":" + mmOfMessage + "";
diff --git a/src/components/ChatComponents/RentalMessage.vue b/src/components/ChatComponents/RentalMessage.vue
index c9b28199e68c841fecfe156cc6f319d1afe1d2ea..693407e471342595ace6a722a3a17f78c7cc7291 100644
--- a/src/components/ChatComponents/RentalMessage.vue
+++ b/src/components/ChatComponents/RentalMessage.vue
@@ -8,7 +8,7 @@
<p>Pris: {{ price }}kr</p>
</div>
<div class="img-container">
- <img class="img" :src="img" alt="Produkt Bilde" />
+ <img class="img" :src="image" alt="Produkt Bilde" />
</div>
</div>
<div>
@@ -19,11 +19,21 @@
</p>
</div>
</div>
- <div class="buttons" v-if="(!rent.isAccepted && !rent.deleted && this.rent.renterId != this.userID)">
+ <div
+ class="buttons"
+ v-if="
+ !rent.isAccepted && !rent.deleted && this.rent.renterId != this.userID
+ "
+ >
<button class="button green" @click="accept">Godta</button>
<button class="button red" @click="reject">Avslå</button>
</div>
- <div class="waiting" v-if="!rent.isAccepted && !rent.deleted && this.rent.renterId == this.userID">
+ <div
+ class="waiting"
+ v-if="
+ !rent.isAccepted && !rent.deleted && this.rent.renterId == this.userID
+ "
+ >
Waiting for owner to accept
</div>
<div class="" v-if="rent.isAccepted">
@@ -38,8 +48,8 @@
<script>
import axios from "axios";
-import { tokenHeader } from "@/utils/token-utils";
-import { parseCurrentUser } from "@/utils/token-utils";
+import { tokenHeader, parseCurrentUser } from "@/utils/token-utils";
+import { getItemPictures, } from "@/utils/apiutil";
export default {
props: {
@@ -48,6 +58,11 @@ export default {
required: true,
},
},
+ data() {
+ return {
+ image: null,
+ }
+ },
computed: {
userID() {
return parseCurrentUser().accountId;
@@ -75,9 +90,8 @@ export default {
return this.rent.message || "Ingen Melding";
},
side() {
- return this.rent.renterId == this.userID
- ? "flex-end" : "flex-start";
- }
+ return this.rent.renterId == this.userID ? "flex-end" : "flex-start";
+ },
},
methods: {
async accept() {
@@ -93,6 +107,19 @@ export default {
{ headers: tokenHeader() }
);
},
+ async getImage() {
+ let images = await getItemPictures(this.rent.listingId);
+
+ if (images.length > 0) {
+ this.image = images[0].picture;
+ } else {
+ this.image = "https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80";
+
+ }
+ },
+ },
+ async beforeMount() {
+ await this.getImage();
},
};
</script>
diff --git a/src/components/CommunityComponents/CommunityHamburger.vue b/src/components/CommunityComponents/CommunityHamburger.vue
index 348e60a278d44a882a535860aa6976314846a5b3..80a3cfd1ef8c30d6eeeca137f47baa4bc7f2b0a1 100644
--- a/src/components/CommunityComponents/CommunityHamburger.vue
+++ b/src/components/CommunityComponents/CommunityHamburger.vue
@@ -1,4 +1,7 @@
<template>
+ <!-- Hamburger menu for community header, contains options for adding a new listing,
+ seeing all members in the community, administrating the community if admin and
+ leaving the community -->
<div
id="dropdown"
class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
diff --git a/src/components/CommunityComponents/CommunityHeader.vue b/src/components/CommunityComponents/CommunityHeader.vue
index d5d55e2c09c7b5c8e329444d11a3a35eb5fcd1dd..c4303c3225413382bd65ca5a20e56c64eb9028a1 100644
--- a/src/components/CommunityComponents/CommunityHeader.vue
+++ b/src/components/CommunityComponents/CommunityHeader.vue
@@ -1,5 +1,10 @@
<template>
+ <!-- Community header contains the community's name and address, a join button if
+ the user is not in the community and community hamburger menu if the user is
+ in the community -->
<div>
+ <!-- A warning asking user is it is sure it wants to leave the community when leave community
+ from hamburger menu is clicked -->
<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.'"
@@ -20,9 +25,13 @@
/>
</div>
</CustomFooterModal>
+
+ <!-- The load spinner will show while community and it's members are being loaded from the db -->
<div v-if="loading" class="flex place-content-center mx-4">
<LoaderSpinner />
</div>
+
+ <!-- After loaded the community header shows -->
<div v-else class="flex items-center justify-between mx-4">
<router-link
:to="'/community/' + community.communityId"
@@ -97,7 +106,6 @@
:community-i-d="community.communityId"
:admin="admin"
/>
- <!-- class="absolute" -->
</div>
</div>
</div>
diff --git a/src/components/CommunityComponents/CommunityHome.vue b/src/components/CommunityComponents/CommunityHome.vue
index 3cb385354808eadcc4aa3685e9d99b1f66e22c44..2e09b5104951dba94cbb936cb63c1a5f9e4d70ff 100644
--- a/src/components/CommunityComponents/CommunityHome.vue
+++ b/src/components/CommunityComponents/CommunityHome.vue
@@ -1,8 +1,12 @@
<template>
+ <!-- The community home page, shows all the items in the community with the possibility of
+ clicking on an item to be redirected to the item info page -->
<div>
+ <!-- Shows loading component while loading the content for the page -->
<div v-if="loading" class="flex place-content-center">
<LoaderSpinner />
</div>
+ <!-- When finish loading the home page for community is shown -->
<section v-else class="w-full px-5 py-4 mx-auto rounded-md">
<CommunityHeader :admin="false" class="mb-5" />
diff --git a/src/components/CommunityComponents/CommunityList.vue b/src/components/CommunityComponents/CommunityList.vue
index 83d7b1d6c1ac402c7a9988b4542bf2c1beade53c..7fb0387d636cf1f0c90df9d1f61f5002eb66e15c 100644
--- a/src/components/CommunityComponents/CommunityList.vue
+++ b/src/components/CommunityComponents/CommunityList.vue
@@ -1,4 +1,5 @@
<template>
+ <!-- A list conatining all the communities -->
<p v-if="!communities.length" class="flex place-content-center text-gray-400 mt-8">
Ingen grupper
</p>
diff --git a/src/components/CommunityComponents/CommunityListItem.vue b/src/components/CommunityComponents/CommunityListItem.vue
index 62306dabefad2a5643f665aa842d8f3f29b1f5d5..93384ccb76c9a00c3683098d5723130f9e40cc12 100644
--- a/src/components/CommunityComponents/CommunityListItem.vue
+++ b/src/components/CommunityComponents/CommunityListItem.vue
@@ -39,7 +39,7 @@
/>
</div>
- <!-- If a user is not logges in and tries to join a community, this message shows -->
+ <!-- If a user is not logged in and tries to join a community, this message shows -->
<div class="flex justify-center p-2">
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
{{ responseToUser }}
diff --git a/src/components/CommunityComponents/CommunityRequestForm.vue b/src/components/CommunityComponents/CommunityRequestForm.vue
index 8508efd202f46350266f1c198b5f7419aca8aac3..f00a8bf6b473e75353fae3ca159d5e1d6ef98e9e 100644
--- a/src/components/CommunityComponents/CommunityRequestForm.vue
+++ b/src/components/CommunityComponents/CommunityRequestForm.vue
@@ -1,4 +1,5 @@
<template>
+ <!-- A request form for joining a private community -->
<div
class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
>
@@ -99,7 +100,6 @@ export default {
routeToHome() {
this.$router.push("/");
},
- //TODO fix so that community id is set (not null)
async saveClicked() {
this.communityID = await this.$router.currentRoute.value.params
.communityID;
diff --git a/src/components/CommunityComponents/CommunitySettings.vue b/src/components/CommunityComponents/CommunitySettings.vue
index 8ea68e5261329fb85624ce68a201be8e02273416..eade2eeb081e0f08e491aa6b723e926418de70cb 100644
--- a/src/components/CommunityComponents/CommunitySettings.vue
+++ b/src/components/CommunityComponents/CommunitySettings.vue
@@ -9,7 +9,7 @@
</template>
<script>
-// import CommunityAdminService from "@/services/community-admin.service";
+import CommunityAdminService from "@/services/community-admin.service";
import IconButton from "@/components/BaseComponents/IconButton.vue";
//TODO: OPEN CONFIRMATION DIALOG WHEN DELETING
@@ -19,9 +19,12 @@ export default {
IconButton,
},
methods: {
- deleteCommunity() {
- console.log("DELETED");
- // CommunityAdminService.deleteCommunity(this.$route.params.communityID);
+ async deleteCommunity() {
+ let response = await CommunityAdminService.deleteCommunity(
+ this.$route.params.communityID
+ );
+ if (response.status === 200)
+ this.$router.push({ name: "home", replace: true });
},
},
};
diff --git a/src/components/CommunityComponents/MemberList.vue b/src/components/CommunityComponents/MemberList.vue
index 3818146ff63024c1dab742805231a0e0baa582c9..c832615512e4f260e990c7e2d3deed9e6e54de82 100644
--- a/src/components/CommunityComponents/MemberList.vue
+++ b/src/components/CommunityComponents/MemberList.vue
@@ -1,4 +1,5 @@
<template>
+ <!-- Shows all members in a community -->
<ul>
<li v-for="member in members" :key="member.userId">
<UserListItemCard :buttons="buttons" :user="member" />
diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index 7a62e90f302416559f695459aafcfddfd6f43244..9776ad8c614bc84c27b5d601a502e1131e059b08 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -1,4 +1,5 @@
<template>
+ <!-- A form for creating a new community -->
<div
class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
>
@@ -278,12 +279,13 @@ export default {
location: this.group.place,
picture: this.group.image,
};
-
- console.log(this.group.image);
-
const respone = await postNewgroup(groupInfo);
if (respone.status === 200 || respone.status === 201) {
- this.$router.push({ path: "/", replace: true });
+ this.$store.commit("addAdmin", respone.data);
+ this.$router.push({
+ path: "/community/" + respone.data,
+ replace: true,
+ });
}
}
},
diff --git a/src/components/ItemComponents/EditItemForm.vue b/src/components/ItemComponents/EditItemForm.vue
index b5fed83d4c3eac9073d1a09ca34ae95e40599163..0283428444580fbf70c6aa9fb6ee525cffbedbf9 100644
--- a/src/components/ItemComponents/EditItemForm.vue
+++ b/src/components/ItemComponents/EditItemForm.vue
@@ -228,6 +228,7 @@
<script>
import useVuelidate from "@vuelidate/core";
import ColoredButton from "@/components/BaseComponents/ColoredButton";
+import FormImageDisplay from "@/components/BaseComponents/FormImageDisplay.vue";
import ListingService from "@/services/listing.service";
import CommunityService from "@/services/community.service";
import ImageService from "@/services/image.service";
@@ -246,6 +247,7 @@ export default {
components: {
ColoredButton,
+ FormImageDisplay,
},
setup() {
@@ -313,10 +315,10 @@ export default {
category: "",
selectedCategory: "",
selectedCategories: [],
- images: [],
userId: -1,
selectedCommunityId: -1,
selectedCommunities: [],
+ images: [],
},
categories: [
"Antikviteter og kunst",
@@ -366,7 +368,10 @@ export default {
communityIDs: this.updatedItem.selectedCommunities,
};
await ListingService.putItem(itemInfo);
- await ImageService.putListingImages(this.images);
+ await ImageService.putListingImages(
+ this.initialItem.listingID,
+ this.updatedItem.images
+ );
this.$router.push("/itempage/" + this.initialItem.listingID);
}
},
@@ -380,7 +385,7 @@ export default {
const id = await ImageService.postNewImage(res);
const API_URL = process.env.VUE_APP_BASEURL;
- that.item.images.push(API_URL + "images/" + id);
+ that.updatedItem.images.push(API_URL + "images/" + id);
};
fileReader.readAsArrayBuffer(image);
},
@@ -425,18 +430,18 @@ export default {
}
return false;
},
- removeImage(image) {
+ async removeImage(image) {
let newImages = [];
- for (let i in this.item.images) {
- if (this.item.images[i] != image) {
- newImages.push(this.item.images[i]);
+ for (let i in this.updatedItem.images) {
+ if (this.updatedItem.images[i] != image) {
+ newImages.push(this.images[i]);
}
}
- this.item.images = newImages;
+ this.updatedItem.images = newImages;
},
},
- async beforeMount() {
+ async beforeCreate() {
let itemID = await this.$router.currentRoute.value.params.id;
let item = await ListingService.getItem(itemID);
@@ -448,7 +453,12 @@ export default {
this.initialItem = item;
this.communities = await CommunityService.getUserCommunities();
+
this.images = await ListingService.getItemPictures(itemID);
+ let imageURLS = [];
+ for (let i in this.images) {
+ imageURLS.push(this.images[i].picture);
+ }
let initialCategories = [];
for (let i in this.initialItem.categoryNames) {
@@ -469,7 +479,7 @@ export default {
price: this.initialItem.pricePerDay,
selectedCategories: initialCategories,
selectedCategory: selectedCategory,
- images: this.images,
+ images: imageURLS,
userId: this.initialItem.userID,
selectedCommunityId: 0,
selectedCommunities: initialCommunities,
diff --git a/src/components/ItemComponents/NewItemForm.vue b/src/components/ItemComponents/NewItemForm.vue
index 342222faa54b86854484c120da6c1d0a87cee01b..105c168fe8c4914af8831ceef96edf622eac730c 100644
--- a/src/components/ItemComponents/NewItemForm.vue
+++ b/src/components/ItemComponents/NewItemForm.vue
@@ -352,9 +352,9 @@ export default {
};
await ListingService.postNewItem(itemInfo);
- await ImageService.PostImagesArrayToListing(this.item.images);
+ await ImageService.postImagesArrayToListing(this.item.images);
- this.$router.push("/");
+ this.$router.go(-1);
}
},
@@ -397,7 +397,7 @@ export default {
}
},
- removeImage(image) {
+ async removeImage(image) {
let newImages = [];
for (let i in this.item.images) {
if (this.item.images[i] != image) {
diff --git a/src/components/RentingComponents/ItemInfo.vue b/src/components/RentingComponents/ItemInfo.vue
index 33e0d6595225af5e34e503feac89000bd408d2ca..beee721738d6feb6896c2c15cbb65ab6f9dda62f 100644
--- a/src/components/RentingComponents/ItemInfo.vue
+++ b/src/components/RentingComponents/ItemInfo.vue
@@ -161,6 +161,7 @@ export default {
this.pushItem.toTime = this.rentingEndDate;
this.pushItem.title = this.item.title;
this.pushItem.price = this.totPrice;
+ this.pushItem.renterId = this.item.userID;
},
async getItem() {
let id = this.$router.currentRoute.value.params.id;
diff --git a/src/components/RentingComponents/NewRent.vue b/src/components/RentingComponents/NewRent.vue
index 7ced0d6da6b8575e6fa37f287ddc3ae464fa0072..f0609f0ccaa7515c53d4839578ae77dca6bd510b 100644
--- a/src/components/RentingComponents/NewRent.vue
+++ b/src/components/RentingComponents/NewRent.vue
@@ -42,7 +42,7 @@
</div>
<div>
<notification-modal
- @click="routeToHome"
+ @click="routeToChat"
:visible="confirmed"
:title="'Vellykket'"
:message="'Forespørsel sendt!'"
@@ -150,8 +150,8 @@ export default {
cancelRent() {
this.$router.go(0);
},
- routeToHome() {
- this.$router.push("/");
+ routeToChat() {
+ this.$router.push("/messages?userID=" + this.newRentBox.renterId);
},
sendRent: async function () {
const rent = {
diff --git a/src/components/UserProfileComponents/UserListItemCard.vue b/src/components/UserProfileComponents/UserListItemCard.vue
index 17c002bc28fce875361dafac43ea0add48e3e9a0..a39ae002e6b52a5547a9c0c198b57481d64faf72 100644
--- a/src/components/UserProfileComponents/UserListItemCard.vue
+++ b/src/components/UserProfileComponents/UserListItemCard.vue
@@ -131,7 +131,7 @@ export default {
);
},
},
- async created() {
+ async beforeMount() {
const maybeRating = await UserService.getUserRatingAverage(
this.user.userId
);
diff --git a/src/components/UserProfileComponents/UserProfile.vue b/src/components/UserProfileComponents/UserProfile.vue
index 7f0f32eb3451295d6a9d6b73e8ff3eea326be53a..c2d2a05e395e40893ab49a5693e028dbec97e1e1 100644
--- a/src/components/UserProfileComponents/UserProfile.vue
+++ b/src/components/UserProfileComponents/UserProfile.vue
@@ -98,7 +98,11 @@
<rating-component :rating="ownerRating" :ratingType="'Utleier'" />
</div>
- <div v-show="!isCurrentUser" @click="$router.push('/messages?userID=' + id)" class="flex mt-4 space-x-3 lg:mt-6">
+ <div
+ v-show="!isCurrentUser"
+ @click="$router.push('/messages?userID=' + id)"
+ class="flex mt-4 space-x-3 lg:mt-6"
+ >
<a
href="#"
class="inline-flex items-center py-2 px-4 text-sm font-medium text-center text-gray-900 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700"
diff --git a/src/services/community-admin.service.js b/src/services/community-admin.service.js
index c935f1181ea5d8c81306dddae21a8015d95a8d9d..eb2c23e00d5d3ca456f5685429dc5d0393d01047 100644
--- a/src/services/community-admin.service.js
+++ b/src/services/community-admin.service.js
@@ -60,7 +60,7 @@ class CommunityAdminService {
* @returns TODO
*/
async deleteCommunity(communityID) {
- return await axios.post(
+ return await axios.delete(
API_URL + "communities/" + communityID + "/remove",
{
headers: tokenHeader(),
diff --git a/src/services/image.service.js b/src/services/image.service.js
index 7ebc1fa786bdf0a79c9c193b662777a1bcabfc7f..3104f1b6be3627b9a6c1a2b72c9957f513c89d54 100644
--- a/src/services/image.service.js
+++ b/src/services/image.service.js
@@ -42,6 +42,19 @@ class ImageService {
console.error(error.response);
});
}
+
+ deleteImage(image) {
+ return axios
+ .delete(image, {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ return response;
+ })
+ .catch((error) => {
+ console.error(error.response);
+ });
+ }
}
export default new ImageService();
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 8c3744e58a0c4e387ddb83cfcef1a99efebbff7d..00d6665d7964d04a606aa2959e57672be8510044 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -6,6 +6,7 @@ const state = {
const mutations = {
logout(state) {
state.token = null;
+ state.adminList = [];
},
saveToken(state, token) {
state.token = token;
@@ -18,6 +19,10 @@ const mutations = {
state.adminList.push(communityIDArray[i]);
}
},
+ addAdmin(state, communityID) {
+ if (!Number(communityID)) return;
+ state.adminList.push(communityID);
+ },
};
export default {
diff --git a/tests/unit/component-tests/ChatComponentsTest/RentalMessage.spec.js b/tests/unit/component-tests/ChatComponentsTest/RentalMessage.spec.js
index 6625f6151a85edfc90bbe86cd680727bbebc13f9..c08130180924969b4b57b9c0a70eb2a50e3e35c2 100644
--- a/tests/unit/component-tests/ChatComponentsTest/RentalMessage.spec.js
+++ b/tests/unit/component-tests/ChatComponentsTest/RentalMessage.spec.js
@@ -13,6 +13,15 @@ jest.mock("@/utils/token-utils", () => {
};
});
+jest.mock("@/utils/apiutil", () => {
+ return {
+ getItemPictures: () => {
+ return new Promise((resolve) => {
+ resolve([]);
+ });
+ },
+ };
+});
jest.mock("axios");
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap
index 30bc58a9142e8e5b02ef7f595d25c6b495848ea0..6389c542acb08f641164d126f05565082d3b9cc4 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap
@@ -2,34 +2,46 @@
exports[`CommunityHeader component renders correctly 1`] = `
<div
- adminstatus="true"
- community="[object Object]"
+ data-v-app=""
>
- <!-- Main modal -->
- <!--v-if-->
-
+ <!-- Community header contains the community's name and address, a join button if
+ the user is not in the community and community hamburger menu if the user is
+ in the community -->
<div
- class="flex place-content-center mx-4"
+ adminstatus="true"
+ community="[object Object]"
>
+ <!-- A warning asking user is it is sure it wants to leave the community when leave community
+ from hamburger menu is clicked -->
+
+ <!-- Main modal -->
+ <!--v-if-->
+
+ <!-- The load spinner will show while community and it's members are being loaded from the db -->
<div
- class="loadingio-spinner-bean-eater-o5tefvffeqm"
+ class="flex place-content-center mx-4"
>
<div
- class="ldio-sweozsnwol"
+ class="loadingio-spinner-bean-eater-o5tefvffeqm"
>
- <div>
- <div />
- <div />
- <div />
- </div>
- <div>
- <div />
- <div />
- <div />
+ <div
+ class="ldio-sweozsnwol"
+ >
+ <div>
+ <div />
+ <div />
+ <div />
+ </div>
+ <div>
+ <div />
+ <div />
+ <div />
+ </div>
</div>
</div>
</div>
</div>
+
</div>
`;
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/community-list.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/community-list.spec.js.snap
index a385829acb32b11671e1d9788b5b401b95c4d892..fc8d4f6d97bfaa6bc5e459e517c0a2cd8b490e1e 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/community-list.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/community-list.spec.js.snap
@@ -1,110 +1,117 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CommunityList component renders correctly 1`] = `
-<ul>
+<div
+ data-v-app=""
+>
- <li>
- <div
- class="border-black"
- >
-
- <!-- Main modal -->
- <!--v-if-->
-
+ <!-- A list conatining all the communities -->
+ <ul>
+
+ <li>
<div
- class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-2"
+ class="border-black"
>
+
+ <!-- Main modal -->
+ <!--v-if-->
+
<div
- class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2"
- >
- <img
- alt="Fellsekaps bilde"
- class="rounded-md"
- src="string"
- />
- </div>
- <div
- class="flex-1 pl-1 overflow-hidden"
+ class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-2"
>
<div
- class="font-medium text-gray-800 dark:text-white truncate"
+ class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2"
>
- string
+ <img
+ alt="Fellsekaps bilde"
+ class="rounded-md"
+ src="string"
+ />
</div>
- </div>
- <div
- class="flex flex-row justify-center items-center"
- >
- <svg
- aria-hidden="true"
- class="max-h-6 max-w-6 shrink m-2"
- fill="none"
- stroke="currentColor"
- stroke-width="2"
- viewBox="0 0 24 24"
- xmlns="http://www.w3.org/2000/svg"
+ <div
+ class="flex-1 pl-1 overflow-hidden"
>
- <path
- d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
- stroke-linecap="round"
- stroke-linejoin="round"
- />
- </svg>
+ <div
+ class="font-medium text-gray-800 dark:text-white truncate"
+ >
+ string
+ </div>
+ </div>
+ <div
+ class="flex flex-row justify-center items-center"
+ >
+ <svg
+ aria-hidden="true"
+ class="max-h-6 max-w-6 shrink m-2"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+ </div>
</div>
</div>
- </div>
- </li>
- <li>
- <div
- class="border-black"
- >
-
- <!-- Main modal -->
- <!--v-if-->
-
+ </li>
+ <li>
<div
- class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-2"
+ class="border-black"
>
+
+ <!-- Main modal -->
+ <!--v-if-->
+
<div
- class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2"
- >
- <img
- alt="Fellsekaps bilde"
- class="rounded-md"
- src="string"
- />
- </div>
- <div
- class="flex-1 pl-1 overflow-hidden"
+ class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-2"
>
<div
- class="font-medium text-gray-800 dark:text-white truncate"
+ class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2"
>
- string
+ <img
+ alt="Fellsekaps bilde"
+ class="rounded-md"
+ src="string"
+ />
</div>
- </div>
- <div
- class="flex flex-row justify-center items-center"
- >
- <svg
- aria-hidden="true"
- class="max-h-6 max-w-6 shrink m-2"
- fill="none"
- stroke="currentColor"
- stroke-width="2"
- viewBox="0 0 24 24"
- xmlns="http://www.w3.org/2000/svg"
+ <div
+ class="flex-1 pl-1 overflow-hidden"
>
- <path
- d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
- stroke-linecap="round"
- stroke-linejoin="round"
- />
- </svg>
+ <div
+ class="font-medium text-gray-800 dark:text-white truncate"
+ >
+ string
+ </div>
+ </div>
+ <div
+ class="flex flex-row justify-center items-center"
+ >
+ <svg
+ aria-hidden="true"
+ class="max-h-6 max-w-6 shrink m-2"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+ </div>
</div>
</div>
- </div>
- </li>
+ </li>
+
+ </ul>
-</ul>
+</div>
`;
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap
index 9888519e7bc965cf1feeadf34dc0c6053e58a2fc..e44c8fc5aa31e9ace1a4f5430d4b37cd0265bd48 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap
@@ -2,160 +2,167 @@
exports[`CreateNewGroup elements rendering renders correctly 1`] = `
<div
- class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
+ data-v-app=""
>
- <!-- Component heading -->
+
+ <!-- A form for creating a new community -->
<div
- class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-10"
+ class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
>
- Opprett ny gruppe
- </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"
+ <!-- Component heading -->
+ <div
+ class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-10"
>
- Synlighet
- </label>
+ Opprett ny gruppe
+ </div>
+ <!-- Radio boxes -->
<div
- class="form-check"
+ class="mt-6"
>
- <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"
- id="flexRadioOpen"
- name="flexRadioDefault"
- type="radio"
- value="Ã…pen"
- />
<label
- class="form-check-label inline-block text-gray-800"
- for="flexRadioOpen"
- id="radioBoxOpenLabel"
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+ id="radioBoxLabel"
>
- Ã…pen
+ 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"
+ id="flexRadioOpen"
+ name="flexRadioDefault"
+ type="radio"
+ value="Ã…pen"
+ />
+ <label
+ 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"
+ id="flexRadioPrivate"
+ name="flexRadioDefault"
+ type="radio"
+ value="Privat"
+ />
+ <label
+ class="form-check-label inline-block text-gray-800"
+ for="flexRadioPrivate"
+ id="radioBoxPrivateLabel"
+ >
+ Privat
+ </label>
+ </div>
</div>
+ <!-- Title -->
<div
- class="form-check"
+ class="mt-6"
>
+ <label
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+ id="titleLabel"
+ >
+ Gruppenavn
+ </label>
<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"
- id="flexRadioPrivate"
- name="flexRadioDefault"
- type="radio"
- value="Privat"
+ 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"
+ id="title"
+ required=""
+ type="text"
/>
+ <!-- error message for title-->
+
+
+ </div>
+ <!-- Place -->
+ <div
+ class="mt-6"
+ >
<label
- class="form-check-label inline-block text-gray-800"
- for="flexRadioPrivate"
- id="radioBoxPrivateLabel"
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+ id="positionLabel"
>
- Privat
+ By/Sted
</label>
+ <input
+ 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=""
+ type="text"
+ />
+ <!-- error message for place-->
+
+
</div>
- </div>
- <!-- Title -->
- <div
- class="mt-6"
- >
- <label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- id="titleLabel"
- >
- Gruppenavn
- </label>
- <input
- 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"
- id="title"
- required=""
- type="text"
- />
- <!-- error message for title-->
-
-
- </div>
- <!-- Place -->
- <div
- class="mt-6"
- >
- <label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- id="positionLabel"
- >
- By/Sted
- </label>
- <input
- 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=""
- type="text"
- />
- <!-- error message for place-->
-
-
- </div>
- <!-- Description -->
- <div
- class="mt-6"
- >
- <label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
- id="descriptionLabel"
- >
- Beskrivelse
- </label>
- <textarea
- 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"
- id="description"
- required=""
- rows="4"
- />
- <!-- error message for description -->
-
-
- </div>
- <!-- Images -->
- <div
- class="mt-6"
- >
- <label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
- id="imageLabel"
+ <!-- Description -->
+ <div
+ class="mt-6"
>
- Bilde (bildet må være .png)
- </label>
- <input
- accept="image/png"
- multiple=""
- style="display: none;"
- type="file"
- />
- <!-- Button for adding an image -->
+ <label
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+ id="descriptionLabel"
+ >
+ Beskrivelse
+ </label>
+ <textarea
+ 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"
+ id="description"
+ required=""
+ rows="4"
+ />
+ <!-- error message for description -->
+
+
+ </div>
+ <!-- Images -->
<div
- class="inline-flex rounded-md shadow-sm"
+ class="mt-6"
>
- <!--<div class="text-error uppercase text-center">Midlertidig fjernet</div> -->
- <button
- class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800 disabled:opacity-50"
+ <label
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+ id="imageLabel"
+ >
+ Bilde (bildet må være .png)
+ </label>
+ <input
+ accept="image/png"
+ multiple=""
+ style="display: none;"
+ type="file"
+ />
+ <!-- Button for adding an image -->
+ <div
+ class="inline-flex rounded-md shadow-sm"
>
- Velg bilde
- </button>
+ <!--<div class="text-error uppercase text-center">Midlertidig fjernet</div> -->
+ <button
+ class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800 disabled:opacity-50"
+ >
+ Velg bilde
+ </button>
+ </div>
+ <!-- Div box for showing all chosen images -->
+
+
+ </div>
+ <!-- Save item button -->
+ <div
+ class="flex justify-center mt-10 float-right"
+ >
+ <button-stub
+ buttoncolor="blue"
+ id="saveButton"
+ text="Lagre"
+ />
</div>
- <!-- Div box for showing all chosen images -->
-
-
- </div>
- <!-- Save item button -->
- <div
- class="flex justify-center mt-10 float-right"
- >
- <button-stub
- buttoncolor="blue"
- id="saveButton"
- text="Lagre"
- />
</div>
+
</div>
`;