feat(print): table of content

common/locales/de.json

@@ -117,7 +117,8 @@
     "day": {
       "fields": {
         "dayResponsibles": "Tagesverantwortliche"
-      }
+      },
+      "name": "Tag | Tage"
     },
     "materialList": {
       "name": "Materialliste"
@@ -139,5 +140,22 @@
       },
       "name": "Zeitplaneintrag"
     }
+  },
+  "print": {
+    "toc": {
+      "title": "Inhaltsverzeichnis"
+    },
+    "cover": {
+      "title": "Titelseite"
+    },
+    "program": {
+      "title": "Detailprogramm"
+    },
+    "story": {
+      "title": "Roter Faden"
+    },
+    "picasso": {
+      "title": "Grobprogramm"
+    }
   }
 }

common/locales/en.json

@@ -125,7 +125,8 @@
     "day": {
       "fields": {
         "dayResponsibles": "Responsible of the day"
-      }
+      },
+      "name": "Day | Days"
     },
     "materialItem": {
       "fields": {
@@ -157,5 +158,22 @@
       },
       "name": "Activity scheduled"
     }
+  },
+  "print": {
+    "toc": {
+      "title": "Table of content"
+    },
+    "cover": {
+      "title": "Cover page"
+    },
+    "program": {
+      "title": "Program"
+    },
+    "story": {
+      "title": "Storyline"
+    },
+    "picasso": {
+      "title": "Program overview"
+    }
   }
 }

frontend/src/components/print/PrintConfigurator.vue

@@ -6,7 +6,7 @@
 
       <v-container>
         <v-row>
-          <v-col cols="12" lg="4">
+          <v-col cols="8">
             <v-list>
               <draggable v-model="cnf.contents" handle=".handle">
                 <v-list-item v-for="(content, idx) in cnf.contents" :key="idx">
@@ -15,7 +15,7 @@
                   </v-list-item-icon>
                   <v-list-item-content>
                     <v-list-item-title>
-                      <h3>{{ content.type }}</h3>
+                      <h3>{{ $tc('components.print.printConfigurator.config.' + content.type) }}</h3>
                     </v-list-item-title>
                     <component :is="content.type"
                                v-model="content.options"
@@ -32,13 +32,9 @@
             <br>
             <v-menu>
               <template #activator="{ on, attrs }">
-                <v-btn
-                  color="primary"
-                  dark
+                <button-add
                   v-bind="attrs"
-                  v-on="on">
-                  Add
-                </v-btn>
+                  v-on="on" />
               </template>
               <v-list>
                 <v-list-item
@@ -49,34 +45,41 @@
                     options: component.defaultOptions()
                   })">
                   <v-list-item-title>
-                    {{ component.name }}
+                    {{ $tc('components.print.printConfigurator.config.' + component.name) }}
                   </v-list-item-title>
                 </v-list-item>
               </v-list>
             </v-menu>
           </v-col>
-          <v-col cols="12" lg="8">
-            <div>
-              <v-btn color="primary"
-                     :href="previewUrl"
-                     target="_blank">
-                {{ $tc('components.camp.campPrint.openPrintPreview') }}
-              </v-btn>
-
-              <local-print-preview :config="{ camp: camp.bind(this), ...cnf }"
-                                   width="100%"
-                                   height="600"
-                                   class="my-4" />
-
-              <v-expansion-panels>
-                <v-expansion-panel>
-                  <v-expansion-panel-header>View Print-Config</v-expansion-panel-header>
-                  <v-expansion-panel-content>
-                    <pre>{{ cnf }}</pre>
-                  </v-expansion-panel-content>
-                </v-expansion-panel>
-              </v-expansion-panels>
-            </div>
+          <v-col cols="4">
+            <v-expansion-panels>
+              <v-expansion-panel>
+                <v-expansion-panel-header>View Print-Config</v-expansion-panel-header>
+                <v-expansion-panel-content>
+                  <pre>{{ cnf }}</pre>
+                </v-expansion-panel-content>
+              </v-expansion-panel>
+            </v-expansion-panels>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col cols="12">
+            <v-tabs>
+              <v-tab>Print with Nuxt</v-tab>
+              <v-tab>Print with React</v-tab>
+              <v-tab-item>
+                <print-preview-nuxt :config="cnf"
+                                    width="100%"
+                                    height="600"
+                                    class="my-4" />
+              </v-tab-item>
+              <v-tab-item>
+                <print-preview-react :config="cnf"
+                                     width="100%"
+                                     height="600"
+                                     class="my-4" />
+              </v-tab-item>
+            </v-tabs>
           </v-col>
         </v-row>
       </v-container>
@@ -85,7 +88,8 @@
 </template>
 
 <script>
