feat(admin-ui): Add "allocated" and "saleable" values to Variant form

Closes #554

packages/admin-ui/i18n-coverage.json

@@ -1,46 +1,46 @@
 {
-  "generatedOn": "2020-11-18T10:02:11.129Z",
-  "lastCommit": "078de4094b9eaa486e8337fc90c575302a91b590",
+  "generatedOn": "2020-11-19T13:33:04.322Z",
+  "lastCommit": "7a9ba233b74b9eaae0f100a19f7e84e2b7c35a0f",
   "translationStatus": {
     "cs": {
-      "tokenCount": 688,
-      "translatedCount": 687,
-      "percentage": 100
+      "tokenCount": 693,
+      "translatedCount": 688,
+      "percentage": 99
     },
     "de": {
-      "tokenCount": 688,
+      "tokenCount": 693,
       "translatedCount": 597,
-      "percentage": 87
+      "percentage": 86
     },
     "en": {
-      "tokenCount": 688,
-      "translatedCount": 687,
-      "percentage": 100
+      "tokenCount": 693,
+      "translatedCount": 688,
+      "percentage": 99
     },
     "es": {
-      "tokenCount": 688,
+      "tokenCount": 693,
       "translatedCount": 455,
       "percentage": 66
     },
     "pl": {
-      "tokenCount": 688,
+      "tokenCount": 693,
       "translatedCount": 552,
       "percentage": 80
     },
     "pt_BR": {
-      "tokenCount": 688,
+      "tokenCount": 693,
       "translatedCount": 643,
       "percentage": 93
     },
     "zh_Hans": {
-      "tokenCount": 688,
+      "tokenCount": 693,
       "translatedCount": 536,
-      "percentage": 78
+      "percentage": 77
     },
     "zh_Hant": {
-      "tokenCount": 688,
+      "tokenCount": 693,
       "translatedCount": 536,
-      "percentage": 78
+      "percentage": 77
     }
   }
 }

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

@@ -67,7 +67,7 @@
                                     <ng-template #taxCategoryLabel>
                                         <label class="clr-control-label">{{
                                             'catalog.tax-category' | translate
-                                            }}</label>
+                                        }}</label>
                                         <div class="tax-category-label">
                                             {{ getTaxCategoryName(formGroup) }}
                                         </div>
@@ -94,7 +94,7 @@
                             <div class="variant-form-input-row">
                                 <clr-select-container *vdrIfPermissions="'UpdateCatalog'">
                                     <label
-                                    >{{ 'catalog.track-inventory' | translate }}
+                                        >{{ 'catalog.track-inventory' | translate }}
                                         <vdr-help-tooltip
                                             [content]="'catalog.track-inventory-tooltip' | translate"
                                         ></vdr-help-tooltip>
@@ -112,7 +112,12 @@
                                     </select>
                                 </clr-select-container>
                                 <clr-input-container>
-                                    <label>{{ 'catalog.stock-on-hand' | translate }}</label>
+                                    <label
+                                        >{{ 'catalog.stock-on-hand' | translate }}
+                                        <vdr-help-tooltip
+                                            [content]="'catalog.stock-on-hand-tooltip' | translate"
+                                        ></vdr-help-tooltip
+                                    ></label>
                                     <input
                                         [class.inventory-untracked]="inventoryIsNotTracked(formGroup)"
                                         clrInput
@@ -124,9 +129,35 @@
                                         [vdrDisabled]="inventoryIsNotTracked(formGroup)"
                                     />
                                 </clr-input-container>
