chore(admin-ui): Style tweaks

packages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.html

@@ -54,17 +54,19 @@
                 <vdr-card *vdrIfMultichannel [title]="'common.channels' | translate">
                     <vdr-form-item *vdrIfDefaultChannelActive>
                         <div class="flex channel-assignment">
-                            <ng-container *ngFor="let channel of productChannels$ | async">
-                                <vdr-chip
-                                    *ngIf="!isDefaultChannel(channel.code)"
-                                    icon="times-circle"
-                                    (iconClick)="removeFromChannel(channel.id)"
-                                >
-                                    <vdr-channel-badge [channelCode]="channel.code"></vdr-channel-badge>
-                                    {{ channel.code | channelCodeToLabel }}
-                                </vdr-chip>
-                            </ng-container>
-                            <button class="btn btn-sm" (click)="assignToChannel()">
+                            <div class="mb-2">
+                                <ng-container *ngFor="let channel of productChannels$ | async">
+                                    <vdr-chip
+                                        *ngIf="!isDefaultChannel(channel.code)"
+                                        icon="times-circle"
+                                        (iconClick)="removeFromChannel(channel.id)"
+                                    >
+                                        <vdr-channel-badge [channelCode]="channel.code"></vdr-channel-badge>
+                                        {{ channel.code | channelCodeToLabel }}
+                                    </vdr-chip>
+                                </ng-container>
+                            </div>
+                            <button class="button" (click)="assignToChannel()">
                                 <clr-icon shape="layers"></clr-icon>
                                 {{ 'catalog.assign-to-channel' | translate }}
                             </button>
@@ -83,7 +85,7 @@
                     </vdr-chip>
                 </div>
                 <div>
-                    <a [routerLink]="['options']" class="button" *vdrIfPermissions="updatePermissions">
+                    <a [routerLink]="['options']" class="button mt-2" *vdrIfPermissions="updatePermissions">
                         <clr-icon shape="pencil"></clr-icon>
                         {{ 'catalog.edit-options' | translate }}
                     </a>
@@ -100,7 +102,7 @@
                 </div>
                 <div>
                     <button
-                        class="btn btn-sm btn-secondary"
+                        class="button mt-2"
                         *vdrIfPermissions="updatePermissions"
                         (click)="selectProductFacetValue()"
                     >

packages/admin-ui/src/lib/catalog/src/components/product-variant-detail/product-variant-detail.component.html

@@ -61,7 +61,7 @@
                 <div>
                     <a
                         [routerLink]="['../../', 'options']"
-                        class="button"
+                        class="button mt-2"
                         *vdrIfPermissions="updatePermissions"
                     >
                         <clr-icon shape="pencil"></clr-icon>
@@ -80,7 +80,7 @@
                 </div>
                 <div>
                     <button
-                        class="btn btn-sm btn-secondary"
+                        class="button mt-2"
                         *vdrIfPermissions="updatePermissions"
                         (click)="selectFacetValue()"
                     >
@@ -226,37 +226,57 @@
                             >
                         </clr-toggle-wrapper>
                     </vdr-form-item>
-
-                    <ng-container
-                        *ngFor="let stockLevel of stockLevelsForm.controls"
-                        [formGroup]="stockLevel"
+                </div>
+                <div
+                    class="form-grid stock-levels"
+                    *ngFor="let stockLevel of stockLevelsForm.controls"
+                    [formGroup]="stockLevel"
+                >
+                    <vdr-form-field
+                        [label]="
+                            stockLevel.get('stockLocationName')?.value +
+                            ': ' +
+                            ('catalog.stock-on-hand' | translate)
+                        "
+                        [for]="'stockOnHand_' + stockLevel.get('stockLocationId')?.value"
                     >
