CELDEV-1304 - Filebase-Replacement: implement new MediaLib based on VueFinder

celements-admin-frontend/.env.dev

@@ -0,0 +1,16 @@
+VITE_ENABLE_LOCAL_DEVELOPMENT=true
+
+# url settings
+VITE_APP_BASE_URL=http://localhost:5173
+VITE_PROGON_API_URL=https://alumni.progdev.sneakapeek.ch
+VITE_CEL_API_URL=http://alumni.localhost:2080
+
+# keycloak configuration
+VITE_KEYCLOAK_BASE_URL=https://iam.demospace.ch
+VITE_KEYCLOAK_REALM=alu
+VITE_KEYCLOAK_CLIENT_ID=aludev
+
+# progon access
+VITE_PROGON_USER=
+VITE_PROGON_TOKEN=
+

celements-admin-frontend/.env.int

@@ -0,0 +1,19 @@
+VITE_ENABLE_LOCAL_DEVELOPMENT=false
+
+# url settings
+VITE_APP_BASE_URL=https://alumni.appint.demospace.ch
+VITE_PROGON_API_URL=https://alumni.progint.demospace.ch
+#VITE_PROGON_API_URL=https://alumni.progdev.sneakapeek.ch
+#VITE_CEL_API_URL=https://alumni.celint.demospace.ch
+VITE_CEL_API_URL=https://alumni.celdev.sneakapeek.ch
+
+# keycloak configuration
+VITE_KEYCLOAK_BASE_URL=https://iam.demospace.ch
+
+# progon access
+VITE_PROGON_USER=
+VITE_PROGON_TOKEN=
+
+# cel access
+VITE_CEL_USER=
+VITE_CEL_TOKEN=

celements-admin-frontend/.env.prod

@@ -0,0 +1,19 @@
+VITE_ENABLE_LOCAL_DEVELOPMENT=false
+
+# url settings
+VITE_APP_BASE_URL=https://www.alumni-helvetia.ch
+VITE_PROGON_API_URL=https://alumni.prog.online
+VITE_CEL_API_URL=https://alumni.celhosting.ch
+
+# keycloak configuration
+VITE_KEYCLOAK_BASE_URL=https://idp.alumni-helvetia.ch
+VITE_KEYCLOAK_REALM=aluprod
+VITE_KEYCLOAK_CLIENT_ID=aluweb
+
+# progon access
+VITE_PROGON_USER=
+VITE_PROGON_TOKEN=
+
+# cel access
+VITE_CEL_USER=
+VITE_CEL_TOKEN=

celements-admin-frontend/.prettierignore

@@ -0,0 +1,4 @@
+dist
+.github
+src/__generated__/
+src/presets/

celements-admin-frontend/.prettierrc.json

@@ -0,0 +1,11 @@
+
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "bracketSameLine": false,
+  "printWidth": 100
+}

celements-admin-frontend/Caddyfile

@@ -0,0 +1,5 @@
+:80 {
+  root * /srv
+  file_server
+  try_files {path} /index.html
+}

celements-admin-frontend/Dockerfile

@@ -0,0 +1,36 @@
+#    ____                          _____     _                           _                     _           _        __          __  _                         
+#   / __ \                        / ____|   | |                         | |           /\      | |         (_)       \ \        / / | |      /\                
+#  | |  | |_ __   ___ _ __ ______| |     ___| | ___ _ __ ___   ___ _ __ | |_ ___     /  \   __| |_ __ ___  _ _ __    \ \  /\  / /__| |__   /  \   _ __  _ __  
+#  | |  | | '_ \ / _ \ '_ \______| |    / _ \ |/ _ \ '_ ` _ \ / _ \ '_ \| __/ __|   / /\ \ / _` | '_ ` _ \| | '_ \    \ \/  \/ / _ \ '_ \ / /\ \ | '_ \| '_ \ 
+#  | |__| | |_) |  __/ | | |     | |___|  __/ |  __/ | | | | |  __/ | | | |_\__ \  / ____ \ (_| | | | | | | | | | |    \  /\  /  __/ |_) / ____ \| |_) | |_) |
+#   \____/| .__/ \___|_| |_|      \_____\___|_|\___|_| |_| |_|\___|_| |_|\__|___/ /_/    \_\__,_|_| |_| |_|_|_| |_|     \/  \/ \___|_.__/_/    \_\ .__/| .__/ 
+#         | |                                                                                                                                    | |   | |    
+#         |_|                                                                                                                                    |_|   |_|    #
+#
+# Open-Celements Admin WebApp Vue Frontend
+
+## Stage: build
+FROM node:lts AS build
+
+WORKDIR /app
+
+# Layer: dependencies
+COPY package*.json ./
+RUN npm install --legacy-peer-deps
+
+# Layer: package
+COPY . .
+RUN mv .env.${PROFILE_ACTIVE} .env; \
+  npm run build
+
+## Stage: execute
+FROM caddy:2 AS execute
+
+WORKDIR /srv
+
+COPY --from=builder /app/dist /srv
+COPY Caddyfile /etc/caddy/Caddyfile
+RUN caddy fmt /etc/caddy/Caddyfile --overwrite
+
+EXPOSE 80
+CMD ["caddy", "run", "--config", "/etc/caddy/Caddyfile"]

celements-admin-frontend/README.md

