Migrate to Vite (#71)

* Replace DateInput * Migrate to Vite * Ecxluding optimize to fix notifs in dev * Dateinput changes * Fixs on new DateInput * wip * Updated date input + cleaning * Udpated readme Co-authored-by: Julien Nahum <julien@nahum.net>
2023-01-21 17:27:37 +05:30
parent b9d50bc096
commit 970893329b
488 changed files with 1397 additions and 10491 deletions
--- a/resources/js/components/open/forms/OpenCompleteForm.vue
+++ b/resources/js/components/open/forms/OpenCompleteForm.vue
@@ -122,12 +122,12 @@

 <script>
 import Form from 'vform'
-import OpenForm from './OpenForm'
-import OpenFormButton from './OpenFormButton'
-import { themes } from '~/config/form-themes'
-import VButton from '../../common/Button'
-import VTransition from '../../common/transitions/VTransition'
-import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key'
+import OpenForm from './OpenForm.vue'
+import OpenFormButton from './OpenFormButton.vue'
+import { themes } from '~/config/form-themes.js'
+import VButton from '../../common/Button.vue'
+import VTransition from '../../common/transitions/VTransition.vue'
+import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key.js'

 export default {
  components: { VTransition, VButton, OpenFormButton, OpenForm },
--- a/resources/js/components/open/forms/OpenForm.vue
+++ b/resources/js/components/open/forms/OpenForm.vue
@@ -63,12 +63,12 @@
 <script>
 import axios from 'axios'
 import Form from 'vform'
-import OpenFormButton from './OpenFormButton'
+import OpenFormButton from './OpenFormButton.vue'
 import clonedeep from 'clone-deep'
-import FormLogicPropertyResolver from '../../../forms/FormLogicPropertyResolver'
+import FormLogicPropertyResolver from '../../../forms/FormLogicPropertyResolver.js'

 const VueHcaptcha = () => import('@hcaptcha/vue-hcaptcha')
-import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key'
+import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key.js'

 export default {
  name: 'OpenForm',
@@ -381,9 +381,6 @@ export default {
      if (field.type === 'signature') {
        return 'SignatureInput'
      }
-      if (field.type === 'date' && field.simple_date_input) {
-        return 'SimpleDateInput'
-      }
      return this.fieldComponents[field.type]
    },
    getFieldClasses(field) {
@@ -444,9 +441,6 @@ export default {
        } else if (field.disable_future_dates) {
          inputProperties.disableFutureDates = true
        }
-        if (field.simple_date_input && field.simple_date_input_format) {
-          inputProperties.dateFormat = field.simple_date_input_format
-        }
      } else if (field.type === 'files' || (field.type === 'url' && field.file_upload)) {
        inputProperties.multiple = (field.multiple !== undefined && field.multiple)
        inputProperties.mbLimit = 5
--- a/resources/js/components/open/forms/OpenFormButton.vue
+++ b/resources/js/components/open/forms/OpenFormButton.vue
@@ -10,7 +10,7 @@
 </template>

 <script>
-import { themes } from '~/config/form-themes'
+import { themes } from '~/config/form-themes.js'

 export default {
  name: 'OpenFormButton',
--- a/resources/js/components/open/forms/components/FormEditor.vue
+++ b/resources/js/components/open/forms/components/FormEditor.vue
@@ -54,17 +54,17 @@

 <script>
 import {mapGetters} from 'vuex'
-import FormErrorModal from './form-components/FormErrorModal'
-import FormInformation from './form-components/FormInformation'
-import FormStructure from './form-components/FormStructure'
-import FormCustomization from './form-components/FormCustomization'
-import FormCustomCode from './form-components/FormCustomCode'
-import FormAboutSubmission from './form-components/FormAboutSubmission'
-import FormNotifications from './form-components/FormNotifications'
-import FormIntegrations from './form-components/FormIntegrations'
-import FormEditorPreview from './form-components/FormEditorPreview'
-import FormSecurityPrivacy from './form-components/FormSecurityPrivacy'
-import saveUpdateAlert from '../../../../mixins/forms/saveUpdateAlert'
+import FormErrorModal from './form-components/FormErrorModal.vue'
+import FormInformation from './form-components/FormInformation.vue'
+import FormStructure from './form-components/FormStructure.vue'
+import FormCustomization from './form-components/FormCustomization.vue'
+import FormCustomCode from './form-components/FormCustomCode.vue'
+import FormAboutSubmission from './form-components/FormAboutSubmission.vue'
+import FormNotifications from './form-components/FormNotifications.vue'
+import FormIntegrations from './form-components/FormIntegrations.vue'
+import FormEditorPreview from './form-components/FormEditorPreview.vue'
+import FormSecurityPrivacy from './form-components/FormSecurityPrivacy.vue'
+import saveUpdateAlert from '../../../../mixins/forms/saveUpdateAlert.js'

 export default {
  name: 'FormEditor',
--- a/resources/js/components/open/forms/components/FormFieldsEditor.vue
+++ b/resources/js/components/open/forms/components/FormFieldsEditor.vue
@@ -161,13 +161,13 @@

 <script>
 import draggable from 'vuedraggable'
-import FormFieldOptionsModal from '../fields/FormFieldOptionsModal'
-import AddFormBlockModal from './form-components/AddFormBlockModal'
-import FormBlockOptionsModal from '../fields/FormBlockOptionsModal'
-import ProTag from '../../../common/ProTag'
+import FormFieldOptionsModal from '../fields/FormFieldOptionsModal.vue'
+import AddFormBlockModal from './form-components/AddFormBlockModal.vue'
+import FormBlockOptionsModal from '../fields/FormBlockOptionsModal.vue'
+import ProTag from '../../../common/ProTag.vue'
 import clonedeep from 'clone-deep'
-import EditableDiv from '../../../common/EditableDiv'
-import VButton from "../../../common/Button";
+import EditableDiv from '../../../common/EditableDiv.vue'
+import VButton from "../../../common/Button.vue";

 export default {
  name: 'FormFieldsEditor',
--- a/resources/js/components/open/forms/components/FormStats.vue
+++ b/resources/js/components/open/forms/components/FormStats.vue
@@ -39,7 +39,7 @@ import {
  CategoryScale,
  PointElement
 } from 'chart.js'
-import ProTag from '../../../common/ProTag'
+import ProTag from '../../../common/ProTag.vue'

 ChartJS.register(
  Title,
--- a/resources/js/components/open/forms/components/FormSubmissions.vue
+++ b/resources/js/components/open/forms/components/FormSubmissions.vue
@@ -62,10 +62,10 @@

 <script>
 import axios from 'axios'
-import ScrollShadow from '../../../common/ScrollShadow'
-import OpenTable from '../../tables/OpenTable'
+import ScrollShadow from '../../../common/ScrollShadow.vue'
+import OpenTable from '../../tables/OpenTable.vue'
 import clonedeep from "clone-deep";
-import VSwitch from '../../../forms/components/VSwitch'
+import VSwitch from '../../../forms/components/VSwitch.vue'

 export default {
  name: 'FormSubmissions',
--- a/resources/js/components/open/forms/components/form-components/AddFormBlockModal.vue
+++ b/resources/js/components/open/forms/components/form-components/AddFormBlockModal.vue
@@ -229,7 +229,7 @@
 <script>

 import Form from 'vform'
-import VButton from '../../../../common/Button'
+import VButton from '../../../../common/Button.vue'

 export default {
  name: 'AddFormBlockModal',
--- a/resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue
+++ b/resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue
@@ -149,9 +149,9 @@
 </template>

 <script>
-import Collapse from '../../../../common/Collapse'
-import ProTag from '../../../../common/ProTag'
-import VTransition from '../../../../common/transitions/VTransition'
+import Collapse from '../../../../common/Collapse.vue'
+import ProTag from '../../../../common/ProTag.vue'
+import VTransition from '../../../../common/transitions/VTransition.vue'

 export default {
  components: {Collapse, ProTag, VTransition},
--- a/resources/js/components/open/forms/components/form-components/FormCustomCode.vue
+++ b/resources/js/components/open/forms/components/form-components/FormCustomCode.vue
@@ -26,9 +26,9 @@
 </template>

 <script>
-import Collapse from '../../../../common/Collapse'
-import ProTag from '../../../../common/ProTag'
-import CodeInput from '../../../../forms/CodeInput'
+import Collapse from '../../../../common/Collapse.vue'
+import ProTag from '../../../../common/ProTag.vue'
+import CodeInput from '../../../../forms/CodeInput.vue'

 export default {
  components: { Collapse, ProTag, CodeInput },
--- a/resources/js/components/open/forms/components/form-components/FormCustomization.vue
+++ b/resources/js/components/open/forms/components/form-components/FormCustomization.vue
@@ -75,8 +75,8 @@
 </template>

 <script>
-import Collapse from '../../../../common/Collapse'
-import ProTag from '../../../../common/ProTag'
+import Collapse from '../../../../common/Collapse.vue'
+import ProTag from '../../../../common/ProTag.vue'

 export default {
  components: { Collapse, ProTag },
--- a/resources/js/components/open/forms/components/form-components/FormEditorPreview.vue
+++ b/resources/js/components/open/forms/components/form-components/FormEditorPreview.vue
@@ -62,8 +62,8 @@
 </template>

 <script>
-import VSwitch from '../../../../forms/components/VSwitch'
-import OpenCompleteForm from '../../OpenCompleteForm'
+import VSwitch from '../../../../forms/components/VSwitch.vue'
+import OpenCompleteForm from '../../OpenCompleteForm.vue'

 export default {
  components: { OpenCompleteForm, VSwitch },
--- a/resources/js/components/open/forms/components/form-components/FormInformation.vue
+++ b/resources/js/components/open/forms/components/form-components/FormInformation.vue
@@ -70,8 +70,8 @@
 </template>

 <script>
-import Collapse from '../../../../common/Collapse'
-import SelectInput from '../../../../forms/SelectInput'
+import Collapse from '../../../../common/Collapse.vue'
+import SelectInput from '../../../../forms/SelectInput.vue'
 import { mapState } from 'vuex'
 import clonedeep from 'clone-deep'

--- a/resources/js/components/open/forms/components/form-components/FormIntegrations.vue
+++ b/resources/js/components/open/forms/components/form-components/FormIntegrations.vue
@@ -41,8 +41,8 @@
 </template>

 <script>
-import Collapse from '../../../../common/Collapse'
-import ProTag from '../../../../common/ProTag'
+import Collapse from '../../../../common/Collapse.vue'
+import ProTag from '../../../../common/ProTag.vue'

 export default {
  components: {Collapse, ProTag},
--- a/resources/js/components/open/forms/components/form-components/FormNotifications.vue
+++ b/resources/js/components/open/forms/components/form-components/FormNotifications.vue
@@ -20,11 +20,11 @@
 </template>

 <script>
-import Collapse from '../../../../common/Collapse'
-import ProTag from '../../../../common/ProTag'
-import FormNotificationsOption from './components/FormNotificationsOption'
-import FormNotificationsSlack from './components/FormNotificationsSlack'
-import FormNotificationsSubmissionConfirmation from './components/FormNotificationsSubmissionConfirmation'
+import Collapse from '../../../../common/Collapse.vue'
+import ProTag from '../../../../common/ProTag.vue'
+import FormNotificationsOption from './components/FormNotificationsOption.vue'
+import FormNotificationsSlack from './components/FormNotificationsSlack.vue'
+import FormNotificationsSubmissionConfirmation from './components/FormNotificationsSubmissionConfirmation.vue'

 export default {
  components: { FormNotificationsSubmissionConfirmation, FormNotificationsSlack, FormNotificationsOption, Collapse, ProTag },
--- a/resources/js/components/open/forms/components/form-components/FormSecurityPrivacy.vue
+++ b/resources/js/components/open/forms/components/form-components/FormSecurityPrivacy.vue
@@ -25,8 +25,8 @@
 </template>

 <script>
-import Collapse from '../../../../common/Collapse'
-import ProTag from '../../../../common/ProTag'
+import Collapse from '../../../../common/Collapse.vue'
+import ProTag from '../../../../common/ProTag.vue'

 export default {
  components: { Collapse, ProTag },
--- a/resources/js/components/open/forms/components/form-components/FormStructure.vue
+++ b/resources/js/components/open/forms/components/form-components/FormStructure.vue
@@ -15,8 +15,8 @@
 </template>

 <script>
-import Collapse from '../../../../common/Collapse'
-import FormFieldsEditor from '../FormFieldsEditor'
+import Collapse from '../../../../common/Collapse.vue'
+import FormFieldsEditor from '../FormFieldsEditor.vue'

 export default {
  components: { Collapse, FormFieldsEditor },
--- a/resources/js/components/open/forms/components/form-components/components/FormNotificationsOption.vue
+++ b/resources/js/components/open/forms/components/form-components/components/FormNotificationsOption.vue
@@ -42,7 +42,7 @@
 </template>

 <script>
-import ProTag from '../../../../../common/ProTag'
+import ProTag from '../../../../../common/ProTag.vue'

 export default {
  components: { ProTag },
--- a/resources/js/components/open/forms/components/form-components/components/FormNotificationsSlack.vue
+++ b/resources/js/components/open/forms/components/form-components/components/FormNotificationsSlack.vue
@@ -40,7 +40,7 @@
 </template>

 <script>
-import ProTag from '../../../../../common/ProTag'
+import ProTag from '../../../../../common/ProTag.vue'

 export default {
  components: { ProTag },
--- a/resources/js/components/open/forms/components/form-components/components/FormNotificationsSubmissionConfirmation.vue
+++ b/resources/js/components/open/forms/components/form-components/components/FormNotificationsSubmissionConfirmation.vue
@@ -52,7 +52,7 @@
 </template>

 <script>
-import ProTag from '../../../../../common/ProTag'
+import ProTag from '../../../../../common/ProTag.vue'

 export default {
  components: { ProTag },
--- a/resources/js/components/open/forms/components/form-logic-components/ConditionEditor.vue
+++ b/resources/js/components/open/forms/components/form-logic-components/ConditionEditor.vue
@@ -32,9 +32,9 @@

 <script>
 import QueryBuilder from 'query-builder-vue'
-import ColumnCondition from './ColumnCondition'
+import ColumnCondition from './ColumnCondition.vue'
 import Vue from 'vue'
-import GroupControlSlot from './GroupControlSlot'
+import GroupControlSlot from './GroupControlSlot.vue'

 export default {

--- a/resources/js/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue
+++ b/resources/js/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue
@@ -66,10 +66,10 @@
 </template>

 <script>
-import ProTag from '../../../../common/ProTag'
-import ConditionEditor from './ConditionEditor'
-import Modal from '../../../../Modal'
-import SelectInput from '../../../../forms/SelectInput'
+import ProTag from '../../../../common/ProTag.vue'
+import ConditionEditor from './ConditionEditor.vue'
+import Modal from '../../../../Modal.vue'
+import SelectInput from '../../../../forms/SelectInput.vue'
 import clonedeep from 'clone-deep'

 export default {
--- a/resources/js/components/open/forms/fields/FormBlockOptionsModal.vue
+++ b/resources/js/components/open/forms/fields/FormBlockOptionsModal.vue
@@ -139,9 +139,9 @@
 </template>

 <script>
-import ProTag from '../../../common/ProTag'
-const FormBlockLogicEditor = () => import('../components/form-logic-components/FormBlockLogicEditor')
-import CodeInput from '../../../forms/CodeInput'
+import ProTag from '../../../common/ProTag.vue'
+const FormBlockLogicEditor = () => import('../components/form-logic-components/FormBlockLogicEditor.vue')
+import CodeInput from '../../../forms/CodeInput.vue'

 export default {
  name: 'FormBlockOptionsModal',
--- a/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
+++ b/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
@@ -150,15 +150,6 @@
        <p class="text-gray-400 mb-5">
          Include time. Or not. This cannot be used with the date range option yet.
        </p>
-        <v-checkbox v-if="field.with_time"
-                    v-model="field.use_am_pm"
-                    name="use_am_pm"
-        >
-          Use 12h AM/PM format
-        </v-checkbox>
-        <p v-if="field.with_time" class="text-gray-400 mb-5">
-          By default, input uses the 24 hours format
-        </p>

        <select-input v-if="field.with_time" name="timezone" class="mt-4"
                      :form="field" :options="timezonesOptions"
@@ -188,18 +179,6 @@
        >
          Disable future dates
        </v-checkbox>
-
-        <v-checkbox v-model="field.simple_date_input"
-                    name="simple_date_input" class="mb-3"
-                    @input="onFieldSimpleDateInputChange"
-        >
-          Simple date input
-        </v-checkbox>
-        <select-input v-if="field.simple_date_input" v-model="field.simple_date_input_format"
-                      name="simple_date_input_format"
-                      class="mt-4" :form="field" :options="dateFormatOptions"
-                      label="Date format"
-        />
      </div>

      <!-- select/multiselect Options   -->
@@ -264,7 +243,7 @@
                      :multiple="field.type==='multi_select'"
        />
        <date-input v-else-if="field.type==='date' && field.prefill_today!==true" name="prefill" class="mt-4"
-                    :form="field" :with-time="field.with_time===true" :am-pm="field.use_am_pm===true"
+                    :form="field" :with-time="field.with_time===true"
                    :date-range="field.date_range===true"
                    label="Pre-filled value"
        />
@@ -370,10 +349,10 @@
 <script>

 import timezones from '../../../../../data/timezones.json'
-import ProTag from "../../../common/ProTag"
+import ProTag from "../../../common/ProTag.vue"

-const FormBlockLogicEditor = () => import('../components/form-logic-components/FormBlockLogicEditor')
-import ChangeFieldType from "./components/ChangeFieldType"
+const FormBlockLogicEditor = () => import('../components/form-logic-components/FormBlockLogicEditor.vue')
+import ChangeFieldType from "./components/ChangeFieldType.vue"

 export default {
  name: 'FormFieldOptionsModal',
@@ -432,16 +411,6 @@ export default {
        return option.name
      }).join("\n")
    },
-    dateFormatOptions() {
-      if (this.field.type !== 'date') return []
-      let formats = ['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY/MM/DD']
-      return formats.map((format) => {
-        return {
-          name: format,
-          value: format
-        }
-      })
-    }
  },

  watch: {},
@@ -495,7 +464,6 @@ export default {
    },
    onFieldWithTimeChange(val) {
      this.$set(this.field, 'with_time', val)
-      this.$set(this.field, 'use_am_pm', false)
      if (this.field.with_time) {
        this.$set(this.field, 'date_range', false)
        this.$set(this.field, 'simple_date_input', false)
--- a/resources/js/components/open/forms/fields/components/ChangeFieldType.vue
+++ b/resources/js/components/open/forms/fields/components/ChangeFieldType.vue
@@ -20,7 +20,7 @@
 </template>

 <script>
-import Dropdown from '../../../../common/Dropdown'
+import Dropdown from '../../../../common/Dropdown.vue'

 export default {
  name: 'ChangeFieldType',