-                        <vdr-form-field
-                            [label]="
-                                stockLevel.get('stockLocationName')?.value +
-                                ': ' +
-                                ('catalog.stock-on-hand' | translate)
-                            "
-                            [for]="'stockOnHand_' + stockLevel.get('stockLocationId')?.value"
-                        >
-                            <input
-                                [id]="'stockOnHand_' + stockLevel.get('stockLocationId')?.value"
-                                type="number"
-                                formControlName="stockOnHand"
-                                [readonly]="!(updatePermissions | hasPermission)"
-                            />
-                        </vdr-form-field>
-                        <vdr-form-item
-                            [label]="
-                                stockLevel.get('stockLocationName')?.value +
-                                ': ' +
-                                ('catalog.stock-allocated' | translate)
-                            "
-                        >
-                            {{ stockLevel.get('stockAllocated')?.value }}
-                        </vdr-form-item>
-                    </ng-container>
+                        <input
+                            [id]="'stockOnHand_' + stockLevel.get('stockLocationId')?.value"
+                            type="number"
+                            formControlName="stockOnHand"
+                            [readonly]="!(updatePermissions | hasPermission)"
+                        />
+                    </vdr-form-field>
+                    <vdr-form-item
+                        [label]="
+                            stockLevel.get('stockLocationName')?.value +
+                            ': ' +
+                            ('catalog.stock-allocated' | translate)
+                        "
+                    >
+                        {{ stockLevel.get('stockAllocated')?.value }}
+                    </vdr-form-item>
                 </div>
+                <ng-container *ngIf="unusedStockLocation$ | async as unusedStockLocations">
+                    <div *ngIf="unusedStockLocations.length">
+                        <vdr-dropdown>
+                            <button class="button mt-2" vdrDropdownTrigger>
+                                <clr-icon shape="plus"></clr-icon>
+                                {{ 'catalog.add-stock-location' | translate }}
+                                <clr-icon shape="ellipsis-vertical"></clr-icon>
+                            </button>
+                            <vdr-dropdown-menu>
+                                <button
+                                    vdrDropdownItem
+                                    *ngFor="let stockLocation of unusedStockLocations"
+                                    (click)="addStockLocation(stockLocation)"
+                                >
+                                    <clr-icon shape="map-marker"></clr-icon> {{ stockLocation.name }}
+                                </button>
+                            </vdr-dropdown-menu>
+                        </vdr-dropdown>
+                    </div>
+                </ng-container>
             </vdr-card>
         </vdr-page-block>
     </vdr-page-detail-layout>

packages/admin-ui/src/lib/catalog/src/components/product-variant-detail/product-variant-detail.component.scss

@@ -8,3 +8,8 @@ vdr-product-variant-quick-jump {
     flex: 1;
     margin-right: calc(var(--space-unit) * 2);
 }
+.stock-levels {
+    margin-top: calc(var(--space-unit) * 2);
+    padding-top: calc(var(--space-unit) * 2);
+    border-top: 1px solid var(--color-weight-150);
+}

packages/admin-ui/src/lib/catalog/src/components/product-variant-detail/product-variant-detail.component.ts

@@ -99,7 +99,7 @@ export class ProductVariantDetailComponent
     >([]);
     assetChanges: SelectedAssets = {};
     taxCategories$: Observable<Array<ItemOf<GetProductVariantDetailQuery, 'taxCategories'>>>;
-    stockLocations$: Observable<ItemOf<GetProductVariantDetailQuery, 'stockLocations'>>;
+    unusedStockLocation$: Observable<Array<ItemOf<GetProductVariantDetailQuery, 'stockLocations'>>>;
     channelPriceIncludesTax$: Observable<boolean>;
     readonly GlobalFlag = GlobalFlag;
     globalTrackInventory: boolean;
@@ -125,6 +125,13 @@ export class ProductVariantDetailComponent
             this.changeDetector.markForCheck();
         });
         this.taxCategories$ = this.result$.pipe(map(data => data.taxCategories.items));
