ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use gql for "mangas" VI - source mangas filter

Browse Source
This commit is contained in:
schroda
2023-09-24 21:32:23 +02:00
parent 3297c7d96c
commit 12dd973179
10 changed files with 113 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/source/SourceOptions.tsx
View File

@@ -10,7 +10,7 @@ import FilterListIcon from '@mui/icons-material/FilterList';
import { Button, Stack, Box } from '@mui/material';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ISourceFilters, IState } from '@/typings';
import { SourceFilters } from '@/typings';
import OptionsPanel from '@/components/molecules/OptionsPanel';
import CheckBoxFilter from '@/components/source/filters/CheckBoxFilter';
import HeaderFilter from '@/components/source/filters/HeaderFilter';
@@ -25,14 +25,14 @@ import SeperatorFilter from '@/components/source/filters/SeparatorFilter';
import StyledFab from '@/components/util/StyledFab';
interface IFilters {
sourceFilter: ISourceFilters[];
sourceFilter: SourceFilters[];
updateFilterValue: Function;
group: number | undefined;
update: any;
}
interface IFilters1 {
sourceFilter: ISourceFilters[];
sourceFilter: SourceFilters[];
updateFilterValue: Function;
resetFilterValue: Function;
setTriggerUpdate: Function;
@@ -42,85 +42,89 @@ interface IFilters1 {
export function Options({ sourceFilter, group, updateFilterValue, update }: IFilters) {
return (
<Stack key={`filters ${group}`}>
{sourceFilter.map((e: ISourceFilters, index) => {
{sourceFilter.map((e, index) => {
let checkif = update.find(
(el: { group: number | undefined; position: number }) =>
el.group === group && el.position === index,
);
checkif = checkif ? checkif.state : checkif;
switch (e.type) {
case 'CheckBox':
case 'CheckBoxFilter':
return (
<CheckBoxFilter
key={`filters ${e.filter.name}`}
name={e.filter.name}
state={checkif != null ? checkif === 'true' : (e.filter.state as boolean)}
key={`filters ${e.name}`}
name={e.name}
state={checkif ?? e.CheckBoxFilterDefault}
position={index}
group={group}
updateFilterValue={updateFilterValue}
update={update}
/>
);
case 'Group':
case 'GroupFilter':
return (
<GroupFilter
key={`filters ${e.filter.name}`}
name={e.filter.name}
state={e.filter.state as ISourceFilters[]}
key={`filters ${e.name}`}
name={e.name}
state={e.filters}
position={index}
updateFilterValue={updateFilterValue}
update={update}
/>
);
case 'Header':
return <HeaderFilter key={`filters ${e.filter.name}`} name={e.filter.name} />;
case 'Select':
case 'HeaderFilter':
return <HeaderFilter key={`filters ${e.name}`} name={e.name} />;
case 'SelectFilter':
return (
<SelectFilter
key={`filters ${e.filter.name}`}
name={e.filter.name}
values={e.filter.displayValues}
state={checkif != null ? parseInt(checkif, 10) : (e.filter.state as number)}
selected={e.filter.selected}
key={`filters ${e.name}`}
name={e.name}
values={e.values}
state={checkif != null ? parseInt(checkif, 10) : e.SelectFilterDefault}
position={index}
group={group}
updateFilterValue={updateFilterValue}
update={update}
/>
);
case 'Separator':
return <SeperatorFilter key={`filters ${e.filter.name}`} name={e.filter.name} />;
case 'Sort':
case 'SeparatorFilter':
return <SeperatorFilter key={`filters ${e.name}`} name={e.name} />;
case 'SortFilter':
return (
<SortFilter
key={`filters ${e.filter.name}`}
name={e.filter.name}
values={e.filter.values}
state={checkif ? JSON.parse(checkif) : { ...(e.filter.state as IState) }}
key={`filters ${e.name}`}
name={e.name}
values={e.values}
state={
checkif ?? {
ascending: e.SortFilterDefault?.ascending,
index: e.SortFilterDefault?.index,
}
}
position={index}
group={group}
updateFilterValue={updateFilterValue}
update={update}
/>
);
case 'Text':
case 'TextFilter':
return (
<TextFilter
key={`filters ${e.filter.name}`}
name={e.filter.name}
state={checkif ?? (e.filter.state as string)}
key={`filters ${e.name}`}
name={e.name}
state={checkif ?? e.TextFilterDefault}
position={index}
group={group}
updateFilterValue={updateFilterValue}
update={update}
/>
);
case 'TriState':
case 'TriStateFilter':
return (
<TriStateFilter
key={`filters ${e.filter.name}`}
name={e.filter.name}
state={checkif != null ? parseInt(checkif, 10) : (e.filter.state as number)}
key={`filters ${e.name}`}
name={e.name}
state={checkif != null ? checkif : e.TriStateFilterDefault}
position={index}
group={group}
updateFilterValue={updateFilterValue}
@@ -128,7 +132,7 @@ export function Options({ sourceFilter, group, updateFilterValue, update }: IFil
/>
);
default:
return <Box key={`${e.filter.name}null`} />;
throw new Error(`Unknown source filter "${e}"`);
}
})}
</Stack>

2
src/components/source/filters/CheckBoxFilter.tsx
View File

@@ -27,7 +27,7 @@ const CheckBoxFilter: React.FC<Props> = (props: Props) => {
const upd = update.filter(
(e: { position: number; group: number | undefined }) => !(position === e.position && group === e.group),
);
updateFilterValue([...upd, { position, state: event.target.checked.toString(), group }]);
updateFilterValue([...upd, { type: 'checkBoxState', position, state: event.target.checked, group }]);
};
if (state !== undefined) {

9
src/components/source/filters/GroupFilter.tsx
View File

@@ -10,11 +10,14 @@ import { ExpandLess, ExpandMore } from '@mui/icons-material';
import { Collapse, ListItemButton, ListItemText, Stack, Box } from '@mui/material';
import React from 'react';
// eslint-disable-next-line import/no-cycle
import { ISourceFilters } from '@/typings';
import { SourceFilters } from '@/typings';
import { Options } from '@/components/source/SourceOptions';
// type ExcludeByName<T, K extends string> = T extends { __typename?: K } ? never : T;
type PickByName<T, K extends string> = T extends { __typename?: K } ? T : never;
interface Props {
state: ISourceFilters[];
state: PickByName<SourceFilters, 'GroupFilter'>['filters'];
name: string;
position: number;
updateFilterValue: Function;
@@ -36,7 +39,7 @@ const GroupFilter: React.FC<Props> = (props: Props) => {
{/* Container is moved outside 2, so content has to go inside 4 */}
<Stack sx={{ mx: 4 }}>
<Options
sourceFilter={state}
sourceFilter={state as SourceFilters[]}
group={position}
updateFilterValue={updateFilterValue}
update={update}

64
src/components/source/filters/SelectFilter.tsx
View File

@@ -16,56 +16,12 @@ interface Props {
values: any;
name: string;
state: number;
selected: Selected | undefined;
position: number;
updateFilterValue: Function;
group: number | undefined;
update: any;
}
interface Selected {
displayname: string;
value: string;
_value: string;
}
function hasSelect(
values: Selected[],
name: string,
state: number,
position: number,
updateFilterValue: Function,
update: any,
group?: number,
) {
const [val, setval] = React.useState(state);
if (values) {
const handleChange = (event: { target: { name: any; value: any } }) => {
const vall = values.map((e) => e.displayname).indexOf(`${event.target.value}`);
setval(vall);
const upd = update.filter(
(e: { position: number; group: number | undefined }) => !(position === e.position && group === e.group),
);
updateFilterValue([...upd, { position, state: vall.toString(), group }]);
};
const rett = values.map((e: Selected) => (
<MenuItem key={`${name} ${e.displayname}`} value={e.displayname}>
{e.displayname}
</MenuItem>
));
return (
<FormControl sx={{ my: 1 }} variant="standard">
<InputLabel>{name}</InputLabel>
<Select name={name} value={values[val].displayname} label={name} onChange={handleChange}>
{rett}
</Select>
</FormControl>
);
}
return null;
}
function noSelect(
values: string[],
name: string,
@@ -84,7 +40,7 @@ function noSelect(
const upd = update.filter(
(e: { position: number; group: number | undefined }) => !(position === e.position && group === e.group),
);
updateFilterValue([...upd, { position, state: vall.toString(), group }]);
updateFilterValue([...upd, { type: 'selectState', position, state: vall, group }]);
};
const rett = values.map((value: string) => (
@@ -104,21 +60,7 @@ function noSelect(
return null;
}
const SelectFilter: React.FC<Props> = ({
values,
name,
state,
selected,
position,
updateFilterValue,
update,
group,
}) => {
if (selected === undefined) {
return noSelect(values, name, state, position, updateFilterValue, update, group);
}
return hasSelect(values, name, state, position, updateFilterValue, update, group);
};
const SelectFilter: React.FC<Props> = ({ values, name, state, position, updateFilterValue, update, group }) =>
noSelect(values, name, state, position, updateFilterValue, update, group);
export default SelectFilter;

6
src/components/source/filters/SortFilter.tsx
View File

@@ -9,13 +9,13 @@
import { ExpandLess, ExpandMore } from '@mui/icons-material';
import { Collapse, ListItemButton, ListItemText, Stack, Box } from '@mui/material';
import React from 'react';
import { IState } from '@/typings';
import SortRadioInput from '@/components/atoms/SortRadioInput';
import { SortSelectionInput } from '@/lib/graphql/generated/graphql.ts';
interface Props {
values: any;
name: string;
state: IState;
state: SortSelectionInput;
position: number;
group: number | undefined;
updateFilterValue: Function;
@@ -45,7 +45,7 @@ const SortFilter: React.FC<Props> = (props: Props) => {
const upd = update.filter(
(e: { position: number; group: number | undefined }) => !(position === e.position && group === e.group),
);
updateFilterValue([...upd, { position, state: JSON.stringify(tmp), group }]);
updateFilterValue([...upd, { type: 'sortState', position, state: tmp, group }]);
};
return (

2
src/components/source/filters/TextFilter.tsx
View File

@@ -29,7 +29,7 @@ const TextFilter: React.FC<Props> = (props) => {
const upd = update.filter(
(el: { position: number; group: number | undefined }) => !(position === el.position && group === el.group),
);
updateFilterValue([...upd, { position, state: inputText, group }]);
updateFilterValue([...upd, { type: 'textState', position, state: inputText, group }]);
}, [inputText]);
if (state !== undefined) {

34
src/components/source/filters/TriStateFilter.tsx
View File

@@ -8,9 +8,10 @@
import React from 'react';
import ThreeStateCheckboxInput from '@/components/atoms/ThreeStateCheckboxInput';
import { TriState } from '@/lib/graphql/generated/graphql.ts';
interface Props {
state: number;
state: TriState;
name: string;
position: number;
group: number | undefined;
@@ -18,9 +19,35 @@ interface Props {
update: any;
}
const convertTriStateToNumber = (triState: TriState): number => {
switch (triState) {
case TriState.Ignore:
return 0;
case TriState.Include:
return 1;
case TriState.Exclude:
return 2;
default:
throw new Error(`Unexpected TriState ${triState}`);
}
};
const convertNumberToTriState = (state: number): TriState => {
switch (state) {
case 0:
return TriState.Ignore;
case 1:
return TriState.Include;
case 2:
return TriState.Exclude;
default:
throw new Error(`Unexpected state number ${state}`);
}
};
const TriStateFilter: React.FC<Props> = (props) => {
const { state, name, position, group, updateFilterValue, update } = props;
const [val, setval] = React.useState<number>(Number(state));
const [val, setval] = React.useState(convertTriStateToNumber(state));
const handleChange = (checked: boolean | null | undefined) => {
// eslint-disable-next-line no-nested-ternary
@@ -32,8 +59,9 @@ const TriStateFilter: React.FC<Props> = (props) => {
updateFilterValue([
...upd,
{
type: 'triState',
position,
state: newState.toString(),
state: convertNumberToTriState(newState),
group,
},
]);