Feat(Gotenberg): Opt-in alternative pdf generation for modern CSS (#184)

* WIP(gotenberg): add pdf generation abstraction and UI

* feat(pdf): settings validate(clien+server) & save

* fix(gotenberg): Use correct default papersize
chore(gotengberg): Remove unused GOTENBERG_MARGINS env from .env

* style(gotenberg): fix linter/styling issues

* fix(pdf): use pdf config policy

* fix: revert accidental capitalization in mail config vue

* Update composer, remove whitespace typo

* Fix small typos

* fix cookie/env issue

* Add gotenberg to .dev, move admin menu item up

resources/scripts/admin/admin-router.js

@@ -56,6 +56,8 @@ const UpdateApp = () =>
   import('@/scripts/admin/views/settings/UpdateAppSetting.vue')
 const RolesSettings = () =>
   import('@/scripts/admin/views/settings/RolesSettings.vue')
+const PDFGenerationSettings = () =>
+  import('@/scripts/admin/views/settings/PDFGenerationSetting.vue')
 
 // Items
 const ItemsIndex = () => import('@/scripts/admin/views/items/Index.vue')
@@ -327,6 +329,12 @@ export default [
             meta: { isOwner: true },
             component: UpdateApp,
           },
+          {
+            path: 'pdf-generation',
+            name: 'pdf.generation',
+            meta: { isOwner: true },
+            component: PDFGenerationSettings,
+          },
         ],
       },
 

resources/scripts/admin/stores/pdf-driver.js

@@ -0,0 +1,70 @@
+const { defineStore } = window.pinia
+import { handleError } from '@/scripts/helpers/error-handling'
+import { useNotificationStore } from '@/scripts/stores/notification'
+import axios from 'axios'
+
+export const usePDFDriverStore = (useWindow = false) => {
+  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
+  const { global } = window.i18n
+
+  return defineStoreFunc({
+    id: 'pdf-driver',
+
+    state: () => ({
+      pdfDriverConfig: null,
+      pdf_driver: 'dompdf',
+      pdf_drivers: [],
+
+      dompdf: {
+        pdf_driver: '',
+      },
+      gotenberg: {
+        pdf_driver: '',
+        gotenberg_host: '',
+        gotenberg_papersize: ''
+      }
+    }),
+
+    actions: {
+      async fetchDrivers() {
+        try {
+          const response = await axios.get('/api/v1/pdf/drivers')
+          this.pdf_drivers = response.data
+        } catch (err) {
+          handleError(err)
+          throw err
+        }
+      },
+      async fetchConfig() {
+        try {
+          const response = await axios.get('/api/v1/pdf/config')
+          this.pdfDriverConfig = response.data
+          this.pdf_driver = response.data.pdf_driver
+        } catch (err) {
+          handleError(err)
+          throw err
+        }
+      },
+      async updateConfig(data) {
+        try {
+          const response = await axios.post('/api/v1/pdf/config', data)
+          const notificationStore = useNotificationStore()
+          if (response.data.success) {
+            notificationStore.showNotification({
+              type: 'success',
+              message: global.t('settings.pdf.' + response.data.success),
+            })
+          } else {
+            notificationStore.showNotification({
+              type: 'error',
+              message: global.t('settings.pdf.' + response.data.error),
+            })
+          }
+        } catch (err) {
+          handleError(err)
+          throw err
+        }
+      },
+    },
+  })()
+}

resources/scripts/admin/views/settings/PDFGenerationSetting.vue

