granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added default values, clearing filters, etc

Browse source 
* Default values
* Ability to clear filters
* Receiving values from components
This commit is contained in:
Justin Edmund 2023-03-18 12:19:14 -07:00
parent 18aa3d4a4e
commit d2c40c1d0d
1 changed files with 68 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

131
components/FilterModal/index.tsx
View file

@ -22,14 +22,20 @@ import type { DialogProps } from '@radix-ui/react-dialog'
import CrossIcon from '~public/icons/Cross.svg' import CrossIcon from '~public/icons/Cross.svg'
import './index.scss' import './index.scss'
import SwitchTableField from '~components/SwitchTableField'
import InputTableField from '~components/InputTableField'
interface Props extends DialogProps {} interface Props extends DialogProps {}
defaultFilterSet: FilterSet
filterSet: FilterSet const DEFAULT_FULL_AUTO = false
sendAdvancedFilters: (filters: FilterSet) => void const DEFAULT_AUTO_GUARD = false
} const DEFAULT_CHARGE_ATTACK = false
const DEFAULT_MAX_BUTTONS = 0
const DEFAULT_MAX_TURNS = 0
const DEFAULT_MIN_CHARACTERS = 3
const DEFAULT_MIN_WEAPONS = 5
const DEFAULT_MIN_SUMMONS = 2
const DEFAULT_NAME_QUALITY = false
const DEFAULT_USER_QUALITY = false
const DEFAULT_ORIGINAL_ONLY = false
const MAX_CHARACTERS = 5 const MAX_CHARACTERS = 5
const MAX_WEAPONS = 13 const MAX_WEAPONS = 13
@ -48,12 +54,11 @@ const FilterModal = (props: Props) => {
const footerRef = React.createRef<HTMLDivElement>() const footerRef = React.createRef<HTMLDivElement>()
// States // States
const [filters, setFilters] = useState<{ [key: string]: any }>()
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const [fullAuto, setFullAuto] = useState(false) const [fullAuto, setFullAuto] = useState(DEFAULT_FULL_AUTO)
const [autoGuard, setAutoGuard] = useState(false) const [autoGuard, setAutoGuard] = useState(DEFAULT_AUTO_GUARD)
const [chargeAttack, setChargeAttack] = useState(false) const [chargeAttack, setChargeAttack] = useState(DEFAULT_CHARGE_ATTACK)
const [minCharacterCount, setMinCharacterCount] = useState(3) const [minCharacterCount, setMinCharacterCount] = useState(3)
const [minWeaponCount, setMinWeaponCount] = useState(5) const [minWeaponCount, setMinWeaponCount] = useState(5)
@ -69,27 +74,27 @@ const FilterModal = (props: Props) => {
props.defaultFilterSet.charge_attack props.defaultFilterSet.charge_attack
) )
const [minCharacterCount, setMinCharacterCount] = useState( const [minCharacterCount, setMinCharacterCount] = useState(
props.defaultFilterSet.characters_count DEFAULT_MIN_CHARACTERS
) )
const [minWeaponCount, setMinWeaponCount] = useState( const [minWeaponCount, setMinWeaponCount] = useState(DEFAULT_MIN_WEAPONS)
props.defaultFilterSet.weapons_count props.defaultFilterSet.weapons_count
) )
const [minSummonCount, setMinSummonCount] = useState( const [minSummonCount, setMinSummonCount] = useState(DEFAULT_MIN_SUMMONS)
props.defaultFilterSet.summons_count props.defaultFilterSet.summons_count
)
const [maxButtonsCount, setMaxButtonsCount] = useState( const [maxButtonsCount, setMaxButtonsCount] = useState(DEFAULT_MAX_BUTTONS)
props.defaultFilterSet.button_count props.defaultFilterSet.button_count
) )
const [maxTurnsCount, setMaxTurnsCount] = useState( const [maxTurnsCount, setMaxTurnsCount] = useState(DEFAULT_MAX_TURNS)
props.defaultFilterSet.turn_count props.defaultFilterSet.turn_count
)
const [userQuality, setUserQuality] = useState(false) const [userQuality, setUserQuality] = useState(DEFAULT_USER_QUALITY)
props.defaultFilterSet.user_quality props.defaultFilterSet.user_quality
) )
const [nameQuality, setNameQuality] = useState(false) const [nameQuality, setNameQuality] = useState(DEFAULT_NAME_QUALITY)
props.defaultFilterSet.name_quality props.defaultFilterSet.name_quality
) )
const [originalOnly, setOriginalOnly] = useState(false) const [originalOnly, setOriginalOnly] = useState(DEFAULT_ORIGINAL_ONLY)
props.defaultFilterSet.original props.defaultFilterSet.original
) )
@ -146,17 +151,17 @@ const FilterModal = (props: Props) => {
} }
function resetFilters() { function resetFilters() {
setFullAuto(props.defaultFilterSet.full_auto) setFullAuto(DEFAULT_FULL_AUTO)
setAutoGuard(props.defaultFilterSet.auto_guard) setAutoGuard(DEFAULT_AUTO_GUARD)
setChargeAttack(props.defaultFilterSet.charge_attack) setChargeAttack(DEFAULT_CHARGE_ATTACK)
setMinCharacterCount(props.defaultFilterSet.characters_count) setMinCharacterCount(DEFAULT_MIN_CHARACTERS)
setMinWeaponCount(props.defaultFilterSet.weapons_count) setMinWeaponCount(DEFAULT_MIN_WEAPONS)
setMinSummonCount(props.defaultFilterSet.summons_count) setMinSummonCount(DEFAULT_MIN_SUMMONS)
setMaxButtonsCount(props.defaultFilterSet.button_count) setMaxButtonsCount(DEFAULT_MAX_BUTTONS)
setMaxTurnsCount(props.defaultFilterSet.turn_count) setMaxTurnsCount(DEFAULT_MAX_TURNS)
setUserQuality(props.defaultFilterSet.user_quality) setUserQuality(DEFAULT_USER_QUALITY)
setNameQuality(props.defaultFilterSet.name_quality) setNameQuality(DEFAULT_NAME_QUALITY)
setOriginalOnly(props.defaultFilterSet.original) setOriginalOnly(DEFAULT_ORIGINAL_ONLY)
} }
function openChange() { function openChange() {
@ -179,19 +184,19 @@ const FilterModal = (props: Props) => {
} }
// Value listeners // Value listeners
function handleChargeAttackValueChange(value: string) { function handleChargeAttackValueChange(value: boolean) {
setChargeAttack(parseInt(value)) setChargeAttack(value)
} }
function handleFullAutoValueChange(value: string) { function handleFullAutoValueChange(value: boolean) {
const newValue = parseInt(value) setFullAuto(value)
setFullAuto(newValue) setFullAuto(newValue)
if (newValue === 0 || (newValue === -1 && autoGuard === 1)) if (newValue === 0 || (newValue === -1 && autoGuard === 1))
setAutoGuard(newValue) setAutoGuard(newValue)
} }
function handleAutoGuardValueChange(value: string) { function handleAutoGuardValueChange(value: boolean) {
const newValue = parseInt(value) setAutoGuard(value)
setAutoGuard(newValue) setAutoGuard(newValue)
if (newValue === 1 || (newValue === -1 && fullAuto === 0)) if (newValue === 1 || (newValue === -1 && fullAuto === 0))
setFullAuto(newValue) setFullAuto(newValue)
@ -278,7 +283,7 @@ const FilterModal = (props: Props) => {
value={fullAuto} value={fullAuto}
onOpenChange={() => openSelect('full_auto')} onOpenChange={() => openSelect('full_auto')}
onClose={() => setFullAutoOpen(false)} onClose={() => setFullAutoOpen(false)}
onChange={handleFullAutoValueChange} onValueChange={handleFullAutoValueChange}
> >
<SelectItem key="on-off" value="-1"> <SelectItem key="on-off" value="-1">
{t('modals.filters.options.on_and_off')} {t('modals.filters.options.on_and_off')}
@ -300,7 +305,7 @@ const FilterModal = (props: Props) => {
value={autoGuard} value={autoGuard}
onOpenChange={() => openSelect('auto_guard')} onOpenChange={() => openSelect('auto_guard')}
onClose={() => setAutoGuardOpen(false)} onClose={() => setAutoGuardOpen(false)}
onChange={handleAutoGuardValueChange} onValueChange={handleAutoGuardValueChange}
> >
<SelectItem key="on-off" value="-1"> <SelectItem key="on-off" value="-1">
{t('modals.filters.options.on_and_off')} {t('modals.filters.options.on_and_off')}
@ -322,7 +327,7 @@ const FilterModal = (props: Props) => {
value={chargeAttack} value={chargeAttack}
onOpenChange={() => openSelect('charge_attack')} onOpenChange={() => openSelect('charge_attack')}
onClose={() => setChargeAttackOpen(false)} onClose={() => setChargeAttackOpen(false)}
onChange={handleChargeAttackValueChange} onValueChange={handleChargeAttackValueChange}
> >
<SelectItem key="on-off" value="-1"> <SelectItem key="on-off" value="-1">
{t('modals.filters.options.on_and_off')} {t('modals.filters.options.on_and_off')}
@ -409,34 +414,34 @@ const FilterModal = (props: Props) => {
</span> </span>
</DialogClose> </DialogClose>
</div> </div>
<form>
<div className="Fields"> <div className="Fields">
{chargeAttackField()} {chargeAttackField()}
{fullAutoField()} {fullAutoField()}
{autoGuardField()} {autoGuardField()}
{maxButtonsField()} {maxButtonsField()}
{maxTurnsField()} {maxTurnsField()}
{minCharactersField()} {minCharactersField()}
{minSummonsField()} {minSummonsField()}
{minWeaponsField()} {minWeaponsField()}
{nameQualityField()} {nameQualityField()}
{userQualityField()} {userQualityField()}
{originalOnlyField()} {originalOnlyField()}
</div> </div>
<div className="DialogFooter" ref={footerRef}> <div className="DialogFooter" ref={footerRef}>
<div className="Buttons Spaced"> <div className="Buttons Spaced">
<Button <Button
blended={true} blended={true}
<Button blended={true} text={t('modals.filters.buttons.clear')} /> text={t('modals.filters.buttons.clear')}
onClick={resetFilters} onClick={resetFilters}
/> />
<Button <Button
contained={true} contained={true}
text={t('modals.filters.buttons.confirm')} text={t('modals.filters.buttons.confirm')}
/> onClick={saveFilters}
</div> />
</div> </div>
</form> </div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
) )