Add a clear button that reset the filters values.
This commit is contained in:
parent
e6df894c85
commit
b1979d7351
5 changed files with 143 additions and 97 deletions
|
|
@ -120,110 +120,141 @@
|
|||
text-align: end;
|
||||
}
|
||||
|
||||
.overflow-scroll {
|
||||
overflow: scroll;
|
||||
}
|
||||
.overflow-x-scroll {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.overflow-y-scroll {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
/* Start Margins */
|
||||
.m-1 {
|
||||
margin: var(--prj-spacing-1);
|
||||
margin: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.m-2 {
|
||||
margin: var(--prj-spacing-2);
|
||||
margin: var(--prj-spacing-2) !important;
|
||||
}
|
||||
.m-3 {
|
||||
margin: var(--prj-spacing-3);
|
||||
margin: var(--prj-spacing-3) !important;
|
||||
}
|
||||
.m-4 {
|
||||
margin: var(--prj-spacing-4);
|
||||
margin: var(--prj-spacing-4) !important;
|
||||
}
|
||||
.m-5 {
|
||||
margin: var(--prj-spacing-5);
|
||||
margin: var(--prj-spacing-5) !important;
|
||||
}
|
||||
.m-auto {
|
||||
margin: auto !important;
|
||||
}
|
||||
.mx-1 {
|
||||
margin-right: var(--prj-spacing-1) 0;
|
||||
margin-right: var(--prj-spacing-1) 0 !important;
|
||||
}
|
||||
.mx-2 {
|
||||
margin-right: var(--prj-spacing-2) 0;
|
||||
margin-right: var(--prj-spacing-2) 0 !important;
|
||||
}
|
||||
.mx-3 {
|
||||
margin-right: var(--prj-spacing-3) 0;
|
||||
margin-right: var(--prj-spacing-3) 0 !important;
|
||||
}
|
||||
.mx-4 {
|
||||
margin-right: var(--prj-spacing-4) 0;
|
||||
margin-right: var(--prj-spacing-4) 0 !important;
|
||||
}
|
||||
.mx-5 {
|
||||
margin-right: var(--prj-spacing-5) 0;
|
||||
margin-right: var(--prj-spacing-5) 0 !important;
|
||||
}
|
||||
.mx-auto {
|
||||
margin-right: auto 0 !important;
|
||||
}
|
||||
.my-1 {
|
||||
margin-right: 0 var(--prj-spacing-1);
|
||||
margin-right: 0 var(--prj-spacing-1) !important;
|
||||
}
|
||||
.my-2 {
|
||||
margin-right: 0 var(--prj-spacing-2);
|
||||
margin-right: 0 var(--prj-spacing-2) !important;
|
||||
}
|
||||
.my-3 {
|
||||
margin-right: 0 var(--prj-spacing-3);
|
||||
margin-right: 0 var(--prj-spacing-3) !important;
|
||||
}
|
||||
.my-4 {
|
||||
margin-right: 0 var(--prj-spacing-4);
|
||||
margin-right: 0 var(--prj-spacing-4) !important;
|
||||
}
|
||||
.my-5 {
|
||||
margin-right: 0 var(--prj-spacing-5);
|
||||
margin-right: 0 var(--prj-spacing-5) !important;
|
||||
}
|
||||
.my-auto {
|
||||
margin-right: 0 auto !important;
|
||||
}
|
||||
.mt-1 {
|
||||
margin-top: var(--prj-spacing-1);
|
||||
margin-top: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.mt-2 {
|
||||
margin-top: var(--prj-spacing-2);
|
||||
margin-top: var(--prj-spacing-2) !important;
|
||||
}
|
||||
.mt-3 {
|
||||
margin-top: var(--prj-spacing-3);
|
||||
margin-top: var(--prj-spacing-3) !important;
|
||||
}
|
||||
.mt-4 {
|
||||
margin-top: var(--prj-spacing-4);
|
||||
margin-top: var(--prj-spacing-4) !important;
|
||||
}
|
||||
.mt-5 {
|
||||
margin-top: var(--prj-spacing-5);
|
||||
margin-top: var(--prj-spacing-5) !important;
|
||||
}
|
||||
.mt-auto {
|
||||
margin-top: auto !important;
|
||||
}
|
||||
.mb-1 {
|
||||
margin-bottom: var(--prj-spacing-1);
|
||||
margin-bottom: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.mb-2 {
|
||||
margin-bottom: var(--prj-spacing-2);
|
||||
margin-bottom: var(--prj-spacing-2) !important;
|
||||
}
|
||||
.mb-3 {
|
||||
margin-bottom: var(--prj-spacing-3);
|
||||
margin-bottom: var(--prj-spacing-3) !important;
|
||||
}
|
||||
.mb-4 {
|
||||
margin-bottom: var(--prj-spacing-4);
|
||||
margin-bottom: var(--prj-spacing-4) !important;
|
||||
}
|
||||
.mb-5 {
|
||||
margin-bottom: var(--prj-spacing-5);
|
||||
margin-bottom: var(--prj-spacing-5) !important;
|
||||
}
|
||||
.mb-auto {
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
.ml-1 {
|
||||
margin-left: var(--prj-spacing-1);
|
||||
margin-left: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.ml-2 {
|
||||
margin-left: var(--prj-spacing-2);
|
||||
margin-left: var(--prj-spacing-2) !important;
|
||||
}
|
||||
.ml-3 {
|
||||
margin-left: var(--prj-spacing-3);
|
||||
margin-left: var(--prj-spacing-3) !important;
|
||||
}
|
||||
.ml-4 {
|
||||
margin-left: var(--prj-spacing-4);
|
||||
margin-left: var(--prj-spacing-4) !important;
|
||||
}
|
||||
.ml-5 {
|
||||
margin-left: var(--prj-spacing-5);
|
||||
margin-left: var(--prj-spacing-5) !important;
|
||||
}
|
||||
.ml-auto {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
.mr-1 {
|
||||
margin-right: var(--prj-spacing-1);
|
||||
margin-right: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.mr-2 {
|
||||
margin-right: var(--prj-spacing-2);
|
||||
margin-right: var(--prj-spacing-2) !important;
|
||||
}
|
||||
.mr-3 {
|
||||
margin-right: var(--prj-spacing-3);
|
||||
margin-right: var(--prj-spacing-3) !important;
|
||||
}
|
||||
.mr-4 {
|
||||
margin-right: var(--prj-spacing-4);
|
||||
margin-right: var(--prj-spacing-4) !important;
|
||||
}
|
||||
.mr-5 {
|
||||
margin-right: var(--prj-spacing-5);
|
||||
margin-right: var(--prj-spacing-5) !important;
|
||||
}
|
||||
.mr-auto {
|
||||
margin-right: var(--prj-spacing-5) !important;
|
||||
}
|
||||
/* End Margins */
|
||||
|
|
|
|||
|
|
@ -6,6 +6,9 @@
|
|||
padding: var(--prj-spacing-1);
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
|
||||
display: flex;
|
||||
gap: var(--prj-spacing-1);
|
||||
}
|
||||
|
||||
.input {
|
||||
|
|
@ -16,9 +19,6 @@
|
|||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.realInput {
|
||||
}
|
||||
|
||||
.selectedItem {
|
||||
background-color: var(--prj-surface-3);
|
||||
color: var(--prj-text);
|
||||
|
|
|
|||
|
|
@ -11,12 +11,14 @@ interface Props {
|
|||
options: [{ label: string; value: any }];
|
||||
keyData: string;
|
||||
isMultiple?: boolean;
|
||||
value?: string | string[];
|
||||
}
|
||||
|
||||
export default function SelectInput({
|
||||
options,
|
||||
isMultiple = false,
|
||||
onChange,
|
||||
value = [],
|
||||
}: Props): JSX.Element {
|
||||
const [selected, setSelected] = useState<string[]>([]);
|
||||
const [filteredOptions, setFilteredOptions] = useState<Props['options']>([]);
|
||||
|
|
@ -33,12 +35,12 @@ export default function SelectInput({
|
|||
return;
|
||||
}
|
||||
|
||||
onChange(isMultiple ? selected : selected.at(0));
|
||||
onChange(isMultiple ? selected : selected[0]);
|
||||
}, [selected]);
|
||||
|
||||
const handleFocusInput = (): void => {
|
||||
setIsOptionsOpen(true);
|
||||
inputRef.current.focus();
|
||||
inputRef.current?.focus();
|
||||
};
|
||||
|
||||
const handleAddElement = (item: any): void => {
|
||||
|
|
@ -49,6 +51,9 @@ export default function SelectInput({
|
|||
return [item];
|
||||
});
|
||||
setIsOptionsOpen(false);
|
||||
|
||||
if (inputRef.current === null) return;
|
||||
|
||||
inputRef.current.value = '';
|
||||
};
|
||||
|
||||
|
|
@ -111,6 +116,14 @@ export default function SelectInput({
|
|||
onChange={handleFilterOptions}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
onChange(null);
|
||||
setSelected([]);
|
||||
}}
|
||||
>
|
||||
X
|
||||
</button>
|
||||
<div className={styles.optionList} hidden={!isOptionsOpen}>
|
||||
{filteredOptions.map((item, idx) => (
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useMemo, useState } from 'react';
|
||||
import React, { useMemo, useRef, useState } from 'react';
|
||||
import usePagination, { Offset } from 'src/hooks/usePagination';
|
||||
import {
|
||||
SelectFilter,
|
||||
|
|
@ -29,8 +29,11 @@ interface Props {
|
|||
headers: Header[];
|
||||
}
|
||||
|
||||
type Value = string | string[] | number | number[] | null;
|
||||
|
||||
export default function Table({ data, headers }: Props): JSX.Element {
|
||||
const [filters, setFilters] = useState<Record<string, Filter>>({});
|
||||
const filtersKey = useRef(crypto.randomUUID());
|
||||
|
||||
const filteredItems = useMemo(() => {
|
||||
return data.filter((item) => {
|
||||
|
|
@ -86,49 +89,31 @@ export default function Table({ data, headers }: Props): JSX.Element {
|
|||
}
|
||||
|
||||
function formatFilter(header: Header): JSX.Element {
|
||||
const baseProps = {
|
||||
key: header.key + filtersKey.current,
|
||||
keyData: header.key,
|
||||
value: filters[header.key]?.value,
|
||||
onChange: (value: Value) => {
|
||||
handleUpdateFilters(header.key, header.type, value);
|
||||
},
|
||||
};
|
||||
|
||||
switch (header.type) {
|
||||
case HeaderType.String:
|
||||
return (
|
||||
<input
|
||||
onChange={(e) => {
|
||||
handleUpdateFilters(
|
||||
header.key,
|
||||
header.type,
|
||||
e.target.value ?? null,
|
||||
);
|
||||
baseProps.onChange(e.target.value);
|
||||
}}
|
||||
key={baseProps.key}
|
||||
/>
|
||||
);
|
||||
case HeaderType.Number:
|
||||
return (
|
||||
<NumberInput
|
||||
keyData={header.key}
|
||||
onChange={(value) => {
|
||||
handleUpdateFilters(header.key, header.type, value);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
return <NumberInput {...baseProps} />;
|
||||
case HeaderType.Select:
|
||||
return (
|
||||
<SelectFilter
|
||||
data={data}
|
||||
keyData={header.key}
|
||||
onChange={(value) => {
|
||||
handleUpdateFilters(header.key, header.type, value);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
return <SelectFilter data={data} {...baseProps} />;
|
||||
case HeaderType.Multiple:
|
||||
return (
|
||||
<SelectFilter
|
||||
isMultiple
|
||||
data={data}
|
||||
keyData={header.key}
|
||||
onChange={(value) => {
|
||||
handleUpdateFilters(header.key, header.type, value);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
return <SelectFilter {...baseProps} isMultiple data={data} />;
|
||||
|
||||
default:
|
||||
break;
|
||||
|
|
@ -139,32 +124,47 @@ export default function Table({ data, headers }: Props): JSX.Element {
|
|||
|
||||
return (
|
||||
<>
|
||||
<table style={{ width: '100%' }}>
|
||||
<thead>
|
||||
<tr>
|
||||
{headers.map((item, idx) => (
|
||||
<th key={idx}>
|
||||
<div className="vstack">
|
||||
{item.header}
|
||||
{formatFilter(item)}
|
||||
</div>
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<section className="hstack">
|
||||
<button
|
||||
className="ml-auto"
|
||||
onClick={() => {
|
||||
// FIXME: this clear the filters but not the value of the inputs
|
||||
setFilters({});
|
||||
filtersKey.current = crypto.randomUUID();
|
||||
}}
|
||||
>
|
||||
Clear Filters
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<tbody>
|
||||
{items.map((item, idx) => (
|
||||
<tr key={idx}>
|
||||
{headers.map((header, hidx) => (
|
||||
<td key={hidx}>{formatCell(item, header)}</td>
|
||||
<section className="mt-1 overflow-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
{headers.map((item, idx) => (
|
||||
<th key={idx}>
|
||||
<div className="vstack">
|
||||
{item.header}
|
||||
{formatFilter(item)}
|
||||
</div>
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
|
||||
<section>
|
||||
<tbody>
|
||||
{items.map((item, idx) => (
|
||||
<tr key={idx}>
|
||||
{headers.map((header, hidx) => (
|
||||
<td key={hidx}>{formatCell(item, header)}</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section className="mt-1">
|
||||
<button
|
||||
onClick={() => {
|
||||
changeOffset(Offset.First);
|
||||
|
|
|
|||
|
|
@ -20,7 +20,8 @@ const headers: Header[] = [
|
|||
{
|
||||
key: 'title',
|
||||
header: 'Title',
|
||||
formatter: (data) => `<a href="games/${data.slug}">${data.title}</a>`,
|
||||
// TODO: uncomment this when we are ready ton show a single page game.
|
||||
// formatter: (data) => `<a href="games/${data.slug}">${data.title}</a>`,
|
||||
type: HeaderType.String,
|
||||
},
|
||||
{
|
||||
|
|
@ -58,7 +59,8 @@ const headers: Header[] = [
|
|||
{
|
||||
games.map((item) => (
|
||||
<li>
|
||||
<a href={`games/${item.slug}`}>{item.title}</a>
|
||||
{/* <a href={`games/${item.slug}`}>{item.title}</a> */}
|
||||
{item.title}
|
||||
</li>
|
||||
))
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue