Update my activity in client
This commit is contained in:
Ramon Wenger
parent
1549cde151
commit
cb13aa1ea5
|
|
@ -0,0 +1,50 @@
|
|||
<template>
|
||||
<div class="content-bookmark module-activity-entry">
|
||||
<h3 class="module-activity-entry__title">Lesezeichen</h3>
|
||||
<div v-html="text" v-if="content.type === 'text_block'"></div>
|
||||
<div v-else-if="content.type === 'link_block'">
|
||||
<link-block :value="content.value"></link-block>
|
||||
</div>
|
||||
<p v-else>
|
||||
{{type}}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LinkBlock from '@/components/content-blocks/LinkBlock';
|
||||
export default {
|
||||
components: {LinkBlock},
|
||||
props: ['bookmark'],
|
||||
computed: {
|
||||
content() {
|
||||
return this.bookmark.contentBlock.contents.find(e => e.id === this.bookmark.uuid)
|
||||
},
|
||||
text() {
|
||||
return this.content.value.text ? this.content.value.text : 'TO BE DEFINED'
|
||||
},
|
||||
type() {
|
||||
switch (this.content.type) {
|
||||
case 'assignment':
|
||||
return 'Aufgabe & Ergebnis';
|
||||
case 'link_block':
|
||||
return this.content;
|
||||
case 'survey':
|
||||
return 'Übung';
|
||||
default:
|
||||
return this.content.type;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_mixins.scss";
|
||||
|
||||
.content-bookmark {
|
||||
/deep/ p {
|
||||
@include regular-text;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,38 +1,82 @@
|
|||
<template>
|
||||
<div class="module-activity">
|
||||
<h3 class="module-activity__module-name">{{moduleTitle}}</h3>
|
||||
<h2 class="module-activity__title">{{title}}</h2>
|
||||
<div class="module-activity" v-if="!empty">
|
||||
<h3 class="module-activity__module-name">{{module.topic.title}}</h3>
|
||||
<h2 class="module-activity__title">{{module.metaTitle}} - {{module.title}}</h2>
|
||||
<div class="module-activity__tasks activity-tasks">
|
||||
<h4 class="activity-tasks__title">Meine Ergebnisse</h4>
|
||||
<ol class="activity-tasks__task-list task-list">
|
||||
<li v-for="activity in activities" :key="activity.key" class="task-list__item task-item">
|
||||
<h5 class="task-item__title">{{activity.assignmentTitle}}</h5>
|
||||
<p class="task-item__submission">{{activity.answer}}</p>
|
||||
<a href="#" @click="goToAssignment(activity)"><chevron-right class="task-item__chevron"></chevron-right></a>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="module-activity__entry module-activity-entry"
|
||||
v-for="submission in module.mySubmissions"
|
||||
:key="submission.id"
|
||||
@click="goToAssignment(submission.assignment.id)">
|
||||
<h3 class="module-activity-entry__title">Aufgabe & Ergebnis</h3>
|
||||
<p class="module-activity-entry__text">
|
||||
{{submission.text}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="module-activity__entry module-activity-entry"
|
||||
v-for="answer in module.myAnswers"
|
||||
:key="answer.id">
|
||||
<h3 class="module-activity-entry__title">Übung</h3>
|
||||
<p class="module-activity-entry__text">
|
||||
{{answer.survey.title}}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="module-activity__entry"
|
||||
v-for="bookmark in module.myContentBookmarks"
|
||||
:key="bookmark.id">
|
||||
<content-bookmark :bookmark="bookmark"></content-bookmark>
|
||||
</div>
|
||||
<div class="module-activity__entry"
|
||||
v-for="bookmark in module.myChapterBookmarks"
|
||||
:key="bookmark.id">
|
||||
<h3 class="module-activity-entry__title">Lesezeichen</h3>
|
||||
<p class="module-activity-entry__text">
|
||||
{{bookmark.chapter.description}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="module-activity__entry"
|
||||
v-for="note in notes" :key="note.id">
|
||||
<h3 class="module-activity-entry__title">Notiz</h3>
|
||||
<p class="module-activity-entry__text">
|
||||
{{note.text}}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { mapActions } from 'vuex'
|
||||
import ChevronRight from '@/components/icons/ChevronRight';
|
||||
import {mapActions} from 'vuex'
|
||||
import ContentBookmark from '@/components/profile/ContentBookmark';
|
||||
|
||||
export default {
|
||||
props: ['metaTitle', 'title', 'activities', 'topic', 'slug'],
|
||||
components: {ChevronRight},
|
||||
props: ['module'],
|
||||
components: {
|
||||
ContentBookmark
|
||||
},
|
||||
computed: {
|
||||
moduleTitle () {
|
||||
return `${this.topic.title} - ${this.metaTitle}`
|
||||
empty() {
|
||||
return !(this.module.mySubmissions.length ||
|
||||
this.module.myAnswers.length ||
|
||||
this.module.myContentBookmarks.length ||
|
||||
this.module.myChapterBookmarks.length ||
|
||||
this.module.bookmark)
|
||||
},
|
||||
notes() {
|
||||
return this.module.myChapterBookmarks
|
||||
.concat(this.module.myContentBookmarks)
|
||||
.concat([this.module.bookmark ? this.module.bookmark : {}])
|
||||
.filter(b => b.note)
|
||||
.map(b => b.note);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['scrollToAssignmentId']),
|
||||
goToAssignment (activity) {
|
||||
const url = `/module/${this.slug}/`;
|
||||
this.scrollToAssignmentId(activity.assignmentId);
|
||||
goToAssignment(id) {
|
||||
const url = `/module/${this.module.slug}/`;
|
||||
this.scrollToAssignmentId(id);
|
||||
this.$router.push(url);
|
||||
}
|
||||
}
|
||||
|
|
@ -44,8 +88,6 @@
|
|||
@import "@/styles/_mixins.scss";
|
||||
|
||||
.module-activity {
|
||||
@include widget-shadow;
|
||||
padding: $medium-spacing;
|
||||
|
||||
/* used for text ellipis... somehow https://css-flexbox-text-ellipsis.dinhquangtrung.net/ just does not work */
|
||||
|
||||
|
|
@ -64,20 +106,17 @@
|
|||
}
|
||||
|
||||
&__module-name {
|
||||
@include small-text;
|
||||
color: $color-silver-dark;
|
||||
@include regular-text;
|
||||
margin-bottom: $small-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-tasks {
|
||||
&__title {
|
||||
background-color: $color-brand-light;
|
||||
padding: $small-spacing $medium-spacing;
|
||||
border-radius: $default-border-radius;
|
||||
@include heading-2;
|
||||
}
|
||||
|
||||
&--alternative {
|
||||
background-color: $color-accent-1-light;
|
||||
}
|
||||
&__entry {
|
||||
padding: $small-spacing 0;
|
||||
border-bottom: 1px solid $color-silver;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -90,7 +129,7 @@
|
|||
$line-height: 50px;
|
||||
|
||||
&__title {
|
||||
&::after {
|
||||
&::after {
|
||||
content: ":"
|
||||
}
|
||||
margin-right: $medium-spacing;
|
||||
|
|
|
|||
|
|
@ -1,22 +1,83 @@
|
|||
query {
|
||||
query MyActivityQuery {
|
||||
myActivity {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
text
|
||||
assignment {
|
||||
id
|
||||
title
|
||||
slug
|
||||
metaTitle
|
||||
topic {
|
||||
title
|
||||
module {
|
||||
title
|
||||
metaTitle
|
||||
slug
|
||||
id
|
||||
topic {
|
||||
title
|
||||
}
|
||||
mySubmissions {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
text
|
||||
assignment {
|
||||
id
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
myAnswers {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
survey {
|
||||
id
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
myContentBookmarks {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
uuid
|
||||
note {
|
||||
id
|
||||
text
|
||||
}
|
||||
contentBlock {
|
||||
id
|
||||
type
|
||||
contents
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
myChapterBookmarks {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
note {
|
||||
id
|
||||
text
|
||||
}
|
||||
chapter {
|
||||
id
|
||||
title
|
||||
description
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
bookmark {
|
||||
id
|
||||
note {
|
||||
id
|
||||
text
|
||||
}
|
||||
module {
|
||||
id
|
||||
teaser
|
||||
metaTitle
|
||||
intro
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
<div class="activity">
|
||||
<h1 class="activity__header">Meine Aktivitäten</h1>
|
||||
<div class="modules">
|
||||
<module-activity v-for="moduleId in Object.keys(modules)" v-bind="modules[moduleId]" :key="moduleId" class="activity"></module-activity>
|
||||
<module-activity v-for="(module, id) in modules" :module="module" :key="id" class="activity"></module-activity>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -18,7 +19,7 @@
|
|||
},
|
||||
|
||||
apollo: {
|
||||
submissions: {
|
||||
modules: {
|
||||
query: MY_ACTIVITY_QUERY,
|
||||
update(data) {
|
||||
return this.$getRidOfEdges(data).myActivity;
|
||||
|
|
@ -28,31 +29,7 @@
|
|||
|
||||
data() {
|
||||
return {
|
||||
submissions: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
modules () {
|
||||
let modules = {};
|
||||
|
||||
this.submissions.map((submission) => {
|
||||
let activity = {
|
||||
assignmentId: submission.assignment.id,
|
||||
assignmentTitle: submission.assignment.title,
|
||||
answer: submission.text
|
||||
};
|
||||
|
||||
const module = submission.assignment.module
|
||||
if (!(module.id in modules)) {
|
||||
modules[module.id] = {
|
||||
...module,
|
||||
activities: []
|
||||
}
|
||||
}
|
||||
|
||||
modules[module.id].activities = [...modules[module.id].activities, activity];
|
||||
});
|
||||
return modules
|
||||
modules: []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue