add initial table columns

2026-05-15 21:16:17 +02:00 · 2025-10-03 23:08:34 -07:00
parent c27c05ac5d
commit ae8ca54a07
21 changed files with 511 additions and 28 deletions
@@ -0,0 +1,19 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Icon } from '/@/shared/components/icon/icon';
+
+export const ActionsColumn = (props: ItemTableListInnerColumn) => {
+    const row: any = (props.data as (any | undefined)[])[props.rowIndex];
+
+    if (row !== undefined) {
+        return (
+            <TableColumnContainer {...props}>
+                <Icon icon="ellipsisHorizontal" size="sm" />
+            </TableColumnContainer>
+        );
+    }
+
+    return <TableColumnContainer {...props}>&nbsp;</TableColumnContainer>;
+};
@@ -0,0 +1,23 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnTextContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+
+export const CountColumn = (props: ItemTableListInnerColumn) => {
+    const row: number | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'number') {
+        return (
+            <TableColumnTextContainer {...props}>{row.toLocaleString()}</TableColumnTextContainer>
+        );
+    }
+
+    return (
+        <TableColumnTextContainer {...props}>
+            <Skeleton />
+        </TableColumnTextContainer>
+    );
+};
@@ -0,0 +1,50 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnTextContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { formatDateAbsolute, formatDateRelative } from '/@/renderer/utils/format';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+
+export const DateColumn = (props: ItemTableListInnerColumn) => {
+    const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'string' && row) {
+        return (
+            <TableColumnTextContainer {...props}>
+                {formatDateAbsolute(row)}
+            </TableColumnTextContainer>
+        );
+    }
+
+    return (
+        <TableColumnTextContainer {...props}>
+            <Skeleton />
+        </TableColumnTextContainer>
+    );
+};
+
+export const RelativeDateColumn = (props: ItemTableListInnerColumn) => {
+    const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'string') {
+        return (
+            <TableColumnTextContainer {...props}>
+                {formatDateRelative(row)}
+            </TableColumnTextContainer>
+        );
+    }
+
+    if (row === null) {
+        return <TableColumnTextContainer {...props}>&nbsp;</TableColumnTextContainer>;
+    }
+
+    return (
+        <TableColumnTextContainer {...props}>
+            <Skeleton />
+        </TableColumnTextContainer>
+    );
+};
@@ -1,6 +1,6 @@
 import {
    ItemTableListInnerColumn,
-    TableColumnContainer,
+    TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { Skeleton } from '/@/shared/components/skeleton/skeleton';

@@ -10,16 +10,16 @@ export const DefaultColumn = (props: ItemTableListInnerColumn) => {
    ];

    if (typeof row === 'string') {
-        return <TableColumnContainer {...props}>{row}</TableColumnContainer>;
+        return <TableColumnTextContainer {...props}>{row}</TableColumnTextContainer>;
    }

    if (typeof row === 'undefined') {
        return (
-            <TableColumnContainer {...props}>
+            <TableColumnTextContainer {...props}>
                <Skeleton />
-            </TableColumnContainer>
+            </TableColumnTextContainer>
        );
    }

-    return null;
+    return <TableColumnTextContainer {...props}>&nbsp;</TableColumnTextContainer>;
 };
@@ -2,7 +2,7 @@ import formatDuration from 'format-duration';

 import {
    ItemTableListInnerColumn,
-    TableColumnContainer,
+    TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { Skeleton } from '/@/shared/components/skeleton/skeleton';

@@ -12,12 +12,14 @@ export const DurationColumn = (props: ItemTableListInnerColumn) => {
    ];

    if (typeof row === 'number') {
-        return <TableColumnContainer {...props}>{formatDuration(row)}</TableColumnContainer>;
+        return (
+            <TableColumnTextContainer {...props}>{formatDuration(row)}</TableColumnTextContainer>
+        );
    }

    return (
-        <TableColumnContainer {...props}>
+        <TableColumnTextContainer {...props}>
            <Skeleton />
-        </TableColumnContainer>
+        </TableColumnTextContainer>
    );
 };
@@ -0,0 +1,21 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Icon } from '/@/shared/components/icon/icon';
+
+export const FavoriteColumn = (props: ItemTableListInnerColumn) => {
+    const row: boolean | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'boolean') {
+        return (
+            <TableColumnContainer {...props}>
+                <Icon fill={row ? 'primary' : undefined} icon={'favorite'} size="md" />
+            </TableColumnContainer>
+        );
+    }
+
+    return <TableColumnContainer {...props}>&nbsp;</TableColumnContainer>;
+};
@@ -1,21 +1,47 @@
 import {
    ItemTableListInnerColumn,
    TableColumnContainer,
+    TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Badge } from '/@/shared/components/badge/badge';
+import { Group } from '/@/shared/components/group/group';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 import { Genre } from '/@/shared/types/domain-types';
+import { stringToColor } from '/@/shared/utils/string-to-color';

 export const GenreColumn = (props: ItemTableListInnerColumn) => {
    const row: Genre[] | undefined = (props.data as (Genre[] | undefined)[])[props.rowIndex]?.[
        props.columns[props.columnIndex].id
    ];

+    const genres = (row || []).map((genre) => {
+        const { color, isLight } = stringToColor(genre.name);
+        return { ...genre, color, isLight };
+    });
+
    if (Array.isArray(row)) {
        return (
            <TableColumnContainer {...props}>
-                {row.map((genre) => genre?.name).join(', ')}
+                <Group gap="xs" wrap="nowrap">
+                    {genres.map((genre) => (
+                        <Badge
+                            key={genre.id}
+                            style={{
+                                backgroundColor: genre.color,
+                                color: genre.isLight ? 'black' : 'white',
+                            }}
+                        >
+                            {genre.name}
+                        </Badge>
+                    ))}
+                </Group>
            </TableColumnContainer>
        );
    }

-    return null;
+    return (
+        <TableColumnTextContainer {...props}>
+            <Skeleton />
+        </TableColumnTextContainer>
+    );
 };
