diff --git a/src/components/BaseComponents/FooterBar.vue b/src/components/BaseComponents/FooterBar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..478a86447ca15a4a5be2cbb140e6a797ed142188
--- /dev/null
+++ b/src/components/BaseComponents/FooterBar.vue
@@ -0,0 +1,25 @@
+<template>
+ <footer
+ class="w-full bg-white dark:bg-gray-800 sm:flex-row border-1 border-t border-gray-600 h-10"
+ >
+ <p class="float-left text-xs my-3 ml-4 text-primary-dark">
+ © BoCo 2022 - All rights reserved
+ </p>
+ <QuestionMarkCircleIcon
+ class="md:mt-0 mt-1 mr-4 float-right cursor-pointer h-8 md:h-10 text-primary-medium"
+ alt="Hjelp"
+ @click="$router.push('/help')"
+ />
+ </footer>
+</template>
+
+<script>
+import { QuestionMarkCircleIcon } from "@heroicons/vue/outline";
+export default {
+ name: "FooterBar",
+
+ components: {
+ QuestionMarkCircleIcon,
+ },
+};
+</script>
diff --git a/src/components/BaseComponents/LoaderSpinner.vue b/src/components/BaseComponents/LoaderSpinner.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2b88fb6994d8958d84070ecfad870f27d3326392
--- /dev/null
+++ b/src/components/BaseComponents/LoaderSpinner.vue
@@ -0,0 +1,116 @@
+<template>
+ <div class="loadingio-spinner-bean-eater-o5tefvffeqm">
+ <div class="ldio-sweozsnwol">
+ <div>
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
+ <div>
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<style scoped type="text/css">
+@keyframes ldio-sweozsnwol-1 {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 50% {
+ transform: rotate(-45deg);
+ }
+ 100% {
+ transform: rotate(0deg);
+ }
+}
+@keyframes ldio-sweozsnwol-2 {
+ 0% {
+ transform: rotate(180deg);
+ }
+ 50% {
+ transform: rotate(225deg);
+ }
+ 100% {
+ transform: rotate(180deg);
+ }
+}
+.ldio-sweozsnwol > div:nth-child(2) {
+ transform: translate(-15px, 0);
+}
+.ldio-sweozsnwol > div:nth-child(2) div {
+ position: absolute;
+ top: 40px;
+ left: 40px;
+ width: 120px;
+ height: 60px;
+ border-radius: 120px 120px 0 0;
+ background: #f8b26a;
+ animation: ldio-sweozsnwol-1 1s linear infinite;
+ transform-origin: 60px 60px;
+}
+.ldio-sweozsnwol > div:nth-child(2) div:nth-child(2) {
+ animation: ldio-sweozsnwol-2 1s linear infinite;
+}
+.ldio-sweozsnwol > div:nth-child(2) div:nth-child(3) {
+ transform: rotate(-90deg);
+ animation: none;
+}
+@keyframes ldio-sweozsnwol-3 {
+ 0% {
+ transform: translate(190px, 0);
+ opacity: 0;
+ }
+ 20% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translate(70px, 0);
+ opacity: 1;
+ }
+}
+.ldio-sweozsnwol > div:nth-child(1) {
+ display: block;
+}
+.ldio-sweozsnwol > div:nth-child(1) div {
+ position: absolute;
+ top: 92px;
+ left: -8px;
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ background: #004aad;
+ animation: ldio-sweozsnwol-3 1s linear infinite;
+}
+.ldio-sweozsnwol > div:nth-child(1) div:nth-child(1) {
+ animation-delay: -0.67s;
+}
+.ldio-sweozsnwol > div:nth-child(1) div:nth-child(2) {
+ animation-delay: -0.33s;
+}
+.ldio-sweozsnwol > div:nth-child(1) div:nth-child(3) {
+ animation-delay: 0s;
+}
+.loadingio-spinner-bean-eater-o5tefvffeqm {
+ width: 200px;
+ height: 200px;
+ display: inline-block;
+ overflow: hidden;
+ background: none;
+}
+.ldio-sweozsnwol {
+ width: 50%;
+ height: 50%;
+ position: relative;
+ transform: translateZ(0) scale(1);
+ backface-visibility: hidden;
+ transform-origin: 0 0; /* see note above */
+}
+.ldio-sweozsnwol div {
+ box-sizing: content-box;
+}
+/* generated by https://loading.io/ */
+</style>
diff --git a/src/components/BaseComponents/NavBar.vue b/src/components/BaseComponents/NavBar.vue
index e5cf16d376f645074cd5bf856fab0615e554e18e..3b6937f7b737afc98c8f871b46104ee44aebd6e0 100644
--- a/src/components/BaseComponents/NavBar.vue
+++ b/src/components/BaseComponents/NavBar.vue
@@ -1,22 +1,22 @@
<template>
<nav
- class="flex items-center bg-white justify-between h-14 border-1 border-b border-gray-300 border-solid sticky top-0 z-50"
+ class="flex items-center bg-white justify-between h-10 md:h-14 border-1 border-b border-gray-300 border-solid sticky top-0 z-50"
>
<div class="logo">
<img
- class="m-1 ml-4 cursor-pointer h-12"
+ class="m-1 ml-4 cursor-pointer h-9 md:h-12"
src="../../assets/logo3.svg"
alt="BoCo logo"
@click="$router.push('/')"
/>
</div>
- <ul class="flex">
- <li>
+ <ul class="flex justify-between">
+ <li class="cursor-pointer" @click="$router.push('/newItem')">
<PlusIcon
- class="m-6 cursor-pointer h-7 text-primary-medium"
+ class="m-6 md:mr-2 h-7 text-primary-medium float-left"
alt="Legg til"
- @click="$router.push('/newItem')"
/>
+ <a class="hidden md:block mt-7 text-sm float-right">Legg til</a>
</li>
<li>
<div class="notification-container">
@@ -28,12 +28,12 @@
<p @click="loadMessages()" class="notification" v-if="newMessages > 0">{{notifications}}</p>
</div>
</li>
- <li>
+ <li class="cursor-pointer" @click="loadProfile">
<UserCircleIcon
- class="m-6 cursor-pointer h-7 text-primary-medium"
+ class="m-6 md:mr-2 h-7 text-primary-medium float-left"
alt="Profil"
- @click="loadProfile"
/>
+ <a class="hidden md:block mr-4 mt-7 text-sm float-right">Profil</a>
</li>
</ul>
</nav>
diff --git a/src/components/BaseComponents/TripleDotButton.vue b/src/components/BaseComponents/TripleDotButton.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5205015a39798c6af46dae4b99af4f6fbb826172
--- /dev/null
+++ b/src/components/BaseComponents/TripleDotButton.vue
@@ -0,0 +1,24 @@
+<template>
+ <button
+ id="dropdownDefault"
+ data-dropdown-toggle="dropdown"
+ class="w-10 h-10 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg float-right text-sm p-1.5"
+ type="button"
+ >
+ <svg
+ class="w-6 h-6"
+ fill="currentColor"
+ viewBox="0 0 20 20"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
+ ></path>
+ </svg>
+ </button>
+</template>
+<script>
+export default {
+ name: "TripleDotButton",
+};
+</script>
diff --git a/src/components/CommunityComponents/CommunityHamburger.vue b/src/components/CommunityComponents/CommunityHamburger.vue
index 391a9ab232be3ec69eefd513b060f274e7dcd1b4..7754ce6eb97658c51124f5bd2b476e6b14a32c0e 100644
--- a/src/components/CommunityComponents/CommunityHamburger.vue
+++ b/src/components/CommunityComponents/CommunityHamburger.vue
@@ -27,7 +27,7 @@
</li>
<li id="leaveGroup">
<div
- class="cursor-pointer block py-2 px-4 text-sm text-error hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+ class="cursor-pointer block py-2 px-4 text-sm text-error-medium hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
@click="leaveCommunity"
>
Forlat Gruppe
diff --git a/src/components/CommunityComponents/CommunityHeader.vue b/src/components/CommunityComponents/CommunityHeader.vue
index 4df062434b011c1515a9be2f159dc8ab200db754..eba31718a765b9adfc08bd6b449dbff4c3de28a1 100644
--- a/src/components/CommunityComponents/CommunityHeader.vue
+++ b/src/components/CommunityComponents/CommunityHeader.vue
@@ -1,6 +1,7 @@
<template>
- <!-- TODO PUT A LOADER HERE -->
- <div v-if="loading">LASTER...</div>
+ <div v-if="loading" class="flex place-content-center mx-4">
+ <LoaderSpinner />
+ </div>
<div v-else class="flex items-center justify-between mx-4">
<router-link
:to="'/community/' + community.communityId"
@@ -83,6 +84,7 @@
<script>
import CommunityHamburger from "@/components/CommunityComponents/CommunityHamburger";
import ColoredButton from "@/components/BaseComponents/ColoredButton";
+import LoaderSpinner from "@/components/BaseComponents/LoaderSpinner";
import CommunityService from "@/services/community.service";
import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal";
import { parseCurrentUser } from "@/utils/token-utils";
@@ -97,6 +99,7 @@ export default {
CommunityHamburger,
ColoredButton,
CustomFooterModal,
+ LoaderSpinner,
},
computed: {
userid() {
@@ -142,9 +145,6 @@ export default {
}
},
},
- // beforeMount() {
- // this.getIfUserInCommunity();
- // },
async created() {
await this.load();
this.loading = false;
diff --git a/src/components/CommunityComponents/CommunityHome.vue b/src/components/CommunityComponents/CommunityHome.vue
index 53fb6047e7def08264fdf5e66d51bed172a93dee..5ba88fc1c7d94bcb9c69fbe4f17c322cc50a13e9 100644
--- a/src/components/CommunityComponents/CommunityHome.vue
+++ b/src/components/CommunityComponents/CommunityHome.vue
@@ -1,79 +1,89 @@
<template>
- <section class="w-full px-5 py-4 mx-auto rounded-md">
- <CommunityHeader :admin="false" class="mb-5" />
-
- <!-- Search field -->
- <div class="relative" id="searchComponent">
- <span class="absolute inset-y-0 left-0 flex items-center pl-3">
- <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
- <path
- d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
- stroke="currentColor"
- stroke-width="2"
- stroke-linecap="round"
- stroke-linejoin="round"
- ></path>
- </svg>
- </span>
-
- <input
- type="text"
- id="searchInput"
- class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
- placeholder="Search"
- v-model="search"
- @change="searchWritten"
- />
+ <div>
+ <div v-if="loading" class="flex place-content-center">
+ <LoaderSpinner />
</div>
+ <section v-else class="w-full px-5 py-4 mx-auto rounded-md">
+ <CommunityHeader :admin="false" class="mb-5" />
- <div class="absolute inset-x-0 px-5 py-3">
- <!-- ItemCards -->
- <div class="flex items-center justify-center w-screen">
- <!-- Shows items based on pagination -->
- <div
- class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full"
- v-if="showItems"
- >
- <ItemCard
- v-for="item in visibleItems"
- :key="item"
- :item="item"
- @click="goToItemInfoPage(item.listingID)"
- />
- </div>
+ <div v-if="!items.length" class="flex place-content-center text-gray-400">
+ Ingen gjenstander å vise 🥺 👉👈
+ </div>
+ <div v-else>
+ <!-- Search field -->
+ <div class="relative" id="searchComponent">
+ <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+ <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+ <path
+ d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ ></path>
+ </svg>
+ </span>
- <!-- Shows items based on search field input -->
- <div
- class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full place-items-center"
- v-if="showSearchedItems"
- >
- <ItemCard
- v-for="item in searchedItems"
- :key="item"
- :item="item"
- @click="goToItemInfoPage(item.listingID)"
+ <input
+ type="text"
+ class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
+ placeholder="Search"
+ v-model="search"
+ @change="searchWritten"
/>
</div>
- </div>
- <!-- pagination -->
- <div class="flex justify-center" v-if="showItems">
- <PaginationTemplate
- v-bind:items="items"
- v-on:page:update="updatePage"
- v-bind:currentPage="currentPage"
- v-bind:pageSize="pageSize"
- class="mt-10"
- />
+ <div class="absolute inset-x-0 px-5 py-3">
+ <!-- ItemCards -->
+ <div class="flex items-center justify-center w-screen">
+ <!-- Shows items based on pagination -->
+ <div
+ class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full"
+ v-if="showItems"
+ >
+ <ItemCard
+ v-for="item in visibleItems"
+ :key="item"
+ :item="item"
+ @click="goToItemInfoPage(item.listingID)"
+ />
+ </div>
+
+ <!-- Shows items based on search field input -->
+ <div
+ class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full place-items-center"
+ v-if="showSearchedItems"
+ >
+ <ItemCard
+ v-for="item in searchedItems"
+ :key="item"
+ :item="item"
+ @click="goToItemInfoPage(item.listingID)"
+ />
+ </div>
+ </div>
+
+ <!-- pagination -->
+ <div class="flex justify-center" v-if="showItems">
+ <PaginationTemplate
+ v-bind:items="items"
+ v-on:page:update="updatePage"
+ v-bind:currentPage="currentPage"
+ v-bind:pageSize="pageSize"
+ class="mt-10"
+ />
+ </div>
+ </div>
</div>
- </div>
- </section>
+ </section>
+ </div>
</template>
<script>
import ItemCard from "@/components/ItemComponents/ItemCard";
import CommunityHeader from "@/components/CommunityComponents/CommunityHeader";
import PaginationTemplate from "@/components/BaseComponents/PaginationTemplate";
+import LoaderSpinner from "@/components/BaseComponents/LoaderSpinner";
import {
GetCommunity,
@@ -81,11 +91,12 @@ import {
getItemPictures,
} from "@/utils/apiutil";
export default {
- name: "SearchItemListComponent",
+ name: "CommunityHome",
components: {
CommunityHeader,
ItemCard,
PaginationTemplate,
+ LoaderSpinner,
},
computed: {
searchedItems() {
@@ -108,6 +119,7 @@ export default {
},
data() {
return {
+ search: "",
items: [],
item: {
listingID: 0,
@@ -123,6 +135,8 @@ export default {
showItems: true,
showSearchedItems: false,
+ loading: false,
+
//Variables connected to pagination
currentPage: 0,
pageSize: 12,
@@ -181,9 +195,11 @@ export default {
},
},
async beforeMount() {
+ this.loading = true;
await this.getCommunityFromAPI(); //To get the id of the community before mounting the view
await this.getListingsOfCommunityFromAPI();
this.updateVisibleTodos();
+ this.loading = false;
},
};
</script>
diff --git a/src/components/CommunityComponents/CommunityList.vue b/src/components/CommunityComponents/CommunityList.vue
index 7d2d789b09a5098dadfd90a695e23efbd01ec71d..b6641f92549da76ed1f956e600842d9b07615eb5 100644
--- a/src/components/CommunityComponents/CommunityList.vue
+++ b/src/components/CommunityComponents/CommunityList.vue
@@ -1,5 +1,8 @@
<template>
- <ul>
+ <p v-if="!communities.length" class="flex place-content-center text-gray-400">
+ Ingen grupper
+ </p>
+ <ul v-else>
<li v-for="community in communities" :key="community">
<CommunityListItem
:community="community"
@@ -12,7 +15,6 @@
<script>
import CommunityListItem from "@/components/CommunityComponents/CommunityListItem.vue";
-//import Join
export default {
name: "CommunityList",
diff --git a/src/components/CommunityComponents/CommunityListItem.vue b/src/components/CommunityComponents/CommunityListItem.vue
index 637b8d95a10e15425e698d97c7f57ed7f71e2a54..4116a893a97845095d11aa60b7735de685aac623 100644
--- a/src/components/CommunityComponents/CommunityListItem.vue
+++ b/src/components/CommunityComponents/CommunityListItem.vue
@@ -1,76 +1,82 @@
<template>
- <CustomFooterModal
- @close="this.dialogOpen = false"
- :visible="dialogOpen"
- :title="community.name"
- :message="community.description"
- >
- <div class="flex justify-center p-2">
- <!-- If a user is not a member in the community, this button will show -->
- <ColoredButton
- v-if="!member && community.visibility !== 0"
- :text="'Bli med'"
- @click="goToJoin(community.communityId)"
- class="m-2"
- />
+ <div>
+ <CustomFooterModal
+ @close="this.dialogOpen = false"
+ :visible="dialogOpen"
+ :title="community.name"
+ :message="community.description"
+ >
+ <div class="flex justify-center p-2">
+ <!-- If a user is not a member in the community, this button will show -->
+ <ColoredButton
+ v-if="!member && community.visibility !== 0"
+ :text="'Bli med'"
+ @click="goToJoin(community.communityId)"
+ class="m-2"
+ />
- <ColoredButton
- v-if="!member && community.visibility === 0"
- :text="'Spør om å bli med'"
- @click="goToRequest(community.communityId)"
- class="m-2"
- />
+ <ColoredButton
+ v-if="!member && community.visibility === 0"
+ :text="'Spør om å bli med'"
+ @click="goToRequest(community.communityId)"
+ class="m-2"
+ />
- <!-- If a user is member this button will show -->
- <ColoredButton
- v-if="member"
- :text="'GÃ¥ til'"
- @click="goToGroup(community.communityId)"
- class="m-2"
- />
+ <!-- If a user is member this button will show -->
+ <ColoredButton
+ v-if="member"
+ :text="'GÃ¥ til'"
+ @click="goToGroup(community.communityId)"
+ class="m-2"
+ />
- <!-- If a user isn't member but the community is open, the user is able to get in to see listings(items) -->
- <ColoredButton
- v-if="!member && community.visibility === 1"
- :text="'GÃ¥ til'"
- @click="goToGroup(community.communityId)"
- class="m-2"
- />
- </div>
+ <!-- If a user isn't member but the community is open, the user is able to get in to see listings(items) -->
+ <ColoredButton
+ v-if="!member && community.visibility === 1"
+ :text="'GÃ¥ til'"
+ @click="goToGroup(community.communityId)"
+ class="m-2"
+ />
+ </div>
- <!-- If a user is not logges in and tries to join a community, this message shows -->
- <div class="flex justify-center p-2">
- <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
- {{ responseToUser }}
- </p>
- </div>
- </CustomFooterModal>
- <div
- @click="toggleDialog()"
- class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-2"
- >
- <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>
+ <!-- If a user is not logges in and tries to join a community, this message shows -->
+ <div class="flex justify-center p-2">
+ <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+ {{ responseToUser }}
+ </p>
+ </div>
+ </CustomFooterModal>
<div
- v-else
- class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2"
+ @click="toggleDialog()"
+ class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-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">
- {{ community.name }}
+ <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">
+ {{ community.name }}
+ </div>
+ </div>
+ <div class="flex flex-row justify-center items-center">
+ <LockClosedIcon
+ v-if="community.visibility === 0"
+ class="max-h-6 max-w-6 shrink m-2"
+ />
</div>
- </div>
- <div class="flex flex-row justify-center items-center">
- <LockClosedIcon
- v-if="community.visibility === 0"
- class="max-h-6 max-w-6 shrink m-2"
- />
</div>
</div>
</template>
diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index bfa39aaa8d7c3b3136319565e476ea82d2751191..3784e50b8ee43c15553a74f49b10e55dffb33e7f 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -1,28 +1,10 @@
<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>
@@ -36,25 +18,7 @@
>
<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"
@@ -72,25 +36,7 @@
</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"
@@ -117,36 +63,18 @@
<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
/>
<!-- error message for title-->
<div
- class="text-error"
+ class="text-error-medium"
v-for="(error, index) of v$.group.name.$errors"
:key="index"
>
- <div class="text-error text-sm">
+ <div class="text-error-medium text-sm">
{{ error.$message }}
</div>
</div>
@@ -161,36 +89,18 @@
>
<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
/>
<!-- error message for place-->
<div
- class="text-error"
+ class="text-error-medium"
v-for="(error, index) of v$.group.place.$errors"
:key="index"
>
- <div class="text-error text-sm">
+ <div class="text-error-medium text-sm">
{{ error.$message }}
</div>
</div>
@@ -207,35 +117,17 @@
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>
<!-- error message for description -->
<div
- class="text-error"
+ class="text-error-medium"
v-for="(error, index) of v$.group.description.$errors"
:key="index"
>
- <div class="text-error text-sm">
+ <div class="text-error-medium text-sm">
{{ error.$message }}
</div>
</div>
@@ -264,27 +156,11 @@
<!--<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 for removing an image -->
</div>
<!-- Div box for showing all chosen images -->
@@ -298,8 +174,6 @@
<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>
@@ -323,7 +197,7 @@ export default {
group: {
name: {
required: helpers.withMessage(
- () => "Navnt kan ikke være tom",
+ () => "Navn kan ikke være tom",
required
),
max: helpers.withMessage(
@@ -366,8 +240,6 @@ export default {
image: "",
},
imageThere: false,
- imageId: -1,
- imageStringURL: "",
};
},
computed: {
@@ -380,10 +252,6 @@ export default {
},
},
methods: {
- removeImage: function () {
- this.group.images.pop();
- this.imageThere = false;
- },
checkRadioButton: function (event) {
this.group.radio = event.target.value;
@@ -403,7 +271,6 @@ 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,
@@ -414,7 +281,10 @@ export default {
console.log(this.group.image);
- await postNewgroup(groupInfo);
+ const respone = await postNewgroup(groupInfo);
+ if (respone.status === 200 || respone.status === 201) {
+ this.$router.push({ path: "/", replace: true });
+ }
}
},
@@ -429,10 +299,7 @@ export default {
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 362dec931a8512d52aeea7ec1ba5a20bd1a9d9ea..4b52c2efef1be63592ab7843f55bcf7a945f4e0d 100644
--- a/src/components/FormComponents/LoginForm.vue
+++ b/src/components/FormComponents/LoginForm.vue
@@ -24,7 +24,7 @@
<!-- error message -->
<div v-for="(error, index) of v$.user.email.$errors" :key="index">
<div
- class="text-red-600 text-sm"
+ class="text-error-medium text-sm"
v-show="showError"
id="emailErrorId"
>
@@ -47,12 +47,12 @@
/>
<!-- error message -->
<div
- class="text-red-600 text-sm"
+ class="text-error-medium text-sm"
v-for="(error, index) of v$.user.password.$errors"
:key="index"
>
<div
- class="text-red-600 text-sm"
+ class="text-error-medium text-sm"
v-show="showError"
id="passwordErrorId"
>
@@ -82,7 +82,7 @@
</div>
<div class="flex items-center justify-center text-center bg-gray-50">
<label
- class="mx-2 text-sm font-bold text-red-500 dark:text-primary-light hover:underline"
+ class="mx-2 text-sm font-bold text-error-medium dark:text-primary-light hover:underline"
>{{ message }}</label
>
</div>
diff --git a/src/components/FormComponents/NewPasswordForm.vue b/src/components/FormComponents/NewPasswordForm.vue
index d32c15d65f1d4938f01c9c862fe70cc49f58929c..7dfd1958ee78aca0bd7e1720b939d4c340ba6e9c 100644
--- a/src/components/FormComponents/NewPasswordForm.vue
+++ b/src/components/FormComponents/NewPasswordForm.vue
@@ -25,7 +25,7 @@
<!-- error message -->
<div v-for="(error, index) of v$.user.oldPassword.$errors" :key="index">
<div
- class="text-red-600 text-sm"
+ class="text-error-medium text-sm"
v-show="showError"
id="oldPasswordErrorId"
>
@@ -52,7 +52,7 @@
<!-- error message -->
<div v-for="(error, index) of v$.user.password.$errors" :key="index">
<div
- class="text-red-600 text-sm"
+ class="text-error-medium text-sm"
v-show="showError"
id="passwordErrorId"
>
@@ -82,7 +82,7 @@
<!-- error message -->
<div v-for="(error, index) of v$.user.rePassword.$errors" :key="index">
<div
- class="text-red-600 text-sm"
+ class="text-error-medium text-sm"
v-show="showError"
id="rePasswordErrorId"
>
diff --git a/src/components/FormComponents/RegisterForm.vue b/src/components/FormComponents/RegisterForm.vue
index 12c4a1227379f44305217b4c594c31e2ed703952..17cd3cf736afe4e9a3c53d30af6527e7a3d8602a 100644
--- a/src/components/FormComponents/RegisterForm.vue
+++ b/src/components/FormComponents/RegisterForm.vue
@@ -21,12 +21,12 @@
/>
<!-- error message -->
<div
- class="text-red-600 text-sm"
+ class="text-error-medium text-sm"
v-for="(error, index) of v$.email.$errors"
:key="index"
>
<div
- class="text-red-600 text-sm"
+ class="text-error-medium text-sm"
v-show="showError"
id="emailErrorId"
>
@@ -45,12 +45,12 @@
/>
<!-- error message -->
<div
- class="text-red-600 text-sm"
+ class="text-error-medium text-sm"
v-for="(error, index) of v$.password.$errors"
:key="index"
>
<div
- class="text-red-600 text-sm"
+ class="text-error-medium text-sm"
v-show="showError"
id="passwordErrorId"
>
@@ -69,12 +69,12 @@
/>
<!-- error message -->
<div
- class="text-red-600 text-sm"
+ class="text-error-medium text-sm"
v-for="(error, index) of v$.confirmPassword.$errors"
:key="index"
>
<div
- class="text-red-600 text-sm"
+ class="text-error-medium text-sm"
v-show="showError"
id="confirmPasswordErrorId"
>
@@ -94,12 +94,12 @@
/>
<!-- error message -->
<div
- class="text-red-600 text-sm"
+ class="text-error-medium text-sm"
v-for="(error, index) of v$.firstName.$errors"
:key="index"
>
<div
- class="text-red-600 text-sm"
+ class="text-error-medium text-sm"
v-show="showError"
id="firstNameErrorId"
>
@@ -118,12 +118,12 @@
/>
<!-- error message -->
<div
- class="text-red-600 text-sm"
+ class="text-error-medium text-sm"
v-for="(error, index) of v$.lastName.$errors"
:key="index"
>
<div
- class="text-red-600 text-sm"
+ class="text-error-medium text-sm"
v-show="showError"
id="lastNameErrorId"
>
@@ -142,12 +142,12 @@
/>
<!-- error message -->
<div
- class="text-red-600 text-sm"
+ class="text-error-medium text-sm"
v-for="(error, index) of v$.address.$errors"
:key="index"
>
<div
- class="text-red-600 text-sm"
+ class="text-error-medium text-sm"
v-show="showError"
id="addressErrorId"
>
diff --git a/src/components/FormComponents/ResetPasswordForm.vue b/src/components/FormComponents/ResetPasswordForm.vue
index b075e1a983cd3e6734a57fc1fb4ab07cea02d2b3..714e615ddf080f6fb7da79f72c831efd403ae9e1 100644
--- a/src/components/FormComponents/ResetPasswordForm.vue
+++ b/src/components/FormComponents/ResetPasswordForm.vue
@@ -29,7 +29,7 @@
<!-- error message -->
<div v-for="(error, index) of v$.email.$errors" :key="index">
<div
- class="text-red-600 text-sm"
+ class="text-error-medium text-sm"
v-show="showError"
id="emailErrorId"
>
diff --git a/src/components/ItemComponents/ItemCard.vue b/src/components/ItemComponents/ItemCard.vue
index ac79861f7bf9eb7bbed3592b4420d440bc98e587..0d81988d6ae5dca8c620b69c0eadeb7a6fb7cc7f 100644
--- a/src/components/ItemComponents/ItemCard.vue
+++ b/src/components/ItemComponents/ItemCard.vue
@@ -4,11 +4,11 @@
class="w-4/5 rounded bg-gray-200 h-full overflow-hidden display:inline-block correct-size"
>
<img
- class="w-full"
+ class="h-3/4"
:src="item.img || require('../../assets/default-product.png')"
alt="Item image"
/>
- <div class="p-1 m-1">
+ <div class="p-1 m-1 bottom-0">
<p class="text-gray-700 text-xs font-bold" id="adress">
{{ item.address }}
</p>
diff --git a/src/components/ItemComponents/NewItemForm.vue b/src/components/ItemComponents/NewItemForm.vue
index 67f8f3032c3dacdbfc19f2fc29652be86d3c1db5..4e5fff4a64e1b606296963dcbbaefbcd71838703 100644
--- a/src/components/ItemComponents/NewItemForm.vue
+++ b/src/components/ItemComponents/NewItemForm.vue
@@ -24,11 +24,11 @@
<!-- error message for title-->
<div
- class="text-error"
+ class="text-error-medium"
v-for="(error, index) of v$.item.title.$errors"
:key="index"
>
- <div class="text-error text-sm">
+ <div class="text-error-medium text-sm">
{{ error.$message }}
</div>
</div>
@@ -60,11 +60,11 @@
<!-- error message for select box -->
<div
- class="text-error"
+ class="text-error-medium"
v-for="(error, index) of v$.item.select.$errors"
:key="index"
>
- <div class="text-error text-sm">
+ <div class="text-error-medium text-sm">
{{ error.$message }}
</div>
</div>
@@ -94,7 +94,10 @@
</li>
</ul>
</div>
- <label class="text-error text-sm block">{{ groupErrorMessage }}</label>
+ <!-- Error message for community -->
+ <label class="text-error-medium text-sm block">{{
+ groupErrorMessage
+ }}</label>
</div>
<!-- price -->
@@ -114,11 +117,11 @@
<!-- error message for price -->
<div
- class="text-error"
+ class="text-error-medium"
v-for="(error, index) of v$.item.price.$errors"
:key="index"
>
- <div class="text-error text-sm">
+ <div class="text-error-medium text-sm">
{{ error.$message }}
</div>
</div>
@@ -141,11 +144,11 @@
<!-- error message for description -->
<div
- class="text-error"
+ class="text-error-medium"
v-for="(error, index) of v$.item.description.$errors"
:key="index"
>
- <div class="text-error text-sm">
+ <div class="text-error-medium text-sm">
{{ error.$message }}
</div>
</div>
@@ -168,11 +171,11 @@
<!-- error message for address-->
<div
- class="text-error"
+ class="text-error-medium"
v-for="(error, index) of v$.item.address.$errors"
:key="index"
>
- <div class="text-error text-sm">
+ <div class="text-error-medium text-sm">
{{ error.$message }}
</div>
</div>
@@ -213,7 +216,7 @@
<script>
import useVuelidate from "@vuelidate/core";
import { parseUserFromToken } from "@/utils/token-utils";
-import { postNewItem, getMyGroups } from "@/utils/apiutil";
+import {postNewItem, getMyGroups, postNewImageCommunity, PostImagesArrayToListing} from "@/utils/apiutil";
import Button from "@/components/BaseComponents/ColoredButton";
import {
@@ -300,6 +303,7 @@ export default {
userId: -1,
selectedGroupId: -1,
selectedGroups: [],
+ imagesToSend: [],
},
//Kategorier skal legges inn ved api/hente fra db, her må det endres etterhvert
categories: ["Hage", "Kjøkken", "Musikk", "Annet"],
@@ -322,6 +326,7 @@ export default {
async saveClicked() {
if (this.checkValidation()) {
this.checkUser();
+
const itemInfo = {
title: this.item.title,
description: this.item.description,
@@ -333,6 +338,8 @@ export default {
};
await postNewItem(itemInfo);
+ await PostImagesArrayToListing(this.item.imagesToSend);
+
this.$router.push("/");
}
},
@@ -342,8 +349,26 @@ export default {
this.item.userId = parseInt(user.accountId);
},
- addImage: function (event) {
+ //Not sure this method works
+ addImage: async function (event) {
this.item.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);
+
+ //Not sure if this will work
+ that.item.imagesToSend.push(API_URL + "images/" + id);
+
+ };
+ fileReader.readAsArrayBuffer(image);
},
getGroups: async function () {
diff --git a/src/components/UserProfileComponents/UserItems.vue b/src/components/UserProfileComponents/UserItems.vue
index 29deba9c6990b348a41796de1ba1f3d1d46d6a6e..88bd3ce45ce066f67be1739aba37e39c219ca129 100644
--- a/src/components/UserProfileComponents/UserItems.vue
+++ b/src/components/UserProfileComponents/UserItems.vue
@@ -1,6 +1,6 @@
<template>
<div id="headline" class="text-xl md:text-2xl text-primary-light font-medium">
- Dine gjenstander
+ Mine gjenstander
</div>
<!-- Search field -->
<div class="relative" id="searchComponent">
@@ -25,7 +25,6 @@
@change="searchWritten"
/>
</div>
-
<div class="absolute inset-x-0 px-5 py-3">
<!-- ItemCards -->
<div class="flex items-center justify-center w-screen">
@@ -34,7 +33,68 @@
class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full"
v-if="showItems"
>
- <ItemCard v-for="item in visibleItems" :key="item" :item="item" />
+ <div
+ class="cardContainer"
+ id="item"
+ v-for="item in visibleItems"
+ :key="item"
+ >
+ <ItemCard class="ItemCard w-fit h-fit" :item="item" />
+
+ <TripleDotButton class="DotButton" @click="openDotMenu(item)">
+ </TripleDotButton>
+
+ <div
+ v-show="item.toggle"
+ class="options 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"
+ >
+ <li>
+ <button
+ to="/user/userItems"
+ 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"
+ >
+ Rediger gjenstand
+ </button>
+ </li>
+ <li>
+ <button
+ @click="goToDeleteItem(item.listingID)"
+ class="block py-2 px-4 text-sm text-error-medium hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+ >
+ Slett gjenstand
+ </button>
+ </li>
+ </ul>
+ </div>
+ </div>
+
+ <CustomFooterModal
+ @close="this.readyToDelete = false"
+ :visible="readyToDelete"
+ :title="'Sikker på at du vil slette annonsen?'"
+ :message="''"
+ >
+ <div class="flex justify-center p-2">
+ <ColoredButton
+ id="#cancelDeleteButton"
+ :text="'Avbryt'"
+ @click="cancelDelete"
+ class="bg-gray-500 m-2"
+ ></ColoredButton>
+
+ <ColoredButton
+ id="confirmDeleteButton"
+ @click="deleteItem"
+ :text="'Slett'"
+ class="m-2 bg-error-medium"
+ >
+ </ColoredButton>
+ </div>
+ </CustomFooterModal>
</div>
<!-- Shows items based on search field input -->
@@ -42,7 +102,61 @@
class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full place-items-center"
v-if="showSearchedItems"
>
- <ItemCard v-for="item in searchedItems" :key="item" :item="item" />
+ <div class="cardContainer" v-for="item in searchedItems" :key="item">
+ <ItemCard class="ItemCard" :item="item" />
+ <TripleDotButton class="DotButton" @click="openDotMenu(item)">
+ </TripleDotButton>
+
+ <div
+ v-show="item.toggle"
+ class="options 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"
+ >
+ <li>
+ <button
+ to="/user/userItems"
+ 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"
+ >
+ Rediger gjenstand
+ </button>
+ </li>
+ <li>
+ <button
+ @click="goToDeleteItem(item.listingID)"
+ class="block py-2 px-4 text-sm text-error-medium hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+ >
+ Slett gjenstand
+ </button>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <CustomFooterModal
+ @close="this.readyToDelete = false"
+ :visible="readyToDelete"
+ :title="'Sikker på at du vil slette annonsen?'"
+ :message="''"
+ >
+ <div class="flex justify-center p-2">
+ <ColoredButton
+ id="#cancelDeleteButton"
+ :text="'Avbryt'"
+ @click="cancelDelete"
+ class="bg-gray-500 m-2"
+ ></ColoredButton>
+
+ <ColoredButton
+ id="confirmDeleteButton"
+ @click="deleteItem"
+ :text="'Slett'"
+ class="m-2 bg-error-medium"
+ >
+ </ColoredButton>
+ </div>
+ </CustomFooterModal>
</div>
</div>
<!-- pagination -->
@@ -58,15 +172,23 @@
</div>
</template>
<script>
+import TripleDotButton from "@/components/BaseComponents/TripleDotButton.vue";
import { GetUserListings, getItemPictures } from "@/utils/apiutil";
+import ColoredButton from "@/components/BaseComponents/ColoredButton.vue";
+
+import UserService from "@/services/user.service";
import ItemCard from "@/components/ItemComponents/ItemCard.vue";
import PaginationTemplate from "@/components/BaseComponents/PaginationTemplate";
+import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal.vue";
export default {
name: "UserItems",
components: {
ItemCard,
+ TripleDotButton,
PaginationTemplate,
+ CustomFooterModal,
+ ColoredButton,
},
data() {
return {
@@ -77,10 +199,14 @@ export default {
address: "",
title: "",
pricePerDay: 0,
+ toggle: false,
},
+ chosenItem: null,
showItems: true,
showSearchedItems: false,
search: "",
+ readyToDelete: false,
+ dropdown: false,
//Variables connected to pagination
currentPage: 0,
pageSize: 12,
@@ -102,15 +228,29 @@ export default {
},
},
methods: {
+ openDotMenu(item) {
+ if (item.toggle == false) {
+ for (var i = 0; i < this.visibleItems.length; i++) {
+ this.visibleItems[i].toggle = false;
+ }
+ item.toggle = true;
+ } else {
+ item.toggle = false;
+ }
+ },
getUserListingsFromAPI: async function () {
this.items = await GetUserListings();
for (var i = 0; i < this.items.length; i++) {
+ this.items[i].toggle = false;
let images = await getItemPictures(this.items[i].listingID);
if (images.length > 0) {
this.items[i].img = images[0].picture;
}
}
},
+ cancelDelete() {
+ this.readyToDelete = false;
+ },
//Pagination
updatePage(pageNumber) {
this.currentPage = pageNumber;
@@ -127,6 +267,16 @@ export default {
this.updatePage(this.currentPage - 1);
}
},
+ goToDeleteItem(item) {
+ console.log("Halllllo: " + item);
+ this.chosenItem = item;
+ this.readyToDelete = true;
+ },
+ async deleteItem() {
+ console.log("HEI " + this.chosenItem);
+ await UserService.setListingToDeleted(this.chosenItem);
+ this.$router.go(0);
+ },
searchWritten: function () {
//This method triggers when search input field is changed
if (this.search.length > 0) {
@@ -150,5 +300,17 @@ export default {
display: block;
margin-top: 10px;
margin-bottom: 10px;
+ margin-left: 20px;
+}
+.cardContainer {
+ position: relative;
+}
+.DotButton {
+ position: absolute;
+ right: 40px;
+ bottom: 10px;
+}
+.options {
+ position: absolute;
}
</style>
diff --git a/src/services/user.service.js b/src/services/user.service.js
index b8f10603ecbd21ebfe0eec3b7e7d2227b025ffad..e2bf48bd4b19f07b3b5f2de07544d1d05a0fc020 100644
--- a/src/services/user.service.js
+++ b/src/services/user.service.js
@@ -27,6 +27,17 @@ class UserService {
.catch((err) => console.error(err));
}
+ async setListingToDeleted(listingId) {
+ return await axios
+ .put(API_URL + "listing/" + listingId, {
+ headers: tokenHeader(),
+ })
+ .then((res) => {
+ return res.data;
+ })
+ .catch((err) => console.error(err));
+ }
+
async getRenterHistory() {
return await axios
.get(API_URL + "user/profile/rent/history", {
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index f33d6db9f3ce03cac2a5b9d6dc149c41b1949912..94221032becec82269c8a9de7473bdb4fb4831c4 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -328,15 +328,29 @@ export function postNewRating(ratingInfo) {
export function postNewImageCommunity(image) {
return axios
- .post(API_URL + "images", image, {
- headers: {...tokenHeader(), "Content-Type": "image/png"},
+ .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;
+ });
+}
+
+export function PostImagesArrayToListing(imagesArray) {
+ return axios
+ .post(API_URL + "listing/pictures", imagesArray, {
+ headers: tokenHeader(),
})
.then((response) => {
- console.log(response.data);
- return response.data;
+ return response;
})
.catch((error) => {
- console.log(error);
+ console.error(error.response);
return error;
});
}
diff --git a/src/views/CommunityViews/CommunityView.vue b/src/views/CommunityViews/CommunityView.vue
index 52e711014b45736bf30d0a21122e03eb24262b55..b15181fcaf9b8af58f74958ecbf6fc71c7b4ee38 100644
--- a/src/views/CommunityViews/CommunityView.vue
+++ b/src/views/CommunityViews/CommunityView.vue
@@ -1,68 +1,81 @@
<template>
- <!-- My communities, with pagination -->
- <div v-if="loggedIn">
- <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="visibleMyCommunities" :member="true" />
-
- <!-- pagination my communities -->
- <div class="flex justify-center">
- <PaginationTemplate
- v-bind:items="myCommunities"
- v-on:page:update="updatePageMyCommunities"
- v-bind:currentPage="currentPageMyCommunities"
- v-bind:pageSize="pageSizeMyCommunities"
- class="mt-4"
- />
+ <div>
+ <div v-if="loading" class="flex place-content-center p-8 min-h-screen">
+ <LoaderSpinner />
</div>
- </div>
+ <div v-else class="min-h-screen">
+ <!-- My communities, with pagination -->
+ <div v-if="loggedIn">
+ <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="visibleMyCommunities" :member="true" />
- <!-- Public communities, with search and pagination -->
- <p class="text-xl md:text-2xl text-primary-light font-medium w-full p-4">
- Offentlige grupper
- </p>
- <!-- Search field -->
- <div class="relative mt-1 mx-2" id="searchComponent">
- <span class="absolute inset-y-0 left-0 flex items-center pl-3">
- <div class="w-5 h-5 text-gray-400">
- <SearchIcon />
+ <!-- pagination my communities -->
+ <div class="flex justify-center">
+ <PaginationTemplate
+ v-bind:items="myCommunities"
+ v-on:page:update="updatePageMyCommunities"
+ v-bind:currentPage="currentPageMyCommunities"
+ v-bind:pageSize="pageSizeMyCommunities"
+ class="mt-4"
+ />
+ </div>
</div>
- </span>
- <input
- type="text"
- id="searchInput"
- class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
- placeholder="Search"
- v-model="search"
- @change="searchWritten"
- />
- </div>
+ <!-- Public communities, with search and pagination -->
+ <p class="text-xl md:text-2xl text-primary-light font-medium w-full p-4">
+ Offentlige grupper
+ </p>
+ <!-- Search field -->
+ <div class="relative mt-1 mx-2" id="searchComponent">
+ <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+ <div class="w-5 h-5 text-gray-400">
+ <SearchIcon />
+ </div>
+ </span>
- <!-- Public communities list, two lists, one for when it's searched and one for pagination -->
- <div v-if="showPaginated">
- <CommunityList :communities="visiblePublicCommunities" :member="false" />
- </div>
- <div v-if="showSearched">
- <CommunityList :communities="searchPublicCommunities" :member="false" />
- </div>
- <!-- pagination Public communities -->
- <div class="flex justify-center">
- <PaginationTemplate
- v-bind:items="publicCommunities"
- v-on:page:update="updatePagePublicCommunities"
- v-bind:currentPage="currentPagePublicCommunities"
- v-bind:pageSize="pageSizePublicCommunities"
- class="my-4"
- />
+ <input
+ type="text"
+ id="searchInput"
+ class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
+ placeholder="Search"
+ v-model="search"
+ @change="searchWritten"
+ />
+ </div>
+
+ <!-- Public communities list, two lists, one for when it's searched and one for pagination -->
+ <div v-if="showPaginated">
+ <CommunityList
+ :communities="visiblePublicCommunities"
+ :member="false"
+ />
+ </div>
+ <div v-if="showSearched">
+ <CommunityList :communities="searchPublicCommunities" :member="false" />
+ </div>
+ <!-- pagination Public communities -->
+ <div class="flex justify-center">
+ <PaginationTemplate
+ v-bind:items="publicCommunities"
+ v-on:page:update="updatePagePublicCommunities"
+ v-bind:currentPage="currentPagePublicCommunities"
+ v-bind:pageSize="pageSizePublicCommunities"
+ class="my-4"
+ />
+ </div>
+ </div>
+ <FooterBar />
</div>
</template>
@@ -71,11 +84,14 @@ import CommunityList from "@/components/CommunityComponents/CommunityList.vue";
import { UserAddIcon, SearchIcon } from "@heroicons/vue/outline";
import PaginationTemplate from "@/components/BaseComponents/PaginationTemplate";
import CommunityService from "@/services/community.service";
+import LoaderSpinner from "@/components/BaseComponents/LoaderSpinner";
+import FooterBar from "@/components/BaseComponents/FooterBar";
export default {
name: "HomeView",
data() {
return {
+ loading: false,
loggedIn: false,
myCommunities: [],
publicCommunities: [],
@@ -97,6 +113,8 @@ export default {
UserAddIcon,
PaginationTemplate,
SearchIcon,
+ LoaderSpinner,
+ FooterBar,
},
computed: {
searchPublicCommunities() {
@@ -160,20 +178,21 @@ export default {
},
},
async mounted() {
+ this.loading = true;
await this.load();
//Double loop not bad :)
for (var i = 0; i < this.publicCommunities.length; i++) {
for (var j = 0; j < this.myCommunities.length; j++) {
if (
- this.publicCommunities[i].communityId ===
- this.myCommunities[j].communityId
+ this.publicCommunities?.[i]?.communityId ===
+ this.myCommunities?.[j]?.communityId
) {
this.publicCommunities.splice(i, 1);
}
}
}
-
this.updateVisibleCommunities();
+ this.loading = false;
},
};
</script>
diff --git a/src/views/HelpView.vue b/src/views/HelpView.vue
index 56f7e0e267f102c5493e80579c7c9c11cf9aed45..585749da03358203863f9f07e23a64c86fec264d 100644
--- a/src/views/HelpView.vue
+++ b/src/views/HelpView.vue
@@ -114,13 +114,14 @@ export default {
{
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.",
+ "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?",
+ 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.",
+ "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/UserProfileViews/MyCommunitiesView.vue b/src/views/UserProfileViews/MyCommunitiesView.vue
index 6a5c376b0ac2cde7dcc8ee0dff1cfef2ca5cb6d5..e474528640a45dc3254256ee8ef9afef3871f7ea 100644
--- a/src/views/UserProfileViews/MyCommunitiesView.vue
+++ b/src/views/UserProfileViews/MyCommunitiesView.vue
@@ -1,16 +1,23 @@
<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>
+ <div v-if="loading" class="flex place-content-center p-8">
+ <LoaderSpinner />
+ </div>
+ <div v-else>
+ <!-- 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" />
</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>
@@ -22,6 +29,7 @@ export default {
data() {
return {
myCommunities: [],
+ loading: false,
};
},
components: {
@@ -29,7 +37,9 @@ export default {
UserAddIcon,
},
async beforeCreate() {
+ this.loading = true;
this.myCommunities = await CommunityService.getUserCommunities();
+ this.loading = false;
},
};
</script>
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap
index cecad6a17a15604f5bcf46480b439199187ab9c9..e7df24bdd8074c7762732e44fcac5daf475f1c7d 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap
@@ -2,16 +2,27 @@
exports[`CommunityHeader component renders correctly 1`] = `
<div
- data-v-app=""
+ adminstatus="true"
+ class="flex place-content-center mx-4"
+ community="[object Object]"
>
-
- <!-- TODO PUT A LOADER HERE -->
<div
- adminstatus="true"
- community="[object Object]"
+ class="loadingio-spinner-bean-eater-o5tefvffeqm"
>
- LASTER...
+ <div
+ class="ldio-sweozsnwol"
+ >
+ <div>
+ <div />
+ <div />
+ <div />
+ </div>
+ <div>
+ <div />
+ <div />
+ <div />
+ </div>
+ </div>
</div>
-
</div>
`;
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/community-list-item.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/community-list-item.spec.js.snap
index 5135f4b48c7b670b8c5b8173ad0d802a82b5ed0a..6ea43db8f525841f2ff49a8c9a1d45066552348b 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
@@ -1,10 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CommunityListItem component renders correctly 1`] = `
-<div
- data-v-app=""
->
-
+<div>
<!-- Main modal -->
<!--v-if-->
@@ -50,6 +47,5 @@ exports[`CommunityListItem component renders correctly 1`] = `
</svg>
</div>
</div>
-
</div>
`;
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/community-list.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/community-list.spec.js.snap
index 0feda8234936c3b8b7a1ec27d48066f90615cdaf..52d4de639d8683ee0b575f40d2290c6ad383d554 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/community-list.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/community-list.spec.js.snap
@@ -1,10 +1,110 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CommunityList component renders correctly 1`] = `
-<ul
- grouplist="[object Object],[object Object]"
->
+<ul>
+ <li>
+ <div
+ class="border-black"
+ >
+
+ <!-- Main modal -->
+ <!--v-if-->
+
+ <div
+ class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-2"
+ >
+ <div
+ class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2"
+ >
+ <img
+ alt="Fellsekaps bilde"
+ class="rounded-md"
+ src="string"
+ />
+ </div>
+ <div
+ class="flex-1 pl-1 overflow-hidden"
+ >
+ <div
+ class="font-medium dark:text-white truncate"
+ >
+ string
+ </div>
+ </div>
+ <div
+ class="flex flex-row justify-center items-center"
+ >
+ <svg
+ aria-hidden="true"
+ class="max-h-6 max-w-6 shrink m-2"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+ </div>
+ </div>
+ </div>
+ </li>
+ <li>
+ <div
+ class="border-black"
+ >
+
+ <!-- Main modal -->
+ <!--v-if-->
+
+ <div
+ class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-2"
+ >
+ <div
+ class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2"
+ >
+ <img
+ alt="Fellsekaps bilde"
+ class="rounded-md"
+ src="string"
+ />
+ </div>
+ <div
+ class="flex-1 pl-1 overflow-hidden"
+ >
+ <div
+ class="font-medium dark:text-white truncate"
+ >
+ string
+ </div>
+ </div>
+ <div
+ class="flex flex-row justify-center items-center"
+ >
+ <svg
+ aria-hidden="true"
+ class="max-h-6 max-w-6 shrink m-2"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+ </div>
+ </div>
+ </div>
+ </li>
</ul>
`;
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 19e292101b012b95058ea454f90fb0bdb96fe700..1b8f2021b3218a5e802c69956cd055a0f77d6b00 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,167 +2,159 @@
exports[`CreateNewGroup elements rendering renders correctly 1`] = `
<div
- data-v-app=""
+ 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="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
+ class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-10"
>
- <!-- Component heading -->
- <div
- 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>
+ <!-- Radio boxes -->
+ <div
+ class="mt-6"
+ >
+ <label
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+ id="radioBoxLabel"
>
- Opprett ny gruppe
- </div>
- <!-- Radio boxes -->
+ Synlighet
+ </label>
<div
- class="mt-6"
+ 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="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- id="radioBoxLabel"
+ class="form-check-label inline-block text-gray-800"
+ for="flexRadioOpen"
+ id="radioBoxOpenLabel"
>
- Synlighet
+ Ã…pen
</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="mt-6"
+ class="form-check"
>
- <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"
+ 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"
/>
- <!-- 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"
+ class="form-check-label inline-block text-gray-800"
+ for="flexRadioPrivate"
+ id="radioBoxPrivateLabel"
>
- By/Sted
+ Privat
</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"
+ </div>
+ <!-- Title -->
+ <div
+ class="mt-6"
+ >
+ <label
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+ id="titleLabel"
>
- <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"
+ 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"
>
- <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="inline-flex rounded-md shadow-sm"
- >
- <!--<div class="text-error uppercase text-center">Midlertidig fjernet</div> -->
- <button
- class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800 disabled:opacity-50"
- >
- Velg bilde
- </button>
- <!-- Button for removing an image -->
- </div>
- <!-- Div box for showing all chosen images -->
-
-
- </div>
- <!-- Save item button -->
+ 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"
+ >
+ Bilde
+ </label>
+ <input
+ accept="image/png, image/jpeg"
+ multiple=""
+ style="display: none;"
+ type="file"
+ />
+ <!-- Button for adding an image -->
<div
- class="flex justify-center mt-10 float-right"
+ class="inline-flex rounded-md shadow-sm"
>
- <button-stub
- id="saveButton"
- text="Lagre"
- />
+ <!--<div class="text-error uppercase text-center">Midlertidig fjernet</div> -->
+ <button
+ class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800 disabled:opacity-50"
+ >
+ Velg bilde
+ </button>
</div>
+ <!-- Div box for showing all chosen images -->
+
+
+ </div>
+ <!-- Save item button -->
+ <div
+ class="flex justify-center mt-10 float-right"
+ >
+ <button-stub
+ 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__/item-card.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap
index 0d4999e9ea79a37b5fd6bbae85350af3f93a2a91..356fa6b63aa9ece26edbdd78e5d07728036f38b7 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap
@@ -9,11 +9,11 @@ exports[`ItemCard component renders correctly 1`] = `
>
<img
alt="Item image"
- class="w-full"
+ class="h-3/4"
src="String"
/>
<div
- class="p-1 m-1"
+ class="p-1 m-1 bottom-0"
>
<p
class="text-gray-700 text-xs font-bold"
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 c2789c34942918bfb9b251c3bbd6d7c71fbc0eee..26181401d016fdab5f197d4f30a46c66b2ca4c1b 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
@@ -100,8 +100,9 @@ exports[`NewItemForm component renders correctly 1`] = `
</li>
</ul>
</div>
+ <!-- Error message for community -->
<label
- class="text-error text-sm block"
+ class="text-error-medium text-sm block"
/>
</div>
<!-- price -->
diff --git a/tests/unit/component-tests/community-component-tests/community-list.spec.js b/tests/unit/component-tests/community-component-tests/community-list.spec.js
index fbd0968070e19814478e839c92245089f09013b8..1341e301a208a570b8d3f3cb009e311129e4f002 100644
--- a/tests/unit/component-tests/community-component-tests/community-list.spec.js
+++ b/tests/unit/component-tests/community-component-tests/community-list.spec.js
@@ -7,7 +7,7 @@ describe("CommunityList component", () => {
beforeEach(() => {
wrapper = mount(CommunityList, {
props: {
- groupList: [
+ communities: [
{
communityId: 0,
name: "string",
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 f79182e421a30cc8a35db92683cee3b064bbfb02..7d3875c13b81280752f1d753d824b2f830373fc9 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
@@ -70,7 +70,7 @@ exports[`LoginForm component renders correctly 1`] = `
class="flex items-center justify-center text-center bg-gray-50"
>
<label
- class="mx-2 text-sm font-bold text-red-500 dark:text-primary-light hover:underline"
+ class="mx-2 text-sm font-bold text-error-medium dark:text-primary-light hover:underline"
/>
</div>
</div>