fix(admin-ui): Fix broken translation entry

admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.html

@@ -1,6 +1,7 @@
 <vdr-action-bar>
     <vdr-ab-left>
         <vdr-language-selector
+            [disabled]="isNew$ | async"
             [availableLanguageCodes]="availableLanguages$ | async"
             [currentLanguageCode]="languageCode$ | async"
             (languageCodeChange)="setLanguage($event)"
@@ -28,11 +29,16 @@
     </vdr-ab-right>
 </vdr-action-bar>
 
-<form class="form" [formGroup]="detailForm">
+<form class="form" [formGroup]="detailForm" *ngIf="(entity$ | async) as facet">
     <section class="form-block" formGroupName="facet">
         <label>{{ 'catalog.facet' | translate }}</label>
         <vdr-form-field [label]="'common.name' | translate" for="name">
-            <input id="name" type="text" formControlName="name" (input)="updateCode($event.target.value)" />
+            <input
+                id="name"
+                type="text"
+                formControlName="name"
+                (input)="updateCode(facet.code, $event.target.value)"
+            />
         </vdr-form-field>
         <vdr-form-field [label]="'common.code' | translate" for="code" [readOnlyToggle]="true">
             <input id="code" type="text" formControlName="code" />
@@ -73,7 +79,7 @@
                         <input
                             type="text"
                             formControlName="name"
-                            (input)="updateValueCode($event.target.value, i)"
+                            (input)="updateValueCode(facet.values[i]?.code, $event.target.value, i)"
                         />
                     </td>
                     <td><input type="text" formControlName="code" readonly /></td>

admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.ts

@@ -68,17 +68,21 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
         this.destroy();
     }
 
