vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-06-16 08:24:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

move detail list to its own config

Browse Source
This commit is contained in:
jeffvli
2026-02-09 10:29:49 -08:00
parent 72b2dca759
commit ba4b07614c
12 changed files with 182 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/albums/components/album-list-content.tsx
+11 -2
View File
@@ -74,13 +74,16 @@ export const AlbumListContent = () => {
};
const AlbumListSuspenseContainer = () => {
const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.ALBUM);
const { detail, display, grid, itemsPerPage, pagination, table } = useListSettings(
ItemListKey.ALBUM,
);
const { customFilters } = useListContext();
return (
<Suspense fallback={<Spinner container />}>
<AlbumListView
detail={detail}
display={display}
grid={grid}
itemsPerPage={itemsPerPage}
@@ -95,13 +98,17 @@ const AlbumListSuspenseContainer = () => {
export type OverrideAlbumListQuery = Omit<Partial<AlbumListQuery>, 'limit' | 'startIndex'>;
export const AlbumListView = ({
detail,
display,
grid,
itemsPerPage,
overrideQuery,
pagination,
table,
}: ItemListSettings & { overrideQuery?: OverrideAlbumListQuery }) => {
}: ItemListSettings & {
detail?: ItemListSettings['detail'];
overrideQuery?: OverrideAlbumListQuery;
}) => {
const server = useCurrentServer();
const { pageKey } = useListContext();
@@ -196,6 +203,7 @@ export const AlbumListView = ({
case ListPaginationType.INFINITE: {
return (
<AlbumListInfiniteDetail
enableHeader={detail?.enableHeader}
itemsPerPage={itemsPerPage}
query={mergedQuery}
serverId={server.id}
@@ -205,6 +213,7 @@ export const AlbumListView = ({
case ListPaginationType.PAGINATED: {
return (
<AlbumListPaginatedDetail
enableHeader={detail?.enableHeader}
itemsPerPage={itemsPerPage}
query={mergedQuery}
serverId={server.id}
src/renderer/features/albums/components/album-list-header-filters.tsx
+1 -1
View File
@@ -98,11 +98,11 @@ export const AlbumListHeaderFilters = ({ toggleGenreTarget }: { toggleGenreTarge
<ListDisplayTypeToggleButton listKey={ItemListKey.ALBUM} />
<ListConfigMenu
detailConfig={{
listKey: ItemListKey.ALBUM_DETAIL,
optionsConfig: {
autoFitColumns: { hidden: true },
},
tableColumnsData: SONG_TABLE_COLUMNS,
tableKey: 'detail',
}}
listKey={ItemListKey.ALBUM}
tableColumnsData={ALBUM_TABLE_COLUMNS}
src/renderer/features/albums/components/album-list-infinite-detail.tsx
+5 -1
View File
@@ -14,9 +14,12 @@ import {
} from '/@/shared/types/domain-types';
import { ItemListKey } from '/@/shared/types/types';
interface AlbumListInfiniteDetailProps extends ItemListComponentProps<AlbumListQuery> {}
interface AlbumListInfiniteDetailProps extends ItemListComponentProps<AlbumListQuery> {
enableHeader?: boolean;
}
export const AlbumListInfiniteDetail = ({
enableHeader = true,
itemsPerPage = 100,
query = {
sortBy: AlbumListSort.NAME,
@@ -49,6 +52,7 @@ export const AlbumListInfiniteDetail = ({
return (
<ItemDetailList
data={loadedItems}
enableHeader={enableHeader}
getItem={getItem}
itemCount={itemCount}
onRangeChanged={onRangeChanged}
src/renderer/features/albums/components/album-list-paginated-detail.tsx
+9 -2
View File
@@ -16,9 +16,12 @@ import {
} from '/@/shared/types/domain-types';
import { ItemListKey } from '/@/shared/types/types';
interface AlbumListPaginatedDetailProps extends ItemListComponentProps<AlbumListQuery> {}
interface AlbumListPaginatedDetailProps extends ItemListComponentProps<AlbumListQuery> {
enableHeader?: boolean;
}
export const AlbumListPaginatedDetail = ({
enableHeader = true,
itemsPerPage = 100,
query = {
sortBy: AlbumListSort.NAME,
@@ -59,7 +62,11 @@ export const AlbumListPaginatedDetail = ({
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemDetailList currentPage={currentPage} items={data || []} />
<ItemDetailList
currentPage={currentPage}
enableHeader={enableHeader}
items={data || []}
/>
</ItemListWithPagination>
);
};
src/renderer/features/shared/components/list-config-menu.tsx
+3 -2
View File
@@ -73,9 +73,9 @@ export const ListConfigBooleanControl = ({
};
export interface ListConfigMenuDetailConfig {
listKey: ItemListKey;
optionsConfig?: ListConfigMenuOptionsConfig['detail'];
tableColumnsData: { label: string; value: string }[];
tableKey: 'detail';
}
export interface ListConfigMenuDisplayTypeConfig {
@@ -196,9 +196,10 @@ const Config = ({
return (
<TableConfig
enablePinColumnButtons={false}
listKey={props.detailConfig.listKey}
listKey={props.listKey}
optionsConfig={props.detailConfig.optionsConfig}
tableColumnsData={props.detailConfig.tableColumnsData}
tableKey="detail"
/>
);
}
src/renderer/features/shared/components/table-config.tsx
+52 -23
View File
@@ -21,7 +21,12 @@ import {
ListConfigBooleanControl,
ListConfigTable,
} from '/@/renderer/features/shared/components/list-config-menu';
import { ItemListSettings, useSettingsStore, useSettingsStoreActions } from '/@/renderer/store';
import {
type DataTableProps,
ItemListSettings,
useSettingsStore,
useSettingsStoreActions,
} from '/@/renderer/store';
import { ActionIcon, ActionIconGroup } from '/@/shared/components/action-icon/action-icon';
import { Badge } from '/@/shared/components/badge/badge';
import { Checkbox } from '/@/shared/components/checkbox/checkbox';
@@ -53,6 +58,7 @@ interface TableConfigProps {
};
};
tableColumnsData: { label: string; value: string }[];
tableKey?: 'detail' | 'main';
}
export const TableConfig = ({
@@ -61,12 +67,28 @@ export const TableConfig = ({
listKey,
optionsConfig,
tableColumnsData,
tableKey = 'main',
}: TableConfigProps) => {
const { t } = useTranslation();
const list = useSettingsStore((state) => state.lists[listKey]) as ItemListSettings;
const { setList } = useSettingsStoreActions();
const table = tableKey === 'detail' ? (list?.detail ?? list?.table) : list?.table;
const setTableUpdate = useCallback(
(patch: Partial<DataTableProps>) => {
if (tableKey === 'detail') {
setList(listKey, { detail: patch } as Parameters<
ReturnType<typeof useSettingsStoreActions>['setList']
>[1]);
} else {
setList(listKey, { table: patch });
}
},
[listKey, setList, tableKey],
);
const advancedSettings = useMemo(() => {
const allOptions = [
{
@@ -159,7 +181,7 @@ export const TableConfig = ({
})
}
size="sm"
value={list.table.size}
value={table.size}
w="100%"
/>
),
@@ -171,8 +193,8 @@ export const TableConfig = ({
{
component: (
<ListConfigBooleanControl
onChange={(e) => setList(listKey, { table: { enableHeader: e } })}
value={list.table.enableHeader}
onChange={(e) => setTableUpdate({ enableHeader: e })}
value={table.enableHeader}
/>
),
id: 'enableHeader',
@@ -183,10 +205,8 @@ export const TableConfig = ({
{
component: (
<ListConfigBooleanControl
onChange={(e) =>
setList(listKey, { table: { enableRowHoverHighlight: e } })
}
value={list.table.enableRowHoverHighlight}
onChange={(e) => setTableUpdate({ enableRowHoverHighlight: e })}
value={table.enableRowHoverHighlight}
/>
),
id: 'enableRowHoverHighlight',
@@ -197,10 +217,8 @@ export const TableConfig = ({
{
component: (
<ListConfigBooleanControl
onChange={(e) =>
setList(listKey, { table: { enableAlternateRowColors: e } })
}
value={list.table.enableAlternateRowColors}
onChange={(e) => setTableUpdate({ enableAlternateRowColors: e })}
value={table.enableAlternateRowColors}
/>
),
id: 'enableAlternateRowColors',
@@ -211,10 +229,8 @@ export const TableConfig = ({
{
component: (
<ListConfigBooleanControl
onChange={(e) =>
setList(listKey, { table: { enableHorizontalBorders: e } })
}
value={list.table.enableHorizontalBorders}
onChange={(e) => setTableUpdate({ enableHorizontalBorders: e })}
value={table.enableHorizontalBorders}
/>
),
id: 'enableHorizontalBorders',
@@ -225,8 +241,8 @@ export const TableConfig = ({
{
component: (
<ListConfigBooleanControl
onChange={(e) => setList(listKey, { table: { enableVerticalBorders: e } })}
value={list.table.enableVerticalBorders}
onChange={(e) => setTableUpdate({ enableVerticalBorders: e })}
value={table.enableVerticalBorders}
/>
),
id: 'enableVerticalBorders',
@@ -237,8 +253,10 @@ export const TableConfig = ({
{
component: (
<ListConfigBooleanControl
onChange={(e) => setList(listKey, { table: { autoFitColumns: e } })}
value={list.table.autoFitColumns}
onChange={(e) => setTableUpdate({ autoFitColumns: e })}
value={
tableKey === 'main' ? (table as DataTableProps).autoFitColumns : false
}
/>
),
id: 'autoFitColumns',
@@ -258,7 +276,18 @@ export const TableConfig = ({
return option;
})
.filter((option): option is NonNullable<typeof option> => option !== null);
}, [extraOptions, listKey, optionsConfig, setList, t, list]);
}, [
t,
list.pagination,
list.itemsPerPage,
table,
tableKey,
extraOptions,
setList,
listKey,
setTableUpdate,
optionsConfig,
]);
return (
<>
@@ -267,8 +296,8 @@ export const TableConfig = ({
<TableColumnConfig
data={tableColumnsData}
enablePinColumnButtons={enablePinColumnButtons}
onChange={(columns) => setList(listKey, { table: { columns } })}
value={list.table.columns}
onChange={(columns) => setTableUpdate({ columns })}
value={table.columns}
/>
</>
);