Add loading spinner to new activity page
This commit is contained in:
parent
650f8c05d5
commit
9c4249de01
|
|
@ -9,7 +9,7 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import LoadingSpinner from '@/components/ui/loadingSpinner.vue';
|
||||
import LoadingSpinner from '@/components/ui/LoadingSpinner.vue';
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -1,6 +1,14 @@
|
|||
|
||||
<template>
|
||||
<div class="loading-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
|
||||
<div class="loading-spinner">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -21,7 +29,7 @@
|
|||
}
|
||||
|
||||
div:after {
|
||||
content: " ";
|
||||
content: ' ';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: var(--calculated-dot-size);
|
||||
|
|
@ -31,55 +39,48 @@
|
|||
margin: calc(var(--calculated-dot-size) / -2) 0 0 calc(var(--calculated-dot-size) / -2);
|
||||
}
|
||||
|
||||
div:nth-child(1) {
|
||||
div:nth-child(1) {
|
||||
animation-delay: -0.036s;
|
||||
}
|
||||
|
||||
div:nth-child(1):after {
|
||||
div:nth-child(1):after {
|
||||
top: 63px;
|
||||
left: 63px;
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
div:nth-child(2) {
|
||||
animation-delay: -0.072s;
|
||||
}
|
||||
|
||||
div:nth-child(2):after {
|
||||
div:nth-child(2):after {
|
||||
top: 68px;
|
||||
left: 56px;
|
||||
}
|
||||
|
||||
div:nth-child(3) {
|
||||
div:nth-child(3) {
|
||||
animation-delay: -0.108s;
|
||||
}
|
||||
|
||||
|
||||
div:nth-child(4) {
|
||||
div:nth-child(4) {
|
||||
animation-delay: -0.144s;
|
||||
}
|
||||
|
||||
|
||||
div:nth-child(5) {
|
||||
div:nth-child(5) {
|
||||
animation-delay: -0.18s;
|
||||
}
|
||||
|
||||
|
||||
div:nth-child(6) {
|
||||
div:nth-child(6) {
|
||||
animation-delay: -0.216s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
div:nth-child(7) {
|
||||
div:nth-child(7) {
|
||||
animation-delay: -0.252s;
|
||||
}
|
||||
|
||||
|
||||
div:nth-child(8) {
|
||||
div:nth-child(8) {
|
||||
animation-delay: -0.288s;
|
||||
}
|
||||
|
||||
|
||||
div:nth-child(1):after {
|
||||
top: calc(var(--spinner-size, 80px) * 0.7875);
|
||||
left: calc(var(--spinner-size, 80px) * 0.7875);
|
||||
|
|
@ -128,5 +129,4 @@
|
|||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,98 +1,101 @@
|
|||
<template>
|
||||
<div class="activity">
|
||||
<h1 class="activity__heading">Meine Aktivitäten</h1>
|
||||
<div class="activity__categories">
|
||||
<a
|
||||
class="activity__category default-link"
|
||||
data-cy="activity-category"
|
||||
:class="{ 'activity__category--active': selectedCategory === HIGHLIGHTS }"
|
||||
@click="selectedCategory = HIGHLIGHTS"
|
||||
>Markierungen</a
|
||||
>
|
||||
<a
|
||||
class="activity__category default-link"
|
||||
data-cy="activity-category"
|
||||
:class="{ 'activity__category--active': selectedCategory === BOOKMARKS }"
|
||||
@click="selectedCategory = BOOKMARKS"
|
||||
>Lesezeichen</a
|
||||
>
|
||||
<a
|
||||
class="activity__category default-link"
|
||||
data-cy="activity-category"
|
||||
:class="{ 'activity__category--active': selectedCategory === ASSIGNMENTS }"
|
||||
@click="selectedCategory = ASSIGNMENTS"
|
||||
>Ergebnisse</a
|
||||
>
|
||||
<a
|
||||
class="activity__category default-link"
|
||||
data-cy="activity-category"
|
||||
:class="{ 'activity__category--active': selectedCategory === SURVEYS }"
|
||||
@click="selectedCategory = SURVEYS"
|
||||
>Übungen</a
|
||||
>
|
||||
</div>
|
||||
<div class="activity__activities">
|
||||
<instrument-activity-list
|
||||
property="highlights"
|
||||
:instruments="instruments"
|
||||
v-if="selectedCategory === HIGHLIGHTS"
|
||||
v-slot="{ item }"
|
||||
>
|
||||
<mark
|
||||
class="highlight"
|
||||
:class="[`highlight--${item?.color}`]"
|
||||
>{{ item?.text }}</mark
|
||||
<loading-message v-if="loading">Aktivitäten werden geladen</loading-message>
|
||||
<template v-else>
|
||||
<div class="activity__categories">
|
||||
<a
|
||||
class="activity__category default-link"
|
||||
data-cy="activity-category"
|
||||
:class="{ 'activity__category--active': selectedCategory === HIGHLIGHTS }"
|
||||
@click="selectedCategory = HIGHLIGHTS"
|
||||
>Markierungen</a
|
||||
>
|
||||
<div v-if="item.note">Notiz: {{ item.note.text }}</div>
|
||||
</instrument-activity-list>
|
||||
<activity-list
|
||||
:topics="highlightTopics"
|
||||
property="myHighlights"
|
||||
v-if="selectedCategory === HIGHLIGHTS"
|
||||
v-slot="{ item }"
|
||||
>
|
||||
<mark
|
||||
class="highlight"
|
||||
:class="[`highlight--${item?.color}`]"
|
||||
>{{ item?.text }}</mark
|
||||
<a
|
||||
class="activity__category default-link"
|
||||
data-cy="activity-category"
|
||||
:class="{ 'activity__category--active': selectedCategory === BOOKMARKS }"
|
||||
@click="selectedCategory = BOOKMARKS"
|
||||
>Lesezeichen</a
|
||||
>
|
||||
<div v-if="item.note">Notiz: {{ item.note.text }}</div>
|
||||
</activity-list>
|
||||
<instrument-activity-list
|
||||
property="bookmarks"
|
||||
:instruments="instruments"
|
||||
v-if="selectedCategory === BOOKMARKS"
|
||||
v-slot="{ item }"
|
||||
>
|
||||
<div>Lesezeichen: {{ item.id }}</div>
|
||||
<div v-if="item.note">Notiz: {{ item.note.text }}</div>
|
||||
</instrument-activity-list>
|
||||
<activity-list
|
||||
:topics="bookmarkTopics"
|
||||
property="myBookmarks"
|
||||
v-if="selectedCategory === BOOKMARKS"
|
||||
v-slot="{ item }"
|
||||
>
|
||||
<div>Lesezeichen: {{ item.id }}</div>
|
||||
<div v-if="item.note">Notiz: {{ item.note.text }}</div>
|
||||
</activity-list>
|
||||
<activity-list
|
||||
:topics="submissionsTopics"
|
||||
property="mySubmissions"
|
||||
v-if="selectedCategory === ASSIGNMENTS"
|
||||
v-slot="{ item }"
|
||||
>
|
||||
Submission: {{ item.text }}
|
||||
</activity-list>
|
||||
<activity-list
|
||||
:topics="answersTopics"
|
||||
property="myAnswers"
|
||||
v-if="selectedCategory === SURVEYS"
|
||||
v-slot="{ item }"
|
||||
>
|
||||
Übung: {{ item.survey.title }}
|
||||
</activity-list>
|
||||
</div>
|
||||
<a
|
||||
class="activity__category default-link"
|
||||
data-cy="activity-category"
|
||||
:class="{ 'activity__category--active': selectedCategory === ASSIGNMENTS }"
|
||||
@click="selectedCategory = ASSIGNMENTS"
|
||||
>Ergebnisse</a
|
||||
>
|
||||
<a
|
||||
class="activity__category default-link"
|
||||
data-cy="activity-category"
|
||||
:class="{ 'activity__category--active': selectedCategory === SURVEYS }"
|
||||
@click="selectedCategory = SURVEYS"
|
||||
>Übungen</a
|
||||
>
|
||||
</div>
|
||||
<div class="activity__activities">
|
||||
<instrument-activity-list
|
||||
property="highlights"
|
||||
:instruments="instruments"
|
||||
v-if="selectedCategory === HIGHLIGHTS"
|
||||
v-slot="{ item }"
|
||||
>
|
||||
<mark
|
||||
class="highlight"
|
||||
:class="[`highlight--${item?.color}`]"
|
||||
>{{ item?.text }}</mark
|
||||
>
|
||||
<div v-if="item.note">Notiz: {{ item.note.text }}</div>
|
||||
</instrument-activity-list>
|
||||
<activity-list
|
||||
:topics="highlightTopics"
|
||||
property="myHighlights"
|
||||
v-if="selectedCategory === HIGHLIGHTS"
|
||||
v-slot="{ item }"
|
||||
>
|
||||
<mark
|
||||
class="highlight"
|
||||
:class="[`highlight--${item?.color}`]"
|
||||
>{{ item?.text }}</mark
|
||||
>
|
||||
<div v-if="item.note">Notiz: {{ item.note.text }}</div>
|
||||
</activity-list>
|
||||
<instrument-activity-list
|
||||
property="bookmarks"
|
||||
:instruments="instruments"
|
||||
v-if="selectedCategory === BOOKMARKS"
|
||||
v-slot="{ item }"
|
||||
>
|
||||
<div>Lesezeichen: {{ item.id }}</div>
|
||||
<div v-if="item.note">Notiz: {{ item.note.text }}</div>
|
||||
</instrument-activity-list>
|
||||
<activity-list
|
||||
:topics="bookmarkTopics"
|
||||
property="myBookmarks"
|
||||
v-if="selectedCategory === BOOKMARKS"
|
||||
v-slot="{ item }"
|
||||
>
|
||||
<div>Lesezeichen: {{ item.id }}</div>
|
||||
<div v-if="item.note">Notiz: {{ item.note.text }}</div>
|
||||
</activity-list>
|
||||
<activity-list
|
||||
:topics="submissionsTopics"
|
||||
property="mySubmissions"
|
||||
v-if="selectedCategory === ASSIGNMENTS"
|
||||
v-slot="{ item }"
|
||||
>
|
||||
Submission: {{ item.text }}
|
||||
</activity-list>
|
||||
<activity-list
|
||||
:topics="answersTopics"
|
||||
property="myAnswers"
|
||||
v-if="selectedCategory === SURVEYS"
|
||||
v-slot="{ item }"
|
||||
>
|
||||
Übung: {{ item.survey.title }}
|
||||
</activity-list>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -102,6 +105,7 @@ import { useQuery } from '@vue/apollo-composable';
|
|||
import { ref, computed } from 'vue';
|
||||
import ActivityList from '@/components/profile/ActivityList.vue';
|
||||
import InstrumentActivityList from '@/components/profile/InstrumentActivityList.vue';
|
||||
import LoadingMessage from '@/components/ui/LoadingMessage.vue';
|
||||
import { TopicNode } from '@/__generated__/graphql';
|
||||
|
||||
const HIGHLIGHTS = 'highlights';
|
||||
|
|
@ -112,7 +116,7 @@ const SURVEYS = 'surveys';
|
|||
const selectedCategory = ref(HIGHLIGHTS);
|
||||
|
||||
// todo: use fragments to simplify cache updates
|
||||
const { result } = useQuery(
|
||||
const { result, loading } = useQuery(
|
||||
graphql(`
|
||||
query MyActivitiesQuery {
|
||||
myActivities {
|
||||
|
|
|
|||
Loading…
Reference in New Issue