@@ -0,0 +1,72 @@
+<template>
+    <BaseSettingCard
+      :title="$t('settings.pdf.pdf_configuration')"
+      :description="$t('settings.pdf.section_description')"
+    >
+    <div v-if="pdfDriverStore && pdfDriverStore.pdfDriverConfig" class="mt-14">
+      <component
+        :is="pdfDriver"
+        :config-data="pdfDriverStore.pdfDriverConfig"
+        :is-saving="isSaving"
+        :drivers="pdfDriverStore.pdf_drivers"
+        :is-fetching-initial-data="isFetchingInitialData"
+        @on-change-driver="(val) => changeDriver(val)"
+        @submit-data="saveConfig"
+      >
+      </component>
+    </div>
+    </BaseSettingCard>
+</template>
+
+<script setup>
+  import GotenbergDriver from '@/scripts/admin/views/settings/pdf-driver/GotenbergDriver.vue';
+  import DomPDFDriver from '@/scripts/admin/views/settings/pdf-driver/DomPDFDriver.vue';
+  import { ref, computed } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import { usePDFDriverStore } from '@/scripts/admin/stores/pdf-driver'
+  const emit = defineEmits(['submit-data', 'on-change-driver'])
+
+  let isFetchingInitialData = ref(false)
+  let isSaving = ref(false)
+
+  const pdfDriverStore = usePDFDriverStore();
+  const { t } = useI18n();
+
+  function changeDriver(value) {
+    pdfDriverStore.pdf_driver = value
+    pdfDriverStore.pdfDriverConfig.pdf_driver = value
+  }
+
+  async function loadData() {
+    isFetchingInitialData.value = true
+    await Promise.all([
+      pdfDriverStore.fetchDrivers(),
+      pdfDriverStore.fetchConfig(),
+    ])
+    isFetchingInitialData.value = false
+  }
+  loadData();
+
+  async function saveConfig(value) {
+    try {
+      isSaving.value = true
+      await pdfDriverStore.updateConfig(value)
+    } catch (e) {
+      console.error(e)
+    } finally {
+      isSaving.value = false
+      return false
+    }
+  }
+
+  const pdfDriver = computed(() => {
+    switch (pdfDriverStore.pdf_driver) {
+      case 'dompdf':
+        return DomPDFDriver
+      case 'gotenberg':
+        return GotenbergDriver
+      default:
+        return DomPDFDriver
+    }
+  })
+</script>

resources/scripts/admin/views/settings/pdf-driver/DomPDFDriver.vue

@@ -0,0 +1,117 @@
+<template>
+  <form @submit.prevent="saveConfig">
+    <BaseInputGrid>
+      <BaseInputGroup
+        :label="$t('settings.pdf.driver')"
+        :error="
+          v$.dompdf.pdf_driver.$error &&
+          v$.dompdf.pdf_driver.$errors[0].$message
+        "
+        required
+      >
+        <BaseMultiselect
+          v-model="pdfDriverStore.dompdf.pdf_driver"
+          :content-loading="isFetchingInitialData"
+          :options="drivers"
+          :can-deselect="false"
+          :invalid="v$.dompdf.pdf_driver.$error"
+          @update:modelValue="onChangeDriver"
+        />
+      </BaseInputGroup>
+    </BaseInputGrid>
+    <div class="flex my-10">
+      <BaseButton
+        :disabled="isSaving"
+        :content-loading="isFetchingInitialData"
+        :loading="isSaving"
+        type="submit"
+        variant="primary"
+      >
+        <template #left="slotProps">
+          <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
+        </template>
+        {{ $t('general.save') }}
+      </BaseButton>
+      <slot />
+    </div>
+  </form>
+</template>
+
+<script setup>
+  import { ref, computed, onMounted } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import { usePDFDriverStore } from '@/scripts/admin/stores/pdf-driver'
+  import {required, email, helpers} from '@vuelidate/validators'
+  import useVuelidate from '@vuelidate/core'
+
+  const props = defineProps({
+    configData: {
+      type: Object,
+      require: true,
+      default: Object,
+    },
+    isSaving: {
+      type: Boolean,
+      require: true,
+      default: false,
+    },
+    isFetchingInitialData: {
+      type: Boolean,
+      require: true,
+      default: false,
+    },
+    drivers: {
+      type: Array,
+      require: true,
+      default: Array,
+    },
+  })
+
+
+  const emit = defineEmits(['submit-data', 'on-change-driver'])
+
+  let isFetchingInitialData = ref(false)
+
+  const pdfDriverStore = usePDFDriverStore();
+  const { t } = useI18n();
+
+  const rules = computed(() => {
+    return {
+      dompdf: {
+        pdf_driver: {
+          required: helpers.withMessage(t('validation.required'), required),
+        },
+      },
+    }
+  })
+
+  const v$ = useVuelidate(
+    rules,
+    computed(() => pdfDriverStore)
+  )
+
+  function onChangeDriver() {
+    // validation
+    v$.value.dompdf.pdf_driver.$touch()
+    emit('on-change-driver', pdfDriverStore.dompdf.pdf_driver)
+  }
+
+  async function saveConfig() {
+    v$.value.dompdf.$touch()
+    if (!v$.value.dompdf.$invalid) {
+      emit('submit-data', pdfDriverStore.dompdf)
+    }
+    return false
+  }
+
+  onMounted(() => {
+    for (const key in pdfDriverStore.dompdf) {
+      if (props.configData.hasOwnProperty(key)) {
+        pdfDriverStore.$patch((state) => {
+          state.dompdf[key] = props.configData[key]
+        });
+      }
+    }
+  })
+
+</script>

resources/scripts/admin/views/settings/pdf-driver/GotenbergDriver.vue

