Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@agnlez
agnlez committed Dec 11, 2023
1 parent 88b54b3 commit a3ee02f
Show file tree
Hide file tree
Showing 7 changed files with 495 additions and 239 deletions.
37 changes: 4 additions & 33 deletions app/hooks/features/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,9 +191,7 @@ export function useSelectedFeatures(
},
}).then(({ data }) => data);

console.log({ filters });

return useQuery(['selected-features', sid, filters], fetchFeatures, {
return useQuery(['selected-features', sid], fetchFeatures, {
...queryOptions,
enabled:
!!sid && ((featureColorQueryState && featureColorQueryState.status === 'success') || true),
Expand Down Expand Up @@ -272,8 +270,8 @@ export function useSelectedFeatures(
...d,
id: featureId,
name: alias || featureClassName,
// todo: remove test later
type: tag ?? 'test',
type: tag,
// type: Math.random() < 0.5 ? 'test' : 'andres',
description,
amountRange: {
min: amountMin,
Expand Down Expand Up @@ -305,34 +303,7 @@ export function useSelectedFeatures(
});
}

console.log({ tag });
if (tag) {
const fuse = new Fuse(parsedData, {
keys: ['type'],
threshold: 0.25,
});

parsedData = fuse.search(tag).map((f) => {
return f.item;
});
}
// }

console.log({ parsedData });

// Sort
if (sort) {
parsedData.sort((a, b) => {
if (sort.startsWith('-')) {
const _sort = sort.substring(1);
return b[_sort].localeCompare(a[_sort]);
}

return a[sort].localeCompare(b[sort]);
});
}

return parsedData;
return orderBy(parsedData, ['type', 'name'], ['asc', 'asc']);
},
placeholderData: { data: {} as GeoFeatureSet },
});
Expand Down
215 changes: 118 additions & 97 deletions app/layout/project/sidebar/scenario/grid-setup/features/target-spf/all-targets/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,116 +7,137 @@ const DEFAULT_INPUT_VALUES = {
spf: 1,
};

const AllTargetsSelector = (): JSX.Element => {
const INPUT_CLASSES =
'w-[55px] rounded-md border-solid border-gray-600 bg-gray-900 bg-opacity-100 px-0 py-1 text-center leading-tight';

const AllTargetsSelector = ({
onChangeAllTargets,
onChangeAllSPF,
}: {
onChangeAllTargets: (target: number) => void;
onChangeAllSPF: (spf: number) => void;
}): JSX.Element => {
const targetInputRef = useRef<HTMLInputElement>();
const spfInputRef = useRef<HTMLInputElement>();
const [values, setValues] = useState(DEFAULT_INPUT_VALUES);
// const [FPFValue, setFPFValue] = useState(fpf || defaultFPF);
// const [inputFPFValue, setInputFPFValue] = useState(String(FPFValue));

return (
<div className="grid grid-cols-4 gap-2 rounded-lg bg-gray-700 px-[10px] py-[5px] text-xs">
<div className="col-span-2">
<span className="text-white">Set target and SPF in all features:</span>
</div>
<div className="col-span-1 flex items-center space-x-2">
<span>Target</span>
<Input
className="rounded px-0 py-1 "
theme="dark"
mode="dashed"
type="number"
defaultValue={values.target}
// value={inputFPFValue}
// disabled={!editable}
onReady={(input) => {
targetInputRef.current = input;
}}
onChange={({ target: { value: inputValue } }) => {
// setInputFPFValue(inputValue);
setValues((prevValues) => ({
...prevValues,
target: Number(inputValue),
}));
}}
onBlur={() => {
// If user leaves the input empty, we'll revert to the original targetValue
if (!values.target) {
return setValues((prevValues) => ({
<div className="flex justify-between rounded-lg bg-gray-700 px-[10px] py-[5px] text-sm">
<span className="flex max-w-[115px] text-xs text-white">
Set target and SPF in all features:
</span>
<div className="flex space-x-2">
<div className="flex items-center space-x-2">
<span>Target</span>
<Input
className={INPUT_CLASSES}
theme="dark"
mode="dashed"
type="number"
min={0}
max={100}
defaultValue={values.target}
// value={inputFPFValue}
// disabled={!editable}
onReady={(input) => {
targetInputRef.current = input;
}}
onChange={({ target: { value: inputValue } }) => {
// setInputFPFValue(inputValue);
setValues((prevValues) => ({
...prevValues,
target: Number(inputValue),
}));
}}
onKeyDownCapture={(event) => {
if (event.key === 'Enter') {
onChangeAllTargets(Number(values.target));
}
}}
onBlur={() => {
// If user leaves the input empty, we'll revert to the original targetValue
if (!values.target) {
return setValues((prevValues) => ({
...prevValues,
target: DEFAULT_INPUT_VALUES.target,
}));
}
// Prevent changing all targets if user didn't actually change it
// (despite clicking on the input)
// if (FPFValue === Number(inputFPFValue)) return;
setValues((prevValues) => ({
...prevValues,
target: DEFAULT_INPUT_VALUES.target,
target: values.target,
}));
}
// Prevent changing all targets if user didn't actually change it
// (despite clicking on the input)
// if (FPFValue === Number(inputFPFValue)) return;
setValues((prevValues) => ({
...prevValues,
target: values.target,
}));
// if (onChangeFPF) onChangeFPF(Number(inputFPFValue));
}}
onKeyDown={(event) => {
if (event.key === 'Enter') {
event.preventDefault();
event.stopPropagation();
event.nativeEvent.stopImmediatePropagation();
event.nativeEvent.stopPropagation();
event.nativeEvent.preventDefault();

if (targetInputRef.current) {
targetInputRef.current.blur();
// onChangeAllTargets(Number(values.target));
}}
onKeyDown={(event) => {
if (event.key === 'Enter') {
event.preventDefault();
event.stopPropagation();
event.nativeEvent.stopImmediatePropagation();
event.nativeEvent.stopPropagation();
event.nativeEvent.preventDefault();

if (targetInputRef.current) {
targetInputRef.current.blur();
}
}
}
}}
/>
%
</div>
<div className="col-span-1 flex items-center space-x-2">
<span>SPPF</span>
<Input
className="rounded px-0 py-1 "
theme="dark"
mode="dashed"
type="number"
defaultValue={values.spf}
// value={inputFPFValue}
// disabled={!editable}
onReady={(input) => {
spfInputRef.current = input;
}}
onChange={({ target: { value: inputValue } }) => {
setValues((prevValues) => ({
...prevValues,
spf: Number(inputValue),
}));
}}
// onBlur={() => {
// // If user leaves the input empty, we'll revert to the original targetValue
// if (!inputFPFValue) {
// setInputFPFValue(String(FPFValue));
// return;
// }
// // Prevent changing all targets if user didn't actually change it
// // (despite clicking on the input)
// // if (FPFValue === Number(inputFPFValue)) return;
// setFPFValue(Number(inputFPFValue));
// if (onChangeFPF) onChangeFPF(Number(inputFPFValue));
// }}
onKeyDown={(event) => {
if (event.key === 'Enter') {
event.preventDefault();
event.stopPropagation();
event.nativeEvent.stopImmediatePropagation();
event.nativeEvent.stopPropagation();
event.nativeEvent.preventDefault();
}}
/>
<span className="text-xs">%</span>
</div>
<div className="flex items-center space-x-2">
<span>SPF</span>
<Input
className={INPUT_CLASSES}
theme="dark"
mode="dashed"
type="number"
defaultValue={values.spf}
// value={inputFPFValue}
// disabled={!editable}
onReady={(input) => {
spfInputRef.current = input;
}}
onChange={({ target: { value: inputValue } }) => {
setValues((prevValues) => ({
...prevValues,
spf: Number(inputValue),
}));

onChangeAllSPF(Number(inputValue));
}}
// onBlur={() => {
// // If user leaves the input empty, we'll revert to the original targetValue
// if (!inputFPFValue) {
// setInputFPFValue(String(FPFValue));
// return;
// }
// // Prevent changing all targets if user didn't actually change it
// // (despite clicking on the input)
// // if (FPFValue === Number(inputFPFValue)) return;
// setFPFValue(Number(inputFPFValue));
// if (onChangeFPF) onChangeFPF(Number(inputFPFValue));
// }}
onKeyDown={(event) => {
if (event.key === 'Enter') {
event.preventDefault();
event.stopPropagation();
event.nativeEvent.stopImmediatePropagation();
event.nativeEvent.stopPropagation();
event.nativeEvent.preventDefault();

if (spfInputRef.current) {
spfInputRef.current.blur();
if (spfInputRef.current) {
spfInputRef.current.blur();
}
}
}
}}
/>
}}
/>
</div>
</div>
</div>
);
Expand Down
63 changes: 63 additions & 0 deletions ...layout/project/sidebar/scenario/grid-setup/features/target-spf/bulk-action-menu/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { useCallback, useState } from 'react';

import Button from 'components/button';
import Icon from 'components/icon';
import Modal from 'components/modal/component';
import DeleteModal from 'layout/project/sidebar/project/inventory-panel/features/modals/delete';
import { Feature } from 'types/api/feature';

import DELETE_SVG from 'svgs/ui/new-layout/delete.svg?sprite';

const BUTTON_CLASSES =
'col-span-1 flex items-center space-x-2 rounded-lg bg-gray-800 px-4 text-xs text-gray-100';
const ICON_CLASSES = 'h-5 w-5 transition-colors text-gray-100 group-hover:text-gray-100';

const SplitFeaturesBulkActionMenu = ({
selectedFeatureIds,
}: {
selectedFeatureIds: Feature['id'][];
}): JSX.Element => {
const [modalState, setModalState] = useState<{ edit: boolean; delete: boolean }>({
edit: false,
delete: false,
});

const handleModal = useCallback((modalKey: keyof typeof modalState, isVisible: boolean) => {
setModalState((prevState) => ({ ...prevState, [modalKey]: isVisible }));
}, []);

return (
<>
<div className="grid w-full grid-cols-2 items-center space-x-2 rounded-xl bg-gray-600 p-1">
<span className="col-span-1 flex items-center justify-center space-x-2">
<span className="block w-[20px] rounded-[4px] bg-blue-500/25 px-1 text-center text-xs font-semibold text-blue-500">
{selectedFeatureIds.length}
</span>
<span className="text-xs text-gray-100">Selected</span>
</span>

<Button
theme="secondary"
size="base"
className={BUTTON_CLASSES}
onClick={() => handleModal('delete', true)}
>
<Icon icon={DELETE_SVG} className={ICON_CLASSES} />
<span>Delete</span>
</Button>
</div>

<Modal
id="delete-split-features-modal"
open={modalState.delete}
size="narrow"
dismissable
onDismiss={() => handleModal('delete', false)}
>
<DeleteModal selectedFeaturesIds={selectedFeatureIds} />
</Modal>
</>
);
};

export default SplitFeaturesBulkActionMenu;
Loading

0 comments on commit a3ee02f

Please sign in to comment.