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

Apply prettier to whole project

This commit is contained in:
Ramon Wenger 2023-01-12 15:58:59 +01:00
parent 647e684469
commit 9a91aaf47c
443 changed files with 19003 additions and 17334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
client/.babelrc
View File

@ -1,14 +1,15 @@
{
"presets": [
"@babel/preset-typescript",
["@babel/preset-env", {
"useBuiltIns": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
[
"@babel/preset-env",
{
"useBuiltIns": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}
}]
]
],
"plugins": [
"@babel/plugin-transform-runtime"
]
"plugins": ["@babel/plugin-transform-runtime"]
}

114
client/.eslintrc.js
View File

@ -10,7 +10,7 @@ module.exports = {
browser: true,
},
globals: {
process: "readonly"
process: 'readonly',
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
@ -21,69 +21,77 @@ module.exports = {
'plugin:@typescript-eslint/eslint-recommended',
],
// required to lint *.vue files
plugins: [
'vue',
'@typescript-eslint'
plugins: ['vue', '@typescript-eslint'],
overrides: [
{
files: ['*.ts', '*.tsx'],
rules: {
'no-unused-vars': 'off',
},
},
],
overrides: [{
files: ['*.ts','*.tsx'],
rules: {
'no-unused-vars': 'off'
}
}],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'indent': 'off',
'semi': ['error', 'always'],
indent: 'off',
semi: ['error', 'always'],
'space-before-function-paren': 'off',
'comma-dangle': 'off',
// vue rules
'vue/require-prop-types': 'off', //todo: should we do this?
'vue/require-default-prop': 'off', //todo: should we do this?
'vue/attributes-order': ['error', {
'order': [
'OTHER_ATTR',
'DEFINITION',
'LIST_RENDERING',
'CONDITIONALS',
'RENDER_MODIFIERS',
'GLOBAL',
'UNIQUE',
'TWO_WAY_BINDING',
'OTHER_DIRECTIVES',
'EVENTS',
'CONTENT'
]
}],
"vue/multi-word-component-names": ["off", {
"ignores": []
}],
'vue/order-in-components': ['error', {
'order': [
'el',
'name',
'parent',
'functional',
['delimiters', 'comments'],
['props', 'propsData'],
'mixins',
['components', 'directives', 'filters'],
'data',
'extends',
'inheritAttrs',
'model',
'computed',
'watch',
'LIFECYCLE_HOOKS',
'methods',
['template', 'render'],
'renderError'
]
}]
}
'vue/attributes-order': [
'error',
{
order: [
'OTHER_ATTR',
'DEFINITION',
'LIST_RENDERING',
'CONDITIONALS',
'RENDER_MODIFIERS',
'GLOBAL',
'UNIQUE',
'TWO_WAY_BINDING',
'OTHER_DIRECTIVES',
'EVENTS',
'CONTENT',
],
},
],
'vue/multi-word-component-names': [
'off',
{
ignores: [],
},
],
'vue/order-in-components': [
'error',
{
order: [
'el',
'name',
'parent',
'functional',
['delimiters', 'comments'],
['props', 'propsData'],
'mixins',
['components', 'directives', 'filters'],
'data',
'extends',
'inheritAttrs',
'model',
'computed',
'watch',
'LIFECYCLE_HOOKS',
'methods',
['template', 'render'],
'renderError',
],
},
],
},
};

12
client/.postcssrc.js
View File

@ -1,10 +1,10 @@
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
plugins: {
'postcss-import': {},
'postcss-url': {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {}
}
}
autoprefixer: {},
},
};

68
client/build/build.js
View File

@ -1,41 +1,45 @@
'use strict'
require('./check-versions')()
'use strict';
require('./check-versions')();
process.env.NODE_ENV = 'production'
process.env.NODE_ENV = 'production';
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
const ora = require('ora');
const rm = require('rimraf');
const path = require('path');
const chalk = require('chalk');
const webpack = require('webpack');
const config = require('../config');
const webpackConfig = require('./webpack.prod.conf');
const spinner = ora('building for production...')
spinner.start()
const spinner = ora('building for production...');
spinner.start();
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), (err) => {
if (err) throw err;
webpack(webpackConfig, (err, stats) => {
spinner.succeed()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
chunks: false,
chunkModules: false
}) + '\n\n')
spinner.succeed();
if (err) throw err;
process.stdout.write(
stats.toString({
colors: true,
modules: false,
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
chunks: false,
chunkModules: false,
}) + '\n\n'
);
if (stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n'))
process.exit(1)
console.log(chalk.red(' Build failed with errors.\n'));
process.exit(1);
}
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})
console.log(chalk.cyan(' Build complete.\n'));
console.log(
chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
" Opening index.html over file:// won't work.\n"
)
);
});
});

51
client/build/check-versions.js
View File

@ -1,54 +1,53 @@
'use strict'
const chalk = require('chalk')
const semver = require('semver')
const packageConfig = require('../package.json')
const shell = require('shelljs')
'use strict';
const chalk = require('chalk');
const semver = require('semver');
const packageConfig = require('../package.json');
const shell = require('shelljs');
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
function exec(cmd) {
return require('child_process').execSync(cmd).toString().trim();
}
const versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
}
]
versionRequirement: packageConfig.engines.node,
},
];
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
})
versionRequirement: packageConfig.engines.npm,
});
}
module.exports = function () {
const warnings = []
const warnings = [];
for (let i = 0; i < versionRequirements.length; i++) {
const mod = versionRequirements[i]
const mod = versionRequirements[i];
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
)
warnings.push(
mod.name + ': ' + chalk.red(mod.currentVersion) + ' should be ' + chalk.green(mod.versionRequirement)
);
}
}
if (warnings.length) {
console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log()
console.log('');
console.log(chalk.yellow('To use this template, you must update following to modules:'));
console.log();
for (let i = 0; i < warnings.length; i++) {
const warning = warnings[i]
console.log(' ' + warning)
const warning = warnings[i];
console.log(' ' + warning);
}
console.log()
process.exit(1)
console.log();
process.exit(1);
}
}
};

21
client/build/utils.js
View File

@ -1,20 +1,17 @@
'use strict'
const path = require('path')
const config = require('../config')
const packageConfig = require('../package.json')
'use strict';
const path = require('path');
const config = require('../config');
const packageConfig = require('../package.json');
const isDev = process.env.NODE_ENV !== 'production';
const assetsPath = (_path) => {
const assetsSubDirectory = isDev
? config.dev.assetsSubDirectory
: config.build.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
const assetsSubDirectory = isDev ? config.dev.assetsSubDirectory : config.build.assetsSubDirectory;
return path.posix.join(assetsSubDirectory, _path);
};
module.exports = {
isDev,
assetsPath
}
assetsPath,
};

15
client/build/webpack.base.conf.js
View File

@ -3,10 +3,10 @@ const path = require('path');
const config = require('../config');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {VueLoaderPlugin} = require('vue-loader');
const { VueLoaderPlugin } = require('vue-loader');
const ESLintPlugin = require('eslint-webpack-plugin');
const {isDev, assetsPath} = require('./utils');
const { isDev, assetsPath } = require('./utils');
function resolve(dir) {
return path.join(__dirname, '..', dir);
@ -15,7 +15,7 @@ function resolve(dir) {
const eslintOptions = {
formatter: require('eslint-formatter-friendly'),
emitWarning: !config.dev.showEslintErrorsInOverlay,
extensions: ['js', 'ts', 'vue']
extensions: ['js', 'ts', 'vue'],
};
//todo: mini-css-extract-plugin? upgrade to webpack 4, then use this
@ -29,9 +29,7 @@ module.exports = {
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: isDev
? config.dev.assetsPublicPath
: config.build.assetsPublicPath,
publicPath: isDev ? config.dev.assetsPublicPath : config.build.assetsPublicPath,
},
optimization: {
splitChunks: {
@ -131,10 +129,7 @@ module.exports = {
// styleRule(true), // sass rule
],
},
plugins: [
new VueLoaderPlugin(),
new ESLintPlugin(eslintOptions),
],
plugins: [new VueLoaderPlugin(), new ESLintPlugin(eslintOptions)],
// node: {
// // prevent webpack from injecting useless setImmediate polyfill because Vue

13
client/build/webpack.dev.conf.js
View File

@ -8,7 +8,7 @@ const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const portfinder = require('portfinder');
const {merge} = require('webpack-merge');
const { merge } = require('webpack-merge');
const HOST = process.env.HOST;
const PORT = process.env.PORT && Number(process.env.PORT);
@ -21,15 +21,12 @@ const devWebpackConfig = merge(baseWebpackConfig, {
devServer: {
client: {
logging: 'warn',
overlay: config.dev.errorOverlay ? {errors: true, warnings: false} : false,
overlay: config.dev.errorOverlay ? { errors: true, warnings: false } : false,
progress: true,
},
historyApiFallback: {
rewrites: [
{from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html')},
],
rewrites: [{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }],
},
hot: true,
compress: true,
@ -66,8 +63,8 @@ const devWebpackConfig = merge(baseWebpackConfig, {
],
}),
new BundleAnalyzerPlugin({
analyzerMode: 'disabled' // do nothing by default, but be able to generate stats with --profile
})
analyzerMode: 'disabled', // do nothing by default, but be able to generate stats with --profile
}),
],
});

19
client/build/webpack.prod.conf.js
View File

@ -3,11 +3,11 @@ const path = require('path');
const utils = require('./utils');
const webpack = require('webpack');
const config = require('../config');
const {merge} = require('webpack-merge');
const { merge } = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const env = require('../config/prod.env');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@ -21,9 +21,7 @@ const webpackConfig = merge(baseWebpackConfig, {
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
},
optimization: {
minimizer: [
new CssMinimizerPlugin()
]
minimizer: [new CssMinimizerPlugin()],
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
@ -44,7 +42,8 @@ const webpackConfig = merge(baseWebpackConfig, {
filename: config.build.index,
template: 'index.html',
...require('../config/prod.env'),
minify: { // defaults from https://github.com/jantimon/html-webpack-plugin#minification
minify: {
// defaults from https://github.com/jantimon/html-webpack-plugin#minification
collapseWhitespace: true,
keepClosingSlash: true,
removeComments: true,
@ -112,14 +111,10 @@ if (config.build.productionGzip) {
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$',
),
test: new RegExp('\\.(' + config.build.productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8,
}),
})
);
}

8
client/config/dev.env.js
View File

@ -1,8 +1,8 @@
'use strict'
const {merge} = require('webpack-merge')
const prodEnv = require('./prod.env')
'use strict';
const { merge } = require('webpack-merge');
const prodEnv = require('./prod.env');
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
VUE_APP_ENABLE_SPELLCHECK: 'true'
VUE_APP_ENABLE_SPELLCHECK: 'true',
});

13
client/config/index.js
View File

@ -1,12 +1,11 @@
'use strict'
'use strict';
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
const path = require('path');
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
@ -41,7 +40,7 @@ module.exports = {
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
cssSourceMap: true,
},
build: {
@ -71,6 +70,6 @@ module.exports = {
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
bundleAnalyzerReport: process.env.npm_config_report,
},
};

12
client/config/prod-dha.env.js
View File

@ -1,9 +1,9 @@
'use strict'
'use strict';
module.exports = {
/*
* ENV variables used in JS code need to be stringyfied, as they will be replaced in the code, and JS needs quotes
* around strings
*/
* ENV variables used in JS code need to be stringyfied, as they will be replaced in the code, and JS needs quotes
* around strings
*/
VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
/*
@ -12,6 +12,6 @@ module.exports = {
// vvvv HTML PROPERTIES FROM HERE, NOT STRINGIFIED vvvv
VUE_APP_FAVICON_32: 'https://skillbox-my-detailhandel-dha-prod.s3.eu-central-1.amazonaws.com/myDHA-favicon.png',
VUE_APP_FAVICON_16: 'https://skillbox-my-detailhandel-dha-prod.s3.eu-central-1.amazonaws.com/myDHA-favicon.png',
VUE_APP_TITLE: 'myDHA'
VUE_APP_TITLE: 'myDHA',
// ^^^^ HTML PROPERTIES TO HERE, NOT STRINGIFIED ^^^^
}
};

12
client/config/prod-dhf.env.js
View File

@ -1,9 +1,9 @@
'use strict'
'use strict';
module.exports = {
/*
* ENV variables used in JS code need to be stringyfied, as they will be replaced in the code, and JS needs quotes
* around strings
*/
* ENV variables used in JS code need to be stringyfied, as they will be replaced in the code, and JS needs quotes
* around strings
*/
VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
/*
@ -12,6 +12,6 @@ module.exports = {
// vvvv HTML PROPERTIES FROM HERE, NOT STRINGIFIED vvvv
VUE_APP_FAVICON_32: 'https://skillbox-my-detailhandel-dhf-prod.s3.eu-central-1.amazonaws.com/myDHF-favicon.png',
VUE_APP_FAVICON_16: 'https://skillbox-my-detailhandel-dhf-prod.s3.eu-central-1.amazonaws.com/myDHF-favicon.png',
VUE_APP_TITLE: 'myDHF'
VUE_APP_TITLE: 'myDHF',
// ^^^^ HTML PROPERTIES TO HERE, NOT STRINGIFIED ^^^^
}
};

12
client/config/prod-my-kv.env.js
View File

@ -1,9 +1,9 @@
'use strict'
'use strict';
module.exports = {
/*
* ENV variables used in JS code need to be stringyfied, as they will be replaced in the code, and JS needs quotes
* around strings
*/
* ENV variables used in JS code need to be stringyfied, as they will be replaced in the code, and JS needs quotes
* around strings
*/
VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
/*
@ -12,6 +12,6 @@ module.exports = {
// vvvv HTML PROPERTIES FROM HERE, NOT STRINGIFIED vvvv
VUE_APP_FAVICON_32: 'https://skillbox-my-kv-prod.s3-eu-west-1.amazonaws.com/mykv-favicon.png',
VUE_APP_FAVICON_16: 'https://skillbox-my-kv-prod.s3-eu-west-1.amazonaws.com/mykv-favicon.png',
VUE_APP_TITLE: 'myKV'
VUE_APP_TITLE: 'myKV',
// ^^^^ HTML PROPERTIES TO HERE, NOT STRINGIFIED ^^^^
}
};

17
client/config/prod.env.js
View File

@ -1,5 +1,5 @@
'use strict'
const { merge } = require('webpack-merge')
'use strict';
const { merge } = require('webpack-merge');
const values = {
NODE_ENV: '"production"',
@ -9,10 +9,10 @@ const values = {
LOGOUT_REDIRECT_URL: JSON.stringify(process.env.LOGOUT_REDIRECT_URL),
VUE_APP_FLAVOR: JSON.stringify(process.env.APP_FLAVOR),
/*
* ENV variables used in JS code need to be stringyfied, as they will be replaced (in place) in the code,
* and JS needs quotes around strings
* see https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code
*/
* ENV variables used in JS code need to be stringyfied, as they will be replaced (in place) in the code,
* and JS needs quotes around strings
* see https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code
*/
VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
/*
@ -21,9 +21,9 @@ const values = {
// vvvv HTML PROPERTIES FROM HERE, NOT STRINGIFIED vvvv
VUE_APP_FAVICON_32: '/static/favicon-32x32.png',
VUE_APP_FAVICON_16: '/static/favicon-16x16.png',
VUE_APP_TITLE: 'mySkillbox'
VUE_APP_TITLE: 'mySkillbox',
// ^^^^ HTML PROPERTIES TO HERE, NOT STRINGIFIED ^^^^
}
};
switch (process.env.APP_FLAVOR) {
case 'my-kv':
@ -39,4 +39,3 @@ switch (process.env.APP_FLAVOR) {
// we are on the skillbox APP_FLAVOR
module.exports = values;
}

29
client/cypress.e2e.ts
View File

@ -1,27 +1,24 @@
import {defineConfig} from 'cypress';
import {readFileSync} from "fs";
import {resolve} from "path";
export default defineConfig( {
import { defineConfig } from 'cypress';
import { readFileSync } from 'fs';
import { resolve } from 'path';
export default defineConfig({
e2e: {
"baseUrl": "http://localhost:8000",
baseUrl: 'http://localhost:8000',
specPattern: 'cypress/e2e/e2e/**/*.{spec,cy}.{js,ts}',
supportFile: 'cypress/support/e2e.ts',
setupNodeEvents(on, config) {
on('task', {
getSchema() {
return readFileSync(
resolve(__dirname, '../server/schema.graphql'),
'utf8'
);
}
return readFileSync(resolve(__dirname, '../server/schema.graphql'), 'utf8');
},
});
},
},
"videoUploadOnPasses": false,
"reporter": "junit",
"reporterOptions": {
"mochaFile": "cypress/test-reports/e2e/cypress-results-[hash].xml",
"toConsole": true
videoUploadOnPasses: false,
reporter: 'junit',
reporterOptions: {
mochaFile: 'cypress/test-reports/e2e/cypress-results-[hash].xml',
toConsole: true,
},
"projectId": "msk-ee",
projectId: 'msk-ee',
});

29
client/cypress.frontend.ts
View File

@ -1,34 +1,29 @@
import {defineConfig} from 'cypress';
import {readFileSync} from "fs";
import {resolve} from "path";
import { defineConfig } from 'cypress';
import { readFileSync } from 'fs';
import { resolve } from 'path';
export default defineConfig({
chromeWebSecurity: false,
e2e: {
baseUrl: "http://localhost:8080",
baseUrl: 'http://localhost:8080',
specPattern: 'cypress/e2e/frontend/**/*.{cy,spec}.{js,ts}',
supportFile: 'cypress/support/e2e.ts',
setupNodeEvents(on, config) {
on('task', {
getSchema() {
return readFileSync(
resolve(__dirname, '../server/schema.graphql'),
'utf8'
);
}
return readFileSync(resolve(__dirname, '../server/schema.graphql'), 'utf8');
},
});
},
},
videoUploadOnPasses: false,
reporter: "junit",
reporter: 'junit',
reporterOptions: {
mochaFile: "cypress/test-reports/frontend/cypress-results-[hash].xml",
toConsole: true
mochaFile: 'cypress/test-reports/frontend/cypress-results-[hash].xml',
toConsole: true,
},
"projectId": "msk-fe",
projectId: 'msk-fe',
retries: {
runMode: 3
}
runMode: 3,
},
});

72
client/index.html
View File

@ -1,43 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title><%= htmlWebpackPlugin.options.VUE_APP_TITLE %></title>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<title><%= htmlWebpackPlugin.options.VUE_APP_TITLE %></title>
<link href='https://fonts.googleapis.com/css?family=Material+Icons' rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,800" rel="stylesheet">
<link href="https://use.typekit.net/tck7ptw.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,800" rel="stylesheet" />
<link href="https://use.typekit.net/tck7ptw.css" rel="stylesheet" />
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="<%- htmlWebpackPlugin.options.VUE_APP_FAVICON_32 %>">
<link rel="icon" type="image/png" sizes="16x16" href="<%- htmlWebpackPlugin.options.VUE_APP_FAVICON_16 %>">
<link rel="manifest" href="/static/site.webmanifest">
<link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="<%- htmlWebpackPlugin.options.VUE_APP_FAVICON_32 %>" />
<link rel="icon" type="image/png" sizes="16x16" href="<%- htmlWebpackPlugin.options.VUE_APP_FAVICON_16 %>" />
<link rel="manifest" href="/static/site.webmanifest" />
<link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<script>
window.UPLOADCARE_PUBLIC_KEY = '78212ff39934a59775ac';
window.UPLOADCARE_LOCALE = 'de';
window.UPLOADCARE_LOCALE_TRANSLATIONS = {
dialog: {
tabs: {
file: {
drag: 'Ziehen Sie ein Bild hier hinein',
button: 'Wählen Sie ein lokales Bild',
}
}
}
};
</script>
</head>
<body>
<div id="app">
<div class="center">
</div>
</div>
<!-- built files will be auto injected -->
</body>
<script>
window.UPLOADCARE_PUBLIC_KEY = '78212ff39934a59775ac';
window.UPLOADCARE_LOCALE = 'de';
window.UPLOADCARE_LOCALE_TRANSLATIONS = {
dialog: {
tabs: {
file: {
drag: 'Ziehen Sie ein Bild hier hinein',
button: 'Wählen Sie ein lokales Bild',
},
},
},
};
</script>
</head>
<body>
<div id="app">
<div class="center"></div>
</div>
<!-- built files will be auto injected -->
</body>
</html>

30
client/jest.config.js
View File

@ -1,11 +1,5 @@
module.exports = {
moduleFileExtensions: [
'js',
'jsx',
'ts',
'json',
'vue',
],
moduleFileExtensions: ['js', 'jsx', 'ts', 'json', 'vue'],
transform: {
'\\.(gql|graphql)$': 'jest-transform-graphql',
'^.+\\.js$': 'babel-jest',
@ -13,27 +7,15 @@ module.exports = {
'^.+\\.vue$': '@vue/vue2-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
},
modulePaths: [
'<rootDir>/src',
'<rootDir>/node_modules',
],
transformIgnorePatterns: [
'/node_modules/',
],
modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'],
transformIgnorePatterns: ['/node_modules/'],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1',
'^gql/(.*)$': '<rootDir>/src/graphql/gql/$1',
},
snapshotSerializers: [
'<rootDir>/node_modules/jest-serializer-vue',
],
snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
testEnvironment: 'jsdom',
testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
],
testMatch: ['**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'],
testURL: 'http://localhost/',
watchPlugins: [
'jest-watch-typeahead/filename',
'jest-watch-typeahead/testname',
],
watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
};

21
client/mock.js
View File