+                                <div [class.inventory-untracked]="inventoryIsNotTracked(formGroup)">
+                                    <label class="clr-control-label"
+                                        >{{ 'catalog.stock-allocated' | translate }}
+                                        <vdr-help-tooltip
+                                            [content]="'catalog.stock-allocated-tooltip' | translate"
+                                        ></vdr-help-tooltip
+                                    ></label>
+                                    <div class="value">
+                                        {{ variant.stockAllocated }}
+                                    </div>
+                                </div>
+                                <div [class.inventory-untracked]="inventoryIsNotTracked(formGroup)">
+                                    <label class="clr-control-label"
+                                        >{{ 'catalog.stock-saleable' | translate }}
+                                        <vdr-help-tooltip
+                                            [content]="'catalog.stock-saleable-tooltip' | translate"
+                                        ></vdr-help-tooltip
+                                    ></label>
+                                    <div class="value">
+                                        {{ getSaleableStockLevel(variant) }}
+                                    </div>
+                                </div>
                             </div>
+
                             <div class="variant-form-input-row">
-                                <div class="out-of-stock-threshold-wrapper" [class.inventory-untracked]="inventoryIsNotTracked(formGroup)">
+                                <div
+                                    class="out-of-stock-threshold-wrapper"
+                                    [class.inventory-untracked]="inventoryIsNotTracked(formGroup)"
+                                >
                                     <label class="clr-control-label"
                                         >{{ 'catalog.out-of-stock-threshold' | translate
                                         }}<vdr-help-tooltip
@@ -142,7 +173,7 @@
                                                 [readonly]="!('UpdateCatalog' | hasPermission)"
                                                 [vdrDisabled]="
                                                     formGroup.get('useGlobalOutOfStockThreshold')?.value !==
-                                                    false || inventoryIsNotTracked(formGroup)
+                                                        false || inventoryIsNotTracked(formGroup)
                                                 "
                                             />
                                         </clr-input-container>
@@ -152,9 +183,16 @@
                                                 clrToggle
                                                 name="useGlobalOutOfStockThreshold"
                                                 formControlName="useGlobalOutOfStockThreshold"
-                                                [vdrDisabled]="!('UpdateCatalog' | hasPermission) || inventoryIsNotTracked(formGroup)"
+                                                [vdrDisabled]="
+                                                    !('UpdateCatalog' | hasPermission) ||
+                                                    inventoryIsNotTracked(formGroup)
+                                                "
                                             />
-                                            <label>{{ 'catalog.use-global-value' | translate }} ({{ globalOutOfStockThreshold }})</label>
+                                            <label
+                                                >{{ 'catalog.use-global-value' | translate }} ({{
+                                                    globalOutOfStockThreshold
+                                                }})</label
+                                            >
                                         </clr-toggle-wrapper>
                                     </div>
                                 </div>

packages/admin-ui/src/lib/catalog/src/components/product-variants-list/product-variants-list.component.ts

@@ -137,6 +137,13 @@ export class ProductVariantsListComponent implements OnChanges, OnInit, OnDestro
         return '';
     }
 
+    getSaleableStockLevel(variant: ProductWithVariants.Variants) {
+        const effectiveOutOfStockThreshold = variant.useGlobalOutOfStockThreshold
+            ? this.globalOutOfStockThreshold
+            : variant.outOfStockThreshold;
+        return variant.stockOnHand - variant.stockAllocated - effectiveOutOfStockThreshold;
+    }
+
     areAllSelected(): boolean {
         return !!this.variants && this.selectedVariantIds.length === this.variants.length;
     }

packages/admin-ui/src/lib/static/i18n-messages/cs.json

@@ -125,7 +125,12 @@
     "sku": "SKU",
     "slug": "Odkaz",
     "slug-pattern-error": "Špatný formát odkazu",
+    "stock-allocated": "",
+    "stock-allocated-tooltip": "",
     "stock-on-hand": "Sklad",
+    "stock-on-hand-tooltip": "",
+    "stock-saleable": "",
+    "stock-saleable-tooltip": "",
     "tax-category": "Skupina daní",
     "taxes": "Daně",
     "track-inventory": "Dopočítávat sklad",
@@ -719,4 +724,4 @@
     "job-result": "Výsledek úlohy",
     "job-state": "Stav úlohy"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/de.json

@@ -125,7 +125,12 @@
     "sku": "Artikelnummer",
     "slug": "Slug",
     "slug-pattern-error": "",