-import LocalPrintPreview from './print-react/LocalPrintPreview.vue'
+import PrintPreviewReact from './print-react/PrintPreviewReact.vue'
+import PrintPreviewNuxt from './print-nuxt/PrintPreviewNuxt.vue'
 import Draggable from 'vuedraggable'
 import Cover from './config/CoverConfig.vue'
 import Picasso from './config/PicassoConfig.vue'
@@ -94,13 +98,12 @@ import Program from './config/ProgramConfig.vue'
 import Activity from './config/ActivityConfig.vue'
 import Toc from './config/TocConfig.vue'
 
-const PRINT_SERVER = window.environment.PRINT_SERVER
-
 export default {
   name: 'PrintConfigurator',
   components: {
     Draggable,
-    LocalPrintPreview,
+    PrintPreviewReact,
+    PrintPreviewNuxt,
     Cover,
     Picasso,
     Story,
@@ -116,18 +119,6 @@ export default {
   },
   data () {
     return {
-      // OLD
-      config: {
-        showFrontpage: true,
-        showToc: true,
-        showPicasso: true,
-        showDailySummary: true,
-        showStoryline: true,
-        showActivities: true,
-        camp: this.camp.bind(this)
-      },
-
-      // NEW
       contentComponents: [
         Cover,
         Picasso,
@@ -139,15 +130,12 @@ export default {
       cnf: {
         language: '',
         documentName: this.camp().title + '.pdf',
+        camp: this.camp()._meta.self,
         contents: this.defaultContents()
       }
     }
   },
   computed: {
-    previewUrl () {
-      const configGetParams = Object.entries(this.config).map(([key, val]) => `${key}=${val}`).join('&')
-      return `${PRINT_SERVER}/?camp=${this.camp().id}&pagedjs=true&${configGetParams}&lang=${this.lang}`
-    },
     lang () {
       return this.$store.state.lang.language
     },

frontend/src/components/print/config/ActivityConfig.vue

@@ -8,7 +8,7 @@
 
 <script>
 export default {
-  name: 'ActivityConfig',
+  name: 'Activity',
   props: {
     value: { type: Object, required: true },
     camp: { type: Object, required: true }

frontend/src/components/print/config/CoverConfig.vue

@@ -4,7 +4,7 @@
 
 <script>
 export default {
-  name: 'CoverConfig',
+  name: 'Cover',
   props: {
     value: { type: Object, required: true }
   },

frontend/src/components/print/config/PicassoConfig.vue

@@ -12,7 +12,7 @@
 
 <script>
 export default {
-  name: 'PicassoConfig',
+  name: 'Picasso',
   props: {
     value: { type: Object, required: true },
     camp: { type: Object, required: true }

frontend/src/components/print/config/ProgramConfig.vue

@@ -4,13 +4,13 @@
       v-model="options.periods"
       :items="periods"
       multiple />
-    <e-checkbox v-model="options.dayOverview" label="print day-overview" />
+    <e-checkbox v-model="options.dayOverview" :label="$tc('components.print.printConfigurator.config.ProgramConfig.dayOverview')" />
   </div>
 </template>
 
 <script>
 export default {
-  name: 'ProgramConfig',
+  name: 'Program',
   props: {
     value: { type: Object, required: true },
     camp: { type: Object, required: true }

frontend/src/components/print/config/StoryConfig.vue

@@ -9,7 +9,7 @@
 
 <script>
 export default {
-  name: 'StoryConfig',
+  name: 'Story',
   props: {
     value: { type: Object, required: true },
     camp: { type: Object, required: true }

frontend/src/components/print/config/TocConfig.vue

@@ -4,7 +4,7 @@
 
 <script>
 export default {
-  name: 'TocConfig',
+  name: 'Toc',
   props: {
     value: { type: Object, required: true }
   },

frontend/src/components/print/print-nuxt/PdfDownloadButtonNuxt.vue

@@ -0,0 +1,77 @@
+<template>
+  <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>
+    </v-btn>
+    <v-snackbar v-model="error" :timeout="10000">
+      {{ $tc('components.print.localPdfDownloadButton.error') }}
+      <template #action="{ attrs }">
+        <v-btn color="red"
+               text
+               v-bind="attrs"
+               @click="error = null">
+          {{ $tc('global.button.close') }}
+        </v-btn>
+      </template>
+    </v-snackbar>
+  </div>
+</template>
+
+<script>
+import { saveAs } from 'file-saver'
+import slugify from 'slugify'
+
+import axios from 'axios'
+
+const PRINT_SERVER = window.environment.PRINT_SERVER
+
+export default {
+  name: 'PdfDownloadButtonNuxt',
+  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/pdf?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
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>