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

11
client/.babelrc
View File

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

60
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,32 +21,33 @@ module.exports = {
'plugin:@typescript-eslint/eslint-recommended',
],
// required to lint *.vue files
plugins: [
'vue',
'@typescript-eslint'
],
overrides: [{
files: ['*.ts','*.tsx'],
plugins: ['vue', '@typescript-eslint'],
overrides: [
{
files: ['*.ts', '*.tsx'],
rules: {
'no-unused-vars': 'off'
}
}],
'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': [
'vue/attributes-order': [
'error',
{
order: [
'OTHER_ATTR',
'DEFINITION',
'LIST_RENDERING',
@ -57,14 +58,20 @@ module.exports = {
'TWO_WAY_BINDING',
'OTHER_DIRECTIVES',
'EVENTS',
'CONTENT'
]
}],
"vue/multi-word-component-names": ["off", {
"ignores": []
}],
'vue/order-in-components': ['error', {
'order': [
'CONTENT',
],
},
],
'vue/multi-word-component-names': [
'off',
{
ignores: [],
},
],
'vue/order-in-components': [
'error',
{
order: [
'el',
'name',
'parent',
@ -82,8 +89,9 @@ module.exports = {
'LIFECYCLE_HOOKS',
'methods',
['template', 'render'],
'renderError'
]
}]
}
'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: {},
},
};

58
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({
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')
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(
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'
))
})
})
" 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,
},
};

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

@ -1,4 +1,4 @@
'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
@ -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 ^^^^
}
};

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

@ -1,4 +1,4 @@
'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
@ -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 ^^^^
}
};

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

@ -1,4 +1,4 @@
'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
@ -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 ^^^^
}
};

9
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"',
@ -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,
},
});

46
client/index.html
View File

@ -1,21 +1,21 @@
<!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">
<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';
@ -26,18 +26,16 @@
file: {
drag: 'Ziehen Sie ein Bild hier hinein',
button: 'Wählen Sie ein lokales Bild',
}
}
}
},
},
},
};
</script>
</head>
<body>
<div id="app">
<div class="center">
</head>
<body>
<div id="app">
<div class="center"></div>
</div>
</div>
<!-- built files will be auto injected -->
</body>
<!-- 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'],
};

19
client/mock.js
View File

