Skip to content
Snippets Groups Projects
Commit 738894c7 authored by Titus Netland's avatar Titus Netland
Browse files

Merge branch 'display-spinner-when-loading' into 'main' 

Display spinner when loading

See merge request !112
parents d3b55ed3 e0129d08
No related branches found
No related tags found
1 merge request!112Display spinner when loading
Pipeline #181161 failed
Stage: test
Stage: deploy
Hide whitespace changes
Inline Side-by-side
Showing
with 434 additions and 262 deletions
src/components/BaseComponents/LoaderSpinner.vue 0 → 100644
+ 116
− 0
View file @ 738894c7
<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>
src/components/CommunityComponents/CommunityHeader.vue
+ 5
− 2
View file @ 738894c7
<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() {
......
src/components/CommunityComponents/CommunityHome.vue
+ 73
− 62
View file @ 738894c7
<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>
src/components/CommunityComponents/CommunityList.vue
+ 0
− 1
View file @ 738894c7
......@@ -12,7 +12,6 @@
<script>
import CommunityListItem from "@/components/CommunityComponents/CommunityListItem.vue";
//import Join
export default {
name: "CommunityList",
......
src/components/CommunityComponents/CommunityListItem.vue
+ 71
− 65
View file @ 738894c7
<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>
......
src/components/CommunityComponents/NewCommunityForm.vue
+ 6
− 1
View file @ 738894c7
......@@ -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 });
}
}
},
......
src/components/UserProfileComponents/UserItems.vue
+ 45
− 41
View file @ 738894c7
......@@ -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>
src/views/CommunityViews/CommunityView.vue
+ 77
− 63
View file @ 738894c7
<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>
src/views/TestView.vue
+ 2
− 5
View file @ 738894c7
<template>
<div>
</div>
<div></div>
</template>
<script>
export default {
data() {
return {
show: false,
};
},
components: {
},
components: {},
methods: {
toggleModal() {
this.show = !this.show;
......
src/views/UserProfileViews/MyCommunitiesView.vue
+ 20
− 10
View file @ 738894c7
<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>
tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap
+ 18
− 7
View file @ 738894c7
......@@ -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>
`;
tests/unit/component-tests/community-component-tests/__snapshots__/community-list-item.spec.js.snap
+ 1
− 5
View file @ 738894c7
// 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>
`;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment