From 6215e58e235145ae96790c4db3d631ca900fc892 Mon Sep 17 00:00:00 2001
From: Darin Kelkhoff <darin.kelkhoff@gmail.com>
Date: Fri, 10 Feb 2023 09:56:57 -0600
Subject: [PATCH] Set min height on record query table; fix some url bugs in
 query & view; add create to action menu on view.

---
 src/qqq/pages/records/query/RecordQuery.tsx | 188 ++++++++++----------
 src/qqq/pages/records/view/RecordView.tsx   |  22 ++-
 src/qqq/styles/qqq-override-styles.css      |   5 +
 3 files changed, 119 insertions(+), 96 deletions(-)

diff --git a/src/qqq/pages/records/query/RecordQuery.tsx b/src/qqq/pages/records/query/RecordQuery.tsx
index 2780a70..ade6cc5 100644
--- a/src/qqq/pages/records/query/RecordQuery.tsx
+++ b/src/qqq/pages/records/query/RecordQuery.tsx
@@ -89,7 +89,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    const location = useLocation();
    const navigate = useNavigate();
 
-   const pathParts = location.pathname.split("/");
+   const pathParts = location.pathname.replace(/\/+$/, "").split("/");
 
    ////////////////////////////////////////////
    // look for defaults in the local storage //
@@ -995,6 +995,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                <GridToolbarExportContainer>
                   <ExportMenuItem format="csv" />
                   <ExportMenuItem format="xlsx" />
+                  <ExportMenuItem format="json" />
                </GridToolbarExportContainer>
             </div>
             <div>