@ -1,19 +1,16 @@
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 {
@ -21,9 +18,9 @@ const query = /* GraphQL */ `
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;
}

90
client/src/App.vue
View File

@ -1,49 +1,48 @@
<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 {
export default {
name: 'App',
components: {
@ -66,7 +65,7 @@
EditClassNameWizard,
EditTeamNameWizard,
EditSnapshotTitleWizard,
...modals
...modals,
},
computed: {
@ -81,29 +80,28 @@
return this.$modal.state.component;
},
},
};
};
</script>
<style lang="scss">
@import "~styles/main.scss";
@import "~styles/helpers";
@import '~styles/main.scss';
@import '~styles/helpers';
body {
body {
overflow-y: auto;
overflow-x: hidden;
height: 100vh;
}
}
.app {
.app {
/*overflow-y: auto;*/
min-height: 100vh;
/*for IE10+*/
display: flex;
flex-direction: column;
}
}
.no-scroll {
.no-scroll {
overflow-y: hidden;
}
}
</style>

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

@ -1,35 +1,30 @@
<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 {
export default {
props: {
where: {
type: Object,
validator(prop) {
return Object.prototype.hasOwnProperty.call(prop, 'after' )
|| Object.prototype.hasOwnProperty.call(prop, 'parent');
}
return (
Object.prototype.hasOwnProperty.call(prop, 'after') || Object.prototype.hasOwnProperty.call(prop, 'parent')
);
},
},
},
components: {
AddPointer
AddPointer,
},
computed: {
@ -44,14 +39,13 @@
},
slug() {
return this.$route.params.slug;
}
},
},
methods: {
addContent() {
if (this.isObjectiveGroup) {
this.$modal.open('new-objective-wizard', {parent: this.parent.id});
this.$modal.open('new-objective-wizard', { parent: this.parent.id });
} else {
let route;
if (this.after && this.after.id) {
@ -59,28 +53,28 @@
name: CREATE_CONTENT_BLOCK_AFTER_PAGE,
params: {
after: this.after.id,
slug: this.slug
}
slug: this.slug,
},
};
} else {
route = {
name: CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
params: {
parent: this.parent.id
}
parent: this.parent.id,
},
};
}
this.$router.push(route);
}
}
}
};
},
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.add-content {
.add-content {
display: none;
position: relative;
@include desktop {
@ -100,5 +94,5 @@
width: 40px;
fill: $color-silver-dark;
}
}
}
</style>

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

@ -1,28 +1,25 @@
<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 {
export default {
props: ['index'],
components: {
AddIcon
}
};
AddIcon,
},
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import '@/styles/_variables.scss';
.add-content-element {
.add-content-element {
display: flex;
justify-content: center;
border-bottom: 2px solid $color-silver-dark;
@ -37,5 +34,5 @@
background-color: $color-white;
border-radius: 50px;
}
}
}
</style>

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

@ -11,26 +11,27 @@
</template>
<script>
const AddIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/AddIcon.vue');
const AddIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/AddIcon.vue');
export default {
export default {
props: {
route: {
type: String,
default: null
default: null,
},
reverse: { // use reverse colors
reverse: {
// use reverse colors
type: Boolean,
default: false
default: false,
},
click: {
type: Function,
default: null
}
default: null,
},
},
components: {
AddIcon
AddIcon,
},
computed: {
@ -39,19 +40,21 @@
return this.route ? 'router-link' : 'a';
},
properties() {
return this.route ? {
return this.route
? {
to: this.route,
tag: 'div'
} : {};
tag: 'div',
}
: {};
},
};
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.add-widget {
.add-widget {
display: none;
align-items: center;
justify-content: center;
@ -74,5 +77,5 @@
&--reverse &__add {
fill: white;
}
}
}
</style>

88
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,36 +33,33 @@
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 {
export default {
props: ['assignment'],
components: {
StudentSubmission
StudentSubmission,
},
data() {
return {
me: {}
me: {},
};
},
computed: {
submissions() {
return this.assignment.submissions.filter(submission => {
return this.assignment.submissions.filter((submission) => {
return this.belongsToSchool(submission);
});
},
@ -101,21 +76,20 @@
if (this.currentFilter.id === '') {
return true;
}
return submission.student.schoolClasses.some(schoolClass => schoolClass .id === this.currentFilter.id);
}
return submission.student.schoolClasses.some((schoolClass) => schoolClass.id === this.currentFilter.id);
},
},
apollo: {
me: meQuery
}
};
me: meQuery,
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.assignment-with-submissions {
.assignment-with-submissions {
&__title {
font-size: toRem(35px);
}
@ -153,18 +127,16 @@
:deep(li) {
@include list-child;
}
}
}
.submissions {
.submissions {
width: 100%;
}
}
.submission-header {
.submission-header {
&__title {
color: $color-silver-dark;
font-family: $sans-serif-font-family;
}
}
}
</style>

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

@ -1,22 +1,18 @@
<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 {
export default {
props: {
title: {
type: String,
@ -40,13 +36,13 @@
to() {
switch (this.type) {
case 'topic':
return {name: 'topic', params: {topicSlug: this.slug}};
return { name: 'topic', params: { topicSlug: this.slug } };
case 'module':
return {name: MODULE_PAGE};
return { name: MODULE_PAGE };
case 'portfolio':
return {name: PROJECTS_PAGE};
return { name: PROJECTS_PAGE };
default:
return {name: ROOMS_PAGE};
return { name: ROOMS_PAGE };
}
},
fullTitle() {
@ -60,13 +56,13 @@
}
},
},
};
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
.back-link {
.back-link {
@include regular-text;
}
}
</style>

92
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,33 +42,33 @@
</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 {
export default {
props: {
chapter: {
type: Object,
default: () => ({})
default: () => ({}),
},
index: {
type: Number,
default: 0
default: 0,
},
editMode: {
type: Boolean,
default: false
}
default: false,
},
},
mixins: [me],
@ -112,11 +88,14 @@
if (this.editMode) {
return this.chapter.contentBlocks;
}
return this.chapter.contentBlocks.filter(contentBlock => !hidden({
return this.chapter.contentBlocks.filter(
(contentBlock) =>
!hidden({
block: contentBlock,
schoolClass: this.schoolClass,
type: CONTENT_TYPE,
}));
})
);
},
note() {
if (this.chapter && this.chapter.bookmark) {
@ -159,8 +138,8 @@
},
update: (store) => {
const query = CHAPTER_QUERY;
const variables = {id};
const {chapter} = store.readQuery({
const variables = { id };
const { chapter } = store.readQuery({
query,
variables,
});
@ -179,8 +158,8 @@
const data = {
chapter: {
...chapter,
bookmark
}
bookmark,
},
};
store.writeQuery({
@ -215,14 +194,13 @@
});
},
},
};
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.chapter {
.chapter {
position: relative;
&__bookmark-actions {
@ -238,5 +216,5 @@
margin-bottom: $large-spacing;
}
}
}
</style>

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

@ -1,62 +1,56 @@
<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 {
export default {
props: ['selectedColor'],
components: {
Tick
Tick,
},
data() {
return {
colors: [
{
name: 'yellow'
name: 'yellow',
},
{
name: 'blue'
name: 'blue',
},
{
name: 'red'
name: 'red',
},
{
name: 'green'
}
]
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 {
.color-chooser {
display: flex;
&__color-wrapper {
@ -81,12 +75,12 @@
display: flex;
justify-content: center;
@supports (display: grid) {
display: grid
display: grid;
}
justify-items: center;
align-items: center;
@include skillbox-colors;
}
}
}
</style>

151
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,36 +55,33 @@
/>
</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 {
export default {
name: 'ContentBlock',
props: {
contentBlock: {
@ -156,14 +123,15 @@
instrumentStyle() {
if (this.isInstrumentBlock) {
return {
backgroundColor: this.contentBlock.instrumentCategory.background
backgroundColor: this.contentBlock.instrumentCategory.background,
};
}
return {};
},
instrumentLabel() {
const contentType = this.contentBlock.type.toLowerCase();
if (contentType.startsWith('base')) { // all legacy instruments start with `base`
if (contentType.startsWith('base')) {
// all legacy instruments start with `base`
return instrumentCategory(contentType);
}
if (this.isInstrumentBlock) {
@ -175,7 +143,7 @@
instrumentLabelStyle() {
if (this.isInstrumentBlock) {
return {
color: this.contentBlock.instrumentCategory.foreground
color: this.contentBlock.instrumentCategory.foreground,
};
}
return {};
@ -206,7 +174,8 @@
// 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
if (index === this.contentBlock.contents.length - 1) {
// content is last element of contents array
let updatedContent = [...newContents, ...this.createContentListOrBlocks(contentList)];
return updatedContent;
}
@ -239,7 +208,7 @@
},
},
methods: {
duplicateContentBlock({id}) {
duplicateContentBlock({ id }) {
const parent = this.parent;
this.$apollo.mutate({
mutation: DUPLICATE_CONTENT_BLOCK_MUTATION,
@ -248,14 +217,21 @@
id,
},
},
update(store, {data: {duplicateContentBlock: {contentBlock}}}) {
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 { chapter } = store.readQuery({ query, variables });
const index = chapter.contentBlocks.findIndex((contentBlock) => contentBlock.id === id);
const contentBlocks = insertAtIndex(chapter.contentBlocks, index, contentBlock);
const data = {
chapter: {
@ -263,11 +239,10 @@
contentBlocks,
},
};
store.writeQuery({query, variables, data});
store.writeQuery({ query, variables, data });
}
},
});
},
editContentBlock(contentBlock) {
const route = {
@ -279,7 +254,9 @@
this.$router.push(route);
},
deleteContentBlock(contentBlock) {
this.$modal.open('confirm').then(() => {
this.$modal
.open('confirm')
.then(() => {
this.doDeleteContentBlock(contentBlock);
})
.catch();
@ -294,14 +271,21 @@
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 { chapter } = store.readQuery({ query, variables });
const index = chapter.contentBlocks.findIndex((contentBlock) => contentBlock.id === id);
const contentBlocks = removeAtIndex(chapter.contentBlocks, index);
const data = {
chapter: {
@ -309,26 +293,28 @@
contentBlocks,
},
};
store.writeQuery({query, variables, data});
store.writeQuery({ query, variables, data });
}
},
});
},
createContentListOrBlocks(contentList) {
return [{
return [
{
type: 'content_list',
contents: contentList,
id: contentList[0].id,
}];
},
];
},
},
};
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.content-block {
.content-block {
margin-bottom: $section-spacing;
position: relative;
@ -416,6 +402,5 @@
line-height: 1.5;
}
}
}
}
</style>

27
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 {
export default {
components: {
Modal
Modal,
},
computed: {
imageUrl() {
return this.$store.state.imageUrl;
}
}
};
},
},
};
</script>
<style scoped lang="scss">
.fullscreen-image {
.fullscreen-image {
&__image {
max-width: 100%;
width: 100%;
vertical-align: bottom;
}
}
}
</style>

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

@ -1,22 +1,21 @@
<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 {
export default {
components: {
Modal,
InfogramBlock,
GeniallyBlock
GeniallyBlock,
},
computed: {
@ -28,9 +27,9 @@
},
value() {
return {
id: this.id
};
}
}
id: this.id,
};
},
},
};
</script>

22
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,11 +14,11 @@
</template>
<script>
import Modal from '@/components/Modal';
import Modal from '@/components/Modal';
export default {
export default {
components: {
Modal
Modal,
},
computed: {
@ -31,18 +27,18 @@
},
src() {
return `https://player.vimeo.com/video/${this.vimeoId}`;
}
}
};
},
},
};
</script>
<style scoped lang="scss">
.fullscreen-video {
.fullscreen-video {
&__embed {
max-width: 100%;
width: 100%;
height: 95vh;
vertical-align: bottom;
}
}
}
</style>

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

