matt/opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Vue3: migrating from vuex to Pinia (#249)

Browse Source 
* Vue3: migrating from vuex to Pinia

* toggle input fixes

* update configureCompat

---------

Co-authored-by: Forms Dev <chirag+new@notionforms.io>
This commit is contained in:
Chirag Chhatrala
2023-12-01 23:27:14 +05:30
committed by GitHub
parent af30067eda
commit 47653ebe64
105 changed files with 2092 additions and 1577 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
resources/js/components/open/forms/OpenForm.vue
View File

@@ -62,6 +62,9 @@
<script>
import axios from 'axios'
import Form from 'vform'
import { computed } from 'vue'
import { useRecordsStore } from '../../../stores/records'
import { useWorkingFormStore } from '../../../stores/working_form'
import OpenFormButton from './OpenFormButton.vue'
import clonedeep from 'clone-deep'
import FormLogicPropertyResolver from '../../../forms/FormLogicPropertyResolver.js'
@@ -100,6 +103,16 @@ export default {
},
adminPreview: { type: Boolean, default: false } // If used in FormEditorPreview
},
setup () {
const recordsStore = useRecordsStore()
const workingFormStore = useWorkingFormStore()
return {
recordsStore,
workingFormStore
}
},
data () {
return {
dataForm: null,
@@ -154,8 +167,8 @@ export default {
newFields.push(...group)
}
})
// set the properties on working_form vuex
this.$store.commit('open/working_form/setProperties', newFields)
// set the properties on working_form store
this.workingFormStore.setProperties(newFields)
}
},
/**
@@ -293,12 +306,12 @@ export default {
if (!this.form || !this.form.editable_submissions || !this.form.submission_id) {
return null
}
await this.$store.dispatch('open/records/loadRecord',
await this.recordsStore.loadRecord(
axios.get('/api/forms/' + this.form.slug + '/submissions/' + this.form.submission_id).then((response) => {
return { submission_id: this.form.submission_id, ...response.data.data }
})
)
return this.$store.getters['open/records/getById'](this.form.submission_id)
return this.recordsStore.getById(this.form.submission_id)
},
async initForm () {
if (this.isPublicFormPage && this.form.editable_submissions) {

21
resources/js/components/open/forms/OpenFormField.vue
View File

@@ -78,9 +78,10 @@
</template>
<script>
import { computed } from 'vue'
import { useWorkingFormStore } from '../../../stores/working_form';
import FormLogicPropertyResolver from '../../../forms/FormLogicPropertyResolver.js'
import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key.js'
import {mapState} from "vuex";
export default {
name: 'OpenFormField',
@@ -113,15 +114,21 @@ export default {
},
adminPreview: {type: Boolean, default: false} // If used in FormEditorPreview
},
setup () {
const workingFormStore = useWorkingFormStore()
return {
workingFormStore,
selectedFieldIndex : computed(() => workingFormStore.selectedFieldIndex),
showEditFieldSidebar : computed(() => workingFormStore.showEditFieldSidebar)
}
},
data() {
return {}
},
computed: {
...mapState({
selectedFieldIndex: state => state['open/working_form'].selectedFieldIndex,
showEditFieldSidebar: state => state['open/working_form'].showEditFieldSidebar
}),
fieldComponents() {
return {
text: 'TextInput',
@@ -214,10 +221,10 @@ export default {
methods: {
editFieldOptions() {
this.$store.commit('open/working_form/openSettingsForField', this.field)
this.workingFormStore.openSettingsForField(this.field)
},
openAddFieldSidebar() {
this.$store.commit('open/working_form/openAddFieldSidebar', this.field)
this.workingFormStore.openAddFieldSidebar(this.field)
},
/**
* Get the right input component for the field/options combination

4
resources/js/components/open/forms/components/AdvancedFormUrlSettings.vue
View File

@@ -13,12 +13,12 @@
label="Hide Form Title"
:disabled="form.hide_title===true"
:help="hideTitleHelp"
@input="onChangeHideTitle"
@update:model-value="onChangeHideTitle"
/>
<toggle-switch-input :value="value.auto_submit" name="auto_submit" class="mt-4"
label="Auto Submit Form"
help="Form will auto submit immediate after open URL"
@input="onChangeAutoSubmit"
@update:model-value="onChangeAutoSubmit"
/>
</collapse>
</template>

34
resources/js/components/open/forms/components/FormEditor.vue
View File

@@ -85,7 +85,11 @@
</template>
<script>
import { mapGetters } from 'vuex'
import { computed } from 'vue'
import { useAuthStore } from '../../../../stores/auth';
import { useFormsStore } from '../../../../stores/forms';
import { useWorkingFormStore } from '../../../../stores/working_form';
import { useWorkspacesStore } from '../../../../stores/workspaces';
import AddFormBlockSidebar from './form-components/AddFormBlockSidebar.vue'
import FormFieldEditSidebar from '../fields/FormFieldEditSidebar.vue'
import FormErrorModal from './form-components/FormErrorModal.vue'
@@ -143,6 +147,19 @@ export default {
}
},
setup () {
const authStore = useAuthStore()
const formsStore = useFormsStore()
const workingFormStore = useWorkingFormStore()
const workspacesStore = useWorkspacesStore()
return {
formsStore,
workingFormStore,
workspacesStore,
user : computed(() => authStore.user)
}
},
data () {
return {
showFormErrorModal: false,
@@ -153,23 +170,20 @@ export default {
},
computed: {
...mapGetters({
user: 'auth/user'
}),
form: {
get () {
return this.$store.state['open/working_form'].content
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.$store.commit('open/working_form/set', value)
this.workingFormStore.set(value)
}
},
createdForm () {
return this.$store.getters['open/forms/getById'](this.createdFormId)
return this.formsStore.getById(this.createdFormId)
},
workspace () {
return this.$store.getters['open/workspaces/getCurrent']()
return this.workspacesStore.getCurrent()
},
steps () {
return [
@@ -245,7 +259,7 @@ export default {
this.validationErrorResponse = null
this.form.put('/api/open/forms/{id}/'.replace('{id}', this.form.id)).then((response) => {
const data = response.data
this.$store.commit('open/forms/addOrUpdate', data.form)
this.formsStore.addOrUpdate(data.form)
this.$emit('on-save')
this.$router.push({ name: 'forms.show', params: { slug: this.form.slug } })
this.$logEvent('form_saved', { form_id: this.form.id, form_slug: this.form.slug })
@@ -266,7 +280,7 @@ export default {
this.updateFormLoading = true
this.form.post('/api/open/forms').then((response) => {
this.$store.commit('open/forms/addOrUpdate', response.data.form)
this.formsStore.addOrUpdate(response.data.form)
this.$emit('on-save')
this.createdFormId = response.data.form.id

19
resources/js/components/open/forms/components/FormFieldsEditor.vue
View File

@@ -166,6 +166,8 @@
</template>
<script>
import { computed } from 'vue'
import { useWorkingFormStore } from '../../../../stores/working_form'
import draggable from 'vuedraggable'
import ProTag from '../../../common/ProTag.vue'
import clonedeep from 'clone-deep'
@@ -182,6 +184,13 @@ export default {
EditableDiv
},
setup () {
const workingFormStore = useWorkingFormStore()
return {
workingFormStore
}
},
data () {
return {
formFields: [],
@@ -192,11 +201,11 @@ export default {
computed: {
form: {
get () {
return this.$store.state['open/working_form'].content
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.$store.commit('open/working_form/set', value)
this.workingFormStore.set(value)
}
}
},
@@ -313,7 +322,7 @@ export default {
return type
},
editOptions (index) {
this.$store.commit('open/working_form/openSettingsForField', index)
this.workingFormStore.openSettingsForField(index)
},
removeBlock (blockIndex) {
const newFields = clonedeep(this.formFields)
@@ -322,10 +331,10 @@ export default {
this.closeSidebar()
},
closeSidebar () {
this.$store.commit('open/working_form/closeEditFieldSidebar')
this.workingFormStore.closeEditFieldSidebar()
},
openAddFieldSidebar () {
this.$store.commit('open/working_form/openAddFieldSidebar', null)
this.workingFormStore.openAddFieldSidebar(null)
}
}
}

18
resources/js/components/open/forms/components/FormSubmissions.vue
View File

@@ -25,7 +25,7 @@
</h4>
<div v-for="field in properties" :key="field.id" class="p-2 border">
{{ field.name }}
<v-switch v-model="displayColumns[field.id]" class="float-right" @input="onChangeDisplayColumns" />
<v-switch v-model="displayColumns[field.id]" class="float-right" @update:model-value="onChangeDisplayColumns" />
</div>
</template>
<template v-if="removed_properties.length > 0">
@@ -34,7 +34,7 @@
</h4>
<div v-for="field in removed_properties" :key="field.id" class="p-2 border">
{{ field.name }}
<v-switch v-model="displayColumns[field.id]" class="float-right" @input="onChangeDisplayColumns" />
<v-switch v-model="displayColumns[field.id]" class="float-right" @update:model-value="onChangeDisplayColumns" />
</div>
</template>
</div>
@@ -83,6 +83,7 @@
import axios from 'axios'
import Fuse from 'fuse.js'
import Form from 'vform'
import { useWorkingFormStore } from '../../../../stores/working_form'
import ScrollShadow from '../../../common/ScrollShadow.vue'
import OpenTable from '../../tables/OpenTable.vue'
import clonedeep from 'clone-deep'
@@ -92,6 +93,15 @@ export default {
name: 'FormSubmissions',
components: { ScrollShadow, OpenTable, VSwitch },
props: {},
setup () {
const workingFormStore = useWorkingFormStore()
return {
workingFormStore
}
},
data () {
return {
formInitDone: false,
@@ -111,10 +121,10 @@ export default {
computed: {
form: {
get () {
return this.$store.state['open/working_form'].content
return this.workingFormStore.content
},
set (value) {
this.$store.commit('open/working_form/set', value)
this.workingFormStore.set(value)
}
},
exportUrl () {

32
resources/js/components/open/forms/components/form-components/AddFormBlockSidebar.vue
View File

@@ -30,7 +30,7 @@
<div class="mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2" v-html="block.icon"
/>
></svg>
</div>
<p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1">
{{ block.title }}
@@ -50,7 +50,7 @@
<div class="mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2" v-html="block.icon"
/>
></svg>
</div>
<p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1">
{{ block.title }}
@@ -63,14 +63,26 @@
</template>
<script>
import { mapState } from 'vuex'
import Form from 'vform'
import clonedeep from 'clone-deep'
import { computed } from 'vue'
import { useWorkingFormStore } from '../../../../../stores/working_form'
export default {
name: 'AddFormBlockSidebar',
components: {},
props: {},
setup () {
const workingFormStore = useWorkingFormStore()
return {
workingFormStore,
selectedFieldIndex : computed(() => workingFormStore.selectedFieldIndex),
showAddFieldSidebar : computed(() => workingFormStore.showAddFieldSidebar)
}
},
data () {
return {
blockForm: null,
@@ -162,17 +174,13 @@ export default {
},
computed: {
...mapState({
selectedFieldIndex: state => state['open/working_form'].selectedFieldIndex,
showAddFieldSidebar: state => state['open/working_form'].showAddFieldSidebar
}),
form: {
get () {
return this.$store.state['open/working_form'].content
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.$store.commit('open/working_form/set', value)
this.workingFormStore.set(value)
}
},
showSidebar () {
@@ -209,7 +217,7 @@ export default {
methods: {
closeSidebar () {
this.$store.commit('open/working_form/closeAddFieldSidebar')
this.workingFormStore.closeAddFieldSidebar()
},
reset () {
this.blockForm = new Form({
@@ -231,12 +239,12 @@ export default {
const newFields = clonedeep(this.form.properties)
newFields.push(newBlock)
this.form.properties = newFields
this.$store.commit('open/working_form/openSettingsForField', this.form.properties.length - 1)
this.workingFormStore.openSettingsForField(this.form.properties.length - 1)
} else {
const newFields = clonedeep(this.form.properties)
newFields.splice(this.selectedFieldIndex + 1, 0, newBlock)
this.form.properties = newFields
this.$store.commit('open/working_form/openSettingsForField', this.selectedFieldIndex + 1)
this.workingFormStore.openSettingsForField(this.selectedFieldIndex + 1)
}
this.reset()
},

11
resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue
View File

@@ -129,6 +129,7 @@
</template>
<script>
import { useWorkingFormStore } from '../../../../../stores/working_form'
import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
import ProTag from '../../../../common/ProTag.vue'
import VTransition from '../../../../common/transitions/VTransition.vue'
@@ -136,6 +137,12 @@ import VTransition from '../../../../common/transitions/VTransition.vue'
export default {
components: {EditorOptionsPanel, ProTag, VTransition},
props: {},
setup () {
const workingFormStore = useWorkingFormStore()
return {
workingFormStore
}
},
data () {
return {
submissionOptions: {}
@@ -145,11 +152,11 @@ export default {
computed: {
form: {
get () {
return this.$store.state['open/working_form'].content
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.$store.commit('open/working_form/set', value)
this.workingFormStore.set(value)
}
},
/**

11
resources/js/components/open/forms/components/form-components/FormAccess.vue
View File

@@ -38,11 +38,18 @@
</template>
<script>
import { useWorkingFormStore } from '../../../../../stores/working_form'
import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
export default {
components: { EditorOptionsPanel },
props: {},
setup () {
const workingFormStore = useWorkingFormStore()
return {
workingFormStore
}
},
data () {
return {
}
@@ -50,11 +57,11 @@ export default {
computed: {
form: {
get () {
return this.$store.state['open/working_form'].content
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.$store.commit('open/working_form/set', value)
this.workingFormStore.set(value)
}
}
},

12
resources/js/components/open/forms/components/form-components/FormCustomCode.vue
View File

@@ -17,12 +17,18 @@
</template>
<script>
import { useWorkingFormStore } from '../../../../../stores/working_form'
import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
import CodeInput from '../../../../forms/CodeInput.vue'
export default {
components: { EditorOptionsPanel, CodeInput },
props: {
props: {},
setup () {
const workingFormStore = useWorkingFormStore()
return {
workingFormStore
}
},
data () {
return {
@@ -32,11 +38,11 @@ export default {
computed: {
form: {
get () {
return this.$store.state['open/working_form'].content
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.$store.commit('open/working_form/set', value)
this.workingFormStore.set(value)
}
}
},

11
resources/js/components/open/forms/components/form-components/FormCustomSeo.vue
View File

@@ -23,11 +23,18 @@
</template>
<script>
import { useWorkingFormStore } from '../../../../../stores/working_form'
import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
export default {
components: { EditorOptionsPanel },
props: {},
setup () {
const workingFormStore = useWorkingFormStore()
return {
workingFormStore
}
},
data () {
return {
}
@@ -35,11 +42,11 @@ export default {
computed: {
form: {
get () {
return this.$store.state['open/working_form'].content
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.$store.commit('open/working_form/set', value)
this.workingFormStore.set(value)
}
}
},

13
resources/js/components/open/forms/components/form-components/FormCustomization.vue
View File

@@ -71,7 +71,7 @@
/>
<toggle-switch-input name="confetti_on_submission" :form="form" class="mt-4"
label="Confetti on successful submisison"
@input="onChangeConfettiOnSubmission"
@update:model-value="onChangeConfettiOnSubmission"
/>
<toggle-switch-input name="auto_save" :form="form"
label="Auto save form response"
@@ -81,6 +81,7 @@
</template>
<script>
import { useWorkingFormStore } from '../../../../../stores/working_form'
import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
import ProTag from '../../../../common/ProTag.vue'
@@ -88,6 +89,12 @@ export default {
components: { EditorOptionsPanel, ProTag },
props: {
},
setup () {
const workingFormStore = useWorkingFormStore()
return {
workingFormStore
}
},
data () {
return {
isMounted: false
@@ -97,11 +104,11 @@ export default {
computed: {
form: {
get () {
return this.$store.state['open/working_form'].content
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.$store.commit('open/working_form/set', value)
this.workingFormStore.set(value)
}
}
},

12
resources/js/components/open/forms/components/form-components/FormEditorPreview.vue
View File

@@ -59,12 +59,18 @@
</template>
<script>
import { useWorkingFormStore } from '../../../../../stores/working_form'
import VSwitch from '../../../../forms/components/VSwitch.vue'
import OpenCompleteForm from '../../OpenCompleteForm.vue'
export default {
components: { OpenCompleteForm, VSwitch },
props: {
props: {},
setup () {
const workingFormStore = useWorkingFormStore()
return {
workingFormStore
}
},
data () {
return {
@@ -75,11 +81,11 @@ export default {
computed: {
form: {
get () {
return this.$store.state['open/working_form'].content
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.$store.commit('open/working_form/set', value)
this.workingFormStore.set(value)
}
},
creating () { // returns true if we are creating a form

26
resources/js/components/open/forms/components/form-components/FormInformation.vue
View File

@@ -66,14 +66,27 @@
</template>
<script>
import { computed } from 'vue'
import clonedeep from 'clone-deep'
import { useFormsStore } from '../../../../../stores/forms'
import { useWorkingFormStore } from '../../../../../stores/working_form'
import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
import SelectInput from '../../../../forms/SelectInput.vue'
import { mapState } from 'vuex'
import clonedeep from 'clone-deep'
export default {
components: { SelectInput, EditorOptionsPanel },
props: {},
setup () {
const formsStore = useFormsStore()
const workingFormStore = useWorkingFormStore()
return {
formsStore,
workingFormStore,
forms : computed(() => formsStore.content)
}
},
data () {
return {
showCopyFormSettingsModal: false,
@@ -106,20 +119,17 @@ export default {
}
})
},
...mapState({
forms: state => state['open/forms'].content
}),
form: {
get () {
return this.$store.state['open/working_form'].content
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.$store.commit('open/working_form/set', value)
this.workingFormStore.set(value)
}
},
allTagsOptions () {
return this.$store.getters['open/forms/getAllTags'].map((tagname) => {
return this.formsStore.getAllTags.map((tagname) => {
return {
name: tagname,
value: tagname

12
resources/js/components/open/forms/components/form-components/FormNotifications.vue
View File

@@ -31,6 +31,7 @@
</template>
<script>
import { useWorkingFormStore } from '../../../../../stores/working_form'
import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
import FormNotificationsOption from './components/FormNotificationsOption.vue'
import FormNotificationsSlack from './components/FormNotificationsSlack.vue'
@@ -40,7 +41,12 @@ import FormNotificationsWebhook from './components/FormNotificationsWebhook.vue'
export default {
components: { FormNotificationsSubmissionConfirmation, FormNotificationsSlack, FormNotificationsDiscord, FormNotificationsOption, EditorOptionsPanel, FormNotificationsWebhook },
props: {
props: {},
setup () {
const workingFormStore = useWorkingFormStore()
return {
workingFormStore
}
},
data () {
return {
@@ -50,11 +56,11 @@ export default {
computed: {
form: {
get () {
return this.$store.state['open/working_form'].content
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.$store.commit('open/working_form/set', value)
this.workingFormStore.set(value)
}
},
zapierUrl: () => window.config.links.zapier_integration

12
resources/js/components/open/forms/components/form-components/FormSecurityPrivacy.vue
View File

@@ -17,11 +17,17 @@
</template>
<script>
import { useWorkingFormStore } from '../../../../../stores/working_form'
import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
export default {
components: { EditorOptionsPanel },
props: {
props: {},
setup () {
const workingFormStore = useWorkingFormStore()
return {
workingFormStore
}
},
data () {
return {
@@ -30,11 +36,11 @@ export default {
computed: {
form: {
get () {
return this.$store.state['open/working_form'].content
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.$store.commit('open/working_form/set', value)
this.workingFormStore.set(value)
}
}
},

12
resources/js/components/open/forms/components/form-components/FormStructure.vue
View File

@@ -11,12 +11,18 @@
</template>
<script>
import { useWorkingFormStore } from '../../../../../stores/working_form'
import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
import FormFieldsEditor from '../FormFieldsEditor.vue'
export default {
components: { EditorOptionsPanel, FormFieldsEditor },
props: {
props: {},
setup () {
const workingFormStore = useWorkingFormStore()
return {
workingFormStore
}
},
data () {
return {
@@ -26,11 +32,11 @@ export default {
computed: {
form: {
get () {
return this.$store.state['open/working_form'].content
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.$store.commit('open/working_form/set', value)
this.workingFormStore.set(value)
}
}
}

11
resources/js/components/open/forms/components/form-components/components/FormNotificationsDiscord.vue
View File

@@ -46,12 +46,19 @@
</template>
<script>
import { useWorkingFormStore } from '../../../../../../stores/working_form'
import ProTag from '../../../../../common/ProTag.vue'
import FormNotificationsMessageActions from './FormNotificationsMessageActions.vue'
export default {
components: { ProTag, FormNotificationsMessageActions },
props: {},
setup () {
const workingFormStore = useWorkingFormStore()
return {
workingFormStore
}
},
data () {
return {
showModal: false
@@ -61,11 +68,11 @@ export default {
computed: {
form: {
get () {
return this.$store.state['open/working_form'].content
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.$store.commit('open/working_form/set', value)
this.workingFormStore.set(value)
}
}
},

11
resources/js/components/open/forms/components/form-components/components/FormNotificationsOption.vue
View File

@@ -50,11 +50,18 @@
</template>
<script>
import { useWorkingFormStore } from '../../../../../../stores/working_form'
import ProTag from '../../../../../common/ProTag.vue'
export default {
components: { ProTag },
props: {},
setup () {
const workingFormStore = useWorkingFormStore()
return {
workingFormStore
}
},
data () {
return {
showModal: false
@@ -64,11 +71,11 @@ export default {
computed: {
form: {
get () {
return this.$store.state['open/working_form'].content
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.$store.commit('open/working_form/set', value)
this.workingFormStore.set(value)
}
},
replayToEmailField () {

11
resources/js/components/open/forms/components/form-components/components/FormNotificationsSlack.vue
View File

@@ -47,12 +47,19 @@
</template>
<script>
import { useWorkingFormStore } from '../../../../../../stores/working_form'
import ProTag from '../../../../../common/ProTag.vue'
import FormNotificationsMessageActions from './FormNotificationsMessageActions.vue'
export default {
components: { ProTag, FormNotificationsMessageActions },
props: {},
setup () {
const workingFormStore = useWorkingFormStore()
return {
workingFormStore
}
},
data () {
return {
showModal: false
@@ -62,11 +69,11 @@ export default {
computed: {
form: {
get () {
return this.$store.state['open/working_form'].content
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.$store.commit('open/working_form/set', value)
this.workingFormStore.set(value)
}
}
},

11
resources/js/components/open/forms/components/form-components/components/FormNotificationsSubmissionConfirmation.vue
View File

@@ -62,11 +62,18 @@
</template>
<script>
import { useWorkingFormStore } from '../../../../../../stores/working_form'
import ProTag from '../../../../../common/ProTag.vue'
export default {
components: { ProTag },
props: {},
setup () {
const workingFormStore = useWorkingFormStore()
return {
workingFormStore
}
},
data () {
return {
showModal: false
@@ -76,11 +83,11 @@ export default {
computed: {
form: {
get () {
return this.$store.state['open/working_form'].content
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.$store.commit('open/working_form/set', value)
this.workingFormStore.set(value)
}
},
emailSubmissionConfirmationField () {

11
resources/js/components/open/forms/components/form-components/components/FormNotificationsWebhook.vue
View File

@@ -43,11 +43,18 @@
</template>
<script>
import { useWorkingFormStore } from '../../../../../../stores/working_form'
import ProTag from '../../../../../common/ProTag.vue'
export default {
components: { ProTag },
props: {},
setup () {
const workingFormStore = useWorkingFormStore()
return {
workingFormStore
}
},
data () {
return {
showModal: false
@@ -57,11 +64,11 @@ export default {
computed: {
form: {
get () {
return this.$store.state['open/working_form'].content
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.$store.commit('open/working_form/set', value)
this.workingFormStore.set(value)
}
}
},

2
resources/js/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue
View File

@@ -38,7 +38,7 @@
:multiple="true" class="mt-1" placeholder="Actions..."
help="Action(s) triggerred when above conditions are true"
:options="actionOptions"
@input="onActionInput"
@update:model-value="onActionInput"
/>
<modal :show="showCopyFormModal" @close="showCopyFormModal = false">

35
resources/js/components/open/forms/components/templates/FormTemplateModal.vue
View File

@@ -72,10 +72,11 @@
</template>
<script>
import Form from 'vform'
import store from '~/store'
import { mapState, mapGetters } from 'vuex'
import axios from 'axios'
import Form from 'vform'
import { computed } from 'vue'
import { useAuthStore } from '../../../../../stores/auth'
import { useTemplatesStore } from '../../../../../stores/templates'
import QuestionsEditor from './QuestionsEditor.vue'
export default {
@@ -87,6 +88,18 @@ export default {
template: { type: Object, required: false, default: () => {} }
},
setup () {
const authStore = useAuthStore()
const templatesStore = useTemplatesStore()
return {
templatesStore,
user : computed(() => authStore.user),
templates : computed(() => templatesStore.content),
industries : computed(() => templatesStore.industries),
types : computed(() => templatesStore.types)
}
},
data: () => ({
templateForm: null
}),
@@ -104,18 +117,10 @@ export default {
related_templates: null,
questions: []
})
store.dispatch('open/templates/loadIfEmpty')
this.templatesStore.loadIfEmpty()
},
computed: {
...mapState({
templates: state => state['open/templates'].content,
industries: state => state['open/templates'].industries,
types: state => state['open/templates'].types
}),
...mapGetters({
user: 'auth/user'
}),
typesOptions () {
return Object.values(this.types).map((type) => {
return {
@@ -156,7 +161,7 @@ export default {
if (response.data.message) {
this.alertSuccess(response.data.message)
}
this.$store.commit('open/templates/addOrUpdate', response.data.data)
this.templatesStore.addOrUpdate(response.data.data)
this.$emit('close')
})
},
@@ -166,7 +171,7 @@ export default {
if (response.data.message) {
this.alertSuccess(response.data.message)
}
this.$store.commit('open/templates/addOrUpdate', response.data.data)
this.templatesStore.addOrUpdate(response.data.data)
this.$emit('close')
})
},
@@ -177,7 +182,7 @@ export default {
this.alertSuccess(response.data.message)
}
this.$router.push({ name: 'templates' })
this.$store.commit('open/templates/remove', this.template)
this.templatesStore.remove(this.template)
this.$emit('close')
})
}

21
resources/js/components/open/forms/fields/FormFieldEditSidebar.vue
View File

@@ -70,8 +70,9 @@
</template>
<script>
import { mapState } from 'vuex'
import { computed } from 'vue'
import clonedeep from 'clone-deep'
import { useWorkingFormStore } from '../../../../stores/working_form'
import ChangeFieldType from './components/ChangeFieldType.vue'
import FieldOptions from './components/FieldOptions.vue'
import BlockOptions from './components/BlockOptions.vue'
@@ -80,6 +81,14 @@ export default {
name: 'FormFieldEditSidebar',
components: { ChangeFieldType, FieldOptions, BlockOptions },
props: {},
setup () {
const workingFormStore = useWorkingFormStore()
return {
workingFormStore,
selectedFieldIndex : computed(() => workingFormStore.selectedFieldIndex),
showEditFieldSidebar : computed(() => workingFormStore.showEditFieldSidebar)
}
},
data () {
return {
@@ -87,17 +96,13 @@ export default {
},
computed: {
...mapState({
selectedFieldIndex: state => state['open/working_form'].selectedFieldIndex,
showEditFieldSidebar: state => state['open/working_form'].showEditFieldSidebar
}),
form: {
get () {
return this.$store.state['open/working_form'].content
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.$store.commit('open/working_form/set', value)
this.workingFormStore.set(value)
}
},
field () {
@@ -145,7 +150,7 @@ export default {
this.closeSidebar()
},
closeSidebar () {
this.$store.commit('open/working_form/closeEditFieldSidebar')
this.workingFormStore.closeEditFieldSidebar()
},
generateUUID () {
let d = new Date().getTime()// Timestamp

2
resources/js/components/open/forms/fields/components/FieldOptions.vue
View File

@@ -186,7 +186,7 @@
<text-area-input v-model="optionsText" :name="field.id+'_options_text'" class="mt-3"
label="Set selection options"
help="Add one option per line"
@input="onFieldOptionsChange"
@update:model-value="onFieldOptionsChange"
/>
<v-checkbox v-model="field.allow_creation"
name="allow_creation" help="" @update:model-value="onFieldAllowCreationChange"