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

Send new content block to server, add route

This commit is contained in:
Ramon Wenger 2022-01-24 17:51:53 +01:00
parent c6c56ac851
commit a31c644553
6 changed files with 148 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
client/src/components/AddContentButton.vue
View File

@ -10,6 +10,11 @@
</template>
<script>
import {
CREATE_CONTENT_BLOCK_AFTER_PAGE,
CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
} from '@/router/module.names';
const AddPointer = () => import(/* webpackChunkName: "icons" */'@/components/icons/AddPointer');
export default {
@ -19,15 +24,31 @@
AddPointer
},
methods: {
addContent() {
if (this.parent && this.parent.__typename === 'ObjectiveGroupNode') {
this.$store.dispatch('addObjective', this.parent.id);
} else {
this.$store.dispatch('addContentBlock', {
after: this.after ? this.after.id : undefined,
parent: this.parent ? this.parent.id : undefined
});
let route;
const slug = this.$route.params.slug;
if (this.after.id) {
route = {
name: CREATE_CONTENT_BLOCK_AFTER_PAGE,
params: {
after: this.after.id,
slug
}
};
} else {
route = {
name: CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
params: {
parent: this.parent.id
}
};
}
this.$router.push(route);
}
}
}
@ -35,8 +56,7 @@
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
@import "~styles/helpers";
.add-content {
display: none;

5
client/src/components/Chapter.vue
View File

@ -107,6 +107,7 @@
if (this.chapter && this.chapter.bookmark) {
return this.chapter.bookmark.note;
}
return false;
},
titleGreyedOut() {
return this.textHidden(CHAPTER_TITLE_TYPE) && this.editModule;
@ -141,7 +142,7 @@
bookmarked,
},
},
update: (store, response) => {
update: (store) => {
const query = CHAPTER_QUERY;
const variables = {id};
const data = store.readQuery({
@ -199,7 +200,7 @@
</script>
<style scoped lang="scss">
@import "@/styles/_mixins.scss";
@import "~styles/helpers";
.chapter {
position: relative;

2
client/src/components/content-block-form/ContentElement.vue
View File

@ -213,12 +213,10 @@
}
if (convertToList) {
console.log(el);
el = {
type: 'content_list_item',
contents: [el]
};
console.log(el);
}
this.update(el);
},

149
client/src/pages/createContentBlock.vue
View File

@ -7,26 +7,28 @@
<toggle
:bordered="false"
:checked="true"
:checked="contentBlock.isAssignment"
class="create-content-block__task-toggle"
label="Inhaltsblock als Auftrag formatieren"
@input="contentBlock.isAssignment=$event"
/>
<content-form-section title="Titel">
<input-with-label
:value="title"
:value="contentBlock.title"
label="Name"
placeholder="z.B. Auftrag 3"
@input="title=$event"
@input="contentBlock.title=$event"
/>
</content-form-section>
<add-content-link
class="create-content-block__segment"
@click="addBlock(0)"
@click="addBlock(-1)"
/>
<div
class="content-list content-list--creator create-content-block__segment"
v-for="(block, outer) in blocks"
v-for="(block, outer) in contentBlock.contents"
:key="block.id"
>
<ol
@ -66,7 +68,10 @@
</div>
<footer class="create-content-block__footer">
<a class="button button--primary">Speichern</a>
<a
class="button button--primary"
@click="save(contentBlock)"
>Speichern</a>
<a class="button">Abbrechen</a>
</footer>
</div>
@ -81,7 +86,22 @@
import AddContentLink from '@/components/content-block-form/AddContentLink';
import ContentElement from '@/components/content-block-form/ContentElement';
import NEW_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/addContentBlock.gql';
import {setUserBlockType} from '@/helpers/content-block';
import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
export default Vue.extend({
props: {
parent: {
type: String,
default: ''
},
after: {
type: String,
default: ''
}
},
components: {
ContentElement,
AddContentLink,
@ -91,8 +111,10 @@
},
data: () => ({
title: '',
blocks: [
contentBlock: {
title: '',
isAssignment: false,
contents: [
{
id: 23,
type: 'content_list_item',
@ -102,27 +124,24 @@
}
]
}
],
]},
}),
mounted() {
// this.addBlock(0);
},
methods: {
update(index, element, parent) {
console.log(index, element, parent);
update(index, element, parent) {
if (parent === undefined) {
console.log('parent undefined');
this.blocks = [
...this.blocks.slice(0, index),
this.contentBlock.contents = [
...this.contentBlock.contents.slice(0, index),
element,
...this.blocks.slice(index + 1)
...this.contentBlock.contents.slice(index + 1)
];
} else {
console.log('parent yes');
const parentBlock = this.blocks[parent];
this.blocks = [
...this.blocks.slice(0, parent),
const parentBlock = this.contentBlock.contents[parent];
this.contentBlock.contents = [
...this.contentBlock.contents.slice(0, parent),
{
...parentBlock,
contents: [
@ -131,20 +150,15 @@
...parentBlock.contents.slice(index + 1),
]
},
...this.blocks.slice(parent + 1)
...this.contentBlock.contents.slice(parent + 1)
];
}
console.log('updating', index, element);
// this.blocks.splice(index, 1, element);
},
addBlock(outerIndex, innerIndex) {
console.log('add block', outerIndex, innerIndex);
// this.blocks.splice(outerIndex, 0, {});
addBlock(afterOuterIndex, innerIndex) {
if (innerIndex !== undefined) {
console.log('inner');
const block = this.blocks[outerIndex];
this.blocks = [
...this.blocks.slice(0, outerIndex),
const block = this.contentBlock.contents[afterOuterIndex];
this.contentBlock.contents = [
...this.contentBlock.contents.slice(0, afterOuterIndex),
{
...block,
contents: [
@ -156,42 +170,73 @@
...block.contents.slice(innerIndex + 1)
]
},
...this.blocks.slice(outerIndex + 1)
...this.contentBlock.contents.slice(afterOuterIndex + 1)
];
} else {
console.log('outer');
this.blocks = [
...this.blocks.slice(0, outerIndex + 1),
this.contentBlock.contents = [
...this.contentBlock.contents.slice(0, afterOuterIndex+1),
{
id: -1,
type: 'content-block-element-chooser-widget',
includeListOption: true
},
...this.blocks.slice(outerIndex + 1)
...this.contentBlock.contents.slice(afterOuterIndex+1)
];
}
},
remove(outer, inner) {
if (inner === undefined) {
this.blocks = [
...this.blocks.slice(0, outer),
...this.blocks.slice(outer + 1)
];
} else {
this.blocks = [
...this.blocks.slice(0, outer),
{
...this.blocks[outer],
contents: [
...this.blocks[outer].contents.slice(0, inner),
...this.blocks[outer].contents.slice(inner+1),
]
},
...this.blocks.slice(outer + 1)
];
if (inner === undefined) {
this.contentBlock.contents = [
...this.contentBlock.contents.slice(0, outer),
...this.contentBlock.contents.slice(outer + 1)
];
} else {
this.contentBlock.contents = [
...this.contentBlock.contents.slice(0, outer),
{
...this.contentBlock.contents[outer],
contents: [
...this.contentBlock.contents[outer].contents.slice(0, inner),
...this.contentBlock.contents[outer].contents.slice(inner+1),
]
},
...this.contentBlock.contents.slice(outer + 1)
];
}
}
},
save({title, contents, isAssignment}) {
const contentBlock = {
title: title,
contents: contents.filter(value => Object.keys(value).length > 0),
type: setUserBlockType(isAssignment),
};
let input;
const { parent, after, slug} = this.$route.params;
if(after) {
input = {
contentBlock,
after
};
} else {
input = {
contentBlock,
parent
};
}
this.$apollo.mutate({
mutation: NEW_CONTENT_BLOCK_MUTATION,
variables: {
input
},
refetchQueries: [{
query: MODULE_DETAILS_QUERY,
variables: {
slug
}
}]
});
}
},
});
</script>

2
client/src/router/module.names.js
View File

@ -4,3 +4,5 @@ export const MODULE_SETTINGS_PAGE = 'module-settings';
export const VISIBILITY_PAGE = 'visibility';
export const SNAPSHOT_LIST = 'snapshot-list';
export const SNAPSHOT_DETAIL = 'snapshot-detail';
export const CREATE_CONTENT_BLOCK_AFTER_PAGE = 'create-content-block-after';
export const CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE = 'create-content-block-under-parent';

28
client/src/router/module.routes.js
View File

@ -5,6 +5,7 @@ import {
SNAPSHOT_LIST,
SUBMISSIONS_PAGE,
VISIBILITY_PAGE,
CREATE_CONTENT_BLOCK_PAGE, CREATE_CONTENT_BLOCK_AFTER_PAGE, CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
} from '@/router/module.names';
import {LAYOUT_SIMPLE} from '@/router/core.constants';
import createContentBlock from '@/pages/createContentBlock';
@ -17,6 +18,17 @@ const settingsPage = () => import(/* webpackChunkName: "modules" */'@/pages/modu
const snapshots = () => import(/* webpackChunkName: "modules" */'@/pages/snapshot/snapshots');
const snapshot = () => import(/* webpackChunkName: "modules" */'@/pages/snapshot/snapshot');
const createContentBlockRouteFragment = {
component: createContentBlock,
meta: {
// layout: LAYOUT_SIMPLE,
hideFooter: true,
hideHeader: true,
showSubNavigation: true
},
props: true
};
export default [
{
path: '/module/:slug',
@ -74,15 +86,15 @@ export default [
},
},
{
path: 'add',
component: createContentBlock,
meta: {
// layout: LAYOUT_SIMPLE,
hideFooter: true,
hideHeader: true,
showSubNavigation: true
},
...createContentBlockRouteFragment,
path: 'add-after/:after',
name: CREATE_CONTENT_BLOCK_AFTER_PAGE,
},
{
...createContentBlockRouteFragment,
path: 'add-under-parent/:parent',
name: CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
}
],
},
];