fix(admin-ui): Auto-fill Product & Collection slugs in other languages

Fixes #522
vendure-ecommerce · Oct 22, 2020 · 9393d04 · 9393d04
1 parent 8d028cf
commit 9393d04
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/.../admin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.ts b/.../admin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.ts
@@ -40,7 +40,8 @@ import { CollectionContentsComponent } from '../collection-contents/collection-c
     styleUrls: ['./collection-detail.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CollectionDetailComponent extends BaseDetailComponent<Collection.Fragment>
+export class CollectionDetailComponent
+    extends BaseDetailComponent<Collection.Fragment>
     implements OnInit, OnDestroy {
     customFields: CustomFieldConfig[];
     detailForm: FormGroup;
@@ -97,17 +98,19 @@ export class CollectionDetailComponent extends BaseDetailComponent<Collection.Fr
     }
 
     /**
-     * If creating a new product, automatically generate the slug based on the collection name.
+     * If creating a new Collection, automatically generate the slug based on the collection name.
      */
     updateSlug(nameValue: string) {
-        this.isNew$.pipe(take(1)).subscribe(isNew => {
-            if (isNew) {
+        combineLatest(this.entity$, this.languageCode$)
+            .pipe(take(1))
+            .subscribe(([entity, languageCode]) => {
                 const slugControl = this.detailForm.get(['slug']);
-                if (slugControl && slugControl.pristine) {
+                const currentTranslation = entity.translations.find(t => t.languageCode === languageCode);
+                const currentSlugIsEmpty = !currentTranslation || !currentTranslation.slug;
+                if (slugControl && slugControl.pristine && currentSlugIsEmpty) {
                     slugControl.setValue(normalizeString(`${nameValue}`, '-'));
                 }
-            }
-        });
+            });
     }
 
     addFilter(collectionFilter: ConfigurableOperation) {

diff --git a/packages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.ts b/packages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.ts
@@ -75,7 +75,8 @@ export interface SelectedAssets {
     styleUrls: ['./product-detail.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ProductDetailComponent extends BaseDetailComponent<ProductWithVariants.Fragment>
+export class ProductDetailComponent
+    extends BaseDetailComponent<ProductWithVariants.Fragment>
     implements OnInit, OnDestroy {
     activeTab$: Observable<TabName>;
     product$: Observable<ProductWithVariants.Fragment>;
@@ -259,14 +260,16 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
      * If creating a new product, automatically generate the slug based on the product name.
      */
     updateSlug(nameValue: string) {
-        this.isNew$.pipe(take(1)).subscribe(isNew => {
-            if (isNew) {
+        combineLatest(this.entity$, this.languageCode$)
+            .pipe(take(1))
+            .subscribe(([entity, languageCode]) => {
                 const slugControl = this.detailForm.get(['product', 'slug']);
-                if (slugControl && slugControl.pristine) {
+                const currentTranslation = entity.translations.find(t => t.languageCode === languageCode);
+                const currentSlugIsEmpty = !currentTranslation || !currentTranslation.slug;
+                if (slugControl && slugControl.pristine && currentSlugIsEmpty) {
                     slugControl.setValue(normalizeString(`${nameValue}`, '-'));
                 }
-            }
-        });
+            });
     }
 
     selectProductFacetValue() {