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 39941c5321ede2b107b3750ae38f38d198202e67..e80792a22af331b12efb22fe785c06f306e994de 100644
--- a/src/components/BaseComponents/NavBar.vue
+++ b/src/components/BaseComponents/NavBar.vue
@@ -1,36 +1,42 @@
<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>
+ <li class="cursor-pointer"
+ @click="$router.push('/messages')"
+ >
<ChatAlt2Icon
- class="m-6 cursor-pointer h-7 text-primary-medium"
+ class="m-6 md:mr-2 h-7 text-primary-medium float-left"
alt="Meldinger"
- @click="$router.push('/messages')"
/>
+ <a class="hidden md:block mt-7 text-sm float-right">Meldinger</a>
</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/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..afd63a75c4fb1c7ac271c6eaaf9c94096fec4728 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() {
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 a64b9f927e1292b6ec346428052b6062ae9b1e62..3784e50b8ee43c15553a74f49b10e55dffb33e7f 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -70,11 +70,11 @@
<!-- 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>
@@ -96,11 +96,11 @@
<!-- 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>
@@ -123,11 +123,11 @@
<!-- 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>
@@ -161,8 +161,6 @@
>
Velg bilde
</button>
-
- <!-- Button for removing an image -->
</div>
<!-- Div box for showing all chosen images -->
@@ -176,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>
@@ -201,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(
@@ -244,8 +240,6 @@ export default {
image: "",
},
imageThere: false,
- imageId: -1,
- imageStringURL: "",
};
},
computed: {
@@ -258,10 +252,6 @@ export default {
},
},
methods: {
- removeImage: function () {
- this.group.images.pop();
- this.imageThere = false;
- },
checkRadioButton: function (event) {
this.group.radio = event.target.value;
@@ -281,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,
@@ -292,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 });
+ }
}
},
@@ -307,8 +299,6 @@ 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);
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/NewItemForm.vue b/src/components/ItemComponents/NewItemForm.vue
index 67f8f3032c3dacdbfc19f2fc29652be86d3c1db5..67ed1ebcc6ab09ca8977bb710f5f0becdd7a2149 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>
diff --git a/src/components/UserProfileComponents/UserItems.vue b/src/components/UserProfileComponents/UserItems.vue
index 0719878ef48d9833d7ce92acecb177d4aa52de6d..25038bd7e4c1af6223f5993f85cd72ef4328b299 100644
--- a/src/components/UserProfileComponents/UserItems.vue
+++ b/src/components/UserProfileComponents/UserItems.vue
@@ -33,7 +33,12 @@
class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full"
v-if="showItems"
>
- <div class="cardContainer" id="item" v-for="item in visibleItems" :key="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)">
@@ -97,37 +102,38 @@
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"
>
- <div class="cardContainer" v-for="item in searchedItems" :key="item">
- <ItemCard class="ItemCard" :item="item" />
- <TripleDotButton class="DotButton" @click="openDotMenu(item)"> </TripleDotButton>
+ <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"
+ <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"
>
- <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>
+ <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>
- </div>
<CustomFooterModal
@close="this.readyToDelete = false"
:visible="readyToDelete"
@@ -222,14 +228,13 @@ export default {
},
},
methods: {
- openDotMenu(item){
- if(item.toggle == false){
- for(var i = 0; i<this.visibleItems.length; i++){
+ openDotMenu(item) {
+ if (item.toggle == false) {
+ for (var i = 0; i < this.visibleItems.length; i++) {
this.visibleItems[i].toggle = false;
- }
+ }
item.toggle = true;
- }
- else{
+ } else {
item.toggle = false;
}
},
@@ -295,16 +300,15 @@ export default {
margin-bottom: 10px;
margin-left: 20px;
}
-.cardContainer{
+.cardContainer {
position: relative;
}
-.DotButton{
+.DotButton {
position: absolute;
right: 40px;
- bottom: 10px
+ bottom: 10px;
}
-.options{
+.options {
position: absolute;
}
-
</style>
diff --git a/src/views/CommunityViews/CommunityView.vue b/src/views/CommunityViews/CommunityView.vue
index 52e711014b45736bf30d0a21122e03eb24262b55..e518cb889deb32025356358092369c8496482675 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">
+ <LoaderSpinner />
</div>
- </div>
+ <div v-else>
+ <!-- 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,6 +178,7 @@ export default {
},
},
async mounted() {
+ this.loading = true;
await this.load();
//Double loop not bad :)
for (var i = 0; i < this.publicCommunities.length; i++) {
@@ -172,8 +191,8 @@ export default {
}
}
}
-
this.updateVisibleCommunities();
+ this.loading = false;
},
};
</script>
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__/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>