feat(admin-ui): Can add custom buttons to list/detail views

Relates to #55
vendure-ecommerce · Sep 25, 2019 · ef47c62 · ef47c62
1 parent 0d86927
commit ef47c62
Show file tree

Hide file tree

Showing 38 changed files with 281 additions and 108 deletions.
diff --git a/packages/admin-ui/src/app/catalog/components/asset-list/asset-list.component.html b/packages/admin-ui/src/app/catalog/components/asset-list/asset-list.component.html
@@ -9,6 +9,7 @@
         />
     </vdr-ab-left>
     <vdr-ab-right>
+        <vdr-action-bar-items locationId="asset-list"></vdr-action-bar-items>
         <vdr-asset-file-input
             (selectFiles)="filesSelected($event)"
             dropZoneTarget=".content-area"

diff --git a/...es/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.html b/...es/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.html
@@ -9,6 +9,7 @@
     </vdr-ab-left>
 
     <vdr-ab-right>
+        <vdr-action-bar-items locationId="collection-detail"></vdr-action-bar-items>
         <button
             class="btn btn-primary"
             *ngIf="isNew$ | async; else updateButton"

diff --git a/packages/admin-ui/src/app/catalog/components/collection-list/collection-list.component.html b/packages/admin-ui/src/app/catalog/components/collection-list/collection-list.component.html
@@ -1,5 +1,6 @@
 <vdr-action-bar>
     <vdr-ab-right>
+        <vdr-action-bar-items locationId="collection-list"></vdr-action-bar-items>
         <a class="btn btn-primary" *vdrIfPermissions="'CreateCatalog'" [routerLink]="['./create']">
             <clr-icon shape="plus"></clr-icon>
             {{ 'catalog.create-new-collection' | translate }}

diff --git a/packages/admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.html b/packages/admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.html
@@ -9,6 +9,7 @@
     </vdr-ab-left>
 
     <vdr-ab-right>
+        <vdr-action-bar-items locationId="facet-detail"></vdr-action-bar-items>
         <button
             class="btn btn-primary"
             *ngIf="isNew$ | async; else updateButton"

diff --git a/packages/admin-ui/src/app/catalog/components/facet-list/facet-list.component.html b/packages/admin-ui/src/app/catalog/components/facet-list/facet-list.component.html
@@ -1,5 +1,6 @@
 <vdr-action-bar>
     <vdr-ab-right>
+        <vdr-action-bar-items locationId="facet-list"></vdr-action-bar-items>
         <a class="btn btn-primary"
            *vdrIfPermissions="'CreateCatalog'"
            [routerLink]="['./create']">

diff --git a/packages/admin-ui/src/app/catalog/components/product-detail/product-detail.component.html b/packages/admin-ui/src/app/catalog/components/product-detail/product-detail.component.html
@@ -18,6 +18,7 @@
     </vdr-ab-left>
 
     <vdr-ab-right>
+        <vdr-action-bar-items locationId="product-detail"></vdr-action-bar-items>
         <button
             class="btn btn-primary"
             *ngIf="isNew$ | async; else updateButton"

diff --git a/packages/admin-ui/src/app/catalog/components/product-list/product-list.component.html b/packages/admin-ui/src/app/catalog/components/product-list/product-list.component.html
@@ -29,6 +29,7 @@
         </clr-checkbox-wrapper>
     </vdr-ab-left>
     <vdr-ab-right>
+        <vdr-action-bar-items locationId="product-list"></vdr-action-bar-items>
         <a class="btn btn-primary" [routerLink]="['./create']" *vdrIfPermissions="'CreateCatalog'">
             <clr-icon shape="plus"></clr-icon>
             <span class="full-label">{{ 'catalog.create-new-product' | translate }}</span>

diff --git a/packages/admin-ui/src/app/core/components/main-nav/main-nav.component.html b/packages/admin-ui/src/app/core/components/main-nav/main-nav.component.html
@@ -1,20 +1,20 @@
 <nav class="sidenav" [clr-nav-level]="2">
     <section class="sidenav-content">
