ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Update my activity in client

This commit is contained in:
Ramon Wenger 2019-12-18 13:17:08 +01:00
parent 1549cde151
commit cb13aa1ea5
4 changed files with 198 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
client/src/components/profile/ContentBookmark.vue Normal file
View File

@ -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>

105
client/src/components/profile/ModuleActivity.vue
View File

@ -1,38 +1,82 @@
<template> <template>
<div class="module-activity"> <div class="module-activity" v-if="!empty">
<h3 class="module-activity__module-name">{{moduleTitle}}</h3> <h3 class="module-activity__module-name">{{module.topic.title}}</h3>
<h2 class="module-activity__title">{{title}}</h2> <h2 class="module-activity__title">{{module.metaTitle}} - {{module.title}}</h2>
<div class="module-activity__tasks activity-tasks"> <div class="module-activity__tasks activity-tasks">
<h4 class="activity-tasks__title">Meine Ergebnisse</h4> <div class="module-activity__entry module-activity-entry"
<ol class="activity-tasks__task-list task-list"> v-for="submission in module.mySubmissions"
<li v-for="activity in activities" :key="activity.key" class="task-list__item task-item"> :key="submission.id"
<h5 class="task-item__title">{{activity.assignmentTitle}}</h5> @click="goToAssignment(submission.assignment.id)">
<p class="task-item__submission">{{activity.answer}}</p> <h3 class="module-activity-entry__title">Aufgabe & Ergebnis</h3>
<a href="#" @click="goToAssignment(activity)"><chevron-right class="task-item__chevron"></chevron-right></a> <p class="module-activity-entry__text">
</li> {{submission.text}}
</ol> </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>
</div> </div>
</template> </template>
<script> <script>
import { mapActions } from 'vuex' import {mapActions} from 'vuex'
import ChevronRight from '@/components/icons/ChevronRight'; import ContentBookmark from '@/components/profile/ContentBookmark';
export default { export default {
props: ['metaTitle', 'title', 'activities', 'topic', 'slug'], props: ['module'],
components: {ChevronRight}, components: {
ContentBookmark
},
computed: { computed: {
moduleTitle () { empty() {
return `${this.topic.title} - ${this.metaTitle}` 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: { methods: {
...mapActions(['scrollToAssignmentId']), ...mapActions(['scrollToAssignmentId']),
goToAssignment (activity) { goToAssignment(id) {
const url = `/module/${this.slug}/`; const url = `/module/${this.module.slug}/`;
this.scrollToAssignmentId(activity.assignmentId); this.scrollToAssignmentId(id);
this.$router.push(url); this.$router.push(url);
} }
} }
@ -44,8 +88,6 @@
@import "@/styles/_mixins.scss"; @import "@/styles/_mixins.scss";
.module-activity { .module-activity {
@include widget-shadow;
padding: $medium-spacing;
/* used for text ellipis... somehow https://css-flexbox-text-ellipsis.dinhquangtrung.net/ just does not work */ /* used for text ellipis... somehow https://css-flexbox-text-ellipsis.dinhquangtrung.net/ just does not work */
@ -64,20 +106,17 @@
} }
&__module-name { &__module-name {
@include small-text; @include regular-text;
color: $color-silver-dark; margin-bottom: $small-spacing;
} }
}
.activity-tasks {
&__title { &__title {
background-color: $color-brand-light; @include heading-2;
padding: $small-spacing $medium-spacing; }
border-radius: $default-border-radius;
&--alternative { &__entry {
background-color: $color-accent-1-light; padding: $small-spacing 0;
} border-bottom: 1px solid $color-silver;
} }
} }
@ -90,7 +129,7 @@
$line-height: 50px; $line-height: 50px;
&__title { &__title {
&::after { &::after {
content: ":" content: ":"
} }
margin-right: $medium-spacing; margin-right: $medium-spacing;

83
client/src/graphql/gql/myActivity.gql
View File

@ -1,22 +1,83 @@
query { query MyActivityQuery {
myActivity { myActivity {
edges { edges {
node { node {
id id
text title
assignment { slug
id metaTitle
topic {
title title
module { }
title mySubmissions {
metaTitle edges {
slug node {
id id
topic { text
title 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
}
}
} }
} }
} }

31
client/src/pages/activity.vue
View File

@ -2,7 +2,8 @@
<div class="activity"> <div class="activity">
<h1 class="activity__header">Meine Aktivitäten</h1> <h1 class="activity__header">Meine Aktivitäten</h1>
<div class="modules"> <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>
</div> </div>
</template> </template>
@ -18,7 +19,7 @@
}, },
apollo: { apollo: {
submissions: { modules: {
query: MY_ACTIVITY_QUERY, query: MY_ACTIVITY_QUERY,
update(data) { update(data) {
return this.$getRidOfEdges(data).myActivity; return this.$getRidOfEdges(data).myActivity;
@ -28,31 +29,7 @@
data() { data() {
return { return {
submissions: [] modules: []
}
},
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
} }
} }
} }