Merge pull request #3036 from usu/chore/remove-pagedjs

chore(print): remove pagedjs + prepare for alpha
ecamp · Oct 8, 2022 · 57c1463 · 57c1463
2 parents 74dac3b + f292449
commit 57c1463
Show file tree

Hide file tree

Showing 62 changed files with 644 additions and 1,578 deletions.
diff --git a/.helm/ecamp3/templates/frontend_configmap.yaml b/.helm/ecamp3/templates/frontend_configmap.yaml
@@ -9,7 +9,7 @@ data:
     window.environment = {
       API_ROOT_URL: '{{ include "api.url" . }}',
       COOKIE_PREFIX: '{{ include "api.cookiePrefix" . }}',
-      PRINT_SERVER: '{{ include "print.url" . }}',
+      PRINT_URL: '{{ include "print.url" . }}',
     {{- if .Values.frontend.sentryDsn }}
       SENTRY_FRONTEND_DSN: '{{ .Values.frontend.sentryDsn }}',
       SENTRY_ENVIRONMENT: '{{ .Values.frontend.domain }}',

diff --git a/.helm/ecamp3/templates/print_configmap.yaml b/.helm/ecamp3/templates/print_configmap.yaml
@@ -7,4 +7,6 @@ metadata:
 data:
   INTERNAL_API_ROOT_URL: {{ include "api.url" . | quote }}
   FRONTEND_URL: {{ include "frontend.url" . | quote }}
+  PRINT_URL: {{ include "print.url" . | quote }}
+  COOKIE_PREFIX: {{ include "api.cookiePrefix" . | quote }}
   SENTRY_ENVIRONMENT: {{ .Values.frontend.domain | quote }}
diff --git a/frontend/.jest/environment.js b/frontend/.jest/environment.js
@@ -1,7 +1,7 @@
 window.environment = {
   API_ROOT_URL: 'http://localhost',
   COOKIE_PREFIX: 'localhost_',
-  PRINT_SERVER: 'http://localhost:3003',
+  PRINT_URL: 'http://localhost:3003',
   SHARED_COOKIE_DOMAIN: 'localhost',
   SENTRY_ENVIRONMENT: "http://localhost:3000",
   DEPLOYMENT_TIME: '',

diff --git a/frontend/index.html b/frontend/index.html
@@ -1,61 +1,95 @@
 <!-- index.html for vite dev server -->
 <!DOCTYPE html>
 <html lang="en">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="mobile-web-app-capable" content="yes">
- <link rel="apple-touch-icon" sizes="180x180" href="/browserassets/apple-touch-icon.png">
- <link rel="icon" type="image/png" sizes="32x32" href="/browserassets/favicon-32x32.png">
- <link rel="icon" type="image/png" sizes="16x16" href="/browserassets/favicon-16x16.png">
- <link rel="mask-icon" href="/browserassets/safari-pinned-tab.svg" color="#263238">
- <meta name="msapplication-TileColor" content="#263238">
- <meta name="theme-color" content="#263238">
- <link rel="manifest" href="/manifest.webmanifest">
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
- <link rel="icon" href="/favicon.svg">
- <title>eCamp3</title>
- <!-- consider enabling CDN for production
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/browserassets/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/browserassets/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/browserassets/favicon-16x16.png"
+    />
+    <link rel="mask-icon" href="/browserassets/safari-pinned-tab.svg" color="#263238" />
+    <meta name="msapplication-TileColor" content="#263238" />
+    <meta name="theme-color" content="#263238" />
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="/favicon.svg" />
+    <title>eCamp3</title>
+    <!-- consider enabling CDN for production
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"> -->
-</head>
-<body>
-<noscript>
- <strong lang="en">Sorry, eCamp does not work without JavaScript. Please enable JavaScript to continue.</strong><br>
- <strong lang="de">Sorry, eCamp funktioniert nicht ohne JavaScript. Bitte aktiviere JavaScript um fortzufahren.</strong><br>
- <strong lang="fr">Désolé, eCamp ne fonctionne pas sans JavaScript. Veuillez activer JavaScript pour continuer.</strong><br>
- <strong lang="it">Spiacente, eCamp non funziona senza JavaScript. Per favore, abilita JavaScript per continuare.</strong>
-</noscript>
+  </head>
+  <body>
+    <noscript>
+      <strong lang="en"
+        >Sorry, eCamp does not work without JavaScript. Please enable JavaScript to
+        continue.</strong
+      ><br />
+      <strong lang="de"
+        >Sorry, eCamp funktioniert nicht ohne JavaScript. Bitte aktiviere JavaScript um
+        fortzufahren.</strong
+      ><br />
+      <strong lang="fr"
+        >Désolé, eCamp ne fonctionne pas sans JavaScript. Veuillez activer JavaScript pour
+        continuer.</strong
+      ><br />
+      <strong lang="it"
+        >Spiacente, eCamp non funziona senza JavaScript. Per favore, abilita JavaScript
+        per continuare.</strong
+      >
+    </noscript>
 
-<div id="app"></div>
-<script src="/environment.js" lang="application/javascript"></script>
-<script>
-  if ('environment' in window) {
-    const requiredKeys = [
-      'API_ROOT_URL',
-      'COOKIE_PREFIX',
-      'PRINT_SERVER',
-      'SENTRY_FRONTEND_DSN',
-      'SHARED_COOKIE_DOMAIN',
-      'DEPLOYMENT_TIME',
-      'VERSION',
-      'VERSION_LINK_TEMPLATE',
-    ]
+    <div id="app"></div>
+    <script src="/environment.js" lang="application/javascript"></script>
+    <script>
+      if ('environment' in window) {
+        const requiredKeys = [
+          'API_ROOT_URL',
+          'COOKIE_PREFIX',
+          'PRINT_URL',
+          'SENTRY_FRONTEND_DSN',
+          'SHARED_COOKIE_DOMAIN',
+          'DEPLOYMENT_TIME',
+          'VERSION',
+          'VERSION_LINK_TEMPLATE',
+        ]
 
-    const missingKeys = requiredKeys.filter(key => !Object.keys(window.environment).includes(key))
-    if (missingKeys.length > 0) {
-      console.error(`Missing key(s): "${missingKeys.join(',')}" in frontend/public/environment.js
+        const missingKeys = requiredKeys.filter(
+          (key) => !Object.keys(window.environment).includes(key)
+        )
+        if (missingKeys.length > 0) {
+          console.error(`Missing key(s): "${missingKeys.join(
+            ','
+          )}" in frontend/public/environment.js
   You can look up example values in frontend/public/environment.dist`)
-    }
+        }
 
-    const additionalKeys = Object.keys(window.environment).filter(key => !requiredKeys.includes(key))
-    if (additionalKeys.length > 0) {
-      console.error(`Additional defined key(s): "${additionalKeys.join(',')}" in frontend/public/environment.js
+        const additionalKeys = Object.keys(window.environment).filter(
+          (key) => !requiredKeys.includes(key)
+        )
+        if (additionalKeys.length > 0) {
+          console.error(`Additional defined key(s): "${additionalKeys.join(
+            ','
+          )}" in frontend/public/environment.js
   Maybe you forgot to add them here to the requiredKeys`)
-    }
-  }
-</script>
-<script type="module" src="/src/main.js"></script>
-<!-- built files will be auto injected -->
-</body>
+        }
+      }
+    </script>
+    <script type="module" src="/src/main.js"></script>
+    <!-- built files will be auto injected -->
+  </body>
 </html>
diff --git a/frontend/public/environment.dist b/frontend/public/environment.dist
@@ -1,7 +1,7 @@
 window.environment = {
   API_ROOT_URL: 'http://localhost:3001',
   COOKIE_PREFIX: 'localhost_',
-  PRINT_SERVER: 'http://localhost:3003',
+  PRINT_URL: 'http://localhost:3003',
   SENTRY_FRONTEND_DSN: null,
   SENTRY_ENVIRONMENT: "http://localhost:3000",
   SHARED_COOKIE_DOMAIN: 'localhost',

diff --git a/frontend/public/environment.docker.dist b/frontend/public/environment.docker.dist
@@ -1,7 +1,7 @@
 window.environment = {
   API_ROOT_URL: 'http://localhost:3001',
   COOKIE_PREFIX: 'localhost_',
-  PRINT_SERVER: 'http://localhost:3003',
+  PRINT_URL: 'http://localhost:3003',
   SENTRY_FRONTEND_DSN: null,
   SENTRY_ENVIRONMENT: "http://localhost:3000",
   SHARED_COOKIE_DOMAIN: 'localhost',

diff --git a/frontend/src/components/generic/LockIcon.vue b/frontend/src/components/generic/LockIcon.vue
@@ -0,0 +1,31 @@
+<template>
+  <v-tooltip :disabled="hideTooltip" bottom>
+    <template #activator="{ on }">
+      <v-icon v-if="value" small v-on="on"> mdi-lock-open-variant </v-icon>
+      <v-icon v-else small color="grey" v-on="on"> mdi-lock </v-icon>
+    </template>
+    <span>{{ message || $tc('components.generic.lockIcon.guestsCannotEdit') }}</span>
+  </v-tooltip>
+</template>
+
+<script>
+export default {
+  name: 'LockIcon',
+  props: {
+    value: {
+      type: Boolean,
+      required: true,
+    },
+    message: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    hideTooltip: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/generic/LockUnlockListItem.vue b/frontend/src/components/generic/LockUnlockListItem.vue
@@ -0,0 +1,27 @@
+<template>
+  <v-list-item :disabled="disabled" v-on="$listeners">
+    <v-list-item-icon>
+      <v-icon v-if="value" :disabled="disabled">mdi-lock</v-icon>
+      <v-icon v-else :disabled="disabled">mdi-lock-open-variant</v-icon>
+    </v-list-item-icon>
+    <v-list-item-title>
+      {{ value ? $tc('global.button.lock') : $tc('global.button.unlock') }}
+    </v-list-item-title>
+  </v-list-item>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/print/PrintConfigurator.vue b/frontend/src/components/print/PrintConfigurator.vue
@@ -5,6 +5,10 @@
       <v-container>
         <v-row>
           <v-col cols="12" md="8">
+            <div>
+              <DownloadNuxtPdfButton :config="cnf" class="mr-3 float-left" />
+              <DownloadReactPdfButton :config="cnf" class="mr-3" />
+            </div>
             <v-list>
               <draggable v-model="cnf.contents" handle=".handle">
                 <v-list-item v-for="(content, idx) in cnf.contents" :key="idx">
@@ -57,7 +61,7 @@
             </v-menu>
           </v-col>
           <v-col cols="12" md="4">
-            <v-expansion-panels>
+            <v-expansion-panels v-if="isDev">
               <v-expansion-panel>
                 <v-expansion-panel-header>View Print-Config</v-expansion-panel-header>
                 <v-expansion-panel-content>
@@ -67,11 +71,11 @@
             </v-expansion-panels>
           </v-col>
         </v-row>
-        <v-row>
+        <v-row v-if="isDev">
           <v-col cols="12">
             <v-tabs v-model="previewTab">
-              <v-tab>Print with Nuxt</v-tab>
-              <v-tab>Print with React</v-tab>
+              <v-tab>Nuxt preview</v-tab>
+              <v-tab>React preview</v-tab>
               <v-tab-item>
                 <print-preview-nuxt
                   v-if="previewTab === 0"
@@ -151,6 +155,9 @@ export default {
     lang() {
       return this.$store.state.lang.language
     },
+    isDev() {
+      return process.env.NODE_ENV === 'development'
+    },
   },
   watch: {
     lang: {

diff --git a/frontend/src/components/print/print-nuxt/DownloadNuxtPdfButton.vue b/frontend/src/components/print/print-nuxt/DownloadNuxtPdfButton.vue
@@ -2,8 +2,9 @@
   <div>
     <v-btn color="primary" :loading="loading" outlined @click="generatePdf">
       <v-icon>mdi-printer</v-icon>
-      <div class="mx-1">with</div>
-      <v-icon>mdi-nuxt</v-icon>
+      <div class="mx-1">
+        {{ $tc('components.print.printNuxt.downloadNuxtPdfListItem.label') }}
+      </div>
     </v-btn>
     <v-snackbar v-model="error" :timeout="10000">
       {{ $tc('components.print.localPdfDownloadButton.error') }}
@@ -17,61 +18,10 @@
 </template>
 
 <script>
-import { saveAs } from 'file-saver'
-import slugify from 'slugify'
-
-import axios from 'axios'
-
-const PRINT_SERVER = window.environment.PRINT_SERVER
+import { generatePdfMixin } from './generatePdfMixin.js'
 
 export default {
   name: 'DownloadNuxtPdfButton',
-  props: {
-    config: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      loading: false,
-      error: null,
-    }
-  },
-  methods: {
-    async generatePdf() {
-      this.loading = true
-
-      try {
-        const response = await axios({
-          method: 'get',
-          url: `${PRINT_SERVER}/server/pdfChrome?config=${encodeURIComponent(
-            JSON.stringify(this.config)
-          )}`,
-          responseType: 'arraybuffer',
-          withCredentials: true,
-          headers: {
-            'Cache-Control': 'no-cache',
-            Pragma: 'no-cache',
-            Expires: '0',
-          },
-        })
-
-        saveAs(
-          new Blob([response.data]),
-          slugify(this.config.documentName, {
-            locale: this.$store.state.lang.language.substr(0, 2),
-          })
-        )
-      } catch (error) {
-        this.error = error
-        console.log(error)
-      } finally {
-        this.loading = false
-      }
-    },
-  },
+  mixins: [generatePdfMixin],
 }
 </script>
-
-<style scoped></style>