@@ -2,7 +2,7 @@ import styles from './image-column.module.css';

 import {
    ItemTableListInnerColumn,
-    TableColumnContainer,
+    TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { Image } from '/@/shared/components/image/image';
 import { Skeleton } from '/@/shared/components/skeleton/skeleton';
@@ -14,15 +14,15 @@ export const ImageColumn = (props: ItemTableListInnerColumn) => {

    if (typeof row === 'string') {
        return (
-            <TableColumnContainer {...props}>
+            <TableColumnTextContainer {...props}>
                <Image src={row} />
-            </TableColumnContainer>
+            </TableColumnTextContainer>
        );
    }

    return (
-        <TableColumnContainer {...props}>
+        <TableColumnTextContainer {...props}>
            <Skeleton containerClassName={styles.skeleton} />
-        </TableColumnContainer>
+        </TableColumnTextContainer>
    );
 };
@@ -1,6 +1,6 @@
 import {
    ItemTableListInnerColumn,
-    TableColumnContainer,
+    TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { Skeleton } from '/@/shared/components/skeleton/skeleton';

@@ -10,12 +10,12 @@ export const NameColumn = (props: ItemTableListInnerColumn) => {
    ];

    if (typeof row === 'string') {
-        return <TableColumnContainer {...props}>{row}</TableColumnContainer>;
+        return <TableColumnTextContainer {...props}>{row}</TableColumnTextContainer>;
    }

    return (
-        <TableColumnContainer {...props}>
+        <TableColumnTextContainer {...props}>
            <Skeleton />
-        </TableColumnContainer>
+        </TableColumnTextContainer>
    );
 };
@@ -0,0 +1,21 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnTextContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+
+export const NumericColumn = (props: ItemTableListInnerColumn) => {
+    const row: number | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'number') {
+        return <TableColumnTextContainer {...props}>{row}</TableColumnTextContainer>;
+    }
+
+    return (
+        <TableColumnTextContainer {...props}>
+            <Skeleton />
+        </TableColumnTextContainer>
+    );
+};
@@ -0,0 +1,24 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnTextContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+
+export const PathColumn = (props: ItemTableListInnerColumn) => {
+    const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'string' && row) {
+        const maxLength = 50;
+        const displayPath = row.length > maxLength ? `...${row.slice(-maxLength + 3)}` : row;
+
+        return <TableColumnTextContainer {...props}>{displayPath}</TableColumnTextContainer>;
+    }
+
+    return (
+        <TableColumnTextContainer {...props}>
+            <Skeleton />
+        </TableColumnTextContainer>
+    );
+};
@@ -0,0 +1,21 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Rating } from '/@/shared/components/rating/rating';
+
+export const RatingColumn = (props: ItemTableListInnerColumn) => {
+    const row: null | number | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'number' || row === null) {
+        return (
+            <TableColumnContainer {...props}>
+                <Rating readOnly value={row || 0} />
+            </TableColumnContainer>
+        );
+    }
+
+    return <TableColumnContainer {...props}>&nbsp;</TableColumnContainer>;
+};
@@ -1,8 +1,8 @@
 import {
    ItemTableListInnerColumn,
-    TableColumnContainer,
+    TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';

 export const RowIndexColumn = (props: ItemTableListInnerColumn) => {
-    return <TableColumnContainer {...props}>{props.rowIndex + 1}</TableColumnContainer>;
+    return <TableColumnTextContainer {...props}>{props.rowIndex + 1}</TableColumnTextContainer>;
 };
@@ -0,0 +1,24 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnTextContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { formatSizeString } from '/@/renderer/utils/format';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+
+export const SizeColumn = (props: ItemTableListInnerColumn) => {
+    const row: number | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'number') {
+        return (
+            <TableColumnTextContainer {...props}>{formatSizeString(row)}</TableColumnTextContainer>
+        );
+    }
+
+    return (
+        <TableColumnTextContainer {...props}>
+            <Skeleton />
+        </TableColumnTextContainer>
+    );
+};
@@ -0,0 +1,24 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnTextContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+
+export const TextColumn = (props: ItemTableListInnerColumn) => {
+    const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'string' && row) {
+        const maxLength = 100;
+        const displayText = row.length > maxLength ? `${row.slice(0, maxLength)}...` : row;
+
+        return <TableColumnTextContainer {...props}>{displayText}</TableColumnTextContainer>;
+    }
+
+    return (
+        <TableColumnTextContainer {...props}>
+            <Skeleton />
+        </TableColumnTextContainer>
+    );
+};