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/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..bc068b83aaef9300e1211ffe3993c35558b84295 100644
--- a/src/components/CommunityComponents/CommunityHome.vue
+++ b/src/components/CommunityComponents/CommunityHome.vue
@@ -1,79 +1,84 @@
<template>
- <section class="w-full px-5 py-4 mx-auto rounded-md">
- <CommunityHeader :admin="false" class="mb-5" />
+ <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" />
- <!-- 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>
+ <!-- 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>
+ <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 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 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>
- <!-- 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)"
+ <!-- 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>
-
- <!-- 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>
- </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 +86,12 @@ import {
getItemPictures,
} from "@/utils/apiutil";
export default {
- name: "SearchItemListComponent",
+ name: "CommunityHome",
components: {
CommunityHeader,
ItemCard,
PaginationTemplate,
+ LoaderSpinner,
},
computed: {
searchedItems() {
@@ -108,6 +114,7 @@ export default {
},
data() {
return {
+ search: "",
items: [],
item: {
listingID: 0,
@@ -123,6 +130,8 @@ export default {
showItems: true,
showSearchedItems: false,
+ loading: false,
+
//Variables connected to pagination
currentPage: 0,
pageSize: 12,
@@ -181,9 +190,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..007c4a182536fc4fd6531eccd75e86ca08ebfa8c 100644
--- a/src/components/CommunityComponents/CommunityList.vue
+++ b/src/components/CommunityComponents/CommunityList.vue
@@ -12,7 +12,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 9ac2e03621b897fb3d1f7be27b302179bd0e1c66..3784e50b8ee43c15553a74f49b10e55dffb33e7f 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -279,7 +279,12 @@ export default {
picture: this.group.image,
};
- await postNewgroup(groupInfo);
+ console.log(this.group.image);
+
+ const respone = await postNewgroup(groupInfo);
+ if (respone.status === 200 || respone.status === 201) {
+ this.$router.push({ path: "/", replace: true });
+ }
}
},
diff --git a/src/components/UserProfileComponents/UserItems.vue b/src/components/UserProfileComponents/UserItems.vue
index b20cc54235d7912027965299414328313fdd1162..88bd3ce45ce066f67be1739aba37e39c219ca129 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;
}
},
@@ -263,7 +268,7 @@ export default {
}
},
goToDeleteItem(item) {
- console.log("Halllllo: " + item)
+ console.log("Halllllo: " + item);
this.chosenItem = item;
this.readyToDelete = true;
},
@@ -297,16 +302,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 4d3db38eed41201e76802115b73be66251f74b3f..e518cb889deb32025356358092369c8496482675 100644
--- a/src/views/CommunityViews/CommunityView.vue
+++ b/src/views/CommunityViews/CommunityView.vue
@@ -1,72 +1,82 @@
<template>
- <!-- My communities, with pagination -->
- <div class="min-h-screen">
- <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"
- />
- </div>
+ <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></FooterBar>
+ <FooterBar />
+ </div>
</template>
<script>
@@ -74,12 +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: [],
@@ -101,6 +113,7 @@ export default {
UserAddIcon,
PaginationTemplate,
SearchIcon,
+ LoaderSpinner,
FooterBar,
},
computed: {
@@ -165,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++) {
@@ -177,8 +191,8 @@ export default {
}
}
}
-
this.updateVisibleCommunities();
+ this.loading = false;
},
};
</script>
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index 56ea3bde89d1b04f9818cd18a79e24c7e59b4576..f86430c64bb07d2f6e60fe0626ac1f50371d3682 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -1,18 +1,15 @@
<template>
- <div>
- </div>
+ <div></div>
</template>
<script>
-
export default {
data() {
return {
show: false,
};
},
- components: {
- },
+ components: {},
methods: {
toggleModal() {
this.show = !this.show;
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>
`;