diff --git a/src/components/BaseComponents/PaginationTemplate.vue b/src/components/BaseComponents/PaginationTemplate.vue
index 206f880770cabc4931733dd2725bc39efeb4c306..b6907f178de39c1dace54149174e972e8e764b4b 100644
--- a/src/components/BaseComponents/PaginationTemplate.vue
+++ b/src/components/BaseComponents/PaginationTemplate.vue
@@ -2,7 +2,7 @@
<div v-if="totalPages() > 0">
<span
v-if="showPreviousLink()"
- class="cursor-pointer inline-flex items-center p-2 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700"
+ class="cursor-pointer inline-flex items-center p-2 text-sm font-medium text-primary-light bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700"
@click="updatePage(currentPage - 1)"
>
Forrige
@@ -10,7 +10,7 @@
<label class="mx-2">{{ currentPage + 1 }} av {{ totalPages() }}</label>
<span
v-if="showNextLink()"
- class="cursor-pointer inline-flex items-center p-2 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700"
+ class="cursor-pointer inline-flex items-center p-2 text-sm font-medium text-primary-light bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700"
@click="updatePage(currentPage + 1)"
>
Neste
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 fa6652b28bec742c631b401028466820a9108106..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-gray-600 dark:text-gray-200 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/LoginForm.vue b/src/components/FormComponents/LoginForm.vue
index c1b38f5d704d78d933a3c07173ff36dae2debd05..362dec931a8512d52aeea7ec1ba5a20bd1a9d9ea 100644
--- a/src/components/FormComponents/LoginForm.vue
+++ b/src/components/FormComponents/LoginForm.vue
@@ -4,7 +4,7 @@
>
<div class="px-6 py-4 mt-4">
<div
- class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+ class="text-xl md:text-2xl font-medium text-center text-primary-light mt-4 mb-8"
>
Logg på
</div>
diff --git a/src/components/FormComponents/RegisterForm.vue b/src/components/FormComponents/RegisterForm.vue
index 994ec8567489beb3e1ac135cb192bd5260918f44..12c4a1227379f44305217b4c594c31e2ed703952 100644
--- a/src/components/FormComponents/RegisterForm.vue
+++ b/src/components/FormComponents/RegisterForm.vue
@@ -3,7 +3,7 @@
class="w-full max-w-md mx-auto mb-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl p-4"
>
<div
- class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+ class="text-xl md:text-2xl font-medium text-center text-primary-light mt-4 mb-8"
id="registerLabel"
>
Opprett ny konto
diff --git a/src/components/FormComponents/ResetPasswordForm.vue b/src/components/FormComponents/ResetPasswordForm.vue
index 36fd9aae1f69396b55e2220439b0bb1c2d174eaf..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-gray-600 dark:text-gray-200 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 ad87fd4358184719764cfcd3fc7a1b2f9e39222b..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-gray-600 dark:text-gray-200 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/UserItems.vue b/src/components/UserProfileComponents/UserItems.vue
index 6fe9142ec6daf8e69df2bb452bcefd64f15e1035..fd9b26cebd50cbf2ac8fbd1995e632cbabc07911 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-gray-600 font-medium w-full"
- >
+ <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 c16d35413982c07f759bb06b216085858c42078a..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,7 +81,7 @@
<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">
@@ -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,6 +144,7 @@ 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);
@@ -146,12 +158,6 @@ export default {
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..b0a701a8e3e72570a55bb60873802b88f200adfd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,5 +1,6 @@
import store from "@/store";
import { createRouter, createWebHistory } from "vue-router";
+import NotFound from "@/views/NotFound.vue";
/**
* Guards routes. If token is null, no user is logged in and only the
@@ -37,6 +38,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 +101,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",
@@ -133,6 +134,8 @@ const routes = [
name: "UserItems",
component: () => import("../views/UserProfileViews/UserItemsView.vue"),
},
+ // Make sure it's your last route definition
+ { path: "/:pathMatch(.*)*", name: "not-found", component: NotFound },
];
const router = createRouter({
@@ -140,4 +143,9 @@ const router = createRouter({
routes,
});
+router.resolve({
+ name: "not-found",
+ params: { pathMatch: ["not", "found"] },
+}).href;
+
export default router;
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/CommunityView.vue b/src/views/CommunityViews/CommunityView.vue
index bd7b2ea53207acf14628dc4aff86c896d12c275b..52e711014b45736bf30d0a21122e03eb24262b55 100644
--- a/src/views/CommunityViews/CommunityView.vue
+++ b/src/views/CommunityViews/CommunityView.vue
@@ -2,7 +2,7 @@
<!-- My communities, with pagination -->
<div v-if="loggedIn">
<div class="flex flex-row p-4 relative">
- <div class="text-xl md:text-2xl text-gray-600 font-medium w-full">
+ <div class="text-xl md:text-2xl text-primary-light font-medium w-full">
Mine grupper
</div>
<UserAddIcon
@@ -20,13 +20,13 @@
v-on:page:update="updatePageMyCommunities"
v-bind:currentPage="currentPageMyCommunities"
v-bind:pageSize="pageSizeMyCommunities"
- class="mt-10 mb-5"
+ class="mt-4"
/>
</div>
</div>
<!-- Public communities, with search and pagination -->
- <p class="text-xl md:text-2xl text-gray-600 font-medium w-full p-4">
+ <p class="text-xl md:text-2xl text-primary-light font-medium w-full p-4">
Offentlige grupper
</p>
<!-- Search field -->
@@ -61,7 +61,7 @@
v-on:page:update="updatePagePublicCommunities"
v-bind:currentPage="currentPagePublicCommunities"
v-bind:pageSize="pageSizePublicCommunities"
- class="mt-10 mb-5"
+ class="my-4"
/>
</div>
</template>
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/HelpView.vue b/src/views/HelpView.vue
index 7870d1e63ba55975d46634b639797c751b1a3d75..56f7e0e267f102c5493e80579c7c9c11cf9aed45 100644
--- a/src/views/HelpView.vue
+++ b/src/views/HelpView.vue
@@ -106,11 +106,23 @@ export default {
toggle: false,
},
{
- question: "Hvordan kan jeg bli med i en gruppe?",
+ question: "Hvordan kan jeg opprette en ny gruppe?",
answer:
"Fra hovedsiden kan man trykke på pluss-person-ikonet ved siden av mine grupper som vil ta deg til skjemaet for å lage en ny gruppe.",
toggle: false,
},
+ {
+ question: "Hvordan kan jeg bli med i en gruppe?",
+ answer:
+ "På hovedsiden vil alle offentlige og lukkede grupper vises. Når du trykker på ønsket gruppe vil du få muligheten til å bli med/sende medlemsforespørsel.",
+ toggle: false,
+ },
+ {
+ question: "Hva vil jeg ha tilgang til ved å logge inn/opprette en bruker?",
+ answer:
+ "Uten å være logget inn vil du kunne se alle grupper, og også se gjenstander som ligger ute til lån i offentlige grupper. For å kunne låne en gjenstand må du være med i gruppen gjenstanden ligger i, og for dette må du være innlogget. Du må også være innlogget for å sende medlemsforespørsel i lukkede grupper.",
+ toggle: false,
+ },
],
};
},
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1051e31dded6de02a0c51f96a3994c47f7033598
--- /dev/null
+++ b/src/views/NotFound.vue
@@ -0,0 +1,18 @@
+<template>
+ <div class="flex place-content-center h-full p-8">
+ <div class="bg-gray-300 p-8 rounded-2xl drop-shadow-xl">
+ <h1 class="text-primary-medium text-4xl">Oisann!</h1>
+ <p>Her skjedde det visst en feil...</p>
+ <p>
+ Lyst å gå tilbake til
+ <router-link to="/" class="underline">start?</router-link>
+ </p>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>
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 dd345a3b786424cdd10ecd5b90797cd164a9a1a9..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-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-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>
`;
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
index a475c4e78dfe175dbf46da2eb2492f7c59588869..c2789c34942918bfb9b251c3bbd6d7c71fbc0eee 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
@@ -6,7 +6,7 @@ exports[`NewItemForm component renders correctly 1`] = `
>
<!-- Component heading -->
<h3
- class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+ class="text-xl font-medium text-center text-primary-light mt-4 mb-8"
>
Opprett ny utleie
</h3>
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
index bdec3ea33b7b23b7b0566dac81e8d132b9c0befa..f79182e421a30cc8a35db92683cee3b064bbfb02 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
@@ -8,7 +8,7 @@ exports[`LoginForm component renders correctly 1`] = `
class="px-6 py-4 mt-4"
>
<div
- class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+ class="text-xl md:text-2xl font-medium text-center text-primary-light mt-4 mb-8"
>
Logg på
</div>
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap
index 98a0bdc228f2d0dfc90a11afe853ee43bf44aa9c..8adae3ffa2833611c6e3da43443b7e2a381b4e3f 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap
@@ -5,7 +5,7 @@ exports[`RegisterFormComponent renders correctly 1`] = `
class="w-full max-w-md mx-auto mb-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl p-4"
>
<div
- class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+ class="text-xl md:text-2xl font-medium text-center text-primary-light mt-4 mb-8"
id="registerLabel"
>
Opprett ny konto
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap
index 49cbc5a2e696228709e56dc12f1925b640d0e377..7b7c1ace2fabdd62b5a782799ce6d1f71ba8bfb1 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap
@@ -5,7 +5,7 @@ exports[`ResetPasswordForm component renders correctly 1`] = `
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"
+ class="text-xl font-medium text-center text-primary-light mt-4 mb-8"
>
Glemt passordet ditt?
</h3>