mirror of https://github.com/nocodb/nocodb
Wing-Kam Wong
2 years ago
20 changed files with 759 additions and 11 deletions
@ -0,0 +1,38 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import { dateFormats, timeFormats, useVModel } from '#imports' |
||||||
|
|
||||||
|
const props = defineProps<{ |
||||||
|
value: any |
||||||
|
}>() |
||||||
|
|
||||||
|
const emit = defineEmits(['update:value']) |
||||||
|
|
||||||
|
const vModel = useVModel(props, 'value', emit) |
||||||
|
|
||||||
|
if (!vModel.value.meta?.date_format) { |
||||||
|
if (!vModel.value.meta) vModel.value.meta = {} |
||||||
|
vModel.value.meta.date_format = dateFormats[0] |
||||||
|
} |
||||||
|
|
||||||
|
if (!vModel.value.meta?.time_format) { |
||||||
|
if (!vModel.value.meta) vModel.value.meta = {} |
||||||
|
vModel.value.meta.time_format = timeFormats[0] |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<a-form-item label="Date Format"> |
||||||
|
<a-select v-model:value="vModel.meta.date_format" class="nc-date-select" dropdown-class-name="nc-dropdown-date-format"> |
||||||
|
<a-select-option v-for="(format, i) of dateFormats" :key="i" :value="format"> |
||||||
|
{{ format }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
<a-form-item label="Time Format"> |
||||||
|
<a-select v-model:value="vModel.meta.time_format" class="nc-time-select" dropdown-class-name="nc-dropdown-time-format"> |
||||||
|
<a-select-option v-for="(format, i) of timeFormats" :key="i" :value="format"> |
||||||
|
{{ format }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</template> |
||||||
@ -0,0 +1,137 @@ |
|||||||
|
export function convertUnits( |
||||||
|
unit: string, |
||||||
|
type: 'mysql' | 'mssql' | 'pg' | 'sqlite' |
||||||
|
) { |
||||||
|
switch (unit) { |
||||||
|
case 'milliseconds': |
||||||
|
case 'ms': { |
||||||
|
switch (type) { |
||||||
|
case 'mssql': |
||||||
|
return 'millisecond'; |
||||||
|
case 'mysql': |
||||||
|
// MySQL doesn't support millisecond
|
||||||
|
// hence change from MICROSECOND to millisecond manually
|
||||||
|
return 'MICROSECOND'; |
||||||
|
case 'pg': |
||||||
|
case 'sqlite': |
||||||
|
return 'milliseconds'; |
||||||
|
default: |
||||||
|
return unit; |
||||||
|
} |
||||||
|
} |
||||||
|
case 'seconds': |
||||||
|
case 's': { |
||||||
|
switch (type) { |
||||||
|
case 'mssql': |
||||||
|
case 'pg': |
||||||
|
return 'second'; |
||||||
|
case 'mysql': |
||||||
|
return 'SECOND'; |
||||||
|
case 'sqlite': |
||||||
|
return 'seconds'; |
||||||
|
default: |
||||||
|
return unit; |
||||||
|
} |
||||||
|
} |
||||||
|
case 'minutes': |
||||||
|
case 'm': { |
||||||
|
switch (type) { |
||||||
|
case 'mssql': |
||||||
|
case 'pg': |
||||||
|
return 'minute'; |
||||||
|
case 'mysql': |
||||||
|
return 'MINUTE'; |
||||||
|
case 'sqlite': |
||||||
|
return 'minutes'; |
||||||
|
default: |
||||||
|
return unit; |
||||||
|
} |
||||||
|
} |
||||||
|
case 'hours': |
||||||
|
case 'h': { |
||||||
|
switch (type) { |
||||||
|
case 'mssql': |
||||||
|
case 'pg': |
||||||
|
return 'hour'; |
||||||
|
case 'mysql': |
||||||
|
return 'HOUR'; |
||||||
|
case 'sqlite': |
||||||
|
return 'hours'; |
||||||
|
default: |
||||||
|
return unit; |
||||||
|
} |
||||||
|
} |
||||||
|
case 'days': |
||||||
|
case 'd': { |
||||||
|
switch (type) { |
||||||
|
case 'mssql': |
||||||
|
case 'pg': |
||||||
|
return 'day'; |
||||||
|
case 'mysql': |
||||||
|
return 'DAY'; |
||||||
|
case 'sqlite': |
||||||
|
return 'days'; |
||||||
|
default: |
||||||
|
return unit; |
||||||
|
} |
||||||
|
} |
||||||
|
case 'weeks': |
||||||
|
case 'w': { |
||||||
|
switch (type) { |
||||||
|
case 'mssql': |
||||||
|
case 'pg': |
||||||
|
return 'week'; |
||||||
|
case 'mysql': |
||||||
|
return 'WEEK'; |
||||||
|
case 'sqlite': |
||||||
|
return 'weeks'; |
||||||
|
default: |
||||||
|
return unit; |
||||||
|
} |
||||||
|
} |
||||||
|
case 'months': |
||||||
|
case 'M': { |
||||||
|
switch (type) { |
||||||
|
case 'mssql': |
||||||
|
case 'pg': |
||||||
|
return 'month'; |
||||||
|
case 'mysql': |
||||||
|
return 'MONTH'; |
||||||
|
case 'sqlite': |
||||||
|
return 'months'; |
||||||
|
default: |
||||||
|
return unit; |
||||||
|
} |
||||||
|
} |
||||||
|
case 'quarters': |
||||||
|
case 'Q': { |
||||||
|
switch (type) { |
||||||
|
case 'mssql': |
||||||
|
case 'pg': |
||||||
|
return 'quarter'; |
||||||
|
case 'mysql': |
||||||
|
return 'QUARTER'; |
||||||
|
case 'sqlite': |
||||||
|
return 'quarters'; |
||||||
|
default: |
||||||
|
return unit; |
||||||
|
} |
||||||
|
} |
||||||
|
case 'years': |
||||||
|
case 'y': { |
||||||
|
switch (type) { |
||||||
|
case 'mssql': |
||||||
|
case 'pg': |
||||||
|
return 'year'; |
||||||
|
case 'mysql': |
||||||
|
return 'YEAR'; |
||||||
|
case 'sqlite': |
||||||
|
return 'years'; |
||||||
|
default: |
||||||
|
return unit; |
||||||
|
} |
||||||
|
} |
||||||
|
default: |
||||||
|
return unit; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,75 @@ |
|||||||
|
import dayjs from 'dayjs'; |
||||||
|
|
||||||
|
export const dateFormats = [ |
||||||
|
'DD-MM-YYYY', |
||||||
|
'MM-DD-YYYY', |
||||||
|
'YYYY-MM-DD', |
||||||
|
'DD/MM/YYYY', |
||||||
|
'MM/DD/YYYY', |
||||||
|
'YYYY/MM/DD', |
||||||
|
'DD MM YYYY', |
||||||
|
'MM DD YYYY', |
||||||
|
'YYYY MM DD', |
||||||
|
]; |
||||||
|
|
||||||
|
export function validateDateFormat(v: string) { |
||||||
|
return dateFormats.includes(v); |
||||||
|
} |
||||||
|
|
||||||
|
export function validateDateWithUnknownFormat(v: string) { |
||||||
|
for (const format of dateFormats) { |
||||||
|
if (dayjs(v, format, true).isValid() as any) { |
||||||
|
return true; |
||||||
|
} |
||||||
|
for (const timeFormat of ['HH:mm', 'HH:mm:ss', 'HH:mm:ss.SSS']) { |
||||||
|
if (dayjs(v, `${format} ${timeFormat}`, true).isValid() as any) { |
||||||
|
return true; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
export function getDateFormat(v: string) { |
||||||
|
for (const format of dateFormats) { |
||||||
|
if (dayjs(v, format, true).isValid()) { |
||||||
|
return format; |
||||||
|
} |
||||||
|
} |
||||||
|
return 'YYYY/MM/DD'; |
||||||
|
} |
||||||
|
|
||||||
|
export function getDateTimeFormat(v: string) { |
||||||
|
for (const format of dateFormats) { |
||||||
|
for (const timeFormat of ['HH:mm', 'HH:mm:ss', 'HH:mm:ss.SSS']) { |
||||||
|
const dateTimeFormat = `${format} ${timeFormat}`; |
||||||
|
if (dayjs(v, dateTimeFormat, true).isValid() as any) { |
||||||
|
return dateTimeFormat; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
return 'YYYY/MM/DD'; |
||||||
|
} |
||||||
|
|
||||||
|
export function parseStringDate(v: string, dateFormat: string) { |
||||||
|
const dayjsObj = dayjs(v); |
||||||
|
if (dayjsObj.isValid()) { |
||||||
|
v = dayjsObj.format('YYYY-MM-DD'); |
||||||
|
} else { |
||||||
|
v = dayjs(v, dateFormat).format('YYYY-MM-DD'); |
||||||
|
} |
||||||
|
return v; |
||||||
|
} |
||||||
|
|
||||||
|
export function convertToTargetFormat( |
||||||
|
v: string, |
||||||
|
oldDataFormat, |
||||||
|
newDateFormat: string |
||||||
|
) { |
||||||
|
if ( |
||||||
|
!dateFormats.includes(oldDataFormat) || |
||||||
|
!dateFormats.includes(newDateFormat) |
||||||
|
) |
||||||
|
return v; |
||||||
|
return dayjs(v, oldDataFormat).format(newDateFormat); |
||||||
|
} |
||||||
@ -0,0 +1,67 @@ |
|||||||
|
import { CellPageObject } from '.'; |
||||||
|
import BasePage from '../../../Base'; |
||||||
|
|
||||||
|
export class DateTimeCellPageObject extends BasePage { |
||||||
|
readonly cell: CellPageObject; |
||||||
|
|
||||||
|
constructor(cell: CellPageObject) { |
||||||
|
super(cell.rootPage); |
||||||
|
this.cell = cell; |
||||||
|
} |
||||||
|
|
||||||
|
get({ index, columnHeader }: { index?: number; columnHeader: string }) { |
||||||
|
return this.cell.get({ index, columnHeader }); |
||||||
|
} |
||||||
|
|
||||||
|
async open({ index, columnHeader }: { index: number; columnHeader: string }) { |
||||||
|
await this.rootPage.locator('.nc-grid-add-new-cell').click(); |
||||||
|
|
||||||
|
await this.cell.dblclick({ |
||||||
|
index, |
||||||
|
columnHeader, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
async save() { |
||||||
|
await this.rootPage.locator('button:has-text("Ok")').click(); |
||||||
|
} |
||||||
|
|
||||||
|
async selectDate({ |
||||||
|
// date formats in `YYYY-MM-DD`
|
||||||
|
date, |
||||||
|
}: { |
||||||
|
date: string; |
||||||
|
}) { |
||||||
|
// title date format needs to be YYYY-MM-DD
|
||||||
|
await this.rootPage.locator(`td[title="${date}"]`).click(); |
||||||
|
} |
||||||
|
|
||||||
|
async selectTime({ |
||||||
|
// hour: 0 - 23
|
||||||
|
// minute: 0 - 59
|
||||||
|
// second: 0 - 59
|
||||||
|
hour, |
||||||
|
minute, |
||||||
|
second, |
||||||
|
}: { |
||||||
|
hour: number; |
||||||
|
minute: number; |
||||||
|
second?: number | null; |
||||||
|
}) { |
||||||
|
await this.rootPage |
||||||
|
.locator(`.ant-picker-time-panel-column:nth-child(1) > .ant-picker-time-panel-cell:nth-child(${hour + 1})`) |
||||||
|
.click(); |
||||||
|
await this.rootPage |
||||||
|
.locator(`.ant-picker-time-panel-column:nth-child(2) > .ant-picker-time-panel-cell:nth-child(${minute + 1})`) |
||||||
|
.click(); |
||||||
|
if (second != null) { |
||||||
|
await this.rootPage |
||||||
|
.locator(`.ant-picker-time-panel-column:nth-child(3) > .ant-picker-time-panel-cell:nth-child(${second + 1})`) |
||||||
|
.click(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
async close() { |
||||||
|
await this.rootPage.keyboard.press('Escape'); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,113 @@ |
|||||||
|
import { test } from '@playwright/test'; |
||||||
|
import { DashboardPage } from '../pages/Dashboard'; |
||||||
|
import setup from '../setup'; |
||||||
|
|
||||||
|
const dateTimeData = [ |
||||||
|
{ |
||||||
|
dateFormat: 'YYYY-MM-DD', |
||||||
|
timeFormat: 'HH:mm', |
||||||
|
date: '2022-12-12', |
||||||
|
hour: 10, |
||||||
|
minute: 20, |
||||||
|
output: '2022-12-12 10:20', |
||||||
|
}, |
||||||
|
{ |
||||||
|
dateFormat: 'YYYY-MM-DD', |
||||||
|
timeFormat: 'HH:mm:ss', |
||||||
|
date: '2022-12-11', |
||||||
|
hour: 20, |
||||||
|
minute: 30, |
||||||
|
second: 40, |
||||||
|
output: '2022-12-11 20:30:40', |
||||||
|
}, |
||||||
|
{ |
||||||
|
dateFormat: 'YYYY/MM/DD', |
||||||
|
timeFormat: 'HH:mm', |
||||||
|
date: '2022-12-13', |
||||||
|
hour: 10, |
||||||
|
minute: 20, |
||||||
|
output: '2022/12/13 10:20', |
||||||
|
}, |
||||||
|
{ |
||||||
|
dateFormat: 'YYYY/MM/DD', |
||||||
|
timeFormat: 'HH:mm:ss', |
||||||
|
date: '2022-12-14', |
||||||
|
hour: 5, |
||||||
|
minute: 30, |
||||||
|
second: 40, |
||||||
|
output: '2022/12/14 05:30:40', |
||||||
|
}, |
||||||
|
{ |
||||||
|
dateFormat: 'DD-MM-YYYY', |
||||||
|
timeFormat: 'HH:mm', |
||||||
|
date: '2022-12-10', |
||||||
|
hour: 4, |
||||||
|
minute: 30, |
||||||
|
output: '10-12-2022 04:30', |
||||||
|
}, |
||||||
|
{ |
||||||
|
dateFormat: 'DD-MM-YYYY', |
||||||
|
timeFormat: 'HH:mm:ss', |
||||||
|
date: '2022-12-26', |
||||||
|
hour: 2, |
||||||
|
minute: 30, |
||||||
|
second: 40, |
||||||
|
output: '26-12-2022 02:30:40', |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
test.describe('DateTime Column', () => { |
||||||
|
let dashboard: DashboardPage; |
||||||
|
let context: any; |
||||||
|
|
||||||
|
test.beforeEach(async ({ page }) => { |
||||||
|
context = await setup({ page }); |
||||||
|
dashboard = new DashboardPage(page, context.project); |
||||||
|
}); |
||||||
|
|
||||||
|
test('Create DateTime Column', async () => { |
||||||
|
await dashboard.treeView.createTable({ title: 'test_datetime' }); |
||||||
|
// Create DateTime column
|
||||||
|
await dashboard.grid.column.create({ |
||||||
|
title: 'NC_DATETIME_0', |
||||||
|
type: 'DateTime', |
||||||
|
dateFormat: dateTimeData[0].dateFormat, |
||||||
|
timeFormat: dateTimeData[0].timeFormat, |
||||||
|
}); |
||||||
|
|
||||||
|
for (let i = 0; i < dateTimeData.length; i++) { |
||||||
|
// Edit DateTime column
|
||||||
|
await dashboard.grid.column.openEdit({ |
||||||
|
title: 'NC_DATETIME_0', |
||||||
|
type: 'DateTime', |
||||||
|
dateFormat: dateTimeData[i].dateFormat, |
||||||
|
timeFormat: dateTimeData[i].timeFormat, |
||||||
|
}); |
||||||
|
|
||||||
|
await dashboard.grid.column.save({ isUpdated: true }); |
||||||
|
|
||||||
|
await dashboard.grid.cell.dateTime.open({ |
||||||
|
index: 0, |
||||||
|
columnHeader: 'NC_DATETIME_0', |
||||||
|
}); |
||||||
|
|
||||||
|
await dashboard.grid.cell.dateTime.selectDate({ |
||||||
|
date: dateTimeData[i].date, |
||||||
|
}); |
||||||
|
|
||||||
|
await dashboard.grid.cell.dateTime.selectTime({ |
||||||
|
hour: dateTimeData[i].hour, |
||||||
|
minute: dateTimeData[i].minute, |
||||||
|
second: dateTimeData[i].second, |
||||||
|
}); |
||||||
|
|
||||||
|
await dashboard.grid.cell.dateTime.save(); |
||||||
|
|
||||||
|
await dashboard.grid.cell.verifyDateCell({ |
||||||
|
index: 0, |
||||||
|
columnHeader: 'NC_DATETIME_0', |
||||||
|
value: dateTimeData[i].output, |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
Loading…
Reference in new issue