DMED-119 - Spike: direktes Einbinden der edu-sharing-Suchumgebung in den "Lern-Store" der SVS

.gitignore

@@ -38,3 +38,6 @@ __snapshots__
 
 # IntelliJ
 .idea/
+
+# exclude the public/content directory
+public/content

config/docker/nginx.conf.template

@@ -2,7 +2,7 @@ server {
     listen 4000;
     server_name  localhost;
 
-    set $csp "default-src 'self'; base-uri 'self'; script-src 'nonce-$request_id' 'strict-dynamic' 'unsafe-inline' https:; object-src 'none'; font-src 'self' data:; img-src 'self' data:; style-src 'self' 'unsafe-inline'; frame-src 'self' ${H5P_FRAME_SRC_URLS} https://docs.dbildungscloud.de/";
+    set $csp "default-src 'self'; base-uri 'self'; script-src 'nonce-$request_id' 'strict-dynamic' 'unsafe-inline' https:; object-src 'none'; font-src 'self' data:; img-src 'self' data: ${EDU_SHARING_IMG_SRC_URLS}; style-src 'self' 'unsafe-inline'; frame-src 'self' ${H5P_FRAME_SRC_URLS} https://docs.dbildungscloud.de/; connect-src 'self' ${EDU_SHARING_CONNECT_SRC_URLS}";
 
     set $h5pcsp "default-src 'self'; base-uri 'self'; script-src ${H5P_SCRIPT_SRC_URLS} 'unsafe-inline' https:; object-src 'none'; font-src 'self' data:; img-src 'self' ${H5P_IMG_SRC_URLS} data:; style-src 'self' 'unsafe-inline'; frame-src 'self' ${H5P_FRAME_SRC_URLS}";
 

config/webpack/dev-server-config.js

@@ -1,11 +1,14 @@
 const { createProxyMiddleware } = require("http-proxy-middleware");
 const { isVueClient } = require("../../src/router/vue-client-route");
 const {
-	isServer,
+	isEduSharing,
+	isEduSharingRepo,
 	isFileStorage,
 	isH5pEditor,
+	isServer,
 } = require("../../src/router/server-route");
 const url = require("url");
+const path = require("path");
 
 const createLegacyClientProxy = () => {
 	const legacyClientProxy = createProxyMiddleware({
@@ -23,6 +26,14 @@ const createServerProxy = () => {
 	return serverProxy;
 };
 
+const createEduSharingProxy = () => {
+	const eduSharingProxy = createProxyMiddleware({
+		target: "http://localhost:4450",
+		changeOrigin: true,
+	});
+	return eduSharingProxy;
+};
+
 const createFileStorageProxy = () => {
 	const fileStorageProxy = createProxyMiddleware({
 		target: "http://localhost:4444",
@@ -39,15 +50,25 @@ const createH5pEditorProxy = () => {
 	return h5pEditorProxy;
 };
 
+const createEduSharingRepoProxy = () => {
+	const eduSharingRepoProxy = createProxyMiddleware({
+		target: "http://localhost:8100",
+		changeOrigin: true,
+	});
+	return eduSharingRepoProxy;
+};
+
 const createDevServerConfig = () => {
 	const legacyClientProxy = createLegacyClientProxy();
 	const serverProxy = createServerProxy();
+	const eduSharingProxy = createEduSharingProxy();
+	const eduSharingRepoProxy = createEduSharingRepoProxy();
 	const fileStorageProxy = createFileStorageProxy();
 	const h5pEditorProxy = createH5pEditorProxy();
 
 	const devServerConfig = {
-		port: 4000,
 		historyApiFallback: true,
+		port: 4000,
 
 		setupMiddlewares: (middlewares, devServer) => {
 			if (!devServer) {
@@ -63,6 +84,10 @@ const createDevServerConfig = () => {
 						fileStorageProxy(req, res, next);
 					} else if (isH5pEditor(path)) {
 						h5pEditorProxy(req, res, next);
+					} else if (isEduSharing(path)) {
+						eduSharingProxy(req, res, next);
+					} else if (isEduSharingRepo(path)) {
+						eduSharingRepoProxy(req, res, next);
 					} else if (isServer(path)) {
 						serverProxy(req, res, next);
 					} else if (isVueClient(path)) {
@@ -73,6 +98,20 @@ const createDevServerConfig = () => {
 				},
 			});
 
+			// Copy assets before the dev server starts
+			const __base = path.resolve(__dirname, "../..");
+
+			const fs = require("fs-extra");
+			const source = path.resolve(
+				__base,
+				"node_modules/ngx-edu-sharing-app-as-web-component"
+			);
+			const destination = path.resolve(
+				__base,
+				"public/content/vendor/edu-sharing"
+			);
+			fs.copySync(source, destination);
+
 			return middlewares;
 		},
 		allowedHosts: "all",

config/webpack/webpack.common.js

@@ -96,12 +96,20 @@ module.exports = {
 							"**/.DS_Store",
 							path.resolve(__base, "public/index.html"),
 							path.resolve(__base, "public/themes/**/*"),
+							path.resolve(__base, "public/content/**/*"),
 						],
 					},
 					info: {
 						minimized: true,
 					},
 				},
+				{
+					from: path.resolve(
+						__base,
+						"node_modules/ngx-edu-sharing-app-as-web-component"
+					),
+					to: path.resolve(__base, "dist/content/vendor/edu-sharing"),
+				},
 			],
 		}),
 
@@ -223,7 +231,8 @@ module.exports = {
 				loader: "vue-loader",
 				options: {
 					compilerOptions: {
-						isCustomElement: (tag) => tag.startsWith("h5p-"),
+						isCustomElement: (tag) =>
+							tag.startsWith("h5p-") || tag === "edu-sharing-app",
 					},
 				},
 			},

jest.config.js

@@ -72,7 +72,8 @@ const config = {
 	globals: {
 		"vue-jest": {
 			compilerOptions: {
-				isCustomElement: (tag) => tag.startsWith("h5p-"),
+				isCustomElement: (tag) =>
+					tag.startsWith("h5p-") || tag === "edu-sharing-app",
 			},
 		},
 	},

openapitools-for-edu-sharing.json

@@ -0,0 +1,4 @@
+{
+	"supportsES6": true,
+	"withInterfaces": true
+}

package.json

@@ -11,6 +11,7 @@
 		"test:unit:ci": "npm run test:unit -- --coverage --ci --maxWorkers=4",
 		"lint": "npx eslint 'src/**/*.{ts,js,vue}'",
 		"generate-client:server": "node generate-client.js -c openapitools-for-server.json",
+		"generate-client:edu-sharing": "node generate-client.js -u 'http://localhost:4450/api/v3/docs-json/' -p 'src/eduSharingApi/v3' -c 'openapitools-for-edu-sharing.json'",
 		"generate-client:filestorage": "node generate-client.js -u 'http://localhost:4444/api/v3/docs-json/' -p 'src/fileStorageApi/v3' -c 'openapitools-for-file-storage.json'",
 		"generate-client:h5p-editor": "node generate-client.js -u 'http://localhost:4448/api/v3/docs-json/' -p 'src/h5pEditorApi/v3' -c 'openapitools-for-h5p-editor.json'"
 	},
@@ -29,6 +30,7 @@
 		"kjua": "^0.9.0",
 		"maska": "^2.1.10",
 		"mobile-drag-drop": "^3.0.0-rc.0",
+		"ngx-edu-sharing-app-as-web-component": "^9.1.0",
 		"object-hash": "^3.0.0",
 		"pinia": "^2.1.7",
 		"socket.io-client": "^4.7.5",
@@ -75,6 +77,7 @@
 		"eslint-plugin-vue": "^9.23.0",
 		"eslint-webpack-plugin": "^4.1.0",
 		"fishery": "^2.2.2",
+		"fs-extra": "^11.2.0",
 		"html-webpack-plugin": "^5.6.0",
 		"http-proxy-middleware": "^2.0.6",
 		"jest": "^29.7.0",

src/components/edu-sharing/EduSharingWrapper.vue

@@ -0,0 +1,114 @@
+<template>
+	<main class="main-container">
+		<form class="search-form" :onsubmit="onSubmit">
+			<v-text-field
+				class="search-input"
+				density="comfortable"
+				flat
+				:hide-details="true"
+				name="searchString"
+				single-line
+				type="outlined"
+				placeholder="Search"
+				:prepend-inner-icon="mdiMagnify"
+				variant="solo"
+			/>
+		</form>
+		<edu-sharing-app />
+	</main>
+</template>
+
+<script>
+import { envConfigModule } from "@/store";
+import { mdiMagnify } from "@mdi/js";
+import { useEduSharingApi } from "../../composables/edu-sharing-api.composable";
+
+export default {
+	name: "EduSharingWrapper",
+	components: {},
+	data() {
+		return {
+			mdiMagnify,
+		};
+	},
+	mounted() {
+		// Provide the backend URL for edu-sharing to the web component.
+		window.__env = {
+			EDU_SHARING_API_URL:
+				envConfigModule.getEnv.EDU_SHARING__API_URL + "/rest",
+		};
+
+		const runtime = document.createElement("script");
+		runtime.setAttribute("src", "/content/vendor/edu-sharing/runtime.js");
+		runtime.setAttribute("type", "module");
+		document.body.appendChild(runtime);
+
+		const polyfills = document.createElement("script");
+		polyfills.setAttribute("src", "/content/vendor/edu-sharing/polyfills.js");
+		polyfills.setAttribute("type", "module");
+		document.body.appendChild(polyfills);
+
+		// <!-- Alternatively to loading `scripts.js`, provide your own versions of jQuery.  -->
+		const scripts = document.createElement("script");
+		scripts.setAttribute("src", "/content/vendor/edu-sharing/scripts.js");
+		scripts.setAttribute("defer", "");
+		document.body.appendChild(scripts);
+
+		const main = document.createElement("script");
+		main.setAttribute("src", "/content/vendor/edu-sharing/main.js");
+		main.setAttribute("type", "module");
+		document.body.appendChild(main);
+
+		const styles = document.createElement("link");
+		styles.setAttribute("href", "/content/vendor/edu-sharing/styles.css");
+		styles.setAttribute("rel", "stylesheet");
+		document.body.appendChild(styles);
+
+		// retrieve the valid session ticket
+		(async () => {
+			const { getTicketForUser } = useEduSharingApi();
+			const ticket = await getTicketForUser();
+			const eduSharingApp = document.getElementsByTagName("edu-sharing-app")[0];
+			eduSharingApp.setAttribute("ticket", ticket);
+		})();
+	},
+	methods: {
+		onSubmit(event) {
+			event.preventDefault();
+			const data = new FormData(event.target);
+			const searchString = data.get("searchString");
+			const eduSharingApp = document.getElementsByTagName("edu-sharing-app")[0];
+			eduSharingApp.setAttribute("search-string", searchString);
+		},
+	},
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.main-container {
+	min-height: 0;
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+.search-form {
+	height: 64px;
+	flex-shrink: 0;
+	padding: 10px 16px;
+	background: #f3f5f7;
+}
+.search-input {
+	width: 500px;
+	border-radius: 2px;
+	border: 1px solid var(--Secondary-v-secondary-base, #54616e);
+	background: var(--shades---v-white-base, #fff);
+}
+edu-sharing-app {
+	flex-grow: 1;
+}
+:deep(.v-field) {
+	height: 44px;
+}
+</style>