Dynamic path pages

package.json

@@ -6,6 +6,7 @@
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^7.2.1",
     "@types/react-router-dom": "^5.1.3",
+    "@types/react-tabs": "^2.3.1",
     "ajv": "^6.12.1",
     "flat": "^5.0.0",
     "natural-orderby": "^2.0.3",
@@ -15,6 +16,7 @@
     "react-dom": "^16.12.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.3.0",
+    "react-tabs": "^3.1.0",
     "react-toastify": "^5.4.1",
     "typescript": "^3.7.4"
   },
@@ -59,4 +61,4 @@
   "devDependencies": {
     "gh-pages": "^2.2.0"
   }
-}
+}

src/assets/schemas/config.schema.json

@@ -120,6 +120,12 @@
         "methods": {
           "$ref": "#/definitions/methods"
         },
+        "subResourcePages": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/subResourcePage"
+          }
+        },
         "customActions": {
           "type": "array",
           "items": {
@@ -136,6 +142,18 @@
         "id"
       ]
     },
+    "subResourcePage": {
+      "allOf": [
+        {
+          "$ref": "#/definitions/page"
+        },
+        {
+          "properties": {
+            "parentResource": {}
+          }
+        }
+      ]
+    },
     "requestHeaders": {
       "patternProperties": {
         "^": {

src/common/models/config.model.ts

@@ -9,6 +9,7 @@ export interface IConfig {
   unauthorizedRedirectUrl: string
   requestHeaders: any
   pages: IConfigPage[]
+  resources: IConfigResourcePage[]
   customStyles?: ICustomStyles
   customLabels?: ICustomLabels
 }
@@ -75,6 +76,15 @@ export interface IConfigPage {
   customLabels: ICustomLabels
 }
 
+export interface IConfigDetailPage {
+  id: string
+  name: string
+  description: string
+  resources: IConfigResourcePage[]
+}
+
+export interface IConfigResourcePage extends IConfigPage { }
+
 export interface IConfigMethods {
   getAll: IConfigGetAllMethod
   getSingle: IConfigGetSingleMethod
@@ -149,6 +159,7 @@ export interface IConfigGetAllMethod extends IConfigMethod {
 
 export interface IConfigGetSingleMethod extends IConfigMethod {
   dataPath: string
+  detailPage: IConfigDetailPage
 }
 
 export interface IConfigPostMethod extends IConfigMethod {

src/components/app.context.ts

@@ -5,17 +5,25 @@ import HttpService from '../services/http.service';
 export interface IAppContext {
   config: IConfig | null
   activePage: IConfigPage | null
+  activeItem: any | null
+  activePathVars: {[key: string]: string}
   error: string | null
   setError: (error: string | null) => void
   setActivePage: (activePage: IConfigPage | null) => void
+  setActiveItem: (activeItem: any | null) => void
+  setActivePathVars: (activePathVars: {[key: string]: string}) => void
   httpService: HttpService
 }
 
 export const AppContext = React.createContext<IAppContext>({
   config: null,
   activePage: null,
+  activeItem: null,
+  activePathVars: {},
   error: null,
   setError: () => {},
   setActivePage: () => {},
+  setActiveItem: () => {},
+  setActivePathVars: () => {},
   httpService: new HttpService()
 });

src/components/app.tsx

@@ -4,6 +4,7 @@ import { ToastContainer, toast } from 'react-toastify';
 import ConfigService from '../services/config.service';
 import { IConfig, IConfigPage } from '../common/models/config.model';
 import { Page } from '../components/page/page.comp';
+import { DetailPage } from './detailPage/detailPage.comp';
 import { Navigation } from '../components/navigation/navigation.comp';
 import { AppContext } from './app.context';
 import HttpService from '../services/http.service';
@@ -31,7 +32,9 @@ function App() {
   const [firstLoad, setFirstLoad] = useState<boolean>(true);
   const [config, setConfig] = useState<IConfig | null>(null);
   const [activePage, setActivePage] = useState<IConfigPage | null>(config?.pages?.[0] || null);
+  const [activePathVars, setActivePathVars] = useState<{[key: string]: string}>({});
   const [error, setError] = useState<string | null>(null);
+  const [activeItem, setActiveItem] = useState<any | null>(null);
 
   async function loadConfig(url?: string): Promise<void> {
     try {
@@ -107,15 +110,23 @@ function App() {
   }, [config]);
 
   const appName: string = config?.name || defaultAppName;
-
+  const mainRoutes: string[] = config?.pages?.map(p => `/${p.id}`) || [];
+  const detailRoutes: string[] = config?.pages?.reduce((acc: string[], p) => {
+    const detailPageId = p.methods?.getSingle?.detailPage?.id;
+    if(detailPageId){
+      acc.push(`/${detailPageId}`);
+    } 
+    return acc;
+  }, []) || [];
+
   return (
     <div className="restool-app">
       {
         !config ?
         <div className="app-error">
           {firstLoad ? 'Loading Configuration...' : 'Could not find config file.'}
         </div> :
-        <AppContext.Provider value={{ config, activePage, setActivePage, error, setError, httpService }}>
+        <AppContext.Provider value={{ config, activePage, setActivePage, activePathVars, setActivePathVars, activeItem, setActiveItem, error, setError, httpService }}>
           {
             config.customStyles &&
             <CustomStyles
@@ -132,7 +143,8 @@ function App() {
             {
               config &&
               <Switch>
-                <Route exact path="/:page" component={Page} />
+                <Route exact path={mainRoutes} component={Page} />
+                <Route exact path={detailRoutes} component={DetailPage} />
                 <Redirect path="/" to={`/${config?.pages?.[0]?.id || '1'}`} />
               </Switch>
             }