F24d9 custom time format (#473)

* fix password reset bug

* feat: time format in dat input

* fix lint issues

* fix time prefill, time format backend

* fix time format in OpenDate

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

app/Service/Forms/FormSubmissionFormatter.php

@@ -203,7 +203,9 @@ class FormSubmissionFormatter
                 $field['value'] = $data[$field['id']] ? 'Yes' : 'No';
             } elseif ($field['type'] == 'date') {
                 $dateFormat = ($field['date_format'] ?? 'dd/MM/yyyy') == 'dd/MM/yyyy' ? 'd/m/Y' : 'm/d/Y';
-                $dateFormat .= (isset($field['with_time']) && $field['with_time']) ? ' H:i' : '';
+                if (isset($field['with_time']) && $field['with_time']) {
+                    $dateFormat .= (isset($field['time_format']) && $field['time_format'] == 24) ? ' H:i' : ' g:ia';
+                }
                 if (is_array($data[$field['id']])) {
                     $field['value'] = isset($data[$field['id']][1]) ? (new Carbon($data[$field['id']][0]))->format($dateFormat)
                         . ' - ' . (new Carbon($data[$field['id']][1]))->format($dateFormat) : (new Carbon($data[$field['id']][0]))->format($dateFormat);

client/components/forms/DateInput.vue

@@ -64,6 +64,7 @@
           v-if="props.dateRange"
           v-model.range="modeledValue"
           :mode="props.withTime ? 'dateTime' : 'date'"
+          :is24hr="props.timeFormat == '24'"
           is-required
           borderless
           :min-date="minDate"
@@ -76,6 +77,7 @@
           v-else
           v-model="modeledValue"
           :mode="props.withTime ? 'dateTime' : 'date'"
+          :is24hr="props.timeFormat == '24'"
           is-required
           borderless
           :min-date="minDate"
@@ -112,6 +114,7 @@ const props = defineProps({
   disablePastDates: { type: Boolean, default: false },
   disableFutureDates: { type: Boolean, default: false },
   dateFormat: { type: String, default: 'dd/MM/yyyy' },
+  timeFormat: { type: String, default: '24' },
   outputDateFormat: { type: String, default: 'yyyy-MM-dd\'T\'HH:mm:ssXXX' },
   isDark: { type: Boolean, default: false }
 })
@@ -190,8 +193,9 @@ const clear = () => {
 const formattedDate = (value) => {
   if (props.withTime) {
     try {
-      return format(new Date(value), props.dateFormat + ' HH:mm')
+      return format(new Date(value), props.dateFormat + (props.timeFormat == 12 ? ' p':' HH:mm'))
     } catch (e) {
+      console.log(e)
       return ''
     }
   }

client/components/forms/FlatSelectInput.vue

@@ -22,9 +22,11 @@
         },
       ]"
     >
-      <div
-        v-for="(option, index) in options"
+    <template
       v-if="options && options.length"
+    >
+     <div
+        v-for="(option) in options"
         :key="option[optionKey]"
         :role="multiple?'checkbox':'radio'"
         :aria-checked="isSelected(option[optionKey])"
@@ -67,6 +69,7 @@
           {{ option[displayKey] }}
         </p>
       </div>
+    </template>
       <div
         v-else
         :class="[

client/components/open/forms/OpenFormField.vue

@@ -306,6 +306,7 @@ export default {
         inputProperties.searchable = (inputProperties.options.length > 4)
       } else if (field.type === 'date') {
         inputProperties.dateFormat = field.date_format
+        inputProperties.timeFormat = field.time_format
         if (field.with_time) {
           inputProperties.withTime = true
         }

client/components/open/forms/components/FormSubmissions.vue

@@ -163,12 +163,11 @@
 <script>
 import Fuse from 'fuse.js'
 import clonedeep from 'clone-deep'
-import VSwitch from '../../../forms/components/VSwitch.vue'
 import OpenTable from '../../tables/OpenTable.vue'
 
 export default {
   name: 'FormSubmissions',
-  components: {OpenTable, VSwitch},
+  components: {OpenTable},
   props: {},
 
   setup() {

client/components/open/forms/fields/components/FieldOptions.vue

@@ -254,6 +254,14 @@
         :searchable="true"
         help="Make sure to select the same timezone you're using in Notion. Leave blank otherwise."
       />
+      <flat-select-input
+        v-if="field.with_time"
+        name="time_format"
+        class="mt-4"
+        :form="field"
+        :options="timeFormatOptions"
+        label="Time format"
+      />
       <flat-select-input
         name="date_format"
         class="mt-4"
@@ -413,6 +421,7 @@
         name="prefill"
         class="mt-3"
         :form="field"
+        :time-format="field.time_format"
         :with-time="field.with_time === true"
         :date-range="field.date_range === true"
         label="Pre-filled value"
@@ -645,6 +654,10 @@ export default {
         }
       })
     },
+    timeFormatOptions() {
+      return [{ name: '13:00', value: '24', },
+      { name: '01:00 PM', value: '12', },]
+    },
     displayBasedOnAdvanced() {
       if (this.field.generates_uuid || this.field.generates_auto_increment_id) {
         return false
@@ -755,7 +768,7 @@ export default {
         this.field.disable_future_dates = false
         this.field.disable_past_dates = false
       } else {
-        this.field.prefill = null
+        this.field.prefill = this.field.prefill ?? null
       }
     },
     onFieldAllowCreationChange(val) {
@@ -823,7 +836,8 @@ export default {
           max_char_limit: 2000
         },
         date: {
-          date_format: this.dateFormatOptions[0].value
+          date_format: this.dateFormatOptions[0].value,
+          time_format: this.timeFormatOptions[0].value
         }
       }
       if (this.field.type in defaultFieldValues) {

client/components/open/tables/components/OpenDate.vue

@@ -39,9 +39,10 @@ export default {
     formattedDate(val) {
       if (!val) return ''
       const dateFormat = _has(this.property, 'date_format') ? this.property.date_format : 'dd/MM/yyyy'
+      const timeFormat = _has(this.property, 'time_format') ? this.property.time_format : '24'
       if (this.property?.with_time) {
         try {
-          return format(new Date(val), dateFormat + ' HH:mm')
+          return format(new Date(val), dateFormat + (timeFormat == 12 ? ' p':' HH:mm'))
         } catch (e) {
           return ''
         }

client/public/widgets/iframe.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 !function (e) {
   var n, i, t, o, r, a, s, l, f, c, d, u, m, g