feat(admin-ui): Support for ShippingMethod translations & custom fields

Relates to #530
vendure-ecommerce · Nov 10, 2020 · e189bd4 · e189bd4
1 parent c7418d1
commit e189bd4
Show file tree

Hide file tree

Showing 11 changed files with 216 additions and 78 deletions.
diff --git a/packages/admin-ui/src/lib/catalog/src/components/facet-detail/facet-detail.component.ts b/packages/admin-ui/src/lib/catalog/src/components/facet-detail/facet-detail.component.ts
@@ -29,7 +29,8 @@ import { map, mapTo, mergeMap, switchMap, take } from 'rxjs/operators';
     styleUrls: ['./facet-detail.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fragment>
+export class FacetDetailComponent
+    extends BaseDetailComponent<FacetWithValues.Fragment>
     implements OnInit, OnDestroy {
     customFields: CustomFieldConfig[];
     customValueFields: CustomFieldConfig[];
@@ -130,16 +131,16 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
                     ) as CreateFacetInput;
                     return this.dataService.facet.createFacet(newFacet);
                 }),
-                switchMap((data) => this.dataService.facet.getAllFacets(true).single$.pipe(mapTo(data))),
+                switchMap(data => this.dataService.facet.getAllFacets(true).single$.pipe(mapTo(data))),
             )
             .subscribe(
-                (data) => {
+                data => {
                     this.notificationService.success(_('common.notify-create-success'), { entity: 'Facet' });
                     this.detailForm.markAsPristine();
                     this.changeDetector.markForCheck();
                     this.router.navigate(['../', data.createFacet.id], { relativeTo: this.route });
                 },
-                (err) => {
+                err => {
                     this.notificationService.error(_('common.notify-create-error'), {
                         entity: 'Facet',
                     });
@@ -168,8 +169,8 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
                     const valuesArray = this.detailForm.get('values');
                     if (valuesArray && valuesArray.dirty) {
                         const newValues: CreateFacetValueInput[] = (valuesArray as FormArray).controls
-                            .filter((c) => !c.value.id)
-                            .map((c) => ({
+                            .filter(c => !c.value.id)
+                            .map(c => ({
                                 facetId: facet.id,
                                 code: c.value.code,
                                 translations: [{ name: c.value.name, languageCode }],
@@ -201,7 +202,7 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
                     this.changeDetector.markForCheck();
                     this.notificationService.success(_('common.notify-update-success'), { entity: 'Facet' });
                 },
-                (err) => {
+                err => {
                     this.notificationService.error(_('common.notify-update-error'), {
                         entity: 'Facet',
                     });
@@ -221,24 +222,24 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
         }
         this.showModalAndDelete(facetValueId)
             .pipe(
-                switchMap((response) => {
+                switchMap(response => {
                     if (response.result === DeletionResult.DELETED) {
                         return [true];
                     } else {
                         return this.showModalAndDelete(facetValueId, response.message || '').pipe(
-                            map((r) => r.result === DeletionResult.DELETED),
+                            map(r => r.result === DeletionResult.DELETED),
                         );
                     }
                 }),
-                switchMap((deleted) => (deleted ? this.dataService.facet.getFacet(this.id).single$ : [])),
+                switchMap(deleted => (deleted ? this.dataService.facet.getFacet(this.id).single$ : [])),
             )
             .subscribe(
                 () => {
                     this.notificationService.success(_('common.notify-delete-success'), {
                         entity: 'FacetValue',
                     });
                 },
-                (err) => {
+                err => {
                     this.notificationService.error(_('common.notify-delete-error'), {
                         entity: 'FacetValue',
                     });
@@ -257,24 +258,24 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
                 ],
             })
             .pipe(
-                switchMap((result) =>
+                switchMap(result =>
                     result ? this.dataService.facet.deleteFacetValues([facetValueId], !!message) : EMPTY,
                 ),
-                map((result) => result.deleteFacetValues[0]),
+                map(result => result.deleteFacetValues[0]),
             );
     }
 
     /**
      * Sets the values of the form on changes to the facet or current language.
      */
     protected setFormValues(facet: FacetWithValues.Fragment, languageCode: LanguageCode) {
-        const currentTranslation = facet.translations.find((t) => t.languageCode === languageCode);
+        const currentTranslation = facet.translations.find(t => t.languageCode === languageCode);
 
         this.detailForm.patchValue({
             facet: {
                 code: facet.code,
                 visible: !facet.isPrivate,
-                name: currentTranslation ? currentTranslation.name : '',
+                name: currentTranslation?.name ?? '',
             },
         });
 
@@ -299,7 +300,7 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
         this.values = [...facet.values];
         facet.values.forEach((value, i) => {
             const valueTranslation =
-                value.translations && value.translations.find((t) => t.languageCode === languageCode);
+                value.translations && value.translations.find(t => t.languageCode === languageCode);
             const group = {
                 id: value.id,
                 code: value.code,
@@ -372,8 +373,8 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
             return formRow && formRow.dirty && formRow.value.id;
         });
         const dirtyValueValues = valuesFormArray.controls
-            .filter((c) => c.dirty && c.value.id)
-            .map((c) => c.value);
+            .filter(c => c.dirty && c.value.id)
+            .map(c => c.value);
 
         if (dirtyValues.length !== dirtyValueValues.length) {
             throw new Error(_(`error.facet-value-form-values-do-not-match`));

diff --git a/packages/admin-ui/src/lib/core/src/common/generated-types.ts b/packages/admin-ui/src/lib/core/src/common/generated-types.ts
@@ -1891,7 +1891,6 @@ export type TestShippingMethodQuote = {
   __typename?: 'TestShippingMethodQuote';
   price: Scalars['Int'];
   priceWithTax: Scalars['Int'];
-  description: Scalars['String'];
   metadata?: Maybe<Scalars['JSON']>;
 };
 
@@ -3609,9 +3608,20 @@ export type ShippingMethod = Node & {
   description: Scalars['String'];
   checker: ConfigurableOperation;
   calculator: ConfigurableOperation;
+  translations: Array<ShippingMethodTranslation>;
   customFields?: Maybe<Scalars['JSON']>;
 };
 
+export type ShippingMethodTranslation = {
+  __typename?: 'ShippingMethodTranslation';
+  id: Scalars['ID'];
+  createdAt: Scalars['DateTime'];
+  updatedAt: Scalars['DateTime'];
+  languageCode: LanguageCode;
+  name: Scalars['String'];
+  description: Scalars['String'];
+};
+
 export type ShippingMethodList = PaginatedList & {
   __typename?: 'ShippingMethodList';
   items: Array<ShippingMethod>;
@@ -7015,14 +7025,17 @@ export type ErrorResultFragment = ErrorResult_MimeTypeError_Fragment | ErrorResu
 
 export type ShippingMethodFragment = (
   { __typename?: 'ShippingMethod' }
-  & Pick<ShippingMethod, 'id' | 'createdAt' | 'updatedAt' | 'code' | 'description'>
+  & Pick<ShippingMethod, 'id' | 'createdAt' | 'updatedAt' | 'code' | 'name' | 'description'>
   & { checker: (
     { __typename?: 'ConfigurableOperation' }
     & ConfigurableOperationFragment
   ), calculator: (
     { __typename?: 'ConfigurableOperation' }
     & ConfigurableOperationFragment
-  ) }
+  ), translations: Array<(
+    { __typename?: 'ShippingMethodTranslation' }
+    & Pick<ShippingMethodTranslation, 'id' | 'languageCode' | 'name' | 'description'>
+  )> }
 );
 
 export type GetShippingMethodListQueryVariables = Exact<{
@@ -7100,7 +7113,7 @@ export type TestShippingMethodQuery = { testShippingMethod: (
     & Pick<TestShippingMethodResult, 'eligible'>
     & { quote?: Maybe<(
       { __typename?: 'TestShippingMethodQuote' }
-      & Pick<TestShippingMethodQuote, 'price' | 'priceWithTax' | 'description' | 'metadata'>
+      & Pick<TestShippingMethodQuote, 'price' | 'priceWithTax' | 'metadata'>
     )> }
   ) };
 
@@ -7111,7 +7124,7 @@ export type TestEligibleShippingMethodsQueryVariables = Exact<{
 
 export type TestEligibleShippingMethodsQuery = { testEligibleShippingMethods: Array<(
     { __typename?: 'ShippingMethodQuote' }
-    & Pick<ShippingMethodQuote, 'id' | 'description' | 'price' | 'priceWithTax' | 'metadata'>
+    & Pick<ShippingMethodQuote, 'id' | 'name' | 'description' | 'price' | 'priceWithTax' | 'metadata'>
   )> };
 
 type DiscriminateUnion<T, U> = T extends U ? T : never;
@@ -8330,6 +8343,7 @@ export namespace ShippingMethod {
   export type Fragment = ShippingMethodFragment;
   export type Checker = (NonNullable<ShippingMethodFragment['checker']>);
   export type Calculator = (NonNullable<ShippingMethodFragment['calculator']>);
+  export type Translations = NonNullable<(NonNullable<ShippingMethodFragment['translations']>)[number]>;
 }
 
 export namespace GetShippingMethodList {

diff --git a/packages/admin-ui/src/lib/core/src/data/definitions/shipping-definitions.ts b/packages/admin-ui/src/lib/core/src/data/definitions/shipping-definitions.ts
@@ -8,13 +8,20 @@ export const SHIPPING_METHOD_FRAGMENT = gql`
         createdAt
         updatedAt
         code
+        name
         description
         checker {
             ...ConfigurableOperation
         }
         calculator {
             ...ConfigurableOperation
         }
+        translations {
+            id
+            languageCode
+            name
+            description
+        }
     }
     ${CONFIGURABLE_OPERATION_FRAGMENT}
 `;
@@ -86,7 +93,6 @@ export const TEST_SHIPPING_METHOD = gql`
             quote {
                 price
                 priceWithTax
-                description
                 metadata
             }
         }
@@ -97,6 +103,7 @@ export const TEST_ELIGIBLE_SHIPPING_METHODS = gql`
     query TestEligibleShippingMethods($input: TestEligibleShippingMethodsInput!) {
         testEligibleShippingMethods(input: $input) {
             id
+            name
             description
             price
             priceWithTax

diff --git a/packages/admin-ui/src/lib/core/src/data/providers/shipping-method-data.service.ts b/packages/admin-ui/src/lib/core/src/data/providers/shipping-method-data.service.ts
@@ -1,3 +1,5 @@
+import { pick } from '@vendure/common/lib/pick';
+
 import {
     CreateShippingMethod,
     CreateShippingMethodInput,
@@ -54,20 +56,22 @@ export class ShippingMethodDataService {
     }
 
     createShippingMethod(input: CreateShippingMethodInput) {
+        const variables: CreateShippingMethod.Variables = {
+            input: pick(input, ['code', 'checker', 'calculator', 'customFields', 'translations']),
+        };
         return this.baseDataService.mutate<CreateShippingMethod.Mutation, CreateShippingMethod.Variables>(
             CREATE_SHIPPING_METHOD,
-            {
-                input,
-            },
+            variables,
         );
     }
 
     updateShippingMethod(input: UpdateShippingMethodInput) {
+        const variables: UpdateShippingMethod.Variables = {
+            input: pick(input, ['id', 'code', 'checker', 'calculator', 'customFields', 'translations']),
+        };
         return this.baseDataService.mutate<UpdateShippingMethod.Mutation, UpdateShippingMethod.Variables>(
             UPDATE_SHIPPING_METHOD,
-            {
-                input,
-            },
+            variables,
         );
     }
 

diff --git a/...mponents/shipping-eligibility-test-result/shipping-eligibility-test-result.component.html b/...mponents/shipping-eligibility-test-result/shipping-eligibility-test-result.component.html
@@ -5,7 +5,7 @@
     <div class="card-block" *ngFor="let quote of testResult">
         <div class="result-details" [class.stale]="testDataUpdated">
             <vdr-labeled-data [label]="'settings.shipping-method' | translate">
-                {{ quote.description }}
+                {{ quote.name }}
             </vdr-labeled-data>
             <div class="price-row">
                 <vdr-labeled-data [label]="'common.price' | translate">

diff --git a/.../lib/settings/src/components/shipping-method-detail/shipping-method-detail.component.html b/.../lib/settings/src/components/shipping-method-detail/shipping-method-detail.component.html
@@ -1,6 +1,12 @@
 <vdr-action-bar>
     <vdr-ab-left>
         <vdr-entity-info [entity]="entity$ | async"></vdr-entity-info>
+        <vdr-language-selector
+            [disabled]="isNew$ | async"
+            [availableLanguageCodes]="availableLanguages$ | async"
+            [currentLanguageCode]="languageCode$ | async"
+            (languageCodeChange)="setLanguage($event)"
+        ></vdr-language-selector>
     </vdr-ab-left>
 
     <vdr-ab-right>
@@ -18,7 +24,9 @@
                 class="btn btn-primary"
                 (click)="save()"
                 *vdrIfPermissions="'UpdateSettings'"
-                [disabled]="detailForm.pristine || detailForm.invalid || !selectedChecker || !selectedCalculator"
+                [disabled]="
+                    detailForm.pristine || detailForm.invalid || !selectedChecker || !selectedCalculator
+                "
             >
                 {{ 'common.update' | translate }}
             </button>
@@ -27,18 +35,44 @@
 </vdr-action-bar>
 
 <form class="form" [formGroup]="detailForm" *ngIf="entity$ | async as shippingMethod">
-    <vdr-form-field [label]="'common.description' | translate" for="description">
+    <vdr-form-field [label]="'common.name' | translate" for="name">
         <input
-            id="description"
+            id="name"
             type="text"
-            formControlName="description"
+            formControlName="name"
             [readonly]="!('UpdateSettings' | hasPermission)"
             (input)="updateCode(shippingMethod.code, $event.target.value)"
         />
     </vdr-form-field>
-    <vdr-form-field [label]="'common.code' | translate" for="code" [readOnlyToggle]="'UpdateSettings' | hasPermission">
-        <input id="code" type="text" formControlName="code" [readonly]="!('UpdateSettings' | hasPermission)" />
+    <vdr-form-field
+        [label]="'common.code' | translate"
+        for="code"
+        [readOnlyToggle]="'UpdateSettings' | hasPermission"
+    >
+        <input
+            id="code"
+            type="text"
+            formControlName="code"
+            [readonly]="!('UpdateSettings' | hasPermission)"
+        />
     </vdr-form-field>
+    <vdr-rich-text-editor
+        formControlName="description"
+        [readonly]="!('UpdateSettings' | hasPermission)"
+        [label]="'common.description' | translate"
+    ></vdr-rich-text-editor>
+
+    <section formGroupName="customFields" *ngIf="customFields.length">
+        <label>{{ 'common.custom-fields' | translate }}</label>
+        <ng-container *ngFor="let customField of customFields">
+            <vdr-custom-field-control
+                *ngIf="customFieldIsSet(customField.name)"
+                entityName="ShippingMethod"
+                [customFieldsFormGroup]="detailForm.get('customFields')"
+                [customField]="customField"
+            ></vdr-custom-field-control>
+        </ng-container>
+    </section>
 
     <div class="clr-row">
         <div class="clr-col">