[TM-1531] delayed job with data (#733)

* [TM-1531] sent entity * [TM-1531] add entity to fix * [TM-1531] add float notification * [TM-1531] change from attribute name to progress message * [TM-1531] fix LinearProgressBar error --------- Co-authored-by: Dotty <[email protected]> Co-authored-by: cesarLima1 <[email protected]>
wri · Dec 11, 2024 · ac65048 · ac65048
1 parent add66d3
commit ac65048
Show file tree

Hide file tree

Showing 13 changed files with 204 additions and 26 deletions.
diff --git a/src/admin/components/Alerts/DelayedJobsProgressAlert.tsx b/src/admin/components/Alerts/DelayedJobsProgressAlert.tsx
@@ -14,18 +14,18 @@ type DelayedJobsProgressAlertProps = {
 const DelayedJobsProgressAlert: FC<DelayedJobsProgressAlertProps> = ({ show, title, setIsLoadingDelayedJob }) => {
   const [delayedJobProcessing, setDelayedJobProcessing] = useState<number>(0);
   const [delayedJobTotal, setDalayedJobTotal] = useState<number>(0);
-  const [proccessMessage, setProccessMessage] = useState<string>("Running 0 out of 0 polygons (0%)");
+  const [progressMessage, setProgressMessage] = useState<string>("Running 0 out of 0 polygons (0%)");
 
   const store = useStore<AppStore>();
   useEffect(() => {
     let intervalId: any;
     if (show) {
       intervalId = setInterval(() => {
-        const { total_content, processed_content, proccess_message } = store.getState().api;
+        const { total_content, processed_content, progress_message } = store.getState().api;
         setDalayedJobTotal(total_content);
         setDelayedJobProcessing(processed_content);
-        if (proccess_message != "") {
-          setProccessMessage(proccess_message);
+        if (progress_message != "") {
+          setProgressMessage(progress_message);
         }
       }, 1000);
     }
@@ -34,7 +34,7 @@ const DelayedJobsProgressAlert: FC<DelayedJobsProgressAlertProps> = ({ show, tit
       if (intervalId) {
         setDelayedJobProcessing(0);
         setDalayedJobTotal(0);
-        setProccessMessage("Running 0 out of 0 polygons (0%)");
+        setProgressMessage("Running 0 out of 0 polygons (0%)");
         clearInterval(intervalId);
       }
     };
@@ -64,14 +64,14 @@ const DelayedJobsProgressAlert: FC<DelayedJobsProgressAlertProps> = ({ show, tit
         action={
           <button
             onClick={abortDelayedJob}
-            className="hover:bg-red-300 ml-2 rounded px-2 py-1 text-sm font-medium text-red-200"
+            className="ml-2 rounded px-2 py-1 text-sm font-medium text-red-200 hover:bg-red-300"
           >
             Cancel
           </button>
         }
       >
         <AlertTitle>{title}</AlertTitle>
-        {proccessMessage ?? "Running 0 out of 0 polygons (0%)"}
+        {progressMessage ?? "Running 0 out of 0 polygons (0%)"}
       </Alert>
     </div>
   );

diff --git a/src/assets/icons/float-notification.svg b/src/assets/icons/float-notification.svg
diff --git a/src/components/elements/Map-mapbox/MapControls/ProcessBulkPolygonsControl.tsx b/src/components/elements/Map-mapbox/MapControls/ProcessBulkPolygonsControl.tsx
@@ -116,7 +116,9 @@ const ProcessBulkPolygonsControl = ({
             fixPolygons(
               {
                 body: {
-                  uuids: selectedUUIDs
+                  uuids: selectedUUIDs,
+                  entity_uuid: entityData?.uuid,
+                  entity_type: "sites"
                 }
               },
               {
@@ -173,7 +175,9 @@ const ProcessBulkPolygonsControl = ({
     checkPolygons(
       {
         body: {
-          uuids: selectedUUIDs
+          uuids: selectedUUIDs,
+          entity_uuid: entityData?.uuid,
+          entity_type: "sites"
         }
       },
       {

diff --git a/src/components/elements/Notification/FloatNotification.tsx b/src/components/elements/Notification/FloatNotification.tsx
@@ -0,0 +1,98 @@
+import classNames from "classnames";
+import { useState } from "react";
+import { When } from "react-if";
+
+import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
+
+import LinearProgressBar from "../ProgressBar/LinearProgressBar/LinearProgressBar";
+import Text from "../Text/Text";
+
+export interface FloatNotificationDataProps {
+  label: string;
+  site: string;
+  value: string;
+}
+
+export interface FloatNotificationProps {
+  data: FloatNotificationDataProps[];
+}
+
+const FloatNotification = ({ data }: FloatNotificationProps) => {
+  const [openModalNotification, setOpenModalNotification] = useState(false);
+
+  return (
+    <div className="fixed bottom-10 right-10 z-50">
+      <div className="relative">
+        <div
+          className={classNames(
+            "absolute right-[107%] flex max-h-[80vh] w-[460px] flex-col overflow-hidden rounded-xl bg-white shadow-monitored transition-all duration-300",
+            { " bottom-[-4px] z-10  opacity-100": openModalNotification },
+            { " bottom-[-300px] -z-10  opacity-0": !openModalNotification }
+          )}
+        >
+          <Text variant="text-20-bold" className="border-b border-grey-350 p-6 text-blueCustom-900">
+            Notifications
+          </Text>
+          <div className="flex flex-col overflow-hidden px-6 pb-8 pt-6">
+            <div className="mb-2 flex items-center justify-between">
+              <Text variant="text-14-light" className="text-neutral-400">
+                Actions Taken
+              </Text>
+              <Text variant="text-12-semibold" className="text-primary">
+                Clear completed
+              </Text>
+            </div>
+            <div className="-mr-2 flex flex-1 flex-col gap-3 overflow-auto pr-2">
+              {data.map((item, index) => (
+                <div key={index} className="rounded-lg border-2 border-grey-350 bg-white p-4 hover:border-primary">
+                  <div className="mb-2 flex items-center gap-1">
+                    <div className="h-2 w-2 rounded-full bg-primary" />
+                    <Text variant="text-14-light" className="leading-[normal] text-darkCustom " as={"span"}>
+                      {item.label}
+                    </Text>
+                  </div>
+                  <Text variant="text-14-light" className="text-darkCustom">
+                    Site: <b>{item.site}</b>
+                  </Text>
+                  <div className="mt-2 flex items-center gap-2">
+                    <LinearProgressBar value={parseInt(item.value)} className="h-2 bg-success-40" color="success-600" />
+                    <Text variant="text-12-semibold" className="text-black">
+                      {item.value}
+                    </Text>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        <When condition={data.length > 0}>
+          <div className="text-14-bold absolute right-[-5px] top-[-5px] z-20 flex min-h-[24px] min-w-[24px] items-center justify-center rounded-full bg-red-300 leading-[normal] text-white">
+            {data.length}
+          </div>
+        </When>
+        <button
+          onClick={() => {
+            setOpenModalNotification(!openModalNotification);
+          }}
+          className={classNames(
+            "z-10 flex h-15 w-15 items-center justify-center rounded-full border border-grey-950 bg-primary duration-300  hover:scale-105",
+            {
+              hidden: data.length < 1,
+              visible: data.length > 0
+            }
+          )}
+        >
+          <Icon
+            name={openModalNotification ? IconNames.CLEAR : IconNames.FLOAT_NOTIFICATION}
+            className={classNames("text-white", {
+              "h-6 w-6": openModalNotification,
+              "h-8 w-8": !openModalNotification
+            })}
+          />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default FloatNotification;
diff --git a/src/components/extensive/Icon/Icon.tsx b/src/components/extensive/Icon/Icon.tsx
@@ -201,6 +201,7 @@ export enum IconNames {
   IC_NOTIFICATION = "notification",
   IC_LOADING = "loading",
   IC_INFO_WHITE_BLACK = "ic-info-white-black",
+  FLOAT_NOTIFICATION = "float-notification",
   IC_EXPAND = "ic_expand",
   IC_SHINK = "ic_shrink"
 }

diff --git a/src/context/floatNotification.provider.tsx b/src/context/floatNotification.provider.tsx
@@ -0,0 +1,44 @@
+import React, { useContext } from "react";
+
+import FloatNotification from "@/components/elements/Notification/FloatNotification";
+
+type FloatNotificationContextType = {
+  data: { label: string; site: string; value: string }[];
+  addDataFloatNotification: (data: FloatNotificationContextType["data"]) => void;
+};
+
+export const FloatNotificationContext = React.createContext<FloatNotificationContextType>({
+  data: [],
+  addDataFloatNotification: () => {}
+});
+
+type FloatNotificationProviderProps = {
+  children: React.ReactNode;
+};
+
+const FloatNotificationProvider = ({ children }: FloatNotificationProviderProps) => {
+  const [data, setData] = React.useState<FloatNotificationContextType["data"]>([]);
+
+  const addDataFloatNotification = (data: FloatNotificationContextType["data"]) => {
+    setData(data);
+  };
+
+  const value = React.useMemo(
+    () => ({
+      data,
+      addDataFloatNotification
+    }),
+    [data]
+  );
+
+  return (
+    <FloatNotificationContext.Provider value={value}>
+      {children}
+      <FloatNotification data={data} />
+    </FloatNotificationContext.Provider>
+  );
+};
+
+export const useFloatNotificationContex = () => useContext(FloatNotificationContext);
+
+export default FloatNotificationProvider;
diff --git a/src/generated/apiComponents.ts b/src/generated/apiComponents.ts
@@ -38051,6 +38051,14 @@ export type PostV2TerrafundClipPolygonsPolygonsResponse = {
 
 export type PostV2TerrafundClipPolygonsPolygonsRequestBody = {
   uuids?: string[];
+  /**
+   * The entity type of the polygon geometries to be fixed
+   */
+  entity_type?: string;
+  /**
+   * The entity ID of the polygon geometries to be fixed
+   */
+  entity_uuid?: string;
 };
 
 export type PostV2TerrafundClipPolygonsPolygonsVariables = {
@@ -38103,6 +38111,8 @@ export type PostV2TerrafundValidationPolygonsResponse = {
 
 export type PostV2TerrafundValidationPolygonsRequestBody = {
   uuids?: string[];
+  entity_uuid?: string;
+  entity_type?: string;
 };
 
 export type PostV2TerrafundValidationPolygonsVariables = {

diff --git a/src/generated/apiFetcher.ts b/src/generated/apiFetcher.ts
@@ -193,11 +193,11 @@ async function processDelayedJob<TData>(signal: AbortSignal | undefined, delayed
     jobResult = await loadJob(signal, delayedJobId)
   ) {
     //@ts-ignore
-    const { total_content, processed_content, proccess_message } = jobResult.data?.attributes;
+    const { total_content, processed_content, progress_message } = jobResult.data?.attributes;
     if (total_content != null) {
       ApiSlice.addTotalContent(total_content);
       ApiSlice.addProgressContent(processed_content);
-      ApiSlice.addProgressMessage(proccess_message);
+      ApiSlice.addProgressMessage(progress_message);
     }
 
     if (signal?.aborted || ApiSlice.apiDataStore.abort_delayed_job) throw new Error("Aborted");

diff --git a/src/generated/v3/userService/userServiceComponents.ts b/src/generated/v3/userService/userServiceComponents.ts
@@ -57,6 +57,8 @@ export const authLogin = (variables: AuthLoginVariables, signal?: AbortSignal) =
 export type UsersFindPathParams = {
   /**
    * A valid user id or "me"
+   *
+   * @example me
    */
   id: string;
 };

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -35,6 +35,8 @@ if (typeof window !== "undefined") {
   (window as any).terramatch = { environment };
 }
 
+import FloatNotificationProvider from "@/context/floatNotification.provider";
+
 import DashboardAnalyticsWrapper from "./dashboard/DashboardAnalyticsWrapper";
 
 const CookieBanner = dynamic(() => import("@/components/extensive/CookieBanner/CookieBanner"), {
@@ -92,12 +94,14 @@ const _App = ({ Component, ...rest }: AppProps) => {
       <ReduxProvider store={store}>
         <WrappedQueryClientProvider>
           <LoadingProvider>
-            <NotificationProvider>
-              <ModalProvider>
-                <ModalRoot />
-                <Component {...pageProps} />
-              </ModalProvider>
-            </NotificationProvider>
+            <FloatNotificationProvider>
+              <NotificationProvider>
+                <ModalProvider>
+                  <ModalRoot />
+                  <Component {...pageProps} />
+                </ModalProvider>
+              </NotificationProvider>
+            </FloatNotificationProvider>
           </LoadingProvider>
         </WrappedQueryClientProvider>
       </ReduxProvider>

diff --git a/src/store/apiSlice.ts b/src/store/apiSlice.ts
@@ -83,7 +83,7 @@ export type ApiDataStore = ApiResources & {
   };
   total_content: number;
   processed_content: number;
-  proccess_message: string;
+  progress_message: string;
   abort_delayed_job: boolean;
 };
 
@@ -101,7 +101,7 @@ export const INITIAL_STATE = {
   },
   total_content: 0,
   processed_content: 0,
-  proccess_message: "",
+  progress_message: "",
   abort_delayed_job: false
 } as ApiDataStore;
 
@@ -206,8 +206,8 @@ export const apiSlice = createSlice({
       state.abort_delayed_job = action.payload;
     },
 
-    setProccessMessage: (state, action: PayloadAction<string>) => {
-      state.proccess_message = action.payload;
+    setProgressMessage: (state, action: PayloadAction<string>) => {
+      state.progress_message = action.payload;
     }
   },
 
@@ -238,7 +238,7 @@ export const apiSlice = createSlice({
 
       state.total_content = payloadState.total_content ?? state.total_content;
       state.processed_content = payloadState.processed_content ?? state.processed_content;
-      state.proccess_message = payloadState.proccess_message ?? state.proccess_message;
+      state.progress_message = payloadState.progress_message ?? state.progress_message;
       state.abort_delayed_job = payloadState.abort_delayed_job ?? state.abort_delayed_job;
     });
   }
@@ -299,8 +299,8 @@ export default class ApiSlice {
     this.redux.dispatch(apiSlice.actions.setProgressContent(processed_content));
   }
 
-  static addProgressMessage(proccess_message: string) {
-    this.redux.dispatch(apiSlice.actions.setProccessMessage(proccess_message));
+  static addProgressMessage(progress_message: string) {
+    this.redux.dispatch(apiSlice.actions.setProgressMessage(progress_message));
   }
 
   static abortDelayedJob(abort_delayed_job: boolean) {

diff --git a/src/types/common.ts b/src/types/common.ts
@@ -2,7 +2,16 @@
 
 import { ReactNode } from "react";
 
-export type Colors = "white" | "black" | "neutral" | "secondary" | "tertiary" | "primary" | "success" | "error";
+export type Colors =
+  | "white"
+  | "black"
+  | "neutral"
+  | "secondary"
+  | "tertiary"
+  | "primary"
+  | "success"
+  | "error"
+  | "success-600";
 export type ColorCodes = "none" | 50 | 100 | 150 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 export type TextSizes = "xs" | "sm" | "base" | "md" | "m" | "lg";
 export type TextWeights = "regular" | "bold";

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -93,7 +93,8 @@ module.exports = {
         400: "#9EDD8F",
         300: "#C7ECC4",
         200: "#E0F3E9",
-        100: "#EFF9F4"
+        100: "#EFF9F4",
+        40: "#a9e7d6"
       },
       neutral: {
         DEFAULT: "#9B9B9B",
@@ -217,6 +218,7 @@ module.exports = {
         DEFAULT: "#FF6464",
         100: "#CBC8D2",
         200: "#E42222",
+        300: "#D33838",
         900: "#8D2D0E",
         1000: "#632424"
       }