feat: custom 404 page (#377)

sovity · Aug 11, 2023 · 2d8d88e · 2d8d88e
1 parent c358d6c
commit 2d8d88e
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,8 @@ the detailed section referring to by linking pull requests or issues.
 
 #### Added
 
+- Added custom 404 pages to connector and broker ui
+
 #### Changed
 
 #### Removed

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -1,11 +1,12 @@
 import {NgModule} from '@angular/core';
 import {
-  LoadChildrenCallback,
   ROUTES,
   RouterModule,
   Routes,
 } from '@angular/router';
 import {APP_CONFIG, AppConfig} from './core/config/app-config';
+import {PageNotFoundComponent} from "./component-library/error-404-component/page-not-found.component";
+
 
 @NgModule({
   imports: [RouterModule.forRoot([], {paramsInheritanceStrategy: 'always'})],
@@ -15,27 +16,31 @@ import {APP_CONFIG, AppConfig} from './core/config/app-config';
       provide: ROUTES,
       deps: [APP_CONFIG],
       multi: true,
-      useFactory: (config: AppConfig): Routes => {
-        const loadChildRoutes = (
-          loadChildren: LoadChildrenCallback,
-        ): Routes => [{path: '', loadChildren}];
 
+      useFactory: (config: AppConfig): Routes => {
+        const routes: Routes = [];
         switch (config.routes) {
           case 'broker-ui':
-            return loadChildRoutes(() =>
-              import('./routes/broker-ui/broker-ui.module').then(
-                (m) => m.BrokerUiModule,
-              ),
-            );
+            routes.push({
+              path: '', loadChildren: () =>
+                import('./routes/broker-ui/broker-ui.module').then(
+                  (m) => m.BrokerUiModule,
+                )
+            });
+            break;
           case 'connector-ui':
-            return loadChildRoutes(() =>
-              import('./routes/connector-ui/connector-ui.module').then(
-                (m) => m.ConnectorUiModule,
-              ),
-            );
+            routes.push({
+              path: '', loadChildren: () =>
+                import('./routes/connector-ui/connector-ui.module').then(
+                  (m) => m.ConnectorUiModule,
+                )
+            });
+            break;
           default:
             throw new Error(`Unhandled PageSet: ${config.routes}`);
         }
+        routes.push({path: '**', component: PageNotFoundComponent})
+        return routes;
       },
     },
   ],

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -19,6 +19,7 @@ import {NgxsModule} from '@ngxs/store';
 import {NgChartsModule} from 'ng2-charts';
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
+import {PageNotFoundComponent} from './component-library/error-404-component/page-not-found.component';
 import {provideAppConfig} from './core/config/app-config-initializer';
 import {provideAppConfigProperty} from './core/config/app-config-injection-utils';
 import {ApiKeyInterceptor} from './core/services/api/api-key.interceptor';
@@ -54,7 +55,7 @@ import {
     // Routing
     AppRoutingModule,
   ],
-  declarations: [AppComponent],
+  declarations: [AppComponent, PageNotFoundComponent],
   providers: [
     provideAppConfig(),
 

diff --git a/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts b/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts
@@ -50,7 +50,6 @@ export class AssetPropertyGridGroupBuilder {
         labelTitle: AssetProperties.language,
         ...this.propertyGridUtils.guessValue(asset.language?.label),
       },
-
       {
         icon: 'apartment',
         label: 'Publisher',

diff --git a/src/app/component-library/error-404-component/page-not-found.component.html b/src/app/component-library/error-404-component/page-not-found.component.html
@@ -0,0 +1,9 @@
+<div class="flex flex-col items-center max-w-sm mx-auto text-center">
+  <h1 class="mt-3 text-2xl font-semibold text-gray-800 md:text-3xl">
+    Page not found
+  </h1>
+  <p class="mt-4 text-gray-500">The page you are looking for doesn't exist.</p>
+  <div class="flex items-center w-full mt-6 gap-x-3 shrink-0 sm:w-auto">
+    <a routerLink="/" mat-raised-button color="primary"> Go Back </a>
+  </div>
+</div>
diff --git a/src/app/component-library/error-404-component/page-not-found.component.ts b/src/app/component-library/error-404-component/page-not-found.component.ts
@@ -0,0 +1,16 @@
+import {Component, HostBinding} from '@angular/core';
+
+@Component({
+  selector: 'app-page-not-found',
+  templateUrl: './page-not-found.component.html',
+})
+export class PageNotFoundComponent {
+  @HostBinding('class.container')
+  @HostBinding('class.flex')
+  @HostBinding('class.items-center')
+  @HostBinding('class.min-h-screen')
+  @HostBinding('class.px-6')
+  @HostBinding('class.py-12')
+  @HostBinding('class.box-border')
+  cls = true;
+}