Feat: ORV2-1930 Create Company Button on Empty Search Results (#1174)

bcgov · Feb 12, 2024 · 951a5bd · 951a5bd
1 parent c43fa89
commit 951a5bd
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 4 deletions.
diff --git a/frontend/public/Create_Company_Graphic.png b/frontend/public/Create_Company_Graphic.png
diff --git a/frontend/src/common/components/table/NoRecordsFound.tsx b/frontend/src/common/components/table/NoRecordsFound.tsx
@@ -7,7 +7,7 @@ export const NoRecordsFound = memo(() => {
     <div className="no-records-found">
       <div className="no-records-found__section no-records-found__section--img">
         <img
-          src="No_Data_Graphic.svg"
+          src="/No_Data_Graphic.svg"
           className="no-records-found__img"
           alt="No Data Graphic"
         />

diff --git a/frontend/src/features/idir/search/components/IDIRCompanySearchResults.scss b/frontend/src/features/idir/search/components/IDIRCompanySearchResults.scss
@@ -1,6 +1,7 @@
+@use "../../../../themes/orbcStyles";
 @use "../../../../common/components/table/Table";
 
-.idir-search-results {
+.idir-company-search-results {
   &#{&} {
     margin-top: 0;
     padding-bottom: 12.5rem;
@@ -11,10 +12,33 @@
       min-width: 0;
       max-width: 3rem;
     }
+
+    .create-company-btn {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+    }
+
   }
 
   & &__row-actions {
     padding: 0;
     max-width: 3rem;
   }
+
+  .create-company-img {
+    width: 6rem;
+  }
+
+  .button-outline {
+    border: orbcStyles.$bc-border-grey 1px solid;
+    border-radius: 0.5rem;
+    padding: 2rem 4rem;
+
+    &:hover {
+      background-color: orbcStyles.$bc-background-blue-grey;
+      text-decoration: none;
+    }
+  }
 }
diff --git a/frontend/src/features/idir/search/components/IDIRCompanySearchResults.tsx b/frontend/src/features/idir/search/components/IDIRCompanySearchResults.tsx
@@ -20,6 +20,8 @@ import { CompanySearchResultColumnDef } from "../table/CompanySearchResultColumn
 import { SearchFields } from "../types/types";
 import "./IDIRCompanySearchResults.scss";
 import { CustomNavLink } from "../../../../common/components/links/CustomNavLink";
+import { NoRecordsFound } from "../../../../common/components/table/NoRecordsFound";
+import { Box, CardMedia, Stack, Typography } from "@mui/material";
 
 /*
  *
@@ -153,8 +155,35 @@ export const IDIRCompanySearchResults = memo(
     });
 
     return (
-      <div className="table-container idir-search-results">
-        <MaterialReactTable table={table} />
+      <div className="table-container idir-company-search-results">
+        {data?.items?.length !== 0 && <MaterialReactTable table={table} />}
+        {data?.items?.length === 0 &&
+          <>
+            <Stack style={{ width: "900px" }} spacing={2}>
+              <NoRecordsFound />
+              <Box
+                className="create-company-btn"
+              >
+                <CustomNavLink to={routes.IDIR_ROUTES.CREATE_COMPANY}>
+                  <div className="button-outline">
+                    <CardMedia
+                      className="create-company-img"
+                      component="img"
+                      src="/Create_Company_Graphic.png"
+                      alt="Create Company"
+                      title="Create Company"
+                    />
+                    <Typography
+                      variant={"h3"}
+                    >
+                      Create<br />Company
+                    </Typography>
+                  </div>
+                </CustomNavLink>
+              </Box>
+            </Stack>
+          </>
+        }
       </div>
     );
   },