Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Added clear search and reset filters to relevent pages

This commit is contained in:
DrMint 2022-05-27 16:16:45 +02:00
parent 89bfc7ea89
commit 622493a869
5 changed files with 160 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/AppLayout.tsx
View File

@ -15,6 +15,7 @@ import { useSwipeable } from "react-swipeable";
import { Ico, Icon } from "./Ico";
import { OrderableList } from "./Inputs/OrderableList";
import { Select } from "./Inputs/Select";
import { TextInput } from "./Inputs/TextInput";
import { MainPanel } from "./Panels/MainPanel";
import { Popup } from "./Popup";
import { PreviewCard } from "./PreviewCard";
@ -484,16 +485,11 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
<div>
<h3 className="text-xl">{langui.player_name}</h3>
<input
type="text"
<TextInput
placeholder="<player>"
className="w-48"
onInput={(event) =>
appLayout.setPlayerName(
(event.target as HTMLInputElement).value
)
}
value={appLayout.playerName}
state={appLayout.playerName}
setState={appLayout.setPlayerName}
/>
</div>
</div>
@ -507,16 +503,11 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
<div className="grid place-items-center gap-2">
{/* TODO: add to langui */}
<h2 className="text-2xl">{"Search"}</h2>
<input
<TextInput
className="mb-6 w-full"
type="text"
name="name"
id="name"
placeholder={"Search query..."}
onChange={(event) => {
const input = event.target as HTMLInputElement;
setSearchQuery(input.value);
}}
state={searchQuery}
setState={setSearchQuery}
/>
</div>
{/* TODO: add to langui */}

43
src/components/Inputs/TextInput.tsx Normal file
View File

@ -0,0 +1,43 @@
import { Ico, Icon } from "components/Ico";
import { Immutable } from "helpers/types";
import { Dispatch, SetStateAction } from "react";
interface Props {
state: string | undefined;
setState:
| Dispatch<SetStateAction<string | undefined>>
| Dispatch<SetStateAction<string>>;
className?: string;
name?: string;
placeholder?: string;
}
export function TextInput(props: Immutable<Props>): JSX.Element {
const { state, setState, className, name, placeholder } = props;
return (
<div className={`relative ${className}`}>
<input
className="w-full"
type="text"
name={name}
value={state}
placeholder={placeholder}
onChange={(event) => {
setState(event.target.value);
}}
/>
<div className="absolute right-4 top-0 bottom-0 grid place-items-center">
{state && (
<Ico
className="cursor-pointer !text-xs"
icon={Icon.Close}
onClick={() => {
setState("");
}}
/>
)}
</div>
</div>
);
}

47
src/pages/contents/index.tsx
View File

