Add playlist grid views

This commit is contained in:
jeffvli 2023-07-15 11:21:44 -07:00
parent e980e31bd2
commit 63a77ae68c
7 changed files with 620 additions and 324 deletions

View file

@ -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 = () =>