diff --git a/src/components/BaseComponents/NavBar.vue b/src/components/BaseComponents/NavBar.vue index 58020e292abccaa07ac2e7cfa6d66f30961e42fc..3281cf2e521896053954387941ba03dc04c88281 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 688d4c3a07cf0d64ec8a435009f95c88b89165c3..58d579f0cefbe1aba7c2460d7e6ee59051e6d41b 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 d9bf923296a42c70521274ba6dcc5e275b75bb22..8edbda1072907b4fa6b5c976f95e7a550ce6b0f4 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 a3c4dd2f9e049ec7b1fe18c68427659223bbd9d7..58f1d672bc5daad7ba43ab4e11b85a065203be38 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 667da928ac0430fea928a78723f73af715622209..d13c08349360250ff4f0cf96b5f3faab00d7a841 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 a3232e339f78a7ce82eee0a3199b966d9bc90178..a4c2d80e1533e2c7be82804041bd49208b4ab6be 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 089dc01a8043d3409d6806537e853cf95017cc28..d18caa1cefffbfbe96a4d6fe4a26d48bfe107069 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 ea6abb83500cae80226ad71f2816b129cce4fb85..0d26eb64cd7af607ba61930339cf2a3bfddd5a93 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 b42847588e9d77e47fa6dc07b04f966156cf904c..88f3b7ba0b555dca2626fd30c674826a898da141 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 b769794ff447f67512932e08871a1594b8948964..53c92481e3318bfe86ccc699f80c6ed24ffbceb7 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 7ee44e43946ce93d577ae888efc9923d71f7aacc..9235ab472cdd07769260c182f5acc0fddd9632a8 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 a1546326dd2d8cd4fef16cb1118828cb508d1fb9..fb6c8fc477b6003afa4e0e56a0d5fb90e54b0a05 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 f78ccde49e36551c8f47530ef8ed51bd944ce1a1..e8274f2d13b0f049b6ce56e0f005431e9ee1efe4 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 fa8ba75077b76aa1a1af647d9b54ea9bf599a7ac..fc9db3697ba1fe00f740bb7457f233be22e6cee5 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 e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000