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

48
resources/js/pages/forms/create-guest.vue
View File

@@ -24,18 +24,21 @@
</template>
<script>
import store from '~/store'
import { computed } from 'vue'
import Form from 'vform'
import { mapState, mapActions } from 'vuex'
import { useTemplatesStore } from '../../stores/templates'
import { useWorkingFormStore } from '../../stores/working_form'
import { useWorkspacesStore } from '../../stores/workspaces'
import QuickRegister from '../auth/components/QuickRegister.vue'
import initForm from '../../mixins/form_editor/initForm.js'
import SeoMeta from '../../mixins/seo-meta.js'
import CreateFormBaseModal from '../../components/pages/forms/create/CreateFormBaseModal.vue'
const loadTemplates = function () {
store.commit('open/templates/startLoading')
store.dispatch('open/templates/loadIfEmpty').then(() => {
store.commit('open/templates/stopLoading')
const templatesStore = useTemplatesStore()
templatesStore.startLoading()
templatesStore.loadIfEmpty().then(() => {
templatesStore.stopLoading()
})
}
@@ -45,13 +48,25 @@ export default {
QuickRegister, CreateFormBaseModal
},
mixins: [initForm, SeoMeta],
middleware: 'guest',
beforeRouteEnter (to, from, next) {
loadTemplates()
next()
},
middleware: 'guest',
setup () {
const templatesStore = useTemplatesStore()
const workingFormStore = useWorkingFormStore()
const workspacesStore = useWorkspacesStore()
return {
templatesStore,
workingFormStore,
workspacesStore,
workspaces : computed(() => workspacesStore.content),
workspacesLoading : computed(() => workspacesStore.loading)
}
},
data () {
return {
@@ -66,21 +81,17 @@ export default {
},
computed: {
...mapState({
workspaces: state => state['open/workspaces'].content,
workspacesLoading: state => state['open/workspaces'].loading
}),
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)
}
},
workspace () {
return this.$store.getters['open/workspaces/getCurrent']()
return this.workspacesStore.getCurrent()
}
},
@@ -100,12 +111,12 @@ export default {
is_enterprise: false,
is_pro: false
}
this.$store.commit('open/workspaces/set', [guestWorkspace])
this.$store.commit('open/workspaces/setCurrentId', guestWorkspace.id)
this.workspacesStore.set([guestWorkspace])
this.workspacesStore.setCurrentId(guestWorkspace.id)
this.initForm()
if (this.$route.query.template !== undefined && this.$route.query.template) {
const template = this.$store.getters['open/templates/getBySlug'](this.$route.query.template)
const template = this.templatesStore.getBySlug(this.$route.query.template)
if (template && template.structure) {
this.form = new Form({ ...this.form.data(), ...template.structure })
}
@@ -121,16 +132,13 @@ export default {
unmounted () {},
methods: {
...mapActions({
loadWorkspaces: 'open/workspaces/load'
}),
openRegister () {
this.registerModal = true
},
afterLogin () {
this.registerModal = false
this.isGuest = false
this.loadWorkspaces()
this.workspacesStore.load()
setTimeout(() => {
if (this.$refs.editor) {
this.$refs.editor.saveFormCreate()

48
resources/js/pages/forms/create.vue
View File

@@ -19,17 +19,21 @@
</template>
<script>
import store from '~/store'
import Form from 'vform'
import { mapState, mapActions } from 'vuex'
import { computed } from 'vue'
import { useAuthStore } from '../../stores/auth'
import { useTemplatesStore } from '../../stores/templates'
import { useWorkingFormStore } from '../../stores/working_form'
import { useWorkspacesStore } from '../../stores/workspaces'
import initForm from '../../mixins/form_editor/initForm.js'
import SeoMeta from '../../mixins/seo-meta.js'
import CreateFormBaseModal from '../../components/pages/forms/create/CreateFormBaseModal.vue'
const loadTemplates = function () {
store.commit('open/templates/startLoading')
store.dispatch('open/templates/loadIfEmpty').then(() => {
store.commit('open/templates/stopLoading')
const templatesStore = useTemplatesStore()
templatesStore.startLoading()
templatesStore.loadIfEmpty().then(() => {
templatesStore.stopLoading()
})
}
@@ -38,6 +42,7 @@ export default {
components: { CreateFormBaseModal },
mixins: [initForm, SeoMeta],
middleware: 'auth',
beforeRouteEnter (to, from, next) {
loadTemplates()
@@ -54,7 +59,20 @@ export default {
next()
},
middleware: 'auth',
setup () {
const authStore = useAuthStore()
const templatesStore = useTemplatesStore()
const workingFormStore = useWorkingFormStore()
const workspacesStore = useWorkspacesStore()
return {
templatesStore,
workingFormStore,
workspacesStore,
user: computed(() => authStore.user),
workspaces : computed(() => workspacesStore.content),
workspacesLoading : computed(() => workspacesStore.loading)
}
},
data () {
return {
@@ -68,22 +86,17 @@ export default {
},
computed: {
...mapState({
workspaces: state => state['open/workspaces'].content,
workspacesLoading: state => state['open/workspaces'].loading,
user: state => state.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)
}
},
workspace () {
return this.$store.getters['open/workspaces/getCurrent']()
return this.workspacesStore.getCurrent()
}
},
@@ -108,7 +121,7 @@ export default {
this.initForm()
this.formInitialHash = this.hashString(JSON.stringify(this.form.data()))
if (this.$route.query.template !== undefined && this.$route.query.template) {
const template = this.$store.getters['open/templates/getBySlug'](this.$route.query.template)
const template = this.templatesStore.getBySlug(this.$route.query.template)
if (template && template.structure) {
this.form = new Form({ ...this.form.data(), ...template.structure })
}
@@ -117,7 +130,7 @@ export default {
this.showInitialFormModal = true
}
this.closeAlert()
this.loadWorkspaces()
this.workspacesStore.loadIfEmpty()
this.stateReady = this.user !== null
},
@@ -126,9 +139,6 @@ export default {
unmounted () {},
methods: {
...mapActions({
loadWorkspaces: 'open/workspaces/loadIfEmpty'
}),
formGenerated (form) {
this.form = new Form({ ...this.form.data(), ...form })
},

45
resources/js/pages/forms/edit.vue
View File

@@ -14,17 +14,20 @@
</template>
<script>
import axios from 'axios'
import store from '~/store'
import Breadcrumb from '../../components/common/Breadcrumb.vue'
import { computed } from 'vue'
import Form from 'vform'
import { mapState } from 'vuex'
import { useFormsStore } from '../../stores/forms'
import { useWorkingFormStore } from '../../stores/working_form'
import { useWorkspacesStore } from '../../stores/workspaces'
import Breadcrumb from '../../components/common/Breadcrumb.vue'
import SeoMeta from '../../mixins/seo-meta.js'
const loadForms = function () {
store.commit('open/forms/startLoading')
store.dispatch('open/workspaces/loadIfEmpty').then(() => {
store.dispatch('open/forms/load', store.state['open/workspaces'].currentId)
const formsStore = useFormsStore()
const workspacesStore = useWorkspacesStore()
formsStore.startLoading()
workspacesStore.loadIfEmpty().then(() => {
formsStore.load(workspacesStore.currentId)
})
}
@@ -32,12 +35,15 @@ export default {
name: 'EditForm',
components: { Breadcrumb },
mixins: [SeoMeta],
middleware: 'auth',
beforeRouteEnter (to, from, next) {
if (!store.getters['open/forms/getBySlug'](to.params.slug)) {
const formsStore = useFormsStore()
const workingFormStore = useWorkingFormStore()
if (!formsStore.getBySlug(to.params.slug)) {
loadForms()
}
store.commit('open/working_form/set', null) // Reset old working form
workingFormStore.set(null) // Reset old working form
next()
},
@@ -51,7 +57,17 @@ export default {
next()
},
middleware: 'auth',
setup () {
const formsStore = useFormsStore()
const workingFormStore = useWorkingFormStore()
const workspacesStore = useWorkspacesStore()
return {
formsStore,
workingFormStore,
workspacesStore,
formsLoading : computed(() => formsStore.loading)
}
},
data () {
return {
@@ -62,20 +78,17 @@ export default {
},
computed: {
...mapState({
formsLoading: state => state['open/forms'].loading
}),
updatedForm: {
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)
}
},
form () {
return this.$store.getters['open/forms/getBySlug'](this.$route.params.slug)
return this.formsStore.getBySlug(this.$route.params.slug)
},
pageLoaded () {
return !this.loading && this.updatedForm !== null

34
resources/js/pages/forms/show-public.vue
View File

@@ -50,8 +50,9 @@
<script>
import axios from 'axios'
import store from '~/store'
import { mapState } from 'vuex'
import { computed } from 'vue'
import { useFormsStore } from '../../stores/forms'
import { useRecordsStore } from '../../stores/records'
import OpenCompleteForm from '../../components/open/forms/OpenCompleteForm.vue'
import Cookies from 'js-cookie'
import sha256 from 'js-sha256'
@@ -93,11 +94,12 @@ function handleTransparentMode (form) {
}
function loadForm (slug) {
if (store.state['open/forms'].loading) return
store.commit('open/forms/startLoading')
const formsStore = useFormsStore()
if (formsStore.loading) return
formsStore.startLoading()
return axios.get('/api/forms/' + slug).then((response) => {
const form = response.data
store.commit('open/forms/set', [response.data])
formsStore.set([response.data])
// Custom code injection
if (form.custom_code) {
@@ -108,9 +110,9 @@ function loadForm (slug) {
handleDarkMode(form)
handleTransparentMode(form)
store.commit('open/forms/stopLoading')
formsStore.stopLoading()
}).catch(() => {
store.commit('open/forms/stopLoading')
formsStore.stopLoading()
})
}
@@ -132,6 +134,17 @@ export default {
next()
},
setup () {
const formsStore = useFormsStore()
const recordsStore = useRecordsStore()
return {
formsStore,
forms : computed(() => formsStore.content),
formLoading : computed(() => formsStore.loading),
recordLoading : computed(() => recordsStore.loading)
}
},
data () {
return {
submitted: false
@@ -166,16 +179,11 @@ export default {
},
computed: {
...mapState({
forms: state => state['open/forms'].content,
formLoading: state => state['open/forms'].loading,
recordLoading: state => state['open/records'].loading
}),
formSlug () {
return this.$route.params.slug
},
form () {
return this.$store.getters['open/forms/getBySlug'](this.formSlug)
return this.formsStore.getBySlug(this.formSlug)
},
isIframe () {
return window.location !== window.parent.location || window.frameElement

51
resources/js/pages/forms/show/index.vue
View File

@@ -116,10 +116,12 @@
</template>
<script>
import axios from 'axios'
import store from '~/store'
import { computed } from 'vue'
import Form from 'vform'
import {mapGetters, mapState} from 'vuex'
import { useAuthStore } from '../../../stores/auth'
import { useFormsStore } from '../../../stores/forms'
import { useWorkingFormStore } from '../../../stores/working_form'
import { useWorkspacesStore } from '../../../stores/workspaces'
import ProTag from '../../../components/common/ProTag.vue'
import VButton from "../../../components/common/Button.vue";
import ExtraMenu from '../../../components/pages/forms/show/ExtraMenu.vue'
@@ -127,9 +129,11 @@ import SeoMeta from '../../../mixins/seo-meta.js'
import FormCleanings from '../../../components/pages/forms/show/FormCleanings.vue'
const loadForms = function () {
store.commit('open/forms/startLoading')
store.dispatch('open/workspaces/loadIfEmpty').then(() => {
store.dispatch('open/forms/loadIfEmpty', store.state['open/workspaces'].currentId)
const formsStore = useFormsStore()
const workspacesStore = useWorkspacesStore()
formsStore.startLoading()
workspacesStore.loadIfEmpty().then(() => {
formsStore.loadIfEmpty(workspacesStore.currentId)
})
}
@@ -154,6 +158,21 @@ export default {
},
middleware: 'auth',
setup () {
const authStore = useAuthStore()
const formsStore = useFormsStore()
const workingFormStore = useWorkingFormStore()
const workspacesStore = useWorkspacesStore()
return {
formsStore,
workingFormStore,
workspacesStore,
user : computed(() => authStore.user),
formsLoading : computed(() => formsStore.loading),
workspacesLoading : computed(() => workspacesStore.loading)
}
},
data() {
return {
metaTitle: 'Home',
@@ -175,27 +194,21 @@ export default {
},
computed: {
...mapGetters({
user: 'auth/user'
}),
...mapState({
formsLoading: state => state['open/forms'].loading,
workspacesLoading: state => state['open/workspaces'].loading
}),
workingForm: {
get() {
return this.$store.state['open/working_form'].content
get () {
return this.workingFormStore.content
},
set(value) {
this.$store.commit('open/working_form/set', value)
/* We add a setter */
set (value) {
this.workingFormStore.set(value)
}
},
workspace() {
if (!this.form) return null
return this.$store.getters['open/workspaces/getById'](this.form.workspace_id)
return this.workspacesStore.getById(this.form.workspace_id)
},
form() {
return this.$store.getters['open/forms/getBySlug'](this.$route.params.slug)
return this.formsStore.getBySlug(this.$route.params.slug)
},
formEndpoint: () => '/api/open/forms/{id}',
loading() {