add router and View links

frontend-frame/src/router.ts

@@ -8,56 +8,5 @@ export default new Router({
     base: process.env.BASE_URL,
     routes: [
         // SYSTE-BUILDER-routes
-
-        {
-            path: '/about',
-            name: 'about',
-            // route level code-splitting
-            // this generates a separate chunk (about.[hash].js) for this route
-            // which is lazy-loaded when the route is visited.
-            component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
-        },
-        {
-            path: '/organizations',
-            name: 'organizations',
-
-            component: () => import(/* webpackChunkName: "organizations" */ './views/Organizations.vue')
-        },
-        {
-            path: '/organization/:orgId/:tab',
-            name: 'Organization',
-
-            component: () => import(/* webpackChunkName: "organizations" */ './views/Organization.vue')
-        },
-        {
-            path: '/users/:appId',
-            name: 'Users',
-
-            component: () => import(/* webpackChunkName: "organizations" */ './views/Users.vue')
-        },
-        {
-            path: '/access/:appId',
-            name: 'Access',
-
-            component: () => import(/* webpackChunkName: "organizations" */ './views/Access.vue')
-        },
-        {
-            path: '/bandit/:appId',
-            name: 'Bandit',
-
-            component: () => import(/* webpackChunkName: "organizations" */ './views/Bandit.vue')
-        },
-        {
-            path: '/switches/:appId',
-            name: 'Switches',
-
-            component: () => import(/* webpackChunkName: "organizations" */ './views/Switches.vue')
-        },
-        {
-            path: '/createOrg',
-            name: 'organization creation',
-
-            component: () => import(/* webpackChunkName: "organizations" */ './views/CreateOrganization.vue')
-        },
     ]
 });

src/frontend-services/app-view-builder.ts

@@ -0,0 +1,29 @@
+import {ComponentDef, EndpointDef, SystemDef} from "../systemGenService";
+import path from "path";
+import fs from "fs";
+
+export function buildAppLinks(component: ComponentDef, outDir: string, systemDef: SystemDef): Promise<void> {
+    let listEndpoints: EndpointDef[] = component.endpoints.filter((epd: EndpointDef) => {
+        return epd.type === 'list';
+    });
+    if (listEndpoints.length) {
+        return new Promise<void>((resolve) => {
+            const separator: string = `<!-- SYSTEM-BUILDER-list-components-html -->`;
+            let fileLocation = path.join(process.cwd(), `frontend-${systemDef.name}`, 'src', 'App.vue');
+            let initServiceFile: string = fs.readFileSync(fileLocation, 'utf8');
+            let parts = initServiceFile.split(separator);
+            parts[0] = parts[0] + createLinksMarkup(component, systemDef);
+            let newServiceFile = parts.join(separator);
+            fs.writeFileSync(fileLocation, newServiceFile, 'utf8');
+            resolve();
+        });
+    }
+    return Promise.resolve();
+}
+
+function createLinksMarkup(component: ComponentDef, systemDef: SystemDef): string {
+    let out = `<router-link to="/${component.component}">${component.component} List</router-link>
+  `;
+
+    return out;
+}

src/frontend-services/fe-service-creator.ts

@@ -1,6 +1,12 @@
 import {ComponentDef, EndpointDef, SystemDef} from "../systemGenService";
 import path from "path";
-import {initializeComponentFile, removeTemplateFiles, removeTemplateFolder, uppercaseFirstLetter} from "../helpers";
+import {
+    componentDestination,
+    initializeComponentFile,
+    removeTemplateFiles,
+    removeTemplateFolder,
+    uppercaseFirstLetter
+} from "../helpers";
 import fs from "fs";
 import {buildServiceFunctionName, getFuncParams} from "../views/service-creator";
 import {METHOD, URL} from "../views/routes-creator";
@@ -8,16 +14,23 @@ import {buildDetailsView} from "./details-view-builder";
 import {buildListView} from "./list-view-builder";
 import {buildEditorView} from "./editor-view-builder";
 import {buildTypesView} from "./types-view-builder";
+import {buildRoute} from "./route-view-builder";
+import {buildAppLinks} from "./app-view-builder";
 const ncp = require('ncp').ncp;
 
 export function createFrontend(systemDef: SystemDef): Promise<void> {
     let fePromises = [];
     for (let i in systemDef.components) {
         fePromises.push(createComponent(systemDef.components[i], systemDef).then(() => {
+            // build app router logic
+            return buildRoute(systemDef.components[i], componentDestination(systemDef.name, systemDef.components[i].component), systemDef);
+        }).then(() => {
+            // add a vue view and add it to App.vue
+            return buildAppLinks(systemDef.components[i], componentDestination(systemDef.name, systemDef.components[i].component), systemDef);
+        }).then(() => {
             return removeTemplateFiles(componentDestination(systemDef.name, systemDef.components[i].component));
         }));
-        // TODO: add a vue view and add it to App.vue
+
-        // TODO: build app router logic
     }
     // TODO: after all is done clean up the template files
     return Promise.all(fePromises).then((res: void[]) => {
@@ -31,9 +44,7 @@ function componentSource() {
     return path.join(process.cwd(), 'frontend-frame', 'src', 'components', '{{component}}');
 }
 
-function componentDestination(systemDefName: string, componentName: string) {
+
-    return path.join(process.cwd(), `frontend-${systemDefName}`, 'src', 'components', componentName);
-}
 
 function createComponent(component: ComponentDef, systemDef: SystemDef) {
     return new Promise<void>((componentResolve, componentReject) => {

src/frontend-services/route-view-builder.ts

@@ -0,0 +1,33 @@
+import {ComponentDef, EndpointDef, SystemDef} from "../systemGenService";
+import path from "path";
+import fs from "fs";
+
+export function buildRoute(component: ComponentDef, outDir: string, systemDef: SystemDef): Promise<void> {
+    let listEndpoints: EndpointDef[] = component.endpoints.filter((epd: EndpointDef) => {
+        return epd.type === 'list';
+    });
+    if (listEndpoints.length) {
+        return new Promise<void>((resolve) => {
+            const separator: string = `// SYSTE-BUILDER-routes`;
+            let fileLocation = path.join(process.cwd(), `frontend-${systemDef.name}`, 'src', 'router.ts');
+            let initServiceFile: string = fs.readFileSync(fileLocation, 'utf8');
+            let parts = initServiceFile.split(separator);
+            parts[0] = parts[0] + createRouteCode(component, systemDef);
+            let newServiceFile = parts.join(separator);
+            fs.writeFileSync(fileLocation, newServiceFile, 'utf8');
+            resolve();
+        });
+    }
+    return Promise.resolve();
+}
+
+function createRouteCode(component: ComponentDef, systemDef: SystemDef): string {
+    let out = `{
+            path: '/${component.component}',
+            name: '${component.component}',
+            component: () => import(/* webpackChunkName: "${component.component}" */ './components/${component.component}/${component.component}List.vue')
+        },
+        `;
+
+    return out;
+}

src/helpers.ts

@@ -190,7 +190,12 @@ function createDetailsTypeValues(view: EndpointDef, systemDef: SystemDef) {
     return out;
 }
 
+function componentDestination(systemDefName: string, componentName: string) {
+    return path.join(process.cwd(), `frontend-${systemDefName}`, 'src', 'components', componentName);
+}
+
 export {
+    componentDestination,
     createDetailsInitValues,
     createDetailsTypeValues,
     findColumn,