mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-18 05:10:45 +00:00
Make work with multiple apis (or a table in no apis)
This commit is contained in:
@ -54,10 +54,12 @@ function TableDeveloperView({table}: Props): JSX.Element
|
||||
|
||||
const tableName = table.name;
|
||||
const [asyncLoadInited, setAsyncLoadInited] = useState(false);
|
||||
const [noApis, setNoApis] = useState(null as boolean);
|
||||
const [tableMetaData, setTableMetaData] = useState(null);
|
||||
const [metaData, setMetaData] = useState(null as QInstance);
|
||||
const [supportedApis, setSupportedApis] = useState([] as any)
|
||||
const [supportedVersions, setSupportedVersions] = useState([] as string[]);
|
||||
const [currentVersion, setCurrentVersion] = useState(null as string);
|
||||
const [selectedApi, setSelectedApi] = useState(null as any);
|
||||
const [selectedVersion, setSelectedVersion] = useState(null as string);
|
||||
|
||||
const {setPageHeader} = useContext(QContext);
|
||||
@ -74,17 +76,6 @@ function TableDeveloperView({table}: Props): JSX.Element
|
||||
|
||||
(async () =>
|
||||
{
|
||||
const versionsResponse = await fetch("/api/versions.json");
|
||||
const versionsJson = await versionsResponse.json();
|
||||
console.log(versionsJson);
|
||||
|
||||
setSupportedVersions(versionsJson.supportedVersions);
|
||||
if (versionsJson.currentVersion)
|
||||
{
|
||||
setCurrentVersion(versionsJson.currentVersion);
|
||||
setSelectedVersion(versionsJson.currentVersion);
|
||||
}
|
||||
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
// load the full table meta-data (the one we took in is a partial) //
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
@ -99,7 +90,30 @@ function TableDeveloperView({table}: Props): JSX.Element
|
||||
|
||||
setPageHeader(tableMetaData.label + " Developer Mode");
|
||||
|
||||
// forceUpdate();
|
||||
const apisResponse = await fetch("/apis.json?tableName=" + tableName);
|
||||
const apisJson = await apisResponse.json();
|
||||
console.log(apisJson);
|
||||
|
||||
if(!apisJson["apis"] || apisJson["apis"].length == 0)
|
||||
{
|
||||
setNoApis(true);
|
||||
return;
|
||||
}
|
||||
|
||||
setSupportedApis(apisJson["apis"]);
|
||||
|
||||
const selectedApi = apisJson["apis"][0];
|
||||
setSelectedApi(selectedApi);
|
||||
|
||||
const versionsResponse = await fetch(selectedApi["path"] + "versions.json");
|
||||
const versionsJson = await versionsResponse.json();
|
||||
console.log(versionsJson);
|
||||
|
||||
setSupportedVersions(versionsJson.supportedVersions);
|
||||
if (versionsJson.currentVersion)
|
||||
{
|
||||
setSelectedVersion(versionsJson.currentVersion);
|
||||
}
|
||||
})();
|
||||
}
|
||||
|
||||
@ -108,6 +122,33 @@ function TableDeveloperView({table}: Props): JSX.Element
|
||||
e.detail.request.headers.append("Authorization", "Bearer " + accessToken);
|
||||
};
|
||||
|
||||
const selectApi = async (event: SelectChangeEvent) =>
|
||||
{
|
||||
setSelectedApi(null);
|
||||
setSelectedVersion(null);
|
||||
|
||||
const name = event.target.value;
|
||||
for(let i = 0; i < supportedApis.length; i++)
|
||||
{
|
||||
if(name == supportedApis[i].name)
|
||||
{
|
||||
const selectedApi = supportedApis[i];
|
||||
setSelectedApi(selectedApi);
|
||||
|
||||
const versionsResponse = await fetch(selectedApi["path"] + "versions.json");
|
||||
const versionsJson = await versionsResponse.json();
|
||||
console.log(versionsJson);
|
||||
|
||||
setSupportedVersions(versionsJson.supportedVersions);
|
||||
if (versionsJson.currentVersion)
|
||||
{
|
||||
setSelectedVersion(versionsJson.currentVersion);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const selectVersion = (event: SelectChangeEvent) =>
|
||||
{
|
||||
setSelectedVersion(event.target.value);
|
||||
@ -120,10 +161,27 @@ function TableDeveloperView({table}: Props): JSX.Element
|
||||
<Grid item xs={12}>
|
||||
<Box mb={3}>
|
||||
{
|
||||
accessToken && metaData && selectedVersion &&
|
||||
<Card sx={{pb: 1}}>
|
||||
<Box display="flex" alignItems="center">
|
||||
<Typography variant="h6" p={2} pl={3} pb={1}>API Docs & Playground</Typography>
|
||||
|
||||
{
|
||||
supportedApis?.length > 0 &&
|
||||
<Box display="inline-block" pl={2}>
|
||||
<Typography fontSize="0.875rem" display="inline-block" pr={0.5} position="relative" top="2px">API:</Typography>
|
||||
<Select
|
||||
native
|
||||
value={selectedApi?.name}
|
||||
onChange={selectApi}
|
||||
size="small"
|
||||
inputProps={{id: "select-native"}}>
|
||||
{supportedApis.map((api: any) => (<option key={api.name} value={api.name}>{api.label}</option>))}
|
||||
</Select>
|
||||
</Box>
|
||||
}
|
||||
|
||||
{
|
||||
supportedVersions?.length > 0 &&
|
||||
<Box display="inline-block" pl={2}>
|
||||
<Typography fontSize="0.875rem" display="inline-block" pr={0.5} position="relative" top="2px">Version:</Typography>
|
||||
<Select
|
||||
@ -131,16 +189,19 @@ function TableDeveloperView({table}: Props): JSX.Element
|
||||
value={selectedVersion}
|
||||
onChange={selectVersion}
|
||||
size="small"
|
||||
inputProps={{
|
||||
id: "select-native",
|
||||
}}
|
||||
>
|
||||
inputProps={{id: "select-native",}}>
|
||||
{supportedVersions.map((v) => (<option key={v} value={v}>{v}</option>))}
|
||||
</Select>
|
||||
</Box>
|
||||
}
|
||||
</Box>
|
||||
|
||||
{noApis == true && <Box p={3}>This table is not available in any APIs.</Box>}
|
||||
|
||||
{
|
||||
accessToken && metaData && selectedApi && selectedVersion &&
|
||||
<RapiDocReact
|
||||
spec-url={`/api/${selectedVersion}/${tableName}/openapi.json`}
|
||||
spec-url={`${selectedApi?.path}${selectedVersion}/${tableName}/openapi.json`}
|
||||
regular-font="Roboto,Helvetica,Arial,sans-serif"
|
||||
mono-font="Monaco, Menlo, Consolas, source-code-pro, monospace"
|
||||
primary-color={metaData.branding.accentColor || "blue"}
|
||||
@ -155,6 +216,7 @@ function TableDeveloperView({table}: Props): JSX.Element
|
||||
css-file={"/api/rapi-doc.css"}
|
||||
css-classes={"qqq-rapi-doc"}
|
||||
></RapiDocReact>
|
||||
}
|
||||
</Card>
|
||||
}
|
||||
</Box>
|
||||
|
@ -52,5 +52,6 @@ module.exports = function (app)
|
||||
app.use("/processes", getRequestHandler());
|
||||
app.use("/reports", getRequestHandler());
|
||||
app.use("/images", getRequestHandler());
|
||||
app.use("/api", getRequestHandler());
|
||||
app.use("/api*", getRequestHandler());
|
||||
app.use("/*api", getRequestHandler());
|
||||
};
|
||||
|
Reference in New Issue
Block a user