diff --git a/src/frontend/src/components/forms/fields/ApiFormField.tsx b/src/frontend/src/components/forms/fields/ApiFormField.tsx index 7c412d2245..3e3dff7c9c 100644 --- a/src/frontend/src/components/forms/fields/ApiFormField.tsx +++ b/src/frontend/src/components/forms/fields/ApiFormField.tsx @@ -64,6 +64,7 @@ export type ApiFormFieldType = { | 'string' | 'boolean' | 'date' + | 'datetime' | 'integer' | 'decimal' | 'float' @@ -215,6 +216,7 @@ export function ApiFormField({ /> ); case 'date': + case 'datetime': return ; case 'integer': case 'decimal': diff --git a/src/frontend/src/components/forms/fields/DateField.tsx b/src/frontend/src/components/forms/fields/DateField.tsx index c6492ffdd5..923131c32d 100644 --- a/src/frontend/src/components/forms/fields/DateField.tsx +++ b/src/frontend/src/components/forms/fields/DateField.tsx @@ -1,9 +1,13 @@ import { DateInput } from '@mantine/dates'; +import dayjs from 'dayjs'; +import customParseFormat from 'dayjs/plugin/customParseFormat'; import { useCallback, useId, useMemo } from 'react'; import { FieldValues, UseControllerReturn } from 'react-hook-form'; import { ApiFormFieldType } from './ApiFormField'; +dayjs.extend(customParseFormat); + export default function DateField({ controller, definition @@ -18,13 +22,16 @@ export default function DateField({ fieldState: { error } } = controller; + const valueFormat = + definition.field_type == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'; + const onChange = useCallback( (value: any) => { // Convert the returned date object to a string if (value) { value = value.toString(); let date = new Date(value); - value = date.toISOString().split('T')[0]; + value = dayjs(value).format(valueFormat); } field.onChange(value); @@ -50,7 +57,7 @@ export default function DateField({ value={dateValue} clearable={!definition.required} onChange={onChange} - valueFormat="YYYY-MM-DD" + valueFormat={valueFormat} label={definition.label} description={definition.description} placeholder={definition.placeholder} diff --git a/src/frontend/src/defaults/formatters.tsx b/src/frontend/src/defaults/formatters.tsx index 069ecfcf1b..7218586f05 100644 --- a/src/frontend/src/defaults/formatters.tsx +++ b/src/frontend/src/defaults/formatters.tsx @@ -88,6 +88,7 @@ export function formatPriceRange( interface renderDateOptionsType { showTime?: boolean; + showSeconds?: boolean; } /* @@ -106,6 +107,9 @@ export function renderDate(date: string, options: renderDateOptionsType = {}) { if (options.showTime) { fmt += ' HH:mm'; + if (options.showSeconds) { + fmt += ':ss'; + } } const m = dayjs(date); diff --git a/src/frontend/src/tables/stock/StockItemTestResultTable.tsx b/src/frontend/src/tables/stock/StockItemTestResultTable.tsx index abe5ccf64f..dba02931cf 100644 --- a/src/frontend/src/tables/stock/StockItemTestResultTable.tsx +++ b/src/frontend/src/tables/stock/StockItemTestResultTable.tsx @@ -202,6 +202,41 @@ export default function StockItemTestResultTable({ ); } + }, + { + accessor: 'test_station', + sortable: true, + title: t`Test station` + }, + { + accessor: 'started_datetime', + sortable: true, + title: t`Started`, + render: (record: any) => { + return ( + + {renderDate(record.started_datetime, { + showTime: true, + showSeconds: true + })} + + ); + } + }, + { + accessor: 'finished_datetime', + sortable: true, + title: t`Finished`, + render: (record: any) => { + return ( + + {renderDate(record.finished_datetime, { + showTime: true, + showSeconds: true + })} + + ); + } } ]; }, [itemId]); @@ -218,6 +253,9 @@ export default function StockItemTestResultTable({ value: {}, attachment: {}, notes: {}, + test_station: {}, + started_datetime: {}, + finished_datetime: {}, stock_item: { value: itemId, hidden: true