diff --git a/src/renderer/components/item-list/item-table-list/columns/date-column.tsx b/src/renderer/components/item-list/item-table-list/columns/date-column.tsx index 778d3608a..09bb7ce74 100644 --- a/src/renderer/components/item-list/item-table-list/columns/date-column.tsx +++ b/src/renderer/components/item-list/item-table-list/columns/date-column.tsx @@ -4,9 +4,29 @@ import { ItemTableListInnerColumn, TableColumnTextContainer, } from '/@/renderer/components/item-list/item-table-list/item-table-list-column'; -import { formatDateAbsolute, formatDateRelative } from '/@/renderer/utils/format'; +import { + formatDateAbsolute, + formatDateAbsoluteUTC, + formatDateRelative, + formatHrDateTime, +} from '/@/renderer/utils/format'; +import { Stack } from '/@/shared/components/stack/stack'; +import { Text } from '/@/shared/components/text/text'; import { Tooltip } from '/@/shared/components/tooltip/tooltip'; +const getDateTooltipLabel = (utcString: string) => { + return ( + + + {formatHrDateTime(utcString)} + + + {utcString} + + + ); +}; + export const DateColumn = (props: ItemTableListInnerColumn) => { const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[ props.columns[props.columnIndex].id @@ -15,7 +35,7 @@ export const DateColumn = (props: ItemTableListInnerColumn) => { if (typeof row === 'string' && row) { return ( - + {formatDateAbsolute(row)} @@ -29,6 +49,28 @@ export const DateColumn = (props: ItemTableListInnerColumn) => { return ; }; +export const AbsoluteDateColumn = (props: ItemTableListInnerColumn) => { + const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[ + props.columns[props.columnIndex].id + ]; + + if (typeof row === 'string' && row) { + return ( + + + {formatDateAbsoluteUTC(row)} + + + ); + } + + if (row === null) { + return ; + } + + return ; +}; + export const RelativeDateColumn = (props: ItemTableListInnerColumn) => { const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[ props.columns[props.columnIndex].id @@ -37,7 +79,7 @@ export const RelativeDateColumn = (props: ItemTableListInnerColumn) => { if (typeof row === 'string') { return ( - + {formatDateRelative(row)} diff --git a/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx b/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx index d8416ce08..fb291307b 100644 --- a/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx +++ b/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx @@ -28,6 +28,7 @@ import { AlbumColumn } from '/@/renderer/components/item-list/item-table-list/co import { ArtistsColumn } from '/@/renderer/components/item-list/item-table-list/columns/artists-column'; import { CountColumn } from '/@/renderer/components/item-list/item-table-list/columns/count-column'; import { + AbsoluteDateColumn, DateColumn, RelativeDateColumn, } from '/@/renderer/components/item-list/item-table-list/columns/date-column'; @@ -490,7 +491,6 @@ export const ItemTableListColumn = (props: ItemTableListColumn) => { return ; case TableColumn.DATE_ADDED: - case TableColumn.RELEASE_DATE: return ; case TableColumn.DURATION: @@ -518,6 +518,11 @@ export const ItemTableListColumn = (props: ItemTableListColumn) => { case TableColumn.PLAYLIST_REORDER: return ; + case TableColumn.RELEASE_DATE: + return ( + + ); + case TableColumn.ROW_INDEX: return ; diff --git a/src/renderer/utils/format.tsx b/src/renderer/utils/format.tsx index 335556d15..db5b2b788 100644 --- a/src/renderer/utils/format.tsx +++ b/src/renderer/utils/format.tsx @@ -27,6 +27,9 @@ export const formatDateAbsolute = (key: null | string) => export const formatDateAbsoluteUTC = (key: null | string) => key ? dayjs.utc(key).format(getDateFormat(key)) : ''; +export const formatHrDateTime = (key: null | string) => + key ? dayjs(key).format('YYYY-MM-DD HH:mm') : ''; + export const formatDateRelative = (key: null | string) => (key ? dayjs(key).fromNow() : ''); export const formatDurationString = (duration: number) => {