antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-01 02:13:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add favorite/rating table columns

Browse source
This commit is contained in:
jeffvli 2023-01-06 00:39:49 -08:00
parent d1dfbaedaa
commit ab031820f6
12 changed files with 158 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/renderer/components/index.ts
View file

@ -32,3 +32,4 @@ export * from './virtual-table';
export * from './motion';
export * from './context-menu';
export * from './query-builder';
export * from './rating';

10
src/renderer/components/rating/index.tsx Normal file
View file

@ -0,0 +1,10 @@
import { Rating as MantineRating, RatingProps as MantineRatingProps } from '@mantine/core';
import styled from 'styled-components';
type RatingProps = MantineRatingProps;
const StyledRating = styled(MantineRating)``;
export const Rating = ({ ...props }: RatingProps) => {
return <StyledRating {...props} />;
};

17
src/renderer/components/virtual-table/cells/favorite-cell.tsx Normal file
View file

@ -0,0 +1,17 @@
import type { ICellRendererParams } from '@ag-grid-community/core';
import { RiHeartFill, RiHeartLine } from 'react-icons/ri';
import { Button } from '/@/renderer/components/button';
import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
export const FavoriteCell = ({ value }: ICellRendererParams) => {
return (
<CellContainer position="center">
<Button
compact
variant="subtle"
>
{!value ? <RiHeartLine /> : <RiHeartFill />}
</Button>
</CellContainer>
);
};

14
src/renderer/components/virtual-table/cells/rating-cell.tsx Normal file
View file

@ -0,0 +1,14 @@
import type { ICellRendererParams } from '@ag-grid-community/core';
import { Rating } from '/@/renderer/components/rating';
import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
export const RatingCell = ({ value }: ICellRendererParams) => {
return (
<CellContainer position="center">
<Rating
size="xs"
value={value}
/>
</CellContainer>
);
};

10
src/renderer/components/virtual-table/headers/generic-table-header.tsx
View file

@ -2,10 +2,11 @@ import type { ReactNode } from 'react';
import type { IHeaderParams } from '@ag-grid-community/core';
import { AiOutlineNumber } from 'react-icons/ai';
import { FiClock } from 'react-icons/fi';
import { RiHeartLine, RiStarLine } from 'react-icons/ri';
import styled from 'styled-components';
import { _Text } from '/@/renderer/components/text';
type Presets = 'duration' | 'rowIndex';
type Presets = 'duration' | 'rowIndex' | 'userFavorite' | 'userRating';
type Options = {
children?: ReactNode;
@ -39,7 +40,12 @@ const TextHeaderWrapper = styled(_Text)<{ position: Options['position'] }>`
text-transform: uppercase;
`;
const headerPresets = { duration: <FiClock size={15} />, rowIndex: <AiOutlineNumber size={15} /> };
const headerPresets = {
duration: <FiClock size={15} />,
rowIndex: <AiOutlineNumber size={15} />,
userFavorite: <RiHeartLine size={15} />,
userRating: <RiStarLine size={15} />,
};
export const GenericTableHeader = (
{ displayName }: IHeaderParams,

30
src/renderer/components/virtual-table/index.tsx
View file

@ -1,5 +1,4 @@
import type { Ref } from 'react';
import { forwardRef, useRef } from 'react';
import { Ref, forwardRef, useRef } from 'react';
import type {
ICellRendererParams,
ValueGetterParams,
@ -25,6 +24,8 @@ import { GenericTableHeader } from '/@/renderer/components/virtual-table/headers
import { AppRoute } from '/@/renderer/router/routes';
import { PersistedTableColumn } from '/@/renderer/store/settings.store';
import { TableColumn } from '/@/renderer/types';
import { RatingCell } from '/@/renderer/components/virtual-table/cells/rating-cell';
import { FavoriteCell } from '/@/renderer/components/virtual-table/cells/favorite-cell';
export * from './table-config-dropdown';
export * from './table-pagination';
@ -266,6 +267,31 @@ const tableColumns: { [key: string]: ColDef } = {
valueGetter: (params: ValueGetterParams) => (params.data ? params.data.trackNumber : undefined),
width: 80,
},
userFavorite: {
cellClass: (params) => (params.value ? 'visible ag-cell-favorite' : 'ag-cell-favorite'),
cellRenderer: FavoriteCell,
colId: TableColumn.USER_FAVORITE,
field: 'userFavorite',
headerComponent: (params: IHeaderParams) =>
GenericTableHeader(params, { position: 'center', preset: 'userFavorite' }),
headerName: 'Favorite',
suppressSizeToFit: true,
valueGetter: (params: ValueGetterParams) =>
params.data ? params.data.userFavorite : undefined,
width: 50,
},
userRating: {
cellClass: (params) => (params.value ? 'visible ag-cell-rating' : 'ag-cell-rating'),
cellRenderer: RatingCell,
colId: TableColumn.USER_RATING,
field: 'userRating',
headerComponent: (params: IHeaderParams) =>
GenericTableHeader(params, { position: 'center', preset: 'userRating' }),
headerName: 'Rating',
suppressSizeToFit: true,
valueGetter: (params: ValueGetterParams) => (params.data ? params.data.userRating : undefined),
width: 95,
},
};
export const getColumnDef = (column: TableColumn) => {

6
src/renderer/components/virtual-table/table-config-dropdown.tsx
View file

@ -28,9 +28,9 @@ export const SONG_TABLE_COLUMNS = [
{ label: 'Date Added', value: TableColumn.DATE_ADDED },
{ label: 'Path', value: TableColumn.PATH },
{ label: 'Plays', value: TableColumn.PLAY_COUNT },
// { label: 'Favorite', value: TableColumn.FAVORITE },
// { label: 'Rating', value: TableColumn.RATING },
// { label: 'Size', value: TableColumn.SIZE },
{ label: 'Favorite', value: TableColumn.USER_FAVORITE },
{ label: 'Rating', value: TableColumn.USER_RATING },
{ label: 'Size', value: TableColumn.SIZE },
// { label: 'Skip', value: TableColumn.SKIP },
];