feat(admin-ui): Support non-latin Product/Collection slugs

Fixes #1006
vendure-ecommerce · Aug 25, 2021 · fac735f · fac735f
1 parent 29c306a
commit fac735f
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 6 deletions.
diff --git a/...dmin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.html b/...dmin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.html
@@ -69,7 +69,6 @@
                     type="text"
                     formControlName="slug"
                     [readonly]="!(updatePermission | hasPermission)"
-                    pattern="[a-z0-9_-]+"
                 />
             </vdr-form-field>
             <vdr-rich-text-editor

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
@@ -28,6 +28,7 @@ import {
     NotificationService,
     Permission,
     ServerConfigService,
+    unicodePatternValidator,
     UpdateCollectionInput,
 } from '@vendure/admin-ui/core';
 import { normalizeString } from '@vendure/common/lib/normalize-string';
@@ -44,7 +45,8 @@ import { CollectionContentsComponent } from '../collection-contents/collection-c
 })
 export class CollectionDetailComponent
     extends BaseDetailComponent<Collection.Fragment>
-    implements OnInit, OnDestroy {
+    implements OnInit, OnDestroy
+{
     customFields: CustomFieldConfig[];
     detailForm: FormGroup;
     assetChanges: { assets?: Asset[]; featuredAsset?: Asset } = {};
@@ -67,7 +69,7 @@ export class CollectionDetailComponent
         this.customFields = this.getCustomFieldConfig('Collection');
         this.detailForm = this.formBuilder.group({
             name: ['', Validators.required],
-            slug: '',
+            slug: ['', unicodePatternValidator(/^[\p{Letter}0-9_-]+$/)],
             description: '',
             visible: false,
             filters: this.formBuilder.array([]),

diff --git a/...ages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.html b/...ages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.html
@@ -122,7 +122,6 @@
                                     type="text"
                                     formControlName="slug"
                                     [readonly]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
-                                    pattern="[a-z0-9_-]+"
                                 />
                             </vdr-form-field>
                             <vdr-rich-text-editor

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
@@ -20,6 +20,7 @@ import {
     ProductWithVariants,
     ServerConfigService,
     TaxCategory,
+    unicodePatternValidator,
     UpdateProductInput,
     UpdateProductMutation,
     UpdateProductOptionInput,
@@ -80,7 +81,8 @@ export interface SelectedAssets {
 })
 export class ProductDetailComponent
     extends BaseDetailComponent<ProductWithVariants.Fragment>
-    implements OnInit, OnDestroy {
+    implements OnInit, OnDestroy
+{
     activeTab$: Observable<TabName>;
     product$: Observable<ProductWithVariants.Fragment>;
     variants$: Observable<ProductWithVariants.Variants[]>;
@@ -123,7 +125,7 @@ export class ProductDetailComponent
                 enabled: true,
                 name: ['', Validators.required],
                 autoUpdateVariantNames: true,
-                slug: '',
+                slug: ['', unicodePatternValidator(/^[\p{Letter}0-9_-]+$/)],
                 description: '',
                 facetValueIds: [[]],
                 customFields: this.formBuilder.group(

diff --git a/packages/admin-ui/src/lib/core/src/public_api.ts b/packages/admin-ui/src/lib/core/src/public_api.ts
@@ -204,3 +204,4 @@ export * from './shared/pipes/string-to-color.pipe';
 export * from './shared/pipes/time-ago.pipe';
 export * from './shared/providers/routing/can-deactivate-detail-guard';
 export * from './shared/shared.module';
+export * from './validators/unicode-pattern.validator';
diff --git a/packages/admin-ui/src/lib/core/src/validators/unicode-pattern.validator.ts b/packages/admin-ui/src/lib/core/src/validators/unicode-pattern.validator.ts
@@ -0,0 +1,9 @@
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+
+export function unicodePatternValidator(patternRe: RegExp): ValidatorFn {
+    const unicodeRe = patternRe.unicode ? patternRe : new RegExp(patternRe, 'u');
+    return (control: AbstractControl): ValidationErrors | null => {
+        const valid = unicodeRe.test(control.value);
+        return valid ? null : { pattern: { value: control.value } };
+    };
+}