@@ -1131,103 +1132,104 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
 
    return (
       <BaseLayout>
-         {/*
-         // see above code that would use this
-         <iframe id="exportIFrame" name="exportIFrame">
-            <form method="post" target="_self">
-               <input type="hidden" id="authorizationInput" name="Authorization" />
-            </form>
-         </iframe>
-         */}
-         <Box my={3}>
-            {alertContent ? (
-               <Box mb={3}>
-                  <Alert
-                     severity="error"
-                     onClose={() =>
-                     {
-                        setAlertContent(null);
-                     }}
-                  >
-                     {alertContent}
-                  </Alert>
-               </Box>
-            ) : (
-               ""
-            )}
-            {
-               (tableLabel && showSuccessfullyDeletedAlert) ? (
-                  <Alert color="success" sx={{mb: 3}} onClose={() =>
-                  {
-                     setShowSuccessfullyDeletedAlert(false);
-                  }}>
-                     {`${tableLabel} successfully deleted`}
-                  </Alert>
-               ) : null
-            }
-            <Box display="flex" justifyContent="flex-end" alignItems="flex-start" mb={2}>
-               <Box display="flex" marginRight="auto">
-                  <SavedFilters qController={qController} metaData={metaData} tableMetaData={tableMetaData} currentSavedFilter={currentSavedFilter} filterModel={filterModel} columnSortModel={columnSortModel} filterOnChangeCallback={handleSavedFilterChange}/>
-               </Box>
-
-               <Box display="flex" width="150px">
-                  <QActionsMenuButton isOpen={actionsMenu} onClickHandler={openActionsMenu} />
-                  {renderActionsMenu}
-               </Box>
+         <div className="recordQuery">
+            {/*
+            // see above code that would use this
+            <iframe id="exportIFrame" name="exportIFrame">
+               <form method="post" target="_self">
+                  <input type="hidden" id="authorizationInput" name="Authorization" />
+               </form>
+            </iframe>
+            */}
+            <Box my={3}>
+               {alertContent ? (
+                  <Box mb={3}>
+                     <Alert
+                        severity="error"
+                        onClose={() =>
+                        {
+                           setAlertContent(null);
+                        }}
+                     >
+                        {alertContent}
+                     </Alert>
+                  </Box>
+               ) : (
+                  ""
+               )}
                {
-                  table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission &&
-                  <QCreateNewButton tablePath={metaData?.getTablePathByName(tableName)} />
+                  (tableLabel && showSuccessfullyDeletedAlert) ? (
+                     <Alert color="success" sx={{mb: 3}} onClose={() =>
+                     {
+                        setShowSuccessfullyDeletedAlert(false);
+                     }}>
+                        {`${tableLabel} successfully deleted`}
+                     </Alert>
+                  ) : null
                }
+               <Box display="flex" justifyContent="flex-end" alignItems="flex-start" mb={2}>
+                  <Box display="flex" marginRight="auto">
+                     <SavedFilters qController={qController} metaData={metaData} tableMetaData={tableMetaData} currentSavedFilter={currentSavedFilter} filterModel={filterModel} columnSortModel={columnSortModel} filterOnChangeCallback={handleSavedFilterChange}/>
+                  </Box>
+
+                  <Box display="flex" width="150px">
+                     <QActionsMenuButton isOpen={actionsMenu} onClickHandler={openActionsMenu} />
+                     {renderActionsMenu}
+                  </Box>
+                  {
+                     table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission &&
+                     <QCreateNewButton tablePath={metaData?.getTablePathByName(tableName)} />
+                  }
 
-            </Box>
-            <Card>
-               <Box height="100%">
-                  <DataGridPro
-                     components={{Toolbar: CustomToolbar, Pagination: CustomPagination, LoadingOverlay: Loading}}
-                     pinnedColumns={pinnedColumns}
-                     onPinnedColumnsChange={handlePinnedColumnsChange}
-                     pagination
-                     paginationMode="server"
-                     sortingMode="server"
-                     filterMode="server"
-                     page={pageNumber}
-                     checkboxSelection
-                     disableSelectionOnClick
-                     autoHeight
-                     rows={rows}
-                     // getRowHeight={() => "auto"} // maybe nice?  wraps values in cells...
-                     columns={columnsModel}
-                     rowBuffer={10}
-                     rowCount={totalRecords === null || totalRecords === undefined ? 0 : totalRecords}
-                     onPageSizeChange={handleRowsPerPageChange}
-                     onRowClick={handleRowClick}
-                     onStateChange={handleStateChange}
-                     density={density}
-                     loading={loading}
-                     filterModel={filterModel}
-                     onFilterModelChange={handleFilterChange}
-                     columnVisibilityModel={columnVisibilityModel}
-                     onColumnVisibilityModelChange={handleColumnVisibilityChange}
-                     onColumnOrderChange={handleColumnOrderChange}
-                     onSelectionModelChange={selectionChanged}
-                     onSortModelChange={handleSortChange}
-                     sortingOrder={[ "asc", "desc" ]}
-                     sortModel={columnSortModel}
-                     getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
-                  />
                </Box>
-            </Card>
-         </Box>
-
-         {
-            activeModalProcess &&
-            <Modal open={activeModalProcess !== null} onClose={(event, reason) => closeModalProcess(event, reason)}>
-               <div className="modalProcess">
-                  <ProcessRun process={activeModalProcess} isModal={true} recordIds={recordIdsForProcess} closeModalHandler={closeModalProcess} />
-               </div>
-            </Modal>
-         }
+               <Card>
+                  <Box height="100%">
+                     <DataGridPro
+                        components={{Toolbar: CustomToolbar, Pagination: CustomPagination, LoadingOverlay: Loading}}
+                        pinnedColumns={pinnedColumns}
+                        onPinnedColumnsChange={handlePinnedColumnsChange}
+                        pagination
+                        paginationMode="server"
+                        sortingMode="server"
+                        filterMode="server"
+                        page={pageNumber}
+                        checkboxSelection
+                        disableSelectionOnClick
+                        autoHeight
+                        rows={rows}
+                        // getRowHeight={() => "auto"} // maybe nice?  wraps values in cells...
+                        columns={columnsModel}
+                        rowBuffer={10}
+                        rowCount={totalRecords === null || totalRecords === undefined ? 0 : totalRecords}
+                        onPageSizeChange={handleRowsPerPageChange}
+                        onRowClick={handleRowClick}
+                        onStateChange={handleStateChange}
+                        density={density}
+                        loading={loading}
+                        filterModel={filterModel}
+                        onFilterModelChange={handleFilterChange}
+                        columnVisibilityModel={columnVisibilityModel}
+                        onColumnVisibilityModelChange={handleColumnVisibilityChange}
+                        onColumnOrderChange={handleColumnOrderChange}
+                        onSelectionModelChange={selectionChanged}
+                        onSortModelChange={handleSortChange}
+                        sortingOrder={[ "asc", "desc" ]}
+                        sortModel={columnSortModel}
+                        getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
+                     />
+                  </Box>
+               </Card>
+            </Box>
 
+            {
+               activeModalProcess &&
+               <Modal open={activeModalProcess !== null} onClose={(event, reason) => closeModalProcess(event, reason)}>
+                  <div className="modalProcess">
+                     <ProcessRun process={activeModalProcess} isModal={true} recordIds={recordIdsForProcess} closeModalHandler={closeModalProcess} />
+                  </div>
+               </Modal>
+            }
+         </div>
       </BaseLayout>
    );
 }
