[TM-1011] polygon status enable comments

wri · Jan 30, 2025 · 5fc3dd9 · 5fc3dd9
1 parent 4deebec
commit 5fc3dd9
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 28 deletions.
diff --git a/src/admin/components/ResourceTabs/AuditLogTab/components/AuditLogTable.tsx b/src/admin/components/ResourceTabs/AuditLogTab/components/AuditLogTable.tsx
@@ -47,16 +47,21 @@ const AuditLogTable: FC<{
   auditLogData: { data: AuditStatusResponse[] };
   auditData?: { entity: string; entity_uuid: string };
   refresh?: () => void;
-}> = ({ auditLogData, auditData, refresh }) => {
+  fullColumns?: boolean;
+}> = ({ auditLogData, auditData, refresh, fullColumns = true }) => {
   const menuOverflowContainerRef = useRef(null);
   const route = useRouter();
   const isAdmin = route.asPath.includes("admin");
 
-  const getColumnTitles = (entity: string, isAdmin: boolean) => {
+  const getColumnTitles = (entity: string, isAdmin: boolean, fullColumns: boolean) => {
     if (entity === "site-polygon") {
-      return isAdmin
-        ? ["Date", "User", "Action", "Comments", "Attachments", ""]
-        : ["Date", "User", "Action", "Comments", "Attachments"];
+      if (fullColumns) {
+        return isAdmin
+          ? ["Date", "User", "Action", "Comments", "Attachments", ""]
+          : ["Date", "User", "Action", "Comments", "Attachments"];
+      } else {
+        return ["Date", "User", "Action"];
+      }
     } else {
       return isAdmin
         ? ["Date", "User", "Status", "Change Request", "Comments", "Attachments", ""]
@@ -66,13 +71,17 @@ const AuditLogTable: FC<{
 
   const getGridColumnSize = (entity: string, isAdmin: boolean) => {
     if (entity === "site-polygon") {
-      return isAdmin ? "grid-cols-[14%_20%_15%_27%_19%_5%]" : "grid-cols-[14%_20%_15%_30%_21%]";
+      if (fullColumns) {
+        return isAdmin ? "grid-cols-[14%_20%_15%_27%_19%_5%]" : "grid-cols-[14%_20%_15%_30%_21%]";
+      } else {
+        return "grid-cols-[20%_20%_40%]";
+      }
     } else {
       return isAdmin ? "grid-cols-[14%_10%_10%_15%_27%_19%_5%]" : "grid-cols-[14%_10%_10%_15%_30%_21%]";
     }
   };
 
-  const columnTitles = getColumnTitles(auditData?.entity as string, isAdmin);
+  const columnTitles = getColumnTitles(auditData?.entity as string, isAdmin, fullColumns);
   const gridColumnSize = getGridColumnSize(auditData?.entity as string, isAdmin);
 
   const { openNotification } = useNotificationContext();
@@ -116,7 +125,7 @@ const AuditLogTable: FC<{
             <Text variant="text-12" className="border-b border-b-grey-750 py-2 pr-2">
               {generateUserName(item.first_name, item.last_name)}
             </Text>
-            <When condition={auditData?.entity !== "site-polygon"}>
+            <When condition={auditData?.entity !== "site-polygon" && !fullColumns}>
               <Text variant="text-12" className="border-b border-b-grey-750 py-2 pr-2">
                 {formattedTextStatus(item.status as string) ?? "-"}
               </Text>
@@ -127,25 +136,29 @@ const AuditLogTable: FC<{
                 auditData?.entity
               )}
             </Text>
-            <Text variant="text-12" className="border-b border-b-grey-750 py-2">
-              {item.comment ?? "-"}
-            </Text>
-            <div className="grid max-w-full gap-2 gap-y-1 border-b border-b-grey-750 py-2">
-              {item?.attachments?.map((attachmentItem: V2FileRead) => (
-                <Text
-                  key={attachmentItem.uuid}
-                  variant="text-12-light"
-                  className="h-min w-fit max-w-full cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap rounded-xl bg-neutral-40 px-2 py-0.5"
-                  as={"span"}
-                  onClick={() => {
-                    attachmentItem.url && window.open(attachmentItem.url, "_blank");
-                  }}
-                >
-                  {attachmentItem.file_name}
-                </Text>
-              ))}
-            </div>
-            <When condition={isAdmin}>
+            <When condition={!fullColumns}>
+              <Text variant="text-12" className="border-b border-b-grey-750 py-2">
+                {item.comment ?? "-"}
+              </Text>
+            </When>
+            <When condition={!fullColumns}>
+              <div className="grid max-w-full gap-2 gap-y-1 border-b border-b-grey-750 py-2">
+                {item?.attachments?.map((attachmentItem: V2FileRead) => (
+                  <Text
+                    key={attachmentItem.uuid}
+                    variant="text-12-light"
+                    className="h-min w-fit max-w-full cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap rounded-xl bg-neutral-40 px-2 py-0.5"
+                    as={"span"}
+                    onClick={() => {
+                      attachmentItem.url && window.open(attachmentItem.url, "_blank");
+                    }}
+                  >
+                    {attachmentItem.file_name}
+                  </Text>
+                ))}
+              </div>
+            </When>
+            <When condition={isAdmin && fullColumns}>
               <div className="justify-cente flex items-center border-b border-b-grey-750 py-2">
                 <Menu
                   container={menuOverflowContainerRef.current}

diff --git a/...admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/PolygonDrawer.tsx b/...admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/PolygonDrawer.tsx
@@ -17,6 +17,8 @@ import {
   fetchGetV2SitePolygonUuidVersions,
   fetchPostV2TerrafundValidationPolygon,
   fetchPutV2ENTITYUUIDStatus,
+  GetV2AuditStatusENTITYUUIDResponse,
+  useGetV2AuditStatusENTITYUUID,
   useGetV2SitePolygonUuidVersions,
   usePostV2TerrafundClipPolygonsPolygonUuid,
   usePostV2TerrafundValidationPolygon
@@ -25,6 +27,7 @@ import { ClippedPolygonResponse, SitePolygon, SitePolygonsDataResponse } from "@
 import { parseValidationData } from "@/helpers/polygonValidation";
 import Log from "@/utils/log";
 
+import AuditLogTable from "../../../AuditLogTab/components/AuditLogTable";
 import CommentarySection from "../CommentarySection/CommentarySection";
 import StatusDisplay from "../PolygonStatus/StatusDisplay";
 import AttributeInformation from "./components/AttributeInformation";
@@ -261,6 +264,19 @@ const PolygonDrawer = ({
       openNotification("error", t("Error"), t("Cannot fix polygons: Polygon UUID is missing."));
     }
   };
+
+  const auditData = {
+    entity: "site-polygon",
+    entity_uuid: selectedPolygon?.poly_id as string
+  };
+
+  const { data: auditLogData, refetch } = useGetV2AuditStatusENTITYUUID<{ data: GetV2AuditStatusENTITYUUIDResponse }>({
+    pathParams: {
+      entity: "site-polygon",
+      uuid: selectedPolygon?.uuid as string
+    }
+  });
+
   return (
     <div className="flex flex-1 flex-col gap-6 overflow-visible">
       <div>
@@ -306,7 +322,10 @@ const PolygonDrawer = ({
               showChangeRequest={false}
               checkPolygonsSite={isValidCriteriaData(criteriaValidation)}
             />
-            <CommentarySection record={selectedPolygon} entity={"Polygon"}></CommentarySection>
+            <CommentarySection record={selectedPolygon} entity={"Polygon"} refresh={refetch}></CommentarySection>
+            {auditLogData && (
+              <AuditLogTable fullColumns={false} auditLogData={auditLogData} auditData={auditData} refresh={refetch} />
+            )}
           </div>
         </Then>
         <Else>

diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons.tsx
@@ -172,6 +172,23 @@ const Polygons = (props: IPolygonProps) => {
         downloadGeoJsonPolygon(item);
       }
     },
+    {
+      id: "4",
+      render: () => (
+        <div className="flex items-center gap-2">
+          <Icon name={IconNames.COMMENT} className="h-6 w-6" />
+          <Text variant="text-12-bold">Comment</Text>
+        </div>
+      ),
+      onClick: () => {
+        setSelectedPolygon(item);
+        flyToPolygonBounds(item);
+        setPolygonFromMap({ isOpen: true, uuid: item.uuid });
+        setIsOpenPolygonDrawer(true);
+        setIsPolygonStatusOpen(false);
+        setSelectedPolygonsInCheckbox([]);
+      }
+    },
     {
       id: "5",
       render: () => <div className="h-[1px] w-full bg-grey-750" />,