feat(admin-ui): Display color-coded label for Channels

packages/admin-ui/src/app/core/components/channel-switcher/channel-switcher.component.html

@@ -1,7 +1,8 @@
 <ng-container *ngIf="channels$ | async as channels">
     <vdr-dropdown *ngIf="1 < channels.length">
         <button class="btn btn-link active-channel" vdrDropdownTrigger>
-            <span class="active-channel">{{ (activeChannel$ | async)?.code }}</span>
+            <vdr-channel-badge [channelCode]="activeChannelCode$ | async"></vdr-channel-badge>
+            <span class="active-channel">{{ activeChannelLabel$ | async | translate }}</span>
             <span class="trigger"><clr-icon shape="caret down"></clr-icon></span>
         </button>
         <vdr-dropdown-menu vdrPosition="bottom-right">
@@ -11,7 +12,8 @@
                 vdrDropdownItem
                 (click)="setActiveChannel(channel.id)"
             >
-                {{ channel.code }}
+                <vdr-channel-badge [channelCode]="channel.code"></vdr-channel-badge>
+                {{ getChannelLabel(channel.code) | translate }}
             </button>
         </vdr-dropdown-menu>
     </vdr-dropdown>

packages/admin-ui/src/app/core/components/channel-switcher/channel-switcher.component.ts

@@ -1,10 +1,13 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
+import { DEFAULT_CHANNEL_CODE } from 'shared/shared-constants';
+import { notNullOrUndefined } from 'shared/shared-utils';
 
 import { CurrentUserChannel } from '../../../common/generated-types';
 import { DataService } from '../../../data/providers/data.service';
+import { _ } from '../../providers/i18n/mark-for-extraction';
 import { LocalStorageService } from '../../providers/local-storage/local-storage.service';