+        const stockLocations$ = this.result$.pipe(map(data => data.stockLocations.items));
+        this.unusedStockLocation$ = combineLatest(this.entity$, stockLocations$).pipe(
+            map(([entity, stockLocations]) => {
+                const usedIds = entity.stockLevels.map(l => l.stockLocation.id);
+                return stockLocations.filter(l => !usedIds.includes(l.id));
+            }),
+        );
         this.channelPriceIncludesTax$ = this.dataService.settings
             .getActiveChannel('cache-first')
             .refetchOnChannelChange()
@@ -153,6 +160,17 @@ export class ProductVariantDetailComponent
         this.destroy();
     }
 
+    addStockLocation(stockLocation: ItemOf<GetProductVariantDetailQuery, 'stockLocations'>) {
+        this.stockLevelsForm.push(
+            this.formBuilder.group({
+                stockLocationId: stockLocation.id,
+                stockLocationName: stockLocation.name,
+                stockOnHand: 0,
+                stockAllocated: 0,
+            }),
+        );
+    }
+
     save() {
         combineLatest(this.entity$, this.languageCode$)
             .pipe(

packages/admin-ui/src/lib/catalog/src/components/product-variant-list/product-variant-list.component.html

@@ -65,7 +65,9 @@
     </vdr-dt2-column>
     <vdr-dt2-column [heading]="'catalog.name' | translate" [optional]="false" [sort]="sorts.get('name')">
         <ng-template let-variant="item">
-            <a class="button-ghost" [routerLink]="['/catalog/inventory', variant.productId, 'variants', variant.id]"
+            <a
+                class="button-ghost"
+                [routerLink]="['/catalog/inventory', variant.productId, 'variants', variant.id]"
                 ><span>{{ variant.name }}</span
                 ><clr-icon shape="arrow right"
             /></a>
@@ -103,9 +105,8 @@
 
     <vdr-dt2-column [heading]="'catalog.stock-on-hand' | translate" [hiddenByDefault]="false">
         <ng-template let-variant="item">
-            <vdr-chip *ngFor="let stockLevel of variant.stockLevels">
+            <vdr-chip *ngFor="let stockLevel of variant.stockLevels" [title]="stockLevel.stockLocation?.name">
                 <div class="flex center">
-                  <!--  <clr-icon shape="map-marker" [title]="stockLevel.stockLocation.name"></clr-icon>-->
                     <div>
                         {{ stockLevel.stockOnHand
                         }}<span class="ml-1" *ngIf="stockLevel.stockAllocated"
@@ -116,8 +117,5 @@
             </vdr-chip>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-custom-field-column
-        *ngFor="let field of customFields"
-        [customField]="field"
-        [sorts]="sorts" />
+    <vdr-dt2-custom-field-column *ngFor="let field of customFields" [customField]="field" [sorts]="sorts" />
 </vdr-data-table-2>

packages/admin-ui/src/lib/core/src/shared/components/page-body/page-body.component.scss

@@ -1,4 +1,4 @@
 :host {
     display: block;
-    padding-bottom: calc(var(--space-unit) * 4);
+    padding-bottom: calc(var(--space-unit) * 8);
 }

packages/admin-ui/src/lib/core/src/shared/components/page-header-tabs/page-header-tabs.component.html

@@ -6,6 +6,7 @@
         routerLinkActive="active"
         [routerLinkActiveOptions]="routerLinkActiveOptions"
     >
+        <clr-icon *ngIf="tab.icon" [attr.shape]="tab.icon"></clr-icon>
         {{ tab.label | translate }}
     </a>
 </div>

packages/admin-ui/src/lib/order/src/components/order-data-table/order-data-table.component.html

@@ -132,7 +132,7 @@
             </tr>
             <ng-container *ngFor="let discount of order.discounts">
                 <tr class="order-adjustment" *ngIf="discount.type !== 'OTHER'">
-                    <td [attr.colspan]="visibleSortedColumns.length" class="">
+                    <td [attr.colspan]="visibleSortedColumns.length - 1" class="">
                         <a [routerLink]="getPromotionLink(discount)">{{ discount.description }}</a>
                         <vdr-chip *ngIf="getCouponCodeForAdjustment(order, discount) as couponCode">{{
                             couponCode