mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-19 08:59:11 +00:00
[ENG-1497] Save search enter key support, no duplicate queries (#1884)
prevent duplicate queries, submit pressing enter on save search
This commit is contained in:
parent
801f819cdf
commit
ec0f925f28
|
@ -148,9 +148,11 @@ export function FilterArg({ arg, onDelete }: { arg: SearchFilterArgs; onDelete?:
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
<span className="max-w-[150px] truncate">
|
||||||
{activeOptions.length > 1
|
{activeOptions.length > 1
|
||||||
? `${activeOptions.length} ${pluralize(filter.name)}`
|
? `${activeOptions.length} ${pluralize(filter.name)}`
|
||||||
: activeOptions[0]?.name}
|
: activeOptions[0]?.name}
|
||||||
|
</span>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</InteractiveSection>
|
</InteractiveSection>
|
||||||
|
|
|
@ -64,7 +64,6 @@ export function useToggleOptionSelected({ search }: { search: UseSearch }) {
|
||||||
}) => {
|
}) => {
|
||||||
search.updateDynamicFilters((dynamicFilters) => {
|
search.updateDynamicFilters((dynamicFilters) => {
|
||||||
const key = getKey({ ...option, type: filter.name });
|
const key = getKey({ ...option, type: filter.name });
|
||||||
|
|
||||||
if (search.fixedFiltersKeys?.has(key)) return dynamicFilters;
|
if (search.fixedFiltersKeys?.has(key)) return dynamicFilters;
|
||||||
|
|
||||||
const rawArg = dynamicFilters.find((arg) => filter.extract(arg));
|
const rawArg = dynamicFilters.find((arg) => filter.extract(arg));
|
||||||
|
@ -134,7 +133,12 @@ const FilterOptionList = ({
|
||||||
const FilterOptionText = ({ filter, search }: { filter: SearchFilterCRUD; search: UseSearch }) => {
|
const FilterOptionText = ({ filter, search }: { filter: SearchFilterCRUD; search: UseSearch }) => {
|
||||||
const [value, setValue] = useState('');
|
const [value, setValue] = useState('');
|
||||||
|
|
||||||
const { fixedFiltersKeys } = search;
|
const { allFiltersKeys } = search;
|
||||||
|
const key = getKey({
|
||||||
|
type: filter.name,
|
||||||
|
name: value,
|
||||||
|
value
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SearchOptionSubMenu className="!p-1.5" name={filter.name} icon={filter.icon}>
|
<SearchOptionSubMenu className="!p-1.5" name={filter.name} icon={filter.icon}>
|
||||||
|
@ -143,13 +147,7 @@ const FilterOptionText = ({ filter, search }: { filter: SearchFilterCRUD; search
|
||||||
onSubmit={(e) => {
|
onSubmit={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
search.updateDynamicFilters((dynamicFilters) => {
|
search.updateDynamicFilters((dynamicFilters) => {
|
||||||
const key = getKey({
|
if (allFiltersKeys.has(key)) return dynamicFilters;
|
||||||
type: filter.name,
|
|
||||||
name: value,
|
|
||||||
value
|
|
||||||
});
|
|
||||||
|
|
||||||
if (fixedFiltersKeys?.has(key)) return dynamicFilters;
|
|
||||||
|
|
||||||
const arg = filter.create(value);
|
const arg = filter.create(value);
|
||||||
dynamicFilters.push(arg);
|
dynamicFilters.push(arg);
|
||||||
|
@ -165,7 +163,7 @@ const FilterOptionText = ({ filter, search }: { filter: SearchFilterCRUD; search
|
||||||
onChange={(e) => setValue(e.target.value)}
|
onChange={(e) => setValue(e.target.value)}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
disabled={value.length === 0}
|
disabled={value.length === 0 || allFiltersKeys.has(key)}
|
||||||
variant="accent"
|
variant="accent"
|
||||||
className="w-full"
|
className="w-full"
|
||||||
type="submit"
|
type="submit"
|
||||||
|
|
|
@ -32,7 +32,6 @@ export * from './context';
|
||||||
|
|
||||||
// const Label = tw.span`text-ink-dull mr-2 text-xs`;
|
// const Label = tw.span`text-ink-dull mr-2 text-xs`;
|
||||||
export const OptionContainer = tw.div`flex flex-row items-center`;
|
export const OptionContainer = tw.div`flex flex-row items-center`;
|
||||||
const FiltersOverflowShade = tw.div`from-app-darkerBox/80 absolute w-10 bg-gradient-to-l to-transparent h-6`;
|
|
||||||
|
|
||||||
interface SearchOptionItemProps extends PropsWithChildren {
|
interface SearchOptionItemProps extends PropsWithChildren {
|
||||||
selected?: boolean;
|
selected?: boolean;
|
||||||
|
@ -47,7 +46,7 @@ const SearchOptionItemInternals = (props: SearchOptionItemProps) => {
|
||||||
<div className="flex w-full items-center justify-between gap-1.5">
|
<div className="flex w-full items-center justify-between gap-1.5">
|
||||||
<div className="flex items-center gap-1.5">
|
<div className="flex items-center gap-1.5">
|
||||||
<RenderIcon icon={props.icon} />
|
<RenderIcon icon={props.icon} />
|
||||||
{props.children}
|
<span className="w-fit max-w-[150px] truncate">{props.children}</span>
|
||||||
</div>
|
</div>
|
||||||
{props.selected !== undefined && <RadixCheckbox checked={props.selected} />}
|
{props.selected !== undefined && <RadixCheckbox checked={props.selected} />}
|
||||||
</div>
|
</div>
|
||||||
|
@ -250,17 +249,10 @@ function SaveSearchButton() {
|
||||||
</Button>
|
</Button>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div className="mx-1.5 my-1 flex flex-row items-center overflow-hidden">
|
<form
|
||||||
<Input
|
className="mx-1.5 my-1 flex flex-row items-center overflow-hidden"
|
||||||
value={name}
|
onSubmit={(e) => {
|
||||||
onChange={(e) => setName(e.target.value)}
|
e.preventDefault();
|
||||||
autoFocus
|
|
||||||
variant="default"
|
|
||||||
placeholder="Name"
|
|
||||||
className="w-[130px]"
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
if (!name) return;
|
if (!name) return;
|
||||||
|
|
||||||
saveSearch.mutate({
|
saveSearch.mutate({
|
||||||
|
@ -270,15 +262,27 @@ function SaveSearchButton() {
|
||||||
description: null,
|
description: null,
|
||||||
icon: null
|
icon: null
|
||||||
});
|
});
|
||||||
|
|
||||||
setName('');
|
setName('');
|
||||||
|
popover.setOpen(false);
|
||||||
}}
|
}}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
autoFocus
|
||||||
|
variant="default"
|
||||||
|
placeholder="Name"
|
||||||
|
className="w-[130px]"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
disabled={name.length === 0}
|
||||||
|
type="submit"
|
||||||
className="ml-2"
|
className="ml-2"
|
||||||
variant="accent"
|
variant="accent"
|
||||||
>
|
>
|
||||||
Save
|
Save
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</form>
|
||||||
</Popover>
|
</Popover>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue