mirror of
https://github.com/antebudimir/feishin.git
synced 2025-12-31 18:13:31 +00:00
[enhancement]: apply formatting to card values
This commit is contained in:
Kendall Garner
parent
38ed083693
commit
aa89c5e80e
9 changed files with 95 additions and 75 deletions
|
|
@ -1,4 +1,5 @@
|
|||
import React from 'react';
|
||||
import formatDuration from 'format-duration';
|
||||
import { generatePath } from 'react-router';
|
||||
import { Link } from 'react-router-dom';
|
||||
import styled from 'styled-components';
|
||||
|
|
@ -6,6 +7,7 @@ import { Album, AlbumArtist, Artist, Playlist, Song } from '/@/renderer/api/type
|
|||
import { Text } from '/@/renderer/components/text';
|
||||
import { AppRoute } from '/@/renderer/router/routes';
|
||||
import { CardRow } from '/@/renderer/types';
|
||||
import { formatDateAbsolute, formatDateRelative, formatRating } from '/@/renderer/utils/format';
|
||||
|
||||
const Row = styled.div<{ $secondary?: boolean }>`
|
||||
width: 100%;
|
||||
|
|
@ -69,7 +71,10 @@ export const CardRows = ({ data, rows }: CardRowsProps) => {
|
|||
)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{row.arrayProperty && item[row.arrayProperty]}
|
||||
{row.arrayProperty &&
|
||||
(row.format
|
||||
? row.format(item)
|
||||
: item[row.arrayProperty])}
|
||||
</Text>
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
|
@ -88,7 +93,8 @@ export const CardRows = ({ data, rows }: CardRowsProps) => {
|
|||
overflow="hidden"
|
||||
size={index > 0 ? 'sm' : 'md'}
|
||||
>
|
||||
{row.arrayProperty && item[row.arrayProperty]}
|
||||
{row.arrayProperty &&
|
||||
(row.format ? row.format(item) : item[row.arrayProperty])}
|
||||
</Text>
|
||||
))}
|
||||
</Row>
|
||||
|
|
@ -114,7 +120,7 @@ export const CardRows = ({ data, rows }: CardRowsProps) => {
|
|||
)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{data && data[row.property]}
|
||||
{data && (row.format ? row.format(data) : data[row.property])}
|
||||
</Text>
|
||||
) : (
|
||||
<Text
|
||||
|
|
@ -123,7 +129,7 @@ export const CardRows = ({ data, rows }: CardRowsProps) => {
|
|||
overflow="hidden"
|
||||
size={index > 0 ? 'sm' : 'md'}
|
||||
>
|
||||
{data && data[row.property]}
|
||||
{data && (row.format ? row.format(data) : data[row.property])}
|
||||
</Text>
|
||||
)}
|
||||
</Row>
|
||||
|
|
@ -151,12 +157,15 @@ export const ALBUM_CARD_ROWS: { [key: string]: CardRow<Album> } = {
|
|||
},
|
||||
},
|
||||
createdAt: {
|
||||
format: (song) => formatDateAbsolute(song.createdAt),
|
||||
property: 'createdAt',
|
||||
},
|
||||
duration: {
|
||||
format: (album) => (album.duration === null ? null : formatDuration(album.duration)),
|
||||
property: 'duration',
|
||||
},
|
||||
lastPlayedAt: {
|
||||
format: (album) => formatDateRelative(album.lastPlayedAt),
|
||||
property: 'lastPlayedAt',
|
||||
},
|
||||
name: {
|
||||
|
|
@ -170,6 +179,7 @@ export const ALBUM_CARD_ROWS: { [key: string]: CardRow<Album> } = {
|
|||
property: 'playCount',
|
||||
},
|
||||
rating: {
|
||||
format: (album) => formatRating(album),
|
||||
property: 'userRating',
|
||||
},
|
||||
releaseDate: {
|
||||
|
|
@ -208,12 +218,15 @@ export const SONG_CARD_ROWS: { [key: string]: CardRow<Song> } = {
|
|||
},
|
||||
},
|
||||
createdAt: {
|
||||
format: (song) => formatDateAbsolute(song.createdAt),
|
||||
property: 'createdAt',
|
||||
},
|
||||
duration: {
|
||||
format: (song) => (song.duration === null ? null : formatDuration(song.duration)),
|
||||
property: 'duration',
|
||||
},
|
||||
lastPlayedAt: {
|
||||
format: (song) => formatDateRelative(song.lastPlayedAt),
|
||||
property: 'lastPlayedAt',
|
||||
},
|
||||
name: {
|
||||
|
|
@ -227,6 +240,7 @@ export const SONG_CARD_ROWS: { [key: string]: CardRow<Song> } = {
|
|||
property: 'playCount',
|
||||
},
|
||||
rating: {
|
||||
format: (song) => formatRating(song),
|
||||
property: 'userRating',
|
||||
},
|
||||
releaseDate: {
|
||||
|
|
@ -242,12 +256,14 @@ export const ALBUMARTIST_CARD_ROWS: { [key: string]: CardRow<AlbumArtist> } = {
|
|||
property: 'albumCount',
|
||||
},
|
||||
duration: {
|
||||
format: (artist) => (artist.duration === null ? null : formatDuration(artist.duration)),
|
||||
property: 'duration',
|
||||
},
|
||||
genres: {
|
||||
property: 'genres',
|
||||
},
|
||||
lastPlayedAt: {
|
||||
format: (artist) => formatDateRelative(artist.lastPlayedAt),
|
||||
property: 'lastPlayedAt',
|
||||
},
|
||||
name: {
|
||||
|
|
@ -261,6 +277,7 @@ export const ALBUMARTIST_CARD_ROWS: { [key: string]: CardRow<AlbumArtist> } = {
|
|||
property: 'playCount',
|
||||
},
|
||||
rating: {
|
||||
format: (artist) => formatRating(artist),
|
||||
property: 'userRating',
|
||||
},
|
||||
songCount: {
|
||||
|
|
@ -270,6 +287,8 @@ export const ALBUMARTIST_CARD_ROWS: { [key: string]: CardRow<AlbumArtist> } = {
|
|||
|
||||
export const PLAYLIST_CARD_ROWS: { [key: string]: CardRow<Playlist> } = {
|
||||
duration: {
|
||||
format: (playlist) =>
|
||||
playlist.duration === null ? null : formatDuration(playlist.duration),
|
||||
property: 'duration',
|
||||
},
|
||||
name: {
|
||||
|
|
@ -295,7 +314,4 @@ export const PLAYLIST_CARD_ROWS: { [key: string]: CardRow<Playlist> } = {
|
|||
songCount: {
|
||||
property: 'songCount',
|
||||
},
|
||||
updatedAt: {
|
||||
property: 'songCount',
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,8 +15,6 @@ import type { AgGridReactProps } from '@ag-grid-community/react';
|
|||
import { AgGridReact } from '@ag-grid-community/react';
|
||||
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
|
||||
import { useClickOutside, useMergedRef } from '@mantine/hooks';
|
||||
import dayjs from 'dayjs';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import formatDuration from 'format-duration';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
import { generatePath } from 'react-router';
|
||||
|
|
@ -43,7 +41,7 @@ import { useFixedTableHeader } from '/@/renderer/components/virtual-table/hooks/
|
|||
import { NoteCell } from '/@/renderer/components/virtual-table/cells/note-cell';
|
||||
import { RowIndexCell } from '/@/renderer/components/virtual-table/cells/row-index-cell';
|
||||
import i18n from '/@/i18n/i18n';
|
||||
import { formatSizeString } from '/@/renderer/utils/format-size-string';
|
||||
import { formatDateAbsolute, formatDateRelative, formatSizeString } from '/@/renderer/utils/format';
|
||||
|
||||
export * from './table-config-dropdown';
|
||||
export * from './table-pagination';
|
||||
|
|
@ -64,8 +62,6 @@ const DummyHeader = styled.div<{ height?: number }>`
|
|||
height: ${({ height }) => height || 36}px;
|
||||
`;
|
||||
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
const tableColumns: { [key: string]: ColDef } = {
|
||||
actions: {
|
||||
cellClass: 'ag-cell-favorite',
|
||||
|
|
@ -182,8 +178,7 @@ const tableColumns: { [key: string]: ColDef } = {
|
|||
GenericTableHeader(params, { position: 'center' }),
|
||||
headerName: i18n.t('table.column.dateAdded'),
|
||||
suppressSizeToFit: true,
|
||||
valueFormatter: (params: ValueFormatterParams) =>
|
||||
params.value ? dayjs(params.value).format('MMM D, YYYY') : '',
|
||||
valueFormatter: (params: ValueFormatterParams) => formatDateAbsolute(params.value),
|
||||
valueGetter: (params: ValueGetterParams) =>
|
||||
params.data ? params.data.createdAt : undefined,
|
||||
width: 130,
|
||||
|
|
@ -225,8 +220,7 @@ const tableColumns: { [key: string]: ColDef } = {
|
|||
headerComponent: (params: IHeaderParams) =>
|
||||
GenericTableHeader(params, { position: 'center' }),
|
||||
headerName: i18n.t('table.column.lastPlayed'),
|
||||
valueFormatter: (params: ValueFormatterParams) =>
|
||||
params.value ? dayjs(params.value).fromNow() : '',
|
||||
valueFormatter: (params: ValueFormatterParams) => formatDateRelative(params.value),
|
||||
valueGetter: (params: ValueGetterParams) =>
|
||||
params.data ? params.data.lastPlayedAt : undefined,
|
||||
width: 130,
|
||||
|
|
@ -258,8 +252,7 @@ const tableColumns: { [key: string]: ColDef } = {
|
|||
GenericTableHeader(params, { position: 'center' }),
|
||||
headerName: i18n.t('table.column.releaseDate'),
|
||||
suppressSizeToFit: true,
|
||||
valueFormatter: (params: ValueFormatterParams) =>
|
||||
params.value ? dayjs(params.value).format('MMM D, YYYY') : '',
|
||||
valueFormatter: (params: ValueFormatterParams) => formatDateAbsolute(params.value),
|
||||
valueGetter: (params: ValueGetterParams) =>
|
||||
params.data ? params.data.releaseDate : undefined,
|
||||
width: 130,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue