From b2d672f737c091606c38e81d3ba3e42b5de37d00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5kon=20R=C3=B8skaft?= <haakoero@stud.ntnu.no>
Date: Tue, 3 May 2022 08:27:44 +0200
Subject: [PATCH] Cleand up the image display a bit
---
src/components/BaseComponents/NavBar.vue | 4 +-
.../CommunityComponents/CommunityHome.vue | 17 +++++-
.../CommunityComponents/NewCommunityForm.vue | 11 ++--
src/components/FormComponents/LoginForm.vue | 4 +-
.../FormComponents/NewPasswordForm.vue | 26 +++++---
.../FormComponents/ResetPasswordForm.vue | 22 ++++---
src/components/ItemComponents/ItemCard.vue | 3 +-
src/components/ItemComponents/NewItemForm.vue | 10 +++-
src/components/RentingComponents/ItemInfo.vue | 17 +++---
.../DatepickerRange/DatepickerRange.vue | 4 +-
.../LargeProfileCard.vue | 5 +-
src/utils/apiutil.js | 59 +++++++++----------
src/views/CommunityViews/NewCommunityView.vue | 1 -
src/views/ItemViews/NewItemView.vue | 3 +-
src/views/RentingViews/.gitkeep | 0
15 files changed, 111 insertions(+), 75 deletions(-)
delete mode 100644 src/views/RentingViews/.gitkeep
diff --git a/src/components/BaseComponents/NavBar.vue b/src/components/BaseComponents/NavBar.vue
index 58020e2..3281cf2 100644
--- a/src/components/BaseComponents/NavBar.vue
+++ b/src/components/BaseComponents/NavBar.vue
@@ -38,12 +38,12 @@
<script>
import { parseUserFromToken } from "@/utils/token-utils";
-import {PlusIcon, ChatAlt2Icon, UserCircleIcon} from "@heroicons/vue/outline";
+import { PlusIcon, ChatAlt2Icon, UserCircleIcon } from "@heroicons/vue/outline";
export default {
name: "NavBar.vue",
- components:{
+ components: {
PlusIcon,
ChatAlt2Icon,
UserCircleIcon,
diff --git a/src/components/CommunityComponents/CommunityHome.vue b/src/components/CommunityComponents/CommunityHome.vue
index 688d4c3..58d579f 100644
--- a/src/components/CommunityComponents/CommunityHome.vue
+++ b/src/components/CommunityComponents/CommunityHome.vue
@@ -48,7 +48,11 @@
<script>
import ItemCard from "@/components/ItemComponents/ItemCard";
import CommunityHeader from "@/components/BaseComponents/CommunityHeader";
-import { GetCommunity, GetListingsInCommunity } from "@/utils/apiutil";
+import {
+ GetCommunity,
+ GetListingsInCommunity,
+ getItemPictures,
+} from "@/utils/apiutil";
export default {
name: "SearchItemListComponent",
@@ -101,10 +105,21 @@ export default {
this.communityID = await this.$router.currentRoute.value.params
.communityID;
this.items = await GetListingsInCommunity(this.communityID);
+ for (var i = 0; i < this.items.length; i++) {
+ let images = await getItemPictures(this.items[i].listingID);
+ console.log(images);
+ if(images.length > 0) {
+ this.items[i].img = images[0].picture;
+ }
+ }
},
goToItemInfoPage(item) {
this.$router.push("/itempage/" + item);
},
+ getItemPictures: async function (itemid) {
+ let res = await getItemPictures(itemid);
+ return res;
+ },
},
beforeMount() {
this.getCommunityFromAPI(); //To get the id of the community before mounting the view
diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index d9bf923..8edbda1 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -1,5 +1,7 @@
<template>
- <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4">
+ <div
+ class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
+ >
<!-- Component heading -->
<h3
class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
@@ -170,12 +172,7 @@
<!-- Save item button -->
<div class="flex justify-center mt-10 float-right">
- <Button
- @click="saveClicked"
- id="saveButton"
- :text="'Lagre'"
- >
- </Button>
+ <Button @click="saveClicked" id="saveButton" :text="'Lagre'"> </Button>
</div>
</div>
</template>
diff --git a/src/components/FormComponents/LoginForm.vue b/src/components/FormComponents/LoginForm.vue
index a3c4dd2..58f1d67 100644
--- a/src/components/FormComponents/LoginForm.vue
+++ b/src/components/FormComponents/LoginForm.vue
@@ -1,5 +1,7 @@
<template>
- <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full">
+ <div
+ class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full"
+ >
<div class="px-6 py-4 mt-4">
<h3
class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
diff --git a/src/components/FormComponents/NewPasswordForm.vue b/src/components/FormComponents/NewPasswordForm.vue
index 667da92..d13c083 100644
--- a/src/components/FormComponents/NewPasswordForm.vue
+++ b/src/components/FormComponents/NewPasswordForm.vue
@@ -1,9 +1,12 @@
<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"
>
-
- <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Endre passord</h3>
+ <h3
+ class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+ >
+ Endre passord
+ </h3>
<div
id="firstPasswordField"
@@ -63,7 +66,7 @@
<div id="buttonsField" class="mt-6">
<Button
- class="float-right"
+ class="float-right"
@click="setNewPassword"
:text="'Sett ny passord'"
/>
@@ -81,8 +84,9 @@ import Button from "@/components/BaseComponents/ColoredButton";
export default {
name: "NewPasswordForm.vue",
- components:{
- Button,},
+ components: {
+ Button,
+ },
setup() {
return { v$: useVuelidate() };
},
@@ -91,10 +95,16 @@ export default {
user: {
password: {
required: helpers.withMessage(`Feltet må være utfylt`, required),
- minLength: helpers.withMessage('Passordet må være minst 8 karakterer lang', minLength(8)),
+ minLength: helpers.withMessage(
+ "Passordet må være minst 8 karakterer lang",
+ minLength(8)
+ ),
},
rePassword: {
- sameAs: helpers.withMessage('Passordene må være like', sameAs(this.user.password)),
+ sameAs: helpers.withMessage(
+ "Passordene må være like",
+ sameAs(this.user.password)
+ ),
required: helpers.withMessage(`Feltet må være utfylt`, required),
},
},
diff --git a/src/components/FormComponents/ResetPasswordForm.vue b/src/components/FormComponents/ResetPasswordForm.vue
index a3232e3..a4c2d80 100644
--- a/src/components/FormComponents/ResetPasswordForm.vue
+++ b/src/components/FormComponents/ResetPasswordForm.vue
@@ -1,7 +1,12 @@
<template>
- <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4">
-
- <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Glemt passordet ditt?</h3>
+ <div
+ class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
+ >
+ <h3
+ class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+ >
+ Glemt passordet ditt?
+ </h3>
<div
id="emailField"
@@ -35,12 +40,11 @@
</div>
</div>
<Button
- class="float-right"
- @click="sendHome"
- :text="'Tilbakestill passord'"
+ class="float-right"
+ @click="sendHome"
+ :text="'Tilbakestill passord'"
/>
</div>
-
</div>
</template>
@@ -52,7 +56,7 @@ import Button from "@/components/BaseComponents/ColoredButton";
export default {
name: "ResetPassword.vue",
- components:{
+ components: {
Button,
},
data() {
@@ -67,7 +71,7 @@ export default {
validations() {
return {
email: {
- required: helpers.withMessage('Feltet må være utfylt', required),
+ required: helpers.withMessage("Feltet må være utfylt", required),
email: helpers.withMessage(`E-posten er ugyldig`, email),
},
};
diff --git a/src/components/ItemComponents/ItemCard.vue b/src/components/ItemComponents/ItemCard.vue
index 089dc01..d18caa1 100644
--- a/src/components/ItemComponents/ItemCard.vue
+++ b/src/components/ItemComponents/ItemCard.vue
@@ -1,6 +1,6 @@
<template>
<div class="mt-5">
- <div class="w-4/5 rounded bg-gray-200">
+ <div class="w-4/5 rounded bg-gray-200 h-full overflow-hidden display:inline-block correct-size">
<img
class="w-full"
:src="item.img || require('../../assets/default-product.png')"
@@ -31,3 +31,4 @@ export default {
},
};
</script>
+
diff --git a/src/components/ItemComponents/NewItemForm.vue b/src/components/ItemComponents/NewItemForm.vue
index ea6abb8..0d26eb6 100644
--- a/src/components/ItemComponents/NewItemForm.vue
+++ b/src/components/ItemComponents/NewItemForm.vue
@@ -1,7 +1,13 @@
<template>
- <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4">
+ <div
+ class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
+ >
<!-- Component heading -->
- <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Opprett ny utleie</h3>
+ <h3
+ class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+ >
+ Opprett ny utleie
+ </h3>
<!-- Title -->
<div class="mb-6" :class="{ error: v$.item.title.$errors.length }">
diff --git a/src/components/RentingComponents/ItemInfo.vue b/src/components/RentingComponents/ItemInfo.vue
index b428475..88f3b7b 100644
--- a/src/components/RentingComponents/ItemInfo.vue
+++ b/src/components/RentingComponents/ItemInfo.vue
@@ -3,7 +3,7 @@
<div>
<div
v-bind:class="{
- 'grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full place-items-center':
+ 'grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 h-[600px] w-auto lg:grid-cols-5 place-items-center':
noPicture,
}"
>
@@ -55,7 +55,10 @@
<div>
<p class="text-sm text-gray-900">
- <DatepickerRange @value="setDate" :messageOnDisplay="dateMessage"></DatepickerRange>
+ <DatepickerRange
+ @value="setDate"
+ :messageOnDisplay="dateMessage"
+ ></DatepickerRange>
</p>
</div>
</div>
@@ -80,9 +83,7 @@
</template>
<script>
-import { getItem } from "@/utils/apiutil";
-import { getItemPictures } from "@/utils/apiutil";
-import { getUser } from "@/utils/apiutil";
+import { getItem, getItemPictures, getUser } from "@/utils/apiutil";
import ImageCarousel from "@/components/RentingComponents/ImageCarousel.vue";
import UserListItemCard from "@/components/UserProfileComponents/UserListItemCard.vue";
import DatepickerRange from "@/components/TimepickerComponents/DatepickerRange/DatepickerRange.vue";
@@ -155,7 +156,7 @@ export default {
this.userForId = await getUser(userId);
},
setDate(dateOfsomthing) {
- if(dateOfsomthing.startDate == null || dateOfsomthing.endDate == null) {
+ if (dateOfsomthing.startDate == null || dateOfsomthing.endDate == null) {
this.totPrice = this.item.pricePerDay;
this.allowForRent = false;
} else {
@@ -171,7 +172,7 @@ export default {
this.totPrice = this.item.pricePerDay * amountOfDays;
},
sendToConfirm() {
- if(this.allowForRent) {
+ if (this.allowForRent) {
//TODO change this to a componet change
alert("Hei");
}
@@ -191,6 +192,6 @@ export default {
}
.colorChange:hover {
- background-color: #306EC1;
+ background-color: #306ec1;
}
</style>
diff --git a/src/components/TimepickerComponents/DatepickerRange/DatepickerRange.vue b/src/components/TimepickerComponents/DatepickerRange/DatepickerRange.vue
index b769794..53c9248 100644
--- a/src/components/TimepickerComponents/DatepickerRange/DatepickerRange.vue
+++ b/src/components/TimepickerComponents/DatepickerRange/DatepickerRange.vue
@@ -279,10 +279,10 @@ export default {
@apply font-bold py-2 px-4 rounded;
}
.btn-blue {
- @apply bg-blue-500 text-white;
+ @apply bg-primary-light text-white;
}
.btn-blue:hover {
- @apply bg-blue-700;
+ @apply bg-primary-medium;
}
.btn-gray:hover {
@apply bg-gray-300;
diff --git a/src/components/UserProfileComponents/LargeProfileCard.vue b/src/components/UserProfileComponents/LargeProfileCard.vue
index 7ee44e4..9235ab4 100644
--- a/src/components/UserProfileComponents/LargeProfileCard.vue
+++ b/src/components/UserProfileComponents/LargeProfileCard.vue
@@ -27,7 +27,10 @@
v-show="dropdown"
class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
>
- <ul class="py-1 absolute bg-white ring-1 ring-gray-300 rounded-xl" aria-labelledby="dropdownDefault">
+ <ul
+ class="py-1 absolute bg-white ring-1 ring-gray-300 rounded-xl"
+ aria-labelledby="dropdownDefault"
+ >
<li>
<router-link
to=""
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index a154632..fb6c8fc 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -215,38 +215,37 @@ export async function GetMembersOfCommunity(communityID) {
}
export function JoinOpenCommunity(communityId) {
+ if (tokenHeader().Authorization == "Bearer " + null) {
+ console.log("ikke logget på!");
+ return "Login to join any community";
+ }
- if(tokenHeader().Authorization == "Bearer " + null){
- console.log("ikke logget på!");
- return "Login to join any community";
- }
-
- return axios
- .post(API_URL + "communities/" + communityId + "/join", communityId, {
- headers: tokenHeader(),
- })
- .then((response) => {
- return response;
- })
- .catch((error) => {
- console.log(error.response);
- return error;
- });
+ return axios
+ .post(API_URL + "communities/" + communityId + "/join", communityId, {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ return response;
+ })
+ .catch((error) => {
+ console.log(error.response);
+ return error;
+ });
}
export async function GetIfUserAlreadyInCommunity(communityID) {
- if(tokenHeader().Authorization == "Bearer " + null){
- return false;
- }
-
- return axios
- .get(API_URL + "communities/" + communityID + "/user/status", {
- headers: tokenHeader(),
- })
- .then((response) => {
- return response.data;
- })
- .catch((error) => {
- return error;
- });
+ if (tokenHeader().Authorization == "Bearer " + null) {
+ return false;
+ }
+
+ return axios
+ .get(API_URL + "communities/" + communityID + "/user/status", {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ return response.data;
+ })
+ .catch((error) => {
+ return error;
+ });
}
diff --git a/src/views/CommunityViews/NewCommunityView.vue b/src/views/CommunityViews/NewCommunityView.vue
index f78ccde..e8274f2 100644
--- a/src/views/CommunityViews/NewCommunityView.vue
+++ b/src/views/CommunityViews/NewCommunityView.vue
@@ -2,7 +2,6 @@
<div class="h-screen grid md:mt-8">
<NewCommunity />
</div>
-
</template>
<script>
diff --git a/src/views/ItemViews/NewItemView.vue b/src/views/ItemViews/NewItemView.vue
index fa8ba75..fc9db36 100644
--- a/src/views/ItemViews/NewItemView.vue
+++ b/src/views/ItemViews/NewItemView.vue
@@ -1,8 +1,7 @@
<template>
<div class="h-screen grid md:mt-8">
- <AddNewItem/>
+ <AddNewItem />
</div>
-
</template>
<script>
diff --git a/src/views/RentingViews/.gitkeep b/src/views/RentingViews/.gitkeep
deleted file mode 100644
index e69de29..0000000
--
GitLab