Polymer 2.0 nested iron-pages

Question

I'm not very good with iron-pages and app-route so I will try and explain this the best I can.

I am building a web application with two main "apps" built into it - the regular user interface and an admin dashboard. So naturally I would want two different main 'paths': /admin and /home

The admin dashboard should have a drawer in it, where I can select from a list of 'categories' and upon selecting a category, load a specific view. Example /admin/users will load a view that will load a list of users. And upon clicking on an item on the list page, bring up a details section. Example /admin/user/UserA

Here is my structure so far. demo-app has iron-pages that holds the HomePage and AdminPage. AdminPage also has iron-pages that holds ListView and DetailView.

I can get to the admin page, but upon selecting from a list of 'categories', the route doesn't pick up. I'm basing my code off of the Shop Demo

demo-app

<app-location route="{{route}}"></app-location>
<app-route
    route="{{route}}"
    pattern="/:page"
    data="{{routeData}}"
    tail="{{subroute}}"></app-route>

<iron-media-query query="max-width: 767px" query-matches="{{smallScreen}}"></iron-media-query>

<app-header role="navigation" id="header" effects="waterfall" condenses reveals>
  <app-toolbar>
  </app-toolbar>
</app-header>

<iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
  <!-- home view -->
  <demo-home name="home"></demo-home>

  <!-- admin view -->
  <demo-admin name="admin"></demo-admin>

  <shop-404-warning name="404"></shop-404-warning>
</iron-pages>

demo-admin

    <app-route
        route="{{route}}"
        pattern="/admin"
        data="{{routeData}}"
        tail="{{subroute}}"></app-route>

    <h1>Admin</h1>
    <ul>
      <li><a href="/admin/users">Users</a></li>
      <li><a href="/admin/bars">Bars</a></li>
      <li><a href="/admin/stepsheets">Stepsheets</a></li>
      <li><a href="/admin/events">Events</a></li>
    </ul>

    <p>subroute: [[subroute]]</p>

    <iron-pages role="main" selected="{{subroute.path}}" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
      <demo-list name="list" route="{{subroute}}"></demo-list>
    </iron-pages>
  </template>

demo-list

<app-route
    route="[[route]]"
    pattern="/admin/:collection"
    data="{{routeData}}"></app-route>

<h1>Collection: [[routeData.collection]]</h1>

EDIT I might be onto something...

<app-location route="{{route}}"></app-location>
<app-route
    route="{{route}}"
    pattern="/:page"
    data="{{routeData}}"
    tail="{{subroute}}"></app-route>
<app-route
    route="{{subroute}}"
    pattern="/:category"
    data="{{subrouteData}}"></app-route>

and then

  static get observers() { return [
    '_routePageChanged(routeData.page)',
    '_routeCategoryChanged(subrouteData.category)'
  ]}

Not sure if this is the right way to do it? I feel like this would get very cumbersome if I had a url with 3+ subroutes

EDIT 2

Answer 1

In demo-admin the router

<app-route
    route="{{route}}"
    pattern="/admin"
    data="{{routeData}}"
    tail="{{subroute}}">
</app-route>

is probably not working as expected because demo-app's route property is not accessible inside demo-admin. Also patterm="/admin" is redundant: if demo-admin is being loaded then the url is already /admin.

You can pass demo-app's subroute property to child views who need to parse sub routes:

demo-app.html

<dom-module id="demo-app">
  <template>
    <app-location route="{{route}}"></app-location>
    <app-route
        route="{{route}}"
        pattern="/:page"
        data="{{routeData}}"
        tail="{{subroute}}">
    </app-route>

    <iron-media-query query="max-width: 767px" query-matches="{{smallScreen}}"></iron-media-query>

    <app-header role="navigation" id="header" effects="waterfall" condenses reveals>
      <app-toolbar>
      </app-toolbar>
    </app-header>

    <iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
      <demo-home name="home"></demo-home>
      <demo-admin name="admin" route="{{subroute}}"></demo-admin>
      <shop-404-warning name="404"></shop-404-warning>
    </iron-pages>
  </template>
  <script>
    class DemoApp extends Polymer.Element {

      static get is() {
        return "demo-app";
      }

      static get properties() {
        return {
          page: {
            type: String,
            reflectToAttribute: true,
            observer: '_pageChanged',
          },
          routeData: Object,
          subroute: Object,
        };
      }

      static get observers() {
        return [
          '_routePageChanged(routeData.page)',
        ];
      }

      _routePageChanged(page) {
        this.page = page || 'demo-home';
      }

      // Use this only if you want to lazy load pages
      _pageChanged(page) {
        const resolvedPageUrl = this.resolveUrl('demo-' + page + '.html');
        Polymer.importHref(
          resolvedPageUrl,
          null,
          this._showPage404.bind(this),
          true);
      }

      _showPage404() {
        this.page = '404';
      }

    }
    customElements.define(DemoApp.is, DemoApp);
  </script>
</dom-module>

demo-admin.html

<dom-module id="demo-admin">
  <template>
    <app-route
      route="{{route}}"
      pattern="/:category"
      data="{{routeData}}"
      tail="{{subroute}}">
    </app-route>

    <h1>Admin</h1>

    <ul>
      <li><a href="/admin/users">Users</a></li>
      <li><a href="/admin/bars">Bars</a></li>
      <li><a href="/admin/stepsheets">Stepsheets</a></li>
      <li><a href="/admin/events">Events</a></li>
    </ul>

    <p>subroute: [[subroute]]</p>

    <iron-pages
      role="main"selected="[[category]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
      <demo-list name="list" route="{{subroute}}"></demo-list>
      <!-- Other pages -->
    </iron-pages>
  </template>
  <script>
    class DemoAdmin extends Polymer.Element {

      static get is() {
        return "demo-admin";
      }

      static get properties() {
        return {
          category: {
            type: String,
            reflectToAttribute: true,
            observer: '_categoryChanged',
          },
          routeData: Object,
          subroute: Object,
        };
      }

      static get observers() {
        return [
          '_routeCategoryChanged(routeData.category)',
        ];
      }

      _routeCategoryChanged(page) {
        this.page = page || 'defaultPage';
      }

      _categoryChanged(page) {
        const resolvedPageUrl = this.resolveUrl('demo-' + page + '.html');
        Polymer.importHref(
          resolvedPageUrl,
          null,
          this._showPage404.bind(this),
          true);
      }

      _showPage404() {
        this.page = '404';
      }

    }
    customElements.define(DemoAdmin.is, DemoAdmin);
  </script>
</dom-module>

Find more info in app-route's documentation.