+    "stock-allocated": "",
+    "stock-allocated-tooltip": "",
     "stock-on-hand": "Bestand",
+    "stock-on-hand-tooltip": "",
+    "stock-saleable": "",
+    "stock-saleable-tooltip": "",
     "tax-category": "Steuerkategorie",
     "taxes": "Steuern",
     "track-inventory": "Bestand verfolgen",

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

@@ -125,7 +125,12 @@
     "sku": "SKU",
     "slug": "Slug",
     "slug-pattern-error": "Slug is invalid",
+    "stock-allocated": "Allocated",
+    "stock-allocated-tooltip": "The number of units allocated to Orders which have checked out but not yet been fulfilled",
     "stock-on-hand": "Stock",
+    "stock-on-hand-tooltip": "Stock on hand - the number of physical units available in stock",
+    "stock-saleable": "Saleable",
+    "stock-saleable-tooltip": "The number of saleable units, comprising the stock on hand - allocated, taking into account the out-of-stock threshold",
     "tax-category": "Tax category",
     "taxes": "Taxes",
     "track-inventory": "Track inventory",

packages/admin-ui/src/lib/static/i18n-messages/es.json

@@ -125,7 +125,12 @@
     "sku": "SKU",
     "slug": "Slug",
     "slug-pattern-error": "",
+    "stock-allocated": "",
+    "stock-allocated-tooltip": "",
     "stock-on-hand": "Inventario disponible",
+    "stock-on-hand-tooltip": "",
+    "stock-saleable": "",
+    "stock-saleable-tooltip": "",
     "tax-category": "Categoría de impuestos",
     "taxes": "Impuestos",
     "track-inventory": "",

packages/admin-ui/src/lib/static/i18n-messages/pl.json

@@ -125,7 +125,12 @@
     "sku": "SKU",
     "slug": "Slug",
     "slug-pattern-error": "",
+    "stock-allocated": "",
+    "stock-allocated-tooltip": "",
     "stock-on-hand": "Stan magazynowy",
+    "stock-on-hand-tooltip": "",
+    "stock-saleable": "",
+    "stock-saleable-tooltip": "",
     "tax-category": "Kategoria podatkowa",
     "taxes": "Podatki",
     "track-inventory": "Śledź magazyn",

packages/admin-ui/src/lib/static/i18n-messages/pt_BR.json

@@ -125,7 +125,12 @@
     "sku": "SKU",
     "slug": "Slug",
     "slug-pattern-error": "",
+    "stock-allocated": "",
+    "stock-allocated-tooltip": "",
     "stock-on-hand": "Estoque",
+    "stock-on-hand-tooltip": "",
+    "stock-saleable": "",
+    "stock-saleable-tooltip": "",
     "tax-category": "Categoria de impostos",
     "taxes": "Impostos",
     "track-inventory": "Rastrear inventário",

packages/admin-ui/src/lib/static/i18n-messages/zh_Hans.json

@@ -125,7 +125,12 @@
     "sku": "商品库存编码",
     "slug": "名称缩写",
     "slug-pattern-error": "",
+    "stock-allocated": "",
+    "stock-allocated-tooltip": "",
     "stock-on-hand": "库存",
+    "stock-on-hand-tooltip": "",
+    "stock-saleable": "",
+    "stock-saleable-tooltip": "",
     "tax-category": "税表分类",
     "taxes": "价格（含税）",
     "track-inventory": "跟踪库存",

packages/admin-ui/src/lib/static/i18n-messages/zh_Hant.json

@@ -125,7 +125,12 @@
     "sku": "商品庫存編碼",
     "slug": "名稱缩写",
     "slug-pattern-error": "",
+    "stock-allocated": "",
+    "stock-allocated-tooltip": "",
     "stock-on-hand": "庫存",
+    "stock-on-hand-tooltip": "",
+    "stock-saleable": "",
+    "stock-saleable-tooltip": "",
     "tax-category": "税表分類",
     "taxes": "價格（連税）",
     "track-inventory": "跟踪庫存",