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

Apply previous changes: slack webhooks, date range issue, 12h am/pm format, today preifl, api-keys

Browse Source
This commit is contained in:
JhumanJ
2022-09-21 17:23:37 +02:00
parent 341ee04268
commit 18ed28da2e
19 changed files with 305 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -288,6 +288,12 @@ export default {
} else if (urlPrefill && urlPrefill.has(field.id + '[]')) {
// Array url prefills
formData[field.id] = urlPrefill.getAll(field.id + '[]')
} else if (field.type === 'date' && field.prefill_today === true) { // For Prefill with 'today'
const dateObj = new Date()
const currentDate = dateObj.getFullYear() + '-' +
String(dateObj.getMonth() + 1).padStart(2, '0') + '-' +
String(dateObj.getDate()).padStart(2, '0')
formData[field.id] = currentDate
} else { // Default prefill if any
formData[field.id] = field.prefill
}
@@ -363,6 +369,9 @@ export default {
} else if (field.date_range) {
inputProperties.dateRange = true
}
if (field.use_am_pm) {
inputProperties.amPm = true
}
} else if (field.type === 'files' || (field.type === 'url' && field.file_upload)) {
inputProperties.multiple = (field.multiple !== undefined && field.multiple)
inputProperties.mbLimit = 5

65
resources/js/components/open/forms/components/form-components/FormIntegrations.vue
View File

@@ -2,11 +2,13 @@
<collapse class="p-5 w-full border-b">
<template #title>
<h3 class="font-semibold text-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline text-gray-500 mr-2 -mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline text-gray-500 mr-2 -mt-1" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"/>
</svg>
Integrations
<pro-tag />
<pro-tag/>
</h3>
</template>
<text-input name="webhook_url" class="mt-4"
@@ -14,24 +16,26 @@
label="Webhook URL"
/>
<p>
<span class="text-uppercase font-semibold text-blue-500">NEW</span> - our Zapier integration is available for
beta testers! During the beta, <b>you don't need a Pro subscription</b> to try it out.
</p>
<p class="w-full text-center mt-5">
<a :href="zapierUrl" target="_blank">
<v-button color="gray" shade="lighter">
<svg class="h-5 w-5 inline text-yellow-500" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
d="M318 256c0 19-4 36-10 52-16 7-34 10-52 10-19 0-36-3-52-9-7-17-10-34-10-53 0-18 3-36 10-52 16-6 33-10 52-10 18 0 36 4 52 10 6 16 10 34 10 52zm182-41H355l102-102c-8-11-17-22-26-32-10-9-21-18-32-26L297 157V12c-13-2-27-3-41-3s-28 1-41 3v145L113 55c-12 8-22 17-32 26-10 10-19 21-27 32l102 102H12s-3 27-3 41 1 28 3 41h144L54 399c16 23 36 43 59 59l102-102v144c13 2 27 3 41 3s28-1 41-3V356l102 102c11-8 22-17 32-27 9-10 18-20 26-32L355 297h145c2-13 3-27 3-41s-1-28-3-41z"
/>
</svg>
Zapier Integration
</v-button>
</a>
</p>
<!-- <div>-->
<!-- <p>-->
<!-- <span class="text-uppercase font-semibold text-blue-500">NEW</span> - our Zapier integration is available for-->
<!-- beta testers!-->
<!-- </p>-->
<!-- <p class="w-full text-center mt-5">-->
<!-- <a :href="zapierUrl" target="_blank">-->
<!-- <v-button color="gray" shade="lighter">-->
<!-- <svg class="h-5 w-5 inline text-yellow-500" fill="currentColor" xmlns="http://www.w3.org/2000/svg"-->
<!-- viewBox="0 0 512 512"-->
<!-- >-->
<!-- <path-->
<!-- d="M318 256c0 19-4 36-10 52-16 7-34 10-52 10-19 0-36-3-52-9-7-17-10-34-10-53 0-18 3-36 10-52 16-6 33-10 52-10 18 0 36 4 52 10 6 16 10 34 10 52zm182-41H355l102-102c-8-11-17-22-26-32-10-9-21-18-32-26L297 157V12c-13-2-27-3-41-3s-28 1-41 3v145L113 55c-12 8-22 17-32 26-10 10-19 21-27 32l102 102H12s-3 27-3 41 1 28 3 41h144L54 399c16 23 36 43 59 59l102-102v144c13 2 27 3 41 3s28-1 41-3V356l102 102c11-8 22-17 32-27 9-10 18-20 26-32L355 297h145c2-13 3-27 3-41s-1-28-3-41z"-->
<!-- />-->
<!-- </svg>-->
<!-- Zapier Integration-->
<!-- </v-button>-->
<!-- </a>-->
<!-- </p>-->
<!-- </div>-->
</collapse>
</template>
@@ -40,21 +44,19 @@ import Collapse from '../../../../common/Collapse'
import ProTag from '../../../../common/ProTag'
export default {
components: { Collapse, ProTag },
props: {
},
data () {
return {
}
components: {Collapse, ProTag},
props: {},
data() {
return {}
},
computed: {
form: {
get () {
get() {
return this.$store.state['open/working_form'].content
},
/* We add a setter */
set (value) {
set(value) {
this.$store.commit('open/working_form/set', value)
}
},
@@ -64,10 +66,9 @@ export default {
watch: {},
mounted () {
mounted() {
},
methods: {
}
methods: {}
}
</script>

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

@@ -15,6 +15,17 @@
<text-area-input v-if="form.notifies" name="notification_emails" :form="form" class="mt-4"
label="Notification Emails" help="Add one email per line"
/>
<checkbox-input name="notifies_slack" :form="form" class="mt-4"
label="Receive a Slack notification on submission"
/>
<text-input v-if="form.notifies_slack" name="slack_webhook_url" :form="form" class="mt-4"
label="Slack webhook url" help="help"
>
<template #help>
Receive slack message on each form submission. <a href="https://api.slack.com/messaging/webhooks" target="_blank">Click here</a> to learn how to get a slack webhook url
</template>
</text-input>
<checkbox-input :disabled="emailSubmissionConfirmationField===null" name="send_submission_confirmation"
:form="form" class="mt-4"
label="Send submission confirmation" :help="emailSubmissionConfirmationHelp"

35
resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
View File

@@ -111,12 +111,30 @@
<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"
label="Timezone" :searchable="true"
help="Make sure to select correct timezone. Leave blank otherwise."
/>
<v-checkbox v-model="field.prefill_today"
name="prefill_today"
@input="onFieldPrefillTodayChange"
>
Prefill with 'today'
</v-checkbox>
<p class="text-gray-400 mb-5">
if enabled we will pre-fill this field with the current date
</p>
</div>
<!-- select/multiselect Options -->
@@ -180,6 +198,11 @@
label="Pre-filled value"
: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"
:date-range="field.date_range===true"
label="Pre-filled value"
/>
<text-area-input v-else-if="field.type === 'text' && field.multi_lines"
name="prefill" class="mt-4"
:form="field"
@@ -188,6 +211,7 @@
<text-input v-else-if="field.type!=='files'" name="prefill" class="mt-4"
:form="field"
label="Pre-filled value"
:disabled="field.type==='date' && field.prefill_today===true"
/>
<div v-if="['select','multi_select'].includes(field.type)" class="-mt-3 mb-3 text-gray-400 dark:text-gray-500">
<small>
@@ -383,10 +407,12 @@ export default {
this.$set(this.field, 'date_range', val)
if (this.field.date_range) {
this.$set(this.field, 'with_time', false)
this.$set(this.field, 'prefill_today', false)
}
},
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)
}
@@ -420,6 +446,15 @@ export default {
})
this.$set(this.field, this.field.type, {'options': tmpOpts})
},
onFieldPrefillTodayChange (val) {
this.$set(this.field, 'prefill_today', val)
if (this.field.prefill_today) {
this.$set(this.field, 'prefill', 'Pre-filled with current date')
this.$set(this.field, 'date_range', false)
} else {
this.$set(this.field, 'prefill', null)
}
},
onFieldAllowCreationChange (val) {
this.$set(this.field, 'allow_creation', val)
if(this.field.allow_creation){