@ -1,43 +1,30 @@
<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 {
export default {
mixins: [openSidebar, me],
components: {
@ -46,13 +33,13 @@
CurrentClass,
Hamburger,
},
};
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.header-bar {
.header-bar {
display: flex;
flex-direction: row;
@supports (display: grid) {
@ -118,9 +105,9 @@
-ms-grid-column: 1;
-ms-grid-column-span: 3;
}
}
}
.user-header {
.user-header {
display: flex;
&__current-class {
@ -135,5 +122,5 @@
display: flex;
}
}
}
}
</style>

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

@ -10,22 +10,22 @@
</template>
<script>
const InfoIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon');
const InfoIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon');
export default {
export default {
props: ['text'],
components: {
InfoIcon
}
};
InfoIcon,
},
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
@import '@/styles/_variables.scss';
@import '@/styles/_mixins.scss';
.helpful-tooltip {
.helpful-tooltip {
position: relative;
&__icon {
@ -65,11 +65,10 @@
height: 10px;
transform: rotate(-45deg) translateY(-50%);
}
}
&:hover &__tooltip {
visibility: visible;
}
}
}
</style>

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

@ -1,46 +1,40 @@
<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 {
export default {
props: {
loading: {
type: Boolean,
default: false
default: false,
},
disabled: {
type: Boolean,
default: false
default: false,
},
label: {
type: String,
default: ''
}
default: '',
},
},
components: {
LoadingIcon
}
};
LoadingIcon,
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.loading-button {
.loading-button {
height: 52px;
min-width: 100px;
display: inline-flex;
@ -53,5 +47,5 @@
@include spin;
fill: $color-brand;
}
}
}
</style>

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

@ -1,34 +1,34 @@
<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 {
export default {
methods: {
logout() {
this.$apollo.mutate({
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 {
.logout-widget {
display: flex;
align-items: center;
@ -36,5 +36,5 @@
@include default-link;
cursor: pointer;
}
}
}
</style>

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

@ -4,30 +4,24 @@
<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 {
export default {
mixins: [me, openSidebar],
components: {
@ -41,13 +35,13 @@
this.$store.dispatch('showMobileNavigation', true);
},
},
};
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.mobile-header {
.mobile-header {
justify-content: space-between;
align-items: center;
@ -64,5 +58,5 @@
height: 30px;
fill: $color-silver-dark;
}
}
}
</style>

49
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,40 +28,40 @@
</template>
<script>
const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
const Cross = () => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon');
export default {
export default {
props: {
hideHeader: {
type: Boolean,
default: false
default: false,
},
fullscreen: {
type: Boolean,
default: false
default: false,
},
small: {
type: Boolean,
default: false
}
default: false,
},
},
components: {
Cross
Cross,
},
methods: {
hideModal() {
this.$store.dispatch('hideModal');
}
}
};
},
},
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import '@/styles/_variables.scss';
.modal {
.modal {
align-self: center;
justify-self: center;
width: 700px;
@ -77,7 +75,7 @@
display: grid;
}
grid-template-rows: auto 1fr 65px;
grid-template-areas: "header" "body" "footer";
grid-template-areas: 'header' 'body' 'footer';
-ms-grid-rows: auto 1fr 65px;
position: relative;
@ -135,7 +133,7 @@
&--hide-header {
grid-template-rows: 1fr 65px;
grid-template-areas: "body" "footer";
grid-template-areas: 'body' 'footer';
#{$parent}__header {
display: none;
@ -144,7 +142,6 @@
#{$parent}__body {
padding: $default-padding;
}
}
&--fullscreen {
@ -152,7 +149,7 @@
height: auto;
grid-template-rows: 1fr;
-ms-grid-rows: 1fr;
grid-template-areas: "body";
grid-template-areas: 'body';
overflow: hidden;
#{$parent}__footer {
@ -184,5 +181,5 @@
min-height: 0;
}
}
}
}
</style>

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

@ -2,31 +2,26 @@
<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 {
.modal-input {
&__inputfield {
width: $modal-input-width;
}
@ -37,5 +32,5 @@
color: $color-accent-3-dark;
padding: 10px 0;
}
}
}
</style>

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

@ -1,45 +1,37 @@
<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 {
export default {
components: {
WidgetPopover,
Ellipses
Ellipses,
},
data() {
return {
showMenu: false
};
}
showMenu: false,
};
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.more-options {
.more-options {
display: flex;
justify-content: flex-end;
@ -63,5 +55,5 @@
min-width: 200px;
@include popover-defaults();
}
}
}
</style>

24
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 {
export default {
props: {
label: String,
checked: {
type: Boolean
type: Boolean,
},
item: Object
item: Object,
},
components: {
BaseInput
BaseInput,
},
methods: {
passOn() {
this.$emit('input', ...arguments);
}
}
};
},
},
};
</script>

