Add dynamic routes

bcmi/src/app/app.module.ts

@@ -37,6 +37,7 @@ import { RouterModule } from '@angular/router';
 import { LeafletModule } from '@bluehalo/ngx-leaflet';
 import { GraphQLModule } from './graphql.module';
 import { PageComponent } from './static-pages/page/page.component';
+import { ContentService } from './services/content-service';
 
 export function initConfig(configService: ConfigService) {
   return () => configService.init();
@@ -86,9 +87,10 @@ export function initConfig(configService: ConfigService) {
       provide: APP_INITIALIZER,
       useFactory: initConfig,
       multi: true,
-      deps: [ConfigService]
+      deps: [ConfigService,ContentService]
     },
     ProponentService,
+    ContentService,
     CookieService,
     ConfigService,
     GeocoderService,

bcmi/src/app/app.routes.ts

@@ -24,14 +24,6 @@ export const routes: Routes = [
     path: 'compliance-oversight',
     component: ComplianceOversightComponent
   },
-  {
-    path: 'contact',
-    component: PageComponent,
-    resolve: {
-      pageData: ContentResolver
-    },
-    data: {id:2}
-  },
   {
     path: '',
     component: HomeComponent
@@ -64,14 +56,6 @@ export const routes: Routes = [
     path: 'map',
     component: MainMapComponent
   },
-  {
-    path: 'page',
-    component: PageComponent,
-    resolve: {
-      pageData: ContentResolver
-    },
-    data: {id:1}
-  },
   {
     path: '**',
     component: NotFoundComponent

bcmi/src/app/services/config.service.ts

@@ -1,5 +1,9 @@
-import { Injectable } from '@angular/core';
+import { Injectable, Injector } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { Route, Router, RouterModule } from '@angular/router';
+import { PageComponent } from '@app/static-pages/page/page.component';
+import { ContentResolver } from './content-resolver';
+import { ContentService } from './content-service';
 
 @Injectable()
 export class ConfigService {
@@ -8,7 +12,9 @@ export class ConfigService {
 
   constructor(
     private httpClient: HttpClient,
-    public http: HttpClient
+    public http: HttpClient,
+    private router: Router,
+    private contentService: ContentService
   ) { }
 
   get config(): any {
@@ -20,6 +26,15 @@ export class ConfigService {
    * is configured to pass the /config endpoint to a dynamic service that returns JSON.
    */
   async init() {
+    //Dynamically build routes based on pages in the CMS
+    let results = await this.contentService.getRoutes();
+    const routes: Route[] = [];
+    results.forEach( (page) => {
+      routes.push({path: page.attributes.route, component: PageComponent, resolve: {pageData: ContentResolver}})
+    })
+    const newRoutes = [...routes, ...this.router.config];
+    this.router.resetConfig(newRoutes);
+
     const application = 'BCMI';
     try {
       // Attempt to get application via this.httpClient. This uses the url of the application that you are running it from

bcmi/src/app/services/content-resolver.ts

@@ -11,37 +11,34 @@ export class ContentResolver implements Resolve<Page> {
 
     constructor(private readonly apollo: Apollo){}
 
-    private getPage = function(id){
+    private getPage = function(route){
 
     return gql`
     {
-        page(id: ${id}) {
-        data{
-            attributes{
-            Title,
-            Description
-            Content
-            Ongoing_card
-            External_card
-            Related_card
-            route
-            tooltip
+        pageByRoute(route: "${route}") {
+            data{
+                attributes{
+                    Title,
+                    Description
+                    Content
+                    Ongoing_card
+                    External_card
+                    Related_card
+                    route
+                    tooltip
+                }
             }
         }
-        }
     }
     `;
     }
 
     resolve(route: ActivatedRouteSnapshot): Observable<Page> {
-    // Return an Observable that represents the API request(s) you want to
-    // execute before the route is activated.
-        const id = route.data["id"];
-
+    // Return an Observable that represents the GraphQL request to execute before the route is activated.
         return this.apollo.watchQuery<any>({
-            query: this.getPage(id)
+            query: this.getPage(route.routeConfig.path)
         })
-        .valueChanges.pipe(map(result => result.data?.page.data.attributes as Page),
+        .valueChanges.pipe(map(result => result.data?.pageByRoute.data.attributes as Page),
         catchError(error => {
             console.error(error);
             return [];

bcmi/src/app/services/content-service.ts

@@ -0,0 +1,30 @@
+import {throwError as observableThrowError, Observable, map, catchError, firstValueFrom } from 'rxjs';
+import { Injectable } from '@angular/core';
+import { Apollo, gql } from 'apollo-angular';
+import { Page } from '@app/models/content/page';
+
+@Injectable()
+export class ContentService {
+
+  constructor(private readonly apollo: Apollo) {}
+
+  async getRoutes(): Promise<any> {
+    return this.apollo.query<any>({
+          query: gql`
+          {
+            pages{
+              data{
+                  attributes{
+                    Title,
+                    route
+                    tooltip
+                  }
+              }
+            }
+          }
+          `
+      }).pipe(map(response => response.data.pages?.data)).toPromise();
+    }
+
+}
+

cms/README.md

@@ -1,5 +1,19 @@
 # 🚀 Getting started with Strapi
 
+
+brew install postgresql
+brew services run postgresql
+psql postgres
+
+create user strapi with encrypted password 'strapi';
+create database cms owner strapi;
+
+.env file (Warning mac's may remove the .)
+
+Once Strapi is running you will need to enable read permissions on the Content types
+Settings > User & Permissions plugin > Roles > Public > Enable find and findOne for Page and others
+
+
 Strapi comes with a full featured [Command Line Interface](https://docs.strapi.io/dev-docs/cli) (CLI) which lets you scaffold and manage your project in seconds.
 
 ### `develop`

cms/src/index.ts

@@ -5,7 +5,37 @@ export default {
    *
    * This gives you an opportunity to extend code.
    */
-  register(/*{ strapi }*/) {},
+  register({ strapi }) {
+    const extensionService = strapi.service("plugin::graphql.extension");
+    extensionService.use(({ strapi }) => ({
+      typeDefs: `
+        type Query {
+          pageByRoute(route: String!): PageEntityResponse
+        }
+      `,
+      resolvers: {
+        Query: {
+          pageByRoute: {
+            resolve: async (parent, args, context) => {
+              const { toEntityResponse } = strapi.service(
+                "plugin::graphql.format"
+              ).returnTypes;
+              const data = await strapi.services["api::page.page"].find({
+                filters: {route: args.route},
+              });
+              const response = toEntityResponse(data.results[0]);
+              return response;
+            }
+          }
+        }
+      },
+      resolversConfig: {
+        "Query.pageByRoute": {
+          auth: false,
+        }
+      }
+    }));
+  },
 
   /**
    * An asynchronous bootstrap function that runs before