feat(admin-ui): Support for editing Asset custom fields

Relates to #684

packages/admin-ui/src/lib/catalog/src/components/asset-detail/asset-detail.component.html

@@ -18,5 +18,7 @@
 <vdr-asset-preview
     [asset]="entity$ | async"
     [editable]="true"
+    [customFields]="customFields"
+    [customFieldsForm]="detailForm.get('customFields')"
     (assetChange)="onAssetChange($event)"
 ></vdr-asset-preview>

packages/admin-ui/src/lib/catalog/src/components/asset-detail/asset-detail.component.ts

@@ -2,7 +2,13 @@ import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { Asset, BaseDetailComponent, GetAsset, LanguageCode } from '@vendure/admin-ui/core';
+import {
+    Asset,
+    BaseDetailComponent,
+    CustomFieldConfig,
+    GetAsset,
+    LanguageCode,
+} from '@vendure/admin-ui/core';
 import { DataService, NotificationService, ServerConfigService } from '@vendure/admin-ui/core';
 
 @Component({
@@ -13,6 +19,7 @@ import { DataService, NotificationService, ServerConfigService } from '@vendure/
 })
 export class AssetDetailComponent extends BaseDetailComponent<GetAsset.Asset> implements OnInit, OnDestroy {
     detailForm = new FormGroup({});
+    customFields: CustomFieldConfig[];
 
     constructor(
         router: Router,
@@ -23,12 +30,16 @@ export class AssetDetailComponent extends BaseDetailComponent<GetAsset.Asset> im
         private formBuilder: FormBuilder,
     ) {
         super(route, router, serverConfigService, dataService);
+        this.customFields = this.getCustomFieldConfig('Asset');
     }
 
     ngOnInit() {
         this.detailForm = new FormGroup({
             name: new FormControl(''),
             tags: new FormControl([]),
+            customFields: this.formBuilder.group(
+                this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {}),
+            ),
         });
         this.init();
     }
@@ -49,6 +60,7 @@ export class AssetDetailComponent extends BaseDetailComponent<GetAsset.Asset> im
                 id: this.id,
                 name: this.detailForm.value.name,
                 tags: this.detailForm.value.tags,
