SPRINT-12: fixed space before field values, fixed anchors on view record screen

2025-07-18 05:10:45 +00:00 · 2022-10-07 15:26:47 -05:00
parent 60d440db09
commit 0e6c20d6d6
6 changed files with 196 additions and 102 deletions
--- a/src/qqq/components/DashboardWidgets.tsx
+++ b/src/qqq/components/DashboardWidgets.tsx
@ -91,7 +91,7 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey}: Props): JSX.El
   useEffect(() =>
   {
      setWidgetData([] as any[]);
-   }, [location]);
+   }, [location.pathname]);

   const handleDropdownOnChange = (value: string, index: number) =>
   {
@ -110,7 +110,7 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey}: Props): JSX.El
         <Grid container spacing={3} pb={4}>
            {
               widgetMetaDataList.map((widgetMetaData, i) => (
-                  <Grid key={`${i}`} item lg={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12} sx={{display: "flex", alignItems: "stretch"}}>
+                  <Grid id={widgetMetaData.name} key={`${i}`} item lg={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12} sx={{display: "flex", alignItems: "stretch", scrollMarginTop: "100px"}}>
                     {
                        widgetMetaData.type === "table" && (
                           <MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
--- a/src/qqq/components/QRecordSidebar/index.tsx
+++ b/src/qqq/components/QRecordSidebar/index.tsx
@ -26,6 +26,7 @@ import Card from "@mui/material/Card";
 import Icon from "@mui/material/Icon";
 import {Theme} from "@mui/material/styles";
 import React from "react";
+import {HashLink} from "react-router-hash-link";
 import MDBox from "qqq/components/Temporary/MDBox";
 import MDTypography from "qqq/components/Temporary/MDTypography";

@ -69,35 +70,38 @@ function QRecordSidebar({tableSections, widgetMetaDataList, light}: Props): JSX.
            {
               sidebarEntries ? sidebarEntries.map((entry: SidebarEntry, key: number) => (

-                  <MDBox key={`section-${entry.name}`} component="li" pt={key === 0 ? 0 : 1}>
-                     <MDTypography
-                        component="a"
-                        href={`#${entry.name}`}
-                        variant="button"
-                        fontWeight="regular"
-                        sx={({
-                           borders: {borderRadius}, functions: {pxToRem}, palette: {light}, transitions,
-                        }: Theme) => ({
-                           display: "flex",
-                           alignItems: "center",
-                           borderRadius: borderRadius.md,
-                           padding: `${pxToRem(10)} ${pxToRem(16)}`,
-                           transition: transitions.create("background-color", {
-                              easing: transitions.easing.easeInOut,
-                              duration: transitions.duration.shorter,
-                           }),
+                  <HashLink key={`section-link-${entry.name}`} to={`#${entry.name}`}>
+                     <MDBox key={`section-${entry.name}`} component="li" pt={key === 0 ? 0 : 1}>
+                        <MDTypography
+                           variant="button"
+                           fontWeight="regular"
+                           sx={({
+                              borders: {borderRadius}, functions: {pxToRem}, palette: {light}, transitions,
+                           }: Theme) => ({
+                              display: "flex",
+                              alignItems: "center",
+                              borderRadius: borderRadius.md,
+                              padding: `${pxToRem(10)} ${pxToRem(16)}`,
+                              transition: transitions.create("background-color", {
+                                 easing: transitions.easing.easeInOut,
+                                 duration: transitions.duration.shorter,
+                              }),

-                           "&:hover": {
-                              backgroundColor: light.main,
-                           },
-                        })}
-                     >
-                        <MDBox mr={1.5} lineHeight={1} color="black">
-                           <Icon fontSize="small">{entry.iconName}</Icon>
-                        </MDBox>
-                        {entry.label}
-                     </MDTypography>
-                  </MDBox>
+                              "&:hover": {
+                                 backgroundColor: light.main,
+                              },
+                           })}
+                        >
+                           <MDBox mr={1.5} lineHeight={1} color="black">
+                              <Icon fontSize="small">{entry.iconName}</Icon>
+                           </MDBox>
+                           <MDBox mr={1.5} lineHeight={1} color="black">
+                              {entry.label}
+                           </MDBox>
+
+                        </MDTypography>
+                     </MDBox>
+                  </HashLink>
               )) : null
            }
         </MDBox>
--- a/src/qqq/pages/entity-view/components/ViewContents/index.tsx
+++ b/src/qqq/pages/entity-view/components/ViewContents/index.tsx
@ -63,7 +63,7 @@ interface Props
 {
   id: string;
   table?: QTableMetaData;
-   launchProcess?: QProcessMetaData
+   launchProcess?: QProcessMetaData;
 }

 ViewContents.defaultProps = {
@ -95,7 +95,7 @@ function ViewContents({id, table, launchProcess}: Props): JSX.Element
   const [notFoundMessage, setNotFoundMessage] = useState(null);
   const [searchParams] = useSearchParams();
   const {setPageHeader} = useContext(QContext);
-   const [activeModalProcess, setActiveModalProcess] = useState(null as QProcessMetaData)
+   const [activeModalProcess, setActiveModalProcess] = useState(null as QProcessMetaData);
   const [, forceUpdate] = useReducer((x) => x + 1, 0);

   const [launchingProcess, setLaunchingProcess] = useState(launchProcess);
@ -128,11 +128,11 @@ function ViewContents({id, table, launchProcess}: Props): JSX.Element
         // the path for a process looks like: .../table/id/process     //
         // so if our tableName is in the -3 index, try to open process //
         /////////////////////////////////////////////////////////////////
-         if(pathParts[pathParts.length - 3] === tableName)
+         if (pathParts[pathParts.length - 3] === tableName)
         {
            const processName = pathParts[pathParts.length - 1];
            const processList = allTableProcesses.filter(p => p.name.endsWith(processName));
-            if(processList.length > 0)
+            if (processList.length > 0)
            {
               setActiveModalProcess(processList[0]);
               return;
@ -143,7 +143,7 @@ function ViewContents({id, table, launchProcess}: Props): JSX.Element
            }
         }
      }
-      catch(e)
+      catch (e)
      {
         console.log(e);
      }
@ -154,7 +154,7 @@ function ViewContents({id, table, launchProcess}: Props): JSX.Element
      reload();

      setActiveModalProcess(null);
-   }, [location]);
+   }, [location.pathname]);

   if (!asyncLoadInited)
   {
@ -177,7 +177,7 @@ function ViewContents({id, table, launchProcess}: Props): JSX.Element
         setTableProcesses(processesForTable);
         setAllTableProcesses(QProcessUtils.getProcessesForTable(metaData, tableName, true)); // these include hidden ones (e.g., to find the bulks)

-         if(launchingProcess)
+         if (launchingProcess)
         {
            setLaunchingProcess(null);
            setActiveModalProcess(launchingProcess);
@ -237,12 +237,10 @@ function ViewContents({id, table, launchProcess}: Props): JSX.Element
                  {
                     section.fieldNames.map((fieldName: string) => (
                        <MDBox key={fieldName} flexDirection="row" pr={2}>
-                           <MDTypography variant="button" fontWeight="bold">
-                              {tableMetaData.fields.get(fieldName).label}
-                              : &nbsp;
+                           <MDTypography variant="button" fontWeight="bold" pr={1}>
+                              {tableMetaData.fields.get(fieldName).label}:
                           </MDTypography>
                           <MDTypography variant="button" fontWeight="regular" color="text">
-                              &nbsp;
                              {QValueUtils.getDisplayValue(tableMetaData.fields.get(fieldName), record)}
                           </MDTypography>
                        </MDBox>
@ -343,7 +341,7 @@ function ViewContents({id, table, launchProcess}: Props): JSX.Element

   const closeModalProcess = (event: object, reason: string) =>
   {
-      if(reason === "backdropClick")
+      if (reason === "backdropClick")
      {
         return;
      }
@ -354,7 +352,7 @@ function ViewContents({id, table, launchProcess}: Props): JSX.Element
      const newPath = location.pathname.split("/");
      newPath.pop();
      navigate(newPath.join("/"));
-   }
+   };

   return (
      notFoundMessage
@ -411,7 +409,7 @@ function ViewContents({id, table, launchProcess}: Props): JSX.Element
                     iconName, label, name, fieldNames, tier,
                  }: any) => (
                     <MDBox mb={3} key={name}>
-                        <Card key={name} id={name} sx={{overflow: "visible"}}>
+                        <Card key={name} id={name} sx={{overflow: "visible", scrollMarginTop: "100px"}}>
                           <MDTypography variant="h5" p={3} pb={1}>
                              {label}
                           </MDTypography>