Managed to load a page

2023-10-14 17:31:30 +02:00
parent 6adcc52072
commit 358bf0e4d0
21 changed files with 3571 additions and 12963 deletions
--- a/resources/js/components/open/forms/OpenCompleteForm.vue
+++ b/resources/js/components/open/forms/OpenCompleteForm.vue
@@ -54,10 +54,10 @@
    <transition
      v-if="!form.is_password_protected && (!isPublicFormPage || (!form.is_closed && !form.max_number_of_submissions_reached && form.visibility!='closed'))"
      enter-active-class="duration-500 ease-out"
-      enter-class="translate-x-full opacity-0"
+      enter-from-class="translate-x-full opacity-0"
      enter-to-class="translate-x-0 opacity-100"
      leave-active-class="duration-500 ease-in"
-      leave-class="translate-x-0 opacity-100"
+      leave-from-class="translate-x-0 opacity-100"
      leave-to-class="translate-x-full opacity-0"
      mode="out-in"
    >
@@ -67,16 +67,16 @@
           v-html="form.description"
        />
        <open-form v-if="form"
-                     :form="form"
-                     :loading="loading"
-                     :fields="form.properties"
-                     :theme="theme"
-                     :admin-preview="adminPreview"
-                     @submit="submitForm"
+                   :form="form"
+                   :loading="loading"
+                   :fields="form.properties"
+                   :theme="theme"
+                   :admin-preview="adminPreview"
+                   @submit="submitForm"
        >
          <template #submit-btn="{submitForm}">
            <open-form-button :loading="loading" :theme="theme" :color="form.color" class="mt-2 px-8 mx-1"
-                                :class="submitButtonClass" @click.prevent="submitForm"
+                              :class="submitButtonClass" @click.prevent="submitForm"
            >
              {{ form.submit_button_text }}
            </open-form-button>