@ -1,29 +1,26 @@
const {readFileSync} = require('fs');
const {resolve} = require('path');
const { addMocksToSchema} = require('@graphql-tools/mock');
const { readFileSync } = require('fs');
const { resolve } = require('path');
const { addMocksToSchema } = require('@graphql-tools/mock');
const { makeExecutableSchema } = require('@graphql-tools/schema');
const { graphql } = require('graphql');
const schemaString = readFileSync(
resolve(__dirname,'../server/schema.graphql'),
'utf8'
);
const schemaString = readFileSync(resolve(__dirname, '../server/schema.graphql'), 'utf8');
// Make a GraphQL schema with no resolvers
const schema = makeExecutableSchema({ typeDefs: schemaString })
const schema = makeExecutableSchema({ typeDefs: schemaString });
// Create a new schema with mocks
const schemaWithMocks = addMocksToSchema({ schema })
const schemaWithMocks = addMocksToSchema({ schema });
const query = /* GraphQL */ `
query MeQuery {
me {
firstName
firstName
}
}
`
`;
graphql({
schema: schemaWithMocks,
source: query,
}).then(result => console.log('Got result', result))
}).then((result) => console.log('Got result', result));

4
client/src/@types/graphql.d.ts vendored
View File

@ -1,12 +1,12 @@
declare module '*.graphql' {
import {DocumentNode} from "graphql";
import { DocumentNode } from 'graphql';
const Schema: DocumentNode;
export = Schema;
}
declare module '*.gql' {
import {DocumentNode} from "graphql";
import { DocumentNode } from 'graphql';
const content: DocumentNode;
export default content;
}

6
client/src/@types/index.ts
View File

@ -11,7 +11,7 @@ export interface ContentBlock {
}
export interface ActionOptions {
up?: boolean,
down?: boolean,
extended?: boolean
up?: boolean;
down?: boolean;
extended?: boolean;
}

174
client/src/App.vue
View File

@ -1,109 +1,107 @@
<template>
<div
:class="{'no-scroll': showModal || showMobileNavigation}"
class="app"
id="app"
>
<div :class="{ 'no-scroll': showModal || showMobileNavigation }" class="app" id="app">
<read-only-banner />
<scroll-up />
<component
:is="showModalDeprecated"
v-if="showModalDeprecated"
/>
<component
:is="showModal"
v-if="showModal"
/>
<component :is="showModalDeprecated" v-if="showModalDeprecated" />
<component :is="showModal" v-if="showModal" />
<component :is="layout" />
</div>
</template>
<script>
import {mapGetters} from 'vuex';
import ScrollUp from '@/components/ScrollUp';
import ReadOnlyBanner from '@/components/ReadOnlyBanner';
import { mapGetters } from 'vuex';
import ScrollUp from '@/components/ScrollUp';
import ReadOnlyBanner from '@/components/ReadOnlyBanner';
import modals from '@/components/modals';
import modals from '@/components/modals';
const NewContentBlockWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/content-block-form/NewContentBlockWizard');
const EditContentBlockWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/content-block-form/EditContentBlockWizard');
const EditRoomEntryWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/rooms/room-entries/EditRoomEntryWizard');
const NewProjectEntryWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/portfolio/NewProjectEntryWizard');
const EditProjectEntryWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/portfolio/EditProjectEntryWizard');
const NewObjectiveWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/objective-groups/NewObjectiveWizard');
const NewNoteWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/notes/NewNoteWizard');
const EditNoteWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/notes/EditNoteWizard');
const EditClassNameWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/school-class/EditClassNameWizard');
const EditTeamNameWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/profile/EditTeamNameWizard');
const EditSnapshotTitleWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/snapshots/EditSnapshotTitleWizard');
const DefaultLayout = () => import(/* webpackChunkName: "layouts" */'@/layouts/DefaultLayout');
const SimpleLayout = () => import(/* webpackChunkName: "layouts" */'@/layouts/SimpleLayout');
const FullScreenLayout = () => import(/* webpackChunkName: "layouts" */'@/layouts/FullScreenLayout');
const PublicLayout = () => import(/* webpackChunkName: "layouts" */'@/layouts/PublicLayout');
const BlankLayout = () => import(/* webpackChunkName: "layouts" */'@/layouts/BlankLayout');
const SplitLayout = () => import(/* webpackChunkName: "layouts" */'@/layouts/SplitLayout');
const NewContentBlockWizard = () =>
import(/* webpackChunkName: "content-forms" */ '@/components/content-block-form/NewContentBlockWizard');
const EditContentBlockWizard = () =>
import(/* webpackChunkName: "content-forms" */ '@/components/content-block-form/EditContentBlockWizard');
const EditRoomEntryWizard = () =>
import(/* webpackChunkName: "content-forms" */ '@/components/rooms/room-entries/EditRoomEntryWizard');
const NewProjectEntryWizard = () =>
import(/* webpackChunkName: "content-forms" */ '@/components/portfolio/NewProjectEntryWizard');
const EditProjectEntryWizard = () =>
import(/* webpackChunkName: "content-forms" */ '@/components/portfolio/EditProjectEntryWizard');
const NewObjectiveWizard = () =>
import(/* webpackChunkName: "content-forms" */ '@/components/objective-groups/NewObjectiveWizard');
const NewNoteWizard = () => import(/* webpackChunkName: "content-forms" */ '@/components/notes/NewNoteWizard');
const EditNoteWizard = () => import(/* webpackChunkName: "content-forms" */ '@/components/notes/EditNoteWizard');
const EditClassNameWizard = () =>
import(/* webpackChunkName: "content-forms" */ '@/components/school-class/EditClassNameWizard');
const EditTeamNameWizard = () =>
import(/* webpackChunkName: "content-forms" */ '@/components/profile/EditTeamNameWizard');
const EditSnapshotTitleWizard = () =>
import(/* webpackChunkName: "content-forms" */ '@/components/snapshots/EditSnapshotTitleWizard');
const DefaultLayout = () => import(/* webpackChunkName: "layouts" */ '@/layouts/DefaultLayout');
const SimpleLayout = () => import(/* webpackChunkName: "layouts" */ '@/layouts/SimpleLayout');
const FullScreenLayout = () => import(/* webpackChunkName: "layouts" */ '@/layouts/FullScreenLayout');
const PublicLayout = () => import(/* webpackChunkName: "layouts" */ '@/layouts/PublicLayout');
const BlankLayout = () => import(/* webpackChunkName: "layouts" */ '@/layouts/BlankLayout');
const SplitLayout = () => import(/* webpackChunkName: "layouts" */ '@/layouts/SplitLayout');
export default {
name: 'App',
export default {
name: 'App',
components: {
ReadOnlyBanner,
ScrollUp,
DefaultLayout,
SimpleLayout,
FullScreenLayout,
PublicLayout,
BlankLayout,
SplitLayout,
NewContentBlockWizard,
EditContentBlockWizard,
EditRoomEntryWizard,
NewProjectEntryWizard,
EditProjectEntryWizard,
NewObjectiveWizard,
NewNoteWizard,
EditNoteWizard,
EditClassNameWizard,
EditTeamNameWizard,
EditSnapshotTitleWizard,
...modals
components: {
ReadOnlyBanner,
ScrollUp,
DefaultLayout,
SimpleLayout,
FullScreenLayout,
PublicLayout,
BlankLayout,
SplitLayout,
NewContentBlockWizard,
EditContentBlockWizard,
EditRoomEntryWizard,
NewProjectEntryWizard,
EditProjectEntryWizard,
NewObjectiveWizard,
NewNoteWizard,
EditNoteWizard,
EditClassNameWizard,
EditTeamNameWizard,
EditSnapshotTitleWizard,
...modals,
},
computed: {
layout() {
return (this.$route.meta.layout || 'default') + '-layout';
},
computed: {
layout() {
return (this.$route.meta.layout || 'default') + '-layout';
},
...mapGetters({
showModalDeprecated: 'showModal', // don't use this any more todo: remove this
showMobileNavigation: 'showMobileNavigation',
}),
showModal() {
return this.$modal.state.component;
},
...mapGetters({
showModalDeprecated: 'showModal', // don't use this any more todo: remove this
showMobileNavigation: 'showMobileNavigation',
}),
showModal() {
return this.$modal.state.component;
},
};
},
};
</script>
<style lang="scss">
@import "~styles/main.scss";
@import "~styles/helpers";
@import '~styles/main.scss';
@import '~styles/helpers';
body {
overflow-y: auto;
overflow-x: hidden;
height: 100vh;
}
body {
overflow-y: auto;
overflow-x: hidden;
height: 100vh;
}
.app {
/*overflow-y: auto;*/
min-height: 100vh;
/*for IE10+*/
display: flex;
flex-direction: column;
}
.no-scroll {
overflow-y: hidden;
}
.app {
/*overflow-y: auto;*/
min-height: 100vh;
/*for IE10+*/
display: flex;
flex-direction: column;
}
.no-scroll {
overflow-y: hidden;
}
</style>

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

@ -1,104 +1,98 @@
<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';
const AddPointer = () => import(/* webpackChunkName: "icons" */'@/components/icons/AddPointer');
const AddPointer = () => 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;
},
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;
}
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});
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 {
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);
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;
}
z-index: 1;
justify-content: flex-end;
&__button {
margin-right: -85px;
cursor: pointer;
display: inline-grid;
}
&__icon {
width: 40px;
fill: $color-silver-dark;
}
.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;
}
}
</style>

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

@ -1,41 +1,38 @@
<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');
const AddIcon = () => 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>

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

@ -11,68 +11,71 @@
</template>
<script>
const AddIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/AddIcon.vue');
const AddIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/AddIcon.vue');
export default {
props: {
route: {
type: String,
default: null
},
reverse: { // use reverse colors
type: Boolean,
default: false
},
click: {
type: Function,
default: null
}
export default {
props: {
route: {
type: String,
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';
},
properties() {
return this.route ? {
to: this.route,
tag: 'div'
} : {};
}
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',
}
: {};
},
},
};
</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;
}
&__add {
width: 80px;
fill: $color-silver-dark;
}
&--reverse {
@include widget-shadow-reverse;
}
&--reverse &__add {
fill: white;
}
@include desktop {
display: flex;
}
&__add {
width: 80px;
fill: $color-silver-dark;
}
&--reverse {
@include widget-shadow-reverse;
}
&--reverse &__add {
fill: white;
}
}
</style>

210
client/src/components/AssignmentWithSubmissions.vue
View File

@ -1,53 +1,31 @@
<template>
<!-- eslint-disable vue/no-v-html -->
<div class="assignment-with-submissions">
<p
class="assignment-with-submissions__text"
data-cy="assignment-main-text"
v-html="assignment.assignment"
/>
<p class="assignment-with-submissions__text" data-cy="assignment-main-text" v-html="assignment.assignment" />
<div>
<a
class="button button--primary submissions-page__back"
@click="$emit('back')"
>Aufgabe im {{ $flavor.textModule }} anzeigen</a>
<a class="button button--primary submissions-page__back" @click="$emit('back')"
>Aufgabe im {{ $flavor.textModule }} anzeigen</a
>
</div>
<div
class="assignment-with-submissions__solution"
v-if="assignment.solution"
>
<h4 class="assignment-with-submissions__heading">
Lösung
</h4>
<div class="assignment-with-submissions__solution" v-if="assignment.solution">
<h4 class="assignment-with-submissions__heading">Lösung</h4>
<p
class="assignment-with-submissions__solution-text"
data-cy="assignment-solution"
v-html="assignment.solution"
/>
</div>
<p
class="assignment-with-submissions__no-submissions"
v-if="!assignment.submissions.length"
>
<p class="assignment-with-submissions__no-submissions" v-if="!assignment.submissions.length">
Zu diesem Auftrag sind noch keine Ergebnisse vorhanden.
</p>
<div
class="assignment-with-submissions__submissions submissions"
v-if="assignment.submissions.length"
>
<div class="assignment-with-submissions__submissions submissions" v-if="assignment.submissions.length">
<div class="submissions__header student-submission-row submission-header">
<p class="submission-header__title">
Lernende
</p>
<p class="submission-header__title">
Ergebnisse
</p>
<p class="submission-header__title">
Feedback
</p>
<p class="submission-header__title">Lernende</p>
<p class="submission-header__title">Ergebnisse</p>
<p class="submission-header__title">Feedback</p>
</div>
<router-link
:to="submissionLink(submission)"
@ -55,116 +33,110 @@
v-for="submission in submissions"
:key="submission.id"
>
<student-submission
:submission="submission"
class="assignment-with-submissions__submission"
/>
<student-submission :submission="submission" class="assignment-with-submissions__submission" />
</router-link>
</div>
</div>
</template>
<script>
import StudentSubmission from '@/components/StudentSubmission';
import StudentSubmission from '@/components/StudentSubmission';
import { meQuery } from '@/graphql/queries';
import { meQuery } from '@/graphql/queries';
export default {
props: ['assignment'],
export default {
props: ['assignment'],
components: {
StudentSubmission
components: {
StudentSubmission,
},
data() {
return {
me: {},
};
},
computed: {
submissions() {
return this.assignment.submissions.filter((submission) => {
return this.belongsToSchool(submission);
});
},
data() {
return {
me: {}
};
currentFilter() {
return this.me.selectedClass;
},
},
computed: {
submissions() {
return this.assignment.submissions.filter(submission => {
return this.belongsToSchool(submission);
});
},
currentFilter() {
return this.me.selectedClass;
},
methods: {
submissionLink(submission) {
return `/submission/${submission.id}`;
},
methods: {
submissionLink(submission) {
return `/submission/${submission.id}`;
},
belongsToSchool(submission) {
if (this.currentFilter.id === '') {
return true;
}
return submission.student.schoolClasses.some(schoolClass => schoolClass .id === this.currentFilter.id);
belongsToSchool(submission) {
if (this.currentFilter.id === '') {
return true;
}
return submission.student.schoolClasses.some((schoolClass) => schoolClass.id === this.currentFilter.id);
},
},
apollo: {
me: meQuery
}
};
apollo: {
me: meQuery,
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
.assignment-with-submissions {
&__title {
font-size: toRem(35px);
}
&__text {
font-size: toRem(26px);
margin-bottom: 1rem;
}
&__solution {
margin-bottom: 1rem;
}
&__heading {
font-size: toRem(17px);
font-weight: 800;
margin-bottom: 1rem;
}
&__link {
display: block;
}
&__submissions {
margin-top: 3rem;
}
&__no-submissions {
margin-top: $large-spacing;
}
:deep(ul) {
@include list-parent;
}
:deep(li) {
@include list-child;
}
@import '~styles/helpers';
.assignment-with-submissions {
&__title {
font-size: toRem(35px);
}
.submissions {
width: 100%;
&__text {
font-size: toRem(26px);
margin-bottom: 1rem;
}
.submission-header {
&__title {
color: $color-silver-dark;
font-family: $sans-serif-font-family;
}
&__solution {
margin-bottom: 1rem;
}
&__heading {
font-size: toRem(17px);
font-weight: 800;
margin-bottom: 1rem;
}
&__link {
display: block;
}
&__submissions {
margin-top: 3rem;
}
&__no-submissions {
margin-top: $large-spacing;
}
:deep(ul) {
@include list-parent;
}
:deep(li) {
@include list-child;
}
}
.submissions {
width: 100%;
}
.submission-header {
&__title {
color: $color-silver-dark;
font-family: $sans-serif-font-family;
}
}
</style>

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

@ -1,72 +1,68 @@
<template>
<router-link
:to="to"
data-cy="back-link"
class="sub-navigation-item back-link"
>
<router-link :to="to" data-cy="back-link" class="sub-navigation-item back-link">
<chevron-left class="back-link__icon sub-navigation-item__icon" />
{{ fullTitle }}
</router-link>
</template>
<script>
import { MODULE_PAGE } from '@/router/module.names';
import { ROOMS_PAGE } from '@/router/room.names';
import { PROJECTS_PAGE } from '@/router/portfolio.names';
import { MODULE_PAGE } from '@/router/module.names';
import { ROOMS_PAGE } from '@/router/room.names';
import { PROJECTS_PAGE } from '@/router/portfolio.names';
const ChevronLeft = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronLeft');
const ChevronLeft = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronLeft');
export default {
props: {
title: {
type: String,
default: '',
},
type: {
type: String,
default: 'topic',
},
slug: {
type: String,
default: '',
},
export default {
props: {
title: {
type: String,
default: '',
},
components: {
ChevronLeft,
type: {
type: String,
default: 'topic',
},
computed: {
to() {
switch (this.type) {
case 'topic':
return {name: 'topic', params: {topicSlug: this.slug}};
case 'module':
return {name: MODULE_PAGE};
case 'portfolio':
return {name: PROJECTS_PAGE};
default:
return {name: ROOMS_PAGE};
}
},
fullTitle() {
switch (this.type) {
case 'topic':
return `${this.$flavor.textTopic}: ${this.title}`;
case 'module':
return `${this.$flavor.textModule}: ${this.title}`;
default:
return this.title;
}
},
slug: {
type: String,
default: '',
},
};
},
components: {
ChevronLeft,
},
computed: {
to() {
switch (this.type) {
case 'topic':
return { name: 'topic', params: { topicSlug: this.slug } };
case 'module':
return { name: MODULE_PAGE };
case 'portfolio':
return { name: PROJECTS_PAGE };
default:
return { name: ROOMS_PAGE };
}
},
fullTitle() {
switch (this.type) {
case 'topic':
return `${this.$flavor.textTopic}: ${this.title}`;
case 'module':
return `${this.$flavor.textModule}: ${this.title}`;
default:
return this.title;
}
},
},
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
.back-link {
@include regular-text;
}
.back-link {
@include regular-text;
}
</style>

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

@ -1,26 +1,12 @@
<template>
<div
:data-scrollto="chapter.id"
class="chapter"
data-cy="chapter"
>
<div
:class="{'hideable-element--greyed-out': titleGreyedOut}"
class="hideable-element"
v-if="!titleHidden"
>
<h3
:id="'chapter-' + index"
>
<div :data-scrollto="chapter.id" class="chapter" data-cy="chapter">
<div :class="{ 'hideable-element--greyed-out': titleGreyedOut }" class="hideable-element" v-if="!titleHidden">
<h3 :id="'chapter-' + index">
{{ chapter.title }}
</h3>
</div>
<visibility-action
:block="chapter"
type="chapter-title"
v-if="editMode"
/>
<visibility-action :block="chapter" type="chapter-title" v-if="editMode" />
<bookmark-actions
:bookmarked="!!chapter.bookmark"
@ -33,27 +19,17 @@
@bookmark="bookmark(!chapter.bookmark)"
/>
<div
:class="{'hideable-element--greyed-out': descriptionGreyedOut}"
:class="{ 'hideable-element--greyed-out': descriptionGreyedOut }"
class="chapter__intro intro hideable-element"
v-if="!descriptionHidden"
>
<visibility-action
:block="chapter"
:chapter="true"
type="chapter-description"
v-if="editMode"
/>
<p
class="chapter__description"
>
<visibility-action :block="chapter" :chapter="true" type="chapter-description" v-if="editMode" />
<p class="chapter__description">
{{ chapter.description }}
</p>
</div>
<add-content-button
:where="{parent: chapter}"
v-if="editMode"
/>
<add-content-button :where="{ parent: chapter }" v-if="editMode" />
<content-block
:content-block="contentBlock"
@ -66,177 +42,179 @@
</template>
<script>
import ContentBlock from '@/components/ContentBlock';
import AddContentButton from '@/components/AddContentButton';
import BookmarkActions from '@/components/notes/BookmarkActions';
import VisibilityAction from '@/components/visibility/VisibilityAction';
import ContentBlock from '@/components/ContentBlock';
import AddContentButton from '@/components/AddContentButton';
import BookmarkActions from '@/components/notes/BookmarkActions';
import VisibilityAction from '@/components/visibility/VisibilityAction';
import {hidden} from '@/helpers/visibility';
import {CHAPTER_DESCRIPTION_TYPE, CHAPTER_TITLE_TYPE, CONTENT_TYPE} from '@/consts/types';
import { hidden } from '@/helpers/visibility';
import { CHAPTER_DESCRIPTION_TYPE, CHAPTER_TITLE_TYPE, CONTENT_TYPE } from '@/consts/types';
import UPDATE_CHAPTER_BOOKMARK_MUTATION from '@/graphql/gql/mutations/updateChapterBookmark.gql';
import CHAPTER_QUERY from '@/graphql/gql/queries/chapterQuery.gql';
import UPDATE_CHAPTER_BOOKMARK_MUTATION from '@/graphql/gql/mutations/updateChapterBookmark.gql';
import CHAPTER_QUERY from '@/graphql/gql/queries/chapterQuery.gql';
import me from '@/mixins/me';
import me from '@/mixins/me';
export default {
props: {
chapter: {
type: Object,
default: () => ({})
},
index: {
type: Number,
default: 0
},
editMode: {
type: Boolean,
default: false
export default {
props: {
chapter: {
type: Object,
default: () => ({}),
},
index: {
type: Number,
default: 0,
},
editMode: {
type: Boolean,
default: false,
},
},
mixins: [me],
components: {
BookmarkActions,
VisibilityAction,
ContentBlock,
AddContentButton,
},
computed: {
filteredContentBlocks() {
if (!(this.chapter && this.chapter.contentBlocks)) {
return [];
}
if (this.editMode) {
return this.chapter.contentBlocks;
}
return this.chapter.contentBlocks.filter(
(contentBlock) =>
!hidden({
block: contentBlock,
schoolClass: this.schoolClass,
type: CONTENT_TYPE,
})
);
},
mixins: [me],
components: {
BookmarkActions,
VisibilityAction,
ContentBlock,
AddContentButton,
note() {
if (this.chapter && this.chapter.bookmark) {
return this.chapter.bookmark.note;
}
return false;
},
computed: {
filteredContentBlocks() {
if (!(this.chapter && this.chapter.contentBlocks)) {
return [];
}
if (this.editMode) {
return this.chapter.contentBlocks;
}
return this.chapter.contentBlocks.filter(contentBlock => !hidden({
block: contentBlock,
schoolClass: this.schoolClass,
type: CONTENT_TYPE,
}));
},
note() {
if (this.chapter && this.chapter.bookmark) {
return this.chapter.bookmark.note;
}
return false;
},
titleGreyedOut() {
return this.textHidden(CHAPTER_TITLE_TYPE) && this.editMode;
},
// never hidden when editing the module
titleHidden() {
if (this.chapter.titleHidden === true) {
return true;
}
return this.textHidden(CHAPTER_TITLE_TYPE) && !this.editMode;
},
descriptionGreyedOut() {
return this.textHidden(CHAPTER_DESCRIPTION_TYPE) && this.editMode;
},
// never hidden when editing the module
descriptionHidden() {
if (this.chapter.descriptionHidden === true) {
return true;
}
return this.textHidden(CHAPTER_DESCRIPTION_TYPE) && !this.editMode;
},
titleGreyedOut() {
return this.textHidden(CHAPTER_TITLE_TYPE) && this.editMode;
},
// never hidden when editing the module
titleHidden() {
if (this.chapter.titleHidden === true) {
return true;
}
return this.textHidden(CHAPTER_TITLE_TYPE) && !this.editMode;
},
descriptionGreyedOut() {
return this.textHidden(CHAPTER_DESCRIPTION_TYPE) && this.editMode;
},
// never hidden when editing the module
descriptionHidden() {
if (this.chapter.descriptionHidden === true) {
return true;
}
return this.textHidden(CHAPTER_DESCRIPTION_TYPE) && !this.editMode;
},
},
methods: {
bookmark(bookmarked) {
const id = this.chapter.id;
this.$apollo.mutate({
mutation: UPDATE_CHAPTER_BOOKMARK_MUTATION,
variables: {
input: {
chapter: id,
bookmarked,
},
methods: {
bookmark(bookmarked) {
const id = this.chapter.id;
this.$apollo.mutate({
mutation: UPDATE_CHAPTER_BOOKMARK_MUTATION,
variables: {
input: {
chapter: id,
bookmarked,
},
update: (store) => {
const query = CHAPTER_QUERY;
const variables = {id};
const {chapter} = store.readQuery({
query,
variables,
});
},
update: (store) => {
const query = CHAPTER_QUERY;
const variables = { id };
const { chapter } = store.readQuery({
query,
variables,
});
let bookmark;
let bookmark;
if (bookmarked) {
bookmark = {
__typename: 'ChapterBookmarkNode',
note: null,
};
} else {
bookmark = null;
}
const data = {
chapter: {
...chapter,
bookmark
}
if (bookmarked) {
bookmark = {
__typename: 'ChapterBookmarkNode',
note: null,
};
} else {
bookmark = null;
}
store.writeQuery({
data,
query,
variables,
});
},
optimisticResponse: {
__typename: 'Mutation',
updateChapterBookmark: {
__typename: 'UpdateChapterBookmarkPayload',
success: true,
const data = {
chapter: {
...chapter,
bookmark,
},
},
});
},
addNote(id) {
this.$store.dispatch('addNote', {
content: id,
parent: this.chapter.id,
});
},
editNote() {
this.$store.dispatch('editNote', this.chapter.bookmark.note);
},
textHidden(type) {
return hidden({
block: this.chapter,
schoolClass: this.schoolClass,
type,
});
},
},
};
};
store.writeQuery({
data,
query,
variables,
});
},
optimisticResponse: {
__typename: 'Mutation',
updateChapterBookmark: {
__typename: 'UpdateChapterBookmarkPayload',
success: true,
},
},
});
},
addNote(id) {
this.$store.dispatch('addNote', {
content: id,
parent: this.chapter.id,
});
},
editNote() {
this.$store.dispatch('editNote', this.chapter.bookmark.note);
},
textHidden(type) {
return hidden({
block: this.chapter,
schoolClass: this.schoolClass,
type,
});
},
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.chapter {
position: relative;
.chapter {
position: relative;
&__bookmark-actions {
margin-top: 3px;
}
&__intro {
position: relative;
}
&__description {
@include lead-paragraph;
margin-bottom: $large-spacing;
}
&__bookmark-actions {
margin-top: 3px;
}
&__intro {
position: relative;
}
&__description {
@include lead-paragraph;
margin-bottom: $large-spacing;
}
}
</style>

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

@ -1,92 +1,86 @@
<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');
const Tick = () => 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-chooser {
display: flex;
&__color-wrapper {
margin-right: 10px;
border-radius: 50px;
padding: 10px;
&__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;
&--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>

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

@ -1,38 +1,20 @@
<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"
@ -40,22 +22,13 @@
/>
</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
@ -66,10 +39,7 @@
>
{{ instrumentLabel }}
</h3>
<h4
class="content-block__title"
v-if="!contentBlock.indent"
>
<h4 class="content-block__title" v-if="!contentBlock.indent">
{{ contentBlock.title }}
</h4>
@ -85,109 +55,107 @@
/>
</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 { instrumentCategory } from '@/helpers/instrumentType';
const ContentComponent = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ContentComponent');
const ContentComponent = () =>
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,
},
export default {
name: 'ContentBlock',
props: {
contentBlock: {
type: Object,
default: () => ({}),
},
mixins: [me],
components: {
PopoverLink,
ContentComponent,
AddContentButton,
VisibilityAction,
MoreOptionsWidget,
UserWidget,
parent: {
type: Object,
default: () => ({}),
},
editMode: {
type: Boolean,
default: true,
},
},
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() {
/*
mixins: [me],
components: {
PopoverLink,
ContentComponent,
AddContentButton,
VisibilityAction,
MoreOptionsWidget,
UserWidget,
},
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,
@ -201,221 +169,238 @@
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;
}
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 = [];
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 = [];
return newContents;
} else {
return [...newContents, content];
}
return [...newContents, content];
}
}, []);
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;
},
}
}, []);
return Object.assign({}, this.contentBlock, {
contents: newContent,
});
},
methods: {
duplicateContentBlock({id}) {
const parent = this.parent;
this.$apollo.mutate({
mutation: DUPLICATE_CONTENT_BLOCK_MUTATION,
variables: {
input: {
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 },
},
}
) {
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: {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,
},
update(
store,
{
data: {
deleteContentBlock: { success },
},
},
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 [{
}
) {
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;
.content-block {
margin-bottom: $section-spacing;
position: relative;
&__container {
position: relative;
}
&__container {
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;
}
}
&__title {
line-height: 1.5;
margin-top: -0.5rem; // to offset the 1.5 line height, it leaves a padding on top
}
&--task {
@include light-border(bottom);
&__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;
}
}
&--task {
.content-block__title {
color: $color-brand;
margin-top: $default-padding;
margin-bottom: $large-spacing;
@include light-border(bottom);
.content-block__title {
color: $color-brand;
margin-top: $default-padding;
margin-bottom: $large-spacing;
@include light-border(bottom);
@include desktop {
margin-top: 0;
}
@include desktop {
margin-top: 0;
}
}
&--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;
}
}
}
&--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>

45
client/src/components/FullscreenImage.vue
View File

@ -1,38 +1,31 @@
<template>
<modal
:hide-header="true"
:fullscreen="true"
class="fullscreen-image"
>
<img
:src="imageUrl"
class="fullscreen-image__image"
>
<modal :hide-header="true" :fullscreen="true" class="fullscreen-image">
<img :src="imageUrl" class="fullscreen-image__image" />
</modal>
</template>
<script>
import Modal from '@/components/Modal';
import Modal from '@/components/Modal';
export default {
components: {
Modal
export default {
components: {
Modal,
},
computed: {
imageUrl() {
return this.$store.state.imageUrl;
},
computed: {
imageUrl() {
return this.$store.state.imageUrl;
}
}
};
},
};
</script>
<style scoped lang="scss">
.fullscreen-image {
&__image {
max-width: 100%;
width: 100%;
vertical-align: bottom;
}
.fullscreen-image {
&__image {
max-width: 100%;
width: 100%;
vertical-align: bottom;
}
}
</style>

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

@ -1,36 +1,35 @@
<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';
const InfogramBlock = () =>
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/InfogramBlock');
const GeniallyBlock = () =>
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;
},
computed: {
id() {
return this.$store.state.infographic.id;
},
type() {
return this.$store.state.infographic.type;
},
value() {
return {
id: this.id
};
}
}
};
type() {
return this.$store.state.infographic.type;
},
value() {
return {
id: this.id,
};
},
},
};
</script>

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

@ -1,9 +1,5 @@
<template>
<modal
:hide-header="true"
:fullscreen="true"
class="fullscreen-video"
>
<modal :hide-header="true" :fullscreen="true" class="fullscreen-video">
<iframe
:src="src"
width="2000"
@ -18,31 +14,31 @@
</template>
<script>
import Modal from '@/components/Modal';
import Modal from '@/components/Modal';
export default {
components: {
Modal
export default {
components: {
Modal,
},
computed: {
vimeoId() {
return this.$store.state.vimeoId;
},
computed: {
vimeoId() {
return this.$store.state.vimeoId;
},
src() {
return `https://player.vimeo.com/video/${this.vimeoId}`;
}
}
};
src() {
return `https://player.vimeo.com/video/${this.vimeoId}`;
},
},
};
</script>
<style scoped lang="scss">
.fullscreen-video {
&__embed {
max-width: 100%;
width: 100%;
height: 95vh;
vertical-align: bottom;
}
.fullscreen-video {
&__embed {
max-width: 100%;
width: 100%;
height: 95vh;
vertical-align: bottom;
}
}
</style>

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

@ -1,139 +1,126 @@
<template>
<header class="header-bar">
<a
class="header-bar__sidebar-link"
data-cy="open-sidebar-link"
@click.stop="openSidebar('navigation')"
>
<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" />
<div class="user-header">
<a
class="user-header__sidebar-link"
>
<current-class
class="user-header__current-class"
@click.native.stop="openSidebar('profile')"
/>
<a class="user-header__sidebar-link">
<current-class class="user-header__current-class" @click.native.stop="openSidebar('profile')" />
</a>
<user-widget
v-bind="me"
data-cy="header-user-widget"
@click.native.stop="openSidebar('profile')"
/>
<user-widget v-bind="me" data-cy="header-user-widget" @click.native.stop="openSidebar('profile')" />
</div>
</header>
</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';
const Hamburger = () => import(/* webpackChunkName: "icons" */'@/components/icons/Hamburger');
const Hamburger = () => 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;
.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;
grid-template-columns: 1fr 1fr 1fr;
@include desktop {
grid-template-columns: 50px 1fr auto;
grid-template-rows: 50px;
grid-auto-rows: auto;
}
@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;
-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;
}
& > :nth-child(1) {
-ms-grid-column: 1;
-ms-grid-row-align: center;
}
&__content-navigation {
grid-column: 2;
justify-content: space-between;
}
&__content-navigation {
grid-column: 2;
justify-content: space-between;
}
&__sidebar-link {
padding: $small-spacing;
cursor: pointer;
}
&__sidebar-link {
padding: $small-spacing;
cursor: pointer;
}
&__sidebar-icon {
width: 30px;
height: 30px;
}
&__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;
& > :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;
}
justify-self: end;
}
.user-header {
display: flex;
& > :nth-child(4) {
-ms-grid-row: 2;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
}
}
&__current-class {
margin-right: $large-spacing;
}
.user-header {
display: flex;
&__sidebar-link {
cursor: pointer;
display: none;
&__current-class {
margin-right: $large-spacing;
}
@include desktop {
display: flex;
}
&__sidebar-link {
cursor: pointer;
display: none;
@include desktop {
display: flex;
}
}
}
</style>

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

@ -10,66 +10,65 @@
</template>
<script>
const InfoIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon');
const InfoIcon = () => 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;
&__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: '';
position: absolute;
left: 30px;
top: 0px;
width: 400px;
}
&__text {
display: inline-table;
width: auto;
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;
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;
width: 10px;
height: 10px;
transform: rotate(-45deg) translateY(-50%);
}
}
&:hover &__tooltip {
visibility: visible;
}
}
</style>

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

