feat(admin-ui): Improve naming & layout of catalog & stock locations

BREAKING CHANGE: In the Admin UI, the "stock locations" list and detail views have been moved from the "catalog" module to the "settings" module. Also, the menu item & breadcrumb for "inventory" has been renamed to "products". This is an end-user breaking change rather than a code breaking change. Any UI extensions that link to a `/catalog/inventory/...` route will still work as there is a redirect in place to `/catalog/products/...`.
vendure-ecommerce · Sep 26, 2023 · 8452300 · 8452300
1 parent fee995c
commit 8452300
Show file tree

Hide file tree

Showing 32 changed files with 212 additions and 160 deletions.
diff --git a/packages/admin-ui/i18n-coverage.json b/packages/admin-ui/i18n-coverage.json
@@ -1,80 +1,80 @@
 {
-  "generatedOn": "2023-09-26T07:24:07.342Z",
-  "lastCommit": "f0e50f55799dd812700da1876479466694ae648b",
+  "generatedOn": "2023-09-26T12:56:03.801Z",
+  "lastCommit": "fee995c967c5487e979e374802f651ce3120db6d",
   "translationStatus": {
     "ar": {
-      "tokenCount": 759,
-      "translatedCount": 758,
+      "tokenCount": 760,
+      "translatedCount": 757,
       "percentage": 100
     },
     "cs": {
-      "tokenCount": 759,
-      "translatedCount": 563,
+      "tokenCount": 760,
+      "translatedCount": 564,
       "percentage": 74
     },
     "de": {
-      "tokenCount": 759,
-      "translatedCount": 758,
+      "tokenCount": 760,
+      "translatedCount": 757,
       "percentage": 100
     },
     "en": {
-      "tokenCount": 759,
-      "translatedCount": 758,
+      "tokenCount": 760,
+      "translatedCount": 757,
       "percentage": 100
     },
     "es": {
-      "tokenCount": 759,
-      "translatedCount": 758,
+      "tokenCount": 760,
+      "translatedCount": 757,
       "percentage": 100
     },
     "fr": {
-      "tokenCount": 759,
-      "translatedCount": 754,
+      "tokenCount": 760,
+      "translatedCount": 753,
       "percentage": 99
     },
     "he": {
-      "tokenCount": 759,
-      "translatedCount": 758,
+      "tokenCount": 760,
+      "translatedCount": 757,
       "percentage": 100
     },
     "it": {
-      "tokenCount": 759,
-      "translatedCount": 757,
-      "percentage": 100
+      "tokenCount": 760,
+      "translatedCount": 756,
+      "percentage": 99
     },
     "pl": {
-      "tokenCount": 759,
-      "translatedCount": 398,
-      "percentage": 52
+      "tokenCount": 760,
+      "translatedCount": 399,
+      "percentage": 53
     },
     "pt_BR": {
-      "tokenCount": 759,
-      "translatedCount": 757,
-      "percentage": 100
+      "tokenCount": 760,
+      "translatedCount": 756,
+      "percentage": 99
     },
     "pt_PT": {
-      "tokenCount": 759,
-      "translatedCount": 597,
+      "tokenCount": 760,
+      "translatedCount": 598,
       "percentage": 79
     },
     "ru": {
-      "tokenCount": 759,
-      "translatedCount": 758,
+      "tokenCount": 760,
+      "translatedCount": 757,
       "percentage": 100
     },
     "uk": {
-      "tokenCount": 759,
-      "translatedCount": 587,
+      "tokenCount": 760,
+      "translatedCount": 588,
       "percentage": 77
     },
     "zh_Hans": {
-      "tokenCount": 759,
-      "translatedCount": 533,
+      "tokenCount": 760,
+      "translatedCount": 534,
       "percentage": 70
     },
     "zh_Hant": {
-      "tokenCount": 759,
-      "translatedCount": 379,
+      "tokenCount": 760,
+      "translatedCount": 380,
       "percentage": 50
     }
   }

diff --git a/packages/admin-ui/src/lib/catalog/src/catalog.module.ts b/packages/admin-ui/src/lib/catalog/src/catalog.module.ts
@@ -66,13 +66,6 @@ import {
 import { ProductVariantQuickJumpComponent } from './components/product-variant-quick-jump/product-variant-quick-jump.component';
 import { ProductVariantsEditorComponent } from './components/product-variants-editor/product-variants-editor.component';
 import { ProductVariantsTableComponent } from './components/product-variants-table/product-variants-table.component';
-import { StockLocationDetailComponent } from './components/stock-location-detail/stock-location-detail.component';
-import {
-    assignStockLocationsToChannelBulkAction,
-    deleteStockLocationsBulkAction,
-    removeStockLocationsFromChannelBulkAction,
-} from './components/stock-location-list/stock-location-list-bulk-actions';
-import { StockLocationListComponent } from './components/stock-location-list/stock-location-list.component';
 import { UpdateProductOptionDialogComponent } from './components/update-product-option-dialog/update-product-option-dialog.component';
 import { VariantPriceDetailComponent } from './components/variant-price-detail/variant-price-detail.component';
 
@@ -109,13 +102,12 @@ const CATALOG_COMPONENTS = [
     CreateProductVariantDialogComponent,
     CreateProductOptionGroupDialogComponent,
     ProductVariantQuickJumpComponent,
-    StockLocationListComponent,
 ];
 
 @NgModule({
     imports: [SharedModule, RouterModule.forChild([])],
     exports: [...CATALOG_COMPONENTS],
-    declarations: [...CATALOG_COMPONENTS, StockLocationDetailComponent],
+    declarations: [...CATALOG_COMPONENTS],
     providers: [
         {
             provide: ROUTES,
@@ -147,10 +139,6 @@ export class CatalogModule {
         bulkActionRegistryService.registerBulkAction(removeCollectionsFromChannelBulkAction);
         bulkActionRegistryService.registerBulkAction(deleteCollectionsBulkAction);
 
-        bulkActionRegistryService.registerBulkAction(assignStockLocationsToChannelBulkAction);
-        bulkActionRegistryService.registerBulkAction(removeStockLocationsFromChannelBulkAction);
-        bulkActionRegistryService.registerBulkAction(deleteStockLocationsBulkAction);
-
         pageService.registerPageTab({
             priority: 0,
             location: 'product-list',
@@ -182,30 +170,30 @@ export class CatalogModule {
             route: 'variants',
             component: ProductVariantListComponent,
         });
-        pageService.registerPageTab({
-            priority: 0,
-            location: 'stock-location-detail',
-            tab: _('catalog.stock-location'),
-            route: '',
-            component: detailComponentWithResolver({
-                component: StockLocationDetailComponent,
-                query: GetStockLocationDetailDocument,
-                entityKey: 'stockLocation',
-                getBreadcrumbs: entity => [
-                    {
-                        label: entity ? entity.name : _('catalog.create-new-stock-location'),
-                        link: [entity?.id],
-                    },
-                ],
-            }),
-        });
-        pageService.registerPageTab({
-            priority: 0,
-            location: 'product-list',
-            tab: _('catalog.stock-locations'),
-            route: 'stock-locations',
-            component: StockLocationListComponent,
-        });
+        // pageService.registerPageTab({
+        //     priority: 0,
+        //     location: 'stock-location-detail',
+        //     tab: _('catalog.stock-location'),
+        //     route: '',
+        //     component: detailComponentWithResolver({
+        //         component: StockLocationDetailComponent,
+        //         query: GetStockLocationDetailDocument,
+        //         entityKey: 'stockLocation',
+        //         getBreadcrumbs: entity => [
+        //             {
+        //                 label: entity ? entity.name : _('catalog.create-new-stock-location'),
+        //                 link: [entity?.id],
+        //             },
+        //         ],
+        //     }),
+        // });
+        // pageService.registerPageTab({
+        //     priority: 0,
+        //     location: 'product-list',
+        //     tab: _('catalog.stock-locations'),
+        //     route: 'stock-locations',
+        //     component: StockLocationListComponent,
+        // });
         pageService.registerPageTab({
             priority: 0,
             location: 'product-variant-detail',
@@ -218,7 +206,7 @@ export class CatalogModule {
                 getBreadcrumbs: entity => [
                     {
                         label: `${entity?.product.name}`,
-                        link: ['/catalog', 'inventory', entity?.product.id],
+                        link: ['/catalog', 'products', entity?.product.id],
                     },
                     {
                         label: `${entity?.name} (${entity?.sku})`,

diff --git a/packages/admin-ui/src/lib/catalog/src/catalog.routes.ts b/packages/admin-ui/src/lib/catalog/src/catalog.routes.ts
@@ -15,20 +15,24 @@ import { ProductVariantsResolver } from './providers/routing/product-variants-re
 
 export const createRoutes = (pageService: PageService): Route[] => [
     {
-        path: 'inventory',
+        path: 'products',
         component: PageComponent,
         data: {
             locationId: 'product-list',
-            breadcrumb: _('breadcrumb.inventory'),
+            breadcrumb: _('breadcrumb.products'),
         },
         children: pageService.getPageTabRoutes('product-list'),
     },
     {
-        path: 'inventory/:id',
+        path: 'inventory',
+        redirectTo: 'products',
+    },
+    {
+        path: 'products/:id',
         component: PageComponent,
         data: {
             locationId: 'product-detail',
-            breadcrumb: { label: _('breadcrumb.inventory'), link: ['../', 'inventory'] },
+            breadcrumb: { label: _('breadcrumb.products'), link: ['../', 'products'] },
         },
         children: [
             {
@@ -58,38 +62,23 @@ export const createRoutes = (pageService: PageService): Route[] => [
         ],
     },
     {
-        path: 'inventory/:productId/variants/:id',
+        path: 'products/:productId/variants/:id',
         component: PageComponent,
         data: {
             locationId: 'product-variant-detail',
-            breadcrumb: { label: _('breadcrumb.inventory'), link: ['../', 'inventory'] },
+            breadcrumb: { label: _('breadcrumb.products'), link: ['../', 'products'] },
         },
         children: pageService.getPageTabRoutes('product-variant-detail'),
     },
     {
-        path: 'inventory/:id/options',
+        path: 'products/:id/options',
         component: ProductOptionsEditorComponent,
         resolve: createResolveData(ProductVariantsResolver),
         canDeactivate: [CanDeactivateDetailGuard],
         data: {
             breadcrumb: productOptionsEditorBreadcrumb,
         },
     },
-    {
-        path: 'inventory/stock-locations/:id',
-        component: PageComponent,
-        data: {
-            locationId: 'stock-location-detail',
-            breadcrumb: [
-                { label: _('breadcrumb.inventory'), link: ['../', 'inventory'] },
-                {
-                    label: _('breadcrumb.stock-locations'),
-                    link: ['../', 'inventory', 'stock-locations'],
-                },
-            ],
-        },
-        children: pageService.getPageTabRoutes('stock-location-detail'),
-    },
     {
         path: 'facets',
         component: PageComponent,
@@ -150,12 +139,12 @@ export function productOptionsEditorBreadcrumb(data: any, params: any) {
     return data.entity.pipe(
         map((entity: any) => [
             {
-                label: _('breadcrumb.inventory'),
-                link: ['../', 'inventory'],
+                label: _('breadcrumb.products'),
+                link: ['../', 'products'],
             },
             {
                 label: `${entity.name}`,
-                link: ['../', 'inventory', params.id],
+                link: ['../', 'products', params.id],
             },
             {
                 label: _('breadcrumb.product-options'),

diff --git a/...-ui/src/lib/catalog/src/components/collection-contents/collection-contents.component.html b/...-ui/src/lib/catalog/src/components/collection-contents/collection-contents.component.html
@@ -36,7 +36,7 @@
         </vdr-dt2-column>
         <vdr-dt2-column [heading]="'common.name' | translate" id="name" [optional]="false">
             <ng-template let-variant="item">
-                <a class="button-ghost" [routerLink]="['/catalog/inventory', variant.productId]"
+                <a class="button-ghost" [routerLink]="['/catalog/products', variant.productId]"
                     ><span>{{ variant.name }}</span
                     ><clr-icon shape="arrow right"
                 /></a>

diff --git a/...i/src/lib/catalog/src/components/product-variant-list/product-variant-list.component.html b/...i/src/lib/catalog/src/components/product-variant-list/product-variant-list.component.html
@@ -67,7 +67,7 @@
         <ng-template let-variant="item">
             <a
                 class="button-ghost"
-                [routerLink]="['/catalog/inventory', variant.productId, 'variants', variant.id]"
+                [routerLink]="['/catalog/products', variant.productId, 'variants', variant.id]"
                 ><span>{{ variant.name }}</span
                 ><clr-icon shape="arrow right"
             /></a>

diff --git a/...catalog/src/components/product-variant-quick-jump/product-variant-quick-jump.component.ts b/...catalog/src/components/product-variant-quick-jump/product-variant-quick-jump.component.ts
@@ -51,7 +51,7 @@ export class ProductVariantQuickJumpComponent implements OnInit {
     onSelect(item?: NonNullable<GetProductVariantsQuickJumpQuery['product']>['variants'][number]) {
         if (item) {
             this.router
-                .navigate(['catalog', 'inventory', this.productId, 'variants', item.id])
+                .navigate(['catalog', 'products', this.productId, 'variants', item.id])
                 .then(() => (this.selectedVariantId = undefined));
         }
     }

diff --git a/packages/admin-ui/src/lib/catalog/src/public_api.ts b/packages/admin-ui/src/lib/catalog/src/public_api.ts
@@ -41,9 +41,6 @@ export * from './components/product-variant-list/product-variant-list.graphql';
 export * from './components/product-variant-quick-jump/product-variant-quick-jump.component';
 export * from './components/product-variants-editor/product-variants-editor.component';
 export * from './components/product-variants-table/product-variants-table.component';
-export * from './components/stock-location-detail/stock-location-detail.component';
-export * from './components/stock-location-list/stock-location-list-bulk-actions';
-export * from './components/stock-location-list/stock-location-list.component';
 export * from './components/update-product-option-dialog/update-product-option-dialog.component';
 export * from './components/variant-price-detail/variant-price-detail.component';
 export * from './providers/product-detail/product-detail.service';

diff --git a/packages/admin-ui/src/lib/core/src/components/base-nav/base-nav.component.ts b/packages/admin-ui/src/lib/core/src/components/base-nav/base-nav.component.ts
@@ -95,10 +95,10 @@ export class BaseNavComponent implements OnInit, OnDestroy {
                 items: [
                     {
                         requiresPermission: allow(Permission.ReadCatalog, Permission.ReadProduct),
-                        id: 'inventory',
-                        label: _('nav.inventory'),
+                        id: 'products',
+                        label: _('nav.products'),
                         icon: 'library',
-                        routerLink: ['/catalog', 'inventory'],
+                        routerLink: ['/catalog', 'products'],
                     },
                     {
                         requiresPermission: allow(Permission.ReadCatalog, Permission.ReadFacet),
@@ -206,6 +206,13 @@ export class BaseNavComponent implements OnInit, OnDestroy {
                         routerLink: ['/settings', 'channels'],
                         icon: 'layers',
                     },
+                    {
+                        requiresPermission: allow(Permission.ReadStockLocation),
+                        id: 'stock-locations',
+                        label: _('nav.stock-locations'),
+                        icon: 'map-marker',
+                        routerLink: ['/settings', 'stock-locations'],
+                    },
                     {
                         requiresPermission: allow(Permission.ReadAdministrator),
                         id: 'administrators',

diff --git a/...tail/stock-location-detail.component.html → ...tail/stock-location-detail.component.html b/...tail/stock-location-detail.component.html → ...tail/stock-location-detail.component.html
diff --git a/...tail/stock-location-detail.component.scss → ...tail/stock-location-detail.component.scss b/...tail/stock-location-detail.component.scss → ...tail/stock-location-detail.component.scss
diff --git a/...detail/stock-location-detail.component.ts → ...detail/stock-location-detail.component.ts b/...detail/stock-location-detail.component.ts → ...detail/stock-location-detail.component.ts
diff --git a/...-list/stock-location-list-bulk-actions.ts → ...-list/stock-location-list-bulk-actions.ts b/...-list/stock-location-list-bulk-actions.ts → ...-list/stock-location-list-bulk-actions.ts
diff --git a/...n-list/stock-location-list.component.html → ...n-list/stock-location-list.component.html b/...n-list/stock-location-list.component.html → ...n-list/stock-location-list.component.html
diff --git a/...n-list/stock-location-list.component.scss → ...n-list/stock-location-list.component.scss b/...n-list/stock-location-list.component.scss → ...n-list/stock-location-list.component.scss
diff --git a/...ion-list/stock-location-list.component.ts → ...ion-list/stock-location-list.component.ts b/...ion-list/stock-location-list.component.ts → ...ion-list/stock-location-list.component.ts