Add visibility menu to Chapter component
This commit is contained in:
parent
fa12fb2112
commit
d97ad231cc
|
|
@ -2,7 +2,20 @@
|
|||
<div
|
||||
:data-scrollto="chapter.id"
|
||||
class="chapter">
|
||||
<h3 :id="'chapter-' + index">{{ chapter.title }}</h3>
|
||||
<div
|
||||
:class="{'hideable-element--hidden': titleGreyedOut}"
|
||||
class="hideable-element"
|
||||
v-if="!titleHidden">
|
||||
<h3
|
||||
:id="'chapter-' + index"
|
||||
>{{ chapter.title }}</h3>
|
||||
</div>
|
||||
|
||||
<visibility-action
|
||||
:block="chapter"
|
||||
type="chapter-title"
|
||||
v-if="editModule"
|
||||
/>
|
||||
|
||||
<bookmark-actions
|
||||
:bookmarked="chapter.bookmark"
|
||||
|
|
@ -12,9 +25,22 @@
|
|||
@edit-note="editNote"
|
||||
@bookmark="bookmark(!chapter.bookmark)"
|
||||
/>
|
||||
<p class="chapter__description intro">
|
||||
{{ chapter.description }}
|
||||
</p>
|
||||
<div
|
||||
:class="{'hideable-element--hidden': descriptionGreyedOut}"
|
||||
class="chapter__intro intro hideable-element"
|
||||
v-if="!descriptionHidden"
|
||||
>
|
||||
<visibility-action
|
||||
:block="chapter"
|
||||
:chapter="true"
|
||||
type="chapter-description"
|
||||
v-if="editModule"
|
||||
/>
|
||||
<p
|
||||
class="chapter__description">
|
||||
{{ chapter.description }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<add-content-button
|
||||
:parent="chapter"
|
||||
|
|
@ -29,132 +55,155 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import ContentBlock from '@/components/ContentBlock';
|
||||
import AddContentButton from '@/components/AddContentButton';
|
||||
import BookmarkActions from '@/components/notes/BookmarkActions';
|
||||
import ContentBlock from '@/components/ContentBlock';
|
||||
import AddContentButton from '@/components/AddContentButton';
|
||||
import BookmarkActions from '@/components/notes/BookmarkActions';
|
||||
import VisibilityAction from '@/components/visibility/VisibilityAction';
|
||||
|
||||
import {mapState} from 'vuex';
|
||||
import {isHidden} from '@/helpers/content-block';
|
||||
import {meQuery} from '@/graphql/queries';
|
||||
import {mapState} from 'vuex';
|
||||
import {hidden} from '@/helpers/visibility';
|
||||
import {CONTENT_TYPE, CHAPTER_DESCRIPTION_TYPE, CHAPTER_TITLE_TYPE} from '@/consts/types';
|
||||
|
||||
import UPDATE_CHAPTER_BOOKMARK_MUTATION from '@/graphql/gql/mutations/updateChapterBookmark.gql';
|
||||
import CHAPTER_QUERY from '@/graphql/gql/chapterQuery.gql';
|
||||
import UPDATE_CHAPTER_BOOKMARK_MUTATION from '@/graphql/gql/mutations/updateChapterBookmark.gql';
|
||||
import CHAPTER_QUERY from '@/graphql/gql/chapterQuery.gql';
|
||||
|
||||
export default {
|
||||
props: ['chapter', 'index'],
|
||||
import me from '@/mixins/me';
|
||||
|
||||
components: {
|
||||
BookmarkActions,
|
||||
ContentBlock,
|
||||
AddContentButton
|
||||
},
|
||||
export default {
|
||||
props: ['chapter', 'index'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
me: {}
|
||||
};
|
||||
},
|
||||
mixins: [me],
|
||||
|
||||
computed: {
|
||||
...mapState(['editModule']),
|
||||
filteredContentBlocks() {
|
||||
if (!(this.chapter && this.chapter.contentBlocks)) {
|
||||
return [];
|
||||
}
|
||||
if (this.editModule) {
|
||||
return this.chapter.contentBlocks;
|
||||
}
|
||||
return this.chapter.contentBlocks.filter(contentBlock => !isHidden(contentBlock, this.schoolClass));
|
||||
},
|
||||
schoolClass() {
|
||||
return this.me.selectedClass;
|
||||
},
|
||||
note() {
|
||||
if (!(this.chapter && this.chapter.bookmark)) {
|
||||
return;
|
||||
}
|
||||
return this.chapter.bookmark.note;
|
||||
components: {
|
||||
BookmarkActions,
|
||||
VisibilityAction,
|
||||
ContentBlock,
|
||||
AddContentButton
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['editModule']),
|
||||
filteredContentBlocks() {
|
||||
if (!(this.chapter && this.chapter.contentBlocks)) {
|
||||
return [];
|
||||
}
|
||||
if (this.editModule) {
|
||||
return this.chapter.contentBlocks;
|
||||
}
|
||||
return this.chapter.contentBlocks.filter(contentBlock => !hidden({
|
||||
block: contentBlock,
|
||||
schoolClass: this.schoolClass,
|
||||
type: CONTENT_TYPE
|
||||
}));
|
||||
},
|
||||
|
||||
methods: {
|
||||
bookmark(bookmarked) {
|
||||
const id = this.chapter.id;
|
||||
this.$apollo.mutate({
|
||||
mutation: UPDATE_CHAPTER_BOOKMARK_MUTATION,
|
||||
variables: {
|
||||
input: {
|
||||
chapter: id,
|
||||
bookmarked
|
||||
}
|
||||
},
|
||||
update: (store, response) => {
|
||||
const query = CHAPTER_QUERY;
|
||||
const variables = {id};
|
||||
const data = store.readQuery({
|
||||
query,
|
||||
variables
|
||||
});
|
||||
|
||||
const chapter = data.chapter;
|
||||
|
||||
if (bookmarked) {
|
||||
chapter.bookmark = {
|
||||
__typename: 'ChapterBookmarkNode',
|
||||
note: null
|
||||
};
|
||||
} else {
|
||||
chapter.bookmark = null;
|
||||
}
|
||||
|
||||
data.chapter = chapter;
|
||||
|
||||
store.writeQuery({
|
||||
data,
|
||||
query,
|
||||
variables
|
||||
});
|
||||
},
|
||||
optimisticResponse: {
|
||||
__typename: 'Mutation',
|
||||
updateChapterBookmark: {
|
||||
__typename: 'UpdateChapterBookmarkPayload',
|
||||
success: true
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
addNote(id) {
|
||||
this.$store.dispatch('addNote', {
|
||||
content: id,
|
||||
parent: this.chapter.id
|
||||
});
|
||||
},
|
||||
editNote() {
|
||||
this.$store.dispatch('editNote', this.chapter.bookmark.note);
|
||||
},
|
||||
note() {
|
||||
if (!(this.chapter && this.chapter.bookmark)) {
|
||||
return;
|
||||
}
|
||||
return this.chapter.bookmark.note;
|
||||
},
|
||||
|
||||
apollo: {
|
||||
me: meQuery
|
||||
titleGreyedOut() {
|
||||
return this.textHidden(CHAPTER_TITLE_TYPE) && this.editModule;
|
||||
},
|
||||
// never hidden when editing the module
|
||||
titleHidden() {
|
||||
return this.textHidden(CHAPTER_TITLE_TYPE) && !this.editModule;
|
||||
},
|
||||
descriptionGreyedOut() {
|
||||
return this.textHidden(CHAPTER_DESCRIPTION_TYPE) && this.editModule;
|
||||
},
|
||||
// never hidden when editing the module
|
||||
descriptionHidden() {
|
||||
return this.textHidden(CHAPTER_DESCRIPTION_TYPE) && !this.editModule;
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
bookmark(bookmarked) {
|
||||
const id = this.chapter.id;
|
||||
this.$apollo.mutate({
|
||||
mutation: UPDATE_CHAPTER_BOOKMARK_MUTATION,
|
||||
variables: {
|
||||
input: {
|
||||
chapter: id,
|
||||
bookmarked
|
||||
}
|
||||
},
|
||||
update: (store, response) => {
|
||||
const query = CHAPTER_QUERY;
|
||||
const variables = {id};
|
||||
const data = store.readQuery({
|
||||
query,
|
||||
variables
|
||||
});
|
||||
|
||||
const chapter = data.chapter;
|
||||
|
||||
if (bookmarked) {
|
||||
chapter.bookmark = {
|
||||
__typename: 'ChapterBookmarkNode',
|
||||
note: null
|
||||
};
|
||||
} else {
|
||||
chapter.bookmark = null;
|
||||
}
|
||||
|
||||
data.chapter = chapter;
|
||||
|
||||
store.writeQuery({
|
||||
data,
|
||||
query,
|
||||
variables
|
||||
});
|
||||
},
|
||||
optimisticResponse: {
|
||||
__typename: 'Mutation',
|
||||
updateChapterBookmark: {
|
||||
__typename: 'UpdateChapterBookmarkPayload',
|
||||
success: true
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
addNote(id) {
|
||||
this.$store.dispatch('addNote', {
|
||||
content: id,
|
||||
parent: this.chapter.id
|
||||
});
|
||||
},
|
||||
editNote() {
|
||||
this.$store.dispatch('editNote', this.chapter.bookmark.note);
|
||||
},
|
||||
textHidden(type) {
|
||||
return hidden({
|
||||
block: this.chapter,
|
||||
schoolClass: this.schoolClass,
|
||||
type
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_mixins.scss";
|
||||
@import "@/styles/_mixins.scss";
|
||||
|
||||
.chapter {
|
||||
position: relative;
|
||||
.chapter {
|
||||
position: relative;
|
||||
|
||||
&__bookmark-actions {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
&__description {
|
||||
@include lead-paragraph;
|
||||
|
||||
margin-bottom: $large-spacing;
|
||||
}
|
||||
&__bookmark-actions {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
&__intro {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__description {
|
||||
@include lead-paragraph;
|
||||
|
||||
margin-bottom: $large-spacing;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue