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

Improved the input for the pages

This commit is contained in:
DrMint 2022-05-22 20:43:17 +02:00
parent 6adae3fb3f
commit 16c540181d
4 changed files with 149 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/Inputs/WithLabel.tsx Normal file
View File

@ -0,0 +1,25 @@
import { Immutable } from "helpers/types";
interface Props {
label: string | null | undefined;
input: JSX.Element;
disabled?: boolean;
}
export function WithLabel(props: Immutable<Props>): JSX.Element {
const { label, input, disabled } = props;
return (
<div
className={`flex flex-row place-content-between place-items-center gap-2 ${
disabled ? "text-dark brightness-150 contrast-75 grayscale" : ""
}`}
>
{label && (
<p className={`text-left ${label.length < 10 ? "flex-shrink-0" : ""}`}>
{label}:
</p>
)}
{input}
</div>
);
}

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

@ -17,6 +17,7 @@ import { Immutable } from "helpers/types";
import { GetStaticPropsContext } from "next";
import { Fragment, useEffect, useState } from "react";
import { Icon } from "components/Ico";
import { WithLabel } from "components/Inputs/WithLabel";
interface Props extends AppStaticProps {
contents: NonNullable<GetContentsQuery["contents"]>["data"];
@ -83,36 +84,34 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
}}
/>
<div className="flex flex-row place-items-center gap-2">
<p className="flex-shrink-0">{langui.group_by}:</p>
<Select
className="w-full"
options={[langui.category ?? "", langui.type ?? ""]}
state={groupingMethod}
setState={setGroupingMethod}
allowEmpty
/>
</div>
<WithLabel
label={langui.group_by}
input={
<Select
className="w-full"
options={[langui.category ?? "", langui.type ?? ""]}
state={groupingMethod}
setState={setGroupingMethod}
allowEmpty
/>
}
/>
<div
className={`flex flex-row place-items-center gap-2 coarse:hidden ${
searchName.length > 1
? "text-dark brightness-150 contrast-75 grayscale"
: ""
}`}
>
<p className="flex-shrink-0">{langui.combine_related_contents}:</p>
<Switch
setState={setCombineRelatedContent}
state={effectiveCombineRelatedContent}
disabled={searchName.length > 1}
/>
</div>
<WithLabel
label={langui.combine_related_contents}
disabled={searchName.length > 1}
input={
<Switch
setState={setCombineRelatedContent}
state={effectiveCombineRelatedContent}
/>
}
/>
<div className="flex flex-row place-items-center gap-2 coarse:hidden">
<p className="flex-shrink-0">{langui.always_show_info}:</p>
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
</div>
<WithLabel
label={langui.always_show_info}
input={<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />}
/>
</SubPanel>
);
const contentPanel = (

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

@ -22,6 +22,7 @@ import { Immutable } from "helpers/types";
import { GetStaticPropsContext } from "next";
import { Fragment, useEffect, useState } from "react";
import { Icon } from "components/Ico";
import { WithLabel } from "components/Inputs/WithLabel";
interface Props extends AppStaticProps {
items: NonNullable<GetLibraryItemsPreviewQuery["libraryItems"]>["data"];
@ -104,54 +105,62 @@ export default function Library(props: Immutable<Props>): JSX.Element {
}}
/>
<div className="flex flex-row place-items-center gap-2">
<p className="flex-shrink-0">{langui.group_by}:</p>
<Select
className="w-full"
options={[
langui.category ?? "Category",
langui.type ?? "Type",
langui.release_year ?? "Year",
]}
state={groupingMethod}
setState={setGroupingMethod}
allowEmpty
/>
</div>
<WithLabel
label={langui.group_by}
input={
<Select
className="w-full"
options={[
langui.category ?? "Category",
langui.type ?? "Type",
langui.release_year ?? "Year",
]}
state={groupingMethod}
setState={setGroupingMethod}
allowEmpty
/>
}
/>
<div className="flex flex-row place-items-center gap-2">
<p className="flex-shrink-0">{langui.order_by}:</p>
<Select
className="w-full"
options={[
langui.name ?? "Name",
langui.price ?? "Price",
langui.release_date ?? "Release date",
]}
state={sortingMethod}
setState={setSortingMethod}
/>
</div>
<WithLabel
label={langui.order_by}
input={
<Select
className="w-full"
options={[
langui.name ?? "Name",
langui.price ?? "Price",
langui.release_date ?? "Release date",
]}
state={sortingMethod}
setState={setSortingMethod}
/>
}
/>
<div className="flex flex-row place-content-between place-items-center gap-2">
<p className="text-left">{langui.show_subitems}:</p>
<Switch state={showSubitems} setState={setShowSubitems} />
</div>
<WithLabel
label={langui.show_subitems}
input={<Switch state={showSubitems} setState={setShowSubitems} />}
/>
<div className="flex flex-row place-content-between place-items-center gap-2">
<p className="text-left">{langui.show_primary_items}:</p>
<Switch state={showPrimaryItems} setState={setShowPrimaryItems} />
</div>
<WithLabel
label={langui.show_primary_items}
input={
<Switch state={showPrimaryItems} setState={setShowPrimaryItems} />
}
/>
<div className="flex flex-row place-content-between place-items-center gap-2">
<p className="text-left">{langui.show_secondary_items}:</p>
<Switch state={showSecondaryItems} setState={setShowSecondaryItems} />
</div>
<WithLabel
label={langui.show_secondary_items}
input={
<Switch state={showSecondaryItems} setState={setShowSecondaryItems} />
}
/>
<div className="flex flex-row place-content-between place-items-center gap-2 coarse:hidden">
<p className="text-left">{langui.always_show_info}:</p>
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
</div>
<WithLabel
label={langui.always_show_info}
input={<Switch state={keepInfoVisible} setState={setKeepInfoVisible} />}
/>
</SubPanel>
);
const contentPanel = (

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

@ -13,8 +13,9 @@ import { getReadySdk } from "graphql/sdk";
import { prettyDate, prettySlug } from "helpers/formatters";
import { Immutable } from "helpers/types";
import { GetStaticPropsContext } from "next";
import { Fragment, useState } from "react";
import { Fragment, useEffect, useState } from "react";
import { Icon } from "components/Ico";
import { WithLabel } from "components/Inputs/WithLabel";
interface Props extends AppStaticProps {
posts: NonNullable<GetPostsPreviewQuery["posts"]>["data"];
@ -25,6 +26,15 @@ export default function News(props: Immutable<Props>): JSX.Element {
const posts = sortPosts(props.posts);
const [keepInfoVisible, setKeepInfoVisible] = useState(true);
const [searchName, setSearchName] = useState("");
const [filteredItems, setFilteredItems] = useState(
filterItems(posts, searchName)
);
useEffect(() => {
setFilteredItems(filterItems(posts, searchName));
}, [posts, searchName]);
const subPanel = (
<SubPanel>
@ -34,10 +44,22 @@ export default function News(props: Immutable<Props>): JSX.Element {
description={langui.news_description}
/>
<div className="flex flex-row place-items-center gap-2 coarse:hidden">
<p className="flex-shrink-0">{langui.always_show_info}:</p>
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
</div>
<input
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);
}}
/>
<WithLabel
label={langui.always_show_info}
input={<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />}
/>
</SubPanel>
);
@ -47,7 +69,7 @@ export default function News(props: Immutable<Props>): JSX.Element {
className="grid grid-cols-1 items-end gap-8
desktop:grid-cols-[repeat(auto-fill,_minmax(20rem,1fr))]"
>
{posts.map((post) => (
{filteredItems.map((post) => (
<Fragment key={post.id}>
{post.attributes && (
<PreviewCard
@ -80,6 +102,7 @@ export default function News(props: Immutable<Props>): JSX.Element {
navTitle={langui.news}
subPanel={subPanel}
contentPanel={contentPanel}
subPanelIcon={Icon.Search}
{...props}
/>
);
@ -115,3 +138,19 @@ function sortPosts(
.reverse();
return sortedPosts as Immutable<Props["posts"]>;
}
function filterItems(posts: Immutable<Props["posts"]>, searchName: string) {
return [...posts].filter((post) => {
if (searchName.length > 1) {
if (
post.attributes?.translations?.[0]?.title
.toLowerCase()
.includes(searchName.toLowerCase())
) {
return true;
}
return false;
}
return true;
});
}