Breadcrumbs component doesn't support some common use cases

isaaclyman commented 6 years ago

Suppose I have two pages in my app, with the following breadcrumb trails:

Job History
Job History > Create Job

The first one is easy to implement:

const routes: Route[] = [
  {
    path: 'jobs',
    component: JobsComponent
    data: { breadcrumb: 'Job History' }
  }
]

If "Job History" and "Create Job" each have content they need to display, and it doesn't make sense to have the "Create Job" page inside of the "Job History" page, at the moment Cashmere does not offer a viable solution. This is a common use case because one page often links to another page from which the user may want to return.

Attempt 1:

const routes: Route[] = [
  {
    path: 'jobs',
    component: JobsComponent,
    data: { breadcrumb: 'Job History' },
    children: [
      {
        path: 'create',
        component: CreateJobComponent,
        data: { breadcrumb: 'Create New Job' }
      }
    ]
  }
]

With this configuration, the "Create Job" page will never appear because the "Job History" page does not have a <router-outlet> element.

Attempt 2:

const routes: Route[] = [
  {
    path: 'jobs/create',
    component: CreateJobComponent,
    data: { breadcrumb: 'Create New Job' }
  },
  {
    path: 'jobs',
    component: JobsComponent,
    data: { breadcrumb: 'Job History' }
  }
]

With this configuration, the "Create Job" page will appear but it will not have the "Job History" breadcrumb.

Attempt 3:

const routes: Route[] = [
  {
    path: 'jobs',
    data: { breadcrumb: 'Job History' },
    children: [
      {
        path: '',
        component: JobsComponent,
        data: { breadcrumb: null }
      },
      {
        path: 'create',
        component: CreateJobComponent,
        data: { breadcrumb: 'Create Job' }
      }
    ]
  }
]

With this configuration, the "Job History" page will have the breadcrumb trail Job History >. Also, if you click the Job History breadcrumb from the "Create Job" page, it will redirect you to jobs/jobs, which is not a valid route.

Proposed feature:

Jeremy pointed me to the npm package ngx-breadcrumbs, which allows you to create a custom breadcrumb resolver via McBreadcrumbsResolver. A custom resolver returns an observable that emits an array of breadcrumbs that should appear for a given route. We should implement similar functionality in Cashmere breadcrumbs.

cc: @jtrujill

isaaclyman commented 6 years ago

Also: there's no way to skip the breadcrumb for a componentless parent route. If you have the following configuration:

const routes: Route[] = [
  {
    path: 'jobs',
    data: { breadcrumb: 'Job History' },
    children: [
      {
        path: ':id',
        data: { breadcrumb: **???** },
        children: [
          {
            path: '',
            component: JobDetailComponent,
            data: { breadcrumb: 'Job Details' }
          },
          {
            path: 'columns/:id',
            component: ColumnDetailComponent,
            data: { breadcrumb: 'Column Details' }
          }
        ]
      }
    ]
  }
];

path: ':id' is a componentless route. If you set its breadcrumb to null, the "Column Details" breadcrumb component shows:

Job History > > Column Details

And if you don't set a breadcrumb at all, you get:

Job History > Job History > Column Details