@ -1,57 +1,51 @@
<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');
const LoadingIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/LoadingIcon');
export default {
props: {
loading: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
label: {
type: String,
default: ''
}
export default {
props: {
loading: {
type: Boolean,
default: false,
},
components: {
LoadingIcon
}
};
disabled: {
type: Boolean,
default: false,
},
label: {
type: String,
default: '',
},
},
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>

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

@ -1,40 +1,40 @@
<template>
<div class="logout-widget">
<a
class="logout-widget__logout"
data-cy="logout"
@click="logout()"
>Abmelden</a>
<a class="logout-widget__logout" data-cy="logout" @click="logout()">Abmelden</a>
</div>
</template>
<script>
import LOGOUT_MUTATION from '@/graphql/gql/mutations/logoutUser.gql';
import LOGOUT_MUTATION from '@/graphql/gql/mutations/logoutUser.gql';
export default {
methods: {
logout() {
this.$apollo.mutate({
export default {
methods: {
logout() {
this.$apollo
.mutate({
mutation: LOGOUT_MUTATION,
}).then(({data}) => {
if (data.logout.success) { location.replace('/logout'); }
})
.then(({ data }) => {
if (data.logout.success) {
location.replace('/logout');
}
});
}
}
};
},
},
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
@import '@/styles/_variables.scss';
@import '@/styles/_mixins.scss';
.logout-widget {
display: flex;
align-items: center;
.logout-widget {
display: flex;
align-items: center;
&__logout {
@include default-link;
cursor: pointer;
}
&__logout {
@include default-link;
cursor: pointer;
}
}
</style>

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

@ -4,65 +4,59 @@
<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.native.stop="openSidebar('profile')"
/>
<user-widget v-bind="me" @click.native.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';
const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
const Hamburger = () => import(/* webpackChunkName: "icons" */'@/components/icons/Hamburger');
const Logo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo');
const Hamburger = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Hamburger');
export default {
mixins: [me, openSidebar],
export default {
mixins: [me, openSidebar],
components: {
Logo,
Hamburger,
UserWidget,
components: {
Logo,
Hamburger,
UserWidget,
},
methods: {
showMobileNavigation() {
this.$store.dispatch('showMobileNavigation', true);
},
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;
}
padding: 0 $medium-spacing;
&__hamburger {
width: 30px;
height: 30px;
fill: $color-silver-dark;
}
@include desktop {
display: none;
}
padding: 0 $medium-spacing;
&__hamburger {
width: 30px;
height: 30px;
fill: $color-silver-dark;
}
}
</style>

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

@ -1,7 +1,11 @@
<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">
@ -9,20 +13,14 @@
</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>
@ -30,159 +28,158 @@
</template>
<script>
const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
const Cross = () => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon');
export default {
props: {
hideHeader: {
type: Boolean,
default: false
},
fullscreen: {
type: Boolean,
default: false
},
small: {
type: Boolean,
default: false
}
export default {
props: {
hideHeader: {
type: Boolean,
default: false,
},
components: {
Cross
fullscreen: {
type: Boolean,
default: false,
},
small: {
type: Boolean,
default: false,
},
},
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;
.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;
@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;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba($color-white, 0.8);
z-index: 90;
}
&__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;
}
&__header {
grid-area: header;
-ms-grid-row: 1;
padding: 10px $modal-lateral-padding;
border-bottom: 1px solid $color-silver-light;
}
&__header {
grid-area: header;
-ms-grid-row: 1;
padding: 10px $modal-lateral-padding;
border-bottom: 1px solid $color-silver-light;
}
&__body {
grid-area: body;
-ms-grid-row: 2;
padding: 10px $modal-lateral-padding;
overflow: auto;
box-sizing: border-box;
min-height: 30vh;
}
&__body {
grid-area: body;
-ms-grid-row: 2;
padding: 10px $modal-lateral-padding;
overflow: auto;
box-sizing: border-box;
min-height: 30vh;
}
&__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;
}
&__close-button {
&__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 {
display: none;
cursor: pointer;
position: absolute;
right: 15px;
top: 15px;
background: rgba($color-white, 0.5);
border-radius: 40px;
padding: 10px;
align-content: center;
}
&__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 {
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;
}
}
&--small {
height: auto;
#{$parent}__body {
min-height: 0;
}
#{$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;
}
}
&--small {
height: auto;
#{$parent}__body {
min-height: 0;
}
}
}
</style>

43
client/src/components/ModalInput.vue
View File

@ -2,40 +2,35 @@
<div class="modal-input">
<input
:placeholder="placeholder"
:class="{'skillbox-input--error': error}"
:class="{ 'skillbox-input--error': error }"
:value="value"
class="modal-input__inputfield skillbox-input"
@input="$emit('input', $event.target.value)"
>
<div
class="modal-input__error"
v-if="error"
>
Für Inhaltsblöcke muss zwingend ein Titel erfasst werden.
</div>
/>
<div class="modal-input__error" v-if="error">Für Inhaltsblöcke muss zwingend ein Titel erfasst werden.</div>
</div>
</template>
<script>
export default {
props: ['value', 'error', 'placeholder']
};
export default {
props: ['value', 'error', 'placeholder'],
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_functions.scss";
@import '@/styles/_variables.scss';
@import '@/styles/_functions.scss';
.modal-input {
&__inputfield {
width: $modal-input-width;
}
&__error {
font-family: sans-serif;
font-size: toRem(14px);
color: $color-accent-3-dark;
padding: 10px 0;
}
.modal-input {
&__inputfield {
width: $modal-input-width;
}
&__error {
font-family: sans-serif;
font-size: toRem(14px);
color: $color-accent-3-dark;
padding: 10px 0;
}
}
</style>

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

@ -1,67 +1,59 @@
<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';
const Ellipses = () => import(/* webpackChunkName: "icons" */'@/components/icons/Ellipses.vue');
const Ellipses = () => 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;
.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;
display: flex;
justify-content: center;
}
&__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>

42
client/src/components/Radiobutton.vue
View File

@ -1,33 +1,27 @@
<template>
<base-input
:label="label"
:checked="checked"
:item="item"
:type="'radiobutton'"
@input="passOn"
/>
<base-input :label="label" :checked="checked" :item="item" :type="'radiobutton'" @input="passOn" />
</template>
<script>
import BaseInput from '@/components/ui/BaseInput';
import BaseInput from '@/components/ui/BaseInput';
export default {
props: {
label: String,
checked: {
type: Boolean
},
item: Object
export default {
props: {
label: String,
checked: {
type: Boolean,
},
item: Object,
},
components: {
BaseInput
components: {
BaseInput,
},
methods: {
passOn() {
this.$emit('input', ...arguments);
},
methods: {
passOn() {
this.$emit('input', ...arguments);
}
}
};
},
};
</script>

140
client/src/components/ReadOnlyBanner.vue
View File

@ -1,14 +1,7 @@
<template>
<div
class="read-only-banner"
data-cy="read-only-banner"
v-if="me.readOnly || me.selectedClass.readOnly"
>
<div class="read-only-banner" data-cy="read-only-banner" v-if="me.readOnly || me.selectedClass.readOnly">
<div class="read-only-banner__content">
<p class="read-only-banner__text">
{{ readOnlyText }} Sie können Inhalte lesen, aber nicht
bearbeiten.
</p>
<p class="read-only-banner__text">{{ readOnlyText }} Sie können Inhalte lesen, aber nicht bearbeiten.</p>
<div class="read-only-banner__buttons">
<router-link
:to="licenseActivationLink"
@ -18,96 +11,93 @@
>
Neuen Lizenzcode eingeben
</router-link>
<a
target="_blank"
href="https://myskillbox.ch/lesemodus"
class="button button--secondary"
>Mehr Informationen zum Lesemodus</a>
<a target="_blank" href="https://myskillbox.ch/lesemodus" class="button button--secondary"
>Mehr Informationen zum Lesemodus</a
>
</div>
</div>
</div>
</template>
<script>
import gql from 'graphql-tag';
import {LICENSE_ACTIVATION} from '@/router/auth.names';
import gql from 'graphql-tag';
import { LICENSE_ACTIVATION } from '@/router/auth.names';
export default {
data() {
return {
me: {
readOnly: false,
selectedClass: {
readOnly: false,
},
},
licenseActivationLink: {
name: LICENSE_ACTIVATION,
},
};
},
apollo: {
export default {
data() {
return {
me: {
query: gql`
readOnly: false,
selectedClass: {
readOnly: false,
},
},
licenseActivationLink: {
name: LICENSE_ACTIVATION,
},
};
},
apollo: {
me: {
query: gql`
query {
me {
readOnly
selectedClass {
readOnly
readOnly
}
}
}
`,
fetchPolicy: 'cache-only',
update({me}) {
if (!me) {
return {
`,
fetchPolicy: 'cache-only',
update({ me }) {
if (!me) {
return {
readOnly: false,
selectedClass: {
readOnly: false,
selectedClass: {
readOnly: false,
},
};
}
return me;
},
},
};
}
return me;
},
},
},
computed: {
readOnlyText() {
return this.me.readOnly ? 'Sie besitzen keine aktive Lizenz.' : 'Sie sind in dieser Klasse nicht mehr aktiv.';
},
computed: {
readOnlyText() {
return this.me.readOnly ? 'Sie besitzen keine aktive Lizenz.' : 'Sie sind in dieser Klasse nicht mehr aktiv.';
},
};
},
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
.read-only-banner {
background-color: $color-brand-light;
display: flex;
justify-content: center;
padding: $small-spacing 0;
.read-only-banner {
background-color: $color-brand-light;
display: flex;
justify-content: center;
padding: $small-spacing 0;
&__content {
max-width: $screen-width;
}
&__text {
padding: 0;
@include regular-text;
margin-bottom: $small-spacing;
}
&__buttons {
}
&__link {
@include default-link;
margin-right: $small-spacing;
}
&__content {
max-width: $screen-width;
}
&__text {
padding: 0;
@include regular-text;
margin-bottom: $small-spacing;
}
&__buttons {
}
&__link {
@include default-link;
margin-right: $small-spacing;
}
}
</style>

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

@ -1,78 +1,73 @@
<template>
<transition name="fade">
<a
class="scroll-up"
v-if="scroll>200"
@click="scrollTop"
>
<a class="scroll-up" v-if="scroll > 200" @click="scrollTop">
<arrow-up class="scroll-up__icon" />
</a>
</transition>
</template>
<script>
const ArrowUp = () => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowUp');
const ArrowUp = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowUp');
export default {
components: {
ArrowUp
},
export default {
components: {
ArrowUp,
},
data() {
return {
scroll: 0
};
},
data() {
return {
scroll: 0,
};
},
mounted() {
let html = document.scrollingElement;
document.body.onscroll = () => {
this.scroll = html.scrollTop;
};
},
mounted() {
let html = document.scrollingElement;
document.body.onscroll = () => {
this.scroll = html.scrollTop;
};
},
destroyed() {
document.body.onscroll = null;
},
destroyed() {
document.body.onscroll = null;
},
methods: {
scrollTop() {
document.scrollingElement.scrollTop = 0;
}
methods: {
scrollTop() {
document.scrollingElement.scrollTop = 0;
},
};
},
};
</script>
<style scoped lang="scss">
@import '@/styles/_variables.scss';
@import '@/styles/_mixins.scss';
@import '@/styles/_variables.scss';
@import '@/styles/_mixins.scss';
.scroll-up {
position: fixed;
right: $large-spacing;
bottom: $large-spacing;
padding: $medium-spacing;
border-radius: 100px;
@include default-box-shadow;
cursor: pointer;
background-color: $color-white;
border: 1px solid $color-silver;
z-index: 2;
&__icon {
width: 50px;
height: 50px;
fill: $color-brand;
}
.scroll-up {
position: fixed;
right: $large-spacing;
bottom: $large-spacing;
padding: $medium-spacing;
border-radius: 100px;
@include default-box-shadow;
cursor: pointer;
background-color: $color-white;
border: 1px solid $color-silver;
z-index: 2;
&__icon {
width: 50px;
height: 50px;
fill: $color-brand;
}
}
.fade-enter-active, .fade-leave-active {
transition: opacity .3s;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
{
opacity: 0;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>

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

@ -1,18 +1,10 @@
<template>
<div class="section-block">
<div
:class="{'section-block--navigatable': route}"
class="section-block__illustration"
@click="navigate()"
>
<div :class="{ 'section-block--navigatable': route }" class="section-block__illustration" @click="navigate()">
<slot />
</div>
<div
:class="{'section-block--navigatable': route}"
class="section-block__title block-title"
@click="navigate()"
>
<div :class="{ 'section-block--navigatable': route }" class="section-block__title block-title" @click="navigate()">
<h2 class="block-title__title">
{{ title }}
</h2>
@ -23,91 +15,88 @@
<div class="section-block__content section-content">
<div class="section-content__subsection subsection">
<a
:class="{'section-block--navigatable': route}"
:class="{ 'section-block--navigatable': route }"
class="subsection__content button button--primary"
v-if="route"
@click="navigate()"
>
{{ linkText }}
</a>
<span
class="subsection__content subsection__content--disabled"
v-if="!route"
>Noch nicht verfügbar</span>
<span class="subsection__content subsection__content--disabled" v-if="!route">Noch nicht verfügbar</span>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['title', 'subtitle', 'route', 'linkText'],
methods: {
navigate() {
if (this.route) {
this.$router.push(this.route);
}
export default {
props: ['title', 'subtitle', 'route', 'linkText'],
methods: {
navigate() {
if (this.route) {
this.$router.push(this.route);
}
}
};
},
},
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_functions.scss";
@import '@/styles/_variables.scss';
@import '@/styles/_functions.scss';
.section-block {
border-radius: $default-border-radius;
width: 100%;
overflow: hidden;
text-align: center;
.section-block {
border-radius: $default-border-radius;
width: 100%;
overflow: hidden;
text-align: center;
&--navigatable {
cursor: pointer;
}
&__title {
padding: 20px;
}
&--navigatable {
cursor: pointer;
}
.block-title {
&__title, &__subtitle {
color: $color-charcoal-dark;
font-family: $sans-serif-font-family;
}
&__title {
padding: 20px;
}
}
&__title {
font-size: toRem(29px);
text-transform: uppercase;
margin-bottom: 8px;
font-weight: 600;
}
&__subtitle {
font-size: toRem(14px);
font-weight: $font-weight-regular;
min-height: 2rem;
}
.block-title {
&__title,
&__subtitle {
color: $color-charcoal-dark;
font-family: $sans-serif-font-family;
}
.section-content {
padding: 15px 15px 15px;
&__subsection {
padding-bottom: 15px;
}
&__title {
font-size: toRem(29px);
text-transform: uppercase;
margin-bottom: 8px;
font-weight: 600;
}
.subsection {
&__content {
font-family: $sans-serif-font-family;
font-weight: 600;
&__subtitle {
font-size: toRem(14px);
font-weight: $font-weight-regular;
min-height: 2rem;
}
}
&--disabled {
color: $color-silver-dark;
}
.section-content {
padding: 15px 15px 15px;
&__subsection {
padding-bottom: 15px;
}
}
.subsection {
&__content {
font-family: $sans-serif-font-family;
font-weight: 600;
&--disabled {
color: $color-silver-dark;
}
}
}
</style>

117
client/src/components/StudentSubmission.vue
View File

@ -5,24 +5,12 @@
</div>
<div class="student-submission__entry entry">
<p>{{ submission.text | trimToLength(50) }}</p>
<p
class="entry__document"
v-if="submission.document && submission.document.length > 0"
>
<student-submission-document
:document="submission.document"
class="entry-document"
/>
<p class="entry__document" v-if="submission.document && submission.document.length > 0">
<student-submission-document :document="submission.document" class="entry-document" />
</p>
</div>
<div
class="student-submission__feedback entry"
v-if="submission.submissionFeedback"
>
<p
:class="{'entry__text--final': submission.submissionFeedback.final}"
class="entry__text"
>
<div class="student-submission__feedback entry" v-if="submission.submissionFeedback">
<p :class="{ 'entry__text--final': submission.submissionFeedback.final }" class="entry__text">
{{ submission.submissionFeedback.text | trimToLength(50) }}
</p>
</div>
@ -30,66 +18,67 @@
</template>
<script>
import StudentSubmissionDocument from '@/components/StudentSubmissionDocument';
import StudentSubmissionDocument from '@/components/StudentSubmissionDocument';
export default {
props: ['submission'],
components: {
StudentSubmissionDocument
},
filters: {
trimToLength: function(text, numberOfChars) {
if (!text) {
return '';
}
if (text.length <= numberOfChars) {
return text;
}
const index = text.indexOf(' ', numberOfChars - 1);
if (index === -1) {
return text;
}
return `${text.substring(0, index)}…`;
export default {
props: ['submission'],
components: {
StudentSubmissionDocument,
},
filters: {
trimToLength: function (text, numberOfChars) {
if (!text) {
return '';
}
if (text.length <= numberOfChars) {
return text;
}
const index = text.indexOf(' ', numberOfChars - 1);
if (index === -1) {
return text;
}
return `${text.substring(0, index)}…`;
},
},
computed: {
name() {
return this.submission && this.submission.student
? `${this.submission.student.firstName} ${this.submission.student.lastName}` : '';
},
computed: {
name() {
return this.submission && this.submission.student
? `${this.submission.student.firstName} ${this.submission.student.lastName}`
: '';
},
};
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.student-submission {
@include table-row;
.student-submission {
@include table-row;
&__student-name {
font-size: toRem(17px);
font-weight: 800;
font-family: $sans-serif-font-family;
}
&__entry {
font-size: toRem(14px);
font-family: $sans-serif-font-family;
}
.entry-document {
margin-top: 1rem;
}
&__student-name {
font-size: toRem(17px);
font-weight: 800;
font-family: $sans-serif-font-family;
}
.entry {
&__text {
color: $color-silver-dark;
&--final {
color: $color-charcoal-dark;
}
&__entry {
font-size: toRem(14px);
font-family: $sans-serif-font-family;
}
.entry-document {
margin-top: 1rem;
}
}
.entry {
&__text {
color: $color-silver-dark;
&--final {
color: $color-charcoal-dark;
}
}
}
</style>

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

@ -1,44 +1,40 @@
<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 filenameFromUrl from '@/helpers/urls';
const DocumentIcon = () => 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;
}
&__text {
align-self: center;
padding-left: 5px;
}
&__icon {
width: 25px;
align-self: center;
}
&__text {
align-self: center;
padding-left: 5px;
}
}
</style>

63
client/src/components/UserMetaWidget.vue
View File

@ -4,53 +4,50 @@
<avatar :avatar-url="avatarUrl" />
</div>
<span class="user-widget__name">{{ firstName }} {{ lastName }}</span>
<span
class="user-widget__date"
v-if="date"
>{{ date }}</span>
<span class="user-widget__date" v-if="date">{{ date }}</span>
</div>
</template>
<script>
import Avatar from '@/components/profile/Avatar';
import Avatar from '@/components/profile/Avatar';
export default {
props: ['firstName', 'lastName', 'avatarUrl', 'date'],
export default {
props: ['firstName', 'lastName', 'avatarUrl', 'date'],
components: {
Avatar
}
};
components: {
Avatar,
},
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import '@/styles/_variables.scss';
.user-widget {
.user-widget {
color: $color-silver-dark;
display: flex;
align-items: center;
&__name {
padding: 0px 10px;
color: $color-silver-dark;
display: flex;
align-items: center;
font-family: $sans-serif-font-family;
}
&__name {
padding: 0px 10px;
color: $color-silver-dark;
font-family: $sans-serif-font-family;
}
&__date {
font-family: $sans-serif-font-family;
}
&__date {
font-family: $sans-serif-font-family;
}
&__avatar {
width: 30px;
height: 30px;
fill: $color-silver-dark;
}
&__avatar {
width: 30px;
height: 30px;
fill: $color-silver-dark;
}
&--is-profile {
& > span {
color: $color-brand;
}
&--is-profile {
& > span {
color: $color-brand;
}
}
}
</style>

107
client/src/components/UserWidget.vue
View File

@ -1,79 +1,70 @@
<template>
<div
:class="{'user-widget--is-profile': isProfile}"
class="user-widget"
>
<div
class="user-widget__avatar"
data-cy="user-widget-avatar"
>
<avatar
:avatar-url="avatarUrl"
:icon-highlighted="isProfile"
/>
<div :class="{ 'user-widget--is-profile': isProfile }" class="user-widget">
<div class="user-widget__avatar" data-cy="user-widget-avatar">
<avatar :avatar-url="avatarUrl" :icon-highlighted="isProfile" />
</div>
</div>
</template>
<script>
import Avatar from '@/components/profile/Avatar';
import Avatar from '@/components/profile/Avatar';
export default {
props: {
avatarUrl: {
type: String
}
export default {
props: {
avatarUrl: {
type: String,
},
},
components: {
Avatar
components: {
Avatar,
},
computed: {
isProfile() {
return this.$route.meta.isProfile;
},
computed: {
isProfile() {
return this.$route.meta.isProfile;
}
}
};
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.user-widget {
.user-widget {
color: $color-silver-dark;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
// todo: do we need the margin right always? just do it where needed --> content block actions and objecives override this
margin-right: $medium-spacing;
&__popover {
top: 40px;
white-space: nowrap;
}
&__name {
padding: 0px $small-spacing;
color: $color-silver-dark;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
// todo: do we need the margin right always? just do it where needed --> content block actions and objecives override this
margin-right: $medium-spacing;
font-family: $sans-serif-font-family;
}
&__popover {
top: 40px;
white-space: nowrap;
}
&__date {
font-family: $sans-serif-font-family;
}
&__name {
padding: 0px $small-spacing;
color: $color-silver-dark;
font-family: $sans-serif-font-family;
}
&__avatar {
width: 30px;
height: 30px;
fill: $color-silver-dark;
cursor: pointer;
}
&__date {
font-family: $sans-serif-font-family;
}
&__avatar {
width: 30px;
height: 30px;
fill: $color-silver-dark;
cursor: pointer;
}
&--is-profile {
& > span {
color: $color-brand;
}
&--is-profile {
& > span {
color: $color-brand;
}
}
}
</style>

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

@ -1,12 +1,9 @@
<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"
@ -15,9 +12,7 @@
{{ $flavor.textTopics }}
</router-link>
<topic-navigation
v-if="isSidebar"
/>
<topic-navigation v-if="isSidebar" />
</div>
<div class="content-navigation__item">
@ -33,7 +28,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"
@ -45,19 +40,14 @@
</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"
@ -67,10 +57,7 @@
</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"
@ -80,16 +67,13 @@
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>
@ -97,141 +81,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';
const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
const Logo = () => 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;
},
methods: {
isActive(linkName) {
return linkName === 'book' && this.$route.path.indexOf('module') > -1;
},
isRoomUrl() {
return this.$route.path.indexOf('room') > -1;
},
close() {
this.closeSidebar('navigation');
}
}
};
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;
.content-navigation {
display: flex;
align-items: center;
&__link {
padding: 0 24px;
@include navigation-link;
}
&__link {
padding: 0 24px;
@include navigation-link;
}
&__primary, &__secondary {
display: none;
flex-direction: row;
&__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;
@include desktop {
display: flex;
justify-self: 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;
}
&--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;*/
/*}*/
}
}
}
&__logo {
color: #17a887;
font-size: 36px;
font-weight: 800;
font-family: $sans-serif-font-family;
display: flex;
justify-self: 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;
}
&--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>

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

@ -1,18 +1,8 @@
<template>
<transition name="slide">
<div
class="navigation-sidebar"
v-if="sidebar.navigation"
v-click-outside="close"
>
<content-navigation
:is-sidebar="true"
class="navigation-sidebar__main"
/>
<div
class="navigation-sidebar__close-button"
@click="close"
>
<div class="navigation-sidebar" v-if="sidebar.navigation" v-click-outside="close">
<content-navigation :is-sidebar="true" class="navigation-sidebar__main" />
<div class="navigation-sidebar__close-button" @click="close">
<cross class="navigation-sidebar__close-icon" />
</div>
</div>
@ -20,93 +10,94 @@
</template>
<script>
import ContentNavigation from '@/components/book-navigation/ContentNavigation';
import ContentNavigation from '@/components/book-navigation/ContentNavigation';
import sidebarMixin from '@/mixins/sidebar';
import sidebarMixin from '@/mixins/sidebar';
const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
const Cross = () => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon');
export default {
mixins: [sidebarMixin],
export default {
mixins: [sidebarMixin],
components: {
ContentNavigation,
Cross
components: {
ContentNavigation,
Cross,
},
methods: {
close() {
this.closeSidebar('navigation');
},
methods: {
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';
$desktop-width: 285px;
$desktop-width: 285px;
.navigation-sidebar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: white;
z-index: 20;
.navigation-sidebar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: white;
z-index: 20;
@include desktop {
box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.12);
}
display: grid;
grid-template-columns: 1fr 50px;
grid-template-rows: 50px max-content auto 100px;
grid-template-areas: "m m" "m m" "s s" "s s";
&--with-subnavigation {
grid-template-areas: "m m" "m m" "sub sub" "s s";
}
height: 100vh;
overflow-y: auto;
@include desktop {
width: $desktop-width;
}
&__main {
padding: $medium-spacing;
grid-area: m;
}
&__main-link {
}
&__close-button {
grid-row: 1;
grid-column: 2;
align-self: center;
justify-self: center;
cursor: pointer;
}
@include desktop {
box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.12);
}
.slide {
&-enter-active, &-leave-active {
transition: left 0.2s;
}
display: grid;
&-enter, &-leave-to {
left: -100vw;
@include desktop {
left: -$desktop-width;
}
grid-template-columns: 1fr 50px;
grid-template-rows: 50px max-content auto 100px;
grid-template-areas: 'm m' 'm m' 's s' 's s';
&--with-subnavigation {
grid-template-areas: 'm m' 'm m' 'sub sub' 's s';
}
height: 100vh;
overflow-y: auto;
@include desktop {
width: $desktop-width;
}
&__main {
padding: $medium-spacing;
grid-area: m;
}
&__main-link {
}
&__close-button {
grid-row: 1;
grid-column: 2;
align-self: center;
justify-self: center;
cursor: pointer;
}
}
.slide {
&-enter-active,
&-leave-active {
transition: left 0.2s;
}
&-enter,
&-leave-to {
left: -100vw;
@include desktop {
left: -$desktop-width;
}
}
}
</style>

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

@ -1,54 +1,44 @@
<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');
const ChevronDown = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronDown');
const ChevronUp = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronUp');
export default {
props: ['title'],
export default {
props: ['title'],
components: {
ChevronDown,
ChevronUp
components: {
ChevronDown,
ChevronUp,
},
data() {
return {
show: false,
};
},
watch: {
$route() {
this.show = false;
},
},
data() {
return {
show: false
};
methods: {
close() {
this.show = false;
},
watch: {
$route() {
this.show = false;
}
},
methods: {
close() {
this.show = false;
}
}
};
},
};
</script>

70
client/src/components/book-navigation/TopicNavigation.vue
View File

@ -1,8 +1,8 @@
<template>
<nav class="topic-navigation">
<router-link
:to="{name: 'topic', params: {topicSlug: topic.slug}}"
:class="{'topic-navigation__topic--active': topic.active, 'book-subnavigation__item--mobile': mobile}"
:to="{ name: 'topic', params: { topicSlug: topic.slug } }"
:class="{ 'topic-navigation__topic--active': topic.active, 'book-subnavigation__item--mobile': mobile }"
tag="div"
active-class="book-subnavigation__item--active"
class="topic-navigation__topic book-subnavigation__item"
@ -17,49 +17,49 @@
</template>
<script>
import ALL_TOPICS_QUERY from '@/graphql/gql/queries/allTopicsQuery.gql';
import sidebarMixin from '@/mixins/sidebar';
import ALL_TOPICS_QUERY from '@/graphql/gql/queries/allTopicsQuery.gql';
import sidebarMixin from '@/mixins/sidebar';
export default {
props: {
mobile: {
default: false
}
export default {
props: {
mobile: {
default: false,
},
},
mixins: [sidebarMixin],
mixins: [sidebarMixin],
data() {
return {
topics: []
};
data() {
return {
topics: [],
};
},
methods: {
topicId(id) {
return atob(id);
},
},
methods: {
topicId(id) {
return atob(id);
}
},
apollo: {
topics: {
query: ALL_TOPICS_QUERY,
manual: true,
result({data, loading}) {
if (!loading) {
this.topics = this.$getRidOfEdges(data).topics;
}
apollo: {
topics: {
query: ALL_TOPICS_QUERY,
manual: true,
result({ data, loading }) {
if (!loading) {
this.topics = this.$getRidOfEdges(data).topics;
}
}
}
};
},
},
},
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import '@/styles/_variables.scss';
.topic-navigation {
&__topic {
}
.topic-navigation {
&__topic {
}
}
</style>

56
client/src/components/content-block-form/AddContentLink.vue
View File

@ -1,39 +1,37 @@
<template>
<a
class="add-content-link"
data-cy="add-content-link"
@click="$emit('click')"
><plus-icon class="add-content-link__icon" /> <span class="add-content-link__text">Inhalt hinzufügen</span></a>
<a class="add-content-link" data-cy="add-content-link" @click="$emit('click')"
><plus-icon class="add-content-link__icon" /> <span class="add-content-link__text">Inhalt hinzufügen</span></a
>
</template>
<script>
import PlusIcon from '@/components/icons/PlusIcon';
export default {
components: { PlusIcon }
};
import PlusIcon from '@/components/icons/PlusIcon';
export default {
components: { PlusIcon },
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
$color: $color-silver-dark;
$icon-size: 14px;
@import '~styles/helpers';
$color: $color-silver-dark;
$icon-size: 14px;
.add-content-link {
display: inline-flex;
align-items: center;
justify-content: flex-start;
cursor: pointer;
.add-content-link {
display: inline-flex;
align-items: center;
justify-content: flex-start;
cursor: pointer;
&__icon {
width: $icon-size;
height: $icon-size;
margin-right: $small-spacing;
fill: $color;
}
&__text {
// custom style, because the view needs this
@include large-link;
color: $color;
}
}
&__icon {
width: $icon-size;
height: $icon-size;
margin-right: $small-spacing;
fill: $color;
}
&__text {
// custom style, because the view needs this
@include large-link;
color: $color;
}
}
</style>

567
client/src/components/content-block-form/ContentBlockForm.vue
View File

@ -1,10 +1,7 @@
<template>
<div class="content-block-form content-list__parent">
<div class="content-block-form__content">
<h1
class="heading-1 content-block-form__heading"
data-cy="content-block-form-heading"
>
<h1 class="heading-1 content-block-form__heading" data-cy="content-block-form-heading">
{{ title }}
</h1>
@ -15,26 +12,21 @@
class="content-block-form__task-toggle"
label="Inhaltsblock als Auftrag formatieren"
v-if="hasDefaultFeatures"
@input="localContentBlock.isAssignment=$event"
@input="localContentBlock.isAssignment = $event"
/>
<!-- Form for title of content block -->
<content-form-section
data-cy="content-form-title-section"
title="Titel (Pflichtfeld)"
>
<content-form-section data-cy="content-form-title-section" title="Titel (Pflichtfeld)">
<input-with-label
:value="localContentBlock.title"
data-cy="content-block-title"
placeholder="z.B. Auftrag 3"
@input="localContentBlock.title=$event"
@input="localContentBlock.title = $event"
/>
</content-form-section>
<!-- Add content at top of content block -->
<add-content-link
@click="addBlock(-1)"
/>
<add-content-link @click="addBlock(-1)" />
<!-- Loop for outer contents layer -->
<div
@ -43,32 +35,21 @@
:key="block.id"
>
<!-- If the block is a content list -->
<div
class="content-block-form__segment"
data-cy="content-list"
v-if="block.type === 'content_list_item'"
>
<div class="content-block-form__segment" data-cy="content-list" v-if="block.type === 'content_list_item'">
<content-element-actions
class="content-block-form__actions"
:actions="{extended: true, up: outer>0, down: outer<localContentBlock.contents.length }"
:actions="{ extended: true, up: outer > 0, down: outer < localContentBlock.contents.length }"
@remove="remove(outer)"
@move-up="up(outer)"
@move-down="down(outer)"
@move-top="top(outer)"
@move-bottom="bottom(outer)"
/>
<ol
class="content-list__item"
data-cy="content-list-item"
>
<li
class="content-block-form__segment"
v-for="(content, index) in block.contents"
:key="content.id"
>
<ol class="content-list__item" data-cy="content-list-item">
<li class="content-block-form__segment" v-for="(content, index) in block.contents" :key="content.id">
<content-element
:first-element="index===0"
:last-element="index===block.contents.length-1"
:first-element="index === 0"
:last-element="index === block.contents.length - 1"
:element="content"
class="content-block-form__segment"
:top-level="false"
@ -80,10 +61,7 @@
@bottom="bottom(outer, index)"
/>
<add-content-link
class="content-block-form__add-button"
@click="addBlock(outer, index)"
/>
<add-content-link class="content-block-form__add-button" @click="addBlock(outer, index)" />
</li>
</ol>
</div>
@ -93,8 +71,8 @@
:element="block"
class="content-block-form__segment"
:top-level="true"
:first-element="outer===0"
:last-element="outer===localContentBlock.contents.length-1"
:first-element="outer === 0"
:last-element="outer === localContentBlock.contents.length - 1"
v-else
@update="update(outer, $event)"
@remove="remove(outer, undefined, $event)"
@ -105,11 +83,10 @@
/>
<!-- Add element after the looped item -->
<add-content-link
@click="addBlock(outer)"
/>
<add-content-link @click="addBlock(outer)" />
</div>
</div><!-- -->
</div>
<!-- -->
<!-- Save and Cancel buttons -->
<footer class="content-block-form__footer">
<div class="content-block-form__buttons">
@ -121,309 +98,307 @@
>
Speichern
</button>
<a
class="button"
@click="$emit('back')"
>Abbrechen</a>
<a class="button" @click="$emit('back')">Abbrechen</a>
</div>
</footer>
</div>
</template>
<script lang="ts">
import Vue, {PropType} from 'vue';
import Toggle from '@/components/ui/Toggle.vue';
import ContentFormSection from '@/components/content-block-form/ContentFormSection.vue';
import InputWithLabel from '@/components/ui/InputWithLabel.vue';
import AddContentLink from '@/components/content-block-form/AddContentLink.vue';
import Vue, { PropType } from 'vue';
import Toggle from '@/components/ui/Toggle.vue';
import ContentFormSection from '@/components/content-block-form/ContentFormSection.vue';
import InputWithLabel from '@/components/ui/InputWithLabel.vue';
import AddContentLink from '@/components/content-block-form/AddContentLink.vue';
import ContentElement from '@/components/content-block-form/ContentElement.vue';
import {
insertAtIndex,
moveToIndex,
removeAtIndex,
replaceAtIndex,
swapElements
} from '@/graphql/immutable-operations';
import ContentElement from '@/components/content-block-form/ContentElement.vue';
import {
insertAtIndex,
moveToIndex,
removeAtIndex,
replaceAtIndex,
swapElements,
} from '@/graphql/immutable-operations';
import {CHOOSER, transformInnerContents} from '@/components/content-block-form/helpers.js';
import ContentElementActions from '@/components/content-block-form/ContentElementActions.vue';
import {ContentBlock, numberOrUndefined} from "@/@types";
import {DEFAULT_FEATURE_SET} from "@/consts/features.consts";
import { CHOOSER, transformInnerContents } from '@/components/content-block-form/helpers.js';
import ContentElementActions from '@/components/content-block-form/ContentElementActions.vue';
import { ContentBlock, numberOrUndefined } from '@/@types';
import { DEFAULT_FEATURE_SET } from '@/consts/features.consts';
// TODO: refactor this file, it's huuuuuge!
interface ContentBlockFormData {
localContentBlock: any;
}
// TODO: refactor this file, it's huuuuuge!
interface ContentBlockFormData {
localContentBlock: any;
}
export default Vue.extend({
props: {
title: {
type: String,
default: '',
},
contentBlock: {
type: Object as PropType<ContentBlock>,
required: true,
},
features: {
type: String,
default: DEFAULT_FEATURE_SET
}
export default Vue.extend({
props: {
title: {
type: String,
default: '',
},
provide(): object {
return {
features: this.features
};
contentBlock: {
type: Object as PropType<ContentBlock>,
required: true,
},
components: {
ContentElementActions,
ContentElement,
AddContentLink,
InputWithLabel,
ContentFormSection,
Toggle,
features: {
type: String,
default: DEFAULT_FEATURE_SET,
},
data(): ContentBlockFormData {
return {
localContentBlock: Object.assign({}, {
},
provide(): object {
return {
features: this.features,
};
},
components: {
ContentElementActions,
ContentElement,
AddContentLink,
InputWithLabel,
ContentFormSection,
Toggle,
},
data(): ContentBlockFormData {
return {
localContentBlock: Object.assign(
{},
{
title: this.contentBlock.title,
// contents: [...this.contentBlock.contents],
contents: transformInnerContents([...this.contentBlock.contents]),
id: this.contentBlock.id || undefined,
isAssignment: this.contentBlock.type && this.contentBlock.type.toLowerCase() === 'task',
}),
};
}
),
};
},
computed: {
isValid(): boolean {
return this.localContentBlock.title > '';
},
computed: {
isValid(): boolean {
return this.localContentBlock.title > '';
},
hasDefaultFeatures(): boolean {
return this.features === DEFAULT_FEATURE_SET;
hasDefaultFeatures(): boolean {
return this.features === DEFAULT_FEATURE_SET;
},
},
methods: {
update(index: number, element: any, parent?: number) {
if (parent === undefined) {
// element is top level
this.localContentBlock.contents = replaceAtIndex(this.localContentBlock.contents, index, element);
} else {
const parentBlock = this.localContentBlock.contents[parent];
const newElementContents = replaceAtIndex(parentBlock.contents, index, element);
const newBlock = {
...parentBlock,
contents: newElementContents,
};
this.localContentBlock.contents = replaceAtIndex(this.localContentBlock.contents, parent, newBlock);
}
},
methods: {
update(index: number, element: any, parent?: number) {
if (parent === undefined) {
// element is top level
this.localContentBlock.contents = replaceAtIndex(this.localContentBlock.contents, index, element);
} else {
const parentBlock = this.localContentBlock.contents[parent];
const newElementContents = replaceAtIndex(parentBlock.contents, index, element);
const newBlock = {
...parentBlock,
contents: newElementContents,
};
this.localContentBlock.contents = replaceAtIndex(this.localContentBlock.contents, parent, newBlock);
}
},
addBlock(afterOuterIndex: number, innerIndex?: number) {
if (innerIndex !== undefined) {
const block = this.localContentBlock.contents[afterOuterIndex];
const element = {
...block,
contents: insertAtIndex(block.contents, innerIndex + 1, {
id: -1,
type: CHOOSER,
}),
};
this.localContentBlock.contents = replaceAtIndex(this.localContentBlock.contents, afterOuterIndex, element);
} else {
const element = {
addBlock(afterOuterIndex: number, innerIndex?: number) {
if (innerIndex !== undefined) {
const block = this.localContentBlock.contents[afterOuterIndex];
const element = {
...block,
contents: insertAtIndex(block.contents, innerIndex + 1, {
id: -1,
type: CHOOSER,
includeListOption: true,
};
}),
};
this.localContentBlock.contents = insertAtIndex(this.localContentBlock.contents, afterOuterIndex + 1, element);
}
},
remove(outer: number, inner?: number, askForConfirmation = true) {
if (askForConfirmation) {
this.$modal.open('confirm')
.then(() => {
this.executeRemoval(outer, inner);
})
.catch(() => {
this.localContentBlock.contents = replaceAtIndex(this.localContentBlock.contents, afterOuterIndex, element);
} else {
const element = {
id: -1,
type: CHOOSER,
includeListOption: true,
};
});
} else {
this.executeRemoval(outer, inner);
}
},
shift(outer: number, inner: numberOrUndefined = undefined, distance: number) {
if (inner === undefined) {
this.localContentBlock.contents = swapElements(this.localContentBlock.contents, outer, outer + distance);
} else {
const {contents} = this.localContentBlock;
const outerElement = contents[outer];
const newOuterElement = {
...outerElement,
contents: swapElements(outerElement.contents, inner, inner + distance),
};
this.localContentBlock.contents = replaceAtIndex(contents, outer, newOuterElement);
}
},
top(outer: number, inner: numberOrUndefined = undefined) {
if (inner === undefined) {
this.localContentBlock.contents = moveToIndex(this.localContentBlock.contents, outer, 0);
} else {
const {contents} = this.localContentBlock;
const outerElement = contents[outer];
const newOuterElement = {
...outerElement,
contents: moveToIndex(outerElement.contents, inner, 0),
};
this.localContentBlock.contents = replaceAtIndex(contents, outer, newOuterElement);
}
},
up(outer: number, inner: numberOrUndefined = undefined) {
this.shift(outer, inner, -1);
},
down(outer: number, inner: numberOrUndefined = undefined) {
this.shift(outer, inner, 1);
},
bottom(outer: number, inner: numberOrUndefined = undefined) {
if (inner === undefined) {
const maxIndex = this.localContentBlock.contents.length - 1;
this.localContentBlock.contents = moveToIndex(this.localContentBlock.contents, outer, maxIndex);
} else {
const {contents} = this.localContentBlock;
const outerElement = contents[outer];
const maxIndex = outerElement.contents.length - 1;
const newOuterElement = {
...outerElement,
contents: moveToIndex(outerElement.contents, inner, maxIndex),
};
this.localContentBlock.contents = replaceAtIndex(contents, outer, newOuterElement);
}
},
executeRemoval(outer: number, inner: numberOrUndefined = undefined) {
if (inner === undefined) {
// not a list item container, just remove the element from the outer array
this.localContentBlock.contents = removeAtIndex(this.localContentBlock.contents, outer);
} else {
let prevInnerContents = this.localContentBlock.contents[outer].contents;
let innerContents = removeAtIndex(prevInnerContents, inner);
this.localContentBlock.contents = insertAtIndex(this.localContentBlock.contents, afterOuterIndex + 1, element);
}
},
remove(outer: number, inner?: number, askForConfirmation = true) {
if (askForConfirmation) {
this.$modal
.open('confirm')
.then(() => {
this.executeRemoval(outer, inner);
})
.catch(() => {});
} else {
this.executeRemoval(outer, inner);
}
},
shift(outer: number, inner: numberOrUndefined = undefined, distance: number) {
if (inner === undefined) {
this.localContentBlock.contents = swapElements(this.localContentBlock.contents, outer, outer + distance);
} else {
const { contents } = this.localContentBlock;
const outerElement = contents[outer];
const newOuterElement = {
...outerElement,
contents: swapElements(outerElement.contents, inner, inner + distance),
};
this.localContentBlock.contents = replaceAtIndex(contents, outer, newOuterElement);
}
},
top(outer: number, inner: numberOrUndefined = undefined) {
if (inner === undefined) {
this.localContentBlock.contents = moveToIndex(this.localContentBlock.contents, outer, 0);
} else {
const { contents } = this.localContentBlock;
const outerElement = contents[outer];
const newOuterElement = {
...outerElement,
contents: moveToIndex(outerElement.contents, inner, 0),
};
this.localContentBlock.contents = replaceAtIndex(contents, outer, newOuterElement);
}
},
up(outer: number, inner: numberOrUndefined = undefined) {
this.shift(outer, inner, -1);
},
down(outer: number, inner: numberOrUndefined = undefined) {
this.shift(outer, inner, 1);
},
bottom(outer: number, inner: numberOrUndefined = undefined) {
if (inner === undefined) {
const maxIndex = this.localContentBlock.contents.length - 1;
this.localContentBlock.contents = moveToIndex(this.localContentBlock.contents, outer, maxIndex);
} else {
const { contents } = this.localContentBlock;
const outerElement = contents[outer];
const maxIndex = outerElement.contents.length - 1;
const newOuterElement = {
...outerElement,
contents: moveToIndex(outerElement.contents, inner, maxIndex),
};
this.localContentBlock.contents = replaceAtIndex(contents, outer, newOuterElement);
}
},
executeRemoval(outer: number, inner: numberOrUndefined = undefined) {
if (inner === undefined) {
// not a list item container, just remove the element from the outer array
this.localContentBlock.contents = removeAtIndex(this.localContentBlock.contents, outer);
} else {
let prevInnerContents = this.localContentBlock.contents[outer].contents;
let innerContents = removeAtIndex(prevInnerContents, inner);
if (innerContents.length) {
/*
if (innerContents.length) {
/*
there is still an element inside the outer element after removal,
so we replace the previous element in the outer array with the new one with fewer contents
*/
let element = {
...this.localContentBlock.contents[outer],
contents: innerContents,
};
this.localContentBlock.contents = replaceAtIndex(this.localContentBlock.contents, outer, element);
} else {
// inner contents is now empty, remove the whole element from the outer array
this.localContentBlock.contents = removeAtIndex(this.localContentBlock.contents, outer);
}
let element = {
...this.localContentBlock.contents[outer],
contents: innerContents,
};
this.localContentBlock.contents = replaceAtIndex(this.localContentBlock.contents, outer, element);
} else {
// inner contents is now empty, remove the whole element from the outer array
this.localContentBlock.contents = removeAtIndex(this.localContentBlock.contents, outer);
}
},
save(contentBlock: ContentBlock) {
this.$emit('save', contentBlock);
},
}
},
});
save(contentBlock: ContentBlock) {
this.$emit('save', contentBlock);
},
},
});
</script>
<style lang="scss">
@import '~styles/helpers';
// override parent page properties
.layout--no-scroll {
padding-bottom: 20px;
height: 100vh;
overflow-y: hidden;
box-sizing: border-box;
@import '~styles/helpers';
// override parent page properties
.layout--no-scroll {
padding-bottom: 20px;
height: 100vh;
overflow-y: hidden;
box-sizing: border-box;
.module-page {
height: 100vh;
grid-template-rows: 60px 1fr;
padding-bottom: $small-spacing;
box-sizing: border-box;
}
.module-page {
height: 100vh;
grid-template-rows: 60px 1fr;
padding-bottom: $small-spacing;
box-sizing: border-box;
}
}
</style>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
.content-block-form {
max-width: 100%;
display: grid;
grid-template-columns: 100vw;
grid-template-rows: 85vh 80px;
height: 100vh;
grid-template-areas:
'content'
'footer';
.content-block-form {
max-width: 100%;
display: grid;
grid-template-columns: 100vw;
grid-template-rows: 85vh 80px;
height: 100vh;
grid-template-areas:
'content'
'footer';
@media (-webkit-min-device-pixel-ratio: 1.25) {
grid-template-rows: 80vh auto;
height: auto;
}
@media (-webkit-min-device-pixel-ratio: 1.25) {
grid-template-rows: 80vh auto;
height: auto;
}
&__heading {
@include heading-1;
}
&__heading {
@include heading-1;
}
&__task-toggle {
margin-bottom: $large-spacing;
}
&__task-toggle {
margin-bottom: $large-spacing;
}
&__add-button {
}
&__add-button {
}
&__segment {
display: flex;
flex-direction: column;
align-items: stretch;
&__segment {
display: flex;
flex-direction: column;
align-items: stretch;
margin-bottom: $large-spacing;
margin-bottom: $large-spacing;
:last-child {
margin-bottom: 0;
}
}
&__actions {
align-self: flex-end;
}
&__content {
grid-area: content;
overflow-x: visible;
overflow-y: auto;
padding: 10px;
align-items: center;
display: flex;
flex-direction: column;
& > * { // we make an exception and use a wildcard here
width: 800px;
max-width: 100vw;
box-sizing: border-box;
}
}
&__footer {
padding: $medium-spacing 0;
border-top: 1px solid $color-silver;
margin-top: auto;
grid-area: footer;
justify-content: center;
display: flex;
}
&__buttons {
width: 800px;
:last-child {
margin-bottom: 0;
}
}
&__actions {
align-self: flex-end;
}
&__content {
grid-area: content;
overflow-x: visible;
overflow-y: auto;
padding: 10px;
align-items: center;
display: flex;
flex-direction: column;
& > * {
// we make an exception and use a wildcard here
width: 800px;
max-width: 100vw;
box-sizing: border-box;
}
}
&__footer {
padding: $medium-spacing 0;
border-top: 1px solid $color-silver;
margin-top: auto;
grid-area: footer;
justify-content: center;
display: flex;
}
&__buttons {
width: 800px;
}
}
</style>

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

@ -9,7 +9,6 @@
@remove="$emit('remove', false)"
/>
<!-- Content Forms -->
<content-form-section
:title="title"
@ -27,14 +26,10 @@
: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"
/>
@ -44,312 +39,321 @@
</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';
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 = () => 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 CHOOSER = 'content-block-element-chooser-widget';
const CHOOSER = 'content-block-element-chooser-widget';
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,
},
export default {
props: {
element: {
type: Object,
default: null,
},
components: {
ContentElementActions,
ContentFormSection,
TrashIcon,
ContentBlockElementChooserWidget,
LinkForm,
VideoForm,
ImageForm,
DocumentForm,
AssignmentForm,
TextForm,
SubtitleForm,
SurveyBlock,
Solution,
ImageBlock,
Instruction,
ModuleRoomSlug,
CmsDocumentBlock,
InfogramBlock,
ThinglinkBlock,
Assignment
// is this element at the top level, or is it nested? we assume top level
topLevel: {
type: Boolean,
default: true,
},
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;
},
firstElement: {
type: Boolean,
required: true,
},
lastElement: {
type: Boolean,
required: true,
},
},
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({
url: '',
}, value),
};
break;
case 'image_url_block':
el = {
...el,
value: {
url: '',
},
};
break;
}
components: {
ContentElementActions,
ContentFormSection,
TrashIcon,
ContentBlockElementChooserWidget,
LinkForm,
VideoForm,
ImageForm,
DocumentForm,
AssignmentForm,
TextForm,
SubtitleForm,
SurveyBlock,
Solution,
ImageBlock,
Instruction,
ModuleRoomSlug,
CmsDocumentBlock,
InfogramBlock,
ThinglinkBlock,
Assignment,
},
if (convertToList) {
el = {
type: 'content_list_item',
contents: [el],
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;
},
},
methods: {
getType(element) {
switch (element.type) {
case 'subtitle':
return {
component: 'subtitle-form',
title: 'Untertitel',
icon: 'title-icon',
};
}
this.update(el);
},
update(element) {
this.$emit('update', element);
},
switchToDocument(value) {
this.changeType('document_block', value);
},
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(
{
url: '',
},
value
),
};
break;
case 'image_url_block':
el = {
...el,
value: {
url: '',
},
};
break;
}
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);
},
},
};
</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;
}
&__section {
display: grid;
//grid-template-columns: 1fr 50px;
grid-auto-rows: auto;
/*width: 95%; // reserve space for scrollbar*/
}
&__chooser {
grid-column: 1 / span 2;
}
&__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;
}
}
</style>

138
client/src/components/content-block-form/ContentElementActions.vue
View File

@ -1,17 +1,9 @@
<template>
<div class="content-element-actions">
<button
class="icon-button"
@click.stop="toggle(true)"
>
<button class="icon-button" @click.stop="toggle(true)">
<ellipses class="icon-button__icon" />
</button>
<widget-popover
class="content-element-actions__popover"
:no-padding="true"
v-if="show"
@hide-me="toggle(false)"
>
<widget-popover class="content-element-actions__popover" :no-padding="true" v-if="show" @hide-me="toggle(false)">
<section class="content-element-actions__section">
<button-with-icon-and-text
class="content-element-actions__button"
@ -63,84 +55,82 @@
</template>
<script lang="ts">
import Vue from 'vue';
import WidgetPopover from '@/components/ui/WidgetPopover.vue';
import Ellipses from '@/components/icons/Ellipses.vue';
import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText.vue';
import {ActionOptions} from "@/@types";
import Vue from 'vue';
import WidgetPopover from '@/components/ui/WidgetPopover.vue';
import Ellipses from '@/components/icons/Ellipses.vue';
import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText.vue';
import { ActionOptions } from '@/@types';
interface Data {
show: boolean;
}
interface Data {
show: boolean;
}
export default Vue.extend({
props: {
actions: {
type: Object as () => ActionOptions
},
export default Vue.extend({
props: {
actions: {
type: Object as () => ActionOptions,
},
components: {ButtonWithIconAndText, Ellipses, WidgetPopover},
},
components: { ButtonWithIconAndText, Ellipses, WidgetPopover },
data: (): Data => ({
show: false,
}),
data: (): Data => ({
show: false,
}),
methods: {
toggle(show: boolean) {
this.show = show;
},
close() {
this.show = false;
},
up() {
this.$emit('move-up');
this.close();
},
down() {
this.$emit('move-down');
this.close();
},
top() {
this.$emit('move-top');
this.close();
},
bottom() {
this.$emit('move-bottom');
this.close();
},
emitAndClose(event: string) {
this.$emit(event);
this.close();
}
methods: {
toggle(show: boolean) {
this.show = show;
},
});
close() {
this.show = false;
},
up() {
this.$emit('move-up');
this.close();
},
down() {
this.$emit('move-down');
this.close();
},
top() {
this.$emit('move-top');
this.close();
},
bottom() {
this.$emit('move-bottom');
this.close();
},
emitAndClose(event: string) {
this.$emit(event);
this.close();
},
},
});
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
.content-element-actions {
position: relative;
.content-element-actions {
position: relative;
&__popover {
white-space: nowrap;
top: 100%;
transform: translateY($small-spacing);
&__popover {
white-space: nowrap;
top: 100%;
transform: translateY($small-spacing);
}
}
&__section {
border-bottom: 1px solid $color-silver-dark;
padding: $medium-spacing $small-spacing;
&__section {
border-bottom: 1px solid $color-silver-dark;
padding: $medium-spacing $small-spacing;
&:last-child {
border-bottom: 0;
}
}
&__button {
margin-bottom: $medium-spacing;
&:last-child {
border-bottom: 0;
}
}
&__button {
margin-bottom: $medium-spacing;
}
}
</style>

130
client/src/components/content-block-form/ContentFormSection.vue
View File

@ -1,13 +1,8 @@
<template>
<div class="content-form-section">
<h2 class="content-form-section__heading">
<component
class="content-form-section__icon"
:is="icon"
/> <span
class="content-form-section__title"
data-cy="content-form-section-title"
>{{ title }}</span>
<component class="content-form-section__icon" :is="icon" />
<span class="content-form-section__title" data-cy="content-form-section-title">{{ title }}</span>
</h2>
<content-element-actions
@ -27,74 +22,73 @@
</template>
<script lang="ts">
import formElementIcons from '@/components/ui/form-element-icons.js';
import ContentElementActions from '@/components/content-block-form/ContentElementActions.vue';
import {ActionOptions} from "@/@types";
import formElementIcons from '@/components/ui/form-element-icons.js';
import ContentElementActions from '@/components/content-block-form/ContentElementActions.vue';
import { ActionOptions } from '@/@types';
export default {
props: {
title: {
type: String,
default: ''
},
icon: {
type: String,
default: ''
},
actions: {
type: Object as () => ActionOptions,
default: () => {}
}
export default {
props: {
title: {
type: String,
default: '',
},
components: {
ContentElementActions,
...formElementIcons
}
};
icon: {
type: String,
default: '',
},
actions: {
type: Object as () => ActionOptions,
default: () => {},
},
},
components: {
ContentElementActions,
...formElementIcons,
},
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
.content-form-section {
@include default-box-shadow;
border-radius: $default-border-radius;
padding: $small-spacing $medium-spacing;
margin-bottom: $medium-spacing;
.content-form-section {
@include default-box-shadow;
border-radius: $default-border-radius;
padding: $small-spacing $medium-spacing;
margin-bottom: $medium-spacing;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-template-areas: 'h a' 'c c';
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-template-areas: 'h a' 'c c';
align-items: center;
grid-row-gap: $medium-spacing;
&__heading {
display: flex;
align-items: center;
grid-row-gap: $medium-spacing;
&__heading {
display: flex;
align-items: center;
grid-area: h;
margin-bottom: 0;
}
&__actions {
grid-area: a;
justify-self: end;
}
&__title {
@include heading-3;
margin-bottom: 0;
}
&__icon {
width: 28px;
height: 28px;
margin-right: $small-spacing;
}
&__content {
grid-area: c;
}
grid-area: h;
margin-bottom: 0;
}
&__actions {
grid-area: a;
justify-self: end;
}
&__title {
@include heading-3;
margin-bottom: 0;
}
&__icon {
width: 28px;
height: 28px;
margin-right: $small-spacing;
}
&__content {
grid-area: c;
}
}
</style>

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

@ -18,166 +18,150 @@
/>
</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 { 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 = () => 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 Modal = () => import('@/components/Modal.vue');
const Checkbox = () => import('@/components/ui/Checkbox.vue');
const Modal = () => import('@/components/Modal.vue');
const Checkbox = () => import('@/components/ui/Checkbox.vue');
export default {
props: {
contentBlock: Object,
blockType: {
type: String,
default: 'ContentBlock',
},
showTaskSelection: {
type: Boolean,
default: false,
},
disableSave: {
type: Boolean,
default: false,
},
export default {
props: {
contentBlock: Object,
blockType: {
type: String,
default: 'ContentBlock',
},
components: {
ContentElement,
Modal,
ModalInput,
AddContentElement,
Checkbox,
showTaskSelection: {
type: Boolean,
default: false,
},
disableSave: {
type: Boolean,
default: false,
},
},
data() {
return {
error: false,
localContentBlock: Object.assign({}, {
components: {
ContentElement,
Modal,
ModalInput,
AddContentElement,
Checkbox,
},
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);
}
},
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);
},
),
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);
}
},
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-component {
margin-bottom: 25px;
}
&__remove {
}
&__trash-icon {
}
&__add {
grid-column: 1 / span 2;
}
&__task {
margin: 15px 0 10px;
}
&__element {
}
&__element-component {
margin-bottom: 25px;
}
&__remove {
}
&__trash-icon {
}
&__add {
grid-column: 1 / span 2;
}
&__task {
margin: 15px 0 10px;
}
}
</style>

112
client/src/components/content-block-form/EditContentBlockWizard.vue
View File

@ -1,77 +1,75 @@
<template>
<contents-form
:content-block="contentBlock"
:show-task-selection="true"
@save="saveContentBlock"
@hide="hideModal"
/>
<contents-form :content-block="contentBlock" :show-task-selection="true" @save="saveContentBlock" @hide="hideModal" />
</template>
<script>
import ContentsForm from '@/components/content-block-form/ContentsForm';
import ContentsForm from '@/components/content-block-form/ContentsForm';
import store from '@/store/index';
import store from '@/store/index';
import EDIT_CONTENT_BLOCK_MUTATION from 'gql/mutations/editContentBlock.gql';
import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
import CONTENT_BLOCK_QUERY from '@/graphql/gql/queries/contentBlockQuery.gql';
import { setUserBlockType } from '@/helpers/content-block';
import EDIT_CONTENT_BLOCK_MUTATION from 'gql/mutations/editContentBlock.gql';
import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
import CONTENT_BLOCK_QUERY from '@/graphql/gql/queries/contentBlockQuery.gql';
import { setUserBlockType } from '@/helpers/content-block';
export default {
components: {
ContentsForm
export default {
components: {
ContentsForm,
},
data() {
return {
contentBlock: {},
};
},
created() {
// debugger;
},
methods: {
hideModal() {
this.$store.dispatch('resetCurrentNoteBlock');
this.$store.dispatch('hideModal');
},
data() {
return {
contentBlock: {}
};
},
created() {
// debugger;
},
methods: {
hideModal() {
this.$store.dispatch('resetCurrentNoteBlock');
this.$store.dispatch('hideModal');
},
saveContentBlock(contentBlock) {
this.$apollo.mutate({
saveContentBlock(contentBlock) {
this.$apollo
.mutate({
mutation: EDIT_CONTENT_BLOCK_MUTATION,
variables: {
input: {
contentBlock: {
title: contentBlock.title,
contents: contentBlock.contents.filter(value => Object.keys(value).length > 0),
type: setUserBlockType(contentBlock.isAssignment)
contents: contentBlock.contents.filter((value) => Object.keys(value).length > 0),
type: setUserBlockType(contentBlock.isAssignment),
},
id: contentBlock.id
}
id: contentBlock.id,
},
},
refetchQueries: [{
query: MODULE_DETAILS_QUERY,
variables: {
slug: this.$route.params.slug
}
}]
}).then(() => {
refetchQueries: [
{
query: MODULE_DETAILS_QUERY,
variables: {
slug: this.$route.params.slug,
},
},
],
})
.then(() => {
this.hideModal();
});
}
},
},
apollo: {
contentBlock() {
return {
query: CONTENT_BLOCK_QUERY,
variables: {
id: store.state.currentNoteBlock
}
};
}
}
};
apollo: {
contentBlock() {
return {
query: CONTENT_BLOCK_QUERY,
variables: {
id: store.state.currentNoteBlock,
},
};
},
},
};
</script>

82
client/src/components/content-block-form/NewContentBlockWizard.vue
View File

@ -9,60 +9,62 @@
</template>
<script>
import ContentsForm from '@/components/content-block-form/ContentsForm';
import ContentsForm from '@/components/content-block-form/ContentsForm';
import NEW_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/addContentBlock.gql';
import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
import {setUserBlockType} from '@/helpers/content-block';
import NEW_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/addContentBlock.gql';
import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
import { setUserBlockType } from '@/helpers/content-block';
export default {
components: {
ContentsForm
},
export default {
components: {
ContentsForm,
},
data() {
return {
contentBlock: {
title: '',
contents: [
{}
]
},
saving: false
};
},
methods: {
hideModal() {
this.$store.dispatch('resetContentBlockPosition');
this.$store.dispatch('hideModal');
data() {
return {
contentBlock: {
title: '',
contents: [{}],
},
saveContentBlock(contentBlock) {
this.saving = true;
this.$apollo.mutate({
saving: false,
};
},
methods: {
hideModal() {
this.$store.dispatch('resetContentBlockPosition');
this.$store.dispatch('hideModal');
},
saveContentBlock(contentBlock) {
this.saving = true;
this.$apollo
.mutate({
mutation: NEW_CONTENT_BLOCK_MUTATION,
variables: {
input: {
contentBlock: {
title: contentBlock.title,
contents: contentBlock.contents.filter(value => Object.keys(value).length > 0),
type: setUserBlockType(contentBlock.isAssignment)
contents: contentBlock.contents.filter((value) => Object.keys(value).length > 0),
type: setUserBlockType(contentBlock.isAssignment),
},
after: this.$store.state.contentBlockPosition.after,
parent: this.$store.state.contentBlockPosition.parent
}
parent: this.$store.state.contentBlockPosition.parent,
},
},
refetchQueries: [{
query: MODULE_DETAILS_QUERY,
variables: {
slug: this.$route.params.slug
}
}]
}).then(() => {
refetchQueries: [
{
query: MODULE_DETAILS_QUERY,
variables: {
slug: this.$route.params.slug,
},
},
],
})
.then(() => {
this.saving = false;
this.hideModal();
});
}
},
};
},
};
</script>

49
client/src/components/content-block-form/helpers.js
View File

@ -1,39 +1,46 @@
export const CHOOSER = 'content-block-element-chooser-widget';
export const chooserFilter = value => value.type !== CHOOSER;
export const USER_CONTENT_TYPES = ['subtitle', 'link_block', 'video_block', 'image_url_block', 'text_block', 'assignment', 'document_block'];
export const chooserFilter = (value) => value.type !== CHOOSER;
export const USER_CONTENT_TYPES = [
'subtitle',
'link_block',
'video_block',
'image_url_block',
'text_block',
'assignment',
'document_block',
];
/*
Users can only edit certain types of contents, the rest can only be re-ordered. We only care about their id, we won't
send anything else to the server about them
*/
export const simplifyContents = (contents) => {
return contents.map(c => {
return contents.map((c) => {
if (USER_CONTENT_TYPES.includes(c.type)) {
return c;
}
if (c.type === 'content_list_item') {
return {
...c,
contents: simplifyContents(c.contents)
contents: simplifyContents(c.contents),
};
}
return {
id: c.id,
type: 'readonly'
type: 'readonly',
};
});
};
export const cleanUpContents = (contents) => {
let filteredContents = contents
.filter(chooserFilter); // only use items that are not chooser elements
let filteredContents = contents.filter(chooserFilter); // only use items that are not chooser elements
return filteredContents.map(content => {
return filteredContents.map((content) => {
// if the element has a contents property, it's a list of contents, filter them
if (content.contents) {
return {
...content,
contents: content.contents.filter(chooserFilter)
contents: content.contents.filter(chooserFilter),
};
}
// else just return it
@ -44,16 +51,16 @@ export const cleanUpContents = (contents) => {
// transform value prop to contents, to better handle the input type on the server
export const transformInnerContents = (contents) => {
let ret = [];
for (let content of contents) {
if (Array.isArray(content.value)) {
const {value, ...contentWithoutValue} = content;
ret.push({
...contentWithoutValue,
contents: value
});
} else {
ret.push(content);
}
}
return ret;
for (let content of contents) {
if (Array.isArray(content.value)) {
const { value, ...contentWithoutValue } = content;
ret.push({
...contentWithoutValue,
contents: value,
});
} else {
ret.push(content);
}
}
return ret;
};

87
client/src/components/content-blocks/CmsDocumentBlock.vue
View File

@ -1,66 +1,57 @@
<template>
<div
:class="{'cms-document-block--solution': solution}"
class="cms-document-block"
>
<div :class="{ 'cms-document-block--solution': solution }" class="cms-document-block">
<document-icon class="cms-document-block__icon" />
<a
:href="value.url"
class="cms-document-block__link"
target="_blank"
>{{ value.display_text }}</a>
<a :href="value.url" class="cms-document-block__link" target="_blank">{{ value.display_text }}</a>
</div>
</template>
<script>
const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
export default {
props: {
value: Object,
solution: {
type: Boolean,
default: false,
},
export default {
props: {
value: Object,
solution: {
type: Boolean,
default: false,
},
},
components: {
DocumentIcon,
},
};
components: {
DocumentIcon,
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.cms-document-block {
display: grid;
grid-template-columns: 50px 1fr 50px;
align-items: center;
margin-bottom: $large-spacing;
.cms-document-block {
display: grid;
grid-template-columns: 50px 1fr 50px;
align-items: center;
margin-bottom: $large-spacing;
&__icon {
width: 30px;
height: 30px;
&__icon {
width: 30px;
height: 30px;
}
&__link {
text-decoration: underline;
}
$parent: &;
&--solution {
margin-bottom: $small-spacing;
#{$parent}__link {
color: $color-silver-dark;
}
&__link {
text-decoration: underline;
}
$parent: &;
&--solution {
margin-bottom: $small-spacing;
#{$parent}__link {
color: $color-silver-dark;
}
#{$parent}__icon {
fill: $color-silver-dark;
}
#{$parent}__icon {
fill: $color-silver-dark;
}
}
}
</style>

177
client/src/components/content-blocks/ContentComponent.vue
View File

@ -1,9 +1,5 @@
<template>
<div
:class="componentClass"
:data-scrollto="component.id"
data-cy="content-component"
>
<div :class="componentClass" :data-scrollto="component.id" data-cy="content-component">
<bookmark-actions
:bookmarked="bookmarked"
:note="note"
@ -13,96 +9,105 @@
@edit-note="editNote"
@bookmark="bookmarkContent(component.id, !bookmarked)"
/>
<component
v-bind="component"
:parent="parent"
:is="component.type"
/>
<component v-bind="component" :parent="parent" :is="component.type" />
</div>
</template>
<script>
import {constructContentComponentBookmarkMutation} from '@/helpers/update-content-bookmark-mutation';
import { constructContentComponentBookmarkMutation } from '@/helpers/update-content-bookmark-mutation';
const TextBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/TextBlock');
const InstrumentWidget = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/InstrumentWidget');
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 CmsDocumentBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/CmsDocumentBlock');
const InfogramBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/InfogramBlock');
const ThinglinkBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ThinglinkBlock');
const GeniallyBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/GeniallyBlock');
const SubtitleBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SubtitleBlock');
const SectionTitleBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SectionTitleBlock');
const ContentListBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ContentListBlock');
const ModuleRoomSlug = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ModuleRoomSlug');
const Assignment = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/assignment/Assignment');
const Survey = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SurveyBlock');
const Solution = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution');
const Instruction = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Instruction');
const BookmarkActions = () => import(/* webpackChunkName: "content-components" */'@/components/notes/BookmarkActions');
const TextBlock = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/TextBlock');
const InstrumentWidget = () =>
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/InstrumentWidget');
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 CmsDocumentBlock = () =>
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/CmsDocumentBlock');
const InfogramBlock = () =>
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/InfogramBlock');
const ThinglinkBlock = () =>
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ThinglinkBlock');
const GeniallyBlock = () =>
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/GeniallyBlock');
const SubtitleBlock = () =>
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/SubtitleBlock');
const SectionTitleBlock = () =>
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/SectionTitleBlock');
const ContentListBlock = () =>
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ContentListBlock');
const ModuleRoomSlug = () =>
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ModuleRoomSlug');
const Assignment = () =>
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/assignment/Assignment');
const Survey = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/SurveyBlock');
const Solution = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/Solution');
const Instruction = () =>
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/Instruction');
const BookmarkActions = () => import(/* webpackChunkName: "content-components" */ '@/components/notes/BookmarkActions');
export default {
props: {
component: {
type: Object,
default: () => ({})
default: () => ({}),
},
parent: {
type: Object,
default: () => ({})
default: () => ({}),
},
bookmarks: {
type: Array,
default: () => ([])
default: () => [],
},
notes: {
type: Array,
default: () => ([])
default: () => [],
},
root: {
type: String,
default: ''
default: '',
},
editMode: {
type: Boolean,
default: false
}
default: false,
},
},
components: {
'text_block': TextBlock,
'basic_knowledge': InstrumentWidget, // for legacy
'instrument': InstrumentWidget,
'image_block': ImageBlock,
'image_url_block': ImageUrlBlock,
'video_block': VideoBlock,
'link_block': LinkBlock,
'document_block': DocumentBlock,
'infogram_block': InfogramBlock,
'genially_block': GeniallyBlock,
'subtitle': SubtitleBlock,
'section_title': SectionTitleBlock,
'content_list': ContentListBlock,
'module_room_slug': ModuleRoomSlug,
'thinglink_block': ThinglinkBlock,
'cms_document_block': CmsDocumentBlock,
text_block: TextBlock,
basic_knowledge: InstrumentWidget, // for legacy
instrument: InstrumentWidget,
image_block: ImageBlock,
image_url_block: ImageUrlBlock,
video_block: VideoBlock,
link_block: LinkBlock,
document_block: DocumentBlock,
infogram_block: InfogramBlock,
genially_block: GeniallyBlock,
subtitle: SubtitleBlock,
section_title: SectionTitleBlock,
content_list: ContentListBlock,
module_room_slug: ModuleRoomSlug,
thinglink_block: ThinglinkBlock,
cms_document_block: CmsDocumentBlock,
Survey,
Solution,
Instruction,
Assignment,
BookmarkActions
BookmarkActions,
},
computed: {
bookmarked() {
return this.bookmarks && !!this.bookmarks.find(bookmark => bookmark.uuid === this.component.id);
return this.bookmarks && !!this.bookmarks.find((bookmark) => bookmark.uuid === this.component.id);
},
note() {
const bookmark = this.bookmarks && this.bookmarks.find(bookmark => bookmark.uuid === this.component.id);
const bookmark = this.bookmarks && this.bookmarks.find((bookmark) => bookmark.uuid === this.component.id);
return bookmark && bookmark.note;
},
showBookmarkActions() {
@ -114,18 +119,19 @@ export default {
classes.push('content-component--bookmarked');
}
return classes;
}
},
},
methods: {
addNote(id) {
const type = Object.prototype.hasOwnProperty.call(this.parent, '__typename')
? this.parent.__typename : 'ContentBlockNode';
? this.parent.__typename
: 'ContentBlockNode';
this.$store.dispatch('addNote', {
content: id,
type,
block: this.root
block: this.root,
});
},
editNote() {
@ -133,37 +139,36 @@ export default {
},
bookmarkContent(uuid, bookmarked) {
this.$apollo.mutate(constructContentComponentBookmarkMutation(uuid, bookmarked, this.parent, this.root));
}
}
},
},
};
</script>
<style lang="scss" scoped>
@import "~styles/helpers";
@import '~styles/helpers';
.content-component {
position: relative;
.content-component {
position: relative;
&--bookmarked {
}
&--subtitle {
margin-top: $section-spacing;
margin-bottom: $large-spacing;
}
&--section_title {
margin-top: $section-spacing;
margin-bottom: $large-spacing;
}
&--text_block {
margin-bottom: $large-spacing;
}
&--document_block {
margin-bottom: $large-spacing;
}
&--bookmarked {
}
&--subtitle {
margin-top: $section-spacing;
margin-bottom: $large-spacing;
}
&--section_title {
margin-top: $section-spacing;
margin-bottom: $large-spacing;
}
&--text_block {
margin-bottom: $large-spacing;
}
&--document_block {
margin-bottom: $large-spacing;
}
}
</style>

27
client/src/components/content-blocks/ContentList.vue
View File

@ -1,14 +1,7 @@
<template>
<ol class="content-list">
<li
class="content-list__item"
v-for="(item, index) in items"
:key="item.id"
>
<slot
:item="item"
:index="index"
>
<li class="content-list__item" v-for="(item, index) in items" :key="item.id">
<slot :item="item" :index="index">
{{ item.id }}
</slot>
</li>
@ -16,13 +9,13 @@
</template>
<script>
export default {
//
props: {
items: {
type: Array,
default: () => ([])
}
export default {
//
props: {
items: {
type: Array,
default: () => [],
},
};
},
};
</script>

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

@ -1,47 +1,40 @@
<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 ContentList from '@/components/content-blocks/ContentList.vue';
export default {
name: 'ContentBlockList',
props: ['contents', 'parent'],
components: {
ContentList,
// https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
ContentBlock: () => import('@/components/ContentBlock.vue')
},
components: {
ContentList,
// https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
ContentBlock: () => import('@/components/ContentBlock.vue'),
},
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
});
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>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
</style>

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

@ -1,79 +1,71 @@
<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');
const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
export default {
props: {
value: Object,
showTrashIcon: Boolean,
},
export default {
props: {
value: Object,
showTrashIcon: Boolean,
},
components: {
DocumentIcon,
TrashIcon,
},
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;
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;
.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;
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>

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

@ -18,51 +18,51 @@
</template>
<script>
export default {
props: ['value'],
export default {
props: ['value'],
computed: {
src() {
return `https://view.genial.ly/${this.value.id}`;
}
computed: {
src() {
return `https://view.genial.ly/${this.value.id}`;
},
},
methods: {
openFullscreen() {
this.$store.dispatch('showFullscreenInfographic', {
id: this.value.id,
type: 'genially-block'
});
}
}
};
methods: {
openFullscreen() {
this.$store.dispatch('showFullscreenInfographic', {
id: this.value.id,
type: 'genially-block',
});
},
},
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import '@/styles/_variables.scss';
// Styling and structure taken from original iframe
.genially-block {
width: 100%;
margin-bottom: $large-spacing;
// Styling and structure taken from original iframe
.genially-block {
width: 100%;
margin-bottom: $large-spacing;
&__wrapper {
position: relative;
padding-bottom: 75%;
padding-top: 0;
height: 0;
}
&__iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&__link {
cursor: pointer;
}
&__wrapper {
position: relative;
padding-bottom: 75%;
padding-top: 0;
height: 0;
}
&__iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&__link {
cursor: pointer;
}
}
</style>

38
client/src/components/content-blocks/ImageBlock.vue
View File

@ -1,31 +1,25 @@
<template>
<img
:src="value.path"
alt=""
class="image-block"
@click="openFullscreen"
>
<img :src="value.path" alt="" class="image-block" @click="openFullscreen" />
</template>
<script>
export default {
props: ['value'],
methods: {
openFullscreen() {
this.$store.dispatch('showFullscreenImage', this.value.path);
}
}
};
export default {
props: ['value'],
methods: {
openFullscreen() {
this.$store.dispatch('showFullscreenImage', this.value.path);
},
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.image-block {
width: 100%;
max-width: 100%;
border-radius: 13px;
margin-bottom: $large-spacing;
}
.image-block {
width: 100%;
max-width: 100%;
border-radius: 13px;
margin-bottom: $large-spacing;
}
</style>

36
client/src/components/content-blocks/ImageUrlBlock.vue
View File

@ -1,30 +1,24 @@
<template>
<img
:src="value.url"
alt=""
class="image-block"
@click="openFullscreen"
>
<img :src="value.url" alt="" class="image-block" @click="openFullscreen" />
</template>
<script>
export default {
props: ['value'],
methods: {
openFullscreen() {
this.$store.dispatch('showFullscreenImage', this.value.url);
}
}
};
export default {
props: ['value'],
methods: {
openFullscreen() {
this.$store.dispatch('showFullscreenImage', this.value.url);
},
},
};
</script>
<style scoped lang="scss">
.image-block {
width: 100%;
max-width: 100%;
border-radius: 13px;
.image-block {
width: 100%;
max-width: 100%;
border-radius: 13px;
margin-bottom: 30px;
}
margin-bottom: 30px;
}
</style>

114
client/src/components/content-blocks/InfogramBlock.vue
View File

@ -7,79 +7,79 @@
class="infogram-block__iframe"
scrolling="no"
frameborder="0"
style="border:none;"
style="border: none"
/>
</div>
</template>
<script>
export default {
props: ['value'],
export default {
props: ['value'],
data() {
return {
height: 1
};
data() {
return {
height: 1,
};
},
computed: {
src() {
return `https://e.infogram.com/${this.id}?src=embed`;
},
computed: {
src() {
return `https://e.infogram.com/${this.id}?src=embed`;
},
href() {
return `https://infogram.com/${this.id}`;
},
id() {
return this.value.id;
},
title() {
return this.value.title || 'Infografik';
}
href() {
return `https://infogram.com/${this.id}`;
},
id() {
return this.value.id;
},
title() {
return this.value.title || 'Infografik';
},
},
mounted() {
// from https://developers.infogr.am/oembed/
window.addEventListener('message', event => {
try {
const data = JSON.parse(event.data);
if (data.context === 'iframe.resize' && this.parseId(data.src) === this.id) {
this.height = data.height;
}
} catch (e) {
return false;
mounted() {
// from https://developers.infogr.am/oembed/
window.addEventListener('message', (event) => {
try {
const data = JSON.parse(event.data);
if (data.context === 'iframe.resize' && this.parseId(data.src) === this.id) {
this.height = data.height;
}
} catch (e) {
return false;
}
});
},
methods: {
parseId(src) {
// src will be in the format of something like https://e.infogram.com/0ccf86bc-1afe-4026-b313-1f1b5992452b?src=embed
let last = src.split('/').pop();
return last.substring(0, last.indexOf('?')); // we're only interested in the id part before the '?'
},
openFullscreen() {
this.$store.dispatch('showFullscreenInfographic', {
id: this.value.id,
type: 'infogram-block',
});
},
methods: {
parseId(src) {
// src will be in the format of something like https://e.infogram.com/0ccf86bc-1afe-4026-b313-1f1b5992452b?src=embed
let last = src.split('/').pop();
return last.substring(0, last.indexOf('?')); // we're only interested in the id part before the '?'
},
openFullscreen() {
this.$store.dispatch('showFullscreenInfographic', {
id: this.value.id,
type: 'infogram-block'
});
}
},
};
},
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import '@/styles/_variables.scss';
.infogram-block {
margin-bottom: $large-spacing;
.infogram-block {
margin-bottom: $large-spacing;
&__link {
text-decoration: none;
cursor: pointer;
}
&__iframe {
width: 100%;
}
&__link {
text-decoration: none;
cursor: pointer;
}
&__iframe {
width: 100%;
}
}
</style>

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

@ -1,56 +1,50 @@
<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';
const BulbIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/BulbIcon');
export default {
props: ['value'],
export default {
props: ['value'],
mixins: [me],
mixins: [me],
components: {
BulbIcon
components: {
BulbIcon,
},
computed: {
text() {
return this.value.text ? this.value.text : 'Anweisungen';
},
computed: {
text() {
return this.value.text ? this.value.text : 'Anweisungen';
},
url() {
return this.value.document ? this.value.document.url : this.value.url;
}
}
};
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;
}
&__link {
@include heading-3;
}
&__icon {
width: 40px;
height: 40px;
margin-right: $small-spacing;
}
&__link {
@include heading-3;
}
}
</style>

36
client/src/components/content-blocks/InstrumentWidget.vue
View File

@ -1,15 +1,12 @@
<template>
<!-- eslint-disable vue/no-v-html -->
<div class="instrument-widget">
<div
class="instrument-widget__description"
v-html="value.description"
/>
<div class="instrument-widget__description" v-html="value.description" />
<router-link
:to="{name: 'instrument', params: { slug: value.slug }}"
:to="{ name: 'instrument', params: { slug: value.slug } }"
class="instrument-widget__button button"
:style="{
borderColor: value.foreground
borderColor: value.foreground,
}"
>
{{ $flavor.textInstrument }} anzeigen
@ -18,24 +15,23 @@
</template>
<script>
// 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
export default {
props: ['value'],
};
// 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
export default {
props: ['value'],
};
</script>
<style scoped lang="scss">
@import "~styles/_variables.scss";
@import '~styles/_variables.scss';
.instrument-widget {
margin-bottom: $small-spacing;
.instrument-widget {
margin-bottom: $small-spacing;
&__description {
margin-bottom: 25px;
}
&__button {
}
&__description {
margin-bottom: 25px;
}
&__button {
}
}
</style>

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

@ -1,59 +1,52 @@
<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');
const LinkIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/LinkIcon');
export default {
props: {
value: Object,
noMargin: {
default: false
}
export default {
props: {
value: Object,
noMargin: {
default: false,
},
},
components: {
LinkIcon
components: {
LinkIcon,
},
computed: {
href() {
const url = this.value.url;
return url.startsWith('http') ? this.value.url : `http://${this.value.url}`;
},
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;
}
&__icon {
width: 30px;
height: 30px;
}
&__link {
text-decoration: underline;
}
&--no-margin {
margin-bottom: 0;
}
&__icon {
width: 30px;
height: 30px;
}
&__link {
text-decoration: underline;
}
}
</style>

19
client/src/components/content-blocks/ModuleRoomSlug.vue
View File

@ -1,24 +1,21 @@
<template>
<div class="module-slug">
<router-link
:to="{name: 'moduleRoom', params: { slug: value.slug }}"
class="button button--primary"
>
<router-link :to="{ name: 'moduleRoom', params: { slug: value.slug } }" class="button button--primary">
Raum anzeigen
</router-link>
</div>
</template>
<script>
export default {
props: ['value']
};
export default {
props: ['value'],
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import '@/styles/_variables.scss';
.module-slug {
margin-bottom: $large-spacing;
}
.module-slug {
margin-bottom: $large-spacing;
}
</style>

23
client/src/components/content-blocks/SectionTitleBlock.vue
View File

@ -1,23 +1,20 @@
<template>
<!-- eslint-disable vue/no-v-html -->
<h4
class="section-title"
v-html="value.text"
/>
<h4 class="section-title" v-html="value.text" />
</template>
<script>
export default {
props: ['value']
};
export default {
props: ['value'],
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
@import '@/styles/_variables.scss';
@import '@/styles/_mixins.scss';
.section-title {
margin-bottom: 30px;
@include heading-line-height;
}
.section-title {
margin-bottom: 30px;
@include heading-line-height;
}
</style>

141
client/src/components/content-blocks/Solution.vue
View File

@ -1,114 +1,95 @@
<template>
<!-- eslint-disable vue/no-v-html -->
<div
class="solution"
data-cy="solution"
>
<a
class="solution__toggle"
data-cy="show-solution"
@click="toggle"
>Lösung
<div class="solution" data-cy="solution">
<a class="solution__toggle" data-cy="show-solution" @click="toggle"
>Lösung
<template v-if="!visible">anzeigen</template>
<template v-else>ausblenden</template>
</a>
<transition name="fade">
<div
class="solution__hidden fade"
v-if="visible"
>
<p
class="solution__text solution-text"
data-cy="solution-text"
v-html="sanitizedText"
/>
<cms-document-block
:solution="true"
class="solution__document"
:value="value.document"
v-if="value.document"
/>
<div class="solution__hidden fade" v-if="visible">
<p class="solution__text solution-text" data-cy="solution-text" v-html="sanitizedText" />
<cms-document-block :solution="true" class="solution__document" :value="value.document" v-if="value.document" />
</div>
</transition>
</div>
</template>
<script>
import {sanitizeAsHtml} from '@/helpers/text';
import CmsDocumentBlock from '@/components/content-blocks/CmsDocumentBlock';
import { sanitizeAsHtml } from '@/helpers/text';
import CmsDocumentBlock from '@/components/content-blocks/CmsDocumentBlock';
export default {
props: ['value'],
components: {CmsDocumentBlock},
export default {
props: ['value'],
components: { CmsDocumentBlock },
data() {
return {
visible: false,
};
data() {
return {
visible: false,
};
},
computed: {
sanitizedText() {
return sanitizeAsHtml(this.value.text);
},
},
computed: {
sanitizedText() {
return sanitizeAsHtml(this.value.text);
},
methods: {
toggle() {
this.visible = !this.visible;
},
methods: {
toggle() {
this.visible = !this.visible;
},
},
};
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.solution {
display: grid;
grid-auto-rows: auto;
grid-row-gap: 15px;
.solution {
display: grid;
grid-auto-rows: auto;
grid-row-gap: 15px;
margin-bottom: 1rem;
margin-bottom: 1rem;
&__toggle {
font-family: $sans-serif-font-family;
color: $color-silver-dark;
font-size: toRem(15px);
/*margin-bottom: 15px;*/
display: block;
cursor: pointer;
font-weight: $font-weight-regular;
}
&__toggle {
font-family: $sans-serif-font-family;
color: $color-silver-dark;
font-size: toRem(15px);
/*margin-bottom: 15px;*/
display: block;
cursor: pointer;
font-weight: $font-weight-regular;
}
&__text {
&__text {
font-size: toRem(18px);
color: $color-silver-dark;
:deep(p) {
font-size: toRem(18px);
color: $color-silver-dark;
}
:deep(p) {
font-size: toRem(18px);
:deep(ul) {
padding-left: $medium-spacing;
> li {
list-style: disc outside none;
color: $color-silver-dark;
}
:deep(ul) {
padding-left: $medium-spacing;
> li {
list-style: disc outside none;
color: $color-silver-dark;
}
}
}
}
}
.fade-enter-active,
.fade-leave-active {
transition: opacity .3s;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
</style>

38
client/src/components/content-blocks/SubtitleBlock.vue
View File

@ -1,33 +1,29 @@
<template>
<!-- eslint-disable vue/no-v-html -->
<h5
class="subtitle"
data-cy="subtitle-block"
v-html="sanitizedText"
/>
<h5 class="subtitle" data-cy="subtitle-block" v-html="sanitizedText" />
</template>
<script>
import {sanitize} from '@/helpers/text';
import { sanitize } from '@/helpers/text';
export default {
props: ['value'],
export default {
props: ['value'],
computed: {
sanitizedText() {
return sanitize(this.value.text);
}
}
};
computed: {
sanitizedText() {
return sanitize(this.value.text);
},
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.subtitle {
padding-top: 1px;
margin-bottom: $medium-spacing;
margin-bottom: calc(#{$large-spacing} - 0.1rem);
@include heading-line-height;
}
.subtitle {
padding-top: 1px;
margin-bottom: $medium-spacing;
margin-bottom: calc(#{$large-spacing} - 0.1rem);
@include heading-line-height;
}
</style>

24
client/src/components/content-blocks/SurveyBlock.vue
View File

@ -1,27 +1,21 @@
<template>
<div
:data-scrollto="value.id"
class="survey-block"
>
<router-link
:to="{name: 'survey', params: {id:value.id}}"
class="button button--primary"
>
<div :data-scrollto="value.id" class="survey-block">
<router-link :to="{ name: 'survey', params: { id: value.id } }" class="button button--primary">
Übung anzeigen
</router-link>
</div>
</template>
<script>
export default {
props: ['value'],
};
export default {
props: ['value'],
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import '@/styles/_variables.scss';
.survey-block {
margin-bottom: $large-spacing;
}
.survey-block {
margin-bottom: $large-spacing;
}
</style>

25
client/src/components/content-blocks/Task.vue
View File

@ -1,26 +1,23 @@
<template>
<!-- eslint-disable vue/no-v-html -->
<div class="task">
<div
class="task__text"
v-html="value.text"
/>
<div class="task__text" v-html="value.text" />
</div>
</template>
<script>
export default {
props: ['value']
};
export default {
props: ['value'],
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import '@/styles/_variables.scss';
.task {
margin-bottom: 30px;
align-items: start;
background-color: $color-brand-light;
border-radius: $default-border-radius;
}
.task {
margin-bottom: 30px;
align-items: start;
background-color: $color-brand-light;
border-radius: $default-border-radius;
}
</style>

48
client/src/components/content-blocks/TextBlock.vue
View File

@ -1,39 +1,35 @@
<template>
<!-- eslint-disable vue/no-v-html -->
<div
class="text-block"
data-cy="text-block"
v-html="sanitizedText"
/>
<div class="text-block" data-cy="text-block" v-html="sanitizedText" />
</template>
<script>
export default {
props: ['value'],
export default {
props: ['value'],
computed: {
sanitizedText() {
// don't need to sanitize the input, server does this
return this.value.text;
}
}
};
computed: {
sanitizedText() {
// don't need to sanitize the input, server does this
return this.value.text;
},
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.text-block {
margin-bottom: $medium-spacing; // if calc is not supported
margin-bottom: calc(#{$large-spacing} - 0.25rem); // to offset the 1.5 line height, which leaves a padding
@include regular-paragraph;
.text-block {
margin-bottom: $medium-spacing; // if calc is not supported
margin-bottom: calc(#{$large-spacing} - 0.25rem); // to offset the 1.5 line height, which leaves a padding
@include regular-paragraph;
:deep(ul) {
@include list-parent;
}
:deep(li) {
@include list-child;
}
:deep(ul) {
@include list-parent;
}
:deep(li) {
@include list-child;
}
}
</style>

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

@ -20,51 +20,51 @@
</template>
<script>
export default {
props: ['value'],
export default {
props: ['value'],
computed: {
src() {
return `https://www.thinglink.com/card/${this.value.id}`;
}
computed: {
src() {
return `https://www.thinglink.com/card/${this.value.id}`;
},
},
methods: {
openFullscreen() {
this.$store.dispatch('showFullscreenInfographic', {
id: this.value.id,
type: 'thinglink-block'
});
}
}
};
methods: {
openFullscreen() {
this.$store.dispatch('showFullscreenInfographic', {
id: this.value.id,
type: 'thinglink-block',
});
},
},
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import '@/styles/_variables.scss';
// Styling and structure taken from original iframe
.thinglink-block {
width: 100%;
margin-bottom: $large-spacing;
// Styling and structure taken from original iframe
.thinglink-block {
width: 100%;
margin-bottom: $large-spacing;
&__wrapper {
position: relative;
padding-bottom: 75%;
padding-top: 0;
height: 0;
}
&__iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&__link {
cursor: pointer;
}
&__wrapper {
position: relative;
padding-bottom: 75%;
padding-top: 0;
height: 0;
}
&__iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&__link {
cursor: pointer;
}
}
</style>

67
client/src/components/content-blocks/VideoBlock.vue
View File

@ -1,51 +1,42 @@
<template>
<div class="video-block">
<youtube-embed
:url="value.url"
v-if="isYoutube"
/>
<vimeo-embed
:url="value.url"
v-if="isVimeo"
/>
<srf-embed
:url="value.url"
v-if="isSrf"
/>
<youtube-embed :url="value.url" v-if="isYoutube" />
<vimeo-embed :url="value.url" v-if="isVimeo" />
<srf-embed :url="value.url" v-if="isSrf" />
</div>
</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';
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';
export default {
props: ['value'],
export default {
props: ['value'],
components: {
YoutubeEmbed,
VimeoEmbed,
SrfEmbed
components: {
YoutubeEmbed,
VimeoEmbed,
SrfEmbed,
},
computed: {
isYoutube() {
return isYoutubeUrl(this.value.url);
},
computed: {
isYoutube() {
return isYoutubeUrl(this.value.url);
},
isVimeo() {
return isVimeoUrl(this.value.url);
},
isSrf() {
return isSrfUrl(this.value.url);
}
}
};
isVimeo() {
return isVimeoUrl(this.value.url);
},
isSrf() {
return isSrfUrl(this.value.url);
},
},
};
</script>
<style scoped lang="scss">
.video-block {
margin-bottom: 30px;
}
.video-block {
margin-bottom: 30px;
}
</style>

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

@ -1,19 +1,9 @@
<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
@ -33,100 +23,92 @@
@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';
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 = () =>
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');
export default {
props: ['value'],
export default {
props: ['value'],
components: {
Solution,
SubmissionForm,
SpellCheck,
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;
},
data() {
submission() {
return this.assignment.submission ? this.assignment.submission : {};
},
isStudent() {
return !this.me.permissions.includes('users.can_manage_school_class_content');
},
solution() {
return {
assignment: {
submission: this.initialSubmission(),
},
me: {
permissions: [],
},
inputType: 'text',
unsaved: false,
saving: 0,
corrections: '',
spellcheckLoading: false,
text: this.assignment.solution,
};
},
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}`;
},
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({
methods: {
...mapActions(['scrollToAssignmentReady']),
_save: debounce(function (submission) {
this.saving++;
this.$apollo
.mutate({
mutation: UPDATE_ASSIGNMENT_MUTATION_WITH_SUCCESS,
variables: {
input: {
@ -137,7 +119,14 @@
},
},
},
update(store, {data: {updateAssignment: {successful, updatedAssignment}}}) {
update(
store,
{
data: {
updateAssignment: { successful, updatedAssignment },
},
}
) {
try {
if (successful) {
const query = ASSIGNMENT_QUERY;
@ -148,80 +137,82 @@
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: {
@ -229,90 +220,96 @@
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,
};
},
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));
}
},
apollo: {
assignment: {
query: ASSIGNMENT_QUERY,
variables() {
return {
id: this.value.id,
};
},
me: {
query: ME_QUERY,
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,
},
},
};
</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;
&__title {
font-size: toRem(17px);
margin-bottom: 1rem;
}
&__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;
}
}
&__feedback {
@include regular-text;
}
.assignment {
margin-bottom: 3rem;
position: relative;
&__title {
font-size: toRem(17px);
margin-bottom: 1rem;
}
&__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;
}
}
&__feedback {
@include regular-text;
}
}
</style>

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

@ -1,108 +1,99 @@
<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';
const DocumentBlock = () =>
import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/DocumentBlock');
const InfoIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon');
const InfoIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon');
export default {
props: {
userInput: {
type: Object,
default: () => ({})
},
showReopen: {
type: Boolean,
default: true
},
sharedMsg: {
type: String,
default: ''
}
export default {
props: {
userInput: {
type: Object,
default: () => ({}),
},
components: {
InfoIcon,
DocumentBlock,
showReopen: {
type: Boolean,
default: true,
},
sharedMsg: {
type: String,
default: '',
},
},
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;
}
&__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;
}
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;
}
}
</style>

94
client/src/components/content-blocks/assignment/SpellCheck.vue
View File

@ -1,63 +1,63 @@
<template>
<!-- eslint-disable vue/no-v-html -->
<p
class="spellcheck"
v-if="corrections"
>
<p class="spellcheck" v-if="corrections">
<span class="inline-title">Rechtschreibung:</span> <span v-html="highlightedText" />
</p>
</template>
<script>
export default {
props: ['corrections', 'text'],
export default {
props: ['corrections', 'text'],
computed: {
highlightedText() {
if (!this.corrections) {
return '';
}
let parts = [];
let index = 0;
[...this.corrections] // no side effects, as sort changes the source array
.sort((e1, e2) => (e1.offset + e1.sentenceOffset) - (e2.offset + e2.sentenceOffset))
.forEach(current => {
let realOffset = current.offset + current.sentenceOffset;
parts.push({
correct: true,
text: this.text.substring(index, realOffset)
}, {
correct: false,
text: this.text.substring(realOffset, realOffset + current.length)
});
index = realOffset + current.length;
});
parts.push({
correct: true,
text: this.text.substring(index, this.text.length + 1)
});
return parts
.filter(part => part.text.length)
.reduce((previous, part) => {
if (part.correct) {
return `${previous}${part.text}`;
} else {
return `${previous}<span data-cy="spellcheck-correction" class="spellcheck__correction">${part.text}</span>`;
}
}, '');
computed: {
highlightedText() {
if (!this.corrections) {
return '';
}
}
};
let parts = [];
let index = 0;
[...this.corrections] // no side effects, as sort changes the source array
.sort((e1, e2) => e1.offset + e1.sentenceOffset - (e2.offset + e2.sentenceOffset))
.forEach((current) => {
let realOffset = current.offset + current.sentenceOffset;
parts.push(
{
correct: true,
text: this.text.substring(index, realOffset),
},
{
correct: false,
text: this.text.substring(realOffset, realOffset + current.length),
}
);
index = realOffset + current.length;
});
parts.push({
correct: true,
text: this.text.substring(index, this.text.length + 1),
});
return parts
.filter((part) => part.text.length)
.reduce((previous, part) => {
if (part.correct) {
return `${previous}${part.text}`;
} else {
return `${previous}<span data-cy="spellcheck-correction" class="spellcheck__correction">${part.text}</span>`;
}
}, '');
},
},
};
</script>
<style lang="scss">
@import "@/styles/_mixins.scss";
@import '@/styles/_mixins.scss';
.spellcheck {
@include regular-text;
.spellcheck {
@include regular-text;
&__correction {
background: yellow;
}
&__correction {
background: yellow;
}
}
</style>

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

@ -10,10 +10,7 @@
/>
</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"
@ -29,11 +26,7 @@
>
{{ 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>
@ -48,115 +41,112 @@
</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');
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');
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,
export default {
props: {
userInput: Object,
saved: Boolean,
placeholder: String,
action: String,
reopen: Function,
document: String,
readOnly: {
type: Boolean,
default: false,
},
components: {
FileUpload,
SubmissionInput,
FinalSubmission,
spellcheck: {
type: Boolean,
default: false,
},
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...';
}
},
spellcheckLoading: {
type: Boolean,
default: false,
},
sharedMsg: String,
},
methods: {
reopenSubmission() {
this.$emit('reopen');
},
saveInput(input) {
this.$emit('saveInput', input);
},
changeDocumentUrl(documentUrl) {
this.$emit('changeDocumentUrl', documentUrl);
},
components: {
FileUpload,
SubmissionInput,
FinalSubmission,
},
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...';
}
},
},
};
methods: {
reopenSubmission() {
this.$emit('reopen');
},
saveInput(input) {
this.$emit('saveInput', input);
},
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;
}
}
&__spellcheck {
/* so the button does not change size when changing the text */
width: 235px;
text-align: center;
display: inline-block;
&__document {
&:hover {
cursor: pointer;
}
}
&__spellcheck {
/* so the button does not change size when changing the text */
width: 235px;
text-align: center;
display: inline-block;
}
}
</style>

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

@ -4,74 +4,68 @@
: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');
const TickCircleIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TickCircleIcon');
const LoadingIcon = () => 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;
}
&__save-status {
position: relative;
align-items: center;
}
&__save-status-icon {
width: 22px;
height: 22px;
fill: $color-silver-dark;
}
&__saving-icon {
@include spin;
}
&__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;
}
}
</style>

66
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,43 @@
</template>
<script>
const InfoIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon');
const InfoIcon = () => 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;
}
&__exercise-text {
width: $modal-input-width;
grid-column: span 2;
}
&__help-icon {
width: 40px;
height: 40px;
}
&__help-description {
}
&__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 {
}
}
</style>

104
client/src/components/content-forms/ChooserElement.vue
View File

@ -1,13 +1,6 @@
<template>
<div
:class="['chooser-element', subclass]"
:data-cy="cy"
@click="$emit('select')"
>
<component
class="chooser-element__icon"
:is="icon"
/>
<div :class="['chooser-element', subclass]" :data-cy="cy" @click="$emit('select')">
<component class="chooser-element__icon" :is="icon" />
<div class="chooser-element__title">
{{ title }}
</div>
@ -15,62 +8,61 @@
</template>
<script>
import formElementIcons from '@/components/ui/form-element-icons';
import formElementIcons from '@/components/ui/form-element-icons';
export default {
props: {
type: {
type: String,
default: '',
},
icon: {
type: String,
default() {
return `${this.type}-icon`;
},
},
title: {
type: String,
default() {
return this.type.replace(/^\w/, c => c.toUpperCase());
},
export default {
props: {
type: {
type: String,
default: '',
},
icon: {
type: String,
default() {
return `${this.type}-icon`;
},
},
components: {
...formElementIcons,
title: {
type: String,
default() {
return this.type.replace(/^\w/, (c) => c.toUpperCase());
},
},
},
data() {
return {
subclass: `chooser-element--${this.type}`,
cy: `choose-${this.type}-widget`,
};
},
};
components: {
...formElementIcons,
},
data() {
return {
subclass: `chooser-element--${this.type}`,
cy: `choose-${this.type}-widget`,
};
},
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
.chooser-element {
cursor: pointer;
border: 1px solid $color-silver;
border-radius: 4px;
height: 105px;
width: 105px;
box-sizing: border-box;
display: grid;
grid-template-rows: 1fr 45px;
justify-content: center;
justify-items: center;
align-items: center;
.chooser-element {
cursor: pointer;
border: 1px solid $color-silver;
border-radius: 4px;
height: 105px;
width: 105px;
box-sizing: border-box;
display: grid;
grid-template-rows: 1fr 45px;
justify-content: center;
justify-items: center;
align-items: center;
&__icon {
width: 40px;
height: 40px;
align-self: end;
}
&__icon {
width: 40px;
height: 40px;
align-self: end;
}
}
</style>

337
client/src/components/content-forms/ContentBlockElementChooserWidget.vue
View File

@ -1,31 +1,21 @@
<template>
<div class="content-block-element-chooser-widget__wrapper">
<button
class="content-block-element-chooser-widget__remove-button icon-button"
@click="remove"
>
<button class="content-block-element-chooser-widget__remove-button icon-button" @click="remove">
<cross-icon class="icon-button__icon" />
</button>
<h3
class="content-block-element-chooser-widget__heading"
data-cy="chooser-heading"
>
Neuer Inhalt
</h3>
<template
v-if="includeListOption && hasDefaultFeatures"
>
<h3 class="content-block-element-chooser-widget__heading" data-cy="chooser-heading">Neuer Inhalt</h3>
<template v-if="includeListOption && hasDefaultFeatures">
<checkbox
class="content-block-element-chooser-widget__list-toggle"
:checked="convertToList"
data-cy="convert-to-list-checkbox"
label="Aufzählungszeichen hinzufügen"
@input="convertToList=$event"
@input="convertToList = $event"
/>
</template>
<div
:class="{'content-block-element-chooser-widget--no-assignment': hideAssignment}"
:class="{ 'content-block-element-chooser-widget--no-assignment': hideAssignment }"
class="content-block-element-chooser-widget"
>
<chooser-element
@ -41,182 +31,177 @@
</template>
<script>
import Checkbox from '@/components/ui/Checkbox';
import Checkbox from '@/components/ui/Checkbox';
import formElementIcons from '@/components/ui/form-element-icons';
import CrossIcon from '@/components/icons/CrossIcon';
import ChooserElement from '@/components/content-forms/ChooserElement';
import {DEFAULT_FEATURE_SET} from '@/consts/features.consts';
import formElementIcons from '@/components/ui/form-element-icons';
import CrossIcon from '@/components/icons/CrossIcon';
import ChooserElement from '@/components/content-forms/ChooserElement';
import { DEFAULT_FEATURE_SET } from '@/consts/features.consts';
export default {
props: {
element: {},
index: {},
hideAssignment: {
type: Boolean,
default: false,
},
includeListOption: {
type: Boolean,
default: false,
},
export default {
props: {
element: {},
index: {},
hideAssignment: {
type: Boolean,
default: false,
},
inject: ['features'],
components: {
ChooserElement,
CrossIcon,
Checkbox,
...formElementIcons,
includeListOption: {
type: Boolean,
default: false,
},
},
data() {
const hasDefaultFeatures = this.features === DEFAULT_FEATURE_SET;
return {
convertToList: false,
chooserTypes: [
{
type: 'subtitle',
block: 'subtitle',
title: 'Untertitel',
icon: 'title-icon',
},
{
type: 'link',
block: 'link_block',
title: 'Link',
icon: 'link-icon',
},
{
type: 'video',
block: 'video_block',
},
{
type: 'image',
block: 'image_url_block',
title: 'Bild',
},
{
type: 'text',
block: 'text_block',
},
{
type: 'assignment',
block: 'assignment',
icon: 'speech-bubble-icon',
title: 'Aufgabe & Ergebnis',
show: !this.hideAssignment && hasDefaultFeatures
},
{
type: 'document',
block: 'document_block',
title: 'Dokument',
show: hasDefaultFeatures
},
inject: ['features'],
components: {
ChooserElement,
CrossIcon,
Checkbox,
...formElementIcons,
},
],
};
data() {
const hasDefaultFeatures = this.features === DEFAULT_FEATURE_SET;
return {
convertToList: false,
chooserTypes: [
{
type: 'subtitle',
block: 'subtitle',
title: 'Untertitel',
icon: 'title-icon',
},
{
type: 'link',
block: 'link_block',
title: 'Link',
icon: 'link-icon',
},
{
type: 'video',
block: 'video_block',
},
{
type: 'image',
block: 'image_url_block',
title: 'Bild',
},
{
type: 'text',
block: 'text_block',
},
{
type: 'assignment',
block: 'assignment',
icon: 'speech-bubble-icon',
title: 'Aufgabe & Ergebnis',
show: !this.hideAssignment && hasDefaultFeatures,
},
{
type: 'document',
block: 'document_block',
title: 'Dokument',
show: hasDefaultFeatures,
},
],
};
},
computed: {
filteredChooserTypes() {
return this.chooserTypes.filter((type) => !('show' in type) || type.show); // display element if `show` is not set or if `show` evaluates to true
},
computed: {
filteredChooserTypes() {
return this.chooserTypes.filter(type => !("show" in type) || type.show ); // display element if `show` is not set or if `show` evaluates to true
},
hasDefaultFeatures() {
return this.features === DEFAULT_FEATURE_SET;
}
hasDefaultFeatures() {
return this.features === DEFAULT_FEATURE_SET;
},
},
methods: {
changeType(type) {
this.$emit('change-type', {
type,
convertToList: this.convertToList,
});
},
remove() {
this.$emit('remove');
},
methods: {
changeType(type) {
this.$emit('change-type', {
type,
convertToList: this.convertToList,
});
},
};
remove() {
this.$emit('remove');
},
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
.content-block-element-chooser-widget {
display: -ms-grid;
@supports (display: grid) {
display: grid;
}
grid-template-columns: repeat(7, 1fr);
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-column-gap: 0;
font-family: $sans-serif-font-family;
text-align: center;
position: relative;
// grid position in wrapper element
grid-column: 1 / -1;
/*IE10+*/
& > :nth-child(1) {
-ms-grid-column: 1;
}
& > :nth-child(2) {
-ms-grid-column: 2;
}
& > :nth-child(3) {
-ms-grid-column: 3;
}
& > :nth-child(4) {
-ms-grid-column: 4;
}
& > :nth-child(5) {
-ms-grid-column: 5;
}
& > :nth-child(6) {
-ms-grid-column: 6;
}
&--no-assignment {
grid-template-columns: repeat(5, 1fr);
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
}
&__wrapper {
display: grid;
grid-template-columns: 180px 1fr 50px;
align-items: center;
row-gap: $small-spacing;
}
&__remove-button {
grid-column: 3;
}
&__heading {
@include heading-3;
margin-bottom: 0;
grid-column: 1;
grid-row: 1;
}
&__list-toggle {
margin-bottom: 0;
grid-column: 2;
grid-row: 1;
}
@import '~styles/helpers';
.content-block-element-chooser-widget {
display: -ms-grid;
@supports (display: grid) {
display: grid;
}
grid-template-columns: repeat(7, 1fr);
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-column-gap: 0;
font-family: $sans-serif-font-family;
text-align: center;
position: relative;
// grid position in wrapper element
grid-column: 1 / -1;
/*IE10+*/
& > :nth-child(1) {
-ms-grid-column: 1;
}
& > :nth-child(2) {
-ms-grid-column: 2;
}
& > :nth-child(3) {
-ms-grid-column: 3;
}
& > :nth-child(4) {
-ms-grid-column: 4;
}
& > :nth-child(5) {
-ms-grid-column: 5;
}
& > :nth-child(6) {
-ms-grid-column: 6;
}
&--no-assignment {
grid-template-columns: repeat(5, 1fr);
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
}
&__wrapper {
display: grid;
grid-template-columns: 180px 1fr 50px;
align-items: center;
row-gap: $small-spacing;
}
&__remove-button {
grid-column: 3;
}
&__heading {
@include heading-3;
margin-bottom: 0;
grid-column: 1;
grid-row: 1;
}
&__list-toggle {
margin-bottom: 0;
grid-column: 2;
grid-row: 1;
}
}
</style>

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

@ -1,132 +1,119 @@
<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';
const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
export default {
props: ['value', 'index'],
export default {
props: ['value', 'index'],
components: {
LoadingIcon,
DocumentIcon,
components: {
LoadingIcon,
DocumentIcon,
},
data() {
return {
loading: false,
};
},
computed: {
previewUrl() {
if (this.value && this.value.url) {
return this.value.url;
}
return null;
},
data() {
return {
loading: false,
};
previewLink() {
if (this.value && this.value.url) {
const parts = this.value.url.split('/');
return parts[parts.length - 1];
}
return '';
},
},
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 => {
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;
}
.document-form {
&__uploaded {
display: flex;
align-items: center;
}
&__link {
text-decoration: underline;
}
&__link {
text-decoration: underline;
}
&__spinner {
width: 100%;
&__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;
align-items: center;
width: 100%;
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;
}
align-items: center;
font-family: $sans-serif-font-family;
font-weight: $font-weight-regular;
text-decoration: underline;
}
}
}
</style>

221
client/src/components/content-forms/ImageForm.vue
View File

@ -1,149 +1,134 @@
<template>
<div class="image-form">
<div
class="image-form__error"
v-if="hadError"
>
Ups, das scheint kein Bild zu sein. Bitte versuche es nochmal mit einer anderen Datei, oder lade die Datei als <a
class="image-form__link"
@click="switchToDocument"
>Dokument</a> hoch.
<div class="image-form__error" v-if="hadError">
Ups, das scheint kein Bild zu sein. Bitte versuche es nochmal mit einer anderen Datei, oder lade die Datei als
<a class="image-form__link" @click="switchToDocument">Dokument</a> hoch.
</div>
<div
class="image-form__spinner"
v-if="loading"
>
<div class="image-form__spinner" v-if="loading">
<loading-icon class="image-form__loading-icon" />
</div>
<div
v-if="!value.url || hadError"
ref="uploadcare-panel"
/>
<div v-if="!value.url || hadError" ref="uploadcare-panel" />
<div v-if="value.url && !hadError">
<img
alt=""
:src="previewUrl"
@error="error"
>
<img alt="" :src="previewUrl" @error="error" />
</div>
</div>
</template>
<script>
import uploadcare from 'uploadcare-widget';
import LoadingIcon from '@/components/icons/LoadingIcon';
import uploadcare from 'uploadcare-widget';
import LoadingIcon from '@/components/icons/LoadingIcon';
export default {
props: ['value', 'index'],
components: {LoadingIcon},
data() {
return {
hadError: false,
uploadcarePanel: null,
url: '',
filename: '',
loading: false,
};
export default {
props: ['value', 'index'],
components: { LoadingIcon },
data() {
return {
hadError: false,
uploadcarePanel: null,
url: '',
filename: '',
loading: false,
};
},
computed: {
previewUrl: function () {
if (this.value && this.value.url) {
return this.value.url + '-/preview/200x200/';
}
return null;
},
computed: {
previewUrl: function () {
if (this.value && this.value.url) {
return this.value.url + '-/preview/200x200/';
}
return null;
},
},
mounted() {
this.mountUploadcare();
},
methods: {
error() {
this.hadError = true;
},
mounted() {
this.mountUploadcare();
},
methods: {
error() {
this.hadError = true;
setTimeout(() => {
this.mountUploadcare();
}, 0);
},
mountUploadcare() {
this.uploadcarePanel = uploadcare.openPanel(this.$refs['uploadcare-panel'], null, {
tabs: ['file'],
setTimeout(() => {
this.mountUploadcare();
}, 0);
},
mountUploadcare() {
this.uploadcarePanel = uploadcare.openPanel(this.$refs['uploadcare-panel'], null, {
tabs: ['file'],
});
this.uploadcarePanel.done((panelResult) => {
this.loading = true;
panelResult.done((fileInfo) => {
this.hadError = false;
this.loading = false;
this.url = fileInfo.cdnUrl;
this.filename = fileInfo.name;
this.$emit('change-url', fileInfo.cdnUrl, this.index);
});
this.uploadcarePanel.done(panelResult => {
this.loading = true;
panelResult.done(fileInfo => {
this.hadError = false;
this.loading = false;
this.url = fileInfo.cdnUrl;
this.filename = fileInfo.name;
this.$emit('change-url', fileInfo.cdnUrl, this.index);
});
// the api also provides these methods
// panelResult.progress(p => {});
// panelResult.fail(uploadResult => {});
});
},
switchToDocument() {
this.$emit('switch-to-document', this.index, {
url: `${this.url}${this.filename}`,
});
},
// the api also provides these methods
// panelResult.progress(p => {});
// panelResult.fail(uploadResult => {});
});
},
};
switchToDocument() {
this.$emit('switch-to-document', this.index, {
url: `${this.url}${this.filename}`,
});
},
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.image-form {
&__error {
@include regular-text;
margin-bottom: $medium-spacing;
line-height: 1.5;
}
.image-form {
&__error {
@include regular-text;
margin-bottom: $medium-spacing;
line-height: 1.5;
}
&__spinner {
width: 100%;
&__spinner {
width: 100%;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
}
&__loading-icon {
@include spin;
fill: $color-silver-dark;
}
&__link {
text-decoration: underline;
@include regular-text;
cursor: pointer;
}
&__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;
align-items: center;
width: 100%;
justify-content: center;
}
&__loading-icon {
@include spin;
fill: $color-silver-dark;
}
&__link {
align-items: center;
font-family: $sans-serif-font-family;
font-weight: $font-weight-regular;
text-decoration: underline;
@include regular-text;
cursor: pointer;
}
&__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>

28
client/src/components/content-forms/LinkForm.vue
View File

@ -5,34 +5,34 @@
placeholder="Name erfassen..."
class="link-form__text skillbox-input"
@input="$emit('change-text', $event.target.value, index)"
>
/>
<input
:value="value.url"
placeholder="URL einfügen..."
class="link-form__url skillbox-input"
@input="$emit('change-url', $event.target.value, index)"
>
/>
</div>
</template>
<script>
export default {
props: ['value', 'index']
};
export default {
props: ['value', 'index'],
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.link-form {
display: grid;
grid-auto-rows: auto;
grid-row-gap: 11px;
.link-form {
display: grid;
grid-auto-rows: auto;
grid-row-gap: 11px;
&__text,
&__url {
width: $modal-input-width;
}
&__text,
&__url {
width: $modal-input-width;
}
}
</style>

50
client/src/components/content-forms/SubtitleForm.vue
View File

@ -12,38 +12,38 @@
</template>
<script>
import InputWithLabel from '@/components/ui/InputWithLabel';
import InputWithLabel from '@/components/ui/InputWithLabel';
export default {
props: {
value: {
type: Object,
default: null,
validator(value) {
return Object.prototype.hasOwnProperty.call(value, 'text');
}
export default {
props: {
value: {
type: Object,
default: null,
validator(value) {
return Object.prototype.hasOwnProperty.call(value, 'text');
},
index: {
type: Number,
default: -1
}
},
components: {InputWithLabel},
index: {
type: Number,
default: -1,
},
},
components: { InputWithLabel },
computed: {
text() {
return this.value.text;
}
}
};
computed: {
text() {
return this.value.text;
},
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.subtitle-form {
&__input {
width: 100%;
}
.subtitle-form {
&__input {
width: 100%;
}
}
</style>

46
client/src/components/content-forms/TextForm.vue
View File

@ -11,35 +11,35 @@
</template>
<script>
export default {
props: {
value: {
type: Object,
default: null,
validator(value) {
return Object.prototype.hasOwnProperty.call(value, 'text');
}
export default {
props: {
value: {
type: Object,
default: null,
validator(value) {
return Object.prototype.hasOwnProperty.call(value, 'text');
},
index: {
type: Number,
default: -1
}
},
index: {
type: Number,
default: -1,
},
},
computed: {
text() {
return this.value.text ? this.value.text.replace(/<br(\/)?>/, '\n').replace(/(<([^>]+)>)/ig, '') : '';
}
}
};
computed: {
text() {
return this.value.text ? this.value.text.replace(/<br(\/)?>/, '\n').replace(/(<([^>]+)>)/gi, '') : '';
},
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.text-form {
&__input {
width: 100%;
}
.text-form {
&__input {
width: 100%;
}
}
</style>

69
client/src/components/content-forms/TextFormWithHelpText.vue
View File

@ -4,53 +4,50 @@
<span class="text-form-with-help-text__title">{{ title }}</span>
<helpful-tooltip :text="helpText" />
</h3>
<text-form
:value="v"
@change-text="$emit('change', $event)"
/>
<text-form :value="v" @change-text="$emit('change', $event)" />
</div>
</template>
<script>
import TextForm from '@/components/content-forms/TextForm';
import HelpfulTooltip from '@/components/HelpfulTooltip';
import TextForm from '@/components/content-forms/TextForm';
import HelpfulTooltip from '@/components/HelpfulTooltip';
export default {
props: ['title', 'value', 'helpText'],
export default {
props: ['title', 'value', 'helpText'],
components: {
TextForm,
HelpfulTooltip
components: {
TextForm,
HelpfulTooltip,
},
computed: {
v() {
return {
text: this.value,
};
},
computed: {
v() {
return {
text: this.value
};
}
}
};
},
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_functions.scss";
@import '@/styles/_variables.scss';
@import '@/styles/_functions.scss';
.text-form-with-help-text {
margin-bottom: 30px;
.text-form-with-help-text {
margin-bottom: 30px;
&__heading {
margin-bottom: 15px;
display: flex;
justify-items: center;
align-items: center;
}
&__title {
font-size: toRem(22px);
font-weight: 600;
margin-right: 8px;
}
&__heading {
margin-bottom: 15px;
display: flex;
justify-items: center;
align-items: center;
}
&__title {
font-size: toRem(22px);
font-weight: 600;
margin-right: 8px;
}
}
</style>

238
client/src/components/content-forms/TipTap.vue
View File

@ -1,146 +1,130 @@
<template>
<div class="tip-tap">
<editor-content
class="tip-tap__editor-wrapper"
:editor="editor"
/>
<editor-content class="tip-tap__editor-wrapper" :editor="editor" />
<toggle
:bordered="false"
:checked="isList"
label="Als Liste formatieren"
@input="toggleList"
/>
<toggle :bordered="false" :checked="isList" label="Als Liste formatieren" @input="toggleList" />
</div>
</template>
<script lang="ts">
import Vue, {PropType} from 'vue';
import {Editor, EditorContent} from "@tiptap/vue-2";
import Document from '@tiptap/extension-document';
import Paragraph from '@tiptap/extension-paragraph';
import Text from '@tiptap/extension-text';
import BulletList from '@tiptap/extension-bullet-list';
import ListItem from '@tiptap/extension-list-item';
import Toggle from "@/components/ui/Toggle.vue";
import Vue, { PropType } from 'vue';
import { Editor, EditorContent } from '@tiptap/vue-2';
import Document from '@tiptap/extension-document';
import Paragraph from '@tiptap/extension-paragraph';
import Text from '@tiptap/extension-text';
import BulletList from '@tiptap/extension-bullet-list';
import ListItem from '@tiptap/extension-list-item';
import Toggle from '@/components/ui/Toggle.vue';
interface Data {
editor: Editor | undefined;
}
interface Value {
text: string;
}
interface Data {
editor: Editor | undefined;
}
interface Value {
text: string;
}
export default Vue.extend({
props: {
value: {
type: Object as PropType<Value>,
validator(value: Value) {
return Object.prototype.hasOwnProperty.call(value, 'text');
export default Vue.extend({
props: {
value: {
type: Object as PropType<Value>,
validator(value: Value) {
return Object.prototype.hasOwnProperty.call(value, 'text');
},
},
},
components: {
Toggle,
EditorContent,
},
data(): Data {
return {
editor: undefined,
};
},
computed: {
isList(): boolean {
return this.editor?.isActive('bulletList') || false;
},
text(): string {
return this.value.text;
},
},
watch: {
value({ text }: Value) {
const editor = this.editor as Editor; // editor is always initialized on mount, cast it
const isSame = editor.getHTML() === text;
if (isSame) {
return;
}
editor.commands.setContent(text, false);
},
},
mounted() {
this.editor = new Editor({
editorProps: {
attributes: {
class: 'tip-tap__editor',
},
},
},
components: {
Toggle,
EditorContent
},
data(): Data {
return {
editor: undefined,
};
},
computed: {
isList(): boolean {
return this.editor?.isActive('bulletList') || false;
content: this.text,
extensions: [Document, Paragraph, Text, BulletList, ListItem],
onUpdate: () => {
const text = (this.editor as Editor).getHTML();
this.$emit('input', text);
this.$emit('change-text', text);
},
text(): string {
return this.value.text;
}
});
},
beforeDestroy() {
this.editor?.destroy();
},
methods: {
toggleList() {
const editor = this.editor as Editor;
editor.chain().selectAll().toggleBulletList().run();
},
watch: {
value({text}: Value) {
const editor = this.editor as Editor; // editor is always initialized on mount, cast it
const isSame = editor.getHTML() === text;
if (isSame) {
return;
}
editor.commands.setContent(text, false);
}
},
mounted() {
this.editor = new Editor({
editorProps: {
attributes: {
class: 'tip-tap__editor'
}
},
content: this.text,
extensions: [
Document,
Paragraph,
Text,
BulletList,
ListItem
],
onUpdate: () => {
const text=(this.editor as Editor).getHTML();
this.$emit('input', text);
this.$emit('change-text', text);
}
});
},
beforeDestroy() {
this.editor?.destroy();
},
methods: {
toggleList() {
const editor = this.editor as Editor;
editor.chain().selectAll().toggleBulletList().run();
},
}
});
},
});
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
.tip-tap {
&__editor-wrapper {
margin-bottom: $medium-spacing;
}
:deep(.tip-tap__editor) {
@include inputstyle;
flex-direction: column;
min-height: 150px;
}
:deep(ul) {
padding-left: $medium-spacing;
list-style: initial;
}
:deep(li) {
@include inputfont;
}
:deep(div) {
@include inputfont;
}
:deep(p) {
@include inputfont;
}
.tip-tap {
&__editor-wrapper {
margin-bottom: $medium-spacing;
}
:deep(.tip-tap__editor) {
@include inputstyle;
flex-direction: column;
min-height: 150px;
}
:deep(ul) {
padding-left: $medium-spacing;
list-style: initial;
}
:deep(li) {
@include inputfont;
}
:deep(div) {
@include inputfont;
}
:deep(p) {
@include inputfont;
}
}
</style>

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

@ -1,21 +1,11 @@
<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>
@ -24,7 +14,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">
@ -40,66 +30,64 @@
</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';
const InfoIcon = () => 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);
},
computed: {
isYoutube() {
return isYoutubeUrl(this.value.url);
},
isVimeo() {
return isVimeoUrl(this.value.url);
},
isSrf() {
return isSrfUrl(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-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-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;
}
}
</style>

Some files were not shown because too many files have changed in this diff Show More