diff --git a/src/components/CommunityComponents/CommunityList.vue b/src/components/CommunityComponents/CommunityList.vue
index 97d25120249632f9d395a35f80e66c338125e0e3..7d2d789b09a5098dadfd90a695e23efbd01ec71d 100644
--- a/src/components/CommunityComponents/CommunityList.vue
+++ b/src/components/CommunityComponents/CommunityList.vue
@@ -1,7 +1,11 @@
<template>
<ul>
<li v-for="community in communities" :key="community">
- <CommunityListItem :community="community" :member="member" />
+ <CommunityListItem
+ :community="community"
+ :member="member"
+ class="border-black"
+ />
</li>
</ul>
</template>
diff --git a/src/components/CommunityComponents/CommunityListItem.vue b/src/components/CommunityComponents/CommunityListItem.vue
index 1dc94f4e3421de11b7367b51ad8c12eae11a242b..637b8d95a10e15425e698d97c7f57ed7f71e2a54 100644
--- a/src/components/CommunityComponents/CommunityListItem.vue
+++ b/src/components/CommunityComponents/CommunityListItem.vue
@@ -47,11 +47,19 @@
</CustomFooterModal>
<div
@click="toggleDialog()"
- class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-4"
+ class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-2"
>
- <div class="h-10 w-10 flex flex-col justify-center items-center mr-4">
- <UserGroupIcon v-if="!community.image" alt="Felleskapets bilde" />
- <!-- TODO: USE COMMUNITY IMAGE <img alt="Felleskapets bilde" src="@/assets/group.png" /> -->
+ <div
+ v-if="!community.picture"
+ class="h-10 w-10 flex flex-col justify-center items-center ml-2 mr-2"
+ >
+ <UserGroupIcon alt="Felleskapets bilde" class="h-10 w-10" />
+ </div>
+ <div
+ v-else
+ class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2"
+ >
+ <img :src="community.picture" alt="Fellsekaps bilde" class="rounded-md" />
</div>
<div class="flex-1 pl-1 overflow-hidden">
<div class="font-medium dark:text-white truncate">
diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index 54f3ba8e608a6a9041f97406552ffb82f08604f9..bfa39aaa8d7c3b3136319565e476ea82d2751191 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -1,10 +1,28 @@
<template>
<div
- class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
+ class="
+ md:ring-1
+ ring-gray-300
+ rounded-xl
+ overflow-hidden
+ mx-auto
+ mb-auto
+ max-w-md
+ w-full
+ p-4
+ "
>
<!-- Component heading -->
<div
- class="text-xl md:text-2xl font-medium text-center text-primary-light mt-4 mb-10"
+ class="
+ text-xl
+ md:text-2xl
+ font-medium
+ text-center text-gray-600
+ dark:text-gray-200
+ mt-4
+ mb-10
+ "
>
Opprett ny gruppe
</div>
@@ -18,7 +36,25 @@
>
<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"
+ 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"
@@ -36,7 +72,25 @@
</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"
+ 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"
@@ -63,7 +117,25 @@
<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"
+ 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
/>
@@ -89,7 +161,25 @@
>
<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"
+ 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
/>
@@ -117,7 +207,25 @@
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"
+ 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>
@@ -153,14 +261,28 @@
<!-- Button for adding an image -->
<div class="inline-flex rounded-md shadow-sm">
- <div class="text-error uppercase text-center">midlertidig fjernet</div>
- <!-- <button
+ <!--<div class="text-error uppercase text-center">Midlertidig fjernet</div> -->
+ <button
@click="$refs.file.click()"
- 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"
+ 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
+ "
:disabled="imageAdded"
>
Velg bilde
- </button> -->
+ </button>
<!-- Button for removing an image -->
</div>
@@ -176,12 +298,14 @@
<Button @click="saveClicked" id="saveButton" :text="'Lagre'"> </Button>
</div>
</div>
+
+ <!--<img :src="group.image" class="w-1/2 inline" alt="Bilde av gjenstanden" />-->
</template>
<script>
import useVuelidate from "@vuelidate/core";
import { required, helpers, maxLength } from "@vuelidate/validators";
-import { postNewgroup } from "@/utils/apiutil";
+import { postNewgroup, postNewImageCommunity } from "@/utils/apiutil";
import Button from "@/components/BaseComponents/ColoredButton";
export default {
@@ -239,8 +363,11 @@ export default {
radio: null,
place: "",
visibility: 1,
+ image: "",
},
imageThere: false,
+ imageId: -1,
+ imageStringURL: "",
};
},
computed: {
@@ -276,20 +403,38 @@ export default {
async saveClicked() {
if (this.checkValidation()) {
+ //this.group.image = "https://image.shutterstock.com/image-photo/distribution-delivery-concept-global-business-600w-1650964204.jpg";
const groupInfo = {
name: this.group.name,
description: this.group.description,
visibility: this.group.visibility,
location: this.group.place,
- picture: "",
+ picture: this.group.image,
};
+ console.log(this.group.image);
+
await postNewgroup(groupInfo);
}
},
- addImage: function (event) {
+ addImage: async function (event) {
this.group.images.push(URL.createObjectURL(event.target.files[0]));
+
+ var that = this;
+ let image = event.target.files[0];
+ let fileReader = new FileReader();
+ fileReader.onloadend = async function () {
+ const res = fileReader.result;
+ const id = await postNewImageCommunity(res);
+
+ const API_URL = process.env.VUE_APP_BASEURL;
+ console.log(id);
+ console.log(API_URL + "images/" + id);
+ that.group.image = API_URL + "images/" + id;
+
+ };
+ fileReader.readAsArrayBuffer(image);
this.imageThere = true;
},
},
diff --git a/src/components/FormComponents/ResetPasswordForm.vue b/src/components/FormComponents/ResetPasswordForm.vue
index 6f95c5210690720b88148f5babcc73702e54ce6c..b075e1a983cd3e6734a57fc1fb4ab07cea02d2b3 100644
--- a/src/components/FormComponents/ResetPasswordForm.vue
+++ b/src/components/FormComponents/ResetPasswordForm.vue
@@ -2,9 +2,7 @@
<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-primary-light mt-4 mb-8"
- >
+ <h3 class="text-xl font-medium text-center text-primary-light mt-4 mb-8">
Glemt passordet ditt?
</h3>
diff --git a/src/components/ItemComponents/NewItemForm.vue b/src/components/ItemComponents/NewItemForm.vue
index b92f23e2e83e052bad971f79f699ac35cba373dc..67f8f3032c3dacdbfc19f2fc29652be86d3c1db5 100644
--- a/src/components/ItemComponents/NewItemForm.vue
+++ b/src/components/ItemComponents/NewItemForm.vue
@@ -3,9 +3,7 @@
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-primary-light mt-4 mb-8"
- >
+ <h3 class="text-xl font-medium text-center text-primary-light mt-4 mb-8">
Opprett ny utleie
</h3>
diff --git a/src/components/UserProfileComponents/RentHistoryComponents/RentHistoryItem.vue b/src/components/UserProfileComponents/RentHistoryComponents/RentHistoryItem.vue
index 33835dd8495e0e401982b33da58b1cf95c8ff229..675524104ec1ebe1b74410ae9114131c666f4023 100644
--- a/src/components/UserProfileComponents/RentHistoryComponents/RentHistoryItem.vue
+++ b/src/components/UserProfileComponents/RentHistoryComponents/RentHistoryItem.vue
@@ -21,7 +21,7 @@
</div>
</div>
<colored-button
- v-if="!isRated"
+ v-if="!isRated"
:text="'Vurder'"
class="px-4 flex-1"
@click="
@@ -97,7 +97,7 @@ export default {
getDateString(milliseconds) {
let today = new Date();
let date = new Date(milliseconds);
- let dateString = date.getDate() + "." + (date.getMonth()+1);
+ let dateString = date.getDate() + "." + (date.getMonth() + 1);
if (date.getFullYear() != today.getFullYear()) {
dateString += "." + date.getFullYear();
@@ -117,7 +117,6 @@ export default {
this.user = await userService.getUserFromId(this.historyItem.renterId);
}
this.isRated = await userService.isRated(this.historyItem.rentId);
-
},
};
</script>
diff --git a/src/components/UserProfileComponents/UserItems.vue b/src/components/UserProfileComponents/UserItems.vue
index 02179d6620d3e0bf8e426ad24385c236b6f7f9d9..29deba9c6990b348a41796de1ba1f3d1d46d6a6e 100644
--- a/src/components/UserProfileComponents/UserItems.vue
+++ b/src/components/UserProfileComponents/UserItems.vue
@@ -1,8 +1,5 @@
<template>
- <div
- id="headline"
- class="text-xl md:text-2xl text-primary-light font-medium"
- >
+ <div id="headline" class="text-xl md:text-2xl text-primary-light font-medium">
Dine gjenstander
</div>
<!-- Search field -->
diff --git a/src/components/UserProfileComponents/UserListItemCard.vue b/src/components/UserProfileComponents/UserListItemCard.vue
index bfb9be5cebddf013c7df9fc757c1eb3761a99eec..1d6bd9f2472695c6427f96026a8b212ab9d130a9 100644
--- a/src/components/UserProfileComponents/UserListItemCard.vue
+++ b/src/components/UserProfileComponents/UserListItemCard.vue
@@ -5,7 +5,7 @@
<!-- User image -->
<div class="h-10 w-10 flex flex-col justify-center items-center mr-4">
<router-link :to="'/profile/' + user.userId">
- <img alt="Profilbilde" src="../../assets/defaultUserProfileImage.jpg" />
+ <img alt="Profilbilde" :src="getProfilePicture" />
</router-link>
</div>
@@ -78,6 +78,9 @@ export default {
return {
rating: -1.0,
communityID: -1,
+ profileImage: {
+ src: require("../../assets/defaultUserProfileImage.jpg"),
+ },
};
},
components: {
@@ -92,13 +95,15 @@ export default {
user: Object,
buttons: Array,
},
- methods: {
+ computed: {
getProfilePicture() {
- if (this.user.picture != "") {
+ if (this.user.picture !== "" && this.user.picture != null) {
return this.user.picture;
}
- return "@/assets/defaultUserProfileImage.jpg";
+ return this.profileImage.src;
},
+ },
+ methods: {
openChatWithUser() {
this.$router.push({
name: "messages",
diff --git a/src/components/UserProfileComponents/UserProfile.vue b/src/components/UserProfileComponents/UserProfile.vue
index 3306a345483e2ea26c94444928c752065e65b239..142f3e612d45c5b27fb4c9172b6513e357cdfb66 100644
--- a/src/components/UserProfileComponents/UserProfile.vue
+++ b/src/components/UserProfileComponents/UserProfile.vue
@@ -40,7 +40,7 @@
</li>
<li>
<router-link
- :to="'/user/' + id + '/communites'"
+ :to="'/profile/communities'"
class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>Mine grupper
</router-link>
@@ -81,14 +81,14 @@
<div class="flex flex-col items-center pb-10 mt-16 z-5">
<img
class="mb-3 w-24 h-24 rounded-full shadow-lg"
- src="../../assets/defaultUserProfileImage.jpg"
+ :src="getProfilePicture"
alt="Profile picture"
/>
<h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">
{{ user.firstName }} {{ user.lastName }}
</h5>
<div>
- <rating-component :rating="renterRating" :ratingType="'Leietaker'"/>
+ <rating-component :rating="renterRating" :ratingType="'Leietaker'" />
<rating-component :rating="ownerRating" :ratingType="'Utleier'" />
</div>
@@ -106,8 +106,8 @@
<script>
import RatingComponent from "@/components/UserProfileComponents/RatingComponents/Rating.vue";
import { parseCurrentUser } from "@/utils/token-utils";
-import { getUser} from "@/utils/apiutil";
-import UserService from "@/services/user.service"
+import { getUser } from "@/utils/apiutil";
+import UserService from "@/services/user.service";
export default {
name: "LargeProfileCard",
@@ -120,11 +120,22 @@ export default {
renterRating: -1,
ownerRating: -1,
dropdown: false,
+ profileImage: {
+ src: require("../../assets/defaultUserProfileImage.jpg"),
+ },
};
},
components: {
RatingComponent,
},
+ computed: {
+ getProfilePicture() {
+ if (this.user.picture !== "" && this.user.picture != null) {
+ return this.user.picture;
+ }
+ return this.profileImage.src;
+ },
+ },
methods: {
async getUser() {
this.currentUser = await parseCurrentUser();
@@ -133,25 +144,20 @@ export default {
if (this.id === this.currentUser.accountId) {
this.isCurrentUser = true;
this.user = this.currentUser;
+ this.user = await UserService.getUserFromId(this.user.accountId);
return;
}
this.user = await getUser(this.id);
let ratingAsOwner = await UserService.getUserRatingAsOwner(this.id);
- let ratingAsRenter = await UserService.getUserRatingAsRenter(this.id)
+ let ratingAsRenter = await UserService.getUserRatingAsRenter(this.id);
if (ratingAsOwner >= 0 && ratingAsOwner <= 5) {
this.ownerRating = ratingAsOwner;
}
- if (ratingAsRenter >= 0 && ratingAsRenter <= 5){
+ if (ratingAsRenter >= 0 && ratingAsRenter <= 5) {
this.renterRating = ratingAsRenter;
}
},
- getProfilePicture() {
- if (this.user.picture !== "") {
- return this.user.picture;
- }
- return "../assets/defaultUserProfileImage.jpg";
- },
logout() {
this.$store.commit("logout");
this.$router.push("/");
diff --git a/src/router/index.js b/src/router/index.js
index 5fbb09f51e59dee764bcc21d650ddcc56930bed3..9aaaf0cb3196f21a9558bdb91bd22ef2a20c5476 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -37,6 +37,12 @@ const routes = [
component: () => import("../views/UserProfileViews/RentHistoryView.vue"),
beforeEnter: guardRoute,
},
+ {
+ path: "/profile/communities",
+ name: "myCommunities",
+ component: () => import("../views/UserProfileViews/MyCommunitiesView.vue"),
+ beforeEnter: guardRoute,
+ },
{
path: "/register",
name: "register",
@@ -94,12 +100,6 @@ const routes = [
import("../components/BaseComponents/NotificationsForm.vue"),
beforeEnter: guardRoute,
},
- {
- path: "/user/:id/communities",
- name: "myCommunities",
- component: () => import("../views/CommunityViews/MyCommunitiesView.vue"),
- beforeEnter: guardRoute,
- },
{
path: "/community/:communityID",
name: "communityHome",
diff --git a/src/services/user.service.js b/src/services/user.service.js
index 5c6ebb84dd73c423d690adda4a336089bd81cd55..b8f10603ecbd21ebfe0eec3b7e7d2227b025ffad 100644
--- a/src/services/user.service.js
+++ b/src/services/user.service.js
@@ -5,27 +5,27 @@ import axios from "axios";
const API_URL = process.env.VUE_APP_BASEURL;
class UserService {
- async getUserFromId(userId) {
- return await axios
- .get(API_URL + "users/" + userId + "/profile", {
- headers: tokenHeader(),
- })
- .then((res) => {
- return res.data;
- })
- .catch((err) => console.error(err));
- }
+ async getUserFromId(userId) {
+ return await axios
+ .get(API_URL + "users/" + userId + "/profile", {
+ headers: tokenHeader(),
+ })
+ .then((res) => {
+ return res.data;
+ })
+ .catch((err) => console.error(err));
+ }
- async getUserRatingAverage(userId) {
- return await axios
- .get(API_URL + "rating/" + userId + "/average", {
- headers: tokenHeader(),
- })
- .then((res) => {
- return res.data;
- })
- .catch((err) => console.error(err));
- }
+ async getUserRatingAverage(userId) {
+ return await axios
+ .get(API_URL + "rating/" + userId + "/average", {
+ headers: tokenHeader(),
+ })
+ .then((res) => {
+ return res.data;
+ })
+ .catch((err) => console.error(err));
+ }
async getRenterHistory() {
return await axios
@@ -67,29 +67,26 @@ class UserService {
});
}
- async getUserRatingAsRenter(userId) {
- return await axios
- .get(API_URL + "rating/" + userId + "/average/renter", {
- headers: tokenHeader(),
- })
- .then((res) => {
- return res.data;
- })
- .catch((err) => console.error(err))
- }
+ async getUserRatingAsRenter(userId) {
+ return await axios
+ .get(API_URL + "rating/" + userId + "/average/renter", {
+ headers: tokenHeader(),
+ })
+ .then((res) => {
+ return res.data;
+ })
+ .catch((err) => console.error(err));
+ }
async getUserRatingAsOwner(userId) {
return await axios
- .get(API_URL + "rating/" + userId + "/average/owner", {
- headers: tokenHeader(),
- })
- .then((res) => {
- return res.data;
- })
- .catch((err) => console.error(err))
+ .get(API_URL + "rating/" + userId + "/average/owner", {
+ headers: tokenHeader(),
+ })
+ .then((res) => {
+ return res.data;
+ })
+ .catch((err) => console.error(err));
}
}
- export
- default
- new
- UserService();
\ No newline at end of file
+export default new UserService();
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index 2f8fabcb74dc13da2e74888291ee8b581c721b16..f33d6db9f3ce03cac2a5b9d6dc149c41b1949912 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -325,3 +325,18 @@ export function postNewRating(ratingInfo) {
return error;
});
}
+
+export function postNewImageCommunity(image) {
+ return axios
+ .post(API_URL + "images", image, {
+ headers: {...tokenHeader(), "Content-Type": "image/png"},
+ })
+ .then((response) => {
+ console.log(response.data);
+ return response.data;
+ })
+ .catch((error) => {
+ console.log(error);
+ return error;
+ });
+}
diff --git a/src/views/CommunityViews/MyCommunitiesView.vue b/src/views/CommunityViews/MyCommunitiesView.vue
deleted file mode 100644
index b2abf6c58e23ed50f27c12a94fbe80c1cbc9aad8..0000000000000000000000000000000000000000
--- a/src/views/CommunityViews/MyCommunitiesView.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
- <div>
- <div id="myGroups">
- <div>Mine grupper:</div>
- <group-list :groupList="myGroups" />
- </div>
- </div>
-</template>
-
-<script>
-import GroupList from "@/components/CommunityComponents/CommunityList.vue";
-import { getMyGroups } from "@/utils/apiutil";
-
-export default {
- data() {
- return {
- myGroups: [],
- };
- },
- components: {
- GroupList,
- },
- methods: {
- async getMyGroups() {
- this.myGroups = await getMyGroups();
- },
- },
- beforeMount() {
- this.getMyGroups();
- },
-};
-</script>
diff --git a/src/views/UserProfileViews/MyCommunitiesView.vue b/src/views/UserProfileViews/MyCommunitiesView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6a5c376b0ac2cde7dcc8ee0dff1cfef2ca5cb6d5
--- /dev/null
+++ b/src/views/UserProfileViews/MyCommunitiesView.vue
@@ -0,0 +1,35 @@
+<template>
+ <!-- My communities, with pagination -->
+ <div class="flex flex-row p-4 relative">
+ <div class="text-xl md:text-2xl text-primary-light font-medium w-full">
+ Mine grupper
+ </div>
+ <UserAddIcon
+ class="cursor-pointer max-h-6 max-w-6 float-right grow text-primary-dark"
+ @click="$router.push('/newCommunity')"
+ alt="Opprett ny gruppe"
+ />
+ </div>
+ <CommunityList :communities="myCommunities" :member="true" />
+</template>
+
+<script>
+import CommunityList from "@/components/CommunityComponents/CommunityList.vue";
+import CommunityService from "@/services/community.service";
+import { UserAddIcon } from "@heroicons/vue/outline";
+
+export default {
+ data() {
+ return {
+ myCommunities: [],
+ };
+ },
+ components: {
+ CommunityList,
+ UserAddIcon,
+ },
+ async beforeCreate() {
+ this.myCommunities = await CommunityService.getUserCommunities();
+ },
+};
+</script>
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/community-list-item.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/community-list-item.spec.js.snap
index 25c734add5c0ca6ad6f94cec526e074008da6782..5135f4b48c7b670b8c5b8173ad0d802a82b5ed0a 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/community-list-item.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/community-list-item.spec.js.snap
@@ -10,26 +10,16 @@ exports[`CommunityListItem component renders correctly 1`] = `
<!--v-if-->
<div
- class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-4"
+ class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-2"
>
<div
- class="h-10 w-10 flex flex-col justify-center items-center mr-4"
+ class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2"
>
- <svg
- aria-hidden="true"
- fill="none"
- stroke="currentColor"
- stroke-width="2"
- viewBox="0 0 24 24"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
- stroke-linecap="round"
- stroke-linejoin="round"
- />
- </svg>
- <!-- TODO: USE COMMUNITY IMAGE <img alt="Felleskapets bilde" src="@/assets/group.png" /> -->
+ <img
+ alt="Fellsekaps bilde"
+ class="rounded-md"
+ src="string"
+ />
</div>
<div
class="flex-1 pl-1 overflow-hidden"
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 1b82d99ed9de0f8bcd2c9cc9ed86ec7b30886061..19e292101b012b95058ea454f90fb0bdb96fe700 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,166 +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 -->
+
<div
- class="text-xl md:text-2xl font-medium text-center text-primary-light 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-xl font-medium text-gray-900 dark:text-gray-400"
- id="imageLabel"
+ <!-- Description -->
+ <div
+ class="mt-6"
>
- Bilde
- </label>
- <input
- accept="image/png, image/jpeg"
- 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"
>
+ <label
+ class="block mb-2 text-xl font-medium text-gray-900 dark:text-gray-400"
+ id="imageLabel"
+ >
+ Bilde
+ </label>
+ <input
+ accept="image/png, image/jpeg"
+ multiple=""
+ style="display: none;"
+ type="file"
+ />
+ <!-- Button for adding an image -->
<div
- class="text-error uppercase text-center"
+ class="inline-flex rounded-md shadow-sm"
>
- midlertidig fjernet
- </div>
- <!-- <button
- @click="$refs.file.click()"
+ <!--<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"
- :disabled="imageAdded"
- >
- Velg bilde
- </button> -->
- <!-- Button for removing an image -->
+ >
+ Velg bilde
+ </button>
+ <!-- Button for removing an image -->
+ </div>
+ <!-- Div box for showing all chosen images -->
+
+
+ </div>
+ <!-- Save item button -->
+ <div
+ class="flex justify-center mt-10 float-right"
+ >
+ <button-stub
+ 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
- id="saveButton"
- text="Lagre"
- />
</div>
+ <!--<img :src="group.image" class="w-1/2 inline" alt="Bilde av gjenstanden" />-->
+
</div>
`;