[ACA-249] routing generic error (#9)

* generic error

* rename folder and files

src/app/app.module.ts

@@ -10,6 +10,7 @@ import { MaterialModule } from './common/material.module';
 import { AppComponent } from './app.component';
 import { APP_ROUTES } from './app.routes';
 
+import { GenericErrorComponent } from './components/generic-error/generic-error.component';
 import { LoginComponent } from './components/login/login.component';
 import { PreviewComponent } from './components/preview/preview.component';
 import { FilesComponent } from './components/files/files.component';
@@ -37,6 +38,7 @@ import { SidenavComponent } from './components/sidenav/sidenav.component';
     ],
     declarations: [
         AppComponent,
+        GenericErrorComponent,
         LoginComponent,
         LayoutComponent,
         HeaderComponent,

src/app/app.routes.ts

@@ -29,8 +29,20 @@ import { TrashcanComponent } from './components/trashcan/trashcan.component';
 
 import { LoginComponent } from './components/login/login.component';
 import { PreviewComponent } from './components/preview/preview.component';
+import { GenericErrorComponent } from './components/generic-error/generic-error.component';
 
 export const APP_ROUTES: Routes = [
+    {
+        path: 'preview/:nodeId',
+        component: PreviewComponent
+    },
+    {
+        path: 'login',
+        component: LoginComponent,
+        data: {
+            title: 'Sign in'
+        }
+    },
     {
         path: '',
         component: LayoutComponent,
@@ -101,26 +113,15 @@ export const APP_ROUTES: Routes = [
                     i18nTitle: 'APP.BROWSE.TRASHCAN.TITLE'
                 }
             }
+            ,
+            {
+                path: '**',
+                component: GenericErrorComponent
+            }
         ],
         canActivate: [
             AuthGuardEcm
         ]
-    },
-    {
-        path: 'preview/:nodeId',
-        component: PreviewComponent
-    },
-    {
-        path: '**',
-        redirectTo: '/login',
-        pathMatch: 'full'
-    },
-    {
-        path: 'login',
-        component: LoginComponent,
-        data: {
-            title: 'Sign in'
-        }
     }
 ];
 

src/app/components/files/files.component.html

@@ -78,7 +78,19 @@
         </adf-toolbar>
     </div>
 
-    <div class="inner-layout__content">
+    <div class="inner-layout__content"
+        [ngClass]="{
+            'inner-layout__content--hide': isValidPath,
+            'inner-layout__content--show': !isValidPath
+        }">
+        <app-generic-error></app-generic-error>
+    </div>
+
+    <div class="inner-layout__content"
+        [ngClass]="{
+            'inner-layout__content--hide': !isValidPath ,
+            'inner-layout__content--show': isValidPath
+        }">
         <alfresco-upload-drag-area
             [rootFolderId]="node?.id"
             [disabled]="!canCreateContent(node)"

src/app/components/files/files.component.spec.ts

@@ -26,6 +26,7 @@ import { CommonModule } from '../../common/common.module';
 import { ContentManagementService } from '../../common/services/content-management.service';
 import { BrowsingFilesService } from '../../common/services/browsing-files.service';
 import { NodeActionsService } from '../../common/services/node-actions.service';
+import { GenericErrorComponent } from '../generic-error/generic-error.component';
 import { FilesComponent } from './files.component';
 
 describe('FilesComponent', () => {
@@ -48,7 +49,8 @@ describe('FilesComponent', () => {
                 CommonModule
             ],
             declarations: [
-                FilesComponent
+                FilesComponent,
+                GenericErrorComponent
             ]
         }).compileComponents()
         .then(() => {

src/app/components/files/files.component.ts

@@ -32,6 +32,7 @@ import { PageComponent } from '../page.component';
 })
 export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
     private routeData: any = {};
+    isValidPath = true;
 
     private onCopyNode: Subscription;
     private onRemoveItem: Subscription;
@@ -69,12 +70,16 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
 
             this.fetchNode(nodeId)
                 .do((node) => this.updateCurrentNode(node))
-                .flatMap((node) => {
-                    return this.fetchNodes(node.id);
-                })
+                .flatMap((node) => this.fetchNodes(node.id))
                 .subscribe(
-                    (page) => this.onPageLoaded(page),
-                    error => this.onFetchError(error)
+                    (page) => {
+                        this.isValidPath = true;
+                        this.onPageLoaded(page);
+                    },
+                    error => {
+                        this.isValidPath = false;
+                        this.onFetchError(error);
+                    }
                 );
         });
 

src/app/components/generic-error/generic-error.component.html

@@ -0,0 +1,4 @@
+<div class="generic-error">
+    <mat-icon>ic_error</mat-icon>
+    <p class="generic-error__title">This file / folder no longer exists or you don't have permission to view it.</p>
+</div>

src/app/components/generic-error/generic-error.component.scss

@@ -0,0 +1,23 @@
+@import 'variables';
+
+.generic-error {
+    color: $alfresco-secondary-text-color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+
+    &__title {
+        font-size: 16px;
+    }
+
+    mat-icon {
+        color: $alfresco-warn-color--hue-2;
+        direction: rtl;
+        font-size: 52px;
+        height: 52px;
+        width: 52px;
+    }
+  }

src/app/components/generic-error/generic-error.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-generic-error',
+    styleUrls: ['./generic-error.component.scss'],
+    templateUrl: './generic-error.component.html'
+})
+export class GenericErrorComponent {}
+

src/app/ui/_layout.scss

@@ -61,8 +61,20 @@ $app-inner-layout--footer-height: 48px;
         overflow: hidden;
     }
 
+    &__content--hide {
+        display: none;
+    }
+
+    &__content--show {
+        display: flex;
+    }
+
     &__footer {
         flex-basis: $app-inner-layout--footer-height;
         border-top: 1px solid $alfresco-divider-color;
     }
+
+    app-generic-error {
+        height: 100%;
+    }
 }