From 78af50bafe9956793ace3f78c3aa77a9f367879b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 3 Nov 2023 19:34:12 +0000
Subject: [PATCH] Use new datepicker except when a range is needed

---
 .../Calendar.svelte                           |  0
 .../DateInput.svelte}                         |  0
 .../Form/Core/DatePicker/DatePicker.svelte    | 10 ++++
 .../FlatpickrDatePicker.svelte}               |  2 +-
 .../NumberInput.svelte                        |  0
 .../SpectrumDatePicker.svelte}                |  2 +-
 .../TimePicker.svelte                         |  0
 .../{DateTimePicker => DatePicker}/utils.js   |  0
 packages/bbui/src/Form/Core/index.js          |  2 +-
 packages/bbui/src/Form/DatePicker.svelte      |  2 +-
 packages/bbui/src/index.js                    |  2 +-
 .../new/_components/componentStructure.json   |  1 +
 .../pages/builder/portal/apps/index.svelte    | 40 --------------
 .../app/forms/NewDateTimeField.svelte         | 53 -------------------
 14 files changed, 16 insertions(+), 98 deletions(-)
 rename packages/bbui/src/Form/Core/{DateTimePicker => DatePicker}/Calendar.svelte (100%)
 rename packages/bbui/src/Form/Core/{DateTimePicker/DateTimeField.svelte => DatePicker/DateInput.svelte} (100%)
 create mode 100644 packages/bbui/src/Form/Core/DatePicker/DatePicker.svelte
 rename packages/bbui/src/Form/Core/{DatePicker.svelte => DatePicker/FlatpickrDatePicker.svelte} (99%)
 rename packages/bbui/src/Form/Core/{DateTimePicker => DatePicker}/NumberInput.svelte (100%)
 rename packages/bbui/src/Form/Core/{DateTimePicker/DateTimePicker.svelte => DatePicker/SpectrumDatePicker.svelte} (98%)
 rename packages/bbui/src/Form/Core/{DateTimePicker => DatePicker}/TimePicker.svelte (100%)
 rename packages/bbui/src/Form/Core/{DateTimePicker => DatePicker}/utils.js (100%)
 delete mode 100644 packages/client/src/components/app/forms/NewDateTimeField.svelte

diff --git a/packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte b/packages/bbui/src/Form/Core/DatePicker/Calendar.svelte
similarity index 100%
rename from packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte
rename to packages/bbui/src/Form/Core/DatePicker/Calendar.svelte
diff --git a/packages/bbui/src/Form/Core/DateTimePicker/DateTimeField.svelte b/packages/bbui/src/Form/Core/DatePicker/DateInput.svelte
similarity index 100%
rename from packages/bbui/src/Form/Core/DateTimePicker/DateTimeField.svelte
rename to packages/bbui/src/Form/Core/DatePicker/DateInput.svelte
diff --git a/packages/bbui/src/Form/Core/DatePicker/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker/DatePicker.svelte
new file mode 100644
index 0000000000..ec1514718c
--- /dev/null
+++ b/packages/bbui/src/Form/Core/DatePicker/DatePicker.svelte
@@ -0,0 +1,10 @@
+<script>
+  import FlatpickrDatePicker from "./FlatpickrDatePicker.svelte"
+  import SpectrumDatePicker from "./SpectrumDatePicker.svelte"
+</script>
+
+<svelte:component
+  this={$$props.range ? FlatpickrDatePicker : SpectrumDatePicker}
+  {...$$props}
+  on:change
+/>
diff --git a/packages/bbui/src/Form/Core/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker/FlatpickrDatePicker.svelte
similarity index 99%
rename from packages/bbui/src/Form/Core/DatePicker.svelte
rename to packages/bbui/src/Form/Core/DatePicker/FlatpickrDatePicker.svelte
index 7ce15292be..8d92f7633d 100644
--- a/packages/bbui/src/Form/Core/DatePicker.svelte
+++ b/packages/bbui/src/Form/Core/DatePicker/FlatpickrDatePicker.svelte
@@ -5,7 +5,7 @@
   import "@spectrum-css/textfield/dist/index-vars.css"
   import "@spectrum-css/picker/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
-  import { uuid } from "../../helpers"
+  import { uuid } from "../../../helpers"
 
   export let id = null
   export let disabled = false
diff --git a/packages/bbui/src/Form/Core/DateTimePicker/NumberInput.svelte b/packages/bbui/src/Form/Core/DatePicker/NumberInput.svelte
similarity index 100%
rename from packages/bbui/src/Form/Core/DateTimePicker/NumberInput.svelte
rename to packages/bbui/src/Form/Core/DatePicker/NumberInput.svelte
diff --git a/packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte b/packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte
similarity index 98%
rename from packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte
rename to packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte
index cccfea612c..d01097d357 100644
--- a/packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte
+++ b/packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte
@@ -7,7 +7,7 @@
   import { createEventDispatcher } from "svelte"
   import TimePicker from "./TimePicker.svelte"
   import Calendar from "./Calendar.svelte"
-  import DateTimeInput from "./DateTimeField.svelte"
+  import DateTimeInput from "./DateInput.svelte"
   import ActionButton from "../../../ActionButton/ActionButton.svelte"
 
   export let id = null
