refactoring comcol forms

resources/i18n/en.json

@@ -14,19 +14,22 @@
         }
       }
     },
-    "edit": {
+    "form": {
-      "name": "Name",
+      "title": "Name",
-      "description": "Short Description",
+      "description": "Introductory text (HTML)",
-      "introductory": "Introductory text (HTML)",
+      "abstract": "Short Description",
-      "copyright": "Copyright text (HTML)",
+      "rights": "Copyright text (HTML)",
-      "news": "News (HTML)",
+      "tableofcontents": "News (HTML)",
       "license": "License",
       "provenance": "Provenance",
-      "submit": "Submit",
+      "errors": {
-      "cancel": "Cancel",
+        "title": {
-      "required": {
+          "required": "Please enter a collection name"
-        "name": "Please enter a collection name"
         }
+      }
+    },
+    "edit": {
+      "head": "Edit Collection"
     },
     "create": {
       "head": "Create a Collection",
@@ -57,7 +60,7 @@
       }
     },
     "edit": {
-      "head": "Edit collection"
+      "head": "Edit Community"
     },
     "create": {
       "head": "Create a Community",

src/app/+collection-page/collection-form/collection-form.component.html

@@ -1,35 +0,0 @@
-<form #form="ngForm" (ngSubmit)="onSubmit(form.value)" class="row" action="/">
-  <div class="col-12 form-group">
-    <label for="collection-name" class="font-weight-bold">{{ 'collection.edit.name' | translate }}</label>
-    <input type="text" [(ngModel)]="name" name="name" id="collection-name" class="form-control" [ngClass]="{'is-invalid' : !name && nameRequiredError}" aria-label="Collection Name" />
-    <div class="invalid-feedback">{{ 'collection.edit.required.name' | translate }}</div>
-  </div>
-  <div class="col-12 form-group">
-    <label for="collection-description" class="font-weight-bold">{{ 'collection.edit.description' | translate }}</label>
-    <input type="text" [(ngModel)]="description" name="description" id="collection-description" class="form-control" aria-label="Collection Short Description" />
-  </div>
-  <div class="col-12 form-group">
-    <label for="collection-introductory" class="font-weight-bold">{{ 'collection.edit.introductory' | translate }}</label>
-    <textarea [(ngModel)]="introductory" name="introductory" id="collection-introductory" class="form-control" aria-label="Collection Introductory Text" rows="6" ></textarea>
-  </div>
-  <div class="col-12 form-group">
-    <label for="collection-copyright" class="font-weight-bold">{{ 'collection.edit.copyright' | translate }}</label>
-    <textarea [(ngModel)]="copyright" name="copyright" id="collection-copyright" class="form-control" aria-label="Collection Copyright Text" rows="6" ></textarea>
-  </div>
-  <div class="col-12 form-group">
-    <label for="collection-news" class="font-weight-bold">{{ 'collection.edit.news' | translate }}</label>
-    <textarea [(ngModel)]="news" name="news" id="collection-news" class="form-control" aria-label="Collection News" rows="6" ></textarea>
-  </div>
-  <div class="col-12 form-group">
-    <label for="collection-license" class="font-weight-bold">{{ 'collection.edit.license' | translate }}</label>
-    <textarea [(ngModel)]="license" name="license" id="collection-license" class="form-control" aria-label="Collection License" rows="6" ></textarea>
-  </div>
-  <div class="col-12 form-group">
-    <label for="collection-provenance" class="font-weight-bold">{{ 'collection.edit.provenance' | translate }}</label>
-    <textarea [(ngModel)]="provenance" name="provenance" id="collection-provenance" class="form-control" aria-label="Collection Provenance" rows="6" ></textarea>
-  </div>
-  <div class="col-12 form-group">
-    <button type="button" class="btn btn-secondary" id="collection-cancel" (click)="cancel()">{{ 'collection.edit.cancel' | translate }}</button>
-    <button type="submit" class="btn btn-secondary" id="collection-submit">{{ 'collection.edit.submit' | translate }}</button>
-  </div>
-</form>

src/app/+collection-page/collection-form/collection-form.component.scss

@@ -1,7 +0,0 @@
-@import '../../../styles/variables.scss';
-
-// temporary fix for bootstrap 4 beta btn color issue
-.btn-secondary {
-  background-color: $input-bg;
-  color: $input-color;
-}

src/app/+collection-page/collection-form/collection-form.component.ts

@@ -1,41 +1,56 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, Input } from '@angular/core';
-import { isNotEmpty } from '../../shared/empty.util';
+import {
-import { Location } from '@angular/common';
+  DynamicInputModel,
+  DynamicTextAreaModel
+} from '@ng-dynamic-forms/core';
+import { DynamicFormControlModel } from '@ng-dynamic-forms/core/src/model/dynamic-form-control.model';
+import { ResourceType } from '../../core/shared/resource-type';
+import { Collection } from '../../core/shared/collection.model';
+import { ComColFormComponent } from '../../comcol-forms/comcol-form/comcol-form.component';
 
 @Component({
   selector: 'ds-collection-form',
-  styleUrls: ['./collection-form.component.scss'],
+  styleUrls: ['../../comcol-forms/comcol-form.component.scss'],
-  templateUrl: './collection-form.component.html'
+  templateUrl: '../../comcol-forms/comcol-form/comcol-form.component.html'
 })
-export class CollectionFormComponent {
+export class CollectionFormComponent extends ComColFormComponent<Collection> {
-
+  @Input() dso: Collection = new Collection();
-  name: string;
+  type = ResourceType.Collection;
-  description: string;
+  formModel: DynamicFormControlModel[] = [
-  introductory: string;
+    new DynamicInputModel({
-  copyright: string;
+      id: 'title',
-  news: string;
+      name: 'dc.title',
-  license: string;
+      required: true,
-  provenance: string;
+      validators: {
-
+        required: null
-  nameRequiredError = false;
+      },
-
+      errorMessages: {
-  @Output() submitted: EventEmitter<any> = new EventEmitter();
+        required: 'Please enter a name for this title'
-
+      },
-  public constructor(private location: Location) {
+    }),
-
+    new DynamicTextAreaModel({
-  }
+      id: 'description',
-
+      name: 'dc.description',
-  onSubmit(data: any) {
+    }),
-    if (isNotEmpty(data.name)) {
+    new DynamicTextAreaModel({
-      this.submitted.emit(data);
+      id: 'abstract',
-      this.nameRequiredError = false;
+      name: 'dc.description.abstract',
-    } else {
+    }),
-      this.nameRequiredError = true;
+    new DynamicTextAreaModel({
-    }
+      id: 'rights',
-  }
+      name: 'dc.rights',
-
+    }),
-  cancel() {
+    new DynamicTextAreaModel({
-    this.location.back();
+      id: 'tableofcontents',
-  }
+      name: 'dc.description.tableofcontents',
-
+    }),
+    new DynamicTextAreaModel({
+      id: 'license',
+      name: 'dc.rights.license',
+    }),
+    new DynamicTextAreaModel({
+      id: 'provenance',
+      name: 'dc.description.provenance',
+    }),
+  ];
 }

src/app/+collection-page/create-collection-page/create-collection-page.component.html

@@ -1,11 +1,11 @@
 <div class="container">
   <div class="row">
     <div class="col-12 pb-4">
-      <ng-container *ngVar="(communityRDObs | async)?.payload as community">
+      <ng-container *ngVar="(parentUUID$ | async)?.payload as parent">
-        <h2 *ngIf="!community" id="header" class="border-bottom pb-2">{{ 'collection.create.head' | translate }}</h2>
+        <h2 *ngIf="!parent" id="header" class="border-bottom pb-2">{{ 'collection.create.head' | translate }}</h2>
-        <h2 *ngIf="community" id="sub-header" class="border-bottom pb-2">{{ 'collection.create.sub-head' | translate:{ parent: community.name } }}</h2>
+        <h2 *ngIf="parent" id="sub-header" class="border-bottom pb-2">{{ 'collection.create.sub-head' | translate:{ parent: parent.name } }}</h2>
       </ng-container>
     </div>
   </div>
-  <ds-collection-form (submitted)="onSubmit($event)"></ds-collection-form>
+  <ds-collection-form (submitForm)="onSubmit($event)"></ds-collection-form>
 </div>

src/app/+collection-page/create-collection-page/create-collection-page.component.ts

@@ -1,56 +1,52 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { Community } from '../../core/shared/community.model';
+import {Collection} from '../../core/shared/collection.model';
-import { CommunityDataService } from '../../core/data/community-data.service';
+import {CollectionDataService} from '../../core/data/collection-data.service';
-import { CollectionDataService } from '../../core/data/collection-data.service';
+import { Observable } from 'rxjs';
-import { Collection } from '../../core/shared/collection.model';
 import { RouteService } from '../../shared/services/route.service';
 import { Router } from '@angular/router';
-import { Observable } from 'rxjs';
-import { take } from 'rxjs/operators';
 import { RemoteData } from '../../core/data/remote-data';
-import { isNotEmpty } from '../../shared/empty.util';
+import { isNotEmpty, isNotUndefined } from '../../shared/empty.util';
-import { ResourceType } from '../../core/shared/resource-type';
+import { take } from 'rxjs/operators';
+import { getSucceededRemoteData } from '../../core/shared/operators';
+import {Community} from '../../core/shared/community.model';
+import {CommunityDataService} from '../../core/data/community-data.service';
 
 @Component({
   selector: 'ds-create-collection',
   styleUrls: ['./create-collection-page.component.scss'],
   templateUrl: './create-collection-page.component.html'
 })
-export class CreateCollectionPageComponent {
+export class CreateCommunityPageComponent implements OnInit {
 
   public parentUUID$: Observable<string>;
-  public communityRDObs: Observable<RemoteData<Community>>;
+  public parentRD$: Observable<RemoteData<Community>>;
 
   public constructor(
-    private collectionDataService: CollectionDataService,
     private communityDataService: CommunityDataService,
+    private collectionDataService: CollectionDataService,
     private routeService: RouteService,
     private router: Router
   ) {
+
+  }
+
+  ngOnInit(): void {
     this.parentUUID$ = this.routeService.getQueryParameterValue('parent');
-    this.parentUUID$.subscribe((uuid: string) => {
+    this.parentUUID$.subscribe((parentID: string) => {
-      if (isNotEmpty(uuid)) {
+      if (isNotEmpty(parentID)) {
-        this.communityRDObs = this.communityDataService.findById(uuid);
+        this.parentRD$ = this.communityDataService.findById(parentID);
       }
     });
   }
 
-  onSubmit(data: any) {
+  onSubmit(collection: Collection) {
     this.parentUUID$.pipe(take(1)).subscribe((uuid: string) => {
-      const collection = Object.assign(new Collection(), {
+      this.collectionDataService.create(collection, uuid)
-        name: data.name,
+        .pipe(getSucceededRemoteData())
-        metadata: [
+        .subscribe((collectionRD: RemoteData<Community>) => {
-          { key: 'dc.description', value: data.introductory },
+          if (isNotUndefined(collectionRD)) {
-          { key: 'dc.description.abstract', value: data.description },
+            const newUUID = collectionRD.payload.uuid;
-          { key: 'dc.rights', value: data.copyright },
+            this.router.navigate(['/collections/' + newUUID]);
-          { key: 'dc.rights.license', value: data.license }
-          // TODO: metadata for news and provenance
-        ],
-        type: ResourceType.Collection
-      });
-      this.collectionDataService.create(collection, uuid).subscribe((rd: RemoteData<Collection>) => {
-        if (rd.hasSucceeded) {
-          this.router.navigate(['collections', rd.payload.id]);
           }
         });
     });

src/app/+collection-page/edit-collection-page/edit-collection-page.component.html

@@ -0,0 +1,8 @@
+<div class="container">
+  <div class="row">
+    <div class="col-12 pb-4">
+        <h2 id="header" class="border-bottom pb-2">{{ 'community.edit.head' | translate }}</h2>
+    </div>
+  </div>
+  <ds-community-form (submitForm)="onSubmit($event)" [community]="(communityRD$ | async)?.payload"></ds-community-form>
+</div>

src/app/+collection-page/edit-collection-page/edit-community-page.component.scss

@@ -0,0 +1 @@
+

src/app/+collection-page/edit-collection-page/edit-community-page.component.spec.ts

@@ -0,0 +1,121 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { CommunityDataService } from '../../core/data/community-data.service';
+import { RouteService } from '../../shared/services/route.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { of as observableOf } from 'rxjs';
+import { RemoteData } from '../../core/data/remote-data';
+import { Community } from '../../core/shared/community.model';
+import { SharedModule } from '../../shared/shared.module';
+import { CommonModule } from '@angular/common';
+import { RouterTestingModule } from '@angular/router/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { EditCommunityPageComponent } from './edit-community-page.component';
+import { ActivatedRouteStub } from '../../shared/testing/active-router-stub';
+
+fdescribe('EditCommunityPageComponent', () => {
+  let comp: EditCommunityPageComponent;
+  let fixture: ComponentFixture<EditCommunityPageComponent>;
+  let communityDataService: CommunityDataService;
+  let routeService: RouteService;
+  let router: Router;
+
+  let community;
+  let newCommunity;
+  let communityDataServiceStub;
+  let routeServiceStub;
+  let routerStub;
+  let routeStub;
+
+  function initializeVars() {
+    community = Object.assign(new Community(), {
+      uuid: 'a20da287-e174-466a-9926-f66b9300d347',
+      metadata: [{
+        key: 'dc.title',
+        value: 'test community'
+      }]
+    });
+
+    newCommunity = Object.assign(new Community(), {
+      uuid: '1ff59938-a69a-4e62-b9a4-718569c55d48',
+      metadata: [{
+        key: 'dc.title',
+        value: 'new community'
+      }]
+    });
+
+    communityDataServiceStub = {
+      findById: (uuid) => observableOf(new RemoteData(false, false, true, null, Object.assign(new Community(), {
+        uuid: uuid,
+        metadata: [{
+          key: 'dc.title',
+          value: community.name
+        }]
+      }))),
+      update: (com, uuid?) => observableOf(new RemoteData(false, false, true, undefined, newCommunity))
+
+    };
+
+    routeServiceStub = {
+      getQueryParameterValue: (param) => observableOf(community.uuid)
+    };
+    routerStub = {
+      navigate: (commands) => commands
+    };
+
+    routeStub = {
+      data: observableOf(community)
+    };
+
+  }
+
+  beforeEach(async(() => {
+    initializeVars();
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot(), SharedModule, CommonModule, RouterTestingModule],
+      declarations: [EditCommunityPageComponent],
+      providers: [
+        { provide: CommunityDataService, useValue: communityDataServiceStub },
+        { provide: RouteService, useValue: routeServiceStub },
+        { provide: Router, useValue: routerStub },
+        { provide: ActivatedRoute, useValue: routeStub },
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditCommunityPageComponent);
+    comp = fixture.componentInstance;
+    fixture.detectChanges();
+    communityDataService = (comp as any).communityDataService;
+    routeService = (comp as any).routeService;
+    router = (comp as any).router;
+  });
+
+  describe('onSubmit', () => {
+    let data;
+    beforeEach(() => {
+      data = Object.assign(new Community(), {
+        metadata: [{
+          key: 'dc.title',
+          value: 'test'
+        }]
+      });
+    });
+    it('should navigate when successful', () => {
+      spyOn(router, 'navigate');
+      comp.onSubmit(data);
+      fixture.detectChanges();
+      expect(router.navigate).toHaveBeenCalled();
+    });
+
+    it('should not navigate on failure', () => {
+      spyOn(router, 'navigate');
+      spyOn(communityDataService, 'update').and.returnValue(observableOf(new RemoteData(true, true, false, undefined, newCommunity)));
+      comp.onSubmit(data);
+      fixture.detectChanges();
+      expect(router.navigate).not.toHaveBeenCalled();
+    });
+  });
+});

src/app/+collection-page/edit-collection-page/edit-community-page.component.ts

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+import { Community } from '../../core/shared/community.model';
+import { CommunityDataService } from '../../core/data/community-data.service';
+import { Observable } from 'rxjs';
+import { RouteService } from '../../shared/services/route.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RemoteData } from '../../core/data/remote-data';
+import { isNotUndefined } from '../../shared/empty.util';
+import { first, map } from 'rxjs/operators';
+import { getSucceededRemoteData } from '../../core/shared/operators';
+
+@Component({
+  selector: 'ds-edit-community',
+  styleUrls: ['./edit-community-page.component.scss'],
+  templateUrl: './edit-collection-page.component.html'
+})
+export class EditCommunityPageComponent {
+
+  public parentUUID$: Observable<string>;
+  public parentRD$: Observable<RemoteData<Community>>;
+  public communityRD$: Observable<RemoteData<Community>>;
+
+  public constructor(
+    private communityDataService: CommunityDataService,
+    private routeService: RouteService,
+    private router: Router,
+    private route: ActivatedRoute
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.communityRD$ = this.route.data.pipe(first(), map((data) => data.community));
+  }
+
+  onSubmit(community: Community) {
+    this.communityDataService.update(community)
+      .pipe(getSucceededRemoteData())
+      .subscribe((communityRD: RemoteData<Community>) => {
+        if (isNotUndefined(communityRD)) {
+          const newUUID = communityRD.payload.uuid;
+          this.router.navigate(['/communities/' + newUUID]);
+        }
+      });
+  }
+}

src/app/+community-page/community-form/community-form.component.scss

@@ -1,7 +0,0 @@
-@import '../../../styles/variables.scss';
-
-// temporary fix for bootstrap 4 beta btn color issue
-.btn-secondary {
-  background-color: $input-bg;
-  color: $input-color;
-}

src/app/+community-page/community-form/community-form.component.ts

@@ -1,27 +1,21 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, Input, OnInit, Output } from '@angular/core';
-import { Location } from '@angular/common';
 import {
-  DynamicFormService,
   DynamicInputModel,
   DynamicTextAreaModel
 } from '@ng-dynamic-forms/core';
-import { FormGroup } from '@angular/forms';
 import { DynamicFormControlModel } from '@ng-dynamic-forms/core/src/model/dynamic-form-control.model';
 import { Community } from '../../core/shared/community.model';
 import { ResourceType } from '../../core/shared/resource-type';
-import { isNotEmpty } from '../../shared/empty.util';
+import { ComColFormComponent } from '../../comcol-forms/comcol-form/comcol-form.component';
-import { TranslateService } from '@ngx-translate/core';
-
-const LABEL_KEY_PREFIX = 'community.form.';
-const ERROR_KEY_PREFIX = 'community.form.errors.';
 
 @Component({
   selector: 'ds-community-form',
-  styleUrls: ['./community-form.component.scss'],
+  styleUrls: ['../../comcol-forms/comcol-form.component.scss'],
-  templateUrl: './community-form.component.html'
+  templateUrl: '../../comcol-forms/comcol-form/comcol-form.component.html'
 })
-export class CommunityFormComponent implements OnInit {
+export class CommunityFormComponent extends ComColFormComponent<Community> {
-  @Input() community: Community = new Community();
+  @Input() dso: Community = new Community();
+  type = ResourceType.Community;
   formModel: DynamicFormControlModel[] = [
     new DynamicInputModel({
       id: 'title',
@@ -51,57 +45,4 @@ export class CommunityFormComponent implements OnInit {
       name: 'dc.description.tableofcontents',
     }),
   ];
-
-  formGroup: FormGroup;
-
-  @Output() submitForm: EventEmitter<any> = new EventEmitter();
-
-  public constructor(private location: Location,
-                     private formService: DynamicFormService,
-                     private translate: TranslateService) {
-  }
-
-  ngOnInit(): void {
-    this.formModel.forEach(
-      (fieldModel: DynamicInputModel) => {
-        fieldModel.value = this.community.findMetadata(fieldModel.name);
-      }
-    );
-    this.formGroup = this.formService.createFormGroup(this.formModel);
-    this.updateFieldTranslations();
-    this.translate.onLangChange
-      .subscribe(() => {
-        this.updateFieldTranslations();
-      });
-  }
-
-  onSubmit() {
-    const metadata = this.formModel.map(
-      (fieldModel: DynamicInputModel) => {
-        return { key: fieldModel.name, value: fieldModel.value }
-      }
-    );
-    const filteredOldMetadata = this.community.metadata.filter((filter) => !metadata.map((md) => md.key).includes(filter.key));
-    const filteredNewMetadata = metadata.filter((md) => isNotEmpty(md.value));
-    const newMetadata = [...filteredOldMetadata, ...filteredNewMetadata];
-    const updatedCommunity = Object.assign({}, this.community, {
-      metadata: newMetadata,
-      type: ResourceType.Community
-    });
-    this.submitForm.emit(updatedCommunity);
-  }
-
-  private updateFieldTranslations() {
-    this.formModel.forEach(
-      (fieldModel: DynamicInputModel) => {
-        fieldModel.label = this.translate.instant(LABEL_KEY_PREFIX + fieldModel.id);
-        if (isNotEmpty(fieldModel.validators)) {
-          fieldModel.errorMessages = {};
-          Object.keys(fieldModel.validators).forEach((key) => {
-            fieldModel.errorMessages[key] = this.translate.instant(ERROR_KEY_PREFIX + fieldModel.id + '.' + key);
-          });
-        }
-      }
-    );
-  }
 }

src/app/+community-page/create-community-page/create-community-page.component.ts

@@ -1,54 +1,21 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { Community } from '../../core/shared/community.model';
 import { CommunityDataService } from '../../core/data/community-data.service';
-import { Observable } from 'rxjs';
 import { RouteService } from '../../shared/services/route.service';
 import { Router } from '@angular/router';
-import { RemoteData } from '../../core/data/remote-data';
+import { CreateComColPageComponent } from '../../comcol-forms/create-comcol-page/create-comcol-page.component';
-import { isNotEmpty, isNotUndefined } from '../../shared/empty.util';
-import { DSpaceObject } from '../../core/shared/dspace-object.model';
-import { map, take } from 'rxjs/operators';
-import { getSucceededRemoteData } from '../../core/shared/operators';
 
 @Component({
   selector: 'ds-create-community',
   styleUrls: ['./create-community-page.component.scss'],
   templateUrl: './create-community-page.component.html'
 })
-export class CreateCommunityPageComponent implements OnInit {
+export class CreateCommunityPageComponent extends CreateComColPageComponent<Community> {
-
-  public parentUUID$: Observable<string>;
-  public parentRD$: Observable<RemoteData<Community>>;
-
   public constructor(
-    private communityDataService: CommunityDataService,
+    protected communityDataService: CommunityDataService,
-    private routeService: RouteService,
+    protected routeService: RouteService,
-    private router: Router
+    protected router: Router
   ) {
-
+    super(communityDataService, communityDataService, routeService, router);
   }
-
-  ngOnInit(): void {
-    this.parentUUID$ = this.routeService.getQueryParameterValue('parent');
-    this.parentUUID$.subscribe((parentID: string) => {
-      if (isNotEmpty(parentID)) {
-        this.parentRD$ = this.communityDataService.findById(parentID);
-      }
-    });
-  }
-
-  onSubmit(community: Community) {
-    this.parentUUID$.pipe(take(1)).subscribe((uuid: string) => {
-      this.communityDataService.create(community, uuid)
-        .pipe(getSucceededRemoteData())
-        .subscribe((communityRD: RemoteData<Community>) => {
-          if (isNotUndefined(communityRD)) {
-            const newUUID = communityRD.payload.uuid;
-            this.router.navigate(['/communities/' + newUUID]);
-          }
-      });
-    });
-  }
-
-
 }

src/app/comcol-forms/comcol-form/comcol-form.component.html

@@ -1,3 +1,3 @@
 <ds-form *ngIf="formModel"
-         [formId]="'community-form-id'"
+         [formId]="'comcol-form-id'"
          [formModel]="formModel" (submitForm)="onSubmit()"></ds-form>

src/app/comcol-forms/comcol-form/comcol-form.component.ts

@@ -0,0 +1,77 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Location } from '@angular/common';
+import {
+  DynamicFormService,
+  DynamicInputModel
+} from '@ng-dynamic-forms/core';
+import { FormGroup } from '@angular/forms';
+import { DynamicFormControlModel } from '@ng-dynamic-forms/core/src/model/dynamic-form-control.model';
+import { TranslateService } from '@ngx-translate/core';
+import { DSpaceObject } from '../../core/shared/dspace-object.model';
+import { isNotEmpty } from '../../shared/empty.util';
+import { ResourceType } from '../../core/shared/resource-type';
+
+@Component({
+  selector: 'ds-comcol-form',
+  // styleUrls: ['./comcol-form.component.scss'],
+  templateUrl: './comcol-form.component.html'
+})
+export class ComColFormComponent<T extends DSpaceObject> implements OnInit {
+  @Input() dso: T;
+  type;
+  LABEL_KEY_PREFIX = this.type + '.form.';
+  ERROR_KEY_PREFIX = this.type + '.form.errors.';
+  formModel: DynamicFormControlModel[];
+  formGroup: FormGroup;
+
+  @Output() submitForm: EventEmitter<any> = new EventEmitter();
+
+  public constructor(private location: Location,
+                     private formService: DynamicFormService,
+                     private translate: TranslateService) {
+  }
+
+  ngOnInit(): void {
+    this.formModel.forEach(
+      (fieldModel: DynamicInputModel) => {
+        fieldModel.value = this.dso.findMetadata(fieldModel.name);
+      }
+    );
+    this.formGroup = this.formService.createFormGroup(this.formModel);
+    this.updateFieldTranslations();
+    this.translate.onLangChange
+      .subscribe(() => {
+        this.updateFieldTranslations();
+      });
+  }
+
+  onSubmit() {
+    const metadata = this.formModel.map(
+      (fieldModel: DynamicInputModel) => {
+        return { key: fieldModel.name, value: fieldModel.value }
+      }
+    );
+    const filteredOldMetadata = this.dso.metadata.filter((filter) => !metadata.map((md) => md.key).includes(filter.key));
+    const filteredNewMetadata = metadata.filter((md) => isNotEmpty(md.value));
+    const newMetadata = [...filteredOldMetadata, ...filteredNewMetadata];
+    const updatedDSO = Object.assign({}, this.dso, {
+      metadata: newMetadata,
+      type: ResourceType.Community
+    });
+    this.submitForm.emit(updatedDSO);
+  }
+
+  private updateFieldTranslations() {
+    this.formModel.forEach(
+      (fieldModel: DynamicInputModel) => {
+        fieldModel.label = this.translate.instant(this.LABEL_KEY_PREFIX + fieldModel.id);
+        if (isNotEmpty(fieldModel.validators)) {
+          fieldModel.errorMessages = {};
+          Object.keys(fieldModel.validators).forEach((key) => {
+            fieldModel.errorMessages[key] = this.translate.instant(this.ERROR_KEY_PREFIX + fieldModel.id + '.' + key);
+          });
+        }
+      }
+    );
+  }
+}

src/app/comcol-forms/create-comcol-page/create-comcol-page.component.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit } from '@angular/core';
+import { Community } from '../../core/shared/community.model';
+import { CommunityDataService } from '../../core/data/community-data.service';
+import { Observable } from 'rxjs';
+import { RouteService } from '../../shared/services/route.service';
+import { Router } from '@angular/router';
+import { RemoteData } from '../../core/data/remote-data';
+import { isNotEmpty, isNotUndefined } from '../../shared/empty.util';
+import { take } from 'rxjs/operators';
+import { getSucceededRemoteData } from '../../core/shared/operators';
+import { DSpaceObject } from '../../core/shared/dspace-object.model';
+import { DataService } from '../../core/data/data.service';
+
+@Component({
+  selector: 'ds-create-community',
+  styleUrls: ['./create-community-page.component.scss'],
+  templateUrl: './create-community-page.component.html'
+})
+export class CreateComColPageComponent<T extends DSpaceObject> implements OnInit {
+  protected frontendURL: string;
+  public parentUUID$: Observable<string>;
+  public parentRD$: Observable<RemoteData<T>>;
+
+  public constructor(
+    protected  dsoDataService: DataService<T>,
+    protected parentoDataService: CommunityDataService,
+    protected routeService: RouteService,
+    protected router: Router
+  ) {
+
+  }
+
+  ngOnInit(): void {
+    this.parentUUID$ = this.routeService.getQueryParameterValue('parent');
+    this.parentUUID$.subscribe((parentID: string) => {
+      if (isNotEmpty(parentID)) {
+        this.parentRD$ = this.parentoDataService.findById(parentID);
+      }
+    });
+  }
+
+  onSubmit(dso: T) {
+    this.parentUUID$.pipe(take(1)).subscribe((uuid: string) => {
+      this.dsoDataService.create(dso, uuid)
+        .pipe(getSucceededRemoteData())
+        .subscribe((dsoRD: RemoteData<Community>) => {
+          if (isNotUndefined(dsoRD)) {
+            const newUUID = dsoRD.payload.uuid;
+            this.router.navigate([frontendURL + newUUID]);
+          }
+      });
+    });
+  }
+
+}