mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-01 10:23:33 +00:00
Add playlist grid views
This commit is contained in:
parent
e980e31bd2
commit
63a77ae68c
7 changed files with 620 additions and 324 deletions
|
|
@ -33,10 +33,16 @@ type DetailProps = {
|
|||
table: DetailTableProps;
|
||||
};
|
||||
|
||||
type ListGridProps = {
|
||||
itemsPerRow?: number;
|
||||
scrollOffset?: number;
|
||||
};
|
||||
|
||||
export type PlaylistListFilter = Omit<PlaylistListArgs['query'], 'startIndex' | 'limit'>;
|
||||
|
||||
interface PlaylistState {
|
||||
detail: DetailProps;
|
||||
grid: ListGridProps;
|
||||
list: ListProps<PlaylistListFilter>;
|
||||
}
|
||||
|
||||
|
|
@ -46,6 +52,7 @@ export interface PlaylistSlice extends PlaylistState {
|
|||
setDetailTable: (data: Partial<DetailTableProps>) => void;
|
||||
setDetailTablePagination: (id: string, data: Partial<DetailPaginationProps>) => void;
|
||||
setFilters: (data: Partial<PlaylistListFilter>) => PlaylistListFilter;
|
||||
setGrid: (args: { data: Partial<ListGridProps> }) => void;
|
||||
setStore: (data: Partial<PlaylistSlice>) => void;
|
||||
setTable: (data: Partial<TableProps>) => void;
|
||||
setTablePagination: (args: { data: Partial<TablePagination> }) => void;
|
||||
|
|
@ -90,6 +97,14 @@ export const usePlaylistStore = create<PlaylistSlice>()(
|
|||
|
||||
return get().list.filter;
|
||||
},
|
||||
setGrid: (args) => {
|
||||
set((state) => {
|
||||
state.grid = {
|
||||
...state.grid,
|
||||
...args.data,
|
||||
};
|
||||
});
|
||||
},
|
||||
setStore: (data) => {
|
||||
set({ ...get(), ...data });
|
||||
},
|
||||
|
|
@ -133,6 +148,10 @@ export const usePlaylistStore = create<PlaylistSlice>()(
|
|||
rowHeight: 60,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
itemsPerRow: 5,
|
||||
scrollOffset: 0,
|
||||
},
|
||||
list: {
|
||||
display: ListDisplayType.TABLE,
|
||||
filter: {
|
||||
|
|
@ -189,6 +208,8 @@ export const usePlaylistFilters = () => {
|
|||
return usePlaylistStore((state) => [state.list.filter, state.actions.setFilters]);
|
||||
};
|
||||
|
||||
export const usePlaylistGridStore = () => usePlaylistStore((state) => state.grid);
|
||||
|
||||
export const usePlaylistListStore = () => usePlaylistStore((state) => state.list);
|
||||
|
||||
export const usePlaylistTablePagination = () =>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue