QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-17 21:00:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

QQQ-21 show records on process screen

Browse Source
This commit is contained in:
darin.kelkhoff
2022-07-11 11:38:46 -05:00
parent 655414a64e
commit 71dc8f6ef9
4 changed files with 283 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/qqq/pages/entity-list/index.tsx
View File

@ -24,7 +24,15 @@ import MenuItem from "@mui/material/MenuItem";
import Divider from "@mui/material/Divider";
import Link from "@mui/material/Link";
import { makeStyles } from "@mui/material";
import { DataGrid, GridColDef, GridRowParams, GridRowsProp } from "@mui/x-data-grid";
import {
DataGrid,
GridCallbackDetails,
GridColDef,
GridRowId,
GridRowParams,
GridRowsProp,
GridSelectionModel,
} from "@mui/x-data-grid";
// Material Dashboard 2 PRO React TS components
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
@ -39,6 +47,7 @@ import { QTableMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/
import { useParams } from "react-router-dom";
import QClient from "qqq/utils/QClient";
import Footer from "../../components/Footer";
import QProcessUtils from "../../utils/QProcessUtils";
// Declaring props types for DefaultCell
interface Props {
@ -56,6 +65,7 @@ function EntityList({ table }: Props): JSX.Element {
const [pageNumber, setPageNumber] = useState(0);
const [totalRecords, setTotalRecords] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(10);
const [selectedIds, setSelectedIds] = useState([] as string[]);
const [columns, setColumns] = useState([] as GridColDef[]);
const [rows, setRows] = useState([] as GridRowsProp[]);
const [loading, setLoading] = useState(true);
@ -117,26 +127,33 @@ function EntityList({ table }: Props): JSX.Element {
document.location.href = `/${tableName}/${params.id}`;
};
const selectionChanged = (selectionModel: GridSelectionModel, details: GridCallbackDetails) => {
const newSelectedIds: string[] = [];
selectionModel.forEach((value: GridRowId) => {
newSelectedIds.push(value as string);
});
setSelectedIds(newSelectedIds);
};
if (tableName !== tableState) {
(async () => {
setTableState(tableName);
const metaData = await QClient.loadMetaData();
const matchingProcesses: QProcessMetaData[] = [];
const processKeys = [...metaData.processes.keys()];
processKeys.forEach((key) => {
const process = metaData.processes.get(key);
if (process.tableName === tableName) {
matchingProcesses.push(process);
}
});
setTableProcesses(matchingProcesses);
setTableProcesses(QProcessUtils.getProcessesForTable(metaData, tableName));
// reset rows to trigger rerender
setRows([]);
})();
}
function getRecordsQueryString() {
if (selectedIds.length > 0) {
return `?recordsParam=recordIds&recordIds=${selectedIds.join(",")}`;
}
return "";
}
const renderActionsMenu = (
<Menu
anchorEl={actionsMenu}
@ -148,7 +165,7 @@ function EntityList({ table }: Props): JSX.Element {
>
{tableProcesses.map((process) => (
<MenuItem key={process.name}>
<Link href={`/processes/${process.name}`}>{process.label}</Link>
<Link href={`/processes/${process.name}${getRecordsQueryString()}`}>{process.label}</Link>
</MenuItem>
))}
</Menu>
@ -237,6 +254,7 @@ function EntityList({ table }: Props): JSX.Element {
paginationMode="server"
density="compact"
loading={loading}
onSelectionModelChange={selectionChanged}
/>
</MDBox>
</Card>

49
src/qqq/pages/entity-view/components/ViewContents/index.tsx
View File

@ -30,11 +30,16 @@ import Button from "@mui/material/Button";
// qqq imports
import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
import { QProcessMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import Icon from "@mui/material/Icon";
import MDButton from "../../../../../components/MDButton";
import QProcessUtils from "../../../../utils/QProcessUtils";
const qController = new QController("");
@ -50,8 +55,13 @@ function ViewContents({ id }: Props): JSX.Element {
const [nameValues, setNameValues] = useState([] as JSX.Element[]);
const [open, setOpen] = useState(false);
const [tableMetaData, setTableMetaData] = useState(null);
const [tableProcesses, setTableProcesses] = useState([] as QProcessMetaData[]);
const [actionsMenu, setActionsMenu] = useState(null);
const [, forceUpdate] = useReducer((x) => x + 1, 0);
const openActionsMenu = (event: any) => setActionsMenu(event.currentTarget);
const closeActionsMenu = () => setActionsMenu(null);
if (!asyncLoadInited) {
setAsyncLoadInited(true);
@ -59,6 +69,9 @@ function ViewContents({ id }: Props): JSX.Element {
const tableMetaData = await qController.loadTableMetaData(tableName);
setTableMetaData(tableMetaData);
const metaData = await qController.loadMetaData();
setTableProcesses(QProcessUtils.getProcessesForTable(metaData, tableName));
const foundRecord = await qController.get(tableName, id);
nameValues.push(
@ -112,12 +125,42 @@ function ViewContents({ id }: Props): JSX.Element {
const editPath = `/${tableName}/${id}/edit`;
const renderActionsMenu = (
<Menu
anchorEl={actionsMenu}
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
transformOrigin={{ vertical: "top", horizontal: "left" }}
open={Boolean(actionsMenu)}
onClose={closeActionsMenu}
keepMounted
>
{tableProcesses.map((process) => (
<MenuItem key={process.name}>
<Link href={`/processes/${process.name}?recordIds=${id}`}>{process.label}</Link>
</MenuItem>
))}
</Menu>
);
return (
<Card id="basic-info" sx={{ overflow: "visible" }}>
<MDBox p={3}>
<MDTypography variant="h5">
Viewing {tableMetaData?.label} ({id})
</MDTypography>
<MDBox display="flex" justifyContent="space-between">
<MDTypography variant="h5">
Viewing {tableMetaData?.label} ({id})
</MDTypography>
{tableProcesses.length > 0 && (
<MDButton
variant={actionsMenu ? "contained" : "outlined"}
color="dark"
onClick={openActionsMenu}
>
actions&nbsp;
<Icon>keyboard_arrow_down</Icon>
</MDButton>
)}
{renderActionsMenu}
</MDBox>
</MDBox>
<MDBox p={3}>{nameValues}</MDBox>
<MDBox component="form" pb={3} px={3}>

195
src/qqq/pages/process-run/index.tsx
View File

@ -37,13 +37,15 @@ import Footer from "examples/Footer";
// ProcessRun layout schemas for form and form fields
import * as Yup from "yup";
import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
import { QFieldMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
import { QFrontendStepMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
import { useParams } from "react-router-dom";
import { useLocation, useParams } from "react-router-dom";
import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
import { QJobStarted } from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobStarted";
import { QJobComplete } from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
import { QJobError } from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
import { QJobRunning } from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobRunning";
import { DataGrid, GridColDef, GridRowParams, GridRowsProp } from "@mui/x-data-grid";
import QDynamicForm from "../../components/QDynamicForm";
import MDTypography from "../../../components/MDTypography";
@ -51,16 +53,13 @@ function getDynamicStepContent(
stepIndex: number,
step: any,
formData: any,
processError: string
processError: string,
processValues: any,
recordConfig: any
): JSX.Element {
const { formFields, values, errors, touched } = formData;
// console.log(`in getDynamicStepContent: step label ${step?.label}`);
if (!Object.keys(formFields).length) {
// console.log("in getDynamicStepContent. No fields yet, so returning 'loading'");
return <div>Loading...</div>;
}
if (processError) {
return (
<>
@ -72,7 +71,51 @@ function getDynamicStepContent(
);
}
return <QDynamicForm formData={formData} formLabel={step.label} />;
if (!Object.keys(formFields).length) {
// console.log("in getDynamicStepContent. No fields yet, so returning 'loading'");
return <div>Loading...</div>;
}
console.log(`in getDynamicStepContent. the step looks like: ${JSON.stringify(step)}`);
return (
<>
{step.formFields && <QDynamicForm formData={formData} formLabel={step.label} />}
{step.viewFields && (
<div>
{step.viewFields.map((field: QFieldMetaData) => (
<div key={field.name}>
<b>{field.label}:</b> {processValues[field.name]}
</div>
))}
</div>
)}
{step.recordListFields && (
<div>
<b>Records:</b> <br />
<MDBox height="100%">
<DataGrid
page={recordConfig.pageNo}
disableSelectionOnClick
autoHeight
rows={recordConfig.rows}
columns={recordConfig.columns}
rowBuffer={10}
rowCount={recordConfig.totalRecords}
pageSize={recordConfig.rowsPerPage}
rowsPerPageOptions={[10, 25, 50]}
onPageSizeChange={recordConfig.handleRowsPerPageChange}
onPageChange={recordConfig.handlePageChange}
onRowClick={recordConfig.handleRowClick}
paginationMode="server"
density="compact"
loading={recordConfig.loading}
/>
</MDBox>
</div>
)}
</>
);
}
function trace(name: string, isComponent: boolean = false) {
@ -104,12 +147,17 @@ function ProcessRun(): JSX.Element {
const [initialValues, setInitialValues] = useState({});
const [validations, setValidations] = useState({});
const [needToCheckJobStatus, setNeedToCheckJobStatus] = useState(false);
const [needRecords, setNeedRecords] = useState(false);
const [processError, setProcessError] = useState(null as string);
const [recordConfig, setRecordConfig] = useState({} as any);
const onLastStep = activeStepIndex === steps.length - 2;
const noMoreSteps = activeStepIndex === steps.length - 1;
trace("ProcessRun", true);
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// handle moving to another step in the process - e.g., after the backend told us what screen to show next. //
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
useEffect(() => {
trace("updateActiveStep");
@ -141,23 +189,79 @@ function ProcessRun(): JSX.Element {
setActiveStep(activeStep);
setFormId(activeStep.name);
const initialValues: any = {};
activeStep.formFields.forEach((field) => {
initialValues[field.name] = processValues[field.name];
});
///////////////////////////////////////////////////
// if this step has form fields, set up the form //
///////////////////////////////////////////////////
if (activeStep.formFields) {
const { dynamicFormFields, formValidations } = DynamicFormUtils.getFormData(
activeStep.formFields
);
const { dynamicFormFields, formValidations } = DynamicFormUtils.getFormData(
activeStep.formFields
);
const initialValues: any = {};
activeStep.formFields.forEach((field) => {
initialValues[field.name] = processValues[field.name];
});
setFormFields(dynamicFormFields);
setInitialValues(initialValues);
setValidations(Yup.object().shape(formValidations));
}
if (activeStep.recordListFields) {
const newRecordConfig = {} as any;
newRecordConfig.pageNo = 1;
newRecordConfig.rowsPerPage = 20;
newRecordConfig.columns = [] as GridColDef[];
newRecordConfig.rows = [];
newRecordConfig.totalRecords = 0;
newRecordConfig.handleRowsPerPageChange = null;
newRecordConfig.handlePageChange = null;
newRecordConfig.handleRowClick = null;
newRecordConfig.loading = true;
activeStep.recordListFields.forEach((field) => {
newRecordConfig.columns.push({ field: field.name, headerName: field.label });
});
setRecordConfig(newRecordConfig);
setNeedRecords(true);
}
setFormFields(dynamicFormFields);
setInitialValues(initialValues);
setValidations(Yup.object().shape(formValidations));
// console.log(`in updateActiveStep: formFields ${JSON.stringify(dynamicFormFields)}`);
// console.log(`in updateActiveStep: initialValues ${JSON.stringify(initialValues)}`);
}
}, [newStep]);
useEffect(() => {
if (needRecords) {
setNeedRecords(false);
(async () => {
const records = await qController.processRecords(
processName,
processUUID,
recordConfig.rowsPerPage * (recordConfig.pageNo - 1),
recordConfig.rowsPerPage
);
recordConfig.loading = false;
recordConfig.rows = [];
let rowId = 0;
records.forEach((record) => {
const row = Object.fromEntries(record.values.entries());
if (!row.id) {
row.id = ++rowId;
}
recordConfig.rows.push(row);
});
// todo count?
recordConfig.totalRecords = records.length;
setRecordConfig(recordConfig);
})();
}
}, [needRecords]);
//////////////////////////////////////////////////////////////////////////////////////////////////////////
// handle a response from the server - e.g., after starting a backend job, or getting its status/result //
//////////////////////////////////////////////////////////////////////////////////////////////////////////
useEffect(() => {
if (lastProcessResponse) {
trace("handleProcessResponse");
@ -183,53 +287,82 @@ function ProcessRun(): JSX.Element {
}
}, [lastProcessResponse]);
/////////////////////////////////////////////////////////////////////////
// while a backend async job is running, periodically check its status //
/////////////////////////////////////////////////////////////////////////
useEffect(() => {
if (needToCheckJobStatus) {
trace("checkJobStatus");
setNeedToCheckJobStatus(false);
(async () => {
const processResponse = await qController.processJobStatus(
processName,
processUUID,
jobUUID
);
setLastProcessResponse(processResponse);
setTimeout(async () => {
const processResponse = await qController.processJobStatus(
processName,
processUUID,
jobUUID
);
setLastProcessResponse(processResponse);
}, 1500);
})();
}
}, [needToCheckJobStatus]);
//////////////////////////////////////////////////////////////////////////////////////////
// do the initial load of data for the process - that is, meta data, plus the init step //
//////////////////////////////////////////////////////////////////////////////////////////
if (needInitialLoad) {
trace("initialLoad");
setNeedInitialLoad(false);
(async () => {
const { search } = useLocation();
const urlSearchParams = new URLSearchParams(search);
let queryStringForInit = null;
if (urlSearchParams.get("recordIds")) {
queryStringForInit = `recordsParam=recordIds&recordIds=${urlSearchParams.get("recordIds")}`;
} else if (urlSearchParams.get("filterJSON")) {
queryStringForInit = `recordsParam=filterJSON&filterJSON=${urlSearchParams.get(
"filterJSON"
)}`;
}
// todo once saved filters exist
//else if(urlSearchParams.get("filterId")) {
// queryStringForInit = `recordsParam=filterId&filterId=${urlSearchParams.get("filterId")}`
// }
console.log(`@dk: Query String for init: ${queryStringForInit}`);
const processMetaData = await qController.loadProcessMetaData(processName);
// console.log(processMetaData);
setProcessMetaData(processMetaData);
setSteps(processMetaData.frontendSteps);
const processResponse = await qController.processInit(processName);
const processResponse = await qController.processInit(processName, queryStringForInit);
setProcessUUID(processResponse.processUUID);
setLastProcessResponse(processResponse);
// console.log(processResponse);
})();
}
//////////////////////////////////////////////////////////////////////////////////////////////////////
// handle the back button - todo - not really done at all //
// e.g., qqq needs to say when back is or isn't allowed, and we need to hit the backend upon backs. //
//////////////////////////////////////////////////////////////////////////////////////////////////////
const handleBack = () => {
trace("handleBack");
setNewStep(activeStepIndex - 1);
};
//////////////////////////////////////////////////////////////////////////////////////////
// handle user submitting the form - which in qqq means moving forward from any screen. //
//////////////////////////////////////////////////////////////////////////////////////////
const handleSubmit = async (values: any, actions: any) => {
trace("handleSubmit");
// eslint-disable-next-line no-alert
// alert(JSON.stringify(values, null, 2));
// todo - post?
let queryString = "";
Object.keys(values).forEach((key) => {
queryString += `${key}=${encodeURIComponent(values[key])}&`;
});
// eslint-disable-next-line no-alert
// alert(queryString);
actions.setSubmitting(false);
actions.resetForm();
@ -281,7 +414,9 @@ function ProcessRun(): JSX.Element {
formFields,
errors,
},
processError
processError,
processValues,
recordConfig
)}
{/********************************
** back &| next/submit buttons **

43
src/qqq/utils/QProcessUtils.ts Normal file
View File

@ -0,0 +1,43 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2022. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import { QProcessMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
import { QInstance } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
/*******************************************************************************
** Utility class for working with QQQ Processes
**
*******************************************************************************/
class QProcessUtils {
public static getProcessesForTable(metaData: QInstance, tableName: string): QProcessMetaData[] {
const matchingProcesses: QProcessMetaData[] = [];
const processKeys = [...metaData.processes.keys()];
processKeys.forEach((key) => {
const process = metaData.processes.get(key);
if (process.tableName === tableName) {
matchingProcesses.push(process);
}
});
return matchingProcesses;
}
}
export default QProcessUtils;