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

Update async component definitions

This commit is contained in:
Ramon Wenger 2022-03-24 17:31:18 +01:00
parent 5bc0c29ea0
commit 39e7d27587
73 changed files with 4697 additions and 4276 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,98 +1,105 @@
<template>
<div class="add-content">
<a class="add-content__button" @click="addContent">
<a
class="add-content__button"
@click="addContent"
>
<add-pointer class="add-content__icon" />
</a>
</div>
</template>
<script>
import { CREATE_CONTENT_BLOCK_AFTER_PAGE, CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE } from '@/router/module.names';
import {
CREATE_CONTENT_BLOCK_AFTER_PAGE,
CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
} from '@/router/module.names';
import {defineAsyncComponent} from 'vue';
const AddPointer = () => import(/* webpackChunkName: "icons" */ '@/components/icons/AddPointer');
const AddPointer = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/AddPointer'));
export default {
props: {
where: {
type: Object,
validator(prop) {
return (
Object.prototype.hasOwnProperty.call(prop, 'after') || Object.prototype.hasOwnProperty.call(prop, 'parent')
);
export default {
props: {
where: {
type: Object,
validator(prop) {
return Object.prototype.hasOwnProperty.call(prop, 'after' )
|| Object.prototype.hasOwnProperty.call(prop, 'parent');
}
},
},
},
components: {
AddPointer,
},
components: {
AddPointer
},
computed: {
parent() {
return this.where.parent;
},
after() {
return this.where.after;
},
isObjectiveGroup() {
return this.parent && this.parent.__typename === 'ObjectiveGroupNode';
},
slug() {
return this.$route.params.slug;
},
},
methods: {
addContent() {
if (this.isObjectiveGroup) {
this.$modal.open('new-objective-wizard', { parent: this.parent.id });
} else {
let route;
if (this.after && this.after.id) {
route = {
name: CREATE_CONTENT_BLOCK_AFTER_PAGE,
params: {
after: this.after.id,
slug: this.slug,
},
};
} else {
route = {
name: CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
params: {
parent: this.parent.id,
},
};
}
this.$router.push(route);
computed: {
parent() {
return this.where.parent;
},
after() {
return this.where.after;
},
isObjectiveGroup() {
return this.parent && this.parent.__typename === 'ObjectiveGroupNode';
},
slug() {
return this.$route.params.slug;
}
},
},
};
methods: {
addContent() {
if (this.isObjectiveGroup) {
this.$modal.open('new-objective-wizard', {parent: this.parent.id});
} else {
let route;
if (this.after && this.after.id) {
route = {
name: CREATE_CONTENT_BLOCK_AFTER_PAGE,
params: {
after: this.after.id,
slug: this.slug
}
};
} else {
route = {
name: CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
params: {
parent: this.parent.id
}
};
}
this.$router.push(route);
}
}
}
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.add-content {
display: none;
position: relative;
@include desktop {
display: flex;
.add-content {
display: none;
position: relative;
@include desktop {
display: flex;
}
z-index: 1;
justify-content: flex-end;
&__button {
margin-right: -85px;
cursor: pointer;
display: inline-grid;
}
&__icon {
width: 40px;
fill: $color-silver-dark;
}
}
z-index: 1;
justify-content: flex-end;
&__button {
margin-right: -85px;
cursor: pointer;
display: inline-grid;
}
&__icon {
width: 40px;
fill: $color-silver-dark;
}
}
</style>

50
client/src/components/AddContentElement.vue
View File

@ -1,38 +1,42 @@
<template>
<div class="add-content-element" @click="$emit('add-element', index)">
<div
class="add-content-element"
@click="$emit('add-element', index)"
>
<add-icon class="add-content-element__icon" />
</div>
</template>
<script>
const AddIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/AddIcon');
import {defineAsyncComponent} from 'vue';
const AddIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/AddIcon'));
export default {
props: ['index'],
export default {
props: ['index'],
components: {
AddIcon,
},
};
components: {
AddIcon
}
};
</script>
<style scoped lang="scss">
@import '@/styles/_variables.scss';
@import "@/styles/_variables.scss";
.add-content-element {
display: flex;
justify-content: center;
border-bottom: 2px solid $color-silver-dark;
margin-bottom: 21px + 25px;
cursor: pointer;
.add-content-element {
display: flex;
justify-content: center;
border-bottom: 2px solid $color-silver-dark;
margin-bottom: 21px + 25px;
cursor: pointer;
&__icon {
width: 40px;
height: 40px;
fill: $color-silver-dark;
margin-bottom: -21px;
background-color: $color-white;
border-radius: 50px;
&__icon {
width: 40px;
height: 40px;
fill: $color-silver-dark;
margin-bottom: -21px;
background-color: $color-white;
border-radius: 50px;
}
}
}
</style>

110
client/src/components/AddWidget.vue
View File

@ -11,71 +11,69 @@
</template>
<script>
const AddIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/AddIcon.vue');
import {defineAsyncComponent} from 'vue';
const AddIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/AddIcon.vue'));
export default {
props: {
route: {
type: String,
default: null,
export default {
props: {
route: {
type: String,
default: null
},
reverse: { // use reverse colors
type: Boolean,
default: false
},
click: {
type: Function,
default: null
}
},
reverse: {
// use reverse colors
type: Boolean,
default: false,
},
click: {
type: Function,
default: null,
},
},
components: {
AddIcon,
},
components: {
AddIcon
},
computed: {
component() {
// only use the router link if the route prop is provided, otherwise render a normal anchor tag
return this.route ? 'router-link' : 'a';
computed: {
component() {
// only use the router link if the route prop is provided, otherwise render a normal anchor tag
return this.route ? 'router-link' : 'a';
},
properties() {
return this.route ? {
to: this.route,
tag: 'div'
} : {};
}
},
properties() {
return this.route
? {
to: this.route,
tag: 'div',
}
: {};
},
},
};
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.add-widget {
display: none;
align-items: center;
justify-content: center;
@include widget-shadow;
cursor: pointer;
.add-widget {
display: none;
align-items: center;
justify-content: center;
@include widget-shadow;
cursor: pointer;
@include desktop {
display: flex;
@include desktop {
display: flex;
}
&__add {
width: 80px;
fill: $color-silver-dark;
}
&--reverse {
@include widget-shadow-reverse;
}
&--reverse &__add {
fill: white;
}
}
&__add {
width: 80px;
fill: $color-silver-dark;
}
&--reverse {
@include widget-shadow-reverse;
}
&--reverse &__add {
fill: white;
}
}
</style>

3
client/src/components/BackLink.vue
View File

@ -12,8 +12,9 @@
import { MODULE_PAGE } from '@/router/module.names';
import { ROOMS_PAGE } from '@/router/room.names';
import { PROJECTS_PAGE } from '@/router/portfolio.names';
import {defineAsyncComponent} from 'vue';
const ChevronLeft = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronLeft');
const ChevronLeft = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronLeft'));
export default {
props: {

127
client/src/components/ColorChooser.vue
View File

@ -1,86 +1,93 @@
<template>
<div class="color-chooser">
<div
:class="{ 'color-chooser__color-wrapper--selected': selectedColor === color.name }"
:class="{'color-chooser__color-wrapper--selected': selectedColor === color.name}"
class="color-chooser__color-wrapper"
data-cy="color-select"
v-for="(color, index) in colors"
:key="index"
@click="$emit('input', color.name)"
>
<div :class="'color-chooser__color--' + color.name" class="color-chooser__color">
<tick class="color-chooser__selected-icon" v-if="selectedColor === color.name" />
<div
:class="'color-chooser__color--' + color.name"
class="color-chooser__color"
>
<tick
class="color-chooser__selected-icon"
v-if="selectedColor === color.name"
/>
</div>
</div>
</div>
</template>
<script>
const Tick = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Tick');
import {defineAsyncComponent} from 'vue';
const Tick = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Tick'));
export default {
props: ['selectedColor'],
export default {
props: ['selectedColor'],
components: {
Tick,
},
components: {
Tick
},
data() {
return {
colors: [
{
name: 'yellow',
},
{
name: 'blue',
},
{
name: 'red',
},
{
name: 'green',
},
],
};
},
};
data() {
return {
colors: [
{
name: 'yellow'
},
{
name: 'blue'
},
{
name: 'red'
},
{
name: 'green'
}
]
};
},
};
</script>
<style scoped lang="scss">
@import '@/styles/_variables.scss';
@import '@/styles/_mixins.scss';
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.color-chooser {
display: flex;
&__color-wrapper {
margin-right: 10px;
border-radius: 50px;
padding: 10px;
&--selected {
border: 1px solid $color-charcoal-dark;
}
}
&__selected-icon {
width: 17px;
fill: $color-charcoal-dark;
}
&__color {
width: 46px;
height: 46px;
border-radius: 23px;
.color-chooser {
display: flex;
justify-content: center;
@supports (display: grid) {
display: grid;
}
justify-items: center;
align-items: center;
@include skillbox-colors;
&__color-wrapper {
margin-right: 10px;
border-radius: 50px;
padding: 10px;
&--selected {
border: 1px solid $color-charcoal-dark;
}
}
&__selected-icon {
width: 17px;
fill: $color-charcoal-dark;
}
&__color {
width: 46px;
height: 46px;
border-radius: 23px;
display: flex;
justify-content: center;
@supports (display: grid) {
display: grid
}
justify-items: center;
align-items: center;
@include skillbox-colors;
}
}
}
</style>

618
client/src/components/ContentBlock.vue
View File

@ -1,20 +1,38 @@
<template>
<div
:class="{ 'hideable-element--greyed-out': hidden }"
:class="{'hideable-element--greyed-out': hidden}"
class="content-block__container hideable-element content-list__parent"
>
<div :class="specialClass" :style="instrumentStyle" class="content-block" data-cy="content-block">
<div class="block-actions" v-if="canEditModule && !isInstrumentBlock">
<user-widget v-bind="me" class="block-actions__user-widget content-block__user-widget" v-if="isMine" />
<div
:class="specialClass"
:style="instrumentStyle"
class="content-block"
data-cy="content-block"
>
<div
class="block-actions"
v-if="canEditModule && !isInstrumentBlock"
>
<user-widget
v-bind="me"
class="block-actions__user-widget content-block__user-widget"
v-if="isMine"
/>
<more-options-widget>
<li class="popover-links__link" v-if="!isInstrumentBlock">
<li
class="popover-links__link"
v-if="!isInstrumentBlock"
>
<popover-link
data-cy="duplicate-content-block-link"
text="Duplizieren"
@link-action="duplicateContentBlock(contentBlock)"
/>
</li>
<li class="popover-links__link" v-if="isMine">
<li
class="popover-links__link"
v-if="isMine"
>
<popover-link
data-cy="delete-content-block-link"
text="Löschen"
@ -22,13 +40,22 @@
/>
</li>
<li class="popover-links__link" v-if="isMine">
<popover-link text="Bearbeiten" @link-action="editContentBlock(contentBlock)" />
<li
class="popover-links__link"
v-if="isMine"
>
<popover-link
text="Bearbeiten"
@link-action="editContentBlock(contentBlock)"
/>
</li>
</more-options-widget>
</div>
<div class="content-block__visibility">
<visibility-action :block="contentBlock" v-if="canEditModule" />
<visibility-action
:block="contentBlock"
v-if="canEditModule"
/>
</div>
<h3
@ -39,7 +66,10 @@
>
{{ instrumentLabel }}
</h3>
<h4 class="content-block__title" v-if="!contentBlock.indent">
<h4
class="content-block__title"
v-if="!contentBlock.indent"
>
{{ contentBlock.title }}
</h4>
@ -55,107 +85,110 @@
/>
</div>
<add-content-button :where="{ after: contentBlock }" v-if="canEditModule" />
<add-content-button
:where="{after: contentBlock}"
v-if="canEditModule"
/>
</div>
</template>
<script>
import AddContentButton from '@/components/AddContentButton';
import MoreOptionsWidget from '@/components/MoreOptionsWidget';
import UserWidget from '@/components/UserWidget';
import VisibilityAction from '@/components/visibility/VisibilityAction';
import AddContentButton from '@/components/AddContentButton';
import MoreOptionsWidget from '@/components/MoreOptionsWidget';
import UserWidget from '@/components/UserWidget';
import VisibilityAction from '@/components/visibility/VisibilityAction';
import CHAPTER_QUERY from '@/graphql/gql/queries/chapterQuery.gql';
import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
import DUPLICATE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/duplicateContentBlock.gql';
import CHAPTER_QUERY from '@/graphql/gql/queries/chapterQuery.gql';
import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
import DUPLICATE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/duplicateContentBlock.gql';
import me from '@/mixins/me';
import me from '@/mixins/me';
import { hidden } from '@/helpers/visibility';
import { CONTENT_TYPE } from '@/consts/types';
import PopoverLink from '@/components/ui/PopoverLink';
import { insertAtIndex, removeAtIndex } from '@/graphql/immutable-operations';
import { EDIT_CONTENT_BLOCK_PAGE } from '@/router/module.names';
import { instrumentCategory } from '@/helpers/instrumentType';
import {hidden} from '@/helpers/visibility';
import {CONTENT_TYPE} from '@/consts/types';
import PopoverLink from '@/components/ui/PopoverLink';
import {insertAtIndex, removeAtIndex} from '@/graphql/immutable-operations';
import {EDIT_CONTENT_BLOCK_PAGE} from '@/router/module.names';
import {defineAsyncComponent} from 'vue';
import {instrumentCategory} from '@/helpers/instrumentType';
const ContentComponent = () =>
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ContentComponent');
const ContentComponent = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ContentComponent'));
export default {
name: 'ContentBlock',
props: {
contentBlock: {
type: Object,
default: () => ({}),
},
parent: {
type: Object,
default: () => ({}),
},
editMode: {
type: Boolean,
default: true,
},
},
mixins: [me],
export default {
name: 'ContentBlock',
props: {
contentBlock: {
type: Object,
default: () => ({}),
},
parent: {
type: Object,
default: () => ({}),
},
editMode: {
type: Boolean,
default: true,
},
},
components: {
PopoverLink,
ContentComponent,
AddContentButton,
VisibilityAction,
MoreOptionsWidget,
UserWidget,
},
mixins: [me],
computed: {
canEditModule() {
return !this.contentBlock.indent && this.editMode;
components: {
PopoverLink,
ContentComponent,
AddContentButton,
VisibilityAction,
MoreOptionsWidget,
UserWidget,
},
specialClass() {
return `content-block--${this.contentBlock.type.toLowerCase()}`;
},
isInstrumentBlock() {
return !!this.contentBlock.instrumentCategory;
},
// todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
instrumentStyle() {
if (this.isInstrumentBlock) {
return {
backgroundColor: this.contentBlock.instrumentCategory.background,
};
}
return {};
},
instrumentLabel() {
const contentType = this.contentBlock.type.toLowerCase();
if (contentType.startsWith('base')) {
// all legacy instruments start with `base`
return instrumentCategory(contentType);
}
if (this.isInstrumentBlock) {
return instrumentCategory(this.contentBlock.instrumentCategory.name);
}
return '';
},
// todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
instrumentLabelStyle() {
if (this.isInstrumentBlock) {
return {
color: this.contentBlock.instrumentCategory.foreground,
};
}
return {};
},
canEditContentBlock() {
return this.isMine && !this.contentBlock.indent;
},
isMine() {
return this.contentBlock.mine;
},
contentBlocksWithContentLists() {
/*
computed: {
canEditModule() {
return !this.contentBlock.indent && this.editMode;
},
specialClass() {
return `content-block--${this.contentBlock.type.toLowerCase()}`;
},
isInstrumentBlock() {
return !!this.contentBlock.instrumentCategory;
},
// todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
instrumentStyle() {
if (this.isInstrumentBlock) {
return {
backgroundColor: this.contentBlock.instrumentCategory.background
};
}
return {};
},
instrumentLabel() {
const contentType = this.contentBlock.type.toLowerCase();
if (contentType.startsWith('base')) { // all legacy instruments start with `base`
return instrumentCategory(contentType);
}
if (this.isInstrumentBlock) {
return instrumentCategory(this.contentBlock.instrumentCategory.name);
}
return '';
},
// todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
instrumentLabelStyle() {
if (this.isInstrumentBlock) {
return {
color: this.contentBlock.instrumentCategory.foreground
};
}
return {};
},
canEditContentBlock() {
return this.isMine && !this.contentBlock.indent;
},
isMine() {
return this.contentBlock.mine;
},
contentBlocksWithContentLists() {
/*
collects all content_list_items in content_lists:
{
text_block,
@ -169,238 +202,221 @@ export default {
text_block
}
*/
let contentList = [];
let newContent = this.contentBlock.contents.reduce((newContents, content, index) => {
// collect content_list_items
if (content.type === 'content_list_item') {
contentList = [...contentList, content];
if (index === this.contentBlock.contents.length - 1) {
// content is last element of contents array
let updatedContent = [...newContents, ...this.createContentListOrBlocks(contentList)];
return updatedContent;
}
return newContents;
} else {
// handle all other items and reset current content_list if necessary
if (contentList.length !== 0) {
newContents = [...newContents, ...this.createContentListOrBlocks(contentList), content];
contentList = [];
let contentList = [];
let newContent = this.contentBlock.contents.reduce((newContents, content, index) => {
// collect content_list_items
if (content.type === 'content_list_item') {
contentList = [...contentList, content];
if (index === this.contentBlock.contents.length - 1) { // content is last element of contents array
let updatedContent = [...newContents, ...this.createContentListOrBlocks(contentList)];
return updatedContent;
}
return newContents;
} else {
return [...newContents, content];
// handle all other items and reset current content_list if necessary
if (contentList.length !== 0) {
newContents = [...newContents, ...this.createContentListOrBlocks(contentList), content];
contentList = [];
return newContents;
} else {
return [...newContents, content];
}
}
}
}, []);
return Object.assign({}, this.contentBlock, {
contents: newContent,
});
}, []);
return Object.assign({}, this.contentBlock, {
contents: newContent,
});
},
hidden() {
return hidden({
block: this.contentBlock,
schoolClass: this.schoolClass,
type: CONTENT_TYPE,
});
},
root() {
// we need the root content block id, not the generated content block if inside a content list block
return this.contentBlock.root ? this.contentBlock.root : this.contentBlock.id;
},
},
hidden() {
return hidden({
block: this.contentBlock,
schoolClass: this.schoolClass,
type: CONTENT_TYPE,
});
},
root() {
// we need the root content block id, not the generated content block if inside a content list block
return this.contentBlock.root ? this.contentBlock.root : this.contentBlock.id;
},
},
methods: {
duplicateContentBlock({ id }) {
const parent = this.parent;
this.$apollo.mutate({
mutation: DUPLICATE_CONTENT_BLOCK_MUTATION,
variables: {
input: {
id,
},
},
update(
store,
{
data: {
duplicateContentBlock: { contentBlock },
methods: {
duplicateContentBlock({id}) {
const parent = this.parent;
this.$apollo.mutate({
mutation: DUPLICATE_CONTENT_BLOCK_MUTATION,
variables: {
input: {
id,
},
}
) {
if (contentBlock) {
const query = CHAPTER_QUERY;
const variables = {
id: parent.id,
};
const { chapter } = store.readQuery({ query, variables });
const index = chapter.contentBlocks.findIndex((contentBlock) => contentBlock.id === id);
const contentBlocks = insertAtIndex(chapter.contentBlocks, index, contentBlock);
const data = {
chapter: {
...chapter,
contentBlocks,
},
};
store.writeQuery({ query, variables, data });
}
},
});
},
editContentBlock(contentBlock) {
const route = {
name: EDIT_CONTENT_BLOCK_PAGE,
params: {
id: contentBlock.id,
},
};
this.$router.push(route);
},
deleteContentBlock(contentBlock) {
this.$modal
.open('confirm')
.then(() => {
this.doDeleteContentBlock(contentBlock);
})
.catch();
},
doDeleteContentBlock(contentBlock) {
const parent = this.parent;
const id = contentBlock.id;
this.$apollo.mutate({
mutation: DELETE_CONTENT_BLOCK_MUTATION,
variables: {
input: {
id,
},
},
update(
store,
{
data: {
deleteContentBlock: { success },
update(store, {data: {duplicateContentBlock: {contentBlock}}}) {
if (contentBlock) {
const query = CHAPTER_QUERY;
const variables = {
id: parent.id,
};
const {chapter} = store.readQuery({query, variables});
const index = chapter.contentBlocks.findIndex(contentBlock => contentBlock.id === id);
const contentBlocks = insertAtIndex(chapter.contentBlocks, index, contentBlock);
const data = {
chapter: {
...chapter,
contentBlocks,
},
};
store.writeQuery({query, variables, data});
}
},
});
},
editContentBlock(contentBlock) {
const route = {
name: EDIT_CONTENT_BLOCK_PAGE,
params: {
id: contentBlock.id,
},
};
this.$router.push(route);
},
deleteContentBlock(contentBlock) {
this.$modal.open('confirm').then(() => {
this.doDeleteContentBlock(contentBlock);
})
.catch();
},
doDeleteContentBlock(contentBlock) {
const parent = this.parent;
const id = contentBlock.id;
this.$apollo.mutate({
mutation: DELETE_CONTENT_BLOCK_MUTATION,
variables: {
input: {
id,
},
}
) {
if (success) {
const query = CHAPTER_QUERY;
const variables = {
id: parent.id,
};
const { chapter } = store.readQuery({ query, variables });
const index = chapter.contentBlocks.findIndex((contentBlock) => contentBlock.id === id);
const contentBlocks = removeAtIndex(chapter.contentBlocks, index);
const data = {
chapter: {
...chapter,
contentBlocks,
},
};
store.writeQuery({ query, variables, data });
}
},
});
},
createContentListOrBlocks(contentList) {
return [
{
},
update(store, {data: {deleteContentBlock: {success}}}) {
if (success) {
const query = CHAPTER_QUERY;
const variables = {
id: parent.id,
};
const {chapter} = store.readQuery({query, variables});
const index = chapter.contentBlocks.findIndex(contentBlock => contentBlock.id === id);
const contentBlocks = removeAtIndex(chapter.contentBlocks, index);
const data = {
chapter: {
...chapter,
contentBlocks,
},
};
store.writeQuery({query, variables, data});
}
},
});
},
createContentListOrBlocks(contentList) {
return [{
type: 'content_list',
contents: contentList,
id: contentList[0].id,
},
];
}];
},
},
},
};
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.content-block {
margin-bottom: $section-spacing;
position: relative;
&__container {
.content-block {
margin-bottom: $section-spacing;
position: relative;
}
&__title {
line-height: 1.5;
margin-top: -0.5rem; // to offset the 1.5 line height, it leaves a padding on top
}
&__instrument-label {
margin-bottom: $medium-spacing;
@include regular-text();
}
&__action-button {
cursor: pointer;
}
&__user-widget {
margin-right: 0;
}
&--base_communication {
@include content-box($color-accent-1-list);
.content-block__instrument-label {
color: $color-accent-1-dark;
&__container {
position: relative;
}
}
&--task {
@include light-border(bottom);
&__title {
line-height: 1.5;
margin-top: -0.5rem; // to offset the 1.5 line height, it leaves a padding on top
}
.content-block__title {
color: $color-brand;
margin-top: $default-padding;
margin-bottom: $large-spacing;
@include light-border(bottom);
&__instrument-label {
margin-bottom: $medium-spacing;
@include regular-text();
}
@include desktop {
margin-top: 0;
&__action-button {
cursor: pointer;
}
&__user-widget {
margin-right: 0;
}
&--base_communication {
@include content-box($color-accent-1-list);
.content-block__instrument-label {
color: $color-accent-1-dark;
}
}
}
&--base_society {
@include content-box($color-accent-2-list);
&--task {
@include light-border(bottom);
.content-block__instrument-label {
color: $color-accent-2-dark;
}
}
.content-block__title {
color: $color-brand;
margin-top: $default-padding;
margin-bottom: $large-spacing;
@include light-border(bottom);
&--base_interdisciplinary {
@include content-box($color-accent-4-list);
.content-block__instrument-label {
color: $color-accent-4-dark;
}
}
&--instrument {
@include content-box-base;
}
:deep(p) {
line-height: 1.5;
margin-bottom: 1em;
&:last-child {
margin-bottom: 0;
}
}
:deep(.text-block) {
ul {
@include list-parent;
@include desktop {
margin-top: 0;
}
}
}
li {
@include list-child;
&--base_society {
@include content-box($color-accent-2-list);
.content-block__instrument-label {
color: $color-accent-2-dark;
}
}
&--base_interdisciplinary {
@include content-box($color-accent-4-list);
.content-block__instrument-label {
color: $color-accent-4-dark;
}
}
&--instrument {
@include content-box-base;
}
/deep/ p {
line-height: 1.5;
margin-bottom: 1em;
&:last-child {
margin-bottom: 0;
}
}
/deep/ .text-block {
ul {
@include list-parent;
}
li {
@include list-child;
line-height: 1.5;
}
}
}
}
</style>

54
client/src/components/FullscreenInfographic.vue
View File

@ -1,35 +1,37 @@
<template>
<modal :fullscreen="true">
<component :value="value" :is="type" />
<component
:value="value"
:is="type"
/>
</modal>
</template>
<script>
import Modal from '@/components/Modal';
const InfogramBlock = () =>
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/InfogramBlock');
const GeniallyBlock = () =>
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/GeniallyBlock');
import Modal from '@/components/Modal';
import {defineAsyncComponent} from 'vue';
const InfogramBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/InfogramBlock'));
const GeniallyBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/GeniallyBlock'));
export default {
components: {
Modal,
InfogramBlock,
GeniallyBlock,
},
export default {
components: {
Modal,
InfogramBlock,
GeniallyBlock
},
computed: {
id() {
return this.$store.state.infographic.id;
},
type() {
return this.$store.state.infographic.type;
},
value() {
return {
id: this.id,
};
},
},
};
computed: {
id() {
return this.$store.state.infographic.id;
},
type() {
return this.$store.state.infographic.type;
},
value() {
return {
id: this.id
};
}
}
};
</script>

197
client/src/components/HeaderBar.vue
View File

@ -1,4 +1,10 @@
<a class="header-bar__sidebar-link" data-cy="open-sidebar-link" @click.stop="openSidebar('navigation')">
<template>
<header class="header-bar">
<a
class="header-bar__sidebar-link"
data-cy="open-sidebar-link"
@click.stop="openSidebar('navigation')"
>
<hamburger class="header-bar__sidebar-icon" />
</a>
<content-navigation class="header-bar__content-navigation" />
@ -22,112 +28,113 @@
</template>
<script>
import ContentNavigation from '@/components/book-navigation/ContentNavigation.vue';
import UserWidget from '@/components/UserWidget.vue';
import CurrentClass from '@/components/school-class/CurrentClass';
import ContentNavigation from '@/components/book-navigation/ContentNavigation.vue';
import UserWidget from '@/components/UserWidget.vue';
import CurrentClass from '@/components/school-class/CurrentClass';
import openSidebar from '@/mixins/open-sidebar';
import me from '@/mixins/me';
import openSidebar from '@/mixins/open-sidebar';
import me from '@/mixins/me';
import {defineAsyncComponent} from 'vue';
const Hamburger = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Hamburger');
const Hamburger = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Hamburger'));
export default {
mixins: [openSidebar, me],
export default {
mixins: [openSidebar, me],
components: {
ContentNavigation,
UserWidget,
CurrentClass,
Hamburger,
},
};
components: {
ContentNavigation,
UserWidget,
CurrentClass,
Hamburger,
},
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.header-bar {
display: flex;
flex-direction: row;
@supports (display: grid) {
display: grid;
}
align-items: center;
justify-content: space-between;
background-color: $color-white;
grid-auto-rows: 50px;
width: 100%;
max-width: 100vw;
grid-template-columns: 1fr 1fr 1fr;
@include desktop {
grid-template-columns: 50px 1fr auto;
grid-template-rows: 50px;
grid-auto-rows: auto;
}
/*
* For IE10+
*/
-ms-grid-columns: 1fr 1fr 1fr;
-ms-grid-rows: 50px 50px;
/*
* For IE10+
*/
& > :nth-child(1) {
-ms-grid-column: 1;
-ms-grid-row-align: center;
}
&__content-navigation {
grid-column: 2;
.header-bar {
display: flex;
flex-direction: row;
@supports (display: grid) {
display: grid;
}
align-items: center;
justify-content: space-between;
}
background-color: $color-white;
grid-auto-rows: 50px;
width: 100%;
max-width: 100vw;
&__sidebar-link {
padding: $small-spacing;
cursor: pointer;
}
&__sidebar-icon {
width: 30px;
height: 30px;
}
/*
* For IE10+
*/
& > :nth-child(3) {
-ms-grid-column: 3;
-ms-grid-row-align: center;
-ms-grid-column-align: end;
justify-self: end;
}
& > :nth-child(4) {
-ms-grid-row: 2;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
}
}
.user-header {
display: flex;
&__current-class {
margin-right: $large-spacing;
}
&__sidebar-link {
cursor: pointer;
display: none;
grid-template-columns: 1fr 1fr 1fr;
@include desktop {
display: flex;
grid-template-columns: 50px 1fr auto;
grid-template-rows: 50px;
grid-auto-rows: auto;
}
/*
* For IE10+
*/
-ms-grid-columns: 1fr 1fr 1fr;
-ms-grid-rows: 50px 50px;
/*
* For IE10+
*/
& > :nth-child(1) {
-ms-grid-column: 1;
-ms-grid-row-align: center;
}
&__content-navigation {
grid-column: 2;
justify-content: space-between;
}
&__sidebar-link {
padding: $small-spacing;
cursor: pointer;
}
&__sidebar-icon {
width: 30px;
height: 30px;
}
/*
* For IE10+
*/
& > :nth-child(3) {
-ms-grid-column: 3;
-ms-grid-row-align: center;
-ms-grid-column-align: end;
justify-self: end;
}
& > :nth-child(4) {
-ms-grid-row: 2;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
}
}
.user-header {
display: flex;
&__current-class {
margin-right: $large-spacing;
}
&__sidebar-link {
cursor: pointer;
display: none;
@include desktop {
display: flex;
}
}
}
}
</style>

100
client/src/components/HelpfulTooltip.vue
View File

@ -10,65 +10,67 @@
</template>
<script>
const InfoIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon');
import {defineAsyncComponent} from 'vue';
const InfoIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon'));
export default {
props: ['text'],
export default {
props: ['text'],
components: {
InfoIcon,
},
};
components: {
InfoIcon
}
};
</script>
<style scoped lang="scss">
@import '@/styles/_variables.scss';
@import '@/styles/_mixins.scss';
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.helpful-tooltip {
position: relative;
.helpful-tooltip {
position: relative;
&__icon {
width: 20px;
height: 20px;
fill: $color-silver-dark;
}
&__icon {
width: 20px;
height: 20px;
fill: $color-silver-dark;
}
&__tooltip {
visibility: hidden;
position: absolute;
left: 30px;
top: 0px;
width: 400px;
}
&__text {
display: inline-table;
width: auto;
background-color: $color-white;
border: 1px solid $color-silver-dark;
border-radius: 5px;
padding: $small-spacing;
@include small-text;
&::before {
content: '';
&__tooltip {
visibility: hidden;
position: absolute;
left: 0;
top: 18px;
margin-left: -1px;
border-left: 1px solid $color-silver-dark;
border-top: 1px solid $color-silver-dark;
left: 30px;
top: 0px;
width: 400px;
}
&__text {
display: inline-table;
width: auto;
background-color: $color-white;
width: 10px;
height: 10px;
transform: rotate(-45deg) translateY(-50%);
border: 1px solid $color-silver-dark;
border-radius: 5px;
padding: $small-spacing;
@include small-text;
&::before {
content: '';
position: absolute;
left: 0;
top: 18px;
margin-left: -1px;
border-left: 1px solid $color-silver-dark;
border-top: 1px solid $color-silver-dark;
background-color: $color-white;
width: 10px;
height: 10px;
transform: rotate(-45deg) translateY(-50%);
}
}
&:hover &__tooltip {
visibility: visible;
}
}
&:hover &__tooltip {
visibility: visible;
}
}
</style>

75
client/src/components/LoadingButton.vue
View File

@ -1,51 +1,58 @@
<template>
<button :disabled="loading || disabled" class="loading-button button button--primary button--big">
<button
:disabled="loading || disabled"
class="loading-button button button--primary button--big"
>
<template v-if="!loading">
{{ label }}
</template>
<loading-icon class="loading-button__icon" v-else />
<loading-icon
class="loading-button__icon"
v-else
/>
</button>
</template>
<script>
const LoadingIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/LoadingIcon');
import {defineAsyncComponent} from 'vue';
const LoadingIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/LoadingIcon'));
export default {
props: {
loading: {
type: Boolean,
default: false,
export default {
props: {
loading: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
label: {
type: String,
default: ''
}
},
disabled: {
type: Boolean,
default: false,
},
label: {
type: String,
default: '',
},
},
components: {
LoadingIcon,
},
};
components: {
LoadingIcon
}
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.loading-button {
height: 52px;
min-width: 100px;
display: inline-flex;
justify-content: center;
.loading-button {
height: 52px;
min-width: 100px;
display: inline-flex;
justify-content: center;
&__icon {
width: 14px;
height: 14px;
margin: 0 auto;
@include spin;
fill: $color-brand;
&__icon {
width: 14px;
height: 14px;
margin: 0 auto;
@include spin;
fill: $color-brand;
}
}
}
</style>

79
client/src/components/MobileHeader.vue
View File

@ -4,59 +4,66 @@
<hamburger class="mobile-header__hamburger" />
</a>
<router-link to="/" data-cy="mobile-home-link">
<router-link
to="/"
data-cy="mobile-home-link"
>
<logo />
</router-link>
<user-widget v-bind="me" @click.stop="openSidebar('profile')" />
<user-widget
v-bind="me"
@click.stop="openSidebar('profile')"
/>
</div>
</template>
<script>
import UserWidget from '@/components/UserWidget';
import UserWidget from '@/components/UserWidget';
import me from '@/mixins/me';
import openSidebar from '@/mixins/open-sidebar';
import me from '@/mixins/me';
import openSidebar from '@/mixins/open-sidebar';
import {defineAsyncComponent} from 'vue';
const Logo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo');
const Hamburger = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Hamburger');
const Logo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Logo'));
const Hamburger = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Hamburger'));
export default {
mixins: [me, openSidebar],
export default {
mixins: [me, openSidebar],
components: {
Logo,
Hamburger,
UserWidget,
},
methods: {
showMobileNavigation() {
this.$store.dispatch('showMobileNavigation', true);
components: {
Logo,
Hamburger,
UserWidget,
},
},
};
methods: {
showMobileNavigation() {
this.$store.dispatch('showMobileNavigation', true);
},
},
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.mobile-header {
justify-content: space-between;
align-items: center;
.mobile-header {
justify-content: space-between;
align-items: center;
display: flex;
display: flex;
@include desktop {
display: none;
@include desktop {
display: none;
}
padding: 0 $medium-spacing;
&__hamburger {
width: 30px;
height: 30px;
fill: $color-silver-dark;
}
}
padding: 0 $medium-spacing;
&__hamburger {
width: 30px;
height: 30px;
fill: $color-silver-dark;
}
}
</style>

270
client/src/components/Modal.vue
View File

@ -1,11 +1,7 @@
<template>
<div class="modal__backdrop">
<div
:class="{
'modal--hide-header': hideHeader || fullscreen,
'modal--fullscreen': fullscreen,
'modal--small': small,
}"
:class="{'modal--hide-header': hideHeader || fullscreen, 'modal--fullscreen': fullscreen, 'modal--small': small}"
class="modal"
>
<div class="modal__header">
@ -13,14 +9,20 @@
</div>
<div class="modal__body">
<slot />
<div class="modal__close-button" @click="hideModal">
<div
class="modal__close-button"
@click="hideModal"
>
<cross class="modal__close-icon" />
</div>
</div>
<div class="modal__footer">
<slot name="footer">
<!--<a class="button button&#45;&#45;active">Speichern</a>-->
<a class="button" @click="hideModal">Abbrechen</a>
<a
class="button"
@click="hideModal"
>Abbrechen</a>
</slot>
</div>
</div>
@ -28,158 +30,160 @@
</template>
<script>
const Cross = () => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon');
import {defineAsyncComponent} from 'vue';
const Cross = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon'));
export default {
props: {
hideHeader: {
type: Boolean,
default: false,
export default {
props: {
hideHeader: {
type: Boolean,
default: false
},
fullscreen: {
type: Boolean,
default: false
},
small: {
type: Boolean,
default: false
}
},
fullscreen: {
type: Boolean,
default: false,
},
small: {
type: Boolean,
default: false,
},
},
components: {
Cross,
},
methods: {
hideModal() {
this.$store.dispatch('hideModal');
components: {
Cross
},
},
};
methods: {
hideModal() {
this.$store.dispatch('hideModal');
}
}
};
</script>
<style scoped lang="scss">
@import '@/styles/_variables.scss';
@import "@/styles/_variables.scss";
.modal {
align-self: center;
justify-self: center;
width: 700px;
height: 80vh;
background-color: $color-white;
border-radius: 12px;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
border: 1px solid $color-silver-light;
display: -ms-grid;
@supports (display: grid) {
display: grid;
}
grid-template-rows: auto 1fr 65px;
grid-template-areas: 'header' 'body' 'footer';
-ms-grid-rows: auto 1fr 65px;
position: relative;
&__backdrop {
display: flex;
justify-content: center;
.modal {
align-self: center;
justify-self: center;
width: 700px;
height: 80vh;
background-color: $color-white;
border-radius: 12px;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
border: 1px solid $color-silver-light;
display: -ms-grid;
@supports (display: grid) {
display: grid;
}
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba($color-white, 0.8);
z-index: 90;
}
grid-template-rows: auto 1fr 65px;
grid-template-areas: "header" "body" "footer";
-ms-grid-rows: auto 1fr 65px;
position: relative;
&__header {
grid-area: header;
-ms-grid-row: 1;
padding: 10px $modal-lateral-padding;
border-bottom: 1px solid $color-silver-light;
}
&__backdrop {
display: flex;
justify-content: center;
@supports (display: grid) {
display: grid;
}
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba($color-white, 0.8);
z-index: 90;
}
&__body {
grid-area: body;
-ms-grid-row: 2;
padding: 10px $modal-lateral-padding;
overflow: auto;
box-sizing: border-box;
min-height: 30vh;
}
&__header {
grid-area: header;
-ms-grid-row: 1;
padding: 10px $modal-lateral-padding;
border-bottom: 1px solid $color-silver-light;
}
&__close-button {
display: none;
cursor: pointer;
position: absolute;
right: 15px;
top: 15px;
background: rgba($color-white, 0.5);
border-radius: 40px;
padding: 10px;
align-content: center;
}
&__body {
grid-area: body;
-ms-grid-row: 2;
padding: 10px $modal-lateral-padding;
overflow: auto;
box-sizing: border-box;
min-height: 30vh;
}
&__footer {
grid-area: footer;
-ms-grid-row: 3;
border-top: 1px solid $color-silver-light;
padding: 16px $modal-lateral-padding;
}
$parent: &;
&--hide-header {
grid-template-rows: 1fr 65px;
grid-template-areas: 'body' 'footer';
#{$parent}__header {
&__close-button {
display: none;
cursor: pointer;
position: absolute;
right: 15px;
top: 15px;
background: rgba($color-white, 0.5);
border-radius: 40px;
padding: 10px;
align-content: center;
}
#{$parent}__body {
padding: $default-padding;
}
}
&--fullscreen {
width: 95vw;
height: auto;
grid-template-rows: 1fr;
-ms-grid-rows: 1fr;
grid-template-areas: 'body';
overflow: hidden;
#{$parent}__footer {
display: none;
&__footer {
grid-area: footer;
-ms-grid-row: 3;
border-top: 1px solid $color-silver-light;
padding: 16px $modal-lateral-padding;
}
#{$parent}__body {
padding: 0;
scrollbar-width: none;
margin-right: -5px;
$parent: &;
height: auto;
max-height: 95vh;
&--hide-header {
grid-template-rows: 1fr 65px;
grid-template-areas: "body" "footer";
&::-webkit-scrollbar {
#{$parent}__header {
display: none;
}
#{$parent}__body {
padding: $default-padding;
}
}
&--fullscreen {
width: 95vw;
height: auto;
grid-template-rows: 1fr;
-ms-grid-rows: 1fr;
grid-template-areas: "body";
overflow: hidden;
#{$parent}__footer {
display: none;
}
#{$parent}__body {
padding: 0;
scrollbar-width: none;
margin-right: -5px;
height: auto;
max-height: 95vh;
&::-webkit-scrollbar {
display: none;
}
}
#{$parent}__close-button {
display: flex;
}
}
#{$parent}__close-button {
display: flex;
&--small {
height: auto;
#{$parent}__body {
min-height: 0;
}
}
}
&--small {
height: auto;
#{$parent}__body {
min-height: 0;
}
}
}
</style>

85
client/src/components/MoreOptionsWidget.vue
View File

@ -1,59 +1,68 @@
<template>
<div class="more-options">
<a class="more-options__more-link" data-cy="more-options-link" @click.stop="showMenu = !showMenu">
<a
class="more-options__more-link"
data-cy="more-options-link"
@click.stop="showMenu = !showMenu"
>
<ellipses class="more-options__ellipses" />
</a>
<widget-popover class="more-options__popover" v-if="showMenu" @hide-me="showMenu = false">
<widget-popover
class="more-options__popover"
v-if="showMenu"
@hide-me="showMenu = false"
>
<slot />
</widget-popover>
</div>
</template>
<script>
import WidgetPopover from '@/components/ui/WidgetPopover';
import WidgetPopover from '@/components/ui/WidgetPopover';
import {defineAsyncComponent} from 'vue';
const Ellipses = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Ellipses.vue');
const Ellipses = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Ellipses.vue'));
export default {
components: {
WidgetPopover,
Ellipses,
},
export default {
components: {
WidgetPopover,
Ellipses
},
data() {
return {
showMenu: false,
};
},
};
data() {
return {
showMenu: false
};
}
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.more-options {
display: flex;
justify-content: flex-end;
&__ellipses {
width: 30px;
height: 30px;
fill: $color-charcoal-dark;
margin-top: -7px;
}
&__more-link {
background-color: rgba($color-white, 0.9);
width: 35px;
height: 15px;
border-radius: 15px;
.more-options {
display: flex;
justify-content: center;
}
justify-content: flex-end;
&__popover {
min-width: 200px;
@include popover-defaults();
&__ellipses {
width: 30px;
height: 30px;
fill: $color-charcoal-dark;
margin-top: -7px;
}
&__more-link {
background-color: rgba($color-white, 0.9);
width: 35px;
height: 15px;
border-radius: 15px;
display: flex;
justify-content: center;
}
&__popover {
min-width: 200px;
@include popover-defaults();
}
}
}
</style>

3
client/src/components/ScrollUp.vue
View File

@ -11,7 +11,8 @@
</template>
<script>
const ArrowUp = () => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowUp');
import {defineAsyncComponent} from 'vue';
const ArrowUp = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowUp'));
export default {
components: {

48
client/src/components/StudentSubmissionDocument.vue
View File

@ -1,40 +1,44 @@
<template>
<div class="submission-document">
<p class="submission-document__content content" v-if="document && document.length > 0">
<p
class="submission-document__content content"
v-if="document && document.length > 0"
>
<document-icon class="content__icon" /><span class="content__text">{{ filename }}</span>
</p>
</div>
</template>
<script>
import filenameFromUrl from '@/helpers/urls';
const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
import {defineAsyncComponent} from 'vue';
import filenameFromUrl from '@/helpers/urls';
const DocumentIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon'));
export default {
name: 'StudentSubmissionDocument',
props: ['document'],
components: { DocumentIcon },
export default {
name: 'StudentSubmissionDocument',
props: ['document'],
components: { DocumentIcon },
computed: {
filename() {
return filenameFromUrl(this.document);
computed: {
filename() {
return filenameFromUrl(this.document);
}
},
},
};
};
</script>
<style scoped lang="scss">
.content {
display: flex;
.content {
display: flex;
&__icon {
width: 25px;
align-self: center;
}
&__icon {
width: 25px;
align-self: center;
}
&__text {
align-self: center;
padding-left: 5px;
&__text {
align-self: center;
padding-left: 5px;
}
}
}
</style>

258
client/src/components/book-navigation/ContentNavigation.vue
View File

@ -1,9 +1,12 @@
<template>
<nav :class="{ 'content-navigation--sidebar': isSidebar }" class="content-navigation">
<nav
:class="{'content-navigation--sidebar': isSidebar}"
class="content-navigation"
>
<div class="content-navigation__primary">
<div class="content-navigation__item">
<router-link
:class="{ 'content-navigation__link--active': isActive('book') }"
:class="{'content-navigation__link--active': isActive('book')}"
:to="topicRoute"
active-class="content-navigation__link--active"
class="content-navigation__link"
@ -12,7 +15,9 @@
{{ $flavor.textTopics }}
</router-link>
<topic-navigation v-if="isSidebar" />
<topic-navigation
v-if="isSidebar"
/>
</div>
<div class="content-navigation__item">
@ -28,7 +33,7 @@
<div class="content-navigation__item">
<router-link
:to="{ name: 'news' }"
:to="{name: 'news'}"
active-class="content-navigation__link--active"
class="content-navigation__link"
data-cy="news-navigation-link"
@ -40,14 +45,19 @@
</div>
</div>
<router-link to="/" class="content-navigation__logo" data-cy="home-link" v-if="!isSidebar">
<router-link
to="/"
class="content-navigation__logo"
data-cy="home-link"
v-if="!isSidebar"
>
<logo class="content-navigation__logo-icon" />
</router-link>
<div class="content-navigation__secondary">
<div class="content-navigation__item content-navigation__item--secondary">
<router-link
:class="{ 'content-navigation__link--active': isRoomUrl() }"
:class="{'content-navigation__link--active': isRoomUrl()}"
to="/rooms"
active-class="content-navigation__link--active"
class="content-navigation__link content-navigation__link--secondary"
@ -57,7 +67,10 @@
</router-link>
</div>
<div class="content-navigation__item content-navigation__item--secondary" v-if="showPortfolio">
<div
class="content-navigation__item content-navigation__item--secondary"
v-if="showPortfolio"
>
<router-link
to="/portfolio"
active-class="content-navigation__link--active"
@ -67,13 +80,16 @@
Portfolio
</router-link>
</div>
<div class="content-navigation__item content-navigation__item--secondary" v-if="isSidebar">
<div
class="content-navigation__item content-navigation__item--secondary"
v-if="isSidebar"
>
<a
:href="$flavor.supportLink"
target="_blank"
class="content-navigation__link content-navigation__link--secondary"
@click="close"
>Support
>Support
</a>
</div>
</div>
@ -81,142 +97,142 @@
</template>
<script>
import TopicNavigation from '@/components/book-navigation/TopicNavigation';
import TopicNavigation from '@/components/book-navigation/TopicNavigation';
import sidebarMixin from '@/mixins/sidebar';
import meMixin from '@/mixins/me';
import sidebarMixin from '@/mixins/sidebar';
import meMixin from '@/mixins/me';
import {defineAsyncComponent} from 'vue';
const Logo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo');
const Logo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Logo'));
export default {
props: {
isSidebar: {
default: false,
export default {
props: {
isSidebar: {
default: false
}
},
},
mixins: [sidebarMixin, meMixin],
mixins: [sidebarMixin, meMixin],
components: {
TopicNavigation,
Logo,
},
components: {
TopicNavigation,
Logo
},
computed: {
showPortfolio() {
return this.$flavor.showPortfolio;
computed: {
showPortfolio() {
return this.$flavor.showPortfolio;
}
},
},
methods: {
isActive(linkName) {
return linkName === 'book' && this.$route.path.indexOf('module') > -1;
},
isRoomUrl() {
return this.$route.path.indexOf('room') > -1;
},
close() {
this.closeSidebar('navigation');
},
},
};
methods: {
isActive(linkName) {
return linkName === 'book' && this.$route.path.indexOf('module') > -1;
},
isRoomUrl() {
return this.$route.path.indexOf('room') > -1;
},
close() {
this.closeSidebar('navigation');
}
}
};
</script>
<style scoped lang="scss">
@import '@/styles/_variables.scss';
@import '@/styles/_mixins.scss';
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.content-navigation {
display: flex;
align-items: center;
&__link {
padding: 0 24px;
@include navigation-link;
}
&__primary,
&__secondary {
display: none;
flex-direction: row;
@include desktop {
display: flex;
}
}
&__logo {
color: #17a887;
font-size: 36px;
font-weight: 800;
font-family: $sans-serif-font-family;
.content-navigation {
display: flex;
justify-self: center;
align-items: center;
/*
* For IE10+
*/
-ms-grid-column: 2;
-ms-grid-row-align: center;
-ms-grid-column-align: center;
}
&__logo-icon {
width: auto;
height: 31px;
}
&__link {
&--secondary {
@include regular-text;
&__link {
padding: 0 24px;
@include navigation-link;
}
&--active {
color: $color-brand;
}
}
&__primary, &__secondary {
display: none;
flex-direction: row;
$parent: &;
&--sidebar {
flex-direction: column;
#{$parent}__primary,
#{$parent}__secondary {
display: flex;
flex-direction: column;
width: 100%;
}
#{$parent}__link {
@include heading-4;
line-height: 2.5em;
padding: 0;
display: block;
margin-bottom: 0.5 * $small-spacing;
&:only-child {
margin-bottom: 0;
@include desktop {
display: flex;
}
}
#{$parent}__item {
width: 100%;
//border-bottom: 1px solid $color-white;
&__logo {
color: #17A887;
font-size: 36px;
font-weight: 800;
font-family: $sans-serif-font-family;
display: flex;
justify-self: center;
/*&:nth-child(1) {*/
/* order: 3;*/
/* border-bottom: 0;*/
/*}*/
/*
* For IE10+
*/
-ms-grid-column: 2;
-ms-grid-row-align: center;
-ms-grid-column-align: center;
}
/*&:nth-child(2) {*/
/* order: 1;*/
/*}*/
&__logo-icon {
width: auto;
height: 31px;
}
/*&:nth-child(3) {*/
/* order: 2;*/
/*}*/
&__link {
&--secondary {
@include regular-text;
}
&--active {
color: $color-brand;
}
}
$parent: &;
&--sidebar {
flex-direction: column;
#{$parent}__primary, #{$parent}__secondary {
display: flex;
flex-direction: column;
width: 100%;
}
#{$parent}__link {
@include heading-4;
line-height: 2.5em;
padding: 0;
display: block;
margin-bottom: 0.5*$small-spacing;
&:only-child {
margin-bottom: 0;
}
}
#{$parent}__item {
width: 100%;
//border-bottom: 1px solid $color-white;
/*&:nth-child(1) {*/
/* order: 3;*/
/* border-bottom: 0;*/
/*}*/
/*&:nth-child(2) {*/
/* order: 1;*/
/*}*/
/*&:nth-child(3) {*/
/* order: 2;*/
/*}*/
}
}
}
}
</style>

3
client/src/components/book-navigation/NavigationSidebar.vue
View File

@ -23,8 +23,9 @@
import ContentNavigation from '@/components/book-navigation/ContentNavigation';
import sidebarMixin from '@/mixins/sidebar';
import {defineAsyncComponent} from 'vue';
const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
const Cross = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon'));
export default {
mixins: [sidebarMixin],

65
client/src/components/book-navigation/SubNavigationItem.vue
View File

@ -1,44 +1,55 @@
<template>
<div :class="{ 'sub-navigation-item--active': show }" class="sub-navigation-item" v-click-outside="close">
<div class="sub-navigation-item__title" @click="show = !show">
<div
:class="{ 'sub-navigation-item--active': show}"
class="sub-navigation-item"
v-click-outside="close"
>
<div
class="sub-navigation-item__title"
@click="show = !show"
>
{{ title }}
<chevron-down class="sub-navigation-item__icon sub-navigation-item__chevron-down" />
<chevron-up class="sub-navigation-item__icon sub-navigation-item__chevron-up" />
</div>
<div class="sub-navigation-item__nav-items book-subnavigation" v-if="show">
<div
class="sub-navigation-item__nav-items book-subnavigation"
v-if="show"
>
<slot />
</div>
</div>
</template>
<script>
const ChevronDown = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronDown');
const ChevronUp = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronUp');
import {defineAsyncComponent} from 'vue';
const ChevronDown = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronDown'));
const ChevronUp = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronUp'));
export default {
props: ['title'],
export default {
props: ['title'],
components: {
ChevronDown,
ChevronUp,
},
data() {
return {
show: false,
};
},
watch: {
$route() {
this.show = false;
components: {
ChevronDown,
ChevronUp
},
},
methods: {
close() {
this.show = false;
data() {
return {
show: false
};
},
},
};
watch: {
$route() {
this.show = false;
}
},
methods: {
close() {
this.show = false;
}
}
};
</script>

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

@ -26,10 +26,14 @@
:class="['content-element__component']"
v-bind="element"
:is="component"
@change-text="changeText"
@link-change-url="changeUrl"
@change-url="changeUrl"
@switch-to-document="switchToDocument"
@assignment-change-title="changeAssignmentTitle"
@assignment-change-assignment="changeAssignmentAssignment"
/>
@ -39,321 +43,313 @@
</template>
<script>
import ContentFormSection from '@/components/content-block-form/ContentFormSection';
import ContentElementActions from '@/components/content-block-form/ContentElementActions';
import ContentFormSection from '@/components/content-block-form/ContentFormSection';
import ContentElementActions from '@/components/content-block-form/ContentElementActions';
import {defineAsyncComponent} from 'vue';
const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
const ContentBlockElementChooserWidget = () =>
import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/ContentBlockElementChooserWidget');
const LinkForm = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/LinkForm');
const VideoForm = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/VideoForm');
const ImageForm = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/ImageForm');
const DocumentForm = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/DocumentForm');
const AssignmentForm = () =>
import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/AssignmentForm');
const TextForm = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/TipTap.vue');
const SubtitleForm = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/SubtitleForm');
// readonly blocks
const Assignment = () =>
import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/assignment/Assignment');
const SurveyBlock = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/SurveyBlock');
const Solution = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/Solution');
const ImageBlock = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/ImageBlock');
const Instruction = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/Instruction');
const ModuleRoomSlug = () =>
import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/ModuleRoomSlug');
const CmsDocumentBlock = () =>
import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/CmsDocumentBlock');
const ThinglinkBlock = () =>
import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/ThinglinkBlock');
const InfogramBlock = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/InfogramBlock');
const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon'));
const ContentBlockElementChooserWidget = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/ContentBlockElementChooserWidget'));
const LinkForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/LinkForm'));
const VideoForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/VideoForm'));
const ImageForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/ImageForm'));
const DocumentForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/DocumentForm'));
const AssignmentForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/AssignmentForm'));
const TextForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/TipTap.vue'));
const SubtitleForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/SubtitleForm'));
// readonly blocks
const Assignment = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/assignment/Assignment'));
const SurveyBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/SurveyBlock'));
const Solution = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/Solution'));
const ImageBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/ImageBlock'));
const Instruction = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/Instruction'));
const ModuleRoomSlug = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/ModuleRoomSlug'));
const CmsDocumentBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/CmsDocumentBlock'));
const ThinglinkBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/ThinglinkBlock'));
const InfogramBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/InfogramBlock'));
const CHOOSER = 'content-block-element-chooser-widget';
const CHOOSER = 'content-block-element-chooser-widget';
export default {
props: {
element: {
type: Object,
default: null,
export default {
props: {
element: {
type: Object,
default: null,
},
// is this element at the top level, or is it nested? we assume top level
topLevel: {
type: Boolean,
default: true,
},
firstElement: {
type: Boolean,
required: true,
},
lastElement: {
type: Boolean,
required: true,
},
},
// is this element at the top level, or is it nested? we assume top level
topLevel: {
type: Boolean,
default: true,
},
firstElement: {
type: Boolean,
required: true,
},
lastElement: {
type: Boolean,
required: true,
},
},
components: {
ContentElementActions,
ContentFormSection,
TrashIcon,
ContentBlockElementChooserWidget,
LinkForm,
VideoForm,
ImageForm,
DocumentForm,
AssignmentForm,
TextForm,
SubtitleForm,
SurveyBlock,
Solution,
ImageBlock,
Instruction,
ModuleRoomSlug,
CmsDocumentBlock,
InfogramBlock,
ThinglinkBlock,
Assignment,
},
components: {
ContentElementActions,
ContentFormSection,
TrashIcon,
ContentBlockElementChooserWidget,
LinkForm,
VideoForm,
ImageForm,
DocumentForm,
AssignmentForm,
TextForm,
SubtitleForm,
SurveyBlock,
Solution,
ImageBlock,
Instruction,
ModuleRoomSlug,
CmsDocumentBlock,
InfogramBlock,
ThinglinkBlock,
Assignment
},
computed: {
actions() {
return {
up: !this.firstElement,
down: !this.lastElement,
extended: this.topLevel,
};
computed: {
actions() {
return {
up: !this.firstElement,
down: !this.lastElement,
extended: this.topLevel,
};
},
isChooser() {
return this.component === CHOOSER;
},
type() {
return this.getType(this.element);
},
component() {
return this.type.component;
},
title() {
return this.type.title;
},
icon() {
return this.type.icon;
},
},
isChooser() {
return this.component === CHOOSER;
},
type() {
return this.getType(this.element);
},
component() {
return this.type.component;
},
title() {
return this.type.title;
},
icon() {
return this.type.icon;
},
},
methods: {
getType(element) {
switch (element.type) {
case 'subtitle':
return {
component: 'subtitle-form',
title: 'Untertitel',
icon: 'title-icon',
};
case 'link_block':
return {
component: 'link-form',
title: 'Link',
icon: 'link-icon',
};
case 'video_block':
return {
component: 'video-form',
title: 'Video',
icon: 'video-icon',
};
case 'image_url_block':
return {
component: 'image-form',
title: 'Bild',
icon: 'image-icon',
};
case 'text_block':
return {
component: 'text-form',
title: 'Text',
icon: 'text-icon',
};
case 'assignment':
return {
component: element.id ? 'assignment' : 'assignment-form', // prevent editing of existing assignments
title: 'Aufgabe & Ergebnis',
icon: 'speech-bubble-icon',
};
case 'document_block':
return {
component: 'document-form',
title: 'Dokument',
icon: 'document-icon',
};
case 'survey':
return {
component: 'survey-block',
title: 'Übung',
};
case 'solution':
return {
component: 'solution',
title: 'Lösung',
};
case 'image_block':
return {
component: 'image-block',
title: 'Bild',
};
case 'instruction':
return {
component: 'instruction',
title: 'Instruktion',
};
case 'module_room_slug':
return {
component: 'module-room-slug',
title: 'Raum',
};
case 'cms_document_block':
return {
component: 'cms-document-block',
title: 'Dokument',
};
case 'thinglink_block':
return {
component: 'thinglink-block',
title: 'Interaktive Grafik',
};
case 'infogram_block':
return {
component: 'infogram-block',
title: 'Interaktive Grafik',
};
}
return {
component: CHOOSER,
title: '',
icon: '',
};
},
_updateProperty(value, key) {
// const content = this.localContentBlock.contents[index];
const content = this.element;
this.update({
...content,
value: {
...content.value,
[key]: value,
},
});
},
changeUrl(value) {
this._updateProperty(value, 'url');
},
changeText(value) {
this._updateProperty(value, 'text');
},
changeAssignmentTitle(value) {
this._updateProperty(value, 'title');
},
changeAssignmentAssignment(value) {
this._updateProperty(value, 'assignment');
},
changeType({ type, convertToList }, value) {
let el = {
type: type,
value: Object.assign({}, value),
};
switch (type) {
case 'subtitle':
el = {
...el,
value: {
text: '',
},
};
break;
case 'text_block':
el = {
...el,
value: {
text: '',
},
};
break;
case 'link_block':
el = {
...el,
value: {
text: '',
url: '',
},
};
break;
case 'video_block':
el = {
...el,
value: {
url: '',
},
};
break;
case 'document_block':
el = {
...el,
value: Object.assign(
{
methods: {
getType(element) {
switch (element.type) {
case 'subtitle':
return {
component: 'subtitle-form',
title: 'Untertitel',
icon: 'title-icon',
};
case 'link_block':
return {
component: 'link-form',
title: 'Link',
icon: 'link-icon',
};
case 'video_block':
return {
component: 'video-form',
title: 'Video',
icon: 'video-icon',
};
case 'image_url_block':
return {
component: 'image-form',
title: 'Bild',
icon: 'image-icon',
};
case 'text_block':
return {
component: 'text-form',
title: 'Text',
icon: 'text-icon',
};
case 'assignment':
return {
component: element.id ? 'assignment' : 'assignment-form', // prevent editing of existing assignments
title: 'Aufgabe & Ergebnis',
icon: 'speech-bubble-icon',
};
case 'document_block':
return {
component: 'document-form',
title: 'Dokument',
icon: 'document-icon',
};
case 'survey':
return {
component: 'survey-block',
title: 'Übung',
};
case 'solution':
return {
component: 'solution',
title: 'Lösung',
};
case 'image_block':
return {
component: 'image-block',
title: 'Bild',
};
case 'instruction':
return {
component: 'instruction',
title: 'Instruktion',
};
case 'module_room_slug':
return {
component: 'module-room-slug',
title: 'Raum',
};
case 'cms_document_block':
return {
component: 'cms-document-block',
title: 'Dokument',
};
case 'thinglink_block':
return {
component: 'thinglink-block',
title: 'Interaktive Grafik'
};
case 'infogram_block':
return {
component: 'infogram-block',
title: 'Interaktive Grafik'
};
}
return {
component: CHOOSER,
title: '',
icon: '',
};
},
_updateProperty(value, key) {
// const content = this.localContentBlock.contents[index];
const content = this.element;
this.update({
...content,
value: {
...content.value,
[key]: value,
},
});
},
changeUrl(value) {
this._updateProperty(value, 'url');
},
changeText(value) {
this._updateProperty(value, 'text');
},
changeAssignmentTitle(value) {
this._updateProperty(value, 'title');
},
changeAssignmentAssignment(value) {
this._updateProperty(value, 'assignment');
},
changeType({type, convertToList}, value) {
let el = {
type: type,
value: Object.assign({}, value),
};
switch (type) {
case 'subtitle':
el = {
...el,
value: {
text: '',
},
};
break;
case 'text_block':
el = {
...el,
value: {
text: '',
},
};
break;
case 'link_block':
el = {
...el,
value: {
text: '',
url: '',
},
value
),
};
break;
case 'image_url_block':
el = {
...el,
value: {
url: '',
},
};
break;
}
};
break;
case 'video_block':
el = {
...el,
value: {
url: '',
},
};
break;
case 'document_block':
el = {
...el,
value: Object.assign({
url: '',
}, value),
};
break;
case 'image_url_block':
el = {
...el,
value: {
url: '',
},
};
break;
}
if (convertToList) {
el = {
type: 'content_list_item',
contents: [el],
};
}
this.update(el);
if (convertToList) {
el = {
type: 'content_list_item',
contents: [el],
};
}
this.update(el);
},
update(element) {
this.$emit('update', element);
},
switchToDocument(value) {
this.changeType('document_block', value);
},
},
update(element) {
this.$emit('update', element);
},
switchToDocument(value) {
this.changeType('document_block', value);
},
},
};
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
.content-element {
display: flex;
flex-direction: column;
.content-element {
display: flex;
flex-direction: column;
&__actions {
display: inline-flex;
justify-self: flex-end;
align-self: flex-end;
&__actions {
display: inline-flex;
justify-self: flex-end;
align-self: flex-end;
}
&__section {
display: grid;
//grid-template-columns: 1fr 50px;
grid-auto-rows: auto;
/*width: 95%; // reserve space for scrollbar*/
}
&__chooser {
grid-column: 1 / span 2;
}
}
&__section {
display: grid;
//grid-template-columns: 1fr 50px;
grid-auto-rows: auto;
/*width: 95%; // reserve space for scrollbar*/
}
&__chooser {
grid-column: 1 / span 2;
}
}
</style>

241
client/src/components/content-block-form/ContentsForm.vue
View File

@ -18,150 +18,167 @@
/>
</template>
<add-content-element :index="-1" class="contents-form__add" @add-element="addElement" />
<div class="contents-form__element" v-for="(element, index) in localContentBlock.contents" :key="index">
<content-element :element="element" @update="update(index, $event)" @remove="remove(index)" />
<add-content-element
:index="-1"
class="contents-form__add"
@add-element="addElement"
/>
<div
class="contents-form__element"
v-for="(element, index) in localContentBlock.contents"
:key="index"
>
<content-element
:element="element"
@update="update(index, $event)"
@remove="remove(index)"
/>
<add-content-element :index="index" class="contents-form__add" @add-element="addElement" />
<add-content-element
:index="index"
class="contents-form__add"
@add-element="addElement"
/>
</div>
<template #footer>
<div>
<a
:class="{ 'button--disabled': disableSave }"
:class="{'button--disabled': disableSave}"
class="button button--primary"
data-cy="modal-save-button"
@click="save"
>Speichern</a
>
<a class="button" @click="$emit('hide')">Abbrechen</a>
>Speichern</a>
<a
class="button"
@click="$emit('hide')"
>Abbrechen</a>
</div>
</template>
</modal>
</template>
<script>
import { meQuery } from '@/graphql/queries';
import {defineAsyncComponent} from 'vue';
import {meQuery} from '@/graphql/queries';
const ModalInput = () => import(/* webpackChunkName: "content-forms" */ '@/components/ModalInput');
const AddContentElement = () => import(/* webpackChunkName: "content-forms" */ '@/components/AddContentElement');
const ContentElement = () =>
import(/* webpackChunkName: "content-forms" */ '@/components/content-block-form/ContentElement');
const ModalInput = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/ModalInput'));
const AddContentElement = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/AddContentElement'));
const ContentElement = defineAsyncComponent(() => import(/* webpackChunkName: "content-forms" */'@/components/content-block-form/ContentElement'));
const Modal = () => import('@/components/Modal.vue');
const Checkbox = () => import('@/components/ui/Checkbox.vue');
const Modal = defineAsyncComponent(() => import('@/components/Modal'));
const Checkbox = defineAsyncComponent(() => import('@/components/ui/Checkbox'));
export default {
props: {
contentBlock: Object,
blockType: {
type: String,
default: 'ContentBlock',
export default {
props: {
contentBlock: Object,
blockType: {
type: String,
default: 'ContentBlock',
},
showTaskSelection: {
type: Boolean,
default: false,
},
disableSave: {
type: Boolean,
default: false,
},
},
showTaskSelection: {
type: Boolean,
default: false,
},
disableSave: {
type: Boolean,
default: false,
},
},
components: {
ContentElement,
Modal,
ModalInput,
AddContentElement,
Checkbox,
},
components: {
ContentElement,
Modal,
ModalInput,
AddContentElement,
Checkbox,
},
data() {
return {
error: false,
localContentBlock: Object.assign(
{},
{
data() {
return {
error: false,
localContentBlock: Object.assign({}, {
title: this.contentBlock.title,
contents: [...this.contentBlock.contents],
id: this.contentBlock.id || undefined,
isAssignment: this.contentBlock.type && this.contentBlock.type.toLowerCase() === 'task',
}),
me: {},
};
},
apollo: {
me: meQuery,
},
computed: {
titlePlaceholder() {
return this.blockType === 'RoomEntry' ? 'Titel für Raumeintrag erfassen' : 'Titel für Inhaltsblock erfassen';
},
taskSelection() {
return this.showTaskSelection && this.me.permissions.includes('users.can_manage_school_class_content');
},
},
methods: {
setContentBlockType(checked) {
this.localContentBlock.isAssignment = checked;
},
update(index, element) {
this.localContentBlock.contents.splice(index, 1, element);
},
save() {
if (!this.disableSave) {
if (!this.localContentBlock.title) {
this.error = true;
return false;
}
this.$emit('save', this.localContentBlock);
}
),
me: {},
};
},
},
updateTitle(title) {
this.localContentBlock.title = title;
this.error = false;
},
addElement(index) {
this.localContentBlock.contents.splice(index + 1, 0, {
hideAssignment: this.blockType !== 'ContentBlock',
});
},
remove(index) {
this.localContentBlock.contents.splice(index, 1);
},
apollo: {
me: meQuery,
},
computed: {
titlePlaceholder() {
return this.blockType === 'RoomEntry' ? 'Titel für Raumeintrag erfassen' : 'Titel für Inhaltsblock erfassen';
},
taskSelection() {
return this.showTaskSelection && this.me.permissions.includes('users.can_manage_school_class_content');
},
},
methods: {
setContentBlockType(checked) {
this.localContentBlock.isAssignment = checked;
},
update(index, element) {
this.localContentBlock.contents.splice(index, 1, element);
},
save() {
if (!this.disableSave) {
if (!this.localContentBlock.title) {
this.error = true;
return false;
}
this.$emit('save', this.localContentBlock);
}
},
updateTitle(title) {
this.localContentBlock.title = title;
this.error = false;
},
addElement(index) {
this.localContentBlock.contents.splice(index + 1, 0, {
hideAssignment: this.blockType !== 'ContentBlock',
});
},
remove(index) {
this.localContentBlock.contents.splice(index, 1);
},
},
};
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.contents-form {
/* top level does not exist, because of the modal */
.contents-form {
/* top level does not exist, because of the modal */
&__element {
&__element {
}
&__element-component {
margin-bottom: 25px;
}
&__remove {
}
&__trash-icon {
}
&__add {
grid-column: 1 / span 2;
}
&__task {
margin: 15px 0 10px;
}
}
&__element-component {
margin-bottom: 25px;
}
&__remove {
}
&__trash-icon {
}
&__add {
grid-column: 1 / span 2;
}
&__task {
margin: 15px 0 10px;
}
}
</style>

61
client/src/components/content-blocks/ContentListBlock.vue
View File

@ -1,40 +1,43 @@
<template>
<content-list :items="contentBlocks">
<content-list
:items="contentBlocks"
>
<template #default="{ item }">
<content-block :content-block="item" :parent="parent" />
<content-block
:content-block="item"
:parent="parent"
/>
</template>
</content-list>
</template>
<script>
import ContentList from '@/components/content-blocks/ContentList.vue';
export default {
name: 'ContentBlockList',
props: ['contents', 'parent'],
import {defineAsyncComponent} from 'vue';
const ContentList = defineAsyncComponent(() => import('@/components/content-blocks/ContentList'));
const ContentBlock = defineAsyncComponent(() => import('@/components/ContentBlock'));
components: {
ContentList,
// https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
ContentBlock: () => import('@/components/ContentBlock.vue'),
},
export default {
name: 'ContentBlockList',
props: ['contents', 'parent'],
computed: {
contentBlocks() {
return this.contents.map((contentBlock) => {
const contents = contentBlock.value ? [...contentBlock.value] : [];
return Object.assign({}, contentBlock, {
contents,
indent: true,
bookmarks: this.parent.bookmarks,
notes: this.parent.notes,
root: this.parent.id,
});
});
components: {
ContentList,
ContentBlock
},
},
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
</style>
computed: {
contentBlocks() {
return this.contents.map(contentBlock => {
const contents = contentBlock.value ? [...contentBlock.value] : [];
return Object.assign({}, contentBlock, {
contents,
indent: true,
bookmarks: this.parent.bookmarks,
notes: this.parent.notes,
root: this.parent.id
});
});
}
}
};
</script>

113
client/src/components/content-blocks/DocumentBlock.vue
View File

@ -1,71 +1,80 @@
<template>
<div class="document-block">
<document-icon class="document-block__icon" />
<a :href="value.url" class="document-block__link" target="_blank">{{ urlName }}</a>
<a class="document-block__remove" v-if="showTrashIcon" @click="$emit('trash')">
<a
:href="value.url"
class="document-block__link"
target="_blank"
>{{ urlName }}</a>
<a
class="document-block__remove"
v-if="showTrashIcon"
@click="$emit('trash')"
>
<trash-icon class="document-block__trash-icon" />
</a>
</div>
</template>
<script>
const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
import {defineAsyncComponent} from 'vue';
const DocumentIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon'));
const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon'));
export default {
props: {
value: Object,
showTrashIcon: Boolean,
},
components: {
DocumentIcon,
TrashIcon,
},
computed: {
urlName: function () {
if (this.value && this.value.url) {
const parts = this.value.url.split('/');
return parts[parts.length - 1];
}
return null;
export default {
props: {
value: Object,
showTrashIcon: Boolean,
},
},
};
components: {
DocumentIcon,
TrashIcon,
},
computed: {
urlName: function() {
if (this.value && this.value.url) {
const parts = this.value.url.split('/');
return parts[parts.length - 1];
}
return null;
}
}
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.document-block {
display: grid;
grid-template-columns: 50px 1fr 50px;
align-items: center;
&__icon {
width: 30px;
height: 30px;
}
&__link {
text-decoration: underline;
}
&__remove {
display: flex;
justify-content: center;
.document-block {
display: grid;
grid-template-columns: 50px 1fr 50px;
align-items: center;
width: 50px;
height: 50px;
}
&__trash-icon {
width: 25px;
height: 25px;
fill: $color-silver-dark;
cursor: pointer;
justify-self: center;
&__icon {
width: 30px;
height: 30px;
}
&__link {
text-decoration: underline;
}
&__remove {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
}
&__trash-icon {
width: 25px;
height: 25px;
fill: $color-silver-dark;
cursor: pointer;
justify-self: center;
}
}
}
</style>

73
client/src/components/content-blocks/Instruction.vue
View File

@ -1,50 +1,57 @@
<template>
<div class="instruction" v-if="me.isTeacher">
<div
class="instruction"
v-if="me.isTeacher"
>
<bulb-icon class="instruction__icon" />
<a :href="url" class="instruction__link">{{ text }}</a>
<a
:href="url"
class="instruction__link"
>{{ text }}</a>
</div>
</template>
<script>
import me from '@/mixins/me';
const BulbIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/BulbIcon');
import me from '@/mixins/me';
import {defineAsyncComponent} from 'vue';
const BulbIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/BulbIcon'));
export default {
props: ['value'],
export default {
props: ['value'],
mixins: [me],
mixins: [me],
components: {
BulbIcon,
},
computed: {
text() {
return this.value.text ? this.value.text : 'Anweisungen';
components: {
BulbIcon
},
url() {
return this.value.document ? this.value.document.url : this.value.url;
},
},
};
computed: {
text() {
return this.value.text ? this.value.text : 'Anweisungen';
},
url() {
return this.value.document ? this.value.document.url : this.value.url;
}
}
};
</script>
<style scoped lang="scss">
@import '@/styles/_mixins.scss';
@import "@/styles/_mixins.scss";
.instruction {
margin-bottom: 1rem;
display: flex;
align-items: center;
.instruction {
margin-bottom: 1rem;
display: flex;
align-items: center;
&__icon {
width: 40px;
height: 40px;
margin-right: $small-spacing;
&__icon {
width: 40px;
height: 40px;
margin-right: $small-spacing;
}
&__link {
@include heading-3;
}
}
&__link {
@include heading-3;
}
}
</style>

76
client/src/components/content-blocks/LinkBlock.vue
View File

@ -1,52 +1,60 @@
<template>
<div :class="{ 'link-block--no-margin': noMargin }" class="link-block">
<div
:class="{ 'link-block--no-margin': noMargin}"
class="link-block"
>
<link-icon class="link-block__icon" />
<a :href="href" class="link-block__link" target="_blank">{{ value.text }}</a>
<a
:href="href"
class="link-block__link"
target="_blank"
>{{ value.text }}</a>
</div>
</template>
<script>
const LinkIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/LinkIcon');
import {defineAsyncComponent} from 'vue';
const LinkIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/LinkIcon'));
export default {
props: {
value: Object,
noMargin: {
default: false,
export default {
props: {
value: Object,
noMargin: {
default: false
}
},
},
components: {
LinkIcon,
},
computed: {
href() {
const url = this.value.url;
return url.startsWith('http') ? this.value.url : `http://${this.value.url}`;
components: {
LinkIcon
},
},
};
computed: {
href() {
const url = this.value.url;
return url.startsWith('http') ? this.value.url : `http://${this.value.url}`;
}
}
};
</script>
<style scoped lang="scss">
.link-block {
margin-bottom: 30px;
display: grid;
grid-template-columns: 50px 1fr;
align-items: center;
.link-block {
margin-bottom: 30px;
display: grid;
grid-template-columns: 50px 1fr;
align-items: center;
&--no-margin {
margin-bottom: 0;
}
&--no-margin {
margin-bottom: 0;
}
&__icon {
width: 30px;
height: 30px;
}
&__icon {
width: 30px;
height: 30px;
}
&__link {
text-decoration: underline;
&__link {
text-decoration: underline;
}
}
}
</style>

420
client/src/components/content-blocks/assignment/Assignment.vue
View File

@ -1,9 +1,19 @@
<template>
<!-- eslint-disable vue/no-v-html -->
<div :data-scrollto="value.id" class="assignment">
<p class="assignment__main-text" data-cy="assignment-main-text" v-html="assignment.assignment" />
<div
:data-scrollto="value.id"
class="assignment"
>
<p
class="assignment__main-text"
data-cy="assignment-main-text"
v-html="assignment.assignment"
/>
<solution :value="solution" v-if="assignment.solution" />
<solution
:value="solution"
v-if="assignment.solution"
/>
<template v-if="isStudent">
<submission-form
@ -23,92 +33,101 @@
@spellcheck="spellcheck"
/>
<spell-check :corrections="corrections" :text="submission.text" />
<spell-check
:corrections="corrections"
:text="submission.text"
/>
<p class="assignment__feedback" v-if="assignment.submission.submissionFeedback" v-html="feedbackText" />
<p
class="assignment__feedback"
v-if="assignment.submission.submissionFeedback"
v-html="feedbackText"
/>
</template>
<template v-if="!isStudent">
<router-link :to="{ name: 'submissions', params: { id: assignment.id } }" class="button button--primary">
Zu den Ergebnissen
<router-link
:to="{name: 'submissions', params: { id: assignment.id }}"
class="button button--primary"
>
Zu den
Ergebnissen
</router-link>
</template>
</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import ASSIGNMENT_QUERY from '@/graphql/gql/queries/assignmentQuery.gql';
import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
import UPDATE_ASSIGNMENT_MUTATION from '@/graphql/gql/mutations/updateAssignmentMutation.gql';
import UPDATE_ASSIGNMENT_MUTATION_WITH_SUCCESS from '@/graphql/gql/mutations/updateAssignmentMutationWithSuccess.gql';
import SPELL_CHECK_MUTATION from '@/graphql/gql/mutations/spellCheck.gql';
import debounce from 'lodash/debounce';
import cloneDeep from 'lodash/cloneDeep';
import { sanitize } from '@/helpers/text';
import {mapActions, mapGetters} from 'vuex';
import ASSIGNMENT_QUERY from '@/graphql/gql/queries/assignmentQuery.gql';
import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
import UPDATE_ASSIGNMENT_MUTATION from '@/graphql/gql/mutations/updateAssignmentMutation.gql';
import UPDATE_ASSIGNMENT_MUTATION_WITH_SUCCESS from '@/graphql/gql/mutations/updateAssignmentMutationWithSuccess.gql';
import SPELL_CHECK_MUTATION from '@/graphql/gql/mutations/spellCheck.gql';
import debounce from 'lodash/debounce';
import cloneDeep from 'lodash/cloneDeep';
import {sanitize} from '@/helpers/text';
import {defineAsyncComponent} from 'vue';
const SubmissionForm = () =>
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/assignment/SubmissionForm');
const Solution = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/Solution');
const SpellCheck = () =>
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/assignment/SpellCheck');
const SubmissionForm = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/assignment/SubmissionForm'));
const Solution = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution'));
const SpellCheck = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/assignment/SpellCheck'));
export default {
props: ['value'],
export default {
props: ['value'],
components: {
Solution,
SubmissionForm,
SpellCheck,
},
data() {
return {
assignment: {
submission: this.initialSubmission(),
},
me: {
permissions: [],
},
inputType: 'text',
unsaved: false,
saving: 0,
corrections: '',
spellcheckLoading: false,
};
},
computed: {
...mapGetters(['scrollToAssignmentId']),
final() {
return !!this.submission && this.submission.final;
components: {
Solution,
SubmissionForm,
SpellCheck,
},
submission() {
return this.assignment.submission ? this.assignment.submission : {};
},
isStudent() {
return !this.me.permissions.includes('users.can_manage_school_class_content');
},
solution() {
data() {
return {
text: this.assignment.solution,
assignment: {
submission: this.initialSubmission(),
},
me: {
permissions: [],
},
inputType: 'text',
unsaved: false,
saving: 0,
corrections: '',
spellcheckLoading: false,
};
},
id() {
return this.assignment.id ? this.assignment.id.replace(/=/g, '') : '';
},
feedbackText() {
let feedback = this.assignment.submission.submissionFeedback;
let sanitizedFeedbackText = sanitize(feedback.text);
return `<span class="inline-title">Feedback von ${feedback.teacher.firstName} ${feedback.teacher.lastName}:</span> ${sanitizedFeedbackText}`;
},
},
methods: {
...mapActions(['scrollToAssignmentReady']),
_save: debounce(function (submission) {
this.saving++;
this.$apollo
.mutate({
computed: {
...mapGetters(['scrollToAssignmentId']),
final() {
return !!this.submission && this.submission.final;
},
submission() {
return this.assignment.submission ? this.assignment.submission : {};
},
isStudent() {
return !this.me.permissions.includes('users.can_manage_school_class_content');
},
solution() {
return {
text: this.assignment.solution,
};
},
id() {
return this.assignment.id ? this.assignment.id.replace(/=/g, '') : '';
},
feedbackText() {
let feedback = this.assignment.submission.submissionFeedback;
let sanitizedFeedbackText = sanitize(feedback.text);
return `<span class="inline-title">Feedback von ${feedback.teacher.firstName} ${feedback.teacher.lastName}:</span> ${sanitizedFeedbackText}`;
},
},
methods: {
...mapActions(['scrollToAssignmentReady']),
_save: debounce(function (submission) {
this.saving++;
this.$apollo.mutate({
mutation: UPDATE_ASSIGNMENT_MUTATION_WITH_SUCCESS,
variables: {
input: {
@ -119,14 +138,7 @@ export default {
},
},
},
update(
store,
{
data: {
updateAssignment: { successful, updatedAssignment },
},
}
) {
update(store, {data: {updateAssignment: {successful, updatedAssignment}}}) {
try {
if (successful) {
const query = ASSIGNMENT_QUERY;
@ -137,82 +149,80 @@ export default {
submission,
});
const data = {
assignment,
assignment
};
store.writeQuery({ query, variables, data });
store.writeQuery({query, variables, data});
}
} catch (e) {
console.error(e);
// Query did not exist in the cache, and apollo throws a generic Error. Do nothing
}
},
})
.then(() => {
}).then(() => {
this.saving--;
if (this.saving === 0) {
this.unsaved = false;
}
});
}, 500),
saveInput: function (answer) {
// reset corrections on input
this.corrections = '';
this.unsaved = true;
/*
}, 500),
saveInput: function (answer) {
// reset corrections on input
this.corrections = '';
this.unsaved = true;
/*
We update the assignment on this component, so the changes are reflected on it. The server does not return
the updated entity, to prevent the UI to update when the user is entering his input
*/
this.assignment.submission.text = answer;
this._save(this.assignment.submission);
},
changeDocumentUrl(documentUrl) {
this.assignment.submission.document = documentUrl;
this._save(this.assignment.submission);
},
turnIn() {
// reset corrections on turn in
this.corrections = '';
this.$apollo.mutate({
mutation: UPDATE_ASSIGNMENT_MUTATION,
variables: {
input: {
assignment: {
id: this.assignment.id,
answer: this.assignment.submission.text,
document: this.assignment.submission.document,
final: true,
this.assignment.submission.text = answer;
this._save(this.assignment.submission);
},
changeDocumentUrl(documentUrl) {
this.assignment.submission.document = documentUrl;
this._save(this.assignment.submission);
},
turnIn() {
// reset corrections on turn in
this.corrections = '';
this.$apollo.mutate({
mutation: UPDATE_ASSIGNMENT_MUTATION,
variables: {
input: {
assignment: {
id: this.assignment.id,
answer: this.assignment.submission.text,
document: this.assignment.submission.document,
final: true,
},
},
},
},
});
},
reopen() {
this.$apollo.mutate({
mutation: UPDATE_ASSIGNMENT_MUTATION,
variables: {
input: {
assignment: {
id: this.assignment.id,
answer: this.assignment.submission.text,
document: this.assignment.submission.document,
final: false,
});
},
reopen() {
this.$apollo.mutate({
mutation: UPDATE_ASSIGNMENT_MUTATION,
variables: {
input: {
assignment: {
id: this.assignment.id,
answer: this.assignment.submission.text,
document: this.assignment.submission.document,
final: false,
},
},
},
},
});
},
initialSubmission() {
return {
text: '',
document: '',
final: false,
};
},
spellcheck() {
let self = this;
this.spellcheckLoading = true;
this.$apollo
.mutate({
});
},
initialSubmission() {
return {
text: '',
document: '',
final: false,
};
},
spellcheck() {
let self = this;
this.spellcheckLoading = true;
this.$apollo.mutate({
mutation: SPELL_CHECK_MUTATION,
variables: {
input: {
@ -220,96 +230,90 @@ export default {
text: this.assignment.submission.text,
},
},
update(
store,
{
data: {
spellCheck: { results },
},
}
) {
update(store, {data: {spellCheck: {results}}}) {
self.corrections = results;
},
})
.then(() => {
}).then(() => {
this.spellcheckLoading = false;
});
},
},
},
apollo: {
assignment: {
query: ASSIGNMENT_QUERY,
variables() {
return {
id: this.value.id,
};
apollo: {
assignment: {
query: ASSIGNMENT_QUERY,
variables() {
return {
id: this.value.id,
};
},
result(response) {
const data = response.data;
this.assignment = cloneDeep(data.assignment);
this.assignment.submission = Object.assign(this.initialSubmission(), this.assignment.submission);
if (this.assignment.id === this.scrollToAssignmentId && 'stale' in response) {
this.$nextTick(() => this.scrollToAssignmentReady(true));
}
},
},
result(response) {
const data = response.data;
this.assignment = cloneDeep(data.assignment);
this.assignment.submission = Object.assign(this.initialSubmission(), this.assignment.submission);
if (this.assignment.id === this.scrollToAssignmentId && 'stale' in response) {
this.$nextTick(() => this.scrollToAssignmentReady(true));
}
me: {
query: ME_QUERY,
},
},
me: {
query: ME_QUERY,
},
},
};
};
</script>
<style scoped lang="scss">
@import '@/styles/_variables.scss';
@import '@/styles/_functions.scss';
@import '@/styles/_mixins.scss';
@import '@/styles/_variables.scss';
@import '@/styles/_functions.scss';
@import '@/styles/_mixins.scss';
.assignment {
margin-bottom: 3rem;
position: relative;
.assignment {
margin-bottom: 3rem;
position: relative;
&__title {
font-size: toRem(17px);
margin-bottom: 1rem;
}
&__main-text {
:deep(ul) {
@include list-parent;
&__title {
font-size: toRem(17px);
margin-bottom: 1rem;
}
:deep(li) {
@include list-child;
&__main-text {
/deep/ ul{
@include list-parent
}
/deep/ li {
@include list-child;
}
}
}
&__toggle-input-container {
display: flex;
margin-bottom: 15px;
}
&__toggle-input {
border: 0;
font-family: $sans-serif-font-family;
background: transparent;
font-size: toRem(14px);
padding: 5px 0;
margin-right: 15px;
outline: 0;
color: $color-silver-dark;
cursor: pointer;
border-bottom: 2px solid transparent;
&--active {
border-bottom-color: $color-charcoal-dark;
color: $color-charcoal-dark;
&__toggle-input-container {
display: flex;
margin-bottom: 15px;
}
&__toggle-input {
border: 0;
font-family: $sans-serif-font-family;
background: transparent;
font-size: toRem(14px);
padding: 5px 0;
margin-right: 15px;
outline: 0;
color: $color-silver-dark;
cursor: pointer;
border-bottom: 2px solid transparent;
&--active {
border-bottom-color: $color-charcoal-dark;
color: $color-charcoal-dark;
}
}
&__feedback {
@include regular-text;
}
}
&__feedback {
@include regular-text;
}
}
</style>

166
client/src/components/content-blocks/assignment/FinalSubmission.vue
View File

@ -1,99 +1,109 @@
<template>
<div class="final-submission" data-cy="final-submission">
<document-block :value="{ url: userInput.document }" class="final-submission__document" v-if="userInput.document" />
<div
class="final-submission"
data-cy="final-submission"
>
<document-block
:value="{url: userInput.document}"
class="final-submission__document"
v-if="userInput.document"
/>
<div class="final-submission__explanation">
<info-icon class="final-submission__explanation-icon" />
<span class="final-submission__explanation-text">{{ sharedMsg }}</span>
<a class="final-submission__reopen" data-cy="final-submission-reopen" v-if="showReopen" @click="$emit('reopen')"
>Bearbeiten</a
>
<a
class="final-submission__reopen"
data-cy="final-submission-reopen"
v-if="showReopen"
@click="$emit('reopen')"
>Bearbeiten</a>
</div>
</div>
</template>
<script>
import { newLineToParagraph } from '@/helpers/text';
const DocumentBlock = () =>
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/DocumentBlock');
import {newLineToParagraph} from '@/helpers/text';
import {defineAsyncComponent} from 'vue';
const DocumentBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock'));
const InfoIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon');
const InfoIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon'));
export default {
props: {
userInput: {
type: Object,
default: () => ({}),
export default {
props: {
userInput: {
type: Object,
default: () => ({})
},
showReopen: {
type: Boolean,
default: true
},
sharedMsg: {
type: String,
default: ''
}
},
showReopen: {
type: Boolean,
default: true,
},
sharedMsg: {
type: String,
default: '',
},
},
components: {
InfoIcon,
DocumentBlock,
},
computed: {
text() {
return newLineToParagraph(this.userInput.text);
components: {
InfoIcon,
DocumentBlock,
},
},
};
computed: {
text() {
return newLineToParagraph(this.userInput.text);
}
}
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.final-submission {
&__text {
background-color: $color-white;
@include input-box-shadow;
border-radius: $input-border-radius;
padding: 15px;
font-size: toRem(17px);
font-family: $sans-serif-font-family;
margin-bottom: 20px;
font-weight: $font-weight-regular;
.final-submission {
&__text {
background-color: $color-white;
@include input-box-shadow;
border-radius: $input-border-radius;
padding: 15px;
font-size: toRem(17px);
font-family: $sans-serif-font-family;
margin-bottom: 20px;
font-weight: $font-weight-regular;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
word-break: break-word;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
word-break: break-word;
}
&__document {
margin-bottom: $small-spacing;
}
&__explanation {
display: flex;
align-items: center;
}
&__explanation-icon {
width: 40px;
height: 40px;
fill: $color-brand;
margin-right: 8px;
}
&__explanation-text {
color: $color-brand;
font-family: $sans-serif-font-family;
font-weight: $font-weight-regular;
margin-right: $medium-spacing;
}
&__reopen {
@include small-text;
cursor: pointer;
color: $color-charcoal-light;
}
}
&__document {
margin-bottom: $small-spacing;
}
&__explanation {
display: flex;
align-items: center;
}
&__explanation-icon {
width: 40px;
height: 40px;
fill: $color-brand;
margin-right: 8px;
}
&__explanation-text {
color: $color-brand;
font-family: $sans-serif-font-family;
font-weight: $font-weight-regular;
margin-right: $medium-spacing;
}
&__reopen {
@include small-text;
cursor: pointer;
color: $color-charcoal-light;
}
}
</style>

191
client/src/components/content-blocks/assignment/SubmissionForm.vue
View File

@ -10,7 +10,10 @@
/>
</div>
<div class="submission-form-container__actions" v-if="!isFinalOrReadOnly">
<div
class="submission-form-container__actions"
v-if="!isFinalOrReadOnly"
>
<button
class="submission-form-container__submit button button--primary button--white-bg"
data-cy="submission-form-submit"
@ -26,7 +29,11 @@
>
{{ spellcheckText }}
</button>
<file-upload :document="userInput.document" v-if="allowsDocuments" @change-document-url="changeDocumentUrl" />
<file-upload
:document="userInput.document"
v-if="allowsDocuments"
@change-document-url="changeDocumentUrl"
/>
<slot />
</div>
@ -41,112 +48,116 @@
</template>
<script>
const SubmissionInput = () => import('@/components/content-blocks/assignment/SubmissionInput.vue');
const FinalSubmission = () => import('@/components/content-blocks/assignment/FinalSubmission.vue');
const FileUpload = () => import('@/components/ui/file-upload/FileUpload.vue');
import {defineAsyncComponent} from 'vue';
const SubmissionInput = defineAsyncComponent(() => import('@/components/content-blocks/assignment/SubmissionInput'));
const FinalSubmission = defineAsyncComponent(() => import('@/components/content-blocks/assignment/FinalSubmission'));
const FileUpload = defineAsyncComponent(() => import('@/components/ui/file-upload/FileUpload'));
export default {
props: {
userInput: Object,
saved: Boolean,
placeholder: String,
action: String,
reopen: Function,
document: String,
readOnly: {
type: Boolean,
default: false,
},
spellcheck: {
type: Boolean,
default: false,
},
spellcheckLoading: {
type: Boolean,
default: false,
},
sharedMsg: String,
},
components: {
FileUpload,
SubmissionInput,
FinalSubmission,
},
export default {
props: {
userInput: Object,
saved: Boolean,
placeholder: String,
action: String,
reopen: Function,
document: String,
readOnly: {
type: Boolean,
default: false,
},
spellcheck: {
type: Boolean,
default: false,
},
spellcheckLoading: {
type: Boolean,
default: false,
},
sharedMsg: String,
},
computed: {
final() {
return !!this.userInput && this.userInput.final;
components: {
FileUpload,
SubmissionInput,
FinalSubmission,
},
isFinalOrReadOnly() {
return this.final || this.readOnly;
},
allowsDocuments() {
return 'document' in this.userInput;
},
showSpellcheckButton() {
return this.spellcheck && process.env.VUE_APP_ENABLE_SPELLCHECK;
},
spellcheckText() {
if (!this.spellcheckLoading) {
return 'Rechtschreibung prüfen';
} else {
return 'Wird geprüft...';
}
},
},
methods: {
reopenSubmission() {
this.$emit('reopen');
computed: {
final() {
return !!this.userInput && this.userInput.final;
},
isFinalOrReadOnly() {
return this.final || this.readOnly;
},
allowsDocuments() {
return 'document' in this.userInput;
},
showSpellcheckButton() {
return this.spellcheck && process.env.VUE_APP_ENABLE_SPELLCHECK;
},
spellcheckText() {
if (!this.spellcheckLoading) {
return 'Rechtschreibung prüfen';
} else {
return 'Wird geprüft...';
}
},
},
saveInput(input) {
this.$emit('saveInput', input);
methods: {
reopenSubmission() {
this.$emit('reopen');
},
saveInput(input) {
this.$emit('saveInput', input);
},
changeDocumentUrl(documentUrl) {
this.$emit('changeDocumentUrl', documentUrl);
},
},
changeDocumentUrl(documentUrl) {
this.$emit('changeDocumentUrl', documentUrl);
},
},
};
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
.submission-form-container {
@include form-with-border;
.submission-form-container {
@include form-with-border;
margin-bottom: $medium-spacing;
margin-bottom: $medium-spacing;
display: none;
@include desktop {
display: block;
}
display: none;
@include desktop {
display: block;
}
&__inputs {
margin-bottom: 12px;
}
&__inputs {
margin-bottom: 12px;
}
&__submit {
margin-right: $medium-spacing;
}
&__submit {
margin-right: $medium-spacing;
}
&__actions {
display: flex;
align-items: center;
}
&__actions {
display: flex;
align-items: center;
}
&__document {
&:hover {
cursor: pointer;
&__document {
&:hover {
cursor: pointer;
}
}
&__spellcheck {
/* so the button does not change size when changing the text */
width: 235px;
text-align: center;
display: inline-block;
}
}
&__spellcheck {
/* so the button does not change size when changing the text */
width: 235px;
text-align: center;
display: inline-block;
}
}
</style>

91
client/src/components/content-blocks/assignment/SubmissionInput.vue
View File

@ -4,68 +4,75 @@
:placeholder="placeholder"
:readonly="readonly"
:value="inputText"
:class="{ 'submission-form__textarea--readonly': readonly }"
:class="{'submission-form__textarea--readonly': readonly}"
data-cy="submission-textarea"
rows="1"
class="submission-form__textarea"
v-auto-grow
@input="$emit('input', $event.target.value)"
/>
<div class="submission-form__save-status submission-form__save-status--saved" v-if="saved">
<div
class="submission-form__save-status submission-form__save-status--saved"
v-if="saved"
>
<tick-circle-icon class="submission-form__save-status-icon" />
</div>
<div class="submission-form__save-status submission-form__save-status--unsaved" v-if="!saved">
<div
class="submission-form__save-status submission-form__save-status--unsaved"
v-if="!saved"
>
<loading-icon class="submission-form__save-status-icon submission-form__saving-icon" />
</div>
</div>
</template>
<script>
const TickCircleIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TickCircleIcon');
const LoadingIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/LoadingIcon');
import {defineAsyncComponent} from 'vue';
const TickCircleIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TickCircleIcon'));
const LoadingIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/LoadingIcon'));
export default {
props: {
inputText: String,
saved: Boolean,
readonly: Boolean,
placeholder: {
type: String,
default: 'Ergebnis erfassen',
export default {
props: {
inputText: String,
saved: Boolean,
readonly: Boolean,
placeholder: {
type: String,
default: 'Ergebnis erfassen'
}
},
},
components: {
TickCircleIcon,
LoadingIcon,
},
};
components: {
TickCircleIcon,
LoadingIcon
}
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.submission-form {
display: flex;
flex-direction: row;
justify-content: space-between;
.submission-form {
display: flex;
flex-direction: row;
justify-content: space-between;
&__textarea {
@include borderless-textarea;
&__textarea {
@include borderless-textarea;
}
&__save-status {
position: relative;
align-items: center;
}
&__save-status-icon {
width: 22px;
height: 22px;
fill: $color-silver-dark;
}
&__saving-icon {
@include spin;
}
}
&__save-status {
position: relative;
align-items: center;
}
&__save-status-icon {
width: 22px;
height: 22px;
fill: $color-silver-dark;
}
&__saving-icon {
@include spin;
}
}
</style>

67
client/src/components/content-forms/AssignmentForm.vue
View File

@ -5,7 +5,7 @@
class="assignment-form__title skillbox-input"
placeholder="Aufgabentitel"
@input="$emit('assignment-change-title', $event.target.value, index)"
/>
>
<textarea
:value="value.assignment"
class="assignment-form__exercise-text skillbox-textarea"
@ -20,43 +20,44 @@
</template>
<script>
const InfoIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon');
import {defineAsyncComponent} from 'vue';
const InfoIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon'));
export default {
props: ['value', 'index'],
export default {
props: ['value', 'index'],
components: {
InfoIcon,
},
};
components: {
InfoIcon
}
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.assignment-form {
display: grid;
grid-auto-rows: auto;
grid-row-gap: 13px;
grid-template-columns: 40px 1fr;
grid-column-gap: 16px;
align-items: center;
.assignment-form {
display: grid;
grid-auto-rows: auto;
grid-row-gap: 13px;
grid-template-columns: 40px 1fr;
grid-column-gap: 16px;
align-items: center;
&__title {
width: $modal-input-width;
grid-column: span 2;
&__title {
width: $modal-input-width;
grid-column: span 2;
}
&__exercise-text {
width: $modal-input-width;
grid-column: span 2;
}
&__help-icon {
width: 40px;
height: 40px;
}
&__help-description {
}
}
&__exercise-text {
width: $modal-input-width;
grid-column: span 2;
}
&__help-icon {
width: 40px;
height: 40px;
}
&__help-description {
}
}
</style>

198
client/src/components/content-forms/DocumentForm.vue
View File

@ -1,119 +1,133 @@
<template>
<div class="document-form" ref="documentform">
<div v-if="!value.url" ref="uploadcare-panel" />
<div class="document-form__spinner" v-if="loading">
<div
class="document-form"
ref="documentform"
>
<div
v-if="!value.url"
ref="uploadcare-panel"
/>
<div
class="document-form__spinner"
v-if="loading"
>
<loading-icon class="document-form__loading-icon" />
</div>
<div class="document-form__uploaded" v-if="value.url">
<div
class="document-form__uploaded"
v-if="value.url"
>
<document-icon class="document-form__icon" />
<a :href="previewUrl" class="document-form__link" target="_blank">{{ previewLink }}</a>
<a
:href="previewUrl"
class="document-form__link"
target="_blank"
>{{ previewLink }}</a>
</div>
</div>
</template>
<script>
import { uploadcare } from '@/helpers/uploadcare';
import LoadingIcon from '@/components/icons/LoadingIcon';
import {uploadcare} from '@/helpers/uploadcare';
import LoadingIcon from '@/components/icons/LoadingIcon';
import {defineAsyncComponent} from 'vue';
const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
const DocumentIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon'));
export default {
props: ['value', 'index'],
export default {
props: ['value', 'index'],
components: {
LoadingIcon,
DocumentIcon,
},
data() {
return {
loading: false,
};
},
computed: {
previewUrl() {
if (this.value && this.value.url) {
return this.value.url;
}
return null;
components: {
LoadingIcon,
DocumentIcon,
},
previewLink() {
if (this.value && this.value.url) {
const parts = this.value.url.split('/');
return parts[parts.length - 1];
}
return '';
},
},
mounted() {
uploadcare(
this,
(url) => {
data() {
return {
loading: false,
};
},
computed: {
previewUrl() {
if (this.value && this.value.url) {
return this.value.url;
}
return null;
},
previewLink() {
if (this.value && this.value.url) {
const parts = this.value.url.split('/');
return parts[parts.length - 1];
}
return '';
},
},
mounted() {
uploadcare(this, url => {
this.$emit('change-url', url, this.index);
this.loading = false;
},
() => {
}, () => {
this.loading = true;
}
);
},
};
});
},
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.document-form {
&__uploaded {
display: flex;
align-items: center;
}
&__link {
text-decoration: underline;
}
&__spinner {
width: 100%;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
}
&__loading-icon {
@include spin;
fill: $color-silver-dark;
}
&__icon {
width: 30px;
height: 30px;
margin-right: $small-spacing;
}
&__file-input {
width: 0.1px;
height: 0.1px;
overflow: hidden;
opacity: 0;
position: absolute;
z-index: -1;
& + label {
cursor: pointer;
background-color: $color-silver-light;
height: 150px;
.document-form {
&__uploaded {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
font-family: $sans-serif-font-family;
font-weight: $font-weight-regular;
}
&__link {
text-decoration: underline;
}
&__spinner {
width: 100%;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
}
&__loading-icon {
@include spin;
fill: $color-silver-dark;
}
&__icon {
width: 30px;
height: 30px;
margin-right: $small-spacing;
}
&__file-input {
width: 0.1px;
height: 0.1px;
overflow: hidden;
opacity: 0;
position: absolute;
z-index: -1;
& + label {
cursor: pointer;
background-color: $color-silver-light;
height: 150px;
display: flex;
width: 100%;
justify-content: center;
align-items: center;
font-family: $sans-serif-font-family;
font-weight: $font-weight-regular;
text-decoration: underline;
}
}
}
}
</style>

125
client/src/components/content-forms/VideoForm.vue
View File

@ -1,11 +1,21 @@
<template>
<div>
<div class="video-form" v-if="!isVimeo && !isYoutube && !isSrf">
<div
class="video-form"
v-if="!isVimeo && !isYoutube && !isSrf"
>
<info-icon class="video-form__help-icon help-text__icon" />
<p class="video-form__help-description help-text__description">
Sie können Videos auf
<a class="video-form__platform-link help-text__link" href="https://youtube.com/" target="_blank">Youtube</a>
oder <a class="video-form__platform-link help-text__link" href="https://vimeo.com/" target="_blank">Vimeo</a>
Sie können Videos auf <a
class="video-form__platform-link help-text__link"
href="https://youtube.com/"
target="_blank"
>Youtube</a>
oder <a
class="video-form__platform-link help-text__link"
href="https://vimeo.com/"
target="_blank"
>Vimeo</a>
hochladen und anschliessen einen Link hier einfügen.
</p>
@ -14,7 +24,7 @@
class="video-form__video-link skillbox-input"
placeholder="Bsp: https://www.youtube.com/watch?v=dQw4w9WgXcQ"
@input="$emit('change-url', $event.target.value, index)"
/>
>
</div>
<div v-if="isYoutube">
@ -30,64 +40,67 @@
</template>
<script>
import YoutubeEmbed from '@/components/videos/YoutubeEmbed';
import VimeoEmbed from '@/components/videos/VimeoEmbed';
import SrfEmbed from '@/components/videos/SrfEmbed';
import { isVimeoUrl, isYoutubeUrl, isSrfUrl } from '@/helpers/video';
const InfoIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon');
import YoutubeEmbed from '@/components/videos/YoutubeEmbed';
import VimeoEmbed from '@/components/videos/VimeoEmbed';
import SrfEmbed from '@/components/videos/SrfEmbed';
import {isVimeoUrl, isYoutubeUrl, isSrfUrl} from '@/helpers/video';
import {defineAsyncComponent} from 'vue';
const InfoIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon'));
export default {
props: ['value', 'index'],
export default {
props: ['value', 'index'],
components: {
InfoIcon,
YoutubeEmbed,
VimeoEmbed,
SrfEmbed,
},
components: {
InfoIcon,
YoutubeEmbed,
VimeoEmbed,
SrfEmbed
},
computed: {
isYoutube() {
return isYoutubeUrl(this.value.url);
},
isVimeo() {
return isVimeoUrl(this.value.url);
},
isSrf() {
return isSrfUrl(this.value.url);
},
},
};
computed: {
isYoutube() {
return isYoutubeUrl(this.value.url);
},
isVimeo() {
return isVimeoUrl(this.value.url);
},
isSrf() {
return isSrfUrl(this.value.url);
}
}
};
</script>
<style scoped lang="scss">
@import '@/styles/_variables.scss';
@import '@/styles/_functions.scss';
@import "@/styles/_variables.scss";
@import "@/styles/_functions.scss";
.video-form {
display: grid;
grid-auto-rows: auto;
grid-template-columns: 40px 1fr;
grid-column-gap: 16px;
grid-row-gap: 20px;
align-items: center;
.video-form {
display: grid;
grid-auto-rows: auto;
grid-template-columns: 40px 1fr;
grid-column-gap: 16px;
grid-row-gap: 20px;
align-items: center;
&__help-icon {
&__help-icon {
}
&__help-description {
}
&__platform-link {
font-family: $sans-serif-font-family;
text-decoration: underline;
font-weight: $font-weight-regular;
font-size: toRem(17px);
}
&__video-link {
grid-column: 1 / span 2;
width: $modal-input-width
}
}
&__help-description {
}
&__platform-link {
font-family: $sans-serif-font-family;
text-decoration: underline;
font-weight: $font-weight-regular;
font-size: toRem(17px);
}
&__video-link {
grid-column: 1 / span 2;
width: $modal-input-width;
}
}
</style>

272
client/src/components/instruments/FilterEntry.vue
View File

@ -1,164 +1,176 @@
<template>
<a :class="typeClass" class="filter-entry" data-cy="filter-entry" :style="categoryStyle">
<a
:class="typeClass"
class="filter-entry"
data-cy="filter-entry"
:style="categoryStyle"
>
<span class="filter-entry__text">{{ text }}</span>
<span :style="activeStyle" class="filter-entry__icon-wrapper">
<chevron-right :style="{ fill: category.foreground }" class="filter-entry__icon" />
<span
:style="activeStyle"
class="filter-entry__icon-wrapper"
>
<chevron-right
:style="{fill: category.foreground}"
class="filter-entry__icon"
/>
</span>
</a>
</template>
<script>
import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
import {defineAsyncComponent} from 'vue';
const ChevronRight = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronRight'));
const ChevronRight = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronRight');
export default {
props: {
text: {
type: String,
required: true,
},
id: {
type: String,
default: '',
},
isCategory: {
type: Boolean,
default: false,
},
category: {
type: Object,
default: () => ({}),
},
},
components: {
ChevronRight,
},
apollo: {
instrumentFilter: {
query: INSTRUMENT_FILTER_QUERY,
},
},
data() {
return {
instrumentFilter: {
currentFilter: '',
export default {
props: {
text: {
type: String,
required: true,
},
};
},
id: {
type: String,
default: '',
},
isCategory: {
type: Boolean,
default: false,
},
category: {
type: Object,
default: () => ({}),
},
},
computed: {
isActive() {
if (!this.instrumentFilter.currentFilter) {
return this.id === '';
}
// eslint-disable-next-line
const [_, identifier] = this.instrumentFilter.currentFilter.split(':');
return this.id === identifier;
components: {
ChevronRight,
},
// todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
activeStyle() {
if (this.isActive) {
return {
backgroundColor: this.category.background,
};
}
return {};
apollo: {
instrumentFilter: {
query: INSTRUMENT_FILTER_QUERY,
},
},
// todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
categoryStyle() {
if (this.isCategory) {
return {
color: this.category.foreground,
};
}
return {};
},
// todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
typeClass() {
data() {
return {
'filter-entry--active': this.isActive,
'filter-entry--category': this.isCategory,
instrumentFilter: {
currentFilter: '',
},
};
},
},
};
computed: {
isActive() {
if (!this.instrumentFilter.currentFilter) {
return this.id === '';
}
// eslint-disable-next-line
const [_, identifier] = this.instrumentFilter.currentFilter.split(':');
return this.id === identifier;
},
// todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
activeStyle() {
if (this.isActive) {
return {
backgroundColor: this.category.background,
};
}
return {};
},
// todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
categoryStyle() {
if (this.isCategory) {
return {
color: this.category.foreground,
};
}
return {};
},
// todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
typeClass() {
return {
'filter-entry--active': this.isActive,
'filter-entry--category': this.isCategory,
};
},
},
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
.filter-entry {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
&__text {
@include sub-heading;
line-height: 1.5;
color: inherit;
}
&__icon-wrapper {
.filter-entry {
display: flex;
justify-content: space-between;
align-items: center;
justify-content: center;
height: 20px;
width: 20px;
border-radius: 10px;
}
cursor: pointer;
&__icon {
width: 10px;
height: 10px;
}
$root: &;
@mixin filter-block($color) {
&#{$root}--category {
color: $color;
&__text {
@include sub-heading;
line-height: 1.5;
color: inherit;
}
&#{$root}--active {
#{$root}__icon-wrapper {
background-color: $color;
&__icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 20px;
width: 20px;
border-radius: 10px;
}
&__icon {
width: 10px;
height: 10px;
}
$root: &;
@mixin filter-block($color) {
&#{$root}--category {
color: $color;
}
&#{$root}--active {
#{$root}__icon-wrapper {
background-color: $color;
}
}
#{$root}__icon {
fill: $color;
}
}
#{$root}__icon {
fill: $color;
}
}
&--language-communication {
@include filter-block($color-accent-1-dark);
}
&--society {
@include filter-block($color-accent-2-dark);
}
&--interdisciplinary {
@include filter-block($color-accent-4-dark);
}
&--active {
#{$root}__text {
font-weight: 600;
&--language-communication {
@include filter-block($color-accent-1-dark);
}
#{$root}__icon-wrapper {
background-color: black;
&--society {
@include filter-block($color-accent-2-dark);
}
#{$root}__icon {
fill: white;
&--interdisciplinary {
@include filter-block($color-accent-4-dark);
}
&--active {
#{$root}__text {
font-weight: 600;
}
#{$root}__icon-wrapper {
background-color: black;
}
#{$root}__icon {
fill: white;
}
}
}
}
</style>

17
client/src/components/modals/index.js
View File

@ -1,11 +1,12 @@
const Modal = () => import(/* webpackChunkName: "modals" */ '@/components/Modal');
const FullscreenImage = () => import(/* webpackChunkName: "modals" */ '@/components/FullscreenImage');
const FullscreenInfographic = () => import(/* webpackChunkName: "modals" */ '@/components/FullscreenInfographic');
const FullscreenVideo = () => import(/* webpackChunkName: "modals" */ '@/components/FullscreenVideo');
const DeactivatePerson = () => import(/* webpackChunkName: "modals" */ '@/components/profile/DeactivatePerson');
const SnapshotCreated = () => import(/* webpackChunkName: "modals" */ '@/components/modules/SnapshotCreated');
const ChangeVisibility = () => import(/* webpackChunkName: "modals" */ '@/components/rooms/ChangeVisibility');
const Confirm = () => import(/* webpackChunkName: "modals" */ '@/components/modals/Confirm');
import {defineAsyncComponent} from 'vue';
const Modal = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/Modal'));
const FullscreenImage = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/FullscreenImage'));
const FullscreenInfographic = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/FullscreenInfographic'));
const FullscreenVideo = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/FullscreenVideo'));
const DeactivatePerson = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/profile/DeactivatePerson'));
const SnapshotCreated = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/modules/SnapshotCreated'));
const ChangeVisibility = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/rooms/ChangeVisibility'));
const Confirm = defineAsyncComponent(() => import(/* webpackChunkName: "modals" */'@/components/modals/Confirm'));
export default {
Modal,

114
client/src/components/notes/BookmarkActions.vue
View File

@ -1,7 +1,10 @@
<template>
<div class="bookmark-actions" v-if="!editMode">
<div
class="bookmark-actions"
v-if="!editMode"
>
<a
:class="{ 'bookmark-actions__action--bookmarked': bookmarked }"
:class="{'bookmark-actions__action--bookmarked': bookmarked}"
class="bookmark-actions__action bookmark-actions__bookmark"
data-cy="bookmark-action"
@click="$emit('bookmark')"
@ -29,73 +32,74 @@
</template>
<script>
const BookmarkIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/BookmarkIcon');
const AddNoteIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/AddNoteIcon');
const NoteIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/NoteIcon');
import {defineAsyncComponent} from 'vue';
const BookmarkIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/BookmarkIcon'));
const AddNoteIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/AddNoteIcon'));
const NoteIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/NoteIcon'));
export default {
props: {
bookmarked: {
type: Boolean,
default: false,
export default {
props: {
bookmarked: {
type: Boolean,
default: false
},
note: {
type: [Object, Boolean],
default: false
},
editMode: {
type: Boolean,
default: false
}
},
note: {
type: [Object, Boolean],
default: false,
components: {
BookmarkIcon,
AddNoteIcon,
NoteIcon
},
editMode: {
type: Boolean,
default: false,
},
},
components: {
BookmarkIcon,
AddNoteIcon,
NoteIcon,
},
};
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.bookmark-actions {
height: 100%;
min-height: 60px;
.bookmark-actions {
height: 100%;
min-height: 60px;
padding: 0 2 * $large-spacing;
position: absolute;
right: -5 * $large-spacing;
padding: 0 2*$large-spacing;
position: absolute;
right: -5*$large-spacing;
display: none;
display: none;
@include desktop {
display: flex;
}
@include desktop {
display: flex;
}
flex-direction: column;
align-content: center;
flex-direction: column;
align-content: center;
&__action {
opacity: 0;
transition: opacity 0.3s;
cursor: pointer;
width: 26px;
display: flex;
justify-content: center;
&__action {
opacity: 0;
transition: opacity 0.3s;
cursor: pointer;
width: 26px;
display: flex;
justify-content: center;
&--bookmarked,
&--noted {
opacity: 1;
&--bookmarked, &--noted {
opacity: 1;
}
}
$parent: &;
&:hover {
#{$parent}__action {
opacity: 1;
}
}
}
$parent: &;
&:hover {
#{$parent}__action {
opacity: 1;
}
}
}
</style>

40
client/src/components/objective-groups/ObjectiveForm.vue
View File

@ -6,36 +6,40 @@
placeholder="Lernziel erfassen..."
@input="$emit('input', $event)"
/>
<a class="icon-button" @click="$emit('delete')">
<a
class="icon-button"
@click="$emit('delete')"
>
<trash-icon class="icon-button__icon icon-button__icon--subtle" />
</a>
</div>
</template>
<script>
import ModalInput from '@/components/ModalInput';
const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
import ModalInput from '@/components/ModalInput';
import {defineAsyncComponent} from 'vue';
const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon'));
export default {
props: ['objective'],
export default {
props: ['objective'],
components: {
ModalInput,
TrashIcon,
},
};
components: {
ModalInput,
TrashIcon
}
};
</script>
<style scoped lang="scss">
@import '@/styles/_variables.scss';
@import "@/styles/_variables.scss";
.objective-form {
display: grid;
grid-template-columns: 1fr 50px;
margin-bottom: 10px;
.objective-form {
display: grid;
grid-template-columns: 1fr 50px;
margin-bottom: 10px;
&__input {
width: $modal-input-width;
&__input {
width: $modal-input-width;
}
}
}
</style>

64
client/src/components/portfolio/AddProjectEntry.vue
View File

@ -1,45 +1,49 @@
<template>
<a class="add-project-entry" @click="addProjectEntry">
<a
class="add-project-entry"
@click="addProjectEntry"
>
<plus-icon class="add-project-entry__icon" />
<span class="add-project-entry__text">Beitrag erfassen</span>
</a>
</template>
<script>
const PlusIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/PlusIcon');
export default {
props: ['project'],
components: { PlusIcon },
import {defineAsyncComponent} from 'vue';
const PlusIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/PlusIcon'));
export default {
props: ['project'],
components: {PlusIcon},
methods: {
addProjectEntry() {
this.$store.dispatch('addProjectEntry', this.project);
},
},
};
methods: {
addProjectEntry() {
this.$store.dispatch('addProjectEntry', this.project);
}
}
};
</script>
<style lang="scss" scoped>
@import '~styles/helpers';
@import "~styles/helpers";
.add-project-entry {
display: flex;
align-items: center;
justify-content: center;
border: 2px solid $color-brand;
border-radius: $default-border-radius;
cursor: pointer;
.add-project-entry {
display: flex;
align-items: center;
justify-content: center;
border: 2px solid $color-brand;
border-radius: $default-border-radius;
cursor: pointer;
&__icon {
width: 20px;
height: 20px;
fill: $color-brand;
margin-right: $small-spacing;
&__icon {
width: 20px;
height: 20px;
fill: $color-brand;
margin-right: $small-spacing;
}
&__text {
@include navigation-link;
color: $color-brand;
}
}
&__text {
@include navigation-link;
color: $color-brand;
}
}
</style>

71
client/src/components/portfolio/PortfolioOnboarding.vue
View File

@ -1,9 +1,25 @@
<template>
<div class="portfolio-onboarding">
<h1 class="portfolio-onboarding__heading" data-cy="page-title">Portfolio</h1>
<portfolio-illustration data-cy="portfolio-onboarding-illustration" class="portfolio-onboarding__illustration" />
<h2 class="portfolio-onboarding__subheading" data-cy="portfolio-onboarding-subtitle">Woran denken Sie gerade?</h2>
<p class="portfolio-onboarding__text" data-cy="portfolio-onboarding-text">
<h1
class="portfolio-onboarding__heading"
data-cy="page-title"
>
Portfolio
</h1>
<portfolio-illustration
data-cy="portfolio-onboarding-illustration"
class="portfolio-onboarding__illustration"
/>
<h2
class="portfolio-onboarding__subheading"
data-cy="portfolio-onboarding-subtitle"
>
Woran denken Sie gerade?
</h2>
<p
class="portfolio-onboarding__text"
data-cy="portfolio-onboarding-text"
>
Hier können Sie Projekte erstellen, um Ihre Gedanken festzuhalten oder Ihre Arbeit zu dokumentieren.
</p>
@ -12,33 +28,34 @@
</template>
<script>
const PortfolioIllustration = () => import('@/components/illustrations/PortfolioIllustration.vue');
const CreateProjectButton = () => import('@/components/portfolio/CreateProjectButton.vue');
export default {
components: { CreateProjectButton, PortfolioIllustration },
};
import {defineAsyncComponent} from 'vue';
const PortfolioIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/PortfolioIllustration'));
const CreateProjectButton = defineAsyncComponent(() => import('@/components/portfolio/CreateProjectButton'));
export default {
components: {CreateProjectButton, PortfolioIllustration},
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
.portfolio-onboarding {
@include onboarding-page;
.portfolio-onboarding {
@include onboarding-page;
&__heading {
@include heading-1;
&__heading {
@include heading-1;
}
&__subheading {
@include heading-2;
}
&__illustration {
@include onboarding-illustration;
}
&__text {
@include onboarding-text;
}
}
&__subheading {
@include heading-2;
}
&__illustration {
@include onboarding-illustration;
}
&__text {
@include onboarding-text;
}
}
</style>

107
client/src/components/portfolio/ProjectActions.vue
View File

@ -1,20 +1,48 @@
<template>
<div class="project-actions" data-cy="project-actions">
<a class="project-actions__more-link" @click.stop="toggleMenu">
<div
class="project-actions"
data-cy="project-actions"
>
<a
class="project-actions__more-link"
@click.stop="toggleMenu"
>
<ellipses />
</a>
<widget-popover class="project-actions__popover" v-if="showMenu" @hide-me="showMenu = false">
<widget-popover
class="project-actions__popover"
v-if="showMenu"
@hide-me="showMenu = false"
>
<li class="popover-links__link">
<a data-cy="delete-project" @click="deleteProject(slug)">Projekt löschen</a>
<a
data-cy="delete-project"
@click="deleteProject(slug)"
>Projekt löschen</a>
</li>
<li class="popover-links__link">
<a data-cy="edit-project" @click="editProject(slug)">Projekt bearbeiten</a>
<a
data-cy="edit-project"
@click="editProject(slug)"
>Projekt bearbeiten</a>
</li>
<li class="popover-links__link" v-if="!final && shareButtons">
<a data-cy="share-project" @click="updateProjectShareState(slug, true)">Projekt teilen</a>
<li
class="popover-links__link"
v-if="!final && shareButtons"
>
<a
data-cy="share-project"
@click="updateProjectShareState(slug, true)"
>Projekt teilen</a>
</li>
<li class="popover-links__link" v-if="final && shareButtons">
<a data-cy="unshare-project" @click="updateProjectShareState(slug, false)">Projekt nicht mehr teilen</a>
<li
class="popover-links__link"
v-if="final && shareButtons"
>
<a
data-cy="unshare-project"
@click="updateProjectShareState(slug, false)"
>Projekt nicht mehr teilen</a>
</li>
</widget-popover>
</div>
@ -27,8 +55,9 @@ import DELETE_PROJECT_MUTATION from '@/graphql/gql/mutations/deleteProject.gql';
import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
import updateProjectShareState from '@/mixins/update-project-share-state';
import { removeAtIndex } from '@/graphql/immutable-operations.ts';
const Ellipses = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Ellipses.vue');
import {removeAtIndex} from '@/graphql/immutable-operations.ts';
import {defineAsyncComponent} from 'vue';
const Ellipses = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Ellipses.vue'));
export default {
props: {
@ -64,50 +93,42 @@ export default {
this.showMenu = !this.showMenu;
},
editProject(slug) {
this.$router.push({ name: 'edit-project', params: { slug } });
this.$router.push({name: 'edit-project', params: {slug}});
},
deleteProject(slug) {
this.$apollo
.mutate({
mutation: DELETE_PROJECT_MUTATION,
variables: {
input: {
slug,
},
this.$apollo.mutate({
mutation: DELETE_PROJECT_MUTATION,
variables: {
input: {
slug,
},
update(
store,
{
data: {
deleteProject: { success },
},
}
) {
if (success) {
const { projects: prevProjects } = store.readQuery({ query: PROJECTS_QUERY });
},
update(store, {data: {deleteProject: {success}}}) {
if (success) {
const {projects: prevProjects} = store.readQuery({query: PROJECTS_QUERY});
if (prevProjects) {
let index = prevProjects.findIndex((project) => project.slug === slug);
const projects = removeAtIndex(prevProjects, index);
const data = {
projects,
};
store.writeQuery({ query: PROJECTS_QUERY, data });
}
if (prevProjects) {
let index = prevProjects.findIndex(project => project.slug === slug);
const projects = removeAtIndex(prevProjects, index);
const data = {
projects
};
store.writeQuery({query: PROJECTS_QUERY, data});
}
},
})
.then(() => {
this.$router.push('/portfolio');
});
}
},
}).then(() => {
this.$router.push('/portfolio');
});
},
},
};
</script>
<style scoped lang="scss">
@import '~styles/_helpers.scss';
@import "~styles/_helpers.scss";
.project-actions {
position: relative;

222
client/src/components/portfolio/ProjectEntry.vue
View File

@ -1,22 +1,44 @@
<template>
<div class="project-entry" data-cy="project-entry">
<more-options-widget class="project-entry__more" data-cy="project-entry-more" v-if="!readOnly">
<div
class="project-entry"
data-cy="project-entry"
>
<more-options-widget
class="project-entry__more"
data-cy="project-entry-more"
v-if="!readOnly"
>
<li class="popover-links__link">
<a data-cy="edit-project-entry" @click="editProjectEntry()">Eintrag bearbeiten</a>
<a
data-cy="edit-project-entry"
@click="editProjectEntry()"
>Eintrag bearbeiten</a>
</li>
<li class="popover-links__link">
<a data-cy="delete-project-entry" @click="deleteProjectEntry()">Eintrag löschen</a>
<a
data-cy="delete-project-entry"
@click="deleteProjectEntry()"
>Eintrag löschen</a>
</li>
</more-options-widget>
<h3 class="project-entry__heading" data-cy="project-entry-date">
<h3
class="project-entry__heading"
data-cy="project-entry-date"
>
{{ createdDateTime }}
</h3>
<p class="project-entry__paragraph" data-cy="project-entry-activity">
<p
class="project-entry__paragraph"
data-cy="project-entry-activity"
>
{{ description }}
</p>
<p class="project-entry__paragraph" v-if="documentUrl">
<document-block :value="{ url: documentUrl }" />
<p
class="project-entry__paragraph"
v-if="documentUrl"
>
<document-block :value="{url: documentUrl}" />
</p>
<div class="project-entry__date">
{{ createdDate }}
@ -25,116 +47,110 @@
</template>
<script>
import MoreOptionsWidget from '@/components/MoreOptionsWidget';
import MoreOptionsWidget from '@/components/MoreOptionsWidget';
import DELETE_PROJECT_ENTRY_MUTATION from '@/graphql/gql/mutations/deleteProjectEntry.gql';
import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
import { dateFilter, dateTimeFilter } from '@/filters/date-filter';
import { removeAtIndex } from '@/graphql/immutable-operations.ts';
import DELETE_PROJECT_ENTRY_MUTATION from '@/graphql/gql/mutations/deleteProjectEntry.gql';
import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
import {dateFilter, dateTimeFilter} from '@/filters/date-filter';
import {removeAtIndex} from '@/graphql/immutable-operations.ts';
import {defineAsyncComponent} from 'vue';
const DocumentBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock'));
const DocumentBlock = () =>
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/DocumentBlock');
export default {
props: ['description', 'documentUrl', 'created', 'id', 'readOnly'],
components: {
DocumentBlock,
MoreOptionsWidget,
},
computed: {
createdDate() {
return dateFilter(this.created);
export default {
props: ['description', 'documentUrl', 'created', 'id', 'readOnly'],
components: {
DocumentBlock,
MoreOptionsWidget,
},
createdDateTime() {
return dateTimeFilter(this.created);
},
},
methods: {
editProjectEntry() {
this.$store.dispatch('editProjectEntry', this.id);
computed: {
createdDate() {
return dateFilter(this.created);
},
createdDateTime() {
return dateTimeFilter(this.created);
},
},
deleteProjectEntry() {
const projectEntry = this; // otherwise we run into scope errors
this.$apollo.mutate({
mutation: DELETE_PROJECT_ENTRY_MUTATION,
variables: {
input: {
id: this.id,
},
},
update(
store,
{
data: {
deleteProjectEntry: { success },
methods: {
editProjectEntry() {
this.$store.dispatch('editProjectEntry', this.id);
},
deleteProjectEntry() {
const projectEntry = this; // otherwise we run into scope errors
this.$apollo.mutate({
mutation: DELETE_PROJECT_ENTRY_MUTATION,
variables: {
input: {
id: this.id,
},
}
) {
if (success) {
const query = PROJECT_QUERY;
const variables = {
slug: projectEntry.$route.params.slug,
};
const { project } = store.readQuery({ query, variables });
if (project) {
const index = project.entries.findIndex((entry) => entry.id === projectEntry.id);
const entries = removeAtIndex(project.entries, index);
const data = {
project: {
...project,
entries,
},
},
update(store, {data: {deleteProjectEntry: {success}}}) {
if (success) {
const query = PROJECT_QUERY;
const variables = {
slug: projectEntry.$route.params.slug,
};
store.writeQuery({ query, variables, data });
const {project} = store.readQuery({query, variables});
if (project) {
const index = project.entries.findIndex(entry => entry.id === projectEntry.id);
const entries = removeAtIndex(project.entries, index);
const data = {
project: {
...project,
entries,
},
};
store.writeQuery({query, variables, data});
}
}
}
},
});
},
});
},
},
},
};
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.project-entry {
background-color: $color-white;
border-radius: $default-border-radius;
padding: 30px 20px;
position: relative;
.project-entry {
background-color: $color-white;
border-radius: $default-border-radius;
padding: 30px 20px;
position: relative;
&__heading {
font-size: toRem(22px);
margin-bottom: 6px;
}
&__paragraph {
margin-bottom: 30px;
white-space: pre-line;
}
&__date {
font-family: $sans-serif-font-family;
color: $color-silver-dark;
font-size: toRem(17px);
}
&__link {
cursor: pointer;
@include heading-4;
}
&__more {
position: absolute;
top: 10px;
right: 10px;
display: none;
@include desktop {
display: block;
&__heading {
font-size: toRem(22px);
margin-bottom: 6px;
}
&__paragraph {
margin-bottom: 30px;
white-space: pre-line;
}
&__date {
font-family: $sans-serif-font-family;
color: $color-silver-dark;
font-size: toRem(17px);
}
&__link {
cursor: pointer;
@include heading-4;
}
&__more {
position: absolute;
top: 10px;
right: 10px;
display: none;
@include desktop {
display: block;
}
}
}
}
</style>

168
client/src/components/portfolio/ProjectEntryForm.vue
View File

@ -1,7 +1,12 @@
<template>
<modal :hide-header="false">
<template #header>
<h2 class="project-entry-modal__heading" data-cy="modal-title">Beitrag erfassen</h2>
<h2
class="project-entry-modal__heading"
data-cy="modal-title"
>
Beitrag erfassen
</h2>
</template>
<div class="project-entry-modal">
@ -30,26 +35,6 @@
</div>
</div>
</div>
<<<<<<< HEAD
<div slot="footer">
<a class="button button--primary" data-cy="modal-save-button" @click="$emit('save', localProjectEntry)"
>Speichern</a
>
<a class="button" @click="$emit('hide')">Abbrechen</a>
</div>
||||||| parent of a423cfde (Apply code changes from migration guide for Vue 3)
<div slot="footer">
<a
class="button button--primary"
data-cy="modal-save-button"
@click="$emit('save', localProjectEntry)"
>Speichern</a>
<a
class="button"
@click="$emit('hide')"
>Abbrechen</a>
</div>
=======
<template #footer>
<a
class="button button--primary"
@ -61,105 +46,96 @@
@click="$emit('hide')"
>Abbrechen</a>
</template>
>>>>>>> a423cfde (Apply code changes from migration guide for Vue 3)
</modal>
</template>
<script>
import Modal from '@/components/Modal';
import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
import Modal from '@/components/Modal';
import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
<<<<<<< HEAD
import { PROJECT_ENTRY_TEMPLATE } from '@/consts/strings.consts';
const FileUpload = () => import('@/components/ui/file-upload/FileUpload.vue');
||||||| parent of a423cfde (Apply code changes from migration guide for Vue 3)
import {PROJECT_ENTRY_TEMPLATE} from '@/consts/strings.consts';
const FileUpload = () => import('@/components/ui/file-upload/FileUpload');
=======
import {PROJECT_ENTRY_TEMPLATE} from '@/consts/strings.consts';
const FileUpload = () => import('@/components/ui/file-upload/FileUpload');
>>>>>>> a423cfde (Apply code changes from migration guide for Vue 3)
import {defineAsyncComponent} from 'vue';
const FileUpload = defineAsyncComponent(() => import('@/components/ui/file-upload/FileUpload'));
export default {
props: {
projectEntry: {
type: Object,
default: null,
export default {
props: {
projectEntry: {
type: Object,
default: null,
},
},
},
components: {
FileUpload,
ButtonWithIconAndText,
Modal,
},
components: {
FileUpload,
ButtonWithIconAndText,
Modal,
},
data() {
return {
localProjectEntry: Object.assign(
{},
{
data() {
return {
localProjectEntry: Object.assign({}, {
...this.projectEntry,
}
),
};
},
}),
};
},
methods: {
setDocumentUrl(url) {
this.localProjectEntry.documentUrl = url;
methods: {
setDocumentUrl(url) {
this.localProjectEntry.documentUrl = url;
},
useTemplate() {
this.localProjectEntry.description = `${this.localProjectEntry.description}${PROJECT_ENTRY_TEMPLATE}`;
},
},
useTemplate() {
this.localProjectEntry.description = `${this.localProjectEntry.description}${PROJECT_ENTRY_TEMPLATE}`;
},
},
};
};
</script>
<style lang="scss" scoped>
@import '~styles/helpers';
@import "~styles/helpers";
.project-entry-modal {
display: flex;
flex-direction: column;
&__form-field {
@include inputstyle;
padding: 0;
.project-entry-modal {
display: flex;
flex-direction: column;
grid-template-rows: auto 1rem;
grid-template-columns: 1fr 1fr;
width: 100%;
}
&__textarea {
@include auto-grow;
border: 0;
min-height: 400px;
padding: $medium-spacing;
}
&__buttons {
display: grid;
grid-template-columns: 1fr 1fr;
padding: $medium-spacing;
}
&__button {
@include regular-text;
&--template {
&__form-field {
@include inputstyle;
padding: 0;
display: flex;
flex-direction: column;
grid-template-rows: auto 1rem;
grid-template-columns: 1fr 1fr;
width: 100%;
}
&--document {
&__textarea {
@include auto-grow;
border: 0;
min-height: 400px;
padding: $medium-spacing;
}
&__buttons {
display: grid;
grid-template-columns: 1fr 1fr;
padding: $medium-spacing;
}
&__button {
@include regular-text;
&--template {
}
&--document {
}
}
&__heading {
@include heading-3;
margin-bottom: 0;
}
}
&__heading {
@include heading-3;
margin-bottom: 0;
}
}
</style>

47
client/src/components/portfolio/ShareLink.vue
View File

@ -9,35 +9,36 @@
</template>
<script>
const ShareIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ShareIcon');
import {defineAsyncComponent} from 'vue';
const ShareIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ShareIcon'));
export default {
props: {
final: {
type: Boolean,
default: false,
export default {
props: {
final: {
type: Boolean,
default: false,
},
},
},
components: { ShareIcon },
};
components: {ShareIcon},
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
.share-icon {
display: flex;
align-items: center;
cursor: pointer;
.share-icon {
display: flex;
align-items: center;
cursor: pointer;
&__icon {
width: 20px;
height: 20px;
margin-right: $small-spacing;
&__icon {
width: 20px;
height: 20px;
margin-right: $small-spacing;
}
&__text {
@include large-link;
}
}
&__text {
@include large-link;
}
}
</style>

84
client/src/components/profile/ActivityEntry.vue
View File

@ -7,60 +7,64 @@
<slot />
</div>
<div class="activity-entry__link" @click="$emit('link')">
<div
class="activity-entry__link"
@click="$emit('link')"
>
<chevron-right class="activity-entry__icon" />
</div>
</div>
</template>
<script>
const ChevronRight = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronRight');
import {defineAsyncComponent} from 'vue';
const ChevronRight = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronRight'));
export default {
props: ['title'],
export default {
props: ['title'],
components: {
ChevronRight,
},
};
components: {
ChevronRight
}
};
</script>
<style scoped lang="scss">
@import '@/styles/_variables.scss';
@import '@/styles/_mixins.scss';
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.activity-entry {
padding: $small-spacing 0;
border-bottom: 1px solid $color-silver;
display: flex;
justify-content: space-between;
&__title {
@include small-text;
// todo: make style definition for small text and silver color
color: $color-silver-dark;
margin-bottom: 0;
}
&__content {
flex-grow: 1;
@include regular-text;
line-height: $default-line-height;
}
&__link {
.activity-entry {
padding: $small-spacing 0;
border-bottom: 1px solid $color-silver;
display: flex;
flex-grow: 0;
align-content: center;
cursor: pointer;
}
justify-content: space-between;
&__icon {
fill: $color-brand;
width: 30px;
}
&__title {
@include small-text;
// todo: make style definition for small text and silver color
color: $color-silver-dark;
margin-bottom: 0;
}
:deep(p) {
@include regular-text;
&__content {
flex-grow: 1;
@include regular-text;
line-height: $default-line-height;
}
&__link {
display: flex;
flex-grow: 0;
align-content: center;
cursor: pointer;
}
&__icon {
fill: $color-brand;
width: 30px;
}
/deep/ p {
@include regular-text;
}
}
}
</style>

5
client/src/components/profile/Avatar.vue
View File

@ -35,9 +35,10 @@
<script>
import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
import {defineAsyncComponent} from 'vue';
const DefaultAvatar = () => import(/* webpackChunkName: "icons" */'@/components/icons/DefaultAvatar');
const PenIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/PenIcon');
const DefaultAvatar = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DefaultAvatar'));
const PenIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/PenIcon'));
export default {
props: {

67
client/src/components/profile/ContentBookmark.vue
View File

@ -1,9 +1,15 @@
<template>
<div class="content-bookmark module-activity-entry">
<!-- eslint-disable vue/no-v-html -->
<div v-if="content.type === 'text_block'" v-html="text" />
<div
v-if="content.type === 'text_block'"
v-html="text"
/>
<div v-else-if="content.type === 'link_block'">
<link-block :value="content.value" :no-margin="true" />
<link-block
:value="content.value"
:no-margin="true"
/>
</div>
<p v-else>
{{ type }}
@ -12,34 +18,35 @@
</template>
<script>
const LinkBlock = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/LinkBlock');
import {defineAsyncComponent} from 'vue';
const LinkBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/LinkBlock'));
export default {
props: ['bookmark'],
components: { LinkBlock },
computed: {
content() {
return this.bookmark.contentBlock
? this.bookmark.contentBlock.contents.find((e) => e.id === this.bookmark.uuid)
: this.bookmark.instrument.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';
case 'image_url_block':
return 'Bild';
default:
return this.content.type;
export default {
props: ['bookmark'],
components: {LinkBlock},
computed: {
content() {
return this.bookmark.contentBlock
? this.bookmark.contentBlock.contents.find(e => e.id === this.bookmark.uuid)
: this.bookmark.instrument.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';
case 'image_url_block':
return 'Bild';
default:
return this.content.type;
}
}
},
},
};
}
};
</script>

33
client/src/components/profile/EditGroupName.vue
View File

@ -1,27 +1,32 @@
<template>
<a class="edit-group-name" data-cy="edit-group-name-link" @click="$emit('edit')">
<a
class="edit-group-name"
data-cy="edit-group-name-link"
@click="$emit('edit')"
>
<pen-icon class="edit-group-name__icon" />
</a>
</template>
<script>
const PenIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/PenIcon');
import {defineAsyncComponent} from 'vue';
const PenIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/PenIcon'));
export default {
components: {
PenIcon,
},
};
export default {
components: {
PenIcon
}
};
</script>
<style scoped lang="scss">
@import '~styles/_variables.scss';
@import "~styles/_variables.scss";
.edit-group-name {
&__icon {
width: 20px;
height: 20px;
fill: $color-brand;
.edit-group-name {
&__icon {
width: 20px;
height: 20px;
fill: $color-brand;
}
}
}
</style>

128
client/src/components/profile/Profile.vue
View File

@ -1,101 +1,105 @@
<template>
<div class="profile">
<h1 class="profile__header">Profilbild</h1>
<div class="profile-avatar" v-if="me.avatarUrl">
<h1 class="profile__header">
Profilbild
</h1>
<div
class="profile-avatar"
v-if="me.avatarUrl"
>
<div class="profile-avatar__image">
<avatar :avatar-url="me.avatarUrl" />
</div>
<a class="profile-avatar__remove icon-button" @click="deleteAvatar()">
<a
class="profile-avatar__remove icon-button"
@click="deleteAvatar()"
>
<trash-icon class="profile-avatar__remove-icon icon-button__icon icon-button__icon--subtle" />
</a>
</div>
<avatar-upload-form v-else @avatarUpdate="updateAvatar" />
<avatar-upload-form
v-else
@avatarUpdate="updateAvatar"
/>
</div>
</template>
<script>
import UPDATE_AVATAR_QUERY from '@/graphql/gql/mutations/updateAvatarUrl.gql';
import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
import AvatarUploadForm from '@/components/profile/AvatarUploadForm';
import Avatar from '@/components/profile/Avatar';
const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
import UPDATE_AVATAR_QUERY from '@/graphql/gql/mutations/updateAvatarUrl.gql';
import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
import AvatarUploadForm from '@/components/profile/AvatarUploadForm';
import Avatar from '@/components/profile/Avatar';
import {defineAsyncComponent} from 'vue';
const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon'));
export default {
components: {
AvatarUploadForm,
Avatar,
TrashIcon,
},
export default {
components: {
AvatarUploadForm,
Avatar,
TrashIcon
},
data() {
return {
data() {
return {
me: {
avatarUrl: ''
}
};
},
apollo: {
me: {
avatarUrl: '',
query: ME_QUERY,
},
};
},
apollo: {
me: {
query: ME_QUERY,
},
},
methods: {
deleteAvatar() {
this.updateAvatar('');
},
updateAvatar(url) {
this.$apollo
.mutate({
methods: {
deleteAvatar () {
this.updateAvatar('');
},
updateAvatar (url) {
this.$apollo.mutate({
mutation: UPDATE_AVATAR_QUERY,
variables: {
input: {
avatarUrl: url,
},
},
update(
store,
{
data: {
updateAvatar: { success },
},
avatarUrl: url
}
) {
},
update(store, {data: {updateAvatar: {success}}}) {
if (success) {
const { me } = store.readQuery({ query: ME_QUERY });
const {me} = store.readQuery({query: ME_QUERY});
if (me) {
const data = {
me: {
...me,
avatarUrl: url,
},
avatarUrl: url
}
};
store.writeQuery({ query: ME_QUERY, data });
store.writeQuery({query: ME_QUERY, data});
}
}
},
})
.catch((error) => {
}
}).catch((error) => {
console.warn('UploadError', error);
});
},
},
};
}
}
};
</script>
<style scoped lang="scss">
@import '@/styles/_variables.scss';
@import "@/styles/_variables.scss";
.profile-avatar {
display: flex;
flex-direction: row;
.profile-avatar {
display: flex;
flex-direction: row;
&__image {
height: 230px;
width: 230px;
&__image {
height: 230px;
width: 230px;
}
}
.profile-avatar {
margin-bottom: $large-spacing;
}
}
.profile-avatar {
margin-bottom: $large-spacing;
}
</style>

3
client/src/components/profile/ProfileSidebar.vue
View File

@ -84,7 +84,8 @@
import me from '@/mixins/me';
import LogoutWidget from '@/components/LogoutWidget';
import {MY_TEAM} from '@/router/me.names';
const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
import {defineAsyncComponent} from 'vue';
const Cross = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon'));
export default {

91
client/src/components/rooms/AddRoomEntryButton.vue
View File

@ -1,60 +1,65 @@
<template>
<router-link class="add-room-entry-button" data-cy="add-room-entry-button" :to="addRoomEntryRoute">
<router-link
class="add-room-entry-button"
data-cy="add-room-entry-button"
:to="addRoomEntryRoute"
>
<plus-icon class="add-room-entry-button__icon" />
<span class="add-room-entry-button__text">Beitrag erfassen</span>
</router-link>
</template>
<script>
import { ADD_ROOM_ENTRY_PAGE } from '@/router/room.names';
const PlusIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/PlusIcon');
import {defineAsyncComponent} from 'vue';
const PlusIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/PlusIcon'));
import { ADD_ROOM_ENTRY_PAGE } from '@/router/room.names';
export default {
props: ['parent'],
export default {
props: ['parent'],
components: {
PlusIcon,
},
components: {
PlusIcon,
},
data() {
return {
addRoomEntryRoute: {
name: ADD_ROOM_ENTRY_PAGE,
},
};
},
};
data() {
return {
addRoomEntryRoute: {
name: ADD_ROOM_ENTRY_PAGE,
},
};
},
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.add-room-entry-button {
border: 2px solid $color-white;
border-radius: 12px;
height: 150px;
box-sizing: border-box;
margin-bottom: 25px;
justify-content: center;
align-items: center;
break-inside: avoid-column;
overflow: hidden;
cursor: pointer;
.add-room-entry-button {
border: 2px solid $color-white;
border-radius: 12px;
height: 150px;
box-sizing: border-box;
margin-bottom: 25px;
justify-content: center;
align-items: center;
break-inside: avoid-column;
overflow: hidden;
cursor: pointer;
display: none;
@include desktop {
display: flex;
display: none;
@include desktop {
display: flex;
}
&__icon {
width: 20px;
fill: $color-white;
margin-right: $small-spacing;
}
&__text {
@include regular-text;
color: $color-white;
}
}
&__icon {
width: 20px;
fill: $color-white;
margin-right: $small-spacing;
}
&__text {
@include regular-text;
color: $color-white;
}
}
</style>

76
client/src/components/rooms/EntryCountWidget.vue
View File

@ -1,56 +1,56 @@
<template>
<div class="entry-count-widget">
<component :is="icon" />
<span data-cy="entry-count"
>{{ entryCount }} <template v-if="verbose">{{ entryCount === 1 ? 'Beitrag' : 'Beiträge' }}</template></span
>
<span data-cy="entry-count">{{ entryCount }} <template v-if="verbose">{{ entryCount === 1 ? 'Beitrag' : 'Beiträge' }}</template></span>
</div>
</template>
<script>
import SpeechBubbleIcon from '@/components/icons/SpeechBubbleIcon';
const Cards = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Cards.vue');
import {defineAsyncComponent} from 'vue';
import SpeechBubbleIcon from '@/components/icons/SpeechBubbleIcon';
const Cards = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Cards.vue'));
export default {
props: {
entryCount: {
type: Number,
export default {
props: {
entryCount: {
type: Number,
},
verbose: {
type: Boolean,
default: true,
},
icon: {
type: String,
default: 'cards'
}
},
verbose: {
type: Boolean,
default: true,
},
icon: {
type: String,
default: 'cards',
},
},
components: {
'speech-bubble': SpeechBubbleIcon,
SpeechBubbleIcon,
Cards,
},
};
components: {
'speech-bubble': SpeechBubbleIcon,
SpeechBubbleIcon,
Cards,
},
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.entry-count-widget {
display: flex;
align-items: center;
opacity: 0.6;
margin-right: $medium-spacing;
.entry-count-widget {
display: flex;
align-items: center;
opacity: 0.6;
margin-right: $medium-spacing;
svg {
width: 30px;
fill: $color-charcoal-dark;
margin-right: 15px;
svg {
width: 30px;
fill: $color-charcoal-dark;
margin-right: 15px;
}
& > span {
@include room-widget-text-style;
}
}
& > span {
@include room-widget-text-style;
}
}
</style>

81
client/src/components/rooms/MoreActions.vue
View File

@ -1,66 +1,71 @@
<template>
<div class="more-actions">
<a
:class="{ 'more-actions__toggle--background': background }"
:class="{'more-actions__toggle--background': background}"
class="more-actions__toggle"
data-cy="toggle-more-actions-menu"
@click.stop="toggleMenu"
>
<ellipses />
</a>
<widget-popover class="more-actions__popover" v-if="showMenu" @hide-me="showMenu = false">
<widget-popover
class="more-actions__popover"
v-if="showMenu"
@hide-me="showMenu = false"
>
<slot :toggle="toggleMenu" />
</widget-popover>
</div>
</template>
<script>
import WidgetPopover from '@/components/ui/WidgetPopover';
const Ellipses = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Ellipses');
import WidgetPopover from '@/components/ui/WidgetPopover';
import {defineAsyncComponent} from 'vue';
const Ellipses = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Ellipses'));
export default {
props: {
background: {
type: Boolean,
default: false,
export default {
props: {
background: {
type: Boolean,
default: false
}
},
},
components: {
Ellipses,
WidgetPopover,
},
data() {
return {
showMenu: false,
};
},
methods: {
toggleMenu: function () {
this.showMenu = !this.showMenu;
components: {
Ellipses,
WidgetPopover,
},
},
};
data() {
return {
showMenu: false,
};
},
methods: {
toggleMenu: function () {
this.showMenu = !this.showMenu;
},
},
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
.more-actions {
svg {
width: 30px;
fill: $color-charcoal-dark;
//margin-right: 15px;
}
.more-actions {
svg {
width: 30px;
fill: $color-charcoal-dark;
//margin-right: 15px;
}
&__toggle {
display: flex;
border-radius: 5px;
&__toggle {
display: flex;
border-radius: 5px;
&--background {
background: white;
&--background {
background: white;
}
}
}
}
</style>

43
client/src/components/rooms/RoomGroupWidget.vue
View File

@ -8,33 +8,34 @@
</template>
<script>
const Group = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Group.vue');
import {defineAsyncComponent} from 'vue';
const Group = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Group.vue'));
export default {
props: ['name'],
export default {
props: ['name'],
components: {
Group,
},
};
components: {
Group
}
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.room-group-widget {
display: flex;
align-items: center;
opacity: 0.6;
.room-group-widget {
display: flex;
align-items: center;
opacity: 0.6;
svg {
width: 30px;
fill: $color-charcoal-dark;
margin-right: 15px;
svg {
width: 30px;
fill: $color-charcoal-dark;
margin-right: 15px;
}
& > span {
@include room-widget-text-style;;
}
}
& > span {
@include room-widget-text-style;
}
}
</style>

56
client/src/components/rooms/RoomVisibilityWidget.vue
View File

@ -12,41 +12,43 @@
</template>
<script>
const EyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/EyeIcon');
const ClosedEyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ClosedEyeIcon');
export default {
props: {
restricted: {
type: Boolean,
default: false,
import {defineAsyncComponent} from 'vue';
const EyeIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/EyeIcon'));
const ClosedEyeIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ClosedEyeIcon'));
export default {
props: {
restricted: {
type: Boolean,
default: false
}
},
},
components: {
ClosedEyeIcon,
EyeIcon,
},
};
components: {
ClosedEyeIcon,
EyeIcon
}
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.room-visibility-widget {
display: flex;
align-items: center;
opacity: 0.6;
.room-visibility-widget {
display: flex;
align-items: center;
opacity: 0.6;
&__icon {
width: 30px;
fill: $color-charcoal-dark;
margin-right: 15px;
flex-shrink: 0;
&__icon {
width: 30px;
fill: $color-charcoal-dark;
margin-right: 15px;
}
& > span {
@include room-widget-text-style;
}
}
& > span {
@include room-widget-text-style;
}
}
</style>

79
client/src/components/rooms/RoomsOnboarding.vue
View File

@ -1,12 +1,25 @@
<template>
<div class="rooms-onboarding">
<h1 class="rooms-onboarding__heading" data-cy="page-title">Räume</h1>
<h1
class="rooms-onboarding__heading"
data-cy="page-title"
>
Räume
</h1>
<rooms-illustration class="rooms-onboarding__illustration" />
<p data-cy="rooms-onboarding-text" class="rooms-onboarding__text">
<p
data-cy="rooms-onboarding-text"
class="rooms-onboarding__text"
>
Hier können Sie Räume erstellen, damit SchülerInnen zusammenarbeiten und Beiträge teilen können.
</p>
<div class="rooms-onboarding__button">
<router-link :to="newRoomRoute" class="button button--primary" data-cy="create-room-button" v-if="isTeacher">
<router-link
:to="newRoomRoute"
class="button button--primary"
data-cy="create-room-button"
v-if="isTeacher"
>
Raum erstellen
</router-link>
</div>
@ -14,43 +27,43 @@
</template>
<script>
import { NEW_ROOM_PAGE } from '@/router/room.names';
const RoomsIllustration = () =>
import(/* webpackChunkName: "illustrations" */ '@/components/illustrations/RoomsIllustration');
import {NEW_ROOM_PAGE} from '@/router/room.names';
import {defineAsyncComponent} from 'vue';
const RoomsIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/RoomsIllustration'));
export default {
props: {
isTeacher: {
type: Boolean,
default: false,
export default {
props: {
isTeacher: {
type: Boolean,
default: false,
},
},
},
components: { RoomsIllustration },
components: {RoomsIllustration},
data() {
return {
newRoomRoute: NEW_ROOM_PAGE,
};
},
};
data() {
return {
newRoomRoute: NEW_ROOM_PAGE,
};
},
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
.rooms-onboarding {
@include onboarding-page;
.rooms-onboarding {
@include onboarding-page;
&__heading {
margin-bottom: $large-spacing;
&__heading {
margin-bottom: $large-spacing;
}
&__illustration {
@include onboarding-illustration;
}
&__text {
@include onboarding-text;
}
}
&__illustration {
@include onboarding-illustration;
}
&__text {
@include onboarding-text;
}
}
</style>

178
client/src/components/school-class/ClassSelectionWidget.vue
View File

@ -1,5 +1,8 @@
<template>
<div class="class-selection" v-if="currentClassSelection">
<div
class="class-selection"
v-if="currentClassSelection"
>
<div
data-cy="class-selection"
class="class-selection__selected-class selected-class"
@ -8,7 +11,12 @@
<current-class class="selected-class__text" />
<chevron-down class="selected-class__dropdown-icon" />
</div>
<widget-popover :mobile="mobile" class="class-selection__popover" v-if="showPopover" @hide-me="showPopover = false">
<widget-popover
:mobile="mobile"
class="class-selection__popover"
v-if="showPopover"
@hide-me="showPopover = false"
>
<li
:label="schoolClass.name"
:item="schoolClass"
@ -26,105 +34,121 @@
v-if="me.isTeacher && !me.readOnly"
@click="closeSidebar"
>
<router-link :to="{ name: 'create-class' }" tag="span" class="popover-links__link-with-icon">
<router-link
:to="{name: 'create-class'}"
tag="span"
class="popover-links__link-with-icon"
>
<add-icon class="popover-links__icon" />
<span>Klasse erfassen</span>
</router-link>
</li>
<li class="popover-links__link popover-links__link--large popover-links__divider" @click="closeSidebar">
<router-link :to="{ name: 'old-classes' }" tag="span"> Alte Klassen anzeigen </router-link>
<li
class="popover-links__link popover-links__link--large popover-links__divider"
@click="closeSidebar"
>
<router-link
:to="{name: 'old-classes'}"
tag="span"
>
Alte Klassen anzeigen
</router-link>
</li>
</widget-popover>
</div>
</template>
<script>
import WidgetPopover from '@/components/ui/WidgetPopover';
import CurrentClass from '@/components/school-class/CurrentClass';
import WidgetPopover from '@/components/ui/WidgetPopover';
import CurrentClass from '@/components/school-class/CurrentClass';
import updateSelectedClassMixin from '@/mixins/update-selected-class';
import sidebarMixin from '@/mixins/sidebar';
import meMixin from '@/mixins/me';
const ChevronDown = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronDown');
const AddIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/AddIcon');
import updateSelectedClassMixin from '@/mixins/update-selected-class';
import sidebarMixin from '@/mixins/sidebar';
import meMixin from '@/mixins/me';
import {defineAsyncComponent} from 'vue';
const ChevronDown = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronDown'));
const AddIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/AddIcon'));
export default {
props: {
mobile: {
type: Boolean,
default: false,
export default {
props: {
mobile: {
type: Boolean,
default: false
}
},
},
mixins: [updateSelectedClassMixin, sidebarMixin, meMixin],
components: {
WidgetPopover,
ChevronDown,
CurrentClass,
AddIcon,
},
data() {
return {
showPopover: false,
};
},
computed: {
currentClassSelection() {
let currentClass = this.me.schoolClasses.find((schoolClass) => {
return schoolClass.id === this.me.selectedClass.id;
});
return currentClass || this.me.schoolClasses[0];
mixins: [updateSelectedClassMixin, sidebarMixin, meMixin],
components: {
WidgetPopover,
ChevronDown,
CurrentClass,
AddIcon
},
},
methods: {
updateSelectedClassAndHidePopover(selectedClass) {
this.updateSelectedClass(selectedClass);
this.showPopover = false;
this.closeSidebar('profile');
data() {
return {
showPopover: false
};
},
},
};
computed: {
currentClassSelection() {
let currentClass = this.me.schoolClasses.find(schoolClass => {
return schoolClass.id === this.me.selectedClass.id;
});
return currentClass || this.me.schoolClasses[0];
}
},
methods: {
updateSelectedClassAndHidePopover(selectedClass) {
this.updateSelectedClass(selectedClass);
this.showPopover = false;
this.closeSidebar('profile');
}
},
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.class-selection {
position: relative;
cursor: pointer;
margin-bottom: $medium-spacing;
border-radius: 4px;
.class-selection {
position: relative;
cursor: pointer;
margin-bottom: $medium-spacing;
border-radius: 4px;
&__popover {
white-space: nowrap;
top: 100%;
left: 0;
transform: translateY($small-spacing);
}
}
&__popover {
white-space: nowrap;
top: 100%;
left: 0;
transform: translateY($small-spacing);
}
.selected-class {
width: 100%;
box-sizing: border-box;
padding: $small-spacing 0;
display: flex;
align-items: center;
justify-content: flex-start;
&__text {
line-height: $large-spacing;
@include heading-4;
margin-right: $small-spacing;
}
&__dropdown-icon {
width: 20px;
height: 20px;
fill: $color-charcoal-dark;
.selected-class {
width: 100%;
box-sizing: border-box;
padding: $small-spacing 0;
display: flex;
align-items: center;
justify-content: flex-start;
&__text {
line-height: $large-spacing;
@include heading-4;
margin-right: $small-spacing;
}
&__dropdown-icon {
width: 20px;
height: 20px;
fill: $color-charcoal-dark;
}
}
}
</style>

54
client/src/components/ui/BaseInput.vue
View File

@ -6,39 +6,47 @@
class="base-input-container__input"
data-cy="base-input-input"
@change.prevent="$emit('input', $event.target.checked, item)"
/>
>
<span
:class="{
'base-input-container__checkbox': type === 'checkbox',
'base-input-container__radiobutton': type === 'radiobutton',
}"
:class="{'base-input-container__checkbox': type==='checkbox', 'base-input-container__radiobutton': type === 'radiobutton'}"
class="base-input-container__icon checkbox"
>
<tick v-if="type === 'checkbox'" />
<circle-icon data-cy="circle-icon" v-if="type === 'radiobutton'" />
<circle-icon
data-cy="circle-icon"
v-if="type === 'radiobutton'"
/>
</span>
<span class="base-input-container__label" data-cy="base-input-label" v-if="label">{{ label }}</span>
<slot class="base-input-container__label" v-if="!label" />
<span
class="base-input-container__label"
data-cy="base-input-label"
v-if="label"
>{{ label }}</span>
<slot
class="base-input-container__label"
v-if="!label"
/>
</label>
</template>
<script>
const Tick = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Tick');
const CircleIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/CircleIcon');
import {defineAsyncComponent} from 'vue';
const Tick = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Tick'));
const CircleIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/CircleIcon'));
export default {
props: {
label: String,
checked: {
type: Boolean,
export default {
props: {
label: String,
checked: {
type: Boolean
},
item: Object,
type: String
},
item: Object,
type: String,
},
components: {
Tick,
CircleIcon,
},
};
components: {
Tick,
CircleIcon
}
};
</script>

87
client/src/components/ui/PopoverLink.vue
View File

@ -1,56 +1,65 @@
<template>
<li class="popover-links__link">
<a class="popover-link" @click="$emit('link-action')">
<component class="popover-link__icon" :is="icon" />
<li
class="popover-links__link"
>
<a
class="popover-link"
@click="$emit('link-action')"
>
<component
class="popover-link__icon"
:is="icon"
/>
<span class="popover-link__text">{{ text }}</span>
</a>
</li>
</template>
<script>
const EyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/EyeIcon');
const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
const PenIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/PenIcon');
import {defineAsyncComponent} from 'vue';
const EyeIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/EyeIcon'));
const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon'));
const PenIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/PenIcon'));
export default {
props: {
icon: {
type: String,
default: '',
export default {
props: {
icon: {
type: String,
default: '',
},
text: {
type: String,
default: '',
},
},
text: {
type: String,
default: '',
components: {
EyeIcon,
TrashIcon,
PenIcon,
},
},
components: {
EyeIcon,
TrashIcon,
PenIcon,
},
};
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
.popover-link {
@include popover-link;
.popover-link {
@include popover-link;
&__icon {
width: 30px;
fill: $color-charcoal-dark;
margin-right: 15px;
display: flex;
flex-basis: auto;
flex-shrink: 0;
&__icon {
width: 30px;
fill: $color-charcoal-dark;
margin-right: 15px;
display: flex;
flex-basis: auto;
flex-shrink: 0;
}
&__text {
width: auto;
display: flex;
flex-basis: auto;
flex-shrink: 0;
}
}
&__text {
width: auto;
display: flex;
flex-basis: auto;
flex-shrink: 0;
}
}
</style>

38
client/src/components/ui/file-upload/FileUpload.vue
View File

@ -1,7 +1,11 @@
<template>
<div class="file-upload">
<template v-if="document">
<document-block :value="{ url: document }" show-trash-icon @trash="$emit('change-document-url', '')" />
<document-block
:value="{url: document}"
show-trash-icon
@trash="$emit('change-document-url', '')"
/>
</template>
<template v-else>
<simple-file-upload
@ -14,24 +18,26 @@
</template>
<script>
const SimpleFileUpload = () => import('@/components/ui/file-upload/SimpleFileUpload.vue');
const DocumentBlock = () => import('@/components/content-blocks/DocumentBlock.vue');
import {defineAsyncComponent} from 'vue';
const SimpleFileUpload = defineAsyncComponent(() => import('@/components/ui/file-upload/SimpleFileUpload'));
const DocumentBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock'));
export default {
props: {
document: {
type: String,
default: '',
export default {
props: {
document: {
type: String,
default: '',
},
withText: {
type: Boolean,
default: false
}
},
withText: {
type: Boolean,
default: false,
},
},
components: { SimpleFileUpload, DocumentBlock },
};
components: {SimpleFileUpload, DocumentBlock},
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
</style>

104
client/src/components/ui/file-upload/SimpleFileUpload.vue
View File

@ -1,80 +1,72 @@
<template>
<div class="simple-file-upload">
<<<<<<< HEAD
<component :is="button" @click.native="clickUploadCare" />
||||||| parent of a423cfde (Apply code changes from migration guide for Vue 3)
<component
:is="button"
@click.native="clickUploadCare"
/>
=======
<component
:is="button"
@click="clickUploadCare"
/>
>>>>>>> a423cfde (Apply code changes from migration guide for Vue 3)
<simple-file-upload-hidden-input @link-change-url="$emit('link-change-url', $event)" />
</div>
</template>
<script>
const SimpleFileUploadHiddenInput = () => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput.vue');
const SimpleFileUploadIcon = () => import('@/components/ui/file-upload/SimpleFileUploadIcon.vue');
const SimpleFileUploadIconAndText = () => import('@/components/ui/file-upload/SimpleFileUploadIconAndText.vue');
const DocumentIcon = () => import('@/components/icons/DocumentIcon.vue');
import {defineAsyncComponent} from 'vue';
const SimpleFileUploadHiddenInput = defineAsyncComponent(() => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput'));
const SimpleFileUploadIcon = defineAsyncComponent(() => import('@/components/ui/file-upload/SimpleFileUploadIcon'));
const SimpleFileUploadIconAndText = defineAsyncComponent(() => import('@/components/ui/file-upload/SimpleFileUploadIconAndText'));
const DocumentIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon'));
export default {
props: {
value: {
type: String,
default: '',
export default {
props: {
value: {
type: String,
default: ''
},
withText: {
type: Boolean,
default: false
}
},
withText: {
type: Boolean,
default: false,
},
},
components: {
SimpleFileUploadHiddenInput,
DocumentIcon,
SimpleFileUploadIcon,
SimpleFileUploadIconAndText,
},
computed: {
button() {
return this.withText ? 'simple-file-upload-icon-and-text' : 'simple-file-upload-icon';
components: {
SimpleFileUploadHiddenInput,
DocumentIcon,
SimpleFileUploadIcon,
SimpleFileUploadIconAndText
},
},
methods: {
clickUploadCare() {
// workaround for styling the uploadcare widget
let button = this.$el.querySelector('.uploadcare--widget__button');
button.click();
computed: {
button() {
return this.withText ? 'simple-file-upload-icon-and-text' : 'simple-file-upload-icon';
}
},
},
};
methods: {
clickUploadCare() {
// workaround for styling the uploadcare widget
let button = this.$el.querySelector('.uploadcare--widget__button');
button.click();
}
},
};
</script>
<style scoped lang="scss">
@import '~styles/_helpers';
@import "~styles/_helpers";
.simple-file-upload {
height: 25px;
overflow: hidden;
cursor: pointer;
&__link {
display: inline-block;
overflow: hidden;
width: 25px;
.simple-file-upload {
height: 25px;
}
}
overflow: hidden;
cursor: pointer;
:deep(.uploadcare--widget) {
display: none;
}
&__link {
display: inline-block;
overflow: hidden;
width: 25px;
height: 25px;
}
}
/deep/ .uploadcare--widget {
display: none;
}
</style>

21
client/src/components/ui/file-upload/SimpleFileUploadIcon.vue
View File

@ -5,20 +5,21 @@
</template>
<script>
const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
import {defineAsyncComponent} from 'vue';
const DocumentIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon'));
export default {
components: { DocumentIcon },
};
export default {
components: {DocumentIcon},
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
.simple-file-upload-icon {
&__icon {
width: 25px;
fill: $color-silver-dark;
.simple-file-upload-icon {
&__icon {
width: 25px;
fill: $color-silver-dark;
}
}
}
</style>

71
client/src/components/ui/file-upload/SimpleFileUploadWithIcon.vue
View File

@ -12,49 +12,50 @@
</template>
<script>
const SimpleFileUploadHiddenInput = () => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput.vue');
const ButtonWithIconAndText = () => import('@/components/ui/ButtonWithIconAndText.vue');
import {defineAsyncComponent} from 'vue';
const SimpleFileUploadHiddenInput = defineAsyncComponent(() => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput'));
const ButtonWithIconAndText = defineAsyncComponent(() => import('@/components/ui/ButtonWithIconAndText'));
export default {
props: ['value'],
export default {
props: ['value'],
components: {
ButtonWithIconAndText,
SimpleFileUploadHiddenInput,
},
methods: {
clickUploadCare() {
// workaround for styling the uploadcare widget
let button = this.$el.querySelector('.uploadcare--widget__button');
button.click();
components: {
ButtonWithIconAndText,
SimpleFileUploadHiddenInput,
},
},
};
methods: {
clickUploadCare() {
// workaround for styling the uploadcare widget
let button = this.$el.querySelector('.uploadcare--widget__button');
button.click();
},
},
};
</script>
<style scoped lang="scss">
@import '~styles/_helpers';
@import "~styles/_helpers";
.simple-file-upload {
width: 25px;
height: 25px;
overflow: hidden;
&__icon {
width: 25px;
fill: $color-silver-dark;
}
&__link {
display: inline-block;
overflow: hidden;
.simple-file-upload {
width: 25px;
height: 25px;
}
}
overflow: hidden;
:deep(.uploadcare--widget) {
display: none;
}
&__icon {
width: 25px;
fill: $color-silver-dark;
}
&__link {
display: inline-block;
overflow: hidden;
width: 25px;
height: 25px;
}
}
/deep/ .uploadcare--widget {
display: none;
}
</style>

31
client/src/components/ui/form-element-icons.js
View File

@ -1,18 +1,17 @@
const LinkIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/LinkIcon');
const VideoIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/VideoIcon');
const ImageIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ImageIcon');
const TextIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TextIcon');
const SpeechBubbleIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/SpeechBubbleIcon');
const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
const TitleIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TitleIcon');
const DocumentWithLinesIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentWithLinesIcon');
const ArrowThinBottom = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowThinBottom');
const ArrowThinDown = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowThinDown');
const ArrowThinTop = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowThinTop');
const ArrowThinUp = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowThinUp');
const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
import {defineAsyncComponent} from 'vue';
const LinkIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/LinkIcon'));
const VideoIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/VideoIcon'));
const ImageIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ImageIcon'));
const TextIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TextIcon'));
const SpeechBubbleIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/SpeechBubbleIcon'));
const DocumentIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon'));
const TitleIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TitleIcon'));
const DocumentWithLinesIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentWithLinesIcon'));
const ArrowThinBottom = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowThinBottom'));
const ArrowThinDown = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowThinDown'));
const ArrowThinTop = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowThinTop'));
const ArrowThinUp = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowThinUp'));
const TrashIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon'));
/*
for icons with a single word, leave the *-icon name, to prevent conflicts
@ -31,5 +30,5 @@ export default {
ArrowThinDown,
ArrowThinTop,
ArrowThinUp,
TrashIcon,
TrashIcon
};

137
client/src/components/visibility/VisibilityAction.vue
View File

@ -1,84 +1,93 @@
<template>
<div class="visibility-action">
<a class="visibility-action__action-button" v-if="canManageContent" @click="toggleVisibility()">
<closed-eye-icon class="visibility-action__action-icon action-icon" v-if="hidden" />
<eye-icon class="visibility-action__action-icon action-icon" v-else />
<a
class="visibility-action__action-button"
v-if="canManageContent"
@click="toggleVisibility()"
>
<closed-eye-icon
class="visibility-action__action-icon action-icon"
v-if="hidden"
/>
<eye-icon
class="visibility-action__action-icon action-icon"
v-else
/>
</a>
</div>
</template>
<script>
import me from '@/mixins/me';
import me from '@/mixins/me';
import { TYPES, CONTENT_TYPE } from '@/consts/types';
import { createVisibilityMutation, hidden } from '@/helpers/visibility';
import {TYPES, CONTENT_TYPE} from '@/consts/types';
import {createVisibilityMutation, hidden} from '@/helpers/visibility';
const EyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/EyeIcon');
const ClosedEyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ClosedEyeIcon');
import {defineAsyncComponent} from 'vue';
const EyeIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/EyeIcon'));
const ClosedEyeIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/ClosedEyeIcon'));
export default {
props: {
block: {
type: Object,
default: () => ({}),
export default {
props: {
block: {
type: Object,
default: () => ({})
},
type: {
type: String,
default: CONTENT_TYPE,
validator: value => {
// value must be one of TYPES
return TYPES.indexOf(value) !== -1;
}
}
},
type: {
type: String,
default: CONTENT_TYPE,
validator: (value) => {
// value must be one of TYPES
return TYPES.indexOf(value) !== -1;
mixins: [me],
components: {
EyeIcon,
ClosedEyeIcon
},
computed: {
hidden() {
return hidden({type: this.type, block: this.block, schoolClass: this.schoolClass});
}
},
methods: {
toggleVisibility() {
const hidden = !this.hidden;
const schoolClassId = this.schoolClass.id;
const visibility = [{
schoolClassId,
hidden
}];
const {mutation, variables} = createVisibilityMutation(this.type, this.block.id, visibility);
this.$apollo.mutate({
mutation,
variables
});
},
},
},
mixins: [me],
components: {
EyeIcon,
ClosedEyeIcon,
},
computed: {
hidden() {
return hidden({ type: this.type, block: this.block, schoolClass: this.schoolClass });
},
},
methods: {
toggleVisibility() {
const hidden = !this.hidden;
const schoolClassId = this.schoolClass.id;
const visibility = [
{
schoolClassId,
hidden,
},
];
const { mutation, variables } = createVisibilityMutation(this.type, this.block.id, visibility);
this.$apollo.mutate({
mutation,
variables,
});
},
},
};
};
</script>
<style scoped lang="scss">
.visibility-action {
margin-top: 9px;
.visibility-action {
margin-top: 9px;
position: absolute;
left: -70px;
top: 0px;
display: grid;
position: absolute;
left: -70px;
top: 0px;
display: grid;
&__visibility-menu {
top: 40px;
&__visibility-menu {
top: 40px;
}
}
}
</style>

62
client/src/layouts/FullScreenLayout.vue
View File

@ -1,6 +1,12 @@
<template>
<div :class="specialContainerClass" class="container layout layout--fullscreen">
<div class="close-button" @click="back">
<div
:class="specialContainerClass"
class="container layout layout--fullscreen"
>
<div
class="close-button"
@click="back"
>
<cross class="close-button__icon" />
</div>
@ -9,37 +15,39 @@
</template>
<script>
const Cross = () => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon');
import {defineAsyncComponent} from 'vue';
const Cross = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon'));
export default {
components: {
Cross,
},
export default {
components: {
Cross
},
computed: {
specialContainerClass() {
let cls = this.$store.state.specialContainerClass;
return [cls ? `skillbox--${cls}` : ''];
computed: {
specialContainerClass() {
let cls = this.$store.state.specialContainerClass;
return [cls ? `skillbox--${cls}` : ''];
}
},
},
methods: {
back() {
this.$router.go(-1);
},
},
};
methods: {
back() {
this.$router.go(-1);
}
}
};
</script>
<style lang="scss" scoped>
@import '@/styles/_default-layout.scss';
@import "@/styles/_default-layout.scss";
.close-button {
margin-top: $medium-spacing;
margin-right: $medium-spacing;
justify-self: end;
cursor: pointer;
.close-button {
margin-top: $medium-spacing;
margin-right: $medium-spacing;
justify-self: end;
cursor: pointer;
display:flex;
justify-content:flex-end;
}
display: flex;
justify-content: flex-end;
}
</style>

143
client/src/layouts/SimpleLayout.vue
View File

@ -1,98 +1,107 @@
<template>
<div :class="{ 'layout--full-width': $route.meta.fullWidth }" class="skillbox layout layout--simple">
<div class="close-button" @click="back">
<div
:class="{'layout--full-width': $route.meta.fullWidth}"
class="skillbox layout layout--simple"
>
<div
class="close-button"
@click="back"
>
<cross class="close-button__icon" />
</div>
<router-view class="layout__content" />
<simple-footer class="layout__footer" v-if="enableFooter" />
<simple-footer
class="layout__footer"
v-if="enableFooter"
/>
</div>
</template>
<script>
import SimpleFooter from '@/layouts/SimpleFooter';
import SimpleFooter from '@/layouts/SimpleFooter';
import {defineAsyncComponent} from 'vue';
const Cross = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon'));
const Cross = () => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon');
export default {
components: {
Cross,
SimpleFooter
},
export default {
components: {
Cross,
SimpleFooter,
},
computed: {
enableFooter() {
if (this.$route.meta.hideFooter) {
return false;
computed: {
enableFooter() {
if (this.$route.meta.hideFooter) {
return false;
}
return this.$flavor.showFooter;
}
return this.$flavor.showFooter;
},
},
methods: {
back() {
this.$router.go(-1);
},
},
};
methods: {
back() {
this.$router.go(-1);
}
}
};
</script>
<style lang="scss" scoped>
@import '~styles/helpers';
@import "~styles/helpers";
.layout {
&--simple {
display: -ms-grid;
@supports (display: grid) {
display: grid;
.layout {
&--simple {
display: -ms-grid;
@supports (display: grid) {
display: grid;
}
width: 100%;
@include desktop {
grid-template-columns: 1fr 640px 1fr;
grid-template-rows: 60px auto-fill 105px;
-ms-grid-columns: 1fr 640px 1fr;
& > :nth-child(2) {
grid-column: 2;
-ms-grid-column: 2;
}
}
}
width: 100%;
$parent: &;
@include desktop {
grid-template-columns: 1fr 640px 1fr;
grid-template-rows: 60px auto-fill 105px;
-ms-grid-columns: 1fr 640px 1fr;
&--full-width {
#{$parent}__content {
grid-column: 1 / span 3;
grid-row: 1 / span 2;
}
}
& > :nth-child(2) {
grid-column: 2;
-ms-grid-column: 2;
&__footer {
@include desktop {
grid-column: 1 / span 3;
}
}
}
$parent: &;
.close-button {
justify-self: end;
cursor: pointer;
&--full-width {
#{$parent}__content {
grid-column: 1 / span 3;
grid-row: 1 / span 2;
}
}
display:flex;
justify-content:flex-end;
margin-right: $small-spacing;
margin-top: $small-spacing;
&__footer {
@include desktop {
grid-column: 1 / span 3;
grid-column: 3;
grid-row: 1;
-ms-grid-column: 3;
-ms-grid-row: 1;
margin-right: $medium-spacing;
margin-top: $medium-spacing;
}
}
}
.close-button {
justify-self: end;
cursor: pointer;
display: flex;
justify-content: flex-end;
margin-right: $small-spacing;
margin-top: $small-spacing;
@include desktop {
grid-column: 3;
grid-row: 1;
-ms-grid-column: 3;
-ms-grid-row: 1;
margin-right: $medium-spacing;
margin-top: $medium-spacing;
}
}
</style>

255
client/src/layouts/SplitLayout.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="['split-view', { 'split-view--illustration': illustration }]">
<div :class="['split-view', {'split-view--illustration': illustration}]">
<div :class="['split-view__illustration', illustrationAlignment]">
<component :is="illustration" />
</div>
@ -10,155 +10,154 @@
</template>
<script>
import flavorValues from '@/helpers/app-flavor';
const ContentsIllustration = () =>
import(/* webpackChunkName: "illustrations" */ '@/components/illustrations/ContentsIllustration');
const PortfolioIllustration = () =>
import(/* webpackChunkName: "illustrations" */ '@/components/illustrations/PortfolioIllustration');
const RoomsIllustration = () =>
import(/* webpackChunkName: "illustrations" */ '@/components/illustrations/RoomsIllustration');
import {defineAsyncComponent} from 'vue';
import flavorValues from '@/helpers/app-flavor';
const ContentsIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/ContentsIllustration'));
const PortfolioIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/PortfolioIllustration'));
const RoomsIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/RoomsIllustration'));
const HelloIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/HelloIllustration'));
const HelloMyKVIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/HelloMyKVIllustration'));
const Hello = flavorValues.appFlavor === 'my-kv' ? HelloMyKVIllustration : HelloIllustration;
export default {
components: {
contents: ContentsIllustration,
portfolio: PortfolioIllustration,
rooms: RoomsIllustration,
hello: flavorValues.helloIllustration,
},
export default {
components: {
contents: ContentsIllustration,
portfolio: PortfolioIllustration,
rooms: RoomsIllustration,
hello: Hello
},
computed: {
illustration() {
return this.$route.meta.illustration;
computed: {
illustration() {
return this.$route.meta.illustration;
},
illustrationAlignment() {
return this.$route.meta.illustrationAlign ? `split-view__illustration--${this.$route.meta.illustrationAlign}` : '';
}
},
illustrationAlignment() {
return this.$route.meta.illustrationAlign
? `split-view__illustration--${this.$route.meta.illustrationAlign}`
: '';
},
},
};
};
</script>
<style lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.split-view {
background-color: $color-brand;
display: flex;
position: relative;
width: 100%;
min-height: 100vh;
&--illustration {
&::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 50%;
background: $color-brand-dark;
}
}
&__illustration {
width: 30vw;
min-width: 400px;
align-self: center;
.split-view {
background-color: $color-brand;
z-index: 1;
display: none;
&--top {
align-self: center;
margin-top: -400px;
}
& > svg {
max-width: 300px;
max-height: 400px;
}
@include desktop {
display: flex;
justify-content: center;
}
}
&__content {
background-color: $color-white;
padding: $medium-spacing;
display: flex;
flex-direction: column;
z-index: 1;
position: relative;
width: 100%;
min-height: 100vh;
@include desktop {
padding: 2 * $large-spacing;
&--illustration {
&::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 50%;
background: $color-brand-dark;
}
}
}
&__logo {
width: 300px;
height: 50px;
margin-bottom: $large-spacing;
&__illustration {
width: 30vw;
min-width: 400px;
align-self: center;
background-color: $color-brand;
z-index: 1;
display: none;
@include desktop {
&--top {
align-self: center;
margin-top: -400px;
}
& > svg {
max-width: 300px;
max-height: 400px;
}
@include desktop {
display: flex;
justify-content: center;
}
}
&__content {
background-color: $color-white;
padding: $medium-spacing;
display: flex;
flex-direction: column;
z-index: 1;
width: 100%;
@include desktop {
padding: 2*$large-spacing;
}
}
&__logo {
width: 300px;
height: 50px;
margin-bottom: $large-spacing;
@include desktop {
margin-bottom: 70px;
}
}
&__page-subheading {
@include regular-text;
color: $color-brand;
margin-bottom: $small-spacing;
}
&__page-heading {
@include heading-2;
color: $color-brand;
margin-bottom: 2*$large-spacing;
}
&__heading {
@include heading-2;
margin-bottom: $small-spacing;
}
&__claim {
@include heading-2;
margin-bottom: 70px;
}
}
&__page-subheading {
@include regular-text;
color: $color-brand;
margin-bottom: $small-spacing;
}
&__paragraph {
@include regular-text;
margin-bottom: $medium-spacing;
&__page-heading {
@include heading-2;
color: $color-brand;
margin-bottom: 2 * $large-spacing;
}
&:last-of-type {
margin-bottom: 2*$large-spacing;
}
}
&__heading {
@include heading-2;
margin-bottom: $small-spacing;
}
&__button {
@include regular-text;
flex-grow: 0;
align-self: flex-start;
min-width: 150px;
display: inline-flex;
box-sizing: border-box;
justify-content: center;
margin-bottom: $large-spacing;
cursor: pointer;
}
&__claim {
@include heading-2;
margin-bottom: 70px;
}
&__secondary-link {
@include inline-title;
cursor: pointer;
&__paragraph {
@include regular-text;
margin-bottom: $medium-spacing;
&:last-of-type {
margin-bottom: 2 * $large-spacing;
@include desktop {
margin-top: auto;
}
}
}
&__button {
@include regular-text;
flex-grow: 0;
align-self: flex-start;
min-width: 150px;
display: inline-flex;
box-sizing: border-box;
justify-content: center;
margin-bottom: $large-spacing;
cursor: pointer;
}
&__secondary-link {
@include inline-title;
cursor: pointer;
@include desktop {
margin-top: auto;
}
}
}
</style>

15
client/src/pages/article.vue
View File

@ -37,13 +37,14 @@
import ADD_COMMENT_MUTATION from 'gql/mutations/addComment.gql';
import CommentInput from '@/components/rooms/CommentInput';
import Comment from '@/components/rooms/Comment';
const TextBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/TextBlock');
const ImageBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageBlock');
const ImageUrlBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageUrlBlock');
const VideoBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/VideoBlock');
const LinkBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/LinkBlock');
const DocumentBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock');
const SubtitleBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SubtitleBlock');
import {defineAsyncComponent} from 'vue';
const TextBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/TextBlock'));
const ImageBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageBlock'));
const ImageUrlBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageUrlBlock'));
const VideoBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/VideoBlock'));
const LinkBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/LinkBlock'));
const DocumentBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock'));
const SubtitleBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SubtitleBlock'));
export default {
components: {

269
client/src/pages/hello.vue
View File

@ -1,39 +1,64 @@
<template>
<div class="hello" data-cy="hello-page">
<div
class="hello"
data-cy="hello-page"
>
<div class="about">
<div class="about__logos logos">
<a href="https://www.hep-verlag.ch/" target="_blank">
<a
href="https://www.hep-verlag.ch/"
target="_blank"
>
<hep-logo-no-claim class="logos__logo" />
</a>
<a href="https://www.ehb.swiss/" target="_blank" v-if="$flavor.showEHB">
<a
href="https://www.ehb.swiss/"
target="_blank"
v-if="$flavor.showEHB"
>
<ehb-logo class="logos__logo" />
</a>
</div>
<p class="about__text">
<template v-if="$flavor.showEHB">
{{ $flavor.textAppName }} ist ein Angebot des hep Verlags in Zusammenarbeit mit der Eidgenössischen Hochschule
für Berufsbildung (EHB).
{{ $flavor.textAppName }} ist ein Angebot des hep Verlags in
Zusammenarbeit mit der Eidgenössischen Hochschule für Berufsbildung (EHB).
</template>
<template v-else>
{{ $flavor.textAppName }} ist ein Angebot des hep Verlags.
</template>
<template v-else> {{ $flavor.textAppName }} ist ein Angebot des hep Verlags. </template>
</p>
</div>
<logo class="logo" />
<div class="login-actions">
<h2 class="login-actions__title" data-cy="hello-title">
<h2
class="login-actions__title"
data-cy="hello-title"
>
Wollen Sie {{ $flavor.textAppName }} im Unterricht verwenden?
</h2>
<a class="button button--primary button--big actions__submit" href="/api/oauth/login/" data-cy="oauth-login"
>Mit hep Konto anmelden</a
>
<a
class="button button--primary button--big actions__submit"
href="/api/oauth/login/"
data-cy="oauth-login"
>Mit hep Konto anmelden</a>
<div class="login-actions__register register">
<p>Haben Sie noch kein hep Konto?</p>
<a class="hep-link" href="/api/oauth/login/" data-cy="oauth-login">Jetzt registrieren</a>
<a
class="hep-link"
href="/api/oauth/login/"
data-cy="oauth-login"
>Jetzt registrieren</a>
</div>
</div>
<div class="information">
<p>Was ist ein hep Konto und wie kann ich mich dafür registrieren?</p>
<a class="hep-link" href="https://myskillbox.ch/anleitung" data-cy="oauth-login">Anleitung anschauen</a>
<a
class="hep-link"
href="https://myskillbox.ch/anleitung"
data-cy="oauth-login"
>Anleitung anschauen</a>
</div>
<div class="links">
<ul class="links__list">
@ -52,131 +77,133 @@
</template>
<script>
const HepLogoNoClaim = () => import(/* webpackChunkName: "icons" */ '@/components/icons/HepLogoNoClaim');
const EhbLogo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/EhbLogo');
const Logo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo');
import {defineAsyncComponent} from 'vue';
const HepLogoNoClaim = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/HepLogoNoClaim'));
const EhbLogo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/EhbLogo'));
const Logo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Logo'));
export default {
components: {
HepLogoNoClaim,
EhbLogo,
Logo,
},
export default {
components: {
HepLogoNoClaim,
EhbLogo,
Logo
},
data() {
return {
email: '',
submitted: false,
loading: false,
};
},
};
data() {
return {
email: '',
submitted: false,
loading: false
};
},
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
$hello-block-margin: 2 * $medium-spacing;
$hello-block-margin: 2*$medium-spacing;
.hello {
max-width: 600px;
margin: 0 auto;
@include desktop {
.hello {
max-width: 600px;
margin: 0 auto;
@include desktop {
max-width: 600px;
margin: 0 auto;
}
}
}
.logo {
display: block;
width: 300px;
margin: $small-spacing auto $hello-block-margin;
@include desktop {
display: none;
}
}
.about {
display: none;
margin-bottom: $hello-block-margin;
@include desktop {
.logo {
display: block;
}
&__text {
margin-top: $medium-spacing;
@include regular-text;
}
&__logos {
& a:first-child {
margin-right: $large-spacing;
}
}
}
.logos {
&__logo {
height: 30px;
}
}
.login-actions {
@include widget-shadow;
padding: $medium-spacing;
margin-bottom: $hello-block-margin;
&__title {
font-size: 2.125rem; // 34px
font-weight: 700;
}
&__register {
margin-top: $large-spacing;
> p,
a {
@include regular-text;
}
}
}
.information {
margin-top: $hello-block-margin;
> p,
a {
@include regular-text;
}
}
.links {
margin-top: $hello-block-margin;
display: flex;
&__list-item {
color: $color-silver-dark;
> a {
@include regular-text;
}
flex-direction: column;
margin-top: $medium-spacing;
&:first-child {
margin-top: 0;
}
width: 300px;
margin: $small-spacing auto $hello-block-margin;
@include desktop {
display: inline-block;
flex-direction: row;
display: none;
}
}
&:not(:last-child) {
margin-right: 1rem;
.about {
display: none;
margin-bottom: $hello-block-margin;
@include desktop {
display: block;
}
&__text {
margin-top: $medium-spacing;
@include regular-text;
}
&__logos {
& a:first-child {
margin-right: $large-spacing;
}
}
}
}
.logos {
&__logo {
height: 30px;
}
}
.login-actions {
@include widget-shadow;
padding: $medium-spacing;
margin-bottom: $hello-block-margin;
&__title {
font-size: 2.125rem; // 34px
font-weight: 700;
}
&__register {
margin-top: $large-spacing;
> p, a {
@include regular-text;
}
}
}
.information {
margin-top: $hello-block-margin;
> p, a {
@include regular-text;
}
}
.links {
margin-top: $hello-block-margin;
display: flex;
&__list-item {
color: $color-silver-dark;
> a {
@include regular-text;
}
flex-direction: column;
margin-top: $medium-spacing;
&:first-child {
margin-top: 0;
}
@include desktop {
display: inline-block;
flex-direction: row;
&:not(:last-child) {
margin-right: 1rem;
}
}
}
}
</style>

123
client/src/pages/instrument.vue
View File

@ -1,11 +1,18 @@
<template>
<div class="instrument">
<h1 class="instrument__title" data-cy="instrument-title">
<h1
class="instrument__title"
data-cy="instrument-title"
>
{{ instrument.title }}
</h1>
<!-- eslint-disable vue/no-v-html -->
<div class="instrument__intro intro" data-cy="instrument-intro" v-html="instrument.intro" />
<div
class="instrument__intro intro"
data-cy="instrument-intro"
v-html="instrument.intro"
/>
<content-component
:component="component"
@ -20,80 +27,80 @@
</template>
<script>
import INSTRUMENT_QUERY from '@/graphql/gql/queries/instrumentQuery.gql';
import INSTRUMENT_QUERY from '@/graphql/gql/queries/instrumentQuery.gql';
const ContentComponent = () =>
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ContentComponent');
import {defineAsyncComponent} from 'vue';
const ContentComponent = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ContentComponent'));
export default {
apollo: {
instrument() {
return {
query: INSTRUMENT_QUERY,
variables: {
slug: this.$route.params.slug,
},
};
export default {
apollo: {
instrument() {
return {
query: INSTRUMENT_QUERY,
variables: {
slug: this.$route.params.slug
}
};
}
},
},
components: {
ContentComponent,
},
components: {
ContentComponent
},
data() {
return {
instrument: {},
};
},
};
data() {
return {
instrument: {}
};
}
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.instrument {
&__title {
font-size: toRem(35px);
margin-bottom: $large-spacing;
line-height: $default-heading-line-height;
}
& :deep() {
& p {
.instrument {
&__title {
font-size: toRem(35px);
margin-bottom: $large-spacing;
line-height: $default-heading-line-height;
}
& p:last-child {
margin-bottom: 0;
}
& /deep/ {
& p {
margin-bottom: $large-spacing;
}
& ul {
@include list-parent;
}
& p:last-child {
margin-bottom: 0;
}
& p + ul {
margin-top: -30px;
}
& ul {
@include list-parent;
}
& li {
@include list-child;
line-height: 1.5;
}
& p + ul {
margin-top: -30px;
}
& b {
font-weight: 600;
}
& li {
@include list-child;
line-height: 1.5;
}
.brand {
color: $color-brand;
font-weight: 600;
}
& b {
font-weight: 600;
}
.secondary {
color: $color-accent-2;
font-weight: 600;
.brand {
color: $color-brand;
font-weight: 600;
}
.secondary {
color: $color-accent-2;
font-weight: 600;
}
}
}
}
</style>

176
client/src/pages/license-activation.vue
View File

@ -2,11 +2,14 @@
<div class="license-activation public-page">
<header class="info-header">
<p class="info-header__text small-emph">
Für <span class="info-header__emph">{{ me.email }}</span> haben wir keine gültige Lizenz gefunden
Für <span class="info-header__emph">{{ me.email }}</span> haben wir keine
gültige Lizenz gefunden
</p>
</header>
<section class="coupon">
<ValidationObserver v-slot="{ handleSubmit }">
<ValidationObserver
v-slot="{handleSubmit}"
>
<form
class="license-activation__form license-activation-form"
novalidate
@ -30,7 +33,12 @@
data-cy="coupon-button"
label="Coupon abschicken"
/>
<a class="button button--big" data-cy="license-activation-cancel" @click="logout">Abmelden </a>
<a
class="button button--big"
data-cy="license-activation-cancel"
@click="logout"
>Abmelden
</a>
</div>
</form>
</ValidationObserver>
@ -39,10 +47,16 @@
<h2>Oder, kaufen Sie eine Lizenz</h2>
<ul class="license-links">
<li class="license-links__item">
<a :href="teacherEditionUrl" class="hep-link">{{ $flavor.textAppName }} für Lehrpersonen</a>
<a
:href="teacherEditionUrl"
class="hep-link"
>{{ $flavor.textAppName }} für Lehrpersonen</a>
</li>
<li class="license-links__item">
<a :href="studentEditionUrl" class="hep-link">{{ $flavor.textAppName }} für Lernende</a>
<a
:href="studentEditionUrl"
class="hep-link"
>{{ $flavor.textAppName }} für Lernende</a>
</li>
</ul>
</section>
@ -50,101 +64,103 @@
</template>
<script>
import REDEEM_COUPON from '@/graphql/gql/mutations/redeemCoupon.gql';
import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
import LoadingButton from '@/components/LoadingButton';
import { ValidationObserver } from 'vee-validate';
import me from '@/mixins/me';
import logout from '@/mixins/logout';
import REDEEM_COUPON from '@/graphql/gql/mutations/redeemCoupon.gql';
import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
import LoadingButton from '@/components/LoadingButton';
import {ValidationObserver} from 'vee-validate';
const ValidatedInput = () => import('@/components/validation/ValidatedInput.vue');
import me from '@/mixins/me';
import logout from '@/mixins/logout';
export default {
mixins: [me, logout],
components: {
LoadingButton,
ValidationObserver,
ValidatedInput,
},
import {defineAsyncComponent} from 'vue';
const ValidatedInput = defineAsyncComponent(() => import('@/components/validation/ValidatedInput'));
data() {
return {
coupon: '',
couponErrors: [],
loginError: '',
submitted: false,
me: {
email: '',
},
teacherEditionUrl: `${process.env.HEP_URL}/myskillbox-lehrpersonen`,
studentEditionUrl: `${process.env.HEP_URL}/myskillbox-fur-lernende`,
loading: false,
};
},
methods: {
validateBeforeSubmit() {
this.submitted = true;
this.loading = true;
this.$apollo
.mutate({
export default {
mixins: [me, logout],
components: {
LoadingButton,
ValidationObserver,
ValidatedInput,
},
data() {
return {
coupon: '',
couponErrors: [],
loginError: '',
submitted: false,
me: {
email: '',
},
teacherEditionUrl: `${process.env.HEP_URL}/myskillbox-lehrpersonen`,
studentEditionUrl: `${process.env.HEP_URL}/myskillbox-fur-lernende`,
loading: false,
};
},
methods: {
validateBeforeSubmit() {
this.submitted = true;
this.loading = true;
this.$apollo.mutate({
mutation: REDEEM_COUPON,
variables: {
input: {
couponCode: this.coupon,
},
},
update: (store, { data: { coupon } }) => {
update: (
store,
{
data: {coupon},
},
) => {
if (coupon.success) {
this.couponErrors = [];
this.$apollo
.query({
query: ME_QUERY,
fetchPolicy: 'network-only',
})
.then(() => this.$router.push('/'));
this.$apollo.query({
query: ME_QUERY,
fetchPolicy: 'network-only',
}).then(() => this.$router.push('/'));
}
},
})
.catch(({ message }) => {
if (message.indexOf('invalid_coupon') > -1) {
this.couponErrors = ['Der angegebene Coupon-Code ist ungültig.'];
} else {
this.couponErrors = [
'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es nochmals oder kontaktieren Sie den Administrator.',
];
}
})
.finally(() => {
this.loading = false;
});
}).catch(({message}) => {
if (message.indexOf('invalid_coupon') > -1) {
this.couponErrors = ['Der angegebene Coupon-Code ist ungültig.'];
} else {
this.couponErrors = ['Es ist ein Fehler aufgetreten. Bitte versuchen Sie es nochmals oder kontaktieren Sie den Administrator.'];
}
})
.finally(() => {
this.loading = false;
});
},
},
},
};
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.text-link {
font-family: $sans-serif-font-family;
color: $color-brand;
}
.actions {
&__reset {
display: inline-block;
margin-left: $large-spacing;
.text-link {
font-family: $sans-serif-font-family;
color: $color-brand;
}
}
.get-license {
margin-top: $large-spacing;
}
.license-links {
&__item {
margin-bottom: $medium-spacing;
.actions {
&__reset {
display: inline-block;
margin-left: $large-spacing;
}
}
}
.get-license {
margin-top: $large-spacing
}
.license-links {
&__item {
margin-bottom: $medium-spacing;
}
}
</style>

170
client/src/pages/module/moduleVisibility.vue
View File

@ -1,6 +1,8 @@
<template>
<div class="module-visibility">
<h1 class="module-visibility__page-title">Sichtbarkeit</h1>
<h1 class="module-visibility__page-title">
Sichtbarkeit
</h1>
<div class="module-visibility__section">
<p class="module-visibility__paragraph">
Wollen Sie die angepasste Sichtbarkeit (
@ -16,113 +18,127 @@
class="skillbox-input skillbox-dropdown module-visibility__dropdown"
@change="select($event.target.value)"
>
<option value="" selected>-</option>
<option :value="schoolClass.id" v-for="schoolClass in schoolClasses" :key="schoolClass.id">
<option
value=""
selected
>
-
</option>
<option
:value="schoolClass.id"
v-for="schoolClass in schoolClasses"
:key="schoolClass.id"
>
{{ schoolClass.name }}
</option>
</select>
für {{ currentClassName }} übernehmen.
</div>
<div class="module-visibility__section">
<a class="button button--primary" data-cy="save-visibility-button" @click="sync">Anpassungen übernehmen</a>
<a
class="button button--primary"
data-cy="save-visibility-button"
@click="sync"
>Anpassungen übernehmen</a>
</div>
</div>
</template>
<script>
import me from '@/mixins/me';
import me from '@/mixins/me';
import SYNC_VISIBILITY_MUTATION from '@/graphql/gql/mutations/syncModuleVisibility.gql';
import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
import { MODULE_PAGE } from '@/router/module.names';
import SYNC_VISIBILITY_MUTATION from '@/graphql/gql/mutations/syncModuleVisibility.gql';
import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery';
import {MODULE_PAGE} from '@/router/module.names';
const EyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/EyeIcon');
import {defineAsyncComponent} from 'vue';
const EyeIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/EyeIcon'));
export default {
mixins: [me],
components: {
EyeIcon,
},
export default {
data() {
return {
selectedClassId: '',
};
},
computed: {
schoolClasses() {
return this.me.schoolClasses.filter((schoolClass) => schoolClass.id !== this.me.selectedClass.id);
mixins: [me],
components: {
EyeIcon,
},
slug() {
return this.$route.params.slug;
},
},
methods: {
select(selectedClassId) {
this.selectedClassId = selectedClassId;
data() {
return {
selectedClassId: '',
};
},
sync() {
if (this.selectedClassId) {
const slug = this.slug;
this.$apollo
.mutate({
mutation: SYNC_VISIBILITY_MUTATION,
variables: {
input: {
module: slug,
templateSchoolClass: this.selectedClassId,
schoolClass: this.me.selectedClass.id,
},
},
refetchQueries: [
{
query: MODULE_DETAILS_QUERY,
variables: {
slug,
computed: {
schoolClasses() {
return this.me.schoolClasses.filter(schoolClass => schoolClass.id !== this.me.selectedClass.id);
},
slug() {
return this.$route.params.slug;
}
},
methods: {
select(selectedClassId) {
this.selectedClassId = selectedClassId;
},
sync() {
if (this.selectedClassId) {
const slug = this.slug;
this.$apollo.mutate({
mutation: SYNC_VISIBILITY_MUTATION,
variables: {
input: {
module: slug,
templateSchoolClass: this.selectedClassId,
schoolClass: this.me.selectedClass.id,
},
},
],
})
.then(() => {
refetchQueries: [
{
query: MODULE_DETAILS_QUERY,
variables: {
slug,
},
},
],
},
).then(() => {
this.$router.push({
name: MODULE_PAGE,
params: {
slug,
},
slug
}
});
});
}
}
},
},
},
};
};
</script>
<style scoped lang="scss">
@import '~styles/_helpers';
@import '~styles/_helpers';
.module-visibility {
@include settings-page;
.module-visibility {
@include settings-page;
margin: 0 auto;
margin: 0 auto;
&__inline-icon {
width: 25px;
height: 25px;
vertical-align: middle;
&__inline-icon {
width: 25px;
height: 25px;
vertical-align: middle;
}
&__dropdown {
width: 200px;
margin: 0 $medium-spacing;
}
&__form {
display: flex;
align-items: center;
@include regular-text;
font-weight: 600;
}
}
&__dropdown {
width: 200px;
margin: 0 $medium-spacing;
}
&__form {
display: flex;
align-items: center;
@include regular-text;
font-weight: 600;
}
}
</style>

21
client/src/pages/onboarding/start.vue
View File

@ -1,18 +1,23 @@
<template>
<div>
<logo class="onboarding__logo" />
<h1 class="onboarding__heading">Herzlich willkommen!</h1>
<h1 class="onboarding__heading">
Herzlich willkommen!
</h1>
<p class="onboarding__claim">Schauen Sie sich die Einführung an und lernen Sie {{ $flavor.textAppName }} kennen.</p>
<p class="onboarding__claim">
Schauen Sie sich die Einführung an und lernen Sie {{ $flavor.textAppName }} kennen.
</p>
</div>
</template>
<script>
const Logo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo');
import {defineAsyncComponent} from 'vue';
const Logo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Logo'));
export default {
components: {
Logo,
},
};
export default {
components: {
Logo
},
};
</script>

424
client/src/pages/survey.vue
View File

@ -5,282 +5,258 @@
</h1>
<div id="survey" />
<solution :value="solution" v-if="showSolution" />
<solution
:value="solution"
v-if="showSolution"
/>
<div v-if="surveyComplete">
<a class="button button--primary" @click="reopen">Übung bearbeiten</a>
<a
class="button button--primary"
@click="reopen"
>Übung bearbeiten</a>
</div>
</div>
</template>
<script>
import '@/styles/survey.modern.css';
import '@/styles/survey.reset.css';
import { css } from '@/survey.config';
import gql from 'graphql-tag';
import { Model, StylesManager } from 'survey-knockout';
// we are switching to the knockout version because the Vue version only works with Vue 2 (as of July 2022)
import {css} from '@/survey.config';
import gql from 'graphql-tag';
import {Model} from 'survey-core';
// we are switching to the knockout version because the Vue version only works with Vue 2 (as of July 2022)
import 'survey-knockout-ui';
import SURVEY_QUERY from '@/graphql/gql/queries/surveyQuery.gql';
import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
import SURVEY_QUERY from '@/graphql/gql/queries/surveyQuery.gql';
import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
import { extractSurveySolutions } from '@/helpers/survey-solutions';
import { isTeacher } from '@/helpers/is-teacher';
import {extractSurveySolutions} from '@/helpers/survey-solutions';
import {isTeacher} from '@/helpers/is-teacher';
import { meQuery } from '@/graphql/queries';
import {meQuery} from '@/graphql/queries';
const Solution = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/Solution');
StylesManager.applyTheme('modern');
import {defineAsyncComponent} from 'vue';
const Solution = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution'));
const MODULE_QUERY = gql`
query ModuleSolutions($slug: String) {
module(slug: $slug) {
solutionsEnabled
slug
const MODULE_QUERY = gql`
query ModuleSolutions($slug: String) {
module(slug: $slug) {
solutionsEnabled
slug
}
}
}
`;
export default {
props: ['id'],
components: {
Solution,
},
data() {
return {
survey: this.initSurvey(),
currentPage: null,
surveyData: null,
title: '',
module: {},
completed: false,
me: {
permissions: [],
},
saveDisabled: false,
};
},
computed: {
surveyComplete() {
return this.survey && this.survey.isCompleted;
export default {
props: ['id'],
components: {
Solution,
},
showSolution() {
return (this.module.solutionsEnabled || this.isTeacher) && !this.survey.isCompleted;
},
solution() {
// todo: should this be done inside of Solution.vue?
data() {
return {
text: this.answers.reduce((previous, answer) => {
if (!answer.answer) {
return previous;
}
if (answer.type === 'matrix' || answer.type === 'checkbox') {
// wrap all the answers inside li tags and convert to a single string
const answerText = answer.answer.map((a) => `<li class="solution-text__list-item">${a}</li>`).join('');
return `
survey: this.initSurvey(),
title: '',
module: {},
completed: false,
me: {
permissions: [],
},
saveDisabled: false,
};
},
computed: {
surveyComplete() {
return this.survey && this.survey.isCompleted;
},
showSolution() {
return (this.module.solutionsEnabled || this.isTeacher) && !this.survey.isCompleted;
},
solution() {
// todo: should this be done inside of Solution.vue?
return {
text: this.answers.reduce((previous, answer) => {
if (!answer.answer) {
return previous;
}
if (answer.type === 'matrix' || answer.type === 'checkbox') {
// wrap all the answers inside li tags and convert to a single string
const answerText = answer.answer.map(a => `<li class="solution-text__list-item">${a}</li>`).join('');
return `
${previous}
<h2 class="solution-text__heading">${answer.title}</h2>
<ul class="solution-text__answer solution-text__list">${answerText}</ul>
`;
} else {
return `
} else {
return `
${previous}
<h2 class="solution-text__heading">${answer.title}</h2>
<p class="solution-text__answer">${answer.answer}</p>
`;
}
}, ''),
};
},
answers() {
return this.currentPage && this.currentPage.elements
? this.currentPage.elements.reduce(extractSurveySolutions, [])
: [];
},
isTeacher() {
return isTeacher(this);
},
},
mounted() {
if (this.surveyData) {
this.loadSurveyFromServer(this.surveyData);
}
},
destroyed() {},
methods: {
initSurvey(data, answers) {
let survey = new Model(data);
const flatAnswers = {};
for (let k in answers) {
flatAnswers[k] = answers[k].answer;
}
if (Object.keys(flatAnswers).length > 0) {
// answers are not empty
survey.data = flatAnswers;
}
this.currentPage = survey.currentPage;
const updatePage = (sender, { oldCurrentPage, newCurrentPage }) => {
console.log(oldCurrentPage, newCurrentPage);
this.currentPage = newCurrentPage;
};
const saveSurvey = (sender, { exit }) => {
if (this.saveDisabled) {
return;
}
this.completed = true;
const data = {};
for (let k in survey.data) {
// if (survey.data.hasOwnProperty(k)) {
if (Object.prototype.hasOwnProperty.call(survey.data, k)) {
let question = sender.getQuestionByName(k);
data[k] = {
answer: survey.data[k],
correct: question && question.correctAnswer ? question.correctAnswer : '',
};
}
}
if (Object.keys(data).length === 0) {
// data is empty
return;
}
const answer = {
surveyId: this.id,
data: JSON.stringify(data),
}
}, ''),
};
},
answers() {
return this.survey.currentPage && this.survey.currentPage.elements
? this.survey.currentPage.elements.reduce(extractSurveySolutions, [])
: [];
},
isTeacher() {
return isTeacher(this);
},
},
this.$apollo
.mutate({
methods: {
initSurvey(data, answers) {
let survey = new Model(data);
const flatAnswers = {};
for (let k in answers) {
flatAnswers[k] = answers[k].answer;
}
this.$log.debug('flatAnswers', flatAnswers);
this.$log.debug('data', survey.data);
if (Object.keys(flatAnswers).length > 0) {
// answers are not empty
survey.data = flatAnswers;
}
const saveSurvey = (sender, {exit}) => {
this.$log.debug('saving survey', sender);
if (this.saveDisabled) {
return;
}
this.completed = true;
const data = {};
for (let k in survey.data) {
// if (survey.data.hasOwnProperty(k)) {
if (Object.prototype.hasOwnProperty.call(survey.data, k)) {
let question = sender.getQuestionByName(k);
data[k] = {
answer: survey.data[k],
correct: question && question.correctAnswer ? question.correctAnswer : '',
};
}
}
if (Object.keys(data).length === 0) {
// data is empty
return;
}
const answer = {
surveyId: this.id,
data: JSON.stringify(data),
};
this.$apollo.mutate({
mutation: UPDATE_ANSWER,
variables: {
input: {
answer,
},
},
update: (
store,
{
data: {
updateAnswer: { answer },
},
}
) => {
update: (store, {data: {updateAnswer: {answer}}}) => {
const query = SURVEY_QUERY;
const variables = { id: this.id };
const { survey } = store.readQuery({ query, variables });
const variables = {id: this.id};
const {survey} = store.readQuery({query, variables});
if (survey) {
const newData = {
// data is already in use in parent scope
const newData = { // data is already in use in parent scope
survey: {
...survey,
answer,
},
answer
}
};
store.writeQuery({ query, variables, data: newData });
store.writeQuery({query, variables, data: newData});
}
},
})
.then(() => {
}).then(() => {
if (exit) {
this.$router.go(-1);
}
});
};
survey.onComplete.add((sender, options) => {
saveSurvey(sender, {
...options,
exit: true,
});
});
survey.onCurrentPageChanged.add(saveSurvey);
survey.onCurrentPageChanged.add(updatePage);
survey.css = css;
survey.locale = 'de';
survey.showProgressBar = 'bottom';
survey.pageNextText = 'Speichern & Weiter';
survey.render('survey');
return survey;
},
reopen() {
this.saveDisabled = true; // disable saving, because resetting triggers a page change which we don't want to save
this.completed = false;
let data = this.survey.data; // save the data
this.survey.clear();
this.survey.data = data; // reapply it
this.saveDisabled = false;
},
loadSurveyFromServer(survey) {
let json = JSON.parse(survey.data);
json.showTitle = false;
json.showProgressBar = 'bottom';
let answer = {};
if (survey.answer && survey.answer.data) {
answer = JSON.parse(survey.answer.data);
}
if (!this.completed) {
this.survey = this.initSurvey(json, answer);
}
this.title = json.title;
},
},
apollo: {
survey: {
query: SURVEY_QUERY,
variables() {
return {
id: this.id,
};
},
manual: true,
result({ data, loading }) {
if (!loading) {
this.surveyData = data.survey;
this.loadSurveyFromServer(data.survey);
const module = data.survey.module;
this.$apollo.addSmartQuery('module', {
query: MODULE_QUERY,
variables: {
slug: module.slug,
},
survey.onComplete.add((sender, options) => {
saveSurvey(sender, {
...options,
exit: true
});
}
});
survey.onCurrentPageChanged.add(saveSurvey);
survey.css = css;
survey.locale = 'de';
survey.showProgressBar = 'bottom';
survey.pageNextText = 'Speichern & Weiter';
this.$log.debug(survey.data);
survey.render('survey');
return survey;
},
reopen() {
this.saveDisabled = true; // disable saving, because resetting triggers a page change which we don't want to save
this.completed = false;
let data = this.survey.data; // save the data
this.survey.clear();
this.survey.data = data; // reapply it
this.saveDisabled = false;
},
},
me: meQuery,
},
};
apollo: {
survey: {
query: SURVEY_QUERY,
variables() {
return {
id: this.id,
};
},
manual: true,
result({data, loading }) {
if (!loading) {
let json = JSON.parse(data.survey.data);
json.showTitle = false;
let answer = {};
if (data.survey.answer && data.survey.answer.data) {
answer = JSON.parse(data.survey.answer.data);
}
if (!this.completed) {
this.survey = this.initSurvey(json, answer);
}
this.title = json.title;
const module = data.survey.module;
this.$apollo.addSmartQuery('module', {
query: MODULE_QUERY,
variables: {
slug: module.slug
},
});
}
},
},
me: meQuery,
},
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import "~styles/helpers";
.survey-page {
max-width: 800px;
display: grid;
grid-template-rows: auto 1fr;
grid-auto-rows: auto;
grid-row-gap: $large-spacing;
justify-self: center;
padding: 100px 0;
width: 100%;
.survey-page {
max-width: 800px;
display: grid;
grid-template-rows: auto 1fr;
grid-auto-rows: auto;
grid-row-gap: $large-spacing;
justify-self: center;
padding: 100px 0;
width: 100%;
&__title {
@include meta-title;
margin: 0;
&__title {
@include meta-title;
margin: 0;
}
}
}
</style>

6
client/src/pages/topic-page.vue
View File

@ -46,15 +46,15 @@
<script>
import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
import {defineAsyncComponent} from 'vue';
import TOPIC_QUERY from '@/graphql/gql/queries/topicQuery.gql';
import me from '@/mixins/me';
import TopicNavigation from '@/components/book-navigation/TopicNavigation';
import UPDATE_LAST_TOPIC_MUTATION from '@/graphql/gql/mutations/updateLastTopic.gql';
import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
const PlayIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/Play');
const BulbIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/BulbIcon');
const PlayIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Play'));
const BulbIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/BulbIcon'));
export default {