opnform/client/pages/forms/[slug]/show/share.vue

60 lines
2.0 KiB
Vue
Raw Normal View History

2023-12-09 14:47:03 +00:00
<template>
2024-02-22 15:56:35 +00:00
<div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl p-4">
<div class="mb-20">
2023-12-24 08:51:22 +00:00
2024-02-22 15:56:35 +00:00
<div class="mb-6 pb-6 border-b w-full flex flex-col sm:flex-row gap-2">
<regenerate-form-link class="sm:w-1/2 flex" :form="props.form"/>
2023-12-24 08:51:22 +00:00
2024-02-22 15:56:35 +00:00
<url-form-prefill class="sm:w-1/2" :form="props.form" :extra-query-param="shareUrlForQueryParams"/>
2023-12-24 08:51:22 +00:00
2024-02-22 15:56:35 +00:00
<embed-form-as-popup-modal class="sm:w-1/2 flex" :form="props.form"/>
</div>
2023-12-24 08:51:22 +00:00
2024-02-22 15:56:35 +00:00
<share-link class="mt-4" :form="props.form" :extra-query-param="shareUrlForQueryParams"/>
2023-12-09 14:47:03 +00:00
2024-02-22 15:56:35 +00:00
<embed-code class="mt-6" :form="props.form" :extra-query-param="shareUrlForQueryParams"/>
2023-12-09 14:47:03 +00:00
2024-02-22 15:56:35 +00:00
<form-qr-code class="mt-6" :form="props.form" :extra-query-param="shareUrlForQueryParams"/>
2023-12-09 14:47:03 +00:00
2024-02-22 15:56:35 +00:00
<advanced-form-url-settings :form="props.form" v-model="shareFormConfig"/>
2023-12-09 14:47:03 +00:00
2024-02-22 15:56:35 +00:00
</div>
2023-12-09 14:47:03 +00:00
</div>
</template>
2024-01-11 16:16:50 +00:00
<script setup>
2024-02-06 08:59:43 +00:00
import ShareLink from '~/components/pages/forms/show/ShareLink.vue'
import EmbedCode from '~/components/pages/forms/show/EmbedCode.vue'
import FormQrCode from '~/components/pages/forms/show/FormQrCode.vue'
import UrlFormPrefill from '~/components/pages/forms/show/UrlFormPrefill.vue'
import RegenerateFormLink from '~/components/pages/forms/show/RegenerateFormLink.vue'
import AdvancedFormUrlSettings from '~/components/open/forms/components/AdvancedFormUrlSettings.vue'
import EmbedFormAsPopupModal from '~/components/pages/forms/show/EmbedFormAsPopupModal.vue'
const props = defineProps({
form: {type: Object, required: true}
})
2023-12-20 17:38:43 +00:00
2024-01-11 16:16:50 +00:00
definePageMeta({
middleware: "auth"
})
useOpnSeoMeta({
title: (props.form) ? 'Share Form - ' + props.form.title : 'Share Form'
})
2023-12-20 17:38:43 +00:00
2024-01-11 16:16:50 +00:00
const shareFormConfig = ref({
hide_title: false,
auto_submit: false
})
2023-12-09 14:47:03 +00:00
2024-01-11 16:16:50 +00:00
const shareUrlForQueryParams = computed(() => {
let queryStr = ''
for (const [key, value] of Object.entries(shareFormConfig.value)) {
if (value && value !== 'false' && value !== false) {
queryStr += '&' + encodeURIComponent(key) + "=" + encodeURIComponent(value)
2023-12-09 14:47:03 +00:00
}
2024-01-11 16:16:50 +00:00
}
return queryStr.slice(1)
})
2023-12-09 14:47:03 +00:00
</script>