@@ -120,6 +120,8 @@ import FormCleanings from '../../pages/forms/show/FormCleanings.vue'
 export default {
  components: { VTransition, VButton, OpenFormButton, OpenForm, FormCleanings },

+  mixins: [FormPendingSubmissionKey],
+
  props: {
    form: { type: Object, required: true },
    creating: { type: Boolean, default: false }, // If true, fake form submit
@@ -127,8 +129,6 @@ export default {
    submitButtonClass: { type: String, default: '' }
  },

-  mixins: [FormPendingSubmissionKey],
-
  data () {
    return {
      loading: false,
@@ -198,7 +198,6 @@ export default {
          submission_data: form.data()
        }, '*')

-
        try {
          window.localStorage.removeItem(this.formPendingSubmissionKey)
        } catch (e) {}
@@ -216,10 +215,9 @@ export default {
        this.$emit('submitted', true)

        // If enabled display confetti
-        if(this.form.confetti_on_submission){
+        if (this.form.confetti_on_submission) {
          this.playConfetti()
        }
-
      }).catch((error) => {
        if (error.response.data && error.response.data.message) {
          this.alertError(error.response.data.message)
--- a/resources/js/components/open/forms/OpenForm.vue
+++ b/resources/js/components/open/forms/OpenForm.vue
@@ -8,9 +8,9 @@
    <transition name="fade" mode="out-in" appear>
      <template v-for="group, groupIndex in fieldGroups">
        <div v-if="currentFieldGroupIndex===groupIndex"
-              :key="groupIndex"
-              class="form-group flex flex-wrap w-full">
-
+             :key="groupIndex"
+             class="form-group flex flex-wrap w-full"
+        >
          <draggable v-model="currentFields"
                     class="flex flex-wrap transition-all"
                     :class="{'-m-6 p-2 bg-gray-50 rounded-md':dragging}"
@@ -19,14 +19,14 @@
                     @start="onDragStart" @end="onDragEnd"
          >
            <open-form-field v-for="field in group"
-                              :key="field.id + formVersionId"
-                              :field="field"
-                              :show-hidden="showHidden"
-                              :form="form"
-                              :data-form="dataForm"
-                              :data-form-value="dataFormValue"
-                              :theme="theme"
-                              :admin-preview="adminPreview"
+                             :key="field.id + formVersionId"
+                             :field="field"
+                             :show-hidden="showHidden"
+                             :form="form"
+                             :data-form="dataForm"
+                             :data-form-value="dataFormValue"
+                             :theme="theme"
+                             :admin-preview="adminPreview"
            />
          </draggable>
        </div>
@@ -36,8 +36,8 @@
    <!-- Captcha -->
    <template v-if="form.use_captcha && isLastPage">
      <div class="mb-3 px-2 mt-2 mx-auto w-max">
-        <vue-hcaptcha ref="hcaptcha" :sitekey="hCaptchaSiteKey" :theme="darkModeEnabled?'dark':'light'"/>
-        <has-error :form="dataForm" field="h-captcha-response"/>
+        <vue-hcaptcha ref="hcaptcha" :sitekey="hCaptchaSiteKey" :theme="darkModeEnabled?'dark':'light'" />
+        <has-error :form="dataForm" field="h-captcha-response" />
      </div>
    </template>

@@ -49,7 +49,7 @@
        {{ previousFieldsPageBreak.previous_btn_text }}
      </open-form-button>

-      <slot v-if="isLastPage" name="submit-btn" :submitForm="submitForm"/>
+      <slot v-if="isLastPage" name="submit-btn" :submitForm="submitForm" />
      <open-form-button v-else native-type="button" :color="form.color" :theme="theme" class="mt-2 px-8 mx-1"
                        @click="nextPage"
      >
@@ -70,12 +70,12 @@ import clonedeep from 'clone-deep'
 import FormLogicPropertyResolver from '../../../forms/FormLogicPropertyResolver.js'
 import OpenFormField from './OpenFormField.vue'
 import draggable from 'vuedraggable'
-const VueHcaptcha = () => import('@hcaptcha/vue-hcaptcha')
 import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key.js'
+const VueHcaptcha = () => import('@hcaptcha/vue3-hcaptcha')

 export default {
  name: 'OpenForm',
-  components: {draggable, OpenFormField, OpenFormButton, VueHcaptcha},
+  components: { draggable, OpenFormField, OpenFormButton, VueHcaptcha },
  mixins: [FormPendingSubmissionKey],
  props: {
    form: {
@@ -98,9 +98,9 @@ export default {
      type: Array,
      required: true
    },
-    adminPreview: { type: Boolean, default: false }, // If used in FormEditorPreview
+    adminPreview: { type: Boolean, default: false } // If used in FormEditorPreview
  },
-  data() {
+  data () {
    return {
      dataForm: null,
      currentFieldGroupIndex: 0,
@@ -122,7 +122,7 @@ export default {
    /**
     * Create field groups (or Page) using page breaks if any
     */
-    fieldGroups() {
+    fieldGroups () {
      if (!this.fields) return []
      const groups = []
      let currentGroup = []
@@ -161,12 +161,12 @@ export default {
    /**
     * Returns the page break block for the current group of fields
     */
-    currentFieldsPageBreak() {
+    currentFieldsPageBreak () {
      const block = this.currentFields[this.currentFields.length - 1]
      if (block && block.type === 'nf-page-break') return block
      return null
    },
-    previousFieldsPageBreak() {
+    previousFieldsPageBreak () {
      if (this.currentFieldGroupIndex === 0) return null
      const previousFields = this.fieldGroups[this.currentFieldGroupIndex - 1]
      const block = previousFields[previousFields.length - 1]
@@ -177,13 +177,13 @@ export default {
     * Returns true if we're on the last page
     * @returns {boolean}xs
     */
-    isLastPage() {
+    isLastPage () {
      return this.currentFieldGroupIndex === (this.fieldGroups.length - 1)
    },
-    isPublicFormPage() {
+    isPublicFormPage () {
      return this.$route.name === 'forms.show_public'
    },
-    dataFormValue() {
+    dataFormValue () {
      // For get values instead of Id for select/multi select options
      const data = this.dataForm.data()
      const selectionFields = this.fields.filter((field) => {
@@ -206,24 +206,24 @@ export default {
  watch: {
    form: {
      deep: true,
-      handler() {
+      handler () {
        this.initForm()
      }
    },
    fields: {
      deep: true,
-      handler() {
+      handler () {
        this.initForm()
      }
    },
    theme: {
-      handler() {
+      handler () {
        this.formVersionId++
      }
    },
    dataForm: {
      deep: true,
-      handler() {
+      handler () {
        if (this.isPublicFormPage && this.form && this.form.auto_save && this.dataFormValue) {
          try {
            window.localStorage.setItem(this.formPendingSubmissionKey, JSON.stringify(this.dataFormValue))
@@ -231,10 +231,10 @@ export default {
          }
        }
      }
-    },
+    }
  },

-  mounted() {
+  mounted () {
    this.initForm()

    if (window.location.href.includes('auto_submit=true')) {
@@ -244,7 +244,7 @@ export default {
  },

  methods: {
-    submitForm() {
+    submitForm () {
      if (this.currentFieldGroupIndex !== this.fieldGroups.length - 1) {
        return
      }
@@ -263,7 +263,7 @@ export default {
    /**
     * If more than one page, show first page with error
     */
-    onSubmissionFailure() {
+    onSubmissionFailure () {
      this.isAutoSubmit = false
      if (this.fieldGroups.length > 1) {
        // Find first mistake and show page
@@ -289,7 +289,7 @@ export default {
        })
      }
    },
-    async getSubmissionData() {
+    async getSubmissionData () {
      if (!this.form || !this.form.editable_submissions || !this.form.submission_id) { return null }
      await this.$store.dispatch('open/records/loadRecord',
        axios.get('/api/forms/' + this.form.slug + '/submissions/' + this.form.submission_id).then((response) => {
@@ -298,7 +298,7 @@ export default {
      )
      return this.$store.getters['open/records/getById'](this.form.submission_id)
    },
-    async initForm() {
+    async initForm () {
      if (this.isPublicFormPage && this.form.editable_submissions) {
        const urlParam = new URLSearchParams(window.location.search)
        if (urlParam && urlParam.get('submission_id')) {
@@ -325,9 +325,9 @@ export default {
              let currentDate = dateObj.getFullYear() + '-' +
                      String(dateObj.getMonth() + 1).padStart(2, '0') + '-' +
                      String(dateObj.getDate()).padStart(2, '0')
-              if(field.with_time === true){
+              if (field.with_time === true) {
                currentDate += 'T' + String(dateObj.getHours()).padStart(2, '0') + ':' +
-                String(dateObj.getMinutes()).padStart(2, '0');
+                String(dateObj.getMinutes()).padStart(2, '0')
              }
              pendingData[field.id] = currentDate
            }
@@ -367,7 +367,7 @@ export default {
          let currentDate = dateObj.getFullYear() + '-' +
            String(dateObj.getMonth() + 1).padStart(2, '0') + '-' +
            String(dateObj.getDate()).padStart(2, '0')
-          if(field.with_time === true){
+          if (field.with_time === true) {
            currentDate += 'T' + String(dateObj.getHours()).padStart(2, '0') + ':' +
            String(dateObj.getMinutes()).padStart(2, '0')
          }
@@ -375,16 +375,15 @@ export default {
        } else { // Default prefill if any
          formData[field.id] = field.prefill
        }
-
      })
      this.dataForm = new Form(formData)
    },
-    previousPage() {
+    previousPage () {
      this.currentFieldGroupIndex -= 1
      window.scrollTo({ top: 0, behavior: 'smooth' })
      return false
    },
-    nextPage() {
+    nextPage () {
      this.currentFieldGroupIndex += 1
      window.scrollTo({ top: 0, behavior: 'smooth' })
      return false
--- a/resources/js/components/open/forms/components/form-components/FormEditorPreview.vue
+++ b/resources/js/components/open/forms/components/form-components/FormEditorPreview.vue
@@ -5,10 +5,10 @@
  >
    <div class="border rounded-lg bg-white dark:bg-notion-dark w-full block transition-all max-w-5xl">
      <transition enter-active-class="linear duration-100 overflow-hidden"
-                  enter-class="max-h-0"
+                  enter-from-class="max-h-0"
                  enter-to-class="max-h-56"
                  leave-active-class="linear duration-100 overflow-hidden"
-                  leave-class="max-h-56"
+                  leave-from-class="max-h-56"
                  leave-to-class="max-h-0"
      >
        <div v-if="(form.logo_picture || form.cover_picture)">
@@ -30,11 +30,11 @@
        </div>
      </transition>
      <open-complete-form ref="form-preview" class="w-full mx-auto py-5 px-3" :class="{'max-w-lg': form && (form.width === 'centered')}"
-                            :creating="creating"
-                            :form="form"
-                            :admin-preview="true"
-                            @restarted="previewFormSubmitted=false"
-                            @submitted="previewFormSubmitted=true"
+                          :creating="creating"
+                          :form="form"
+                          :admin-preview="true"
+                          @restarted="previewFormSubmitted=false"
+                          @submitted="previewFormSubmitted=true"
      />
    </div>
    <p class="text-center text-xs text-gray-400 dark:text-gray-600 mt-1">
@@ -68,7 +68,7 @@ export default {
  },
  data () {
    return {
-      previewFormSubmitted: false,
+      previewFormSubmitted: false
    }
  },

--- a/resources/js/components/open/forms/fields/components/FieldOptions.vue
+++ b/resources/js/components/open/forms/fields/components/FieldOptions.vue
@@ -161,21 +161,23 @@
        Advanced options for your select/multiselect fields.
      </p>
      <text-area-input v-model="optionsText" :name="field.id+'_options_text'" class="mt-3"
-                       @input="onFieldOptionsChange"
                       label="Set selection options"
                       help="Add one option per line"
+                       @input="onFieldOptionsChange"
      />
      <v-checkbox v-model="field.allow_creation"
-                  name="allow_creation" @input="onFieldAllowCreationChange" help=""
+                  name="allow_creation" help="" @input="onFieldAllowCreationChange"
      >
        Allow respondent to create new options
      </v-checkbox>
      <v-checkbox v-model="field.without_dropdown" class="mt-3"
-                  name="without_dropdown" @input="onFieldWithoutDropdownChange" help=""
+                  name="without_dropdown" help="" @input="onFieldWithoutDropdownChange"
      >
        Always show all select options
      </v-checkbox>
-      <p class="text-gray-400 mb-3 text-xs">Options won't be in a dropdown anymore, but will all be visible</p>
+      <p class="text-gray-400 mb-3 text-xs">
+        Options won't be in a dropdown anymore, but will all be visible
+      </p>
    </div>

    <!-- Customization - Placeholder, Prefill, Relabel, Field Help    -->
@@ -218,7 +220,7 @@
          </template>
          <template #option="{option, selected}">
            <div class="flex items-center space-x-2 hover:text-white">
-              <country-flag size="normal" class="!-mt-[9px]" :country="option.code"/>
+              <country-flag size="normal" class="!-mt-[9px]" :country="option.code" />
              <span class="grow">{{ option.name }}</span>
              <span>{{ option.dial_code }}</span>
            </div>
@@ -297,16 +299,16 @@
      <!--   Help  -->
      <rich-text-area-input name="help" class="mt-3"
                            :form="field"
-                            :editorToolbar="editorToolbarCustom"
+                            :editor-toolbar="editorToolbarCustom"
                            label="Field Help"
                            help="Your field help will be shown below/above the field, just like this message."
                            :help-position="field.help_position"
      />
      <select-input name="help_position" class="mt-3"
                    :options="[
-                    {name:'Below input',value:'below_input'},
-                    {name:'Above input',value:'above_input'},
-                  ]"
+                      {name:'Below input',value:'below_input'},
+                      {name:'Above input',value:'above_input'},
+                    ]"
                    :form="field" label="Field Help Position"
                    @input="onFieldHelpPositionChange"
      />
@@ -322,7 +324,6 @@
                        label="Always show character limit"
        />
      </template>
-
    </div>

    <!--  Advanced Options   -->
@@ -354,19 +355,19 @@
    </div>

    <!--  Logic Block -->
-    <form-block-logic-editor class="py-2 px-4 border-b" v-model="form" :form="form" :field="field"/>
+    <form-block-logic-editor v-model="form" class="py-2 px-4 border-b" :form="form" :field="field" />
  </div>
 </template>

 <script>
-const FormBlockLogicEditor = () => import('../../components/form-logic-components/FormBlockLogicEditor.vue')
 import timezones from '../../../../../../data/timezones.json'
 import countryCodes from '../../../../../../data/country_codes.json'
-import CountryFlag from 'vue-country-flag'
+import CountryFlag from 'vue-country-flag-next'
+const FormBlockLogicEditor = () => import('../../components/form-logic-components/FormBlockLogicEditor.vue')

 export default {
  name: 'FieldOptions',
-  components: {FormBlockLogicEditor, CountryFlag},
+  components: { FormBlockLogicEditor, CountryFlag },
  props: {
    field: {
      type: Object,
@@ -377,21 +378,21 @@ export default {
      required: false
    }
  },
-  data() {
+  data () {
    return {
      typesWithoutPlaceholder: ['date', 'checkbox', 'files'],
      editorToolbarCustom: [
-        ['bold', 'italic', 'underline', 'link'],
+        ['bold', 'italic', 'underline', 'link']
      ],
-      allCountries: countryCodes,
+      allCountries: countryCodes
    }
  },

  computed: {
-    hasPlaceholder() {
+    hasPlaceholder () {
      return !this.typesWithoutPlaceholder.includes(this.field.type)
    },
-    prefillSelectsOptions() {
+    prefillSelectsOptions () {
      if (!['select', 'multi_select'].includes(this.field.type)) return {}

      return this.field[this.field.type].options.map(option => {
@@ -401,7 +402,7 @@ export default {
        }
      })
    },
-    timezonesOptions() {
+    timezonesOptions () {
      if (this.field.type !== 'date') return []
      return timezones.map((timezone) => {
        return {
@@ -410,22 +411,22 @@ export default {
        }
      })
    },
-    displayBasedOnAdvanced() {
+    displayBasedOnAdvanced () {
      if (this.field.generates_uuid || this.field.generates_auto_increment_id) {
        return false
      }
      return true
    },
-    optionsText() {
+    optionsText () {
      return this.field[this.field.type].options.map(option => {
        return option.name
-      }).join("\n")
-    },
+      }).join('\n')
+    }
  },

  watch: {
    'field.width': {
-      handler(val) {
+      handler (val) {
        if (val === undefined || val === null) {
          this.$set(this.field, 'width', 'full')
        }
@@ -433,7 +434,7 @@ export default {
      immediate: true
    },
    'field.align': {
-      handler(val) {
+      handler (val) {
        if (val === undefined || val === null) {
          this.$set(this.field, 'align', 'left')
        }
@@ -442,32 +443,32 @@ export default {
    }
  },

-  created() {
+  created () {
    if (this.field?.width === undefined || this.field?.width === null) {
      this.$set(this.field, 'width', 'full')
    }
  },

-  mounted() {
+  mounted () {
    if (['text', 'number', 'url', 'email'].includes(this.field?.type) && !this.field?.max_char_limit) {
      this.field.max_char_limit = 2000
    }
  },

  methods: {
-    onFieldDisabledChange(val) {
+    onFieldDisabledChange (val) {
      this.$set(this.field, 'disabled', val)
      if (this.field.disabled) {
        this.$set(this.field, 'hidden', false)
      }
    },
-    onFieldRequiredChange(val) {
+    onFieldRequiredChange (val) {
      this.$set(this.field, 'required', val)
      if (this.field.required) {
        this.$set(this.field, 'hidden', false)
      }
    },
-    onFieldHiddenChange(val) {
+    onFieldHiddenChange (val) {
      this.$set(this.field, 'hidden', val)
      if (this.field.hidden) {
        this.$set(this.field, 'required', false)
@@ -477,49 +478,49 @@ export default {
        this.$set(this.field, 'generates_auto_increment_id', false)
      }
    },
-    onFieldDateRangeChange(val) {
+    onFieldDateRangeChange (val) {
      this.$set(this.field, 'date_range', val)
      if (this.field.date_range) {
        this.$set(this.field, 'with_time', false)
        this.$set(this.field, 'prefill_today', false)
      }
    },
-    onFieldWithTimeChange(val) {
+    onFieldWithTimeChange (val) {
      this.$set(this.field, 'with_time', val)
      if (this.field.with_time) {
        this.$set(this.field, 'date_range', false)
      }
    },
-    onFieldGenUIdChange(val) {
+    onFieldGenUIdChange (val) {
      this.$set(this.field, 'generates_uuid', val)
      if (this.field.generates_uuid) {
        this.$set(this.field, 'generates_auto_increment_id', false)
        this.$set(this.field, 'hidden', true)
      }
    },
-    onFieldGenAutoIdChange(val) {
+    onFieldGenAutoIdChange (val) {
      this.$set(this.field, 'generates_auto_increment_id', val)
      if (this.field.generates_auto_increment_id) {
        this.$set(this.field, 'generates_uuid', false)
        this.$set(this.field, 'hidden', true)
      }
    },
-    initRating() {
+    initRating () {
      if (this.field.is_rating && !this.field.rating_max_value) {
        this.$set(this.field, 'rating_max_value', 5)
      }
    },
-    onFieldOptionsChange(val) {
-      const vals = (val) ? val.trim().split("\n") : []
+    onFieldOptionsChange (val) {
+      const vals = (val) ? val.trim().split('\n') : []
      const tmpOpts = vals.map(name => {
        return {
          name: name,
          id: name
        }
      })
-      this.$set(this.field, this.field.type, {'options': tmpOpts})
+      this.$set(this.field, this.field.type, { options: tmpOpts })
    },
-    onFieldPrefillTodayChange(val) {
+    onFieldPrefillTodayChange (val) {
      this.$set(this.field, 'prefill_today', val)
      if (this.field.prefill_today) {
        this.$set(this.field, 'prefill', 'Pre-filled with current date')
@@ -530,38 +531,38 @@ export default {
        this.$set(this.field, 'prefill', null)
      }
    },
-    onFieldAllowCreationChange(val) {
+    onFieldAllowCreationChange (val) {
      this.$set(this.field, 'allow_creation', val)
      if (this.field.allow_creation) {
        this.$set(this.field, 'without_dropdown', false)
      }
    },
-    onFieldWithoutDropdownChange(val) {
+    onFieldWithoutDropdownChange (val) {
      this.$set(this.field, 'without_dropdown', val)
      if (this.field.without_dropdown) {
        this.$set(this.field, 'allow_creation', false)
      }
    },
-    onFieldDisablePastDatesChange(val) {
+    onFieldDisablePastDatesChange (val) {
      this.$set(this.field, 'disable_past_dates', val)
      if (this.field.disable_past_dates) {
        this.$set(this.field, 'disable_future_dates', false)
        this.$set(this.field, 'prefill_today', false)
      }
    },
-    onFieldDisableFutureDatesChange(val) {
+    onFieldDisableFutureDatesChange (val) {
      this.$set(this.field, 'disable_future_dates', val)
      if (this.field.disable_future_dates) {
        this.$set(this.field, 'disable_past_dates', false)
        this.$set(this.field, 'prefill_today', false)
      }
    },
-    onFieldHelpPositionChange(val) {
+    onFieldHelpPositionChange (val) {
      if (!val) {
        this.$set(this.field, 'help_position', 'below_input')
      }
    },
-    selectAllCountries() {
+    selectAllCountries () {
      this.$set(this.field, 'unavailable_countries', this.allCountries.map(item => {
        return item.code
      }))