diff --git a/packages/bbui/src/Form/Core/DateTimePicker/TimePicker.svelte b/packages/bbui/src/Form/Core/DatePicker/TimePicker.svelte
similarity index 100%
rename from packages/bbui/src/Form/Core/DateTimePicker/TimePicker.svelte
rename to packages/bbui/src/Form/Core/DatePicker/TimePicker.svelte
diff --git a/packages/bbui/src/Form/Core/DateTimePicker/utils.js b/packages/bbui/src/Form/Core/DatePicker/utils.js
similarity index 100%
rename from packages/bbui/src/Form/Core/DateTimePicker/utils.js
rename to packages/bbui/src/Form/Core/DatePicker/utils.js
diff --git a/packages/bbui/src/Form/Core/index.js b/packages/bbui/src/Form/Core/index.js
index b0edf52748..4af2507147 100644
--- a/packages/bbui/src/Form/Core/index.js
+++ b/packages/bbui/src/Form/Core/index.js
@@ -8,7 +8,7 @@ export { default as CoreTextArea } from "./TextArea.svelte"
 export { default as CoreCombobox } from "./Combobox.svelte"
 export { default as CoreSwitch } from "./Switch.svelte"
 export { default as CoreSearch } from "./Search.svelte"
-export { default as CoreDatePicker } from "./DatePicker.svelte"
+export { default as CoreDatePicker } from "./DatePicker/DatePicker.svelte"
 export { default as CoreDropzone } from "./Dropzone.svelte"
 export { default as CoreStepper } from "./Stepper.svelte"
 export { default as CoreRichTextField } from "./RichTextField.svelte"
diff --git a/packages/bbui/src/Form/DatePicker.svelte b/packages/bbui/src/Form/DatePicker.svelte
index 04ce8b5467..49a66003fc 100644
--- a/packages/bbui/src/Form/DatePicker.svelte
+++ b/packages/bbui/src/Form/DatePicker.svelte
@@ -1,6 +1,6 @@
 <script>
   import Field from "./Field.svelte"
-  import DatePicker from "./Core/DatePicker.svelte"
+  import DatePicker from "./Core/DatePicker/DatePicker.svelte"
   import { createEventDispatcher } from "svelte"
 
   export let value = null
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 689cde05d7..479b9bf229 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -54,7 +54,7 @@ export { default as Notification } from "./Notification/Notification.svelte"
 export { default as SideNavigation } from "./SideNavigation/Navigation.svelte"
 export { default as SideNavigationItem } from "./SideNavigation/Item.svelte"
 export { default as DatePicker } from "./Form/DatePicker.svelte"
-export { default as DateTimePicker } from "./Form/Core/DateTimePicker/DateTimePicker.svelte"
+export { default as DateTimePicker } from "./Form/Core/DatePicker/SpectrumDatePicker.svelte"
 export { default as Multiselect } from "./Form/Multiselect.svelte"
 export { default as Context } from "./context"
 export { default as Table } from "./Table/Table.svelte"
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
index dd129be11e..ce619daa53 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
@@ -68,6 +68,7 @@
       "jsonfield",
       "relationshipfield",
       "datetimefield",
+      "newdatetimefield",
       "multifieldselect",
       "s3upload",
       "codescanner",
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index dbe4b9626d..59267f37e7 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -10,8 +10,6 @@
     Notification,
     Body,
     Search,
-    DatePicker,
-    DateTimePicker,
   } from "@budibase/bbui"
   import Spinner from "components/common/Spinner.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
@@ -204,47 +202,9 @@
       notifications.error("Error getting init info")
     }
   })
-
-  let foo = "2023-11-14T15:00:00"
 </script>
 
 <Page>
-  <div>
-    <h1>Date only</h1>
-    <div style="width: 240px;">
-      <DateTimePicker
-        enableTime={false}
-        value={foo}
-        on:change={e => (foo = e.detail)}
-      />
-    </div>
-    <h1>Date time</h1>
-    <div style="width: 240px;">
-      <DateTimePicker
-        enableTime
-        value={foo}
-        on:change={e => (foo = e.detail)}
-      />
-    </div>
-    <h1>Date time no timezone</h1>
-    <div style="width: 240px;">
-      <DateTimePicker
-        enableTime
-        ignoreTimezones
-        value={foo}
-        on:change={e => (foo = e.detail)}
-      />
-    </div>
-    <h1>Time only</h1>
-    <div style="width: 240px;">
-      <DateTimePicker timeOnly value={foo} on:change={e => (foo = e.detail)} />
-    </div>
-    <br />
-    <br />
-    <br />
-    <DatePicker />
-  </div>
-
   <Layout noPadding gap="L">
     {#each Object.keys(automationErrors || {}) as appId}
       <Notification
diff --git a/packages/client/src/components/app/forms/NewDateTimeField.svelte b/packages/client/src/components/app/forms/NewDateTimeField.svelte
deleted file mode 100644
index 6bcd20d250..0000000000
--- a/packages/client/src/components/app/forms/NewDateTimeField.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script>
-  import { CoreDatePicker } from "@budibase/bbui"
-  import Field from "./Field.svelte"
-
-  export let field
-  export let label
-  export let placeholder
-  export let disabled = false
-  export let enableTime = true
-  export let timeOnly = false
-  export let time24hr = false
-  export let ignoreTimezones = false
-  export let validation
-  export let defaultValue
-  export let onChange
-
-  let fieldState
-  let fieldApi
-
-  const handleChange = e => {
-    const changed = fieldApi.setValue(e.detail)
-    if (onChange && changed) {
-      onChange({ value: e.detail })
-    }
-  }
-</script>
-
-<Field
-  {label}
-  {field}
-  {disabled}
-  {validation}
-  {defaultValue}
-  type="datetime"
-  bind:fieldState
-  bind:fieldApi
->
-  {#if fieldState}
-    <CoreDatePicker
-      value={fieldState.value}
-      on:change={handleChange}
-      disabled={fieldState.disabled}
-      error={fieldState.error}
-      id={fieldState.fieldId}
-      appendTo={document.getElementById("flatpickr-root")}
-      {enableTime}
-      {timeOnly}
-      {time24hr}
-      {ignoreTimezones}
-      {placeholder}
-    />
-  {/if}
-</Field>