-    updateCode(nameValue: string) {
-        const codeControl = this.detailForm.get(['facet', 'code']);
-        if (codeControl && codeControl.pristine) {
-            codeControl.setValue(normalizeString(nameValue, '-'));
+    updateCode(currentCode: string, nameValue: string) {
+        if (!currentCode) {
+            const codeControl = this.detailForm.get(['facet', 'code']);
+            if (codeControl && codeControl.pristine) {
+                codeControl.setValue(normalizeString(nameValue, '-'));
+            }
         }
     }
 
-    updateValueCode(nameValue: string, index: number) {
-        const codeControl = this.detailForm.get(['values', index, 'code']);
-        if (codeControl && codeControl.pristine) {
-            codeControl.setValue(normalizeString(nameValue, '-'));
+    updateValueCode(currentCode: string, nameValue: string, index: number) {
+        if (!currentCode) {
+            const codeControl = this.detailForm.get(['values', index, 'code']);
+            if (codeControl && codeControl.pristine) {
+                codeControl.setValue(normalizeString(nameValue, '-'));
+            }
         }
     }
 
@@ -187,76 +191,71 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
      */
     protected setFormValues(facet: FacetWithValues.Fragment, languageCode: LanguageCode) {
         const currentTranslation = facet.translations.find(t => t.languageCode === languageCode);
-        if (currentTranslation) {
-            this.detailForm.patchValue({
-                facet: {
-                    code: facet.code,
-                    name: currentTranslation.name,
-                },
-            });
 
-            if (this.customFields.length) {
-                const customFieldsGroup = this.detailForm.get(['facet', 'customFields']) as FormGroup;
+        this.detailForm.patchValue({
+            facet: {
+                code: facet.code,
+                name: currentTranslation ? currentTranslation.name : '',
+            },
+        });
+
+        if (this.customFields.length) {
+            const customFieldsGroup = this.detailForm.get(['facet', 'customFields']) as FormGroup;
 
-                for (const fieldDef of this.customFields) {
-                    const key = fieldDef.name;
-                    const value =
-                        fieldDef.type === 'localeString'
-                            ? (currentTranslation as any).customFields[key]
-                            : (facet as any).customFields[key];
-                    const control = customFieldsGroup.get(key);
-                    if (control) {
-                        control.patchValue(value);
-                    }
+            for (const fieldDef of this.customFields) {
+                const key = fieldDef.name;
+                const value =
+                    fieldDef.type === 'localeString'
+                        ? (currentTranslation as any).customFields[key]
+                        : (facet as any).customFields[key];
+                const control = customFieldsGroup.get(key);
+                if (control) {
+                    control.patchValue(value);
                 }
             }
+        }
 
-            const valuesFormArray = this.detailForm.get('values') as FormArray;
-            facet.values.forEach((value, i) => {
-                const valueTranslation = value.translations.find(t => t.languageCode === languageCode);
-                const group = {
-                    id: value.id,
-                    code: value.code,
-                    name: valueTranslation ? valueTranslation.name : '',
-                };
-                const existing = valuesFormArray.at(i);
-                if (existing) {
-                    existing.patchValue(group);
-                } else {
-                    valuesFormArray.insert(i, this.formBuilder.group(group));
-                }
-                if (this.customValueFields.length) {
-                    let customValueFieldsGroup = this.detailForm.get([
-                        'values',
-                        i,
+        const valuesFormArray = this.detailForm.get('values') as FormArray;
+        facet.values.forEach((value, i) => {
+            const valueTranslation = value.translations.find(t => t.languageCode === languageCode);
+            const group = {
+                id: value.id,
+                code: value.code,
+                name: valueTranslation ? valueTranslation.name : '',
+            };
+            const existing = valuesFormArray.at(i);
+            if (existing) {
+                existing.patchValue(group);
+            } else {
+                valuesFormArray.insert(i, this.formBuilder.group(group));
+            }
+            if (this.customValueFields.length) {
+                let customValueFieldsGroup = this.detailForm.get(['values', i, 'customFields']) as FormGroup;
+                if (!customValueFieldsGroup) {
+                    customValueFieldsGroup = new FormGroup({});
+                    (this.detailForm.get(['values', i]) as FormGroup).addControl(
                         'customFields',
-                    ]) as FormGroup;
-                    if (!customValueFieldsGroup) {
-                        customValueFieldsGroup = new FormGroup({});
-                        (this.detailForm.get(['values', i]) as FormGroup).addControl(
-                            'customFields',
-                            customValueFieldsGroup,
-                        );
-                    }
+                        customValueFieldsGroup,
+                    );
+                }
 
-                    if (customValueFieldsGroup) {
-                        for (const fieldDef of this.customValueFields) {
-                            const key = fieldDef.name;
-                            const fieldValue =
-                                fieldDef.type === 'localeString'
-                                    ? (valueTranslation as any).customFields[key]
-                                    : (value as any).customFields[key];
-                            const control = customValueFieldsGroup.get(key);
-                            if (control) {
-                                control.setValue(fieldValue);
-                            } else {
-                                customValueFieldsGroup.addControl(key, new FormControl(fieldValue));
-                            }
+                if (customValueFieldsGroup) {
+                    for (const fieldDef of this.customValueFields) {
+                        const key = fieldDef.name;
+                        const fieldValue =
+                            fieldDef.type === 'localeString'
+                                ? (valueTranslation as any).customFields[key]
+                                : (value as any).customFields[key];
+                        const control = customValueFieldsGroup.get(key);
+                        if (control) {
+                            control.setValue(fieldValue);
+                        } else {
+                            customValueFieldsGroup.addControl(key, new FormControl(fieldValue));
                         }
                     }
                 }
-            });
-        }
+            }
+        });
     }
 
     /**
@@ -307,6 +306,10 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
                     updatedFields: dirtyValueValues[i],
                     customFieldConfig: this.customValueFields,
                     languageCode,
+                    defaultTranslation: {
+                        languageCode,
+                        name: '',
+                    },
                 });
             })
             .filter(notNullOrUndefined);

admin-ui/src/app/catalog/components/product-category-detail/product-category-detail.component.html

@@ -1,6 +1,7 @@
 <vdr-action-bar>
     <vdr-ab-left>
         <vdr-language-selector
+            [disabled]="isNew$ | async"
             [availableLanguageCodes]="availableLanguages$ | async"
             [currentLanguageCode]="languageCode$ | async"
             (languageCodeChange)="setLanguage($event)"

admin-ui/src/app/catalog/components/product-category-detail/product-category-detail.component.ts

@@ -199,26 +199,25 @@ export class ProductCategoryDetailComponent extends BaseDetailComponent<ProductC
      */
     protected setFormValues(category: ProductCategory.Fragment, languageCode: LanguageCode) {
         const currentTranslation = category.translations.find(t => t.languageCode === languageCode);
-        if (currentTranslation) {
-            this.detailForm.patchValue({
-                name: currentTranslation.name,
-                description: currentTranslation.description,
-                facetValueIds: category.facetValues.map(fv => fv.id),
-            });
 
-            if (this.customFields.length) {
-                const customFieldsGroup = this.detailForm.get(['customFields']) as FormGroup;
-
-                for (const fieldDef of this.customFields) {
-                    const key = fieldDef.name;
-                    const value =
-                        fieldDef.type === 'localeString'
-                            ? (currentTranslation as any).customFields[key]
-                            : (category as any).customFields[key];
-                    const control = customFieldsGroup.get(key);
-                    if (control) {
-                        control.patchValue(value);
-                    }
+        this.detailForm.patchValue({
+            name: currentTranslation ? currentTranslation.name : '',
+            description: currentTranslation ? currentTranslation.description : '',
+            facetValueIds: category.facetValues.map(fv => fv.id),
+        });
+
+        if (this.customFields.length) {
+            const customFieldsGroup = this.detailForm.get(['customFields']) as FormGroup;
+
+            for (const fieldDef of this.customFields) {
+                const key = fieldDef.name;
+                const value =
+                    fieldDef.type === 'localeString'
+                        ? (currentTranslation as any).customFields[key]
+                        : (category as any).customFields[key];
+                const control = customFieldsGroup.get(key);
+                if (control) {
+                    control.patchValue(value);
                 }
             }
         }

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

@@ -1,6 +1,7 @@
 <vdr-action-bar>
     <vdr-ab-left>
         <vdr-language-selector
+            [disabled]="isNew$ | async"
             [availableLanguageCodes]="availableLanguages$ | async"
             [currentLanguageCode]="languageCode$ | async"
             (languageCodeChange)="setLanguage($event)"

admin-ui/src/app/catalog/components/product-detail/product-detail.component.ts

@@ -322,60 +322,58 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
      */
     protected setFormValues(product: ProductWithVariants.Fragment, languageCode: LanguageCode) {
         const currentTranslation = product.translations.find(t => t.languageCode === languageCode);
-        if (currentTranslation) {
-            this.detailForm.patchValue({
-                product: {
-                    name: currentTranslation.name,
-                    slug: currentTranslation.slug,
-                    description: currentTranslation.description,
-                    facetValueIds: product.facetValues.map(fv => fv.id),
-                },
-            });
+        this.detailForm.patchValue({
+            product: {
+                name: currentTranslation ? currentTranslation.name : '',
+                slug: currentTranslation ? currentTranslation.slug : '',
+                description: currentTranslation ? currentTranslation.description : '',
+                facetValueIds: product.facetValues.map(fv => fv.id),
+            },
+        });
 
-            if (this.customFields.length) {
-                const customFieldsGroup = this.detailForm.get(['product', 'customFields']) as FormGroup;
-
-                for (const fieldDef of this.customFields) {
-                    const key = fieldDef.name;
-                    const value =
-                        fieldDef.type === 'localeString'
-                            ? (currentTranslation as any).customFields[key]
-                            : (product as any).customFields[key];
-                    const control = customFieldsGroup.get(key);
-                    if (control) {
-                        control.patchValue(value);
-                    }
+        if (this.customFields.length) {
+            const customFieldsGroup = this.detailForm.get(['product', 'customFields']) as FormGroup;
+
+            for (const fieldDef of this.customFields) {
+                const key = fieldDef.name;
+                const value =
+                    fieldDef.type === 'localeString'
+                        ? (currentTranslation as any).customFields[key]
+                        : (product as any).customFields[key];
+                const control = customFieldsGroup.get(key);
+                if (control) {
+                    control.patchValue(value);
                 }
             }
-
-            const variantsFormArray = this.detailForm.get('variants') as FormArray;
-            product.variants.forEach((variant, i) => {
-                const variantTranslation = variant.translations.find(t => t.languageCode === languageCode);
-                const facetValueIds = variant.facetValues.map(fv => fv.id);
-                const group: VariantFormValue = {
-                    sku: variant.sku,
-                    name: variantTranslation ? variantTranslation.name : '',
-                    price: variant.price,
-                    priceIncludesTax: variant.priceIncludesTax,
-                    priceWithTax: variant.priceWithTax,
-                    taxCategoryId: variant.taxCategory.id,
-                    facetValueIds,
-                };
-
-                const existing = variantsFormArray.at(i);
-                if (existing) {
-                    existing.setValue(group);
-                } else {
-                    variantsFormArray.insert(
-                        i,
-                        this.formBuilder.group({
-                            ...group,
-                            facetValueIds: this.formBuilder.control(facetValueIds),
-                        }),
-                    );
-                }
-            });
         }
+
+        const variantsFormArray = this.detailForm.get('variants') as FormArray;
+        product.variants.forEach((variant, i) => {
+            const variantTranslation = variant.translations.find(t => t.languageCode === languageCode);
+            const facetValueIds = variant.facetValues.map(fv => fv.id);
+            const group: VariantFormValue = {
+                sku: variant.sku,
+                name: variantTranslation ? variantTranslation.name : '',
+                price: variant.price,
+                priceIncludesTax: variant.priceIncludesTax,
+                priceWithTax: variant.priceWithTax,
+                taxCategoryId: variant.taxCategory.id,
+                facetValueIds,
+            };
+
+            const existing = variantsFormArray.at(i);
+            if (existing) {
+                existing.setValue(group);
+            } else {
+                variantsFormArray.insert(
+                    i,
+                    this.formBuilder.group({
+                        ...group,
+                        facetValueIds: this.formBuilder.control(facetValueIds),
+                    }),
+                );
+            }
+        });
     }
 
     /**
@@ -432,6 +430,10 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
                     updatedFields: formValue,
                     customFieldConfig: this.customVariantFields,
                     languageCode,
+                    defaultTranslation: {
+                        languageCode,
+                        name: '',
+                    },
                 });
                 result.taxCategoryId = formValue.taxCategoryId;
                 result.facetValueIds = formValue.facetValueIds;

admin-ui/src/app/common/base-detail.component.ts

@@ -29,8 +29,8 @@ export abstract class BaseDetailComponent<Entity extends { id: string }> {
             map(entity => entity.id === ''),
             shareReplay(1),
         );
-        this.languageCode$ = this.route.queryParamMap.pipe(
-            map(qpm => qpm.get('lang')),
+        this.languageCode$ = this.route.paramMap.pipe(
+            map(paramMap => paramMap.get('lang')),
             map(lang => (!lang ? getDefaultLanguage() : (lang as LanguageCode))),
         );
 
@@ -38,7 +38,10 @@ export abstract class BaseDetailComponent<Entity extends { id: string }> {
 
         combineLatest(this.entity$, this.languageCode$)
             .pipe(takeUntil(this.destroy$))
-            .subscribe(([facet, languageCode]) => this.setFormValues(facet, languageCode));
+            .subscribe(([facet, languageCode]) => {
+                this.setFormValues(facet, languageCode);
+                this.detailForm.markAsPristine();
+            });
     }
 
     destroy() {
@@ -57,8 +60,7 @@ export abstract class BaseDetailComponent<Entity extends { id: string }> {
     }
 
     protected setQueryParam(key: string, value: any) {
-        this.router.navigate(['./'], {
-            queryParams: { [key]: value },
+        this.router.navigate(['./', { [key]: value }], {
             relativeTo: this.route,
             queryParamsHandling: 'merge',
         });

admin-ui/src/app/settings/components/country-detail/country-detail.component.html

@@ -1,6 +1,7 @@
 <vdr-action-bar>
     <vdr-ab-left>
         <vdr-language-selector
+            [disabled]="isNew$ | async"
             [availableLanguageCodes]="availableLanguages$ | async"
             [currentLanguageCode]="languageCode$ | async"
             (languageCodeChange)="setLanguage($event)"

admin-ui/src/app/settings/components/country-detail/country-detail.component.ts

@@ -118,12 +118,11 @@ export class CountryDetailComponent extends BaseDetailComponent<Country.Fragment
 
     protected setFormValues(country: Country, languageCode: LanguageCode): void {
         const currentTranslation = country.translations.find(t => t.languageCode === languageCode);
-        if (currentTranslation) {
-            this.detailForm.patchValue({
-                code: country.code,
-                name: currentTranslation.name,
-                enabled: country.enabled,
-            });
-        }
+
+        this.detailForm.patchValue({
+            code: country.code,
+            name: currentTranslation ? currentTranslation.name : '',
+            enabled: country.enabled,
+        });
     }
 }

admin-ui/src/app/shared/components/language-selector/language-selector.component.html

@@ -1,17 +1,19 @@
-<clr-dropdown>
-    <button type="button" class="btn btn-sm btn-link" clrDropdownTrigger>
-        <clr-icon shape="world"></clr-icon>
-        {{ 'common.language' | translate }}: {{ currentLanguageCode | uppercase }}
-        <clr-icon shape="caret down"></clr-icon>
-    </button>
-    <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
-        <button
-            type="button"
-            *ngFor="let code of availableLanguageCodes"
-            (click)="languageCodeChange.emit(code)"
-            clrDropdownItem
-        >
-            {{ code }}
+<ng-container *ngIf="1 < availableLanguageCodes?.length">
+    <clr-dropdown>
+        <button type="button" class="btn btn-sm btn-link" clrDropdownTrigger [disabled]="disabled">
+            <clr-icon shape="world"></clr-icon>
+            {{ 'common.language' | translate }}: {{ 'lang.' + currentLanguageCode | translate | uppercase }}
+            <clr-icon shape="caret down"></clr-icon>
         </button>
-    </clr-dropdown-menu>
-</clr-dropdown>
+        <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
+            <button
+                type="button"
+                *ngFor="let code of availableLanguageCodes"
+                (click)="languageCodeChange.emit(code)"
+                clrDropdownItem
+            >
+                {{ 'lang.' + code | translate }}
+            </button>
+        </clr-dropdown-menu>
+    </clr-dropdown>
+</ng-container>

admin-ui/src/app/shared/components/language-selector/language-selector.component.ts

@@ -1,5 +1,4 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-
 import { LanguageCode } from 'shared/generated-types';
 
 @Component({
@@ -10,5 +9,6 @@ import { LanguageCode } from 'shared/generated-types';
 export class LanguageSelectorComponent {
     @Input() currentLanguageCode: LanguageCode;
     @Input() availableLanguageCodes: LanguageCode[];
+    @Input() disabled = false;
     @Output() languageCodeChange = new EventEmitter<LanguageCode>();
 }