38
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,21 +11,19 @@
>
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 {
export default {
data() {
return {
me: {
@ -58,9 +49,9 @@
}
}
}
`,
`,
fetchPolicy: 'cache-only',
update({me}) {
update({ me }) {
if (!me) {
return {
readOnly: false,
@ -79,13 +70,13 @@
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 {
.read-only-banner {
background-color: $color-brand-light;
display: flex;
justify-content: center;
@ -102,12 +93,11 @@
}
&__buttons {
}
&__link {
@include default-link;
margin-right: $small-spacing;
}
}
}
</style>

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

@ -1,26 +1,22 @@
<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 {
export default {
components: {
ArrowUp
ArrowUp,
},
data() {
return {
scroll: 0
scroll: 0,
};
},
@ -38,16 +34,16 @@
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 {
.scroll-up {
position: fixed;
right: $large-spacing;
bottom: $large-spacing;
@ -64,15 +60,14 @@
height: 50px;
fill: $color-brand;
}
}
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
{
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
}
</style>

51
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,40 +15,37 @@
<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 {
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 {
.section-block {
border-radius: $default-border-radius;
width: 100%;
overflow: hidden;
@ -69,10 +58,11 @@
&__title {
padding: 20px;
}
}
}
.block-title {
&__title, &__subtitle {
.block-title {
&__title,
&__subtitle {
color: $color-charcoal-dark;
font-family: $sans-serif-font-family;
}
@ -89,17 +79,17 @@
font-weight: $font-weight-regular;
min-height: 2rem;
}
}
}
.section-content {
.section-content {
padding: 15px 15px 15px;
&__subsection {
padding-bottom: 15px;
}
}
}
.subsection {
.subsection {
&__content {
font-family: $sans-serif-font-family;
font-weight: 600;
@ -108,6 +98,5 @@
color: $color-silver-dark;
}
}
}
}
</style>

45
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,15 +18,15 @@
</template>
<script>
import StudentSubmissionDocument from '@/components/StudentSubmissionDocument';
import StudentSubmissionDocument from '@/components/StudentSubmissionDocument';
export default {
export default {
props: ['submission'],
components: {
StudentSubmissionDocument
StudentSubmissionDocument,
},
filters: {
trimToLength: function(text, numberOfChars) {
trimToLength: function (text, numberOfChars) {
if (!text) {
return '';
}
@ -50,22 +38,23 @@
return text;
}
return `${text.substring(0, index)}…`;
}
},
},
computed: {
name() {
return this.submission && this.submission.student
? `${this.submission.student.firstName} ${this.submission.student.lastName}` : '';
? `${this.submission.student.firstName} ${this.submission.student.lastName}`
: '';
},
},
};
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.student-submission {
.student-submission {
@include table-row;
&__student-name {
@ -82,14 +71,14 @@
.entry-document {
margin-top: 1rem;
}
}
}
.entry {
.entry {
&__text {
color: $color-silver-dark;
&--final {
color: $color-charcoal-dark;
}
}
}
}
</style>

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

@ -1,20 +1,16 @@
<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 {
export default {
name: 'StudentSubmissionDocument',
props: ['document'],
components: { DocumentIcon },
@ -22,13 +18,13 @@
computed: {
filename() {
return filenameFromUrl(this.document);
}
},
};
},
};
</script>
<style scoped lang="scss">
.content {
.content {
display: flex;
&__icon {
@ -40,5 +36,5 @@
align-self: center;
padding-left: 5px;
}
}
}
</style>

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

@ -4,29 +4,26 @@
<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 {
export default {
props: ['firstName', 'lastName', 'avatarUrl', 'date'],
components: {
Avatar
}
};
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;
@ -52,5 +49,5 @@
color: $color-brand;
}
}
}
}
</style>

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

@ -1,45 +1,36 @@
<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 {
export default {
props: {
avatarUrl: {
type: String
}
type: String,
},
},
components: {
Avatar
Avatar,
},
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;
@ -75,5 +66,5 @@
color: $color-brand;
}
}
}
}
</style>

75
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,10 +67,7 @@
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"
@ -97,31 +81,31 @@
</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 {
export default {
props: {
isSidebar: {
default: false
}
default: false,
},
},
mixins: [sidebarMixin, meMixin],
components: {
TopicNavigation,
Logo
Logo,
},
computed: {
showPortfolio() {
return this.$flavor.showPortfolio;
}
},
},
methods: {
@ -133,16 +117,16 @@
},
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 {
.content-navigation {
display: flex;
align-items: center;
@ -151,7 +135,8 @@
@include navigation-link;
}
&__primary, &__secondary {
&__primary,
&__secondary {
display: none;
flex-direction: row;
@ -161,7 +146,7 @@
}
&__logo {
color: #17A887;
color: #17a887;
font-size: 36px;
font-weight: 800;
font-family: $sans-serif-font-family;
@ -196,7 +181,8 @@
&--sidebar {
flex-direction: column;
#{$parent}__primary, #{$parent}__secondary {
#{$parent}__primary,
#{$parent}__secondary {
display: flex;
flex-direction: column;
width: 100%;
@ -207,12 +193,11 @@
line-height: 2.5em;
padding: 0;
display: block;
margin-bottom: 0.5*$small-spacing;
margin-bottom: 0.5 * $small-spacing;
&:only-child {
margin-bottom: 0;
}
}
#{$parent}__item {
@ -233,5 +218,5 @@
/*}*/
}
}
}
}
</style>

55
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,36 +10,35 @@
</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 {
export default {
mixins: [sidebarMixin],
components: {
ContentNavigation,
Cross
Cross,
},
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 {
.navigation-sidebar {
position: fixed;
left: 0;
right: 0;
@ -67,10 +56,10 @@
grid-template-columns: 1fr 50px;
grid-template-rows: 50px max-content auto 100px;
grid-template-areas: "m m" "m m" "s s" "s s";
grid-template-areas: 'm m' 'm m' 's s' 's s';
&--with-subnavigation {
grid-template-areas: "m m" "m m" "sub sub" "s s";
grid-template-areas: 'm m' 'm m' 'sub sub' 's s';
}
height: 100vh;
@ -95,18 +84,20 @@
justify-self: center;
cursor: pointer;
}
}
}
.slide {
&-enter-active, &-leave-active {
.slide {
&-enter-active,
&-leave-active {
transition: left 0.2s;
}
&-enter, &-leave-to {
&-enter,
&-leave-to {
left: -100vw;
@include desktop {
left: -$desktop-width;
}
}
}
}
</style>

34
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 {
export default {
props: ['title'],
components: {
ChevronDown,
ChevronUp
ChevronUp,
},
data() {
return {
show: false
show: false,
};
},
watch: {
$route() {
this.show = false;
}
},
},
methods: {
close() {
this.show = false;
}
}
};
},
},
};
</script>

