feat: edit/create asset page (#770)

CHANGELOG.md

@@ -45,6 +45,7 @@ Broker UI removal refactoring, ToS dialog.
 
 - Added Initiate Negotiation Confirm ToS Dialog
 - Support for creating "On Request" Data Offers
+- Replaced create/edit asset dialogs with full page forms with structure that enables faster asset creation
 
 ### Deployment Migration Notes
 

src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog-data.service.ts

@@ -33,8 +33,15 @@ export class AssetDetailDialogDataService {
     asset: UiAssetMapped,
     opts: {onAssetEditClick: OnAssetEditClickFn},
   ): AssetDetailDialogData {
+    const assetDetailsReadonly = this.assetDetailsReadonly(asset);
     return {
-      ...this.assetDetailsReadonly(asset),
+      ...assetDetailsReadonly,
+      propertyGridGroups: [
+        ...assetDetailsReadonly.propertyGridGroups,
+        ...this.assetPropertyGridGroupBuilder.buildOnRequestContactInformation(
+          asset,
+        ),
+      ],
       showDeleteButton: true,
       showEditButton: true,
       onAssetEditClick: opts.onAssetEditClick,

src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.component.html

@@ -3,7 +3,7 @@
     <mat-icon
       *ngIf="data.type === 'asset-details'"
       class="mat-card-avatar-icon">
-      upload
+      {{ asset.dataSourceAvailability === 'LIVE' ? 'upload' : 'contact_page' }}
     </mat-icon>
     <mat-icon
       *ngIf="data.type === 'contract-agreement'"

src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts

@@ -398,4 +398,29 @@ export class AssetPropertyGridGroupBuilder {
 
     return `${start.toLocaleDateString()} - ${end.toLocaleDateString()}`;
   }
+
+  buildOnRequestContactInformation(asset: UiAssetMapped): PropertyGridGroup[] {
+    if (asset.dataSourceAvailability === 'LIVE') {
+      return [];
+    }
+    return [
+      {
+        groupLabel: 'Contact Information',
+        properties: [
+          {
+            icon: 'mail',
+            label: 'Contact E-Mail Address',
+            ...this.propertyGridUtils.guessValue(asset.onRequestContactEmail),
+          },
+          {
+            icon: 'subject',
+            label: 'Preferred E-Mail Subject',
+            ...this.propertyGridUtils.guessValue(
+              asset.onRequestContactEmailSubject,
+            ),
+          },
+        ],
+      },
+    ];
+  }
 }

src/app/component-library/data-address/data-address-type-select/data-address-type-select-items.ts

@@ -6,20 +6,6 @@ export const dataAddressTypeSelectItems = (
 ): DataAddressTypeSelectItem[] => {
   const items: DataAddressTypeSelectItem[] = [];
 
-  if (type === 'Datasource-Edit') {
-    items.push({
-      id: 'Unchanged',
-      label: 'Leave unchanged',
-    });
-  }
-
-  if (type.startsWith('Datasource')) {
-    items.push({
-      id: 'On-Request',
-      label: '"On Request" Data Offer',
-    });
-  }
-
   items.push(
     {
       id: 'Http',

src/app/component-library/data-address/data-address-type-select/data-address-type-select-mode.ts

@@ -1,4 +1 @@
-export type DataAddressTypeSelectMode =
-  | 'Datasource-Create'
-  | 'Datasource-Edit'
-  | 'Datasink';
+export type DataAddressTypeSelectMode = 'Datasource-Create' | 'Datasink';

src/app/component-library/edit-asset-form/data-category-select/data-category-select.component.html

@@ -0,0 +1,16 @@
+<edit-asset-form-label
+  htmlFor="create-asset-form-data-category"
+  [ctrl]="control"
+  [label]="label"></edit-asset-form-label>
+<mat-form-field class="w-full" color="accent">
+  <mat-select
+    id="create-asset-form-data-category"
+    placeholder="Select data category..."
+    [formControl]="control"
+    [compareWith]="'id' | compareByField">
+    <mat-option [value]="null"></mat-option>
+    <mat-option *ngFor="let item of items" [value]="item">
+      {{ item.label }}
+    </mat-option>
+  </mat-select>
+</mat-form-field>

src/app/routes/connector-ui/asset-page/data-category-select/data-category-select.component.ts → src/app/component-library/edit-asset-form/data-category-select/data-category-select.component.ts

@@ -1,4 +1,4 @@
-import {Component, HostBinding, Input} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {DATA_CATEGORY_SELECT_DATA} from './data-category-select-data';
 import {DataCategorySelectItem} from './data-category-select-item';
@@ -14,9 +14,5 @@ export class DataCategorySelectComponent {
   @Input()
   control!: FormControl<DataCategorySelectItem | null>;
 
-  @HostBinding('class.flex')
-  @HostBinding('class.flex-row')
-  cls = true;
-
   items = DATA_CATEGORY_SELECT_DATA;
 }

src/app/routes/connector-ui/asset-page/data-subcategory-select/data-subcategory-select-item.service.ts → src/app/component-library/edit-asset-form/data-subcategory-select/data-subcategory-select-item.service.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {associateBy, groupedBy} from '../../../../core/utils/map-utils';
+import {associateBy, groupedBy} from 'src/app/core/utils/map-utils';
 import {DataCategorySelectItem} from '../data-category-select/data-category-select-item';
 import {DATA_SUBCATEGORY_SELECT_DATA} from './data-subcategory-select-data';
 import {DataSubcategorySelectItem} from './data-subcategory-select-item';

src/app/component-library/edit-asset-form/data-subcategory-select/data-subcategory-select.component.html

@@ -0,0 +1,18 @@
+<edit-asset-form-label
+  htmlFor="create-asset-form-data-subcategory"
+  [ctrl]="control"
+  [label]="label"></edit-asset-form-label>
+<mat-form-field class="w-full" color="accent">
+  <mat-select
+    id="create-asset-form-data-subcategory"
+    placeholder="Select data subcategory..."
+    [formControl]="control"
+    [compareWith]="'id' | compareByField">
+    <mat-option [value]="null">-</mat-option>
+    <mat-option
+      *ngFor="let item of dataCategory | dataSubcategoryItems"
+      [value]="item">
+      {{ item.label }}
+    </mat-option>
+  </mat-select>
+</mat-form-field>

src/app/routes/connector-ui/asset-page/data-subcategory-select/data-subcategory-select.component.ts → src/app/component-library/edit-asset-form/data-subcategory-select/data-subcategory-select.component.ts

@@ -1,4 +1,4 @@
-import {Component, HostBinding, Input} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {DataCategorySelectItem} from '../data-category-select/data-category-select-item';
 import {DataSubcategorySelectItem} from './data-subcategory-select-item';
@@ -16,8 +16,4 @@ export class DataSubcategorySelectComponent {
 
   @Input()
   control!: FormControl<DataSubcategorySelectItem | null>;
-
-  @HostBinding('class.flex')
-  @HostBinding('class.flex-row')
-  cls = true;
 }

src/app/component-library/edit-asset-form/edit-asset-form-data-address-type-select/edit-asset-form-data-address-type-select.component.html

@@ -0,0 +1,9 @@
+<edit-asset-form-label [label]="label" [ctrl]="control"></edit-asset-form-label>
+<mat-form-field class="w-full m-1" color="accent">
+  <mat-select [formControl]="control">
+    <mat-option *ngIf="!control.value" [value]="null"></mat-option>
+    <mat-option *ngFor="let item of items" [value]="item.id">
+      {{ item.label }}
+    </mat-option>
+  </mat-select>
+</mat-form-field>

src/app/component-library/edit-asset-form/edit-asset-form-data-address-type-select/edit-asset-form-data-address-type-select.component.ts

@@ -0,0 +1,30 @@
+import {Component, Input, OnChanges} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {SimpleChangesTyped} from '../../../core/utils/angular-utils';
+import {DataAddressType} from '../../data-address/data-address-type-select/data-address-type';
+import {dataAddressTypeSelectItems} from '../../data-address/data-address-type-select/data-address-type-select-items';
+import {DataAddressTypeSelectMode} from '../../data-address/data-address-type-select/data-address-type-select-mode';
+
+@Component({
+  selector: 'edit-asset-form-data-address-type-select',
+  templateUrl: 'edit-asset-form-data-address-type-select.component.html',
+})
+export class EditAssetFormDataAddressTypeSelectComponent implements OnChanges {
+  @Input()
+  label!: string;
+
+  @Input()
+  control!: FormControl<DataAddressType | null>;
+
+  @Input()
+  mode: DataAddressTypeSelectMode = 'Datasource-Create';
+
+  items = dataAddressTypeSelectItems(this.mode);
+  ngOnChanges(
+    changes: SimpleChangesTyped<EditAssetFormDataAddressTypeSelectComponent>,
+  ) {
+    if (changes.mode) {
+      this.items = dataAddressTypeSelectItems(this.mode);
+    }
+  }
+}

src/app/component-library/edit-asset-form/edit-asset-form-group/edit-asset-form-group.component.html

@@ -0,0 +1,15 @@
+<div
+  class="grid grid-cols-1 gap-x-8 gap-y-10 !border-b !border-gray-900/10 pb-12 md:grid-cols-3">
+  <div>
+    <h2 class="!text-base !font-medium !leading-7 !text-gray-900 !m-0">
+      {{ myTitle }}
+    </h2>
+    <p class="!mt-1 !text-sm !leading-6 !text-gray-600 !font-light">
+      {{ description }}
+    </p>
+  </div>
+
+  <div class="grid gap-x-6 gap-y-6 md:col-span-2">
+    <ng-content></ng-content>
+  </div>
+</div>

src/app/component-library/edit-asset-form/edit-asset-form-group/edit-asset-form-group.component.ts

@@ -0,0 +1,10 @@
+import {Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'edit-asset-form-group',
+  templateUrl: './edit-asset-form-group.component.html',
+})
+export class EditAssetFormGroupComponent {
+  @Input() myTitle!: string;
+  @Input() description!: string;
+}

src/app/component-library/edit-asset-form/edit-asset-form-label/edit-asset-form-label.component.html

@@ -0,0 +1,9 @@
+<label
+  [ngClass]="
+    ctrl?.invalid && (ctrl?.touched || ctrl?.dirty)
+      ? 'text-red-600'
+      : 'text-gray-900'
+  "
+  [for]="htmlFor"
+  >{{ label }}<span *ngIf="isRequired()" class="ml-0.5">*</span></label
+>

src/app/component-library/edit-asset-form/edit-asset-form-label/edit-asset-form-label.component.ts

@@ -0,0 +1,16 @@
+import {Component, Input} from '@angular/core';
+import {FormControl, Validators} from '@angular/forms';
+
+@Component({
+  selector: 'edit-asset-form-label',
+  templateUrl: './edit-asset-form-label.component.html',
+})
+export class EditAssetFormLabelComponent {
+  @Input() label!: string;
+  @Input() htmlFor?: string;
+  @Input() ctrl?: FormControl<any>;
+
+  isRequired(): boolean {
+    return this.ctrl?.hasValidator(Validators.required) || false;
+  }
+}

src/app/component-library/edit-asset-form/edit-asset-form.module.ts

@@ -0,0 +1,87 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatBadgeModule} from '@angular/material/badge';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatChipsModule} from '@angular/material/chips';
+import {MatNativeDateModule} from '@angular/material/core';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatDividerModule} from '@angular/material/divider';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatRadioModule} from '@angular/material/radio';
+import {MatSelectModule} from '@angular/material/select';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatStepperModule} from '@angular/material/stepper';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {RouterModule} from '@angular/router';
+import {CatalogModule} from '../catalog/catalog.module';
+import {PipesAndDirectivesModule} from '../pipes-and-directives/pipes-and-directives.module';
+import {UiElementsModule} from '../ui-elements/ui-elements.module';
+import {DataCategorySelectComponent} from './data-category-select/data-category-select.component';
+import {DataSubcategoryItemsPipe} from './data-subcategory-select/data-subcategory-items.pipe';
+import {DataSubcategorySelectComponent} from './data-subcategory-select/data-subcategory-select.component';
+import {EditAssetFormDataAddressTypeSelectComponent} from './edit-asset-form-data-address-type-select/edit-asset-form-data-address-type-select.component';
+import {EditAssetFormGroupComponent} from './edit-asset-form-group/edit-asset-form-group.component';
+import {EditAssetFormLabelComponent} from './edit-asset-form-label/edit-asset-form-label.component';
+import {EditAssetFormComponent} from './edit-asset-form/edit-asset-form.component';
+import {KeywordSelectComponent} from './keyword-select/keyword-select.component';
+import {LanguageSelectComponent} from './language-select/language-select.component';
+import {TransportModeSelectComponent} from './transport-mode-select/transport-mode-select.component';
+
+@NgModule({
+  imports: [
+    // Angular
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    RouterModule,
+
+    // Angular Material
+    MatBadgeModule,
+    MatButtonModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatDatepickerModule,
+    MatDividerModule,
+    MatFormFieldModule,
+    MatProgressSpinnerModule,
+    MatSelectModule,
+    MatSlideToggleModule,
+    MatStepperModule,
+    MatTooltipModule,
+    MatPaginatorModule,
+    MatInputModule,
+    MatRadioModule,
+    MatIconModule,
+    MatDialogModule,
+    MatNativeDateModule,
+
+    // EDC UI Modules
+    CatalogModule,
+    PipesAndDirectivesModule,
+    UiElementsModule,
+  ],
+  declarations: [
+    EditAssetFormComponent,
+    EditAssetFormGroupComponent,
+    EditAssetFormLabelComponent,
+    KeywordSelectComponent,
+    DataCategorySelectComponent,
+    DataSubcategorySelectComponent,
+    DataSubcategoryItemsPipe,
+    EditAssetFormDataAddressTypeSelectComponent,
+    TransportModeSelectComponent,
+    LanguageSelectComponent,
+  ],
+  exports: [EditAssetFormComponent, EditAssetFormLabelComponent],
+  providers: [],
+})
+export class EditAssetFormModule {}

src/app/routes/connector-ui/asset-page/asset-edit-dialog/assets-id-validator-builder.ts → src/app/component-library/edit-asset-form/edit-asset-form/assets-id-validator-builder.ts

@@ -6,7 +6,7 @@ import {
 } from '@angular/forms';
 import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
-import {AssetService} from '../../../../core/services/asset.service';
+import {AssetService} from 'src/app/core/services/asset.service';
 
 @Injectable({
   providedIn: 'root',