Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: impl datetime dropdown #74

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: impl datetime dropdown #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
38f9796
feat: impl datetime dropdown
samsoft00 May 21, 2023
18bd6b1
Merge branch 'main' into feat/impl-date-time-dropdown
samsoft00 May 21, 2023
4c81ac3
fix: remove pkg and commented code
samsoft00 May 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion model/date/core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,6 @@
"dependencies": {
"@cozemble/lang-util": "workspace:*",
"@cozemble/model-core": "workspace:*",
"date-fns": "^2.29.3"
"dayjs": "~1.11.7"
}
}
20 changes: 14 additions & 6 deletions model/date/core/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,14 @@ import {
SlotConfiguration,
SystemConfiguration,
} from '@cozemble/model-core'
import { format, parse } from 'date-fns'

import advancedFormat from 'dayjs/plugin/advancedFormat'
import dayjs from 'dayjs'

dayjs.extend(advancedFormat)

const iso8601DateFormat = 'yyyy-MM-dd'
const defaultDateFormat = 'yyyy-MM-dd'
const defaultDateFormat = 'YYYY-MM-DD'
const html5InputDateFormat = 'yyyy-MM-dd'

export const datePropertyType = propertyTypeFns.newInstance('date.property')
Expand Down Expand Up @@ -64,7 +68,8 @@ export interface DatePropertySystemConfiguration
}

function formatDate(systemConfiguration: SystemConfiguration, date: Date): string {
return format(date, systemConfigurationDateFormat(systemConfiguration))
return dayjs(date).format(systemConfigurationDateFormat(systemConfiguration))
// return format(date, systemConfigurationDateFormat(systemConfiguration))
}

function systemConfigurationDateFormat(systemConfiguration: SystemConfiguration): string {
Expand All @@ -81,7 +86,9 @@ function html5InputAsIsoDate(
if (value === null) {
return null
}
return format(parse(value, html5InputDateFormat, new Date(0)), iso8601DateFormat)

return dayjs(value).format(systemConfigurationDateFormat(systemConfiguration))
// return format(parse(value, html5InputDateFormat, new Date(0)), iso8601DateFormat)
}

export const datePropertyDescriptor: PropertyDescriptor<DateProperty, string> = {
Expand Down Expand Up @@ -117,6 +124,7 @@ export const datePropertyDescriptor: PropertyDescriptor<DateProperty, string> =
value: string | null,
) => {
const persistedValue = html5InputAsIsoDate(systemConfiguration, value)
console.log(value, systemConfiguration, persistedValue)
return {
...record,
values: {
Expand All @@ -130,8 +138,8 @@ export const datePropertyDescriptor: PropertyDescriptor<DateProperty, string> =
if (maybeValue === null) {
return null
}
const parsed = parse(maybeValue, iso8601DateFormat, new Date(0))
return format(parsed, systemConfigurationDateFormat(systemConfiguration))

return dayjs(maybeValue).format(systemConfigurationDateFormat(systemConfiguration))
},
newProperty: (
systemConfiguration: SystemConfiguration,
Expand Down
31 changes: 28 additions & 3 deletions model/date/ui/src/lib/DateSystemConfigurationComponent.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,32 @@

export let systemConfiguration: Writable<SystemConfiguration>
console.log({systemConfiguration})

let dateFormatObj = [
{ key: "ddd MMM DD HH:mm:ss Z YYYY", value:"ddd MMM DD HH:mm:ss Z YYYY (Sun Jan 22 23:04:05 -0000 2006)"},
{ key: "MMMM DD YYYY HH:mm:ss", value: "MMMM DD YYYY HH:mm:ss (January 22 2006 23:04:05)" },
{ key: "MMMM DD YYYY", value:"MMMM DD YYYY (January 22 2006)" },
{ key: "YYYY-MM-DDTHH:mm:ssZ", value: "YYYY-MM-DDTHH:mm:ssZ (2006-01-22T23:04:05-0000)" },
{ key: "YYYY-MM-DD HH:mm:ss Z", value: "YYYY-MM-DD HH:mm:ss Z (2006-01-22 23:04:05 -0000)" },
{ key: "YYYY-MM-DD", value: "YYYY-MM-DD (2006-01-22)" },
{ key: "MM/DD/YYYY", value: "MM/DD/YYYY (01/22/2006)" },
{ key: "MM/DD/YY", value: "MM/DD/YY (01/22/06)" },
{ key: "DD-MM-YYYY", value: "DD-MM-YYYY (22-01-2006)" },
{ key: "DD/MM/YYYY", value: "DD/MM/YYYY (22/01/2006)" },
{ key: "DD/MM/YY", value: "DD/MM/YY (22/01/06)" },
{ key: "X", value: "X (1137971045)" }
]

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great that we are making a drop down. But is this too complicated? Check what Airtable does . 5 or 6 simple options, with a live example so you can see what it looks like.

Also, the current date in cozemble does not support time. My thinking so far was to model time as its own type....but not sure if that is a good idea.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's discuss this, I'm willing to make adjustments.

</script>
<label>Date format:</label>
<input type="text" class="input input-bordered w-full max-w-xs"
bind:value={$systemConfiguration.slotConfiguration[datePropertyType.value].configuration.dateFormat}/>

<label class="label" for="date-format-selector">Date format selector</label>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're getting better with svelte :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you 😄

<!-- Dropdown list date format types -->
<div class="mb-8" id="date-format-selector">
<select data-choose-data class="select select-bordered select-primary w-full max-w-3xl text-xl"
bind:value={$systemConfiguration.slotConfiguration[datePropertyType.value].configuration.dateFormat}>
<option disabled selected>Select default Date Format</option>
{#each dateFormatObj as dateFormat}
<option value={dateFormat.key}>{dateFormat.value}</option>
{/each}
</select>
</div>
110 changes: 75 additions & 35 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.