34
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 {
export default {
props: {
mobile: {
default: false
}
default: false,
},
},
mixins: [sidebarMixin],
data() {
return {
topics: []
topics: [],
};
},
methods: {
topicId(id) {
return atob(id);
}
},
},
apollo: {
topics: {
query: ALL_TOPICS_QUERY,
manual: true,
result({data, loading}) {
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-navigation {
&__topic {
}
}
}
</style>

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

@ -1,24 +1,22 @@
<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 {
.add-content-link {
display: inline-flex;
align-items: center;
justify-content: flex-start;
@ -35,5 +33,5 @@
@include large-link;
color: $color;
}
}
}
</style>

145
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,42 +98,39 @@
>
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 {
import ContentElement from '@/components/content-block-form/ContentElement.vue';
import {
insertAtIndex,
moveToIndex,
removeAtIndex,
replaceAtIndex,
swapElements
} from '@/graphql/immutable-operations';
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 {
// TODO: refactor this file, it's huuuuuge!
interface ContentBlockFormData {
localContentBlock: any;
}
}
export default Vue.extend({
export default Vue.extend({
props: {
title: {
type: String,
@ -168,12 +142,12 @@
},
features: {
type: String,
default: DEFAULT_FEATURE_SET
}
default: DEFAULT_FEATURE_SET,
},
},
provide(): object {
return {
features: this.features
features: this.features,
};
},
components: {
@ -186,13 +160,16 @@
},
data(): ContentBlockFormData {
return {
localContentBlock: Object.assign({}, {
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: {
@ -201,7 +178,7 @@
},
hasDefaultFeatures(): boolean {
return this.features === DEFAULT_FEATURE_SET;
}
},
},
methods: {
update(index: number, element: any, parent?: number) {
@ -243,13 +220,12 @@
},
remove(outer: number, inner?: number, askForConfirmation = true) {
if (askForConfirmation) {
this.$modal.open('confirm')
this.$modal
.open('confirm')
.then(() => {
this.executeRemoval(outer, inner);
})
.catch(() => {
});
.catch(() => {});
} else {
this.executeRemoval(outer, inner);
}
@ -258,7 +234,7 @@
if (inner === undefined) {
this.localContentBlock.contents = swapElements(this.localContentBlock.contents, outer, outer + distance);
} else {
const {contents} = this.localContentBlock;
const { contents } = this.localContentBlock;
const outerElement = contents[outer];
const newOuterElement = {
...outerElement,
@ -271,7 +247,7 @@
if (inner === undefined) {
this.localContentBlock.contents = moveToIndex(this.localContentBlock.contents, outer, 0);
} else {
const {contents} = this.localContentBlock;
const { contents } = this.localContentBlock;
const outerElement = contents[outer];
const newOuterElement = {
...outerElement,
@ -291,7 +267,7 @@
const maxIndex = this.localContentBlock.contents.length - 1;
this.localContentBlock.contents = moveToIndex(this.localContentBlock.contents, outer, maxIndex);
} else {
const {contents} = this.localContentBlock;
const { contents } = this.localContentBlock;
const outerElement = contents[outer];
const maxIndex = outerElement.contents.length - 1;
const newOuterElement = {
@ -329,14 +305,13 @@
this.$emit('save', contentBlock);
},
},
});
});
</script>
<style lang="scss">
@import '~styles/helpers';
// override parent page properties
.layout--no-scroll {
@import '~styles/helpers';
// override parent page properties
.layout--no-scroll {
padding-bottom: 20px;
height: 100vh;
overflow-y: hidden;
@ -348,13 +323,13 @@
padding-bottom: $small-spacing;
box-sizing: border-box;
}
}
}
</style>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
.content-block-form {
.content-block-form {
max-width: 100%;
display: grid;
grid-template-columns: 100vw;
@ -369,7 +344,6 @@
height: auto;
}
&__heading {
@include heading-1;
}
@ -406,7 +380,8 @@
display: flex;
flex-direction: column;
& > * { // we make an exception and use a wildcard here
& > * {
// we make an exception and use a wildcard here
width: 800px;
max-width: 100vw;
box-sizing: border-box;
@ -425,5 +400,5 @@
&__buttons {
width: 800px;
}
}
}
</style>

80
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,32 +39,38 @@
</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 {
export default {
props: {
element: {
type: Object,
@ -110,7 +111,7 @@
CmsDocumentBlock,
InfogramBlock,
ThinglinkBlock,
Assignment
Assignment,
},
computed: {
@ -216,12 +217,12 @@
case 'thinglink_block':
return {
component: 'thinglink-block',
title: 'Interaktive Grafik'
title: 'Interaktive Grafik',
};
case 'infogram_block':
return {
component: 'infogram-block',
title: 'Interaktive Grafik'
title: 'Interaktive Grafik',
};
}
return {
@ -253,7 +254,7 @@
changeAssignmentAssignment(value) {
this._updateProperty(value, 'assignment');
},
changeType({type, convertToList}, value) {
changeType({ type, convertToList }, value) {
let el = {
type: type,
value: Object.assign({}, value),
@ -295,9 +296,12 @@
case 'document_block':
el = {
...el,
value: Object.assign({
value: Object.assign(
{
url: '',
}, value),
},
value
),
};
break;
case 'image_url_block':
@ -325,13 +329,13 @@
this.changeType('document_block', value);
},
},
};
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
.content-element {
.content-element {
display: flex;
flex-direction: column;
@ -351,5 +355,5 @@
&__chooser {
grid-column: 1 / span 2;
}
}
}
</style>

44
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,23 +55,23 @@
</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 {
interface Data {
show: boolean;
}
}
export default Vue.extend({
export default Vue.extend({
props: {
actions: {
type: Object as () => ActionOptions
type: Object as () => ActionOptions,
},
},
components: {ButtonWithIconAndText, Ellipses, WidgetPopover},
components: { ButtonWithIconAndText, Ellipses, WidgetPopover },
data: (): Data => ({
show: false,
@ -111,22 +103,21 @@
emitAndClose(event: string) {
this.$emit(event);
this.close();
}
},
});
},
});
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
.content-element-actions {
.content-element-actions {
position: relative;
&__popover {
white-space: nowrap;
top: 100%;
transform: translateY($small-spacing);
}
&__section {
@ -141,6 +132,5 @@
&__button {
margin-bottom: $medium-spacing;
}
}
}
</style>

38
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,37 +22,36 @@
</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 {
export default {
props: {
title: {
type: String,
default: ''
default: '',
},
icon: {
type: String,
default: ''
default: '',
},
actions: {
type: Object as () => ActionOptions,
default: () => {}
}
default: () => {},
},
},
components: {
ContentElementActions,
...formElementIcons
}
};
...formElementIcons,
},
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
.content-form-section {
.content-form-section {
@include default-box-shadow;
border-radius: $default-border-radius;
padding: $small-spacing $medium-spacing;
@ -96,5 +90,5 @@
&__content {
grid-area: c;
}
}
}
</style>

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

@ -18,57 +18,40 @@
/>
</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 {
export default {
props: {
contentBlock: Object,
blockType: {
@ -96,12 +79,15 @@
data() {
return {
error: false,
localContentBlock: Object.assign({}, {
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: {},
};
},
@ -147,19 +133,17 @@
remove(index) {
this.localContentBlock.contents.splice(index, 1);
},
},
};
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.contents-form {
.contents-form {
/* top level does not exist, because of the modal */
&__element {
}
&__element-component {
@ -179,5 +163,5 @@
&__task {
margin: 15px 0 10px;
}
}
}
</style>

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

@ -1,30 +1,25 @@
<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 {
export default {
components: {
ContentsForm
ContentsForm,
},
data() {
return {
contentBlock: {}
contentBlock: {},
};
},
@ -38,28 +33,32 @@
this.$store.dispatch('hideModal');
},
saveContentBlock(contentBlock) {
this.$apollo.mutate({
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: [{
},
refetchQueries: [
{
query: MODULE_DETAILS_QUERY,
variables: {
slug: this.$route.params.slug
}
}]
}).then(() => {
slug: this.$route.params.slug,
},
},
],
})
.then(() => {
this.hideModal();
});
}
},
},
apollo: {
@ -67,11 +66,10 @@
return {
query: CONTENT_BLOCK_QUERY,
variables: {
id: store.state.currentNoteBlock
}
};
}
}
id: store.state.currentNoteBlock,
},
};
},
},
};
</script>

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

@ -9,26 +9,24 @@
</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 {
export default {
components: {
ContentsForm
ContentsForm,
},
data() {
return {
contentBlock: {
title: '',
contents: [
{}
]
contents: [{}],
},
saving: false
saving: false,
};
},
@ -39,30 +37,34 @@
},
saveContentBlock(contentBlock) {
this.saving = true;
this.$apollo.mutate({
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: [{
},
refetchQueries: [
{
query: MODULE_DETAILS_QUERY,
variables: {
slug: this.$route.params.slug
}
}]
}).then(() => {
slug: this.$route.params.slug,
},
},
],
})
.then(() => {
this.saving = false;
this.hideModal();
});
}
},
};
},
};
</script>

29
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
@ -46,10 +53,10 @@ export const transformInnerContents = (contents) => {
let ret = [];
for (let content of contents) {
if (Array.isArray(content.value)) {
const {value, ...contentWithoutValue} = content;
const { value, ...contentWithoutValue } = content;
ret.push({
...contentWithoutValue,
contents: value
contents: value,
});
} else {
ret.push(content);

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

@ -1,21 +1,14 @@
<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 {
export default {
props: {
value: Object,
solution: {
@ -27,13 +20,13 @@
components: {
DocumentIcon,
},
};
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.cms-document-block {
.cms-document-block {
display: grid;
grid-template-columns: 50px 1fr 50px;
align-items: center;
@ -44,7 +37,6 @@
height: 30px;
}
&__link {
text-decoration: underline;
}
@ -60,7 +52,6 @@
#{$parent}__icon {
fill: $color-silver-dark;
}
}
}
}
</style>

137
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,19 +139,18 @@ 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 {
.content-component {
position: relative;
&--bookmarked {
}
&--subtitle {
@ -165,5 +170,5 @@ export default {
&--document_block {
margin-bottom: $large-spacing;
}
}
}
</style>

19
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 {
export default {
//
props: {
items: {
type: Array,
default: () => ([])
}
default: () => [],
},
};
},
};
</script>

27
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 {
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')
ContentBlock: () => import('@/components/ContentBlock.vue'),
},
computed: {
contentBlocks() {
return this.contents.map(contentBlock => {
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
root: this.parent.id,
});
});
}
},
};
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
</style>

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

@ -1,26 +1,18 @@
<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 {
export default {
props: {
value: Object,
showTrashIcon: Boolean,
@ -32,21 +24,21 @@
},
computed: {
urlName: function() {
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 {
.document-block {
display: grid;
grid-template-columns: 50px 1fr 50px;
align-items: center;
@ -75,5 +67,5 @@
cursor: pointer;
justify-self: center;
}
}
}
</style>

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

@ -18,31 +18,31 @@
</template>
<script>
export default {
export default {
props: ['value'],
computed: {
src() {
return `https://view.genial.ly/${this.value.id}`;
}
},
},
methods: {
openFullscreen() {
this.$store.dispatch('showFullscreenInfographic', {
id: this.value.id,
type: 'genially-block'
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 {
// Styling and structure taken from original iframe
.genially-block {
width: 100%;
margin-bottom: $large-spacing;
@ -64,5 +64,5 @@
&__link {
cursor: pointer;
}
}
}
</style>

22
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 {
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 {
.image-block {
width: 100%;
max-width: 100%;
border-radius: 13px;
margin-bottom: $large-spacing;
}
}
</style>

20
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 {
export default {
props: ['value'],
methods: {
openFullscreen() {
this.$store.dispatch('showFullscreenImage', this.value.url);
}
}
};
},
},
};
</script>
<style scoped lang="scss">
.image-block {
.image-block {
width: 100%;
max-width: 100%;
border-radius: 13px;
margin-bottom: 30px;
}
}
</style>

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

@ -7,18 +7,18 @@
class="infogram-block__iframe"
scrolling="no"
frameborder="0"
style="border:none;"
style="border: none"
/>
</div>
</template>
<script>
export default {
export default {
props: ['value'],
data() {
return {
height: 1
height: 1,
};
},
@ -34,12 +34,12 @@
},
title() {
return this.value.title || 'Infografik';
}
},
},
mounted() {
// from https://developers.infogr.am/oembed/
window.addEventListener('message', event => {
window.addEventListener('message', (event) => {
try {
const data = JSON.parse(event.data);
if (data.context === 'iframe.resize' && this.parseId(data.src) === this.id) {
@ -60,17 +60,17 @@
openFullscreen() {
this.$store.dispatch('showFullscreenInfographic', {
id: this.value.id,
type: 'infogram-block'
type: 'infogram-block',
});
}
},
};
},
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import '@/styles/_variables.scss';
.infogram-block {
.infogram-block {
margin-bottom: $large-spacing;
&__link {
@ -81,5 +81,5 @@
&__iframe {
width: 100%;
}
}
}
</style>

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

@ -1,27 +1,21 @@
<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 {
export default {
props: ['value'],
mixins: [me],
components: {
BulbIcon
BulbIcon,
},
computed: {
@ -30,15 +24,15 @@
},
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 {
.instruction {
margin-bottom: 1rem;
display: flex;
align-items: center;
@ -52,5 +46,5 @@
&__link {
@include heading-3;
}
}
}
</style>

22
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,16 +15,16 @@
</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 {
// 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 {
.instrument-widget {
margin-bottom: $small-spacing;
&__description {
@ -35,7 +32,6 @@
}
&__button {
}
}
}
</style>

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

@ -1,43 +1,36 @@
<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 {
export default {
props: {
value: Object,
noMargin: {
default: false
}
default: false,
},
},
components: {
LinkIcon
LinkIcon,
},
computed: {
href() {
const url = this.value.url;
return url.startsWith('http') ? this.value.url : `http://${this.value.url}`;
}
}
};
},
},
};
</script>
<style scoped lang="scss">
.link-block {
.link-block {
margin-bottom: 30px;
display: grid;
grid-template-columns: 50px 1fr;
@ -55,5 +48,5 @@
&__link {
text-decoration: underline;
}
}
}
</style>

17
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 {
.module-slug {
margin-bottom: $large-spacing;
}
}
</style>

19
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 {
.section-title {
margin-bottom: 30px;
@include heading-line-height;
}
}
</style>

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

@ -1,46 +1,27 @@
<template>
<!-- eslint-disable vue/no-v-html -->
<div
class="solution"
data-cy="solution"
>
<a
class="solution__toggle"
data-cy="show-solution"
@click="toggle"
<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 {
export default {
props: ['value'],
components: {CmsDocumentBlock},
components: { CmsDocumentBlock },
data() {
return {
@ -59,13 +40,13 @@
this.visible = !this.visible;
},
},
};
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.solution {
.solution {
display: grid;
grid-auto-rows: auto;
grid-row-gap: 15px;
@ -100,15 +81,15 @@
}
}
}
}
}
.fade-enter-active,
.fade-leave-active {
transition: opacity .3s;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-active {
.fade-enter,
.fade-leave-active {
opacity: 0;
}
}
</style>

22
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 {
export default {
props: ['value'],
computed: {
sanitizedText() {
return sanitize(this.value.text);
}
}
};
},
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.subtitle {
.subtitle {
padding-top: 1px;
margin-bottom: $medium-spacing;
margin-bottom: calc(#{$large-spacing} - 0.1rem);
@include heading-line-height;
}
}
</style>

20
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 {
export default {
props: ['value'],
};
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import '@/styles/_variables.scss';
.survey-block {
.survey-block {
margin-bottom: $large-spacing;
}
}
</style>

17
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 {
.task {
margin-bottom: 30px;
align-items: start;
background-color: $color-brand-light;
border-radius: $default-border-radius;
}
}
</style>

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

@ -1,29 +1,25 @@
<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 {
export default {
props: ['value'],
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 {
.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;
@ -35,5 +31,5 @@
:deep(li) {
@include list-child;
}
}
}
</style>

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

@ -20,31 +20,31 @@
</template>
<script>
export default {
export default {
props: ['value'],
computed: {
src() {
return `https://www.thinglink.com/card/${this.value.id}`;
}
},
},
methods: {
openFullscreen() {
this.$store.dispatch('showFullscreenInfographic', {
id: this.value.id,
type: 'thinglink-block'
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 {
// Styling and structure taken from original iframe
.thinglink-block {
width: 100%;
margin-bottom: $large-spacing;
@ -66,5 +66,5 @@
&__link {
cursor: pointer;
}
}
}
</style>

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

@ -1,33 +1,24 @@
<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 {
export default {
props: ['value'],
components: {
YoutubeEmbed,
VimeoEmbed,
SrfEmbed
SrfEmbed,
},
computed: {
@ -39,13 +30,13 @@
},
isSrf() {
return isSrfUrl(this.value.url);
}
}
};
},
},
};
</script>
<style scoped lang="scss">
.video-block {
.video-block {
margin-bottom: 30px;
}
}
</style>

115
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,45 +23,36 @@
@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 {
export default {
props: ['value'],
components: {
@ -126,7 +107,8 @@
...mapActions(['scrollToAssignmentReady']),
_save: debounce(function (submission) {
this.saving++;
this.$apollo.mutate({
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,16 +137,17 @@
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;
@ -221,7 +211,8 @@
spellcheck() {
let self = this;
this.spellcheckLoading = true;
this.$apollo.mutate({
this.$apollo
.mutate({
mutation: SPELL_CHECK_MUTATION,
variables: {
input: {
@ -229,10 +220,18 @@
text: this.assignment.submission.text,
},
},
update(store, {data: {spellCheck: {results}}}) {
update(
store,
{
data: {
spellCheck: { results },
},
}
) {
self.corrections = results;
},
}).then(() => {
})
.then(() => {
this.spellcheckLoading = false;
});
},
@ -259,15 +258,15 @@
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 {
.assignment {
margin-bottom: 3rem;
position: relative;
@ -277,8 +276,8 @@
}
&__main-text {
:deep(ul){
@include list-parent
:deep(ul) {
@include list-parent;
}
:deep(li) {
@ -312,7 +311,5 @@
&__feedback {
@include regular-text;
}
}
}
</style>

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

@ -1,46 +1,37 @@
<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 {
export default {
props: {
userInput: {
type: Object,
default: () => ({})
default: () => ({}),
},
showReopen: {
type: Boolean,
default: true
default: true,
},
sharedMsg: {
type: String,
default: ''
}
default: '',
},
},
components: {
@ -51,15 +42,15 @@
computed: {
text() {
return newLineToParagraph(this.userInput.text);
}
}
};
},
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.final-submission {
.final-submission {
&__text {
background-color: $color-white;
@include input-box-shadow;
@ -104,5 +95,5 @@
cursor: pointer;
color: $color-charcoal-light;
}
}
}
</style>

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

@ -1,15 +1,12 @@
<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 {
export default {
props: ['corrections', 'text'],
computed: {
@ -20,24 +17,27 @@
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 => {
.sort((e1, e2) => e1.offset + e1.sentenceOffset - (e2.offset + e2.sentenceOffset))
.forEach((current) => {
let realOffset = current.offset + current.sentenceOffset;
parts.push({
parts.push(
{
correct: true,
text: this.text.substring(index, realOffset)
}, {
text: this.text.substring(index, realOffset),
},
{
correct: false,
text: this.text.substring(realOffset, realOffset + current.length)
});
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)
text: this.text.substring(index, this.text.length + 1),
});
return parts
.filter(part => part.text.length)
.filter((part) => part.text.length)
.reduce((previous, part) => {
if (part.correct) {
return `${previous}${part.text}`;
@ -45,19 +45,19 @@
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 {
.spellcheck {
@include regular-text;
&__correction {
background: yellow;
}
}
}
</style>

30
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,12 +41,11 @@
</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 {
export default {
props: {
userInput: Object,
saved: Boolean,
@ -115,14 +107,13 @@
this.$emit('changeDocumentUrl', documentUrl);
},
},
};
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
.submission-form-container {
.submission-form-container {
@include form-with-border;
margin-bottom: $medium-spacing;
@ -157,6 +148,5 @@
text-align: center;
display: inline-block;
}
}
}
</style>

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

@ -4,53 +4,47 @@
: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 {
export default {
props: {
inputText: String,
saved: Boolean,
readonly: Boolean,
placeholder: {
type: String,
default: 'Ergebnis erfassen'
}
default: 'Ergebnis erfassen',
},
},
components: {
TickCircleIcon,
LoadingIcon
}
};
LoadingIcon,
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.submission-form {
.submission-form {
display: flex;
flex-direction: row;
justify-content: space-between;
@ -73,5 +67,5 @@
&__saving-icon {
@include spin;
}
}
}
</style>

18
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,20 +20,20 @@
</template>
<script>
const InfoIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon');
const InfoIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon');
export default {
export default {
props: ['value', 'index'],
components: {
InfoIcon
}
};
InfoIcon,
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.assignment-form {
.assignment-form {
display: grid;
grid-auto-rows: auto;
grid-row-gap: 13px;
@ -58,5 +58,5 @@
&__help-description {
}
}
}
</style>

26
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,9 +8,9 @@
</template>
<script>
import formElementIcons from '@/components/ui/form-element-icons';
import formElementIcons from '@/components/ui/form-element-icons';
export default {
export default {
props: {
type: {
type: String,
@ -32,7 +25,7 @@
title: {
type: String,
default() {
return this.type.replace(/^\w/, c => c.toUpperCase());
return this.type.replace(/^\w/, (c) => c.toUpperCase());
},
},
},
@ -47,13 +40,13 @@
cy: `choose-${this.type}-widget`,
};
},
};
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
@import '~styles/helpers';
.chooser-element {
.chooser-element {
cursor: pointer;
border: 1px solid $color-silver;
border-radius: 4px;
@ -71,6 +64,5 @@
height: 40px;
align-self: end;
}
}
}
</style>

53
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,15 +31,14 @@
</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 {
export default {
props: {
element: {},
index: {},
@ -107,27 +96,25 @@
block: 'assignment',
icon: 'speech-bubble-icon',
title: 'Aufgabe & Ergebnis',
show: !this.hideAssignment && hasDefaultFeatures
show: !this.hideAssignment && hasDefaultFeatures,
},
{
type: 'document',
block: 'document_block',
title: 'Dokument',
show: hasDefaultFeatures
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
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;
}
},
},
methods: {
@ -141,13 +128,13 @@
this.$emit('remove');
},
},
};
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.content-block-element-chooser-widget {
.content-block-element-chooser-widget {
display: -ms-grid;
@supports (display: grid) {
@ -216,7 +203,5 @@
grid-column: 2;
grid-row: 1;
}
}
}
</style>

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

@ -1,39 +1,23 @@
<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 {
export default {
props: ['value', 'index'],
components: {
@ -64,21 +48,24 @@
},
mounted() {
uploadcare(this, url => {
uploadcare(
this,
(url) => {
this.$emit('change-url', url, this.index);
this.loading = false;
}, () => {
this.loading = true;
});
},
};
() => {
this.loading = true;
}
);
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.document-form {
.document-form {
&__uploaded {
display: flex;
align-items: center;
@ -128,5 +115,5 @@
text-decoration: underline;
}
}
}
}
</style>

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

@ -1,43 +1,28 @@
<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 {
export default {
props: ['value', 'index'],
components: {LoadingIcon},
components: { LoadingIcon },
data() {
return {
hadError: false,
@ -71,9 +56,9 @@
tabs: ['file'],
});
this.uploadcarePanel.done(panelResult => {
this.uploadcarePanel.done((panelResult) => {
this.loading = true;
panelResult.done(fileInfo => {
panelResult.done((fileInfo) => {
this.hadError = false;
this.loading = false;
this.url = fileInfo.cdnUrl;
@ -92,13 +77,13 @@
});
},
},
};
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.image-form {
.image-form {
&__error {
@include regular-text;
margin-bottom: $medium-spacing;
@ -145,5 +130,5 @@
text-decoration: underline;
}
}
}
}
</style>

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

@ -5,27 +5,27 @@
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 {
.link-form {
display: grid;
grid-auto-rows: auto;
grid-row-gap: 11px;
@ -34,5 +34,5 @@
&__url {
width: $modal-input-width;
}
}
}
</style>

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

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

@ -11,35 +11,35 @@
</template>
<script>
export default {
export default {
props: {
value: {
type: Object,
default: null,
validator(value) {
return Object.prototype.hasOwnProperty.call(value, 'text');
}
},
},
index: {
type: Number,
default: -1
}
default: -1,
},
},
computed: {
text() {
return this.value.text ? this.value.text.replace(/<br(\/)?>/, '\n').replace(/(<([^>]+)>)/ig, '') : '';
}
}
};
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 {
.text-form {
&__input {
width: 100%;
}
}
}
</style>

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

@ -4,40 +4,37 @@
<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 {
export default {
props: ['title', 'value', 'helpText'],
components: {
TextForm,
HelpfulTooltip
HelpfulTooltip,
},
computed: {
v() {
return {
text: this.value
};
}
}
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 {
.text-form-with-help-text {
margin-bottom: 30px;
&__heading {
@ -52,5 +49,5 @@
font-weight: 600;
margin-right: 8px;
}
}
}
</style>

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

@ -1,37 +1,29 @@
<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 {
interface Data {
editor: Editor | undefined;
}
interface Value {
}
interface Value {
text: string;
}
}
export default Vue.extend({
export default Vue.extend({
props: {
value: {
type: Object as PropType<Value>,
@ -43,7 +35,7 @@
components: {
Toggle,
EditorContent
EditorContent,
},
data(): Data {
@ -58,11 +50,11 @@
},
text(): string {
return this.value.text;
}
},
},
watch: {
value({text}: Value) {
value({ text }: Value) {
const editor = this.editor as Editor; // editor is always initialized on mount, cast it
const isSame = editor.getHTML() === text;
@ -71,29 +63,23 @@
}
editor.commands.setContent(text, false);
}
},
},
mounted() {
this.editor = new Editor({
editorProps: {
attributes: {
class: 'tip-tap__editor'
}
class: 'tip-tap__editor',
},
},
content: this.text,
extensions: [
Document,
Paragraph,
Text,
BulletList,
ListItem
],
extensions: [Document, Paragraph, Text, BulletList, ListItem],
onUpdate: () => {
const text=(this.editor as Editor).getHTML();
const text = (this.editor as Editor).getHTML();
this.$emit('input', text);
this.$emit('change-text', text);
}
},
});
},
@ -106,16 +92,14 @@
const editor = this.editor as Editor;
editor.chain().selectAll().toggleBulletList().run();
},
}
});
},
});
</script>
<style scoped lang="scss">
@import '~styles/helpers';
.tip-tap {
@import '~styles/helpers';
.tip-tap {
&__editor-wrapper {
margin-bottom: $medium-spacing;
}
@ -142,5 +126,5 @@
:deep(p) {
@include inputfont;
}
}
}
</style>

52
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,20 +30,20 @@
</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 {
export default {
props: ['value', 'index'],
components: {
InfoIcon,
YoutubeEmbed,
VimeoEmbed,
SrfEmbed
SrfEmbed,
},
computed: {
@ -65,16 +55,16 @@
},
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 {
.video-form {
display: grid;
grid-auto-rows: auto;
grid-template-columns: 40px 1fr;
@ -83,11 +73,9 @@
align-items: center;
&__help-icon {
}
&__help-description {
}
&__platform-link {
@ -99,7 +87,7 @@
&__video-link {
grid-column: 1 / span 2;
width: $modal-input-width
}
width: $modal-input-width;
}
}
</style>

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