From ef47c62cafa3795b3af4d82f173031e950bad179 Mon Sep 17 00:00:00 2001 From: Michael Bromley Date: Tue, 24 Sep 2019 14:30:12 +0200 Subject: [PATCH] feat(admin-ui): Can add custom buttons to list/detail views Relates to #55 --- .../asset-list/asset-list.component.html | 1 + .../collection-detail.component.html | 1 + .../collection-list.component.html | 1 + .../facet-detail/facet-detail.component.html | 1 + .../facet-list/facet-list.component.html | 1 + .../product-detail.component.html | 1 + .../product-list/product-list.component.html | 1 + .../main-nav/main-nav.component.html | 12 +- .../components/main-nav/main-nav.component.ts | 55 ++++--- .../nav-builder/nav-builder-types.ts | 46 ++++++ .../nav-builder/nav-builder.service.ts | 140 +++++++++--------- .../customer-detail.component.html | 1 + .../customer-list.component.html | 1 + .../promotion-detail.component.html | 1 + .../promotion-list.component.html | 1 + .../order-detail/order-detail.component.html | 1 + .../order-list/order-list.component.html | 4 +- .../admin-detail/admin-detail.component.html | 1 + .../administrator-list.component.html | 1 + .../channel-detail.component.html | 1 + .../channel-list/channel-list.component.html | 1 + .../country-detail.component.html | 1 + .../country-list/country-list.component.html | 1 + .../global-settings.component.html | 1 + .../payment-method-detail.component.html | 3 +- .../payment-method-list.component.html | 6 +- .../role-detail/role-detail.component.html | 1 + .../role-list/role-list.component.html | 1 + .../shipping-method-detail.component.html | 1 + .../shipping-method-list.component.html | 1 + .../tax-category-detail.component.html | 1 + .../tax-category-list.component.html | 1 + .../tax-rate-detail.component.html | 1 + .../tax-rate-list.component.html | 1 + .../action-bar-items.component.html | 10 ++ .../action-bar-items.component.scss | 0 .../action-bar-items.component.ts | 80 ++++++++++ .../admin-ui/src/app/shared/shared.module.ts | 6 +- 38 files changed, 281 insertions(+), 108 deletions(-) create mode 100644 packages/admin-ui/src/app/core/providers/nav-builder/nav-builder-types.ts create mode 100644 packages/admin-ui/src/app/shared/components/action-bar-items/action-bar-items.component.html create mode 100644 packages/admin-ui/src/app/shared/components/action-bar-items/action-bar-items.component.scss create mode 100644 packages/admin-ui/src/app/shared/components/action-bar-items/action-bar-items.component.ts 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 index 59cb2166ab..379507a29e 100644 --- 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 @@ /> + + + diff --git a/packages/admin-ui/src/app/shared/components/action-bar-items/action-bar-items.component.scss b/packages/admin-ui/src/app/shared/components/action-bar-items/action-bar-items.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/admin-ui/src/app/shared/components/action-bar-items/action-bar-items.component.ts b/packages/admin-ui/src/app/shared/components/action-bar-items/action-bar-items.component.ts new file mode 100644 index 0000000000..8b1995518a --- /dev/null +++ b/packages/admin-ui/src/app/shared/components/action-bar-items/action-bar-items.component.ts @@ -0,0 +1,80 @@ +import { + ChangeDetectionStrategy, + Component, + HostBinding, + Input, + OnChanges, + OnInit, + SimpleChanges, +} from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { ActionBarItem } from '@vendure/admin-ui/src/app/core/providers/nav-builder/nav-builder-types'; +import { BehaviorSubject, combineLatest, Observable, of } from 'rxjs'; +import { filter, map } from 'rxjs/operators'; +import { assertNever } from 'shared/shared-utils'; + +import { NavBuilderService } from '../../../core/providers/nav-builder/nav-builder.service'; + +@Component({ + selector: 'vdr-action-bar-items', + templateUrl: './action-bar-items.component.html', + styleUrls: ['./action-bar-items.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ActionBarItemsComponent implements OnInit, OnChanges { + @HostBinding('attr.data-location-id') + @Input() + locationId: string; + + items$: Observable; + private locationId$ = new BehaviorSubject(''); + + constructor(private navBuilderService: NavBuilderService, private route: ActivatedRoute) {} + + ngOnInit() { + this.items$ = combineLatest(this.navBuilderService.actionBarConfig$, this.locationId$).pipe( + map(([items, locationId]) => items.filter(config => config.locationId === locationId)), + ); + } + + ngOnChanges(changes: SimpleChanges): void { + if ('locationId' in changes) { + this.locationId$.next(changes['locationId'].currentValue); + } + } + + handleClick(event: MouseEvent, item: ActionBarItem) { + if (typeof item.onClick === 'function') { + item.onClick(event, this.route); + } + } + + getRouterLink(item: ActionBarItem): any[] | null { + return this.navBuilderService.getRouterLink(item, this.route); + } + + getButtonStyles(item: ActionBarItem): string[] { + const styles = ['btn']; + if (item.buttonStyle && item.buttonStyle === 'link') { + styles.push('btn-link'); + return styles; + } + styles.push(this.getButtonColorClass(item)); + return styles; + } + + private getButtonColorClass(item: ActionBarItem): string { + switch (item.buttonColor) { + case undefined: + case 'primary': + return item.buttonStyle === 'outline' ? 'btn-outline' : 'btn-primary'; + case 'success': + return item.buttonStyle === 'outline' ? 'btn-success-outline' : 'btn-success'; + case 'warning': + return item.buttonStyle === 'outline' ? 'btn-warning-outline' : 'btn-warning'; + default: + assertNever(item.buttonColor); + return ''; + } + } +} diff --git a/packages/admin-ui/src/app/shared/shared.module.ts b/packages/admin-ui/src/app/shared/shared.module.ts index d32da97721..4f9b5bb2e4 100644 --- a/packages/admin-ui/src/app/shared/shared.module.ts +++ b/packages/admin-ui/src/app/shared/shared.module.ts @@ -8,6 +8,7 @@ import { NgSelectModule } from '@ng-select/ng-select'; import { TranslateModule } from '@ngx-translate/core'; import { NgxPaginationModule } from 'ngx-pagination'; +import { ActionBarItemsComponent } from './components/action-bar-items/action-bar-items.component'; import { ActionBarComponent, ActionBarLeftComponent, @@ -17,7 +18,6 @@ import { IfPermissionsDirective } from './directives/if-permissions.directive'; import { HasPermissionPipe } from './pipes/has-permission.pipe'; import { ModalService } from './providers/modal/modal.service'; import { CanDeactivateDetailGuard } from './providers/routing/can-deactivate-detail-guard'; -import { AffixedInputComponent } from './shared-declarations'; import { PercentageSuffixInputComponent } from './shared-declarations'; import { ChipComponent } from './shared-declarations'; import { ConfigurableInputComponent } from './shared-declarations'; @@ -35,7 +35,7 @@ import { FacetValueSelectorComponent } from './shared-declarations'; import { FormFieldControlDirective } from './shared-declarations'; import { FormFieldComponent } from './shared-declarations'; import { FormItemComponent } from './shared-declarations'; -import { FormattedAddressComponent } from './shared-declarations'; +import { AffixedInputComponent } from './shared-declarations'; import { ItemsPerPageControlsComponent } from './shared-declarations'; import { LabeledDataComponent } from './shared-declarations'; import { LanguageSelectorComponent } from './shared-declarations'; @@ -56,6 +56,7 @@ import { FileSizePipe } from './shared-declarations'; import { SentenceCasePipe } from './shared-declarations'; import { SortPipe } from './shared-declarations'; import { StringToColorPipe } from './shared-declarations'; +import { FormattedAddressComponent } from './shared-declarations'; const IMPORTS = [ ClarityModule, @@ -114,6 +115,7 @@ const DECLARATIONS = [ ObjectTreeComponent, IfPermissionsDirective, HasPermissionPipe, + ActionBarItemsComponent, ]; @NgModule({