diff --git a/src/qqq/pages/records/view/RecordView.tsx b/src/qqq/pages/records/view/RecordView.tsx
index 55416f5..37e3101 100644
--- a/src/qqq/pages/records/view/RecordView.tsx
+++ b/src/qqq/pages/records/view/RecordView.tsx
@@ -81,7 +81,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
    const location = useLocation();
    const navigate = useNavigate();
 
-   const pathParts = location.pathname.split("/");
+   const pathParts = location.pathname.replace(/\/+$/, "").split("/");
    const tableName = table.name;
 
    const [asyncLoadInited, setAsyncLoadInited] = useState(false);
@@ -122,6 +122,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
       setNonT1TableSections([]);
       setTableProcesses([]);
       setTableSections(null);
+      setShowAudit(false);
    };
 
    ////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -458,6 +459,14 @@ function RecordView({table, launchProcess}: Props): JSX.Element
       openModalProcess(process);
    }
 
+   let hasEditOrDelete = (table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission) || (table.capabilities.has(Capability.TABLE_DELETE) && table.deletePermission);
+
+   function gotoCreate()
+   {
+      const path = `${pathParts.slice(0, -1).join("/")}/create`;
+      navigate(path);
+   }
+
    const renderActionsMenu = (
       <Menu
          anchorEl={actionsMenu}
@@ -473,6 +482,13 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          onClose={closeActionsMenu}
          keepMounted
       >
+         {
+            table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission &&
+            <MenuItem onClick={() => gotoCreate()}>
+               <ListItemIcon><Icon>add</Icon></ListItemIcon>
+               Create New
+            </MenuItem>
+         }
          {
             table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission &&
             <MenuItem onClick={() => navigate("edit")}>
@@ -492,14 +508,14 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                Delete
             </MenuItem>
          }
-         {tableProcesses.length > 0 && ((table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission) || (table.capabilities.has(Capability.TABLE_DELETE) && table.deletePermission)) && <Divider />}
+         {tableProcesses.length > 0 && hasEditOrDelete && <Divider />}
          {tableProcesses.map((process) => (
             <MenuItem key={process.name} onClick={() => processClicked(process)}>
                <ListItemIcon><Icon>{process.iconName ?? "arrow_forward"}</Icon></ListItemIcon>
                {process.label}
             </MenuItem>
          ))}
-         {tableProcesses.length > 0 && <Divider />}
+         {(tableProcesses.length > 0 || hasEditOrDelete) && <Divider />}
          <MenuItem onClick={() => navigate("dev")}>
             <ListItemIcon><Icon>data_object</Icon></ListItemIcon>
             Developer Mode
diff --git a/src/qqq/styles/qqq-override-styles.css b/src/qqq/styles/qqq-override-styles.css
index 4cabed0..587a3ea 100644
--- a/src/qqq/styles/qqq-override-styles.css
+++ b/src/qqq/styles/qqq-override-styles.css
@@ -24,6 +24,11 @@
    white-space: normal;
 }
 
+.recordQuery .MuiDataGrid-virtualScrollerContent
+{
+   min-height: calc(100vh - 450px) !important;
+}
+
 /* Disable red outlines on clicked cells */
 .MuiDataGrid-cell:focus,
 .MuiDataGrid-columnHeader:focus,