[#192] Show updated_by n last update in case page

akvo · Jan 5, 2024 · 49911fd · 49911fd
1 parent 49ff453
commit 49911fd
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 15 deletions.
diff --git a/frontend/src/App.scss b/frontend/src/App.scss
@@ -332,6 +332,15 @@
       }
     }
   }
+
+  .breadcrumb-right-content {
+    position: absolute;
+    right: 0;
+    top: 20px;
+    padding-right: 5rem;
+    font-size: 13px;
+    font-family: "TabletGothic" !important;
+  }
 }
 
 .ant-popover {

diff --git a/frontend/src/components/layout/ContentLayout.js b/frontend/src/components/layout/ContentLayout.js
@@ -24,6 +24,7 @@ const ContentLayout = ({
   breadcrumbItems = [],
   title = null,
   subTitle = null,
+  breadcrumbRightContent = null,
 }) => {
   const navigate = useNavigate();
   const hasBreadcrumb = breadcrumbItems.length;
@@ -53,21 +54,28 @@ const ContentLayout = ({
       <Affix offsetTop={80} id="content-layout">
         <Card className="content-card-container" bordered={false}>
           {hasBreadcrumb ? (
-            <Breadcrumb
-              separator={<RightOutlined />}
-              items={breadcrumbItems.map((x, bi) => ({
-                key: bi,
-                title: (
-                  <Link to={x.href}>
-                    {x.title.toLowerCase() === "home" ? (
-                      <HomeOutlined style={{ fontSize: "16px" }} />
-                    ) : (
-                      x.title
-                    )}
-                  </Link>
-                ),
-              }))}
-            />
+            <div>
+              <Breadcrumb
+                separator={<RightOutlined />}
+                items={breadcrumbItems.map((x, bi) => ({
+                  key: bi,
+                  title: (
+                    <Link to={x.href}>
+                      {x.title.toLowerCase() === "home" ? (
+                        <HomeOutlined style={{ fontSize: "16px" }} />
+                      ) : (
+                        x.title
+                      )}
+                    </Link>
+                  ),
+                }))}
+              />
+              {breadcrumbRightContent && (
+                <div className="breadcrumb-right-content">
+                  {breadcrumbRightContent}
+                </div>
+              )}
+            </div>
           ) : (
             ""
           )}

diff --git a/frontend/src/pages/cases/Case.js b/frontend/src/pages/cases/Case.js
@@ -34,6 +34,12 @@ const commodityNames = masterCommodityCategories.reduce((acc, curr) => {
   return { ...acc, ...commodities };
 }, {});
 
+const options = {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+};
+
 const Case = () => {
   const { caseId } = useParams();
   const navigate = useNavigate();
@@ -360,6 +366,7 @@ const Case = () => {
       }
     }
   };
+  console.log(currentCase);
 
   return (
     <ContentLayout
@@ -368,6 +375,18 @@ const Case = () => {
         { title: "Cases", href: "/cases" },
         { title: caseTitle },
       ]}
+      breadcrumbRightContent={
+        currentCase.updated_by
+          ? `Last update by ${currentCase?.updated_by} ${
+              currentCase?.updated_at
+                ? `at ${new Date(currentCase?.updated_at).toLocaleString(
+                    "en-US",
+                    options
+                  )}`
+                : ""
+            }`
+          : null
+      }
       wrapperId="case"
     >
       {loading ? (