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

New Date input (#368)

Browse Source 
Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Chirag Chhatrala
2024-04-15 18:39:19 +05:30
committed by GitHub
parent 1dd02cc147
commit 4f4f7128fa
10 changed files with 501 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
client/components/open/forms/OpenForm.vue
View File

@@ -338,9 +338,8 @@ export default {
}
if (this.isPublicFormPage && this.form.editable_submissions) {
const urlParam = new URLSearchParams(window.location.search)
if (urlParam && urlParam.get('submission_id')) {
this.form.submission_id = urlParam.get('submission_id')
if (useRoute().query?.submission_id) {
this.form.submission_id = useRoute().query?.submission_id
const data = await this.getSubmissionData()
if (data !== null && data) {
this.dataForm = useForm(data)
@@ -353,15 +352,7 @@ export default {
if (pendingData !== null && pendingData && Object.keys(this.pendingSubmission.get()).length !== 0) {
this.fields.forEach((field) => {
if (field.type === 'date' && field.prefill_today === true) { // For Prefill with 'today'
const dateObj = new Date()
let currentDate = dateObj.getFullYear() + '-' +
String(dateObj.getMonth() + 1).padStart(2, '0') + '-' +
String(dateObj.getDate()).padStart(2, '0')
if (field.with_time === true) {
currentDate += 'T' + String(dateObj.getHours()).padStart(2, '0') + ':' +
String(dateObj.getMinutes()).padStart(2, '0')
}
pendingData[field.id] = currentDate
pendingData[field.id] = new Date().toISOString()
}
})
this.dataForm = useForm(pendingData)
@@ -395,15 +386,7 @@ export default {
// 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()
let currentDate = dateObj.getFullYear() + '-' +
String(dateObj.getMonth() + 1).padStart(2, '0') + '-' +
String(dateObj.getDate()).padStart(2, '0')
if (field.with_time === true) {
currentDate += 'T' + String(dateObj.getHours()).padStart(2, '0') + ':' +
String(dateObj.getMinutes()).padStart(2, '0')
}
formData[field.id] = currentDate
formData[field.id] = new Date().toISOString()
} else { // Default prefill if any
formData[field.id] = field.prefill
}

11
client/components/open/forms/OpenFormField.vue
View File

@@ -56,6 +56,7 @@
<script>
import { computed } from 'vue'
import FormLogicPropertyResolver from "~/lib/forms/FormLogicPropertyResolver.js"
import { darkModeEnabled } from '~/lib/forms/public-page.js'
import { default as _has } from 'lodash/has'
export default {
@@ -176,6 +177,9 @@ export default {
},
fieldSideBarOpened() {
return this.adminPreview && (this.form && this.selectedFieldIndex !== null) ? (this.form.properties[this.selectedFieldIndex] && this.showEditFieldSidebar) : false
},
isDark () {
return this.form.dark_mode === 'dark' || this.form.dark_mode === 'auto' && darkModeEnabled()
}
},
@@ -245,7 +249,8 @@ export default {
uppercaseLabels: this.form.uppercase_labels == 1 || this.form.uppercase_labels == true,
theme: this.theme,
maxCharLimit: (field.max_char_limit) ? parseInt(field.max_char_limit) : 2000,
showCharLimit: field.show_char_limit || false
showCharLimit: field.show_char_limit || false,
isDark: this.isDark
}
if (['select', 'multi_select'].includes(field.type)) {
@@ -261,9 +266,11 @@ export default {
inputProperties.allowCreation = (field.allow_creation === true)
inputProperties.searchable = (inputProperties.options.length > 4)
} else if (field.type === 'date') {
inputProperties.dateFormat = field.date_format
if (field.with_time) {
inputProperties.withTime = true
} else if (field.date_range) {
}
if (field.date_range) {
inputProperties.dateRange = true
}
if (field.disable_past_dates) {

119
client/components/open/forms/fields/components/FieldOptions.vue
View File

@@ -8,18 +8,12 @@
<p class="text-gray-400 mb-2 text-xs">
Exclude this field or make it required.
</p>
<v-checkbox v-model="field.hidden" class="mb-3" :name="field.id + '_hidden'"
@update:model-value="onFieldHiddenChange">
Hidden
</v-checkbox>
<v-checkbox v-model="field.required" class="mb-3" :name="field.id + '_required'"
@update:model-value="onFieldRequiredChange">
Required
</v-checkbox>
<v-checkbox v-model="field.disabled" class="mb-3" :name="field.id + '_disabled'"
@update:model-value="onFieldDisabledChange">
Disabled
</v-checkbox>
<toggle-switch-input :form="field" name="required" label="Required"
@update:model-value="onFieldRequiredChange"/>
<toggle-switch-input :form="field" name="hidden" label="Hidden"
@update:model-value="onFieldHiddenChange"/>
<toggle-switch-input :form="field" name="disabled" label="Disabled"
@update:model-value="onFieldDisabledChange"/>
</div>
<!-- Checkbox -->
@@ -119,38 +113,53 @@
<h3 class="font-semibold block text-lg">
Date Options
</h3>
<v-checkbox v-model="field.date_range" class="mt-3" :name="field.id + '_date_range'"
@update:model-value="onFieldDateRangeChange">
Date Range
</v-checkbox>
<p class="text-gray-400 mb-3 text-xs">
Adds an end date. This cannot be used with the time option yet.
</p>
<v-checkbox v-model="field.with_time" :name="field.id + '_with_time'" @update:model-value="onFieldWithTimeChange">
Date with time
</v-checkbox>
<p class="text-gray-400 mb-3 text-xs">
Include time. Or not. This cannot be used with the date range option yet.
</p>
<select-input v-if="field.with_time" name="timezone" class="mt-3" :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" @update:model-value="onFieldPrefillTodayChange">
Prefill with 'today'
</v-checkbox>
<p class="text-gray-400 mb-3 text-xs">
if enabled we will pre-fill this field with the current date
</p>
<v-checkbox v-model="field.disable_past_dates" name="disable_past_dates" class="mb-3"
@update:model-value="onFieldDisablePastDatesChange">
Disable past dates
</v-checkbox>
<v-checkbox v-model="field.disable_future_dates" name="disable_future_dates" class="mb-3"
@update:model-value="onFieldDisableFutureDatesChange">
Disable future dates
</v-checkbox>
<toggle-switch-input
:form="field"
class="mt-3"
name="date_range"
label="End date"
@update:model-value="onFieldDateRangeChange"
/>
<toggle-switch-input
:form="field"
name="prefill_today"
label="Prefill with 'today'"
@update:model-value="onFieldPrefillTodayChange"
/>
<toggle-switch-input
:form="field"
name="disable_past_dates"
label="Disable past dates"
@update:model-value="onFieldDisablePastDatesChange"
/>
<toggle-switch-input
:form="field"
name="disable_future_dates"
label="Disable future dates"
@update:model-value="onFieldDisableFutureDatesChange"
/>
<toggle-switch-input
:form="field"
name="with_time"
label="Include time"
/>
<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 the same timezone you're using in Notion. Leave blank otherwise."
/>
<flat-select-input
name="date_format"
class="mt-4"
:form="field"
:options="dateFormatOptions"
label="Date format"
/>
</div>
<!-- select/multiselect Options -->
@@ -268,7 +277,7 @@
<!-- Help -->
<rich-text-area-input name="help" class="mt-3" :form="field" :editor-toolbar="editorToolbarCustom"
label="Field Help" help="Your field help will be shown below/above the field, just like this message."
label="Field Help" help="Your field help will be shown below/above the field, just like this text."
:help-position="field.help_position" />
<select-input name="help_position" class="mt-3" :options="[
{ name: 'Below input', value: 'below_input' },
@@ -316,6 +325,7 @@ import timezones from '~/data/timezones.json'
import countryCodes from '~/data/country_codes.json'
import CountryFlag from 'vue-country-flag-next'
import FormBlockLogicEditor from '../../components/form-logic-components/FormBlockLogicEditor.vue'
import { format } from 'date-fns'
import { default as _has } from 'lodash/has'
export default {
@@ -370,6 +380,15 @@ export default {
}
})
},
dateFormatOptions () {
const date = new Date()
return ['dd/MM/yyyy', 'MM-dd-yyyy'].map(dateFormat => {
return {
name: format(date, dateFormat),
value: dateFormat
}
})
},
displayBasedOnAdvanced() {
if (this.field.generates_uuid || this.field.generates_auto_increment_id) {
return false
@@ -445,16 +464,9 @@ export default {
onFieldDateRangeChange(val) {
this.field.date_range = val
if (this.field.date_range) {
this.field.with_time = false
this.field.prefill_today = false
}
},
onFieldWithTimeChange(val) {
this.field.with_time = val
if (this.field.with_time) {
this.field.date_range = false
}
},
onFieldGenUIdChange(val) {
this.field.generates_uuid = val
if (this.field.generates_uuid) {
@@ -554,6 +566,9 @@ export default {
url: {
max_char_limit: 2000
},
date: {
date_format: this.dateFormatOptions[0].value
}
}
if (this.field.type in defaultFieldValues) {
Object.keys(defaultFieldValues[this.field.type]).forEach(key => {