+                customFields: this.detailForm.value.customFields,
             })
             .subscribe(
                 () => {
@@ -65,5 +77,17 @@ export class AssetDetailComponent extends BaseDetailComponent<GetAsset.Asset> im
     protected setFormValues(entity: GetAsset.Asset, languageCode: LanguageCode): void {
         this.detailForm.get('name')?.setValue(entity.name);
         this.detailForm.get('tags')?.setValue(entity.tags);
+        if (this.customFields.length) {
+            const customFieldsGroup = this.detailForm.get('customFields') as FormGroup;
+
+            for (const fieldDef of this.customFields) {
+                const key = fieldDef.name;
+                const value = (entity as any).customFields[key];
+                const control = customFieldsGroup.get(key);
+                if (control) {
+                    control.patchValue(value);
+                }
+            }
+        }
     }
 }

packages/admin-ui/src/lib/core/src/common/generated-types.ts

@@ -7513,6 +7513,27 @@ export type GetServerConfigQuery = { globalSettings: (
         ) | (
           { __typename?: 'RelationCustomFieldConfig' }
           & CustomFields_RelationCustomFieldConfig_Fragment
+        )>, Asset: Array<(
+          { __typename?: 'StringCustomFieldConfig' }
+          & CustomFields_StringCustomFieldConfig_Fragment
+        ) | (
+          { __typename?: 'LocaleStringCustomFieldConfig' }
+          & CustomFields_LocaleStringCustomFieldConfig_Fragment
+        ) | (
+          { __typename?: 'IntCustomFieldConfig' }
+          & CustomFields_IntCustomFieldConfig_Fragment
+        ) | (
+          { __typename?: 'FloatCustomFieldConfig' }
+          & CustomFields_FloatCustomFieldConfig_Fragment
+        ) | (
+          { __typename?: 'BooleanCustomFieldConfig' }
+          & CustomFields_BooleanCustomFieldConfig_Fragment
+        ) | (
+          { __typename?: 'DateTimeCustomFieldConfig' }
+          & CustomFields_DateTimeCustomFieldConfig_Fragment
+        ) | (
+          { __typename?: 'RelationCustomFieldConfig' }
+          & CustomFields_RelationCustomFieldConfig_Fragment
         )>, Channel: Array<(
           { __typename?: 'StringCustomFieldConfig' }
           & CustomFields_StringCustomFieldConfig_Fragment
@@ -9487,6 +9508,7 @@ export namespace GetServerConfig {
   export type CustomFieldConfig = (NonNullable<(NonNullable<(NonNullable<GetServerConfigQuery['globalSettings']>)['serverConfig']>)['customFieldConfig']>);
   export type Address = NonNullable<(NonNullable<(NonNullable<(NonNullable<(NonNullable<GetServerConfigQuery['globalSettings']>)['serverConfig']>)['customFieldConfig']>)['Address']>)[number]>;
   export type Administrator = NonNullable<(NonNullable<(NonNullable<(NonNullable<(NonNullable<GetServerConfigQuery['globalSettings']>)['serverConfig']>)['customFieldConfig']>)['Administrator']>)[number]>;
+  export type Asset = NonNullable<(NonNullable<(NonNullable<(NonNullable<(NonNullable<GetServerConfigQuery['globalSettings']>)['serverConfig']>)['customFieldConfig']>)['Asset']>)[number]>;
   export type Channel = NonNullable<(NonNullable<(NonNullable<(NonNullable<(NonNullable<GetServerConfigQuery['globalSettings']>)['serverConfig']>)['customFieldConfig']>)['Channel']>)[number]>;
   export type Collection = NonNullable<(NonNullable<(NonNullable<(NonNullable<(NonNullable<GetServerConfigQuery['globalSettings']>)['serverConfig']>)['customFieldConfig']>)['Collection']>)[number]>;
   export type Customer = NonNullable<(NonNullable<(NonNullable<(NonNullable<(NonNullable<GetServerConfigQuery['globalSettings']>)['serverConfig']>)['customFieldConfig']>)['Customer']>)[number]>;

packages/admin-ui/src/lib/core/src/data/definitions/settings-definitions.ts

@@ -618,6 +618,9 @@ export const GET_SERVER_CONFIG = gql`
                     Administrator {
                         ...CustomFields
                     }
+                    Asset {
+                        ...CustomFields
+                    }
                     Channel {
                         ...CustomFields
                     }

packages/admin-ui/src/lib/core/src/shared/components/address-form/address-form.component.html

@@ -58,7 +58,7 @@
         <label>{{ 'common.custom-fields' | translate }}</label>
         <ng-container *ngFor="let customField of customFields">
             <vdr-custom-field-control
-                entityName="Facet"
+                entityName="Address"
                 [customFieldsFormGroup]="customFieldsGroup"
                 [customField]="customField"
             ></vdr-custom-field-control>

packages/admin-ui/src/lib/core/src/shared/components/asset-preview/asset-preview.component.html

@@ -87,16 +87,30 @@
             <ng-container *ngIf="editable">
                 <vdr-tag-selector formControlName="tags"></vdr-tag-selector>
                 <button class="btn btn-link btn-sm" (click)="manageTags()">
-                    <clr-icon shape="tags"></clr-icon> {{ 'common.manage-tags' | translate }}
+                    <clr-icon shape="tags"></clr-icon>
+                    {{ 'common.manage-tags' | translate }}
                 </button>
             </ng-container>
             <div *ngIf="!editable">
-                <vdr-chip *ngFor="let tag of asset.tags" [colorFrom]="tag.value"
-                    ><clr-icon shape="tag" class="mr2"></clr-icon> {{ tag.value }}</vdr-chip
+                <vdr-chip *ngFor="let tag of asset.tags" [colorFrom]="tag.value">
+                    <clr-icon shape="tag" class="mr2"></clr-icon>
+                    {{ tag.value }}</vdr-chip
                 >
             </div>
         </vdr-labeled-data>
     </form>
+    <section *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="Asset"
+                [compact]="true"
+                [customFieldsFormGroup]="customFieldsForm"
+                [customField]="customField"
+            ></vdr-custom-field-control>
+        </ng-container>
+    </section>
     <div class="flex-spacer"></div>
     <div class="preview-select">
         <clr-select-container>

packages/admin-ui/src/lib/core/src/shared/components/asset-preview/asset-preview.component.ts

@@ -15,7 +15,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { fromEvent, Subscription } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 
-import { GetAsset, GetAssetList, UpdateAssetInput } from '../../../common/generated-types';
+import { CustomFieldConfig, GetAsset, GetAssetList, UpdateAssetInput } from '../../../common/generated-types';
 import { DataService } from '../../../data/providers/data.service';
 import { ModalService } from '../../../providers/modal/modal.service';
 import { NotificationService } from '../../../providers/notification/notification.service';
@@ -34,6 +34,8 @@ type AssetLike = GetAssetList.Items | GetAsset.Asset;
 export class AssetPreviewComponent implements OnInit, OnDestroy {
     @Input() asset: AssetLike;
     @Input() editable = false;
+    @Input() customFields: CustomFieldConfig[] = [];
+    @Input() customFieldsForm: FormGroup | undefined;
     @Output() assetChange = new EventEmitter<Omit<UpdateAssetInput, 'focalPoint'>>();
     @Output() editClick = new EventEmitter();
 
@@ -96,6 +98,10 @@ export class AssetPreviewComponent implements OnInit, OnDestroy {
         }
     }
 
+    customFieldIsSet(name: string): boolean {
+        return !!this.customFieldsForm?.get([name]);
+    }
+
     getSourceFileName(): string {
         const parts = this.asset.source.split('/');
         return parts[parts.length - 1];

packages/admin-ui/src/lib/settings/src/components/admin-detail/admin-detail.component.html

@@ -66,7 +66,7 @@
         <ng-container *ngFor="let customField of customFields">
             <vdr-custom-field-control
                 *ngIf="customFieldIsSet(customField.name)"
-                entityName="GlobalSettings"
+                entityName="Administrator"
                 [customFieldsFormGroup]="detailForm.get('customFields')"
                 [customField]="customField"
             ></vdr-custom-field-control>

packages/admin-ui/src/lib/settings/src/components/channel-detail/channel-detail.component.html

@@ -115,7 +115,7 @@
         <ng-container *ngFor="let customField of customFields">
             <vdr-custom-field-control
                 *ngIf="customFieldIsSet(customField.name)"
-                entityName="GlobalSettings"
+                entityName="Channel"
                 [customFieldsFormGroup]="detailForm.get('customFields')"
                 [customField]="customField"
             ></vdr-custom-field-control>

packages/admin-ui/src/lib/settings/src/components/profile/profile.component.html

@@ -35,7 +35,7 @@
         <ng-container *ngFor="let customField of customFields">
             <vdr-custom-field-control
                 *ngIf="customFieldIsSet(customField.name)"
-                entityName="GlobalSettings"
+                entityName="Administrator"
                 [customFieldsFormGroup]="detailForm.get('customFields')"
                 [customField]="customField"
             ></vdr-custom-field-control>