@@ -0,0 +1,45 @@
+# Open-Celements Admin WebApp Vue Frontend
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Run Unit Tests with [Vitest](https://vitest.dev/)
+
+```sh
+npm run test:unit
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```

celements-admin-frontend/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

celements-admin-frontend/eslint.config.js

@@ -0,0 +1,42 @@
+import pluginVue from 'eslint-plugin-vue'
+import vueTsEslintConfig from '@vue/eslint-config-typescript'
+import pluginVitest from '@vitest/eslint-plugin'
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+
+export default [
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{ts,mts,tsx,vue}'],
+    languageOptions: {
+      parser: 'vue-eslint-parser',
+      parserOptions: {
+        ecmaVersion: 2020,
+        parser: '@typescript-eslint/parser',
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      '@typescript-eslint/no-unused-vars': 'warn',
+      "vue/singleline-html-element-content-newline": "off",
+      "vue/multiline-html-element-content-newline": "off",
+      "vue/no-reserved-component-names": "warn",
+      "vue/multi-word-component-names": "warn",
+      "vue/no-side-effects-in-computed-properties": "warn",
+      "vue/no-v-text-v-html-on-component": "warn"
+    },
+  },
+
+  {
+    name: 'app/files-to-ignore',
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**', '**/assets/', '**/presets/'],
+  },
+
+  ...pluginVue.configs['flat/recommended'],
+  ...vueTsEslintConfig(),
+
+  {
+    ...pluginVitest.configs.recommended,
+    files: ['test/*'],
+  },
+  skipFormatting,
+]

celements-admin-frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Celements Admin</title>
+  </head>
+  <body class="bg-grau-20">
+    <div id="app" class="3xl:mx-auto max-w-screen-3xl"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

celements-admin-frontend/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "open-celements-admin",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "concurrently \"vite\" \"npm:type-check-watch\" \"npm:test-watch\"",
+    "build": "npm run type-check && npm run test && vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test-watch": "vitest",
+    "type-check": "vue-tsc --build --force",
+    "type-check-watch": "vue-tsc --build --force --watch --preserveWatchOutput",
+    "lint": "eslint .",
+    "lint-fix": "eslint . --fix",
+    "format": "prettier --check src test",
+    "format-fix": "prettier --write src test",
+    "pre-commit": "npm run type-check && npm run format && npm run lint"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/vue-fontawesome": "^3.2.0",
+    "@primeuix/themes": "^2.0.3",
+    "@vueuse/core": "^14.2.1",
+    "consola": "^3.4.2",
+    "findandreplacedomtext": "^0.4.6",
+    "lodash": "^4.17.23",
+    "luxon": "^3.7.2",
+    "oidc-client-ts": "^3.5.0",
+    "pinia": "^3.0.4",
+    "primevue": "^4.5.4",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss-primeui": "^0.6.1",
+    "vue": "^3.5.30",
+    "vue-dompurify-html": "^5.3.0",
+    "vue-i18n": "^11.3.0",
+    "vue-matomo": "^4.2.0",
+    "vue-router": "^5.0.4",
+    "vue3-spinners": "^1.3.3",
+    "vuefinder": "^4.1.1",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.2.2",
+    "@tsconfig/node20": "^20.1.9",
+    "@types/jsdom": "^28.0.1",
+    "@types/lodash": "^4.17.24",
+    "@types/luxon": "^3.7.1",
+    "@types/node": "^25.5.0",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vitest/eslint-plugin": "1.6.12",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.7.0",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.9.0",
+    "autoprefixer": "^10.4.27",
+    "concurrently": "^9.2.1",
+    "eslint": "^10.1.0",
+    "eslint-plugin-vue": "^10.8.0",
+    "jsdom": "^29.0.1",
+    "npm-run-all2": "^8.0.4",
+    "postcss": "^8.5.8",
+    "prettier": "^3.8.1",
+    "tailwindcss": "^4.2.2",
+    "typescript": "~5.9.3",
+    "vite": "^8.0.1",
+    "vitest": "^4.1.0",
+    "vue-tsc": "^3.2.6"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

celements-admin-frontend/postcss.config.js

@@ -0,0 +1,30 @@
+import tailwindcss from '@tailwindcss/postcss'; // Neu: Aus @tailwindcss/postcss laden
+import autoprefixer from 'autoprefixer';
+
+const tw = tailwindcss();
+
+function conditionalTailwind() {
+  return {
+    postcssPlugin: 'conditional-tailwindcss',
+    // In v4 nutzt Tailwind primär den "Once"-Hook
+    Once(root, helpers) {
+      const from =
+        helpers?.result?.opts?.from || root?.source?.input?.file || root?.source?.input?.from || '';
+
+      // Skip vendor CSS
+      if (from.includes('/node_modules/')) {
+        return;
+      }
+
+      // v4 Plugin Delegation
+      if (typeof tw.Once === 'function') {
+        return tw.Once(root, helpers);
+      }
+    },
+  };
+}
+conditionalTailwind.postcss = true;
+
+export default {
+  plugins: [conditionalTailwind(), autoprefixer()],
+};

celements-admin-frontend/src/App.vue

@@ -0,0 +1,12 @@
+<template>
+  <ConfirmDialog />
+  <RouterView/>
+</template>
+
+<script setup lang="ts">
+import { useAuthStore } from '@/core/stores/auth';
+import { RouterView } from 'vue-router';
+import ConfirmDialog from 'primevue/confirmdialog';
+
+ useAuthStore();
+</script>