From 33157cf7893e1faf8006f4296eb99dd7adf5bc37 Mon Sep 17 00:00:00 2001 From: Daniel Karbach Date: Tue, 7 Mar 2023 10:03:37 +0100 Subject: [PATCH] collapse schedule filter --- resources/js/components/common/Icon.js | 1 + resources/js/components/pages/Schedule.js | 31 +++++++++++++++++++---- resources/js/i18n/de.js | 1 + resources/js/i18n/en.js | 1 + 4 files changed, 29 insertions(+), 5 deletions(-) diff --git a/resources/js/components/common/Icon.js b/resources/js/components/common/Icon.js index 00a65a4..facd3f2 100644 --- a/resources/js/components/common/Icon.js +++ b/resources/js/components/common/Icon.js @@ -67,6 +67,7 @@ Icon.CROSSHAIRS = makePreset('CrosshairsIcon', 'crosshairs'); Icon.DELETE = makePreset('DeleteIcon', 'user-xmark'); Icon.DISCORD = makePreset('DiscordIcon', ['fab', 'discord']); Icon.EDIT = makePreset('EditIcon', 'edit'); +Icon.FILTER = makePreset('FilterIcon', 'filter'); Icon.FINISHED = makePreset('FinishedIcon', 'square-check'); Icon.FIRST_PLACE = makePreset('FirstPlaceIcon', 'trophy'); Icon.FORBIDDEN = makePreset('ForbiddenIcon', 'square-xmark'); diff --git a/resources/js/components/pages/Schedule.js b/resources/js/components/pages/Schedule.js index 3d0a140..ffbb69e 100644 --- a/resources/js/components/pages/Schedule.js +++ b/resources/js/components/pages/Schedule.js @@ -2,13 +2,14 @@ import axios from 'axios'; import moment from 'moment'; import PropTypes from 'prop-types'; import React from 'react'; -import { Alert, Container } from 'react-bootstrap'; +import { Alert, Button, Container } from 'react-bootstrap'; import { Helmet } from 'react-helmet'; import { useTranslation } from 'react-i18next'; import toastr from 'toastr'; import CanonicalLinks from '../common/CanonicalLinks'; import ErrorBoundary from '../common/ErrorBoundary'; +import Icon from '../common/Icon'; import ApplyDialog from '../episodes/ApplyDialog'; import Filter from '../episodes/Filter'; import List from '../episodes/List'; @@ -25,6 +26,7 @@ const Schedule = ({ user }) => { const [restreamEpisode, setRestreamEpisode] = React.useState(null); const [showApplyDialog, setShowApplyDialog] = React.useState(false); const [showRestreamDialog, setShowRestreamDialog] = React.useState(false); + const [showFilter, setShowFilter] = React.useState(false); const { t } = useTranslation(); @@ -211,18 +213,37 @@ const Schedule = ({ user }) => { }; }, [ahead, behind, fetchEpisodes, filter]); + const toggleFilter = React.useCallback(() => { + setShowFilter(show => !show); + }, []); + + const filterButtonVariant = React.useMemo(() => { + const outline = showFilter ? '' : 'outline-'; + const filterActive = filter && filter.event && filter.event.length; + return `${outline}${filterActive ? 'info' : 'secondary'}`; + }, [filter, showFilter]); + return {t('schedule.heading')} -
-

{t('schedule.heading')}

-
+
+

{t('schedule.heading')}

+ +
+ {showFilter ? +
-
+ : null} {episodes.length ?