@ -18,6 +18,8 @@ import { GetStaticPropsContext } from "next";
import { Fragment, useEffect, useState } from "react";
import { Icon } from "components/Ico";
import { WithLabel } from "components/Inputs/WithLabel";
import { Button } from "components/Inputs/Button";
import { TextInput } from "components/Inputs/TextInput";
interface Props extends AppStaticProps {
contents: NonNullable<GetContentsQuery["contents"]>["data"];
@ -25,16 +27,29 @@ interface Props extends AppStaticProps {
type GroupContentItems = Map<string, Immutable<Props["contents"]>>;
const defaultFiltersState = {
groupingMethod: -1,
keepInfoVisible: false,
combineRelatedContent: true,
searchName: "",
};
export default function Contents(props: Immutable<Props>): JSX.Element {
const { langui, contents } = props;
const [groupingMethod, setGroupingMethod] = useState<number>(-1);
const [keepInfoVisible, setKeepInfoVisible] = useState(false);
const [groupingMethod, setGroupingMethod] = useState<number>(
defaultFiltersState.groupingMethod
);
const [keepInfoVisible, setKeepInfoVisible] = useState(
defaultFiltersState.keepInfoVisible
);
const [combineRelatedContent, setCombineRelatedContent] = useState(
defaultFiltersState.combineRelatedContent
);
const [searchName, setSearchName] = useState(defaultFiltersState.searchName);
const [combineRelatedContent, setCombineRelatedContent] = useState(true);
const [effectiveCombineRelatedContent, setEffectiveCombineRelatedContent] =
useState(true);
const [searchName, setSearchName] = useState("");
const [filteredItems, setFilteredItems] = useState(
filterContents(contents, combineRelatedContent, searchName)
@ -72,16 +87,11 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
description={langui.contents_description}
/>
<input
<TextInput
className="mb-6 w-full"
type="text"
name="name"
id="name"
placeholder={langui.search_title ?? undefined}
onChange={(event) => {
const input = event.target as HTMLInputElement;
setSearchName(input.value);
}}
state={searchName}
setState={setSearchName}
/>
<WithLabel
@ -112,6 +122,19 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
label={langui.always_show_info}
input={<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />}
/>
{/* TODO: Add to Langui */}
<Button
className="mt-8"
text={"Reset all filters"}
icon={Icon.Replay}
onClick={() => {
setSearchName(defaultFiltersState.searchName);
setGroupingMethod(defaultFiltersState.groupingMethod);
setKeepInfoVisible(defaultFiltersState.keepInfoVisible);
setCombineRelatedContent(defaultFiltersState.combineRelatedContent);
}}
/>
</SubPanel>
);
const contentPanel = (

65
src/pages/library/index.tsx
View File

@ -23,6 +23,8 @@ import { GetStaticPropsContext } from "next";
import { Fragment, useEffect, useState } from "react";
import { Icon } from "components/Ico";
import { WithLabel } from "components/Inputs/WithLabel";
import { TextInput } from "components/Inputs/TextInput";
import { Button } from "components/Inputs/Button";
interface Props extends AppStaticProps {
items: NonNullable<GetLibraryItemsPreviewQuery["libraryItems"]>["data"];
@ -30,16 +32,38 @@ interface Props extends AppStaticProps {
type GroupLibraryItems = Map<string, Immutable<Props["items"]>>;
const defaultFiltersState = {
searchName: "",
showSubitems: false,
showPrimaryItems: true,
showSecondaryItems: false,
sortingMethod: 0,
groupingMethod: -1,
keepInfoVisible: false,
};
export default function Library(props: Immutable<Props>): JSX.Element {
const { langui, items: libraryItems, currencies } = props;
const [searchName, setSearchName] = useState("");
const [showSubitems, setShowSubitems] = useState<boolean>(false);
const [showPrimaryItems, setShowPrimaryItems] = useState<boolean>(true);
const [showSecondaryItems, setShowSecondaryItems] = useState<boolean>(false);
const [sortingMethod, setSortingMethod] = useState<number>(0);
const [groupingMethod, setGroupingMethod] = useState<number>(-1);
const [keepInfoVisible, setKeepInfoVisible] = useState(false);
const [searchName, setSearchName] = useState(defaultFiltersState.searchName);
const [showSubitems, setShowSubitems] = useState<boolean>(
defaultFiltersState.showSubitems
);
const [showPrimaryItems, setShowPrimaryItems] = useState<boolean>(
defaultFiltersState.showPrimaryItems
);
const [showSecondaryItems, setShowSecondaryItems] = useState<boolean>(
defaultFiltersState.showSecondaryItems
);
const [sortingMethod, setSortingMethod] = useState<number>(
defaultFiltersState.sortingMethod
);
const [groupingMethod, setGroupingMethod] = useState<number>(
defaultFiltersState.groupingMethod
);
const [keepInfoVisible, setKeepInfoVisible] = useState(
defaultFiltersState.keepInfoVisible
);
const [filteredItems, setFilteredItems] = useState(
filterItems(
@ -93,16 +117,11 @@ export default function Library(props: Immutable<Props>): JSX.Element {
description={langui.library_description}
/>
<input
<TextInput
className="mb-6 w-full"
type="text"
name="name"
id="name"
placeholder={langui.search_title ?? undefined}
onChange={(event) => {
const input = event.target as HTMLInputElement;
setSearchName(input.value);
}}
state={searchName}
setState={setSearchName}
/>
<WithLabel
@ -161,6 +180,22 @@ export default function Library(props: Immutable<Props>): JSX.Element {
label={langui.always_show_info}
input={<Switch state={keepInfoVisible} setState={setKeepInfoVisible} />}
/>
{/* TODO: Add to Langui */}
<Button
className="mt-8"
text={"Reset all filters"}
icon={Icon.Replay}
onClick={() => {
setSearchName(defaultFiltersState.searchName);
setShowSubitems(defaultFiltersState.showSubitems);
setShowPrimaryItems(defaultFiltersState.showPrimaryItems);
setShowSecondaryItems(defaultFiltersState.showSecondaryItems);
setSortingMethod(defaultFiltersState.sortingMethod);
setGroupingMethod(defaultFiltersState.groupingMethod);
setKeepInfoVisible(defaultFiltersState.keepInfoVisible);
}}
/>
</SubPanel>
);
const contentPanel = (

35
src/pages/news/index.tsx
View File

@ -16,17 +16,26 @@ import { GetStaticPropsContext } from "next";
import { Fragment, useEffect, useState } from "react";
import { Icon } from "components/Ico";
import { WithLabel } from "components/Inputs/WithLabel";
import { TextInput } from "components/Inputs/TextInput";
import { Button } from "components/Inputs/Button";
interface Props extends AppStaticProps {
posts: NonNullable<GetPostsPreviewQuery["posts"]>["data"];
}
const defaultFiltersState = {
searchName: "",
keepInfoVisible: true,
};
export default function News(props: Immutable<Props>): JSX.Element {
const { langui } = props;
const posts = sortPosts(props.posts);
const [keepInfoVisible, setKeepInfoVisible] = useState(true);
const [searchName, setSearchName] = useState("");
const [searchName, setSearchName] = useState(defaultFiltersState.searchName);
const [keepInfoVisible, setKeepInfoVisible] = useState(
defaultFiltersState.keepInfoVisible
);
const [filteredItems, setFilteredItems] = useState(
filterItems(posts, searchName)
@ -45,22 +54,28 @@ export default function News(props: Immutable<Props>): JSX.Element {
description={langui.news_description}
/>
<input
<TextInput
className="mb-6 w-full"
type="text"
name="name"
id="name"
placeholder={langui.search_title ?? undefined}
onChange={(event) => {
const input = event.target as HTMLInputElement;
setSearchName(input.value);
}}
state={searchName}
setState={setSearchName}
/>
<WithLabel
label={langui.always_show_info}
input={<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />}
/>
{/* TODO: Add to Langui */}
<Button
className="mt-8"
text={"Reset all filters"}
icon={Icon.Replay}
onClick={() => {
setSearchName(defaultFiltersState.searchName);
setKeepInfoVisible(defaultFiltersState.keepInfoVisible);
}}
/>
</SubPanel>
);