117 lines
2.7 KiB
Vue
117 lines
2.7 KiB
Vue
<template>
|
|
<div
|
|
class="instrument-activity"
|
|
v-if="!empty">
|
|
<h3 class="instrument-activity__module-name">{{ type }}</h3>
|
|
<h2 class="instrument-activity__title">{{ instrument.title }}</h2>
|
|
<div class="instrument-activity__tasks activity-tasks">
|
|
<activity-entry
|
|
:key="bookmark.id"
|
|
title="Lesezeichen"
|
|
class="instrument-activity__entry"
|
|
v-for="bookmark in bookmarks"
|
|
@link="goTo(bookmark.uuid)">
|
|
<content-bookmark :bookmark="bookmark"/>
|
|
</activity-entry>
|
|
<activity-entry
|
|
:key="note.id"
|
|
title="Notiz"
|
|
class="instrument-activity__entry"
|
|
v-for="note in notes"
|
|
@link="goTo(note.id)">
|
|
{{ note.text }}
|
|
</activity-entry>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import {mapActions} from 'vuex';
|
|
import ContentBookmark from '@/components/profile/ContentBookmark';
|
|
import ActivityEntry from '@/components/profile/ActivityEntry';
|
|
|
|
import SCROLL_TO_MUTATION from '@/graphql/gql/local/mutations/scrollTo.gql';
|
|
import instrumentType from '@/helpers/instrumentType';
|
|
|
|
export default {
|
|
props: ['instrument', 'filter'],
|
|
components: {
|
|
ContentBookmark,
|
|
ActivityEntry
|
|
},
|
|
computed: {
|
|
empty() {
|
|
return !this.instrument.bookmarks.length;
|
|
},
|
|
notes() {
|
|
return this.applyFilter('notes') ? this.instrument.bookmarks
|
|
.filter(b => b.note)
|
|
.map(b => b.note) : [];
|
|
},
|
|
bookmarks() {
|
|
return this.applyFilter('bookmarks') ? this.instrument.bookmarks : [];
|
|
},
|
|
type() {
|
|
return instrumentType(this.instrument);
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions(['scrollToAssignmentId']),
|
|
goTo(scrollTo) {
|
|
const url = `/instrument/${this.instrument.slug}/`;
|
|
this.$apollo.mutate({
|
|
mutation: SCROLL_TO_MUTATION,
|
|
variables: {
|
|
scrollTo
|
|
}
|
|
});
|
|
this.$router.push(url);
|
|
},
|
|
applyFilter(filterCriteria) {
|
|
return !this.filter || this.filter === filterCriteria;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_mixins.scss";
|
|
|
|
.instrument-activity {
|
|
max-width: 640px;
|
|
|
|
@include desktop {
|
|
max-width: 1020px;
|
|
}
|
|
|
|
@media (max-width: 639px) {
|
|
max-width: 400px;
|
|
}
|
|
|
|
@media (max-width: 401px) {
|
|
max-width: 320px;
|
|
}
|
|
|
|
margin-bottom: 2*$large-spacing;
|
|
|
|
&__module-name {
|
|
@include regular-text;
|
|
margin-bottom: $small-spacing;
|
|
}
|
|
|
|
&__title {
|
|
@include heading-2;
|
|
}
|
|
|
|
&__entry {
|
|
&:first-of-type {
|
|
|
|
border-top: 1px solid $color-silver;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|