Friendly url

src/app/app.module.ts

@@ -62,7 +62,7 @@ import { PadContainerComponent } from './components/pad/pad-container/pad-contai
 const appRoutes: Routes = [
   { path: '', component: LandingComponent },
   { path: 'home', component: HomeComponent },
-  { path: 'pad/:id', component: PadComponent },
+  { path: 'pad/:name', component: PadComponent },
   { path: 'login', component: LoginComponent },
   { path: '**', component: NotFoundComponent }
 ];

src/app/components/home/home.component.ts

@@ -43,9 +43,11 @@ export class HomeComponent implements OnInit, OnDestroy {
   }
 
   launchPad() {
-    this.swellService.getObject(this.padid.value)
+    let name = this.padid.value;
+    this.swellService.getObject(name)
     .then( object => {
-      this.router.navigate(['/pad', object.id]);
+      this.swellService.setObjectName(object.id, name)
+      this.router.navigate(['/pad', name]);
     })
     .catch( err => {
       this.launchError = true;

src/app/components/pad/pad.component.html

@@ -2,7 +2,7 @@
     <button mat-icon-button (click)="sideDrawer.toggle()">
       <mat-icon>menu</mat-icon>
     </button>    
-    <h1 class="example-app-name">Pad {{object?.id}}</h1>
+    <h1 class="example-app-name">Pad {{name}}</h1>
 </mat-toolbar>
 
 

src/app/components/pad/pad.component.ts

@@ -15,7 +15,7 @@ export class PadComponent implements OnInit, OnDestroy, AfterViewInit {
 
   private objectSubscription: Subscription;
   object: any;
-
+  name: string;
 
   constructor(
     private route: ActivatedRoute,
@@ -29,7 +29,8 @@ export class PadComponent implements OnInit, OnDestroy, AfterViewInit {
     });
 
     this.route.paramMap.subscribe( params => {
-      this.padService.init(params.get('id'));
+      this.name = params.get('name');
+      this.padService.init(this.name);
     });
   }
 

src/app/services/pad.service.ts

@@ -42,25 +42,32 @@ export class PadService {
    * with this service. Hence, changes in session would happen
    * after destroying the view and cleaning the service.
    *
-   * @param objectId
+   * @param name
    */
-  init(objectId) {
-
-    if (this.editor.hasDocument()) {
-      this.editor.clean();
-    }
-
-    if (this.session) {
-      this.loadObject(objectId);
-    } else {
-      // we must wait for the swell session
-      this.swellService.session$.pipe(first( val => val != null))
-      .subscribe(session => {
-          this.session = session;
-          this.loadObject(objectId);
-      });
-
-    }
+  init(name) {
+    // get the id from the name
+    this.swellService.getObjectNames(name)
+    .then( response => {
+      let names_json = JSON.parse(JSON.stringify(response));
+      let objectId = names_json['waveId']['domain'].concat('/').concat(names_json['waveId']['id']);
+
+      if (this.editor.hasDocument()) {
+        this.editor.clean();
+      }
+
+      if (this.session) {
+        this.loadObject(objectId);
+      } else {
+        // we must wait for the swell session
+        this.swellService.session$.pipe(first( val => val != null))
+        .subscribe(session => {
+            this.session = session;
+            this.loadObject(objectId);
+        });
+
+      }
+
+    });
 
   }
 

src/app/services/swell.service.ts

@@ -147,6 +147,19 @@ export class SwellService  {
     });
   }
 
+  setObjectName(objectId, name) {
+    this.api.setObjectName(
+      {
+        id: objectId,
+        name: name
+      })
+  }
+
+  getObjectNames(name) {
+    return this.api.getObjectNames({ name: name })
+             .then( response => { return response } );
+  }
+
 
   /**
    * Propagate session info