WIP

Vizzuality · Dec 4, 2023 · 88b54b3 · 88b54b3
1 parent 2f17338
commit 88b54b3
Show file tree

Hide file tree

Showing 15 changed files with 997 additions and 79 deletions.
diff --git a/app/components/features/selected-item/component.tsx b/app/components/features/selected-item/component.tsx
@@ -181,7 +181,6 @@ export const Item: React.FC<ItemProps> = ({
                 ) : (
                   <HiEyeOff className="h-4 w-4" />
                 )}
-                {/* <Icon className="h-4 w-4" icon={isShown ? SHOW_SVG : HIDE_SVG} /> */}
               </button>
             </Tooltip>
 

diff --git a/app/hooks/features/index.ts b/app/hooks/features/index.ts
@@ -172,7 +172,7 @@ export function useSelectedFeatures(
   queryOptions = {}
 ) {
   const { data: session } = useSession();
-  const { search } = filters;
+  const { search, sort, tag } = filters;
 
   const queryClient = useQueryClient();
 
@@ -191,7 +191,9 @@ export function useSelectedFeatures(
       },
     }).then(({ data }) => data);
 
-  return useQuery(['selected-features', sid], fetchFeatures, {
+  console.log({ filters });
+
+  return useQuery(['selected-features', sid, filters], fetchFeatures, {
     ...queryOptions,
     enabled:
       !!sid && ((featureColorQueryState && featureColorQueryState.status === 'success') || true),
@@ -270,7 +272,8 @@ export function useSelectedFeatures(
           ...d,
           id: featureId,
           name: alias || featureClassName,
-          type: tag,
+          // todo: remove test later
+          type: tag ?? 'test',
           description,
           amountRange: {
             min: amountMin,
@@ -291,18 +294,45 @@ export function useSelectedFeatures(
         };
       });
 
-      // Filter
       if (search) {
         const fuse = new Fuse(parsedData, {
           keys: ['name'],
           threshold: 0.25,
         });
+
         parsedData = fuse.search(search).map((f) => {
           return f.item;
         });
       }
 
-      return orderBy(parsedData, ['type', 'name'], ['asc', 'asc']);
+      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;
     },
     placeholderData: { data: {} as GeoFeatureSet },
   });
@@ -314,7 +344,7 @@ export function useTargetedFeatures(
   queryOptions = {}
 ) {
   const { data: session } = useSession();
-  const { search } = filters;
+  const { search, sort } = filters;
 
   const fetchFeatures = () =>
     SCENARIOS.request({
@@ -325,10 +355,16 @@ export function useTargetedFeatures(
       },
       params: {
         disablePagination: true,
+        ...(search && {
+          q: search,
+        }),
+        ...(sort && {
+          sort,
+        }),
       },
     }).then(({ data }) => data);
 
-  return useQuery(['targeted-features', sid], fetchFeatures, {
+  return useQuery(['targeted-features', sid, filters], fetchFeatures, {
     ...queryOptions,
     retry: false,
     enabled: !!sid,
@@ -405,6 +441,11 @@ export function useTargetedFeatures(
           name: alias || featureClassName,
           type: tag,
           description,
+          // todo: missing scenarioUsageCount from API
+          scenarios: d.scenarioUsageCount,
+          // todo: missing tag from API
+          tag: d.tag,
+          isCustom: d.metadata?.isCustom,
 
           // SPLIT
           splitOptions,
@@ -429,7 +470,16 @@ export function useTargetedFeatures(
       }
 
       // Sort
-      parsedData = orderBy(parsedData, ['name'], ['desc']);
+      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]);
+        });
+      }
 
       parsedData = flatten(
         parsedData.map((s) => {
@@ -439,25 +489,27 @@ export function useTargetedFeatures(
 
           // Generate splitted features to target
           if (isSplitted) {
-            return splitFeaturesSelected
-              .sort((a, b) => a.name.localeCompare(b.name))
-              .map((sf) => {
-                const { id: sfId, name: sfName, marxanSettings: sfMarxanSettings } = sf;
-
-                return {
-                  ...sf,
-                  id: `${id}-${sfId}`,
-                  parentId: id,
-                  name: `${name} / ${sfName}`,
-                  splitted: true,
-                  splitSelected,
-                  splitFeaturesSelected,
-                  ...(!!sfMarxanSettings && {
-                    target: sfMarxanSettings.prop * 100,
-                    fpf: sfMarxanSettings.fpf,
-                  }),
-                };
-              });
+            return (
+              splitFeaturesSelected
+                // .sort((a, b) => a.name.localeCompare(b.name))
+                .map((sf) => {
+                  const { id: sfId, name: sfName, marxanSettings: sfMarxanSettings } = sf;
+
+                  return {
+                    ...sf,
+                    id: `${id}-${sfId}`,
+                    parentId: id,
+                    name: `${name} / ${sfName}`,
+                    splitted: true,
+                    splitSelected,
+                    splitFeaturesSelected,
+                    ...(!!sfMarxanSettings && {
+                      target: sfMarxanSettings.prop * 100,
+                      fpf: sfMarxanSettings.fpf,
+                    }),
+                  };
+                })
+            );
           }
 
           // if (isIntersected) {
@@ -518,11 +570,9 @@ export function useSaveSelectedFeatures({
   };
 
   return useMutation(saveFeature, {
-    onSuccess: (data, variables, context) => {
+    onSuccess: (data, variables) => {
       const { id } = variables;
       queryClient.setQueryData(['selected-features', id], { data: data?.data });
-
-      console.info('Succces', data, variables, context);
     },
     onError: (error, variables, context) => {
       // An error happened!

diff --git a/app/hooks/features/types.ts b/app/hooks/features/types.ts
@@ -2,6 +2,8 @@ import { AxiosRequestConfig } from 'axios';
 
 export interface UseFeaturesFiltersProps {
   search?: string;
+  sort?: string;
+  tag?: string;
 }
 
 export interface UseSaveSelectedFeaturesProps {

diff --git a/app/layout/project/sidebar/project/header/index.tsx b/app/layout/project/sidebar/project/header/index.tsx
@@ -45,7 +45,7 @@ const InventoryProjectHeader = (): JSX.Element => {
   );
 
   return (
-    <div className="mb-6 flex items-start justify-between">
+    <div className="flex items-start justify-between">
       <UnderModeration />
       <Title title={name} description={description} onEditTitle={onEditProjectName} />
       <div className="mt-4 flex items-center space-x-5">

diff --git a/app/layout/project/sidebar/scenario/grid-setup/features/add/add-modal/component.tsx b/app/layout/project/sidebar/scenario/grid-setup/features/add/add-modal/component.tsx
@@ -112,9 +112,10 @@ export const ScenariosFeaturesAdd = (): JSX.Element => {
           },
         },
         {
-          onSuccess: () => {
+          onSuccess: async () => {
             setOpen(false);
-            queryClient.invalidateQueries(['selected-features', sid]);
+            await queryClient.invalidateQueries(['selected-features', sid]);
+            await queryClient.invalidateQueries(['targeted-features', sid]);
           },
           onSettled: () => {
             setSubmitting(false);

diff --git a/app/layout/project/sidebar/scenario/grid-setup/features/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/features/index.tsx
@@ -1,49 +1,7 @@
-import { useRouter } from 'next/router';
-
-import { TABS } from 'layout/project/navigation/constants';
-import StepManager from 'layout/step-manager';
-
-import GridSetupFeaturesAdd from './add';
-import GridSetupFeaturesTargets from './targets';
+import GridSetupFeaturesTargets from './target-spf';
 
 export const GridSetupFeatures = (): JSX.Element => {
-  const { replace, query } = useRouter();
-  const { pid, sid, tab } = query as { pid: string; sid: string; tab: string };
-
-  return (
-    <StepManager defaultStep={tab === TABS['scenario-features-targets-spf'] ? 1 : 0}>
-      {({ currentStep, onChangeStep }) => (
-        <>
-          {currentStep === 0 && (
-            <GridSetupFeaturesAdd
-              onContinue={() => {
-                onChangeStep(1);
-                // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                replace(
-                  `/projects/${pid}/scenarios/${sid}/edit?tab=${TABS['scenario-features-targets-spf']}`,
-                  null,
-                  { shallow: true }
-                );
-              }}
-            />
-          )}
-          {currentStep === 1 && (
-            <GridSetupFeaturesTargets
-              onGoBack={() => {
-                onChangeStep(0);
-                // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                replace(
-                  `/projects/${pid}/scenarios/${sid}/edit?tab=${TABS['scenario-features']}`,
-                  null,
-                  { shallow: true }
-                );
-              }}
-            />
-          )}
-        </>
-      )}
-    </StepManager>
-  );
+  return <GridSetupFeaturesTargets />;
 };
 
 export default GridSetupFeatures;