-        <ng-container *ngFor="let section of menuBuilderService.navMenuConfig$ | async">
+        <ng-container *ngFor="let section of navBuilderService.navMenuConfig$ | async">
             <section
                 class="nav-group"
-                [attr.data-section-name]="section.name"
+                [attr.data-section-id]="section.id"
                 [class.collapsible]="section.collapsible"
                 *vdrIfPermissions="section.requiresPermission"
             >
-                <input [id]="section.name" type="checkbox" [checked]="section.collapsedByDefault" />
-                <label [for]="section.name">{{ section.label | translate }}</label>
+                <input [id]="section.id" type="checkbox" [checked]="section.collapsedByDefault" />
+                <label [for]="section.id">{{ section.label | translate }}</label>
                 <ul class="nav-list">
                     <li *ngFor="let item of section.items">
                         <a
                             class="nav-link"
-                            [attr.data-item-name]="section.name"
-                            [routerLink]="item.routerLink"
+                            [attr.data-item-id]="section.id"
+                            [routerLink]="getRouterLink(item)"
                             routerLinkActive="active"
                         >
                             <clr-icon [attr.shape]="item.icon" size="20"></clr-icon>

diff --git a/packages/admin-ui/src/app/core/components/main-nav/main-nav.component.ts b/packages/admin-ui/src/app/core/components/main-nav/main-nav.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
+import { NavMenuItem } from '../../providers/nav-builder/nav-builder-types';
 import { NavBuilderService } from '../../providers/nav-builder/nav-builder.service';
 
 @Component({
@@ -12,140 +13,140 @@ export class MainNavComponent implements OnInit {
     constructor(
         private route: ActivatedRoute,
         private router: Router,
-        public menuBuilderService: NavBuilderService,
+        public navBuilderService: NavBuilderService,
     ) {}
 
     ngOnInit(): void {
-        this.menuBuilderService.defineNavMenuSections([
+        this.navBuilderService.defineNavMenuSections([
             {
                 requiresPermission: 'ReadCatalog',
-                name: 'catalog',
+                id: 'catalog',
                 label: 'nav.catalog',
                 items: [
                     {
-                        name: 'products',
+                        id: 'products',
                         label: 'nav.products',
                         icon: 'library',
                         routerLink: ['/catalog', 'products'],
                     },
                     {
-                        name: 'facets',
+                        id: 'facets',
                         label: 'nav.facets',
                         icon: 'tag',
                         routerLink: ['/catalog', 'facets'],
                     },
                     {
-                        name: 'collections',
+                        id: 'collections',
                         label: 'nav.collections',
                         icon: 'folder-open',
                         routerLink: ['/catalog', 'collections'],
                     },
                     {
-                        name: 'assets',
+                        id: 'assets',
                         label: 'nav.assets',
                         icon: 'image-gallery',
                         routerLink: ['/catalog', 'assets'],
                     },
                 ],
             },
             {
-                name: 'sales',
+                id: 'sales',
                 label: 'nav.sales',
                 requiresPermission: 'ReadOrder',
                 items: [
                     {
-                        name: 'orders',
+                        id: 'orders',
                         label: 'nav.orders',
                         routerLink: ['/orders'],
                         icon: 'shopping-cart',
                     },
                 ],
             },
             {
-                name: 'customers',
+                id: 'customers',
                 label: 'nav.customers',
                 requiresPermission: 'ReadCustomer',
                 items: [
                     {
-                        name: 'customers',
+                        id: 'customers',
                         label: 'nav.customers',
                         routerLink: ['/customer', 'customers'],
                         icon: 'user',
                     },
                 ],
             },
             {
-                name: 'marketing',
+                id: 'marketing',
                 label: 'nav.marketing',
                 requiresPermission: 'ReadPromotion',
                 items: [
                     {
-                        name: 'promotions',
+                        id: 'promotions',
                         label: 'nav.promotions',
                         routerLink: ['/marketing', 'promotions'],
                         icon: 'asterisk',
                     },
                 ],
             },
             {
-                name: 'settings',
+                id: 'settings',
                 label: 'nav.settings',
                 requiresPermission: 'ReadSettings',
                 collapsible: true,
                 collapsedByDefault: true,
                 items: [
                     {
-                        name: 'channels',
+                        id: 'channels',
                         label: 'nav.channels',
                         routerLink: ['/settings', 'channels'],
                         icon: 'layers',
                     },
                     {
-                        name: 'administrators',
+                        id: 'administrators',
                         label: 'nav.administrators',
                         requiresPermission: 'ReadAdministrator',
                         routerLink: ['/settings', 'administrators'],
                         icon: 'administrator',
                     },
                     {
-                        name: 'roles',
+                        id: 'roles',
                         label: 'nav.roles',
                         requiresPermission: 'ReadAdministrator',
                         routerLink: ['/settings', 'roles'],
                         icon: 'users',
                     },
                     {
-                        name: 'shipping-methods',
+                        id: 'shipping-methods',
                         label: 'nav.shipping-methods',
                         routerLink: ['/settings', 'shipping-methods'],
                         icon: 'truck',
                     },
                     {
-                        name: 'payment-methods',
+                        id: 'payment-methods',
                         label: 'nav.payment-methods',
                         routerLink: ['/settings', 'payment-methods'],
                         icon: 'credit-card',
                     },
                     {
-                        name: 'tax-categories',
+                        id: 'tax-categories',
                         label: 'nav.tax-categories',
                         routerLink: ['/settings', 'tax-categories'],
                         icon: 'view-list',
                     },
                     {
-                        name: 'tax-rates',
+                        id: 'tax-rates',
                         label: 'nav.tax-rates',
                         routerLink: ['/settings', 'tax-rates'],
                         icon: 'calculator',
                     },
                     {
-                        name: 'countries',
+                        id: 'countries',
                         label: 'nav.countries',
                         routerLink: ['/settings', 'countries'],
                         icon: 'world',
                     },
                     {
-                        name: 'global-settings',
+                        id: 'global-settings',
                         label: 'nav.global-settings',
                         routerLink: ['/settings', 'global-settings'],
                         icon: 'cog',
@@ -155,11 +156,7 @@ export class MainNavComponent implements OnInit {
         ]);
     }
 
-    /**
-     * Work-around for routerLinkActive on links which include queryParams.
-     * See https://github.com/angular/angular/issues/13205
-     */
-    isLinkActive(route: string): boolean {
-        return this.router.url.startsWith(route);
+    getRouterLink(item: NavMenuItem) {
+        return this.navBuilderService.getRouterLink(item, this.route);
     }
 }
diff --git a/packages/admin-ui/src/app/core/providers/nav-builder/nav-builder-types.ts b/packages/admin-ui/src/app/core/providers/nav-builder/nav-builder-types.ts
@@ -0,0 +1,46 @@
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs';
+
+/**
+ * A NavMenuItem is a menu item in the main (left-hand side) nav
+ * bar.
+ */
+export interface NavMenuItem {
+    id: string;
+    label: string;
+    routerLink: RouterLinkDefinition;
+    onClick?: (event: MouseEvent) => void;
+    icon?: string;
+    requiresPermission?: string;
+}
+
+/**
+ * A NavMenuSection is a grouping of links in the main
+ * (left-hand side) nav bar.
+ */
+export interface NavMenuSection {
+    id: string;
+    label: string;
+    items: NavMenuItem[];
+    requiresPermission?: string;
+    collapsible?: boolean;
+    collapsedByDefault?: boolean;
+}
+
+/**
+ * A button in the ActionBar area at the top of one of the list or detail views.
+ */
+export interface ActionBarItem {
+    id: string;
+    label: string;
+    locationId: string;
+    disabled?: Observable<boolean>;
+    onClick?: (event: MouseEvent, route: ActivatedRoute) => void;
+    routerLink?: RouterLinkDefinition;
+    buttonColor?: 'primary' | 'success' | 'warning';
+    buttonStyle?: 'solid' | 'outline' | 'link';
+    icon?: string;
+    requiresPermission?: string;
+}
+
+export type RouterLinkDefinition = ((route: ActivatedRoute) => any[]) | any[];