-
+
-
\ No newline at end of file
+
diff --git a/resources/js/components/forms/index.js b/resources/js/components/forms/index.js
index a81e16e..ac17d1f 100644
--- a/resources/js/components/forms/index.js
+++ b/resources/js/components/forms/index.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineAsyncComponent } from 'vue'
import HasError from './validation/HasError.vue'
import AlertError from './validation/AlertError.vue'
@@ -16,29 +16,38 @@ import RatingInput from './RatingInput.vue'
import FlatSelectInput from './FlatSelectInput.vue'
import ToggleSwitchInput from './ToggleSwitchInput.vue'
-// Components that are registered globaly.
-[
- HasError,
- AlertError,
- AlertSuccess,
- VCheckbox,
- VSelect,
- CheckboxInput,
- ColorInput,
- TextInput,
- SelectInput,
- TextAreaInput,
- FileInput,
- ImageInput,
- RatingInput,
- FlatSelectInput,
- ToggleSwitchInput
-].forEach(Component => {
- Vue.component(Component.name, Component)
-})
+export function registerComponents (app) {
+ [
+ HasError,
+ AlertError,
+ AlertSuccess,
+ VCheckbox,
+ VSelect,
+ CheckboxInput,
+ ColorInput,
+ TextInput,
+ SelectInput,
+ TextAreaInput,
+ FileInput,
+ ImageInput,
+ RatingInput,
+ FlatSelectInput,
+ ToggleSwitchInput
+ ].forEach(Component => {
+ app.component(Component.name, Component)
+ })
-// Lazy load some heavy component
-Vue.component('SignatureInput', () => import('./SignatureInput.vue'))
-Vue.component('RichTextAreaInput', () => import('./RichTextAreaInput.vue'))
-Vue.component('DateInput', () => import('./DateInput.vue'))
-Vue.component('PhoneInput', () => import('./PhoneInput.vue'))
+ // Register async components
+ app.component('SignatureInput', defineAsyncComponent(() =>
+ import('./SignatureInput.vue')
+ ))
+ app.component('RichTextAreaInput', defineAsyncComponent(() =>
+ import('./RichTextAreaInput.vue')
+ ))
+ app.component('PhoneInput', defineAsyncComponent(() =>
+ import('./PhoneInput.vue')
+ ))
+ app.component('DateInput', defineAsyncComponent(() =>
+ import('./DateInput.vue')
+ ))
+}
diff --git a/resources/js/components/forms/useFormInput.js b/resources/js/components/forms/useFormInput.js
index 12238a0..2067314 100644
--- a/resources/js/components/forms/useFormInput.js
+++ b/resources/js/components/forms/useFormInput.js
@@ -1,4 +1,4 @@
-import { ref, computed, watch, defineEmits } from 'vue'
+import { ref, computed, watch } from 'vue'
import { themes } from '~/config/form-themes.js'
export const inputProps = {
@@ -18,7 +18,7 @@ export const inputProps = {
wrapperClass: { type: String, default: 'relative mb-3' }
}
-export function useFormInput (props) {
+export function useFormInput (props, context, formPrefixKey = null) {
const content = ref(props.modelValue)
const inputStyle = computed(() => {
@@ -38,13 +38,13 @@ export function useFormInput (props) {
const compVal = computed({
get: () => {
if (props.form) {
- return props.form[props.name]
+ return props.form[(formPrefixKey || '') + props.name]
}
return content.value
},
set: (val) => {
if (props.form) {
- props.form[props.name] = val
+ props.form[(formPrefixKey || '') + props.name] = val
} else {
content.value = val
}
@@ -53,7 +53,7 @@ export function useFormInput (props) {
props.form.errors.clear(props.name)
}
- defineEmits('update:modelValue', compVal.value)
+ context.emit('update:modelValue', compVal.value)
}
})
diff --git a/resources/js/components/index.js b/resources/js/components/index.js
index 7f1e255..36c2503 100644
--- a/resources/js/components/index.js
+++ b/resources/js/components/index.js
@@ -1,21 +1,24 @@
-import './common'
-import './forms'
+import { defineAsyncComponent } from 'vue'
+import { registerComponents as registerCommonComponents } from './common'
+import { registerComponents as registerFormComponents } from './forms'
-import Vue from 'vue'
import Child from './Child.vue'
import Modal from './Modal.vue'
-
import Loader from './common/Loader.vue'
-// Components that are registered globaly.
-[
- Child,
- Modal,
- Loader
-].forEach(Component => {
- Vue.component(Component.name, Component)
-})
+export function registerComponents (app) {
+ [Child, Modal, Loader].forEach(Component => {
+ app.component(Component.name, Component)
+ })
-// Lazy load some heavy component
-Vue.component('FormEditor', () => import('./open/forms/components/FormEditor.vue'))
-Vue.component('NotionPage', () => import('./open/NotionPage.vue'))
+ registerCommonComponents(app)
+ registerFormComponents(app)
+
+ // Register async components
+ app.component('FormEditor', defineAsyncComponent(() =>
+ import('./open/forms/components/FormEditor.vue')
+ ))
+ app.component('NotionPage', defineAsyncComponent(() =>
+ import('./open/NotionPage.vue')
+ ))
+}
diff --git a/resources/js/components/open/forms/components/AdvancedFormUrlSettings.vue b/resources/js/components/open/forms/components/AdvancedFormUrlSettings.vue
index 4884716..0cce1d6 100644
--- a/resources/js/components/open/forms/components/AdvancedFormUrlSettings.vue
+++ b/resources/js/components/open/forms/components/AdvancedFormUrlSettings.vue
@@ -1,5 +1,5 @@
-
+
@@ -10,15 +10,15 @@
diff --git a/resources/js/components/open/forms/components/FormFieldsEditor.vue b/resources/js/components/open/forms/components/FormFieldsEditor.vue
index 27557a6..9d8c0e2 100644
--- a/resources/js/components/open/forms/components/FormFieldsEditor.vue
+++ b/resources/js/components/open/forms/components/FormFieldsEditor.vue
@@ -205,7 +205,7 @@ export default {
formFields: {
deep: true,
handler () {
- this.$set(this.form, 'properties', this.formFields)
+ this.form.properties = this.formFields
}
},
@@ -228,21 +228,21 @@ export default {
methods: {
onChangeName (field, newName) {
- this.$set(field, 'name', newName)
+ field.name = newName
},
toggleHidden (field) {
- this.$set(field, 'hidden', !field.hidden)
+ field.hidden = !field.hidden
if (field.hidden) {
- this.$set(field, 'required', false)
+ field.required = false
} else {
- this.$set(field, 'generates_uuid', false)
- this.$set(field, 'generates_auto_increment_id', false)
+ field.generates_uuid = false
+ field.generates_auto_increment_id = false
}
},
toggleRequired (field) {
- this.$set(field, 'required', !field.required)
+ field.required = !field.required
if (field.required) {
- this.$set(field, 'hidden', false)
+ field.hidden = false
}
},
getDefaultFields () {
@@ -283,7 +283,7 @@ export default {
return field
})
}
- this.$set(this.form, 'properties', this.formFields)
+ this.form.properties = this.formFields
},
generateUUID () {
let d = new Date().getTime()// Timestamp
@@ -318,7 +318,7 @@ export default {
removeBlock (blockIndex) {
const newFields = clonedeep(this.formFields)
newFields.splice(blockIndex, 1)
- this.$set(this, 'formFields', newFields)
+ this.formFields = newFields
this.closeSidebar()
},
closeSidebar () {
diff --git a/resources/js/components/open/forms/components/FormSubmissions.vue b/resources/js/components/open/forms/components/FormSubmissions.vue
index 0c50f64..e1fce1d 100644
--- a/resources/js/components/open/forms/components/FormSubmissions.vue
+++ b/resources/js/components/open/forms/components/FormSubmissions.vue
@@ -1,6 +1,7 @@
+ class="my-4 w-full mx-auto"
+ >
Form Submissions
@@ -9,8 +10,8 @@
@@ -19,33 +20,43 @@
- Form Fields
+
+ Form Fields
+
{{ field.name }}
-
+
- Removed Fields
+
+ Removed Fields
+
{{ field.name }}
-
+
-
+
@@ -62,8 +73,7 @@
:loading="isLoading"
@resize="dataChanged()"
@deleted="onDeleteRecord()"
- >
-
+ />
@@ -75,14 +85,14 @@ import Fuse from 'fuse.js'
import Form from 'vform'
import ScrollShadow from '../../../common/ScrollShadow.vue'
import OpenTable from '../../tables/OpenTable.vue'
-import clonedeep from "clone-deep";
+import clonedeep from 'clone-deep'
import VSwitch from '../../../forms/components/VSwitch.vue'
export default {
name: 'FormSubmissions',
- components: {ScrollShadow, OpenTable, VSwitch},
+ components: { ScrollShadow, OpenTable, VSwitch },
props: {},
- data() {
+ data () {
return {
formInitDone: false,
isLoading: false,
@@ -98,38 +108,25 @@ export default {
})
}
},
- mounted() {
- this.initFormStructure()
- this.getSubmissionsData()
- },
- watch: {
- form() {
- if (this.form === null) {
- return
- }
- this.initFormStructure()
- this.getSubmissionsData()
- }
- },
computed: {
form: {
- get() {
+ get () {
return this.$store.state['open/working_form'].content
},
- set(value) {
+ set (value) {
this.$store.commit('open/working_form/set', value)
}
},
- exportUrl() {
+ exportUrl () {
if (!this.form) {
return ''
}
return '/api/open/forms/' + this.form.id + '/submissions/export'
},
filteredData () {
- if(!this.tableData) return []
+ if (!this.tableData) return []
- let filteredData = clonedeep(this.tableData)
+ const filteredData = clonedeep(this.tableData)
if (this.searchForm.search === '' || this.searchForm.search === null) {
return filteredData
@@ -145,8 +142,21 @@ export default {
})
}
},
+ watch: {
+ form () {
+ if (this.form === null) {
+ return
+ }
+ this.initFormStructure()
+ this.getSubmissionsData()
+ }
+ },
+ mounted () {
+ this.initFormStructure()
+ this.getSubmissionsData()
+ },
methods: {
- initFormStructure() {
+ initFormStructure () {
if (!this.form || this.formInitDone) {
return
}
@@ -163,12 +173,12 @@ export default {
// Add a "created at" column
const columns = clonedeep(this.form.properties)
columns.push({
- "name": "Created at",
- "id": "created_at",
- "type": "date",
- "width": 140,
+ name: 'Created at',
+ id: 'created_at',
+ type: 'date',
+ width: 140
})
- this.$set(this.form, 'properties', columns)
+ this.form.properties = columns
}
this.formInitDone = true
@@ -186,7 +196,7 @@ export default {
})
}
},
- getSubmissionsData() {
+ getSubmissionsData () {
if (!this.form || this.fullyLoaded) {
return
}
@@ -208,24 +218,23 @@ export default {
this.isLoading = false
})
},
- dataChanged() {
+ dataChanged () {
if (this.$refs.shadows) {
this.$refs.shadows.toggleShadow()
this.$refs.shadows.calcDimensions()
}
},
- onChangeDisplayColumns() {
+ onChangeDisplayColumns () {
window.localStorage.setItem('display-columns-formid-' + this.form.id, JSON.stringify(this.displayColumns))
- const final_properties = this.properties.concat(this.removed_properties).filter((field) => {
+ this.form.properties = this.properties.concat(this.removed_properties).filter((field) => {
return this.displayColumns[field.id] === true
})
- this.$set(this.form, 'properties', final_properties)
},
- onDeleteRecord() {
+ onDeleteRecord () {
this.fullyLoaded = false
this.tableData = []
this.getSubmissionsData()
}
- },
+ }
}
diff --git a/resources/js/components/open/forms/components/form-components/AddFormBlockSidebar.vue b/resources/js/components/open/forms/components/form-components/AddFormBlockSidebar.vue
index e05fcdb..f07f486 100644
--- a/resources/js/components/open/forms/components/form-components/AddFormBlockSidebar.vue
+++ b/resources/js/components/open/forms/components/form-components/AddFormBlockSidebar.vue
@@ -1,13 +1,14 @@