Add album grouping column (#1722)

* Add album grouping column

---------

Co-authored-by: jeffvli <jeffvictorli@gmail.com>
This commit is contained in:
Norman
2026-02-26 20:34:55 -08:00
committed by GitHub
parent 4918b412b2
commit eb8913479b
18 changed files with 467 additions and 120 deletions
View File
@@ -21,7 +21,7 @@ import {
PlaylistSongListResponse,
Song,
} from '/@/shared/types/domain-types';
import { ItemListKey, Play } from '/@/shared/types/types';
import { ItemListKey, Play, TableColumn } from '/@/shared/types/types';
interface PlaylistDetailSongListTableProps
extends Omit<ItemListTableComponentProps<PlaylistSongListQuery>, 'query'> {
@@ -68,6 +68,10 @@ export const PlaylistDetailSongListTable = forwardRef<any, PlaylistDetailSongLis
const { searchTerm } = useSearchTermFilter();
const { query } = usePlaylistSongListFilters();
const albumGroupingEnabled = columns.some(
(col) => col.id === TableColumn.ALBUM_GROUP && col.isEnabled,
);
const songDataFromData = useMemo(() => {
let list = data?.items || [];
if (searchTerm) {
@@ -117,6 +121,11 @@ export const PlaylistDetailSongListTable = forwardRef<any, PlaylistDetailSongLis
};
}, []);
const effectiveColumns = useMemo(() => {
if (albumGroupingEnabled) return columns;
return columns.filter((col) => col.id !== TableColumn.ALBUM_GROUP);
}, [columns, albumGroupingEnabled]);
const isPaginated =
typeof currentPage === 'number' &&
typeof itemsPerPage === 'number' &&
@@ -135,7 +144,7 @@ export const PlaylistDetailSongListTable = forwardRef<any, PlaylistDetailSongLis
activeRowId={currentSong?.id}
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
columns={effectiveColumns}
data={dataToRender}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
@@ -262,7 +262,6 @@ export const TableConfig = ({
id: 'autoFitColumns',
label: t('table.config.general.autoFitColumns', { postProcess: 'sentenceCase' }),
},
...(extraOptions || []),
];
@@ -774,25 +773,18 @@ const TableColumnItem = memo(
className={clsx(styles.group, styles.numberInput)}
hideControls={false}
leftSection={
<>
{item.pinned === null && (
<Tooltip
label={t('table.config.general.autosize', {
postProcess: 'sentenceCase',
})}
>
<Checkbox
checked={item.autoSize}
disabled={item.pinned !== null}
id={item.id}
onChange={(e) =>
handleAutoSize(item, e.currentTarget.checked)
}
size="xs"
/>
</Tooltip>
)}
</>
<Tooltip
label={t('table.config.general.autosize', {
postProcess: 'sentenceCase',
})}
>
<Checkbox
checked={item.autoSize}
id={item.id}
onChange={(e) => handleAutoSize(item, e.currentTarget.checked)}
size="xs"
/>
</Tooltip>
}
max={2000}
min={0}