@@ -0,0 +1,128 @@
+<template>
+  <form @submit.prevent="saveConfig">
+    <BaseInputGrid>
+      <BaseInputGroup :label="$t('settings.pdf.driver')" :error="
+          v$.gotenberg.pdf_driver.$error &&
+          v$.gotenberg.pdf_driver.$errors[0].$message
+        " required>
+        <BaseMultiselect v-model="pdfDriverStore.gotenberg.pdf_driver" :content-loading="isFetchingInitialData"
+          :options="drivers" :can-deselect="false" @update:modelValue="onChangeDriver"
+          :invalid="v$.gotenberg.pdf_driver.$error" />
+      </BaseInputGroup>
+      <BaseInputGroup :label="$t('settings.pdf.gotenberg_host')" :content-loading="isFetchingInitialData"
+        :error="
+          v$.gotenberg.gotenberg_host.$error &&
+          v$.gotenberg.gotenberg_host.$errors[0].$message
+        " required>
+        <BaseInput v-model="pdfDriverStore.gotenberg.gotenberg_host" :content-loading="isFetchingInitialData"
+          :invalid="v$.gotenberg.gotenberg_host.$error" type="text" name="gotenberg_host" />
+      </BaseInputGroup>
+      <BaseInputGroup :label="$t('settings.pdf.papersize')" :content-loading="isFetchingInitialData" :error="
+          v$.gotenberg.gotenberg_papersize.$error &&
+          v$.gotenberg.gotenberg_papersize.$errors[0].$message
+        "
+          :help-text="$t('settings.pdf.papersize_hint')"
+        required>
+        <BaseInput v-model="pdfDriverStore.gotenberg.gotenberg_papersize" :content-loading="isFetchingInitialData"
+          :invalid="v$.gotenberg.gotenberg_papersize.$error" type="text" name="gotenberg_papersize" />
+      </BaseInputGroup>
+    </BaseInputGrid>
+    <div class="flex my-10">
+      <BaseButton :disabled="isSaving" :content-loading="isFetchingInitialData" :loading="isSaving" type="submit"
+        variant="primary">
+        <template #left="slotProps">
+          <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
+        </template>
+        {{ $t('general.save') }}
+      </BaseButton>
+      <slot />
+    </div>
+  </form>
+</template>
+
+<script setup>
+  import {ref, computed, onMounted} from 'vue'
+  import {useI18n} from 'vue-i18n'
+  import {usePDFDriverStore} from '@/scripts/admin/stores/pdf-driver'
+  import {required, email, helpers} from '@vuelidate/validators'
+  import useVuelidate from '@vuelidate/core'
+
+  const props = defineProps({
+    configData: {
+      type: Object,
+      require: true,
+      default: Object,
+    },
+    isSaving: {
+      type: Boolean,
+      require: true,
+      default: false,
+    },
+    isFetchingInitialData: {
+      type: Boolean,
+      require: true,
+      default: false,
+    },
+    drivers: {
+      type: Array,
+      require: true,
+      default: Array,
+    },
+  })
+
+
+  const emit = defineEmits(['submit-data', 'on-change-driver'])
+
+  const pdfDriverStore = usePDFDriverStore();
+  const {t} = useI18n();
+
+  const rules = computed(() => {
+    return {
+      gotenberg: {
+        pdf_driver: {
+          required: helpers.withMessage(t('validation.required'), required),
+        },
+        gotenberg_host: {
+          required: helpers.withMessage(t('validation.required'), required),
+        },
+        gotenberg_papersize: {
+          required: helpers.withMessage(t('validation.required'), required),
+        },
+      },
+    }
+  })
+
+  const v$ = useVuelidate(
+    rules,
+    computed(() => pdfDriverStore)
+  )
+
+  function onChangeDriver() {
+    v$.value.gotenberg.pdf_driver.$touch()
+    emit('on-change-driver', pdfDriverStore.gotenberg.pdf_driver)
+  }
+
+  async function saveConfig() {
+    v$.value.gotenberg.$touch()
+    if (!v$.value.gotenberg.$invalid) {
+      emit('submit-data', pdfDriverStore.gotenberg)
+    }
+    return false
+  }
+
+  // Fill pdfDriverStore.gotenbergConfig with data from config prop
+  onMounted(() => {
+    for (const key in pdfDriverStore.gotenberg) {
+      if (props.configData.hasOwnProperty(key)) {
+        pdfDriverStore.$patch((state) => {
+          state.gotenberg[key] = props.configData[key]
+        });
+      }
+    }
+    if (pdfDriverStore.gotenberg.gotenberg_papersize == '')
+      pdfDriverStore.$patch((state) => {
+        state.gotenberg.gotenberg_papersize = '210mm 297mm';
+      });
+  })
+
+</script>