-import set = Reflect.set;
 
 @Component({
     selector: 'vdr-channel-switcher',
@@ -14,16 +17,30 @@ import set = Reflect.set;
 })
 export class ChannelSwitcherComponent implements OnInit {
     channels$: Observable<CurrentUserChannel[]>;
-    activeChannel$: Observable<CurrentUserChannel | null>;
+    activeChannelLabel$: Observable<string>;
+    activeChannelCode$: Observable<string>;
     constructor(private dataService: DataService, private localStorageService: LocalStorageService) {}
 
     ngOnInit() {
         this.channels$ = this.dataService.client.userStatus().mapStream(data => data.userStatus.channels);
-        this.activeChannel$ = this.dataService.client
+        const activeChannel$ = this.dataService.client
             .userStatus()
-            .mapStream(
-                data => data.userStatus.channels.find(c => c.id === data.userStatus.activeChannelId) || null,
-            );
+            .mapStream(data => data.userStatus.channels.find(c => c.id === data.userStatus.activeChannelId))
+            .pipe(filter(notNullOrUndefined));
+        this.activeChannelLabel$ = activeChannel$.pipe(map(channel => this.getChannelLabel(channel.code)));
+        this.activeChannelCode$ = activeChannel$.pipe(map(channel => channel.code));
+    }
+
+    getChannelLabel(channelCode: string): string {
+        if (this.isDefaultChannel(channelCode)) {
+            return _('common.default-channel');
+        } else {
+            return channelCode;
+        }
+    }
+
+    isDefaultChannel(channelCode: string): boolean {
+        return channelCode === DEFAULT_CHANNEL_CODE;
     }
 
     setActiveChannel(channelId: string) {

packages/admin-ui/src/app/settings/components/role-list/role-list.component.html

@@ -1,7 +1,7 @@
 <vdr-action-bar>
     <vdr-ab-right>
         <vdr-action-bar-items locationId="role-list"></vdr-action-bar-items>
-        <a class="btn btn-primary" [routerLink]="['./create']">
+        <a class="btn btn-primary" [routerLink]="['./create']" *vdrIfPermissions="'CreateAdministrator'">
             <clr-icon shape="plus"></clr-icon>
             {{ 'settings.create-new-role' | translate }}
         </a>
@@ -16,21 +16,33 @@
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
 >
-    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'common.description' | translate }}</vdr-dt-column>
+    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>
+    <vdr-dt-column>{{ 'settings.channel' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'settings.permissions' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <ng-template let-role="item">
-        <td class="left align-middle">{{ role.code }}</td>
         <td class="left align-middle">{{ role.description }}</td>
+        <td class="left align-middle"><span *ngIf="!isDefaultRole(role)">{{ role.code }}</span></td>
         <td class="left align-middle">
             <ng-container *ngIf="!isDefaultRole(role)">
+                <vdr-chip *ngFor="let channel of role.channels">
+                    <vdr-channel-badge [channelCode]="channel.code"></vdr-channel-badge>
+                    {{ channel.code }}
+                </vdr-chip>
+            </ng-container>
+        </td>
+        <td class="left align-middle">
+            <ng-container *ngIf="!isDefaultRole(role); else defaultRole">
                 <vdr-chip *ngFor="let permission of role.permissions">{{ permission }}</vdr-chip>
             </ng-container>
+            <ng-template #defaultRole>
+                <span class="default-role-label">{{ 'settings.default-role-label' | translate }}</span>
+            </ng-template>
         </td>
         <td class="right align-middle">
             <vdr-table-row-action
-                [disabled]="isDefaultRole(role)"
+                *ngIf="!isDefaultRole(role)"
                 iconShape="edit"
                 [label]="'common.edit' | translate"
                 [linkTo]="['./', role.id]"

packages/admin-ui/src/app/settings/components/role-list/role-list.component.scss

@@ -0,0 +1,5 @@
+@import "variables";
+
+.default-role-label {
+    color: $color-grey-400;
+}

packages/admin-ui/src/app/shared/components/channel-badge/channel-badge.component.html

@@ -0,0 +1,3 @@
+<div class="channel-badge"
+    [style.background-color]="(isDefaultChannel ? '' : channelCode) | stringToColor"
+></div>

packages/admin-ui/src/app/shared/components/channel-badge/channel-badge.component.scss

@@ -0,0 +1,17 @@
+@import "variables";
+
+:host {
+    display: inline-block;
+
+    button & {
+        margin-bottom: -1px;
+    }
+}
+
+.channel-badge {
+    width: 8px;
+    height: 12px;
+    border-radius: 1px;
+    margin: 0 6px;
+    border: 1px solid transparentize($color-grey-700, 0.8);
+}

packages/admin-ui/src/app/shared/components/channel-badge/channel-badge.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { DEFAULT_CHANNEL_CODE } from 'shared/shared-constants';
+
+@Component({
+    selector: 'vdr-channel-badge',
+    templateUrl: './channel-badge.component.html',
+    styleUrls: ['./channel-badge.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ChannelBadgeComponent {
+    @Input() channelCode: string;
+    get isDefaultChannel(): boolean {
+        return this.channelCode === DEFAULT_CHANNEL_CODE;
+    }
+}

packages/admin-ui/src/app/shared/shared-declarations.ts

@@ -8,6 +8,7 @@ export { AssetFileInputComponent } from './components/asset-file-input/asset-fil
 export { AssetGalleryComponent } from './components/asset-gallery/asset-gallery.component';
 export { AssetPickerDialogComponent } from './components/asset-picker-dialog/asset-picker-dialog.component';
 export { PercentageSuffixInputComponent } from './components/affixed-input/percentage-suffix-input.component';
+export { ChannelBadgeComponent } from './components/channel-badge/channel-badge.component';
 export { ChipComponent } from './components/chip/chip.component';
 export { ConfigurableInputComponent } from './components/configurable-input/configurable-input.component';
 export { CurrencyInputComponent } from './components/currency-input/currency-input.component';

packages/admin-ui/src/app/shared/shared.module.ts

@@ -24,6 +24,7 @@ import {
     AssetFileInputComponent,
     AssetGalleryComponent,
     AssetPickerDialogComponent,
+    ChannelBadgeComponent,
     ChipComponent,
     ConfigurableInputComponent,
     CurrencyInputComponent,
@@ -130,6 +131,7 @@ const DECLARATIONS = [
     AssetPickerDialogComponent,
     EntityInfoComponent,
     DatetimePickerComponent,
+    ChannelBadgeComponent,
 ];
 
 @NgModule({

packages/admin-ui/src/i18n-messages/en.json

@@ -116,6 +116,7 @@
     "create": "Create",
     "created-at": "Created at",
     "custom-fields": "Custom fields",
+    "default-channel": "Default channel",
     "delete": "Delete",
     "description": "Description",
     "disabled": "Disabled",
@@ -549,6 +550,7 @@
     "create-zone": "Create zone",
     "currency": "Currency",
     "customer": "Customer",
+    "default-role-label": "This is a default Role and cannot be modified",
     "default-shipping-zone": "Default shipping zone",
     "default-tax-zone": "Default tax zone",
     "delete": "Delete",