54472: Post request on submit and collection create page

resources/i18n/en.json

@@ -13,6 +13,23 @@
           "head": "Recent Submissions"
         }
       }
+    },
+    "edit": {
+      "name": "Name",
+      "description": "Short Description",
+      "introductory": "Introductory text (HTML)",
+      "copyright": "Copyright text (HTML)",
+      "news": "News (HTML)",
+      "license": "License",
+      "provenance": "Provenance",
+      "submit": "Submit",
+      "cancel": "Cancel",
+      "required": {
+        "name": "Please enter a collection name"
+      }
+    },
+    "create": {
+      "head": "Create a Collection"
     }
   },
   "community": {

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

@@ -0,0 +1,35 @@
+<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="news" 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="news" 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">{{ 'collection.edit.cancel' | translate }}</button>
+    <button type="submit" class="btn btn-secondary">{{ 'collection.edit.submit' | translate }}</button>
+  </div>
+</form>

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

@@ -0,0 +1,7 @@
+@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

@@ -0,0 +1,32 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { isNotEmpty } from '../../shared/empty.util';
+
+@Component({
+  selector: 'ds-collection-form',
+  styleUrls: ['./collection-form.component.scss'],
+  templateUrl: './collection-form.component.html'
+})
+export class CollectionFormComponent {
+
+  name: string;
+  description: string;
+  introductory: string;
+  copyright: string;
+  news: string;
+  license: string;
+  provenance: string;
+
+  nameRequiredError = false;
+
+  @Output() submitted: EventEmitter<any> = new EventEmitter();
+
+  onSubmit(data: any) {
+    if (isNotEmpty(data.name)) {
+      this.submitted.emit(data);
+      this.nameRequiredError = false;
+    } else {
+      this.nameRequiredError = true;
+    }
+  }
+
+}

src/app/+collection-page/collection-page-routing.module.ts

@@ -2,10 +2,12 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { CollectionPageComponent } from './collection-page.component';
+import { CreateCollectionPageComponent } from './create-collection-page/create-collection-page.component';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
+      { path: 'create', component: CreateCollectionPageComponent },
       { path: ':id', component: CollectionPageComponent, pathMatch: 'full' }
     ])
   ]

src/app/+collection-page/collection-page.module.ts

@@ -5,6 +5,8 @@ import { SharedModule } from '../shared/shared.module';
 
 import { CollectionPageComponent } from './collection-page.component';
 import { CollectionPageRoutingModule } from './collection-page-routing.module';
+import { CreateCollectionPageComponent } from './create-collection-page/create-collection-page.component';
+import { CollectionFormComponent } from './collection-form/collection-form.component';
 
 @NgModule({
   imports: [
@@ -14,6 +16,8 @@ import { CollectionPageRoutingModule } from './collection-page-routing.module';
   ],
   declarations: [
     CollectionPageComponent,
+    CreateCollectionPageComponent,
+    CollectionFormComponent
   ]
 })
 export class CollectionPageModule {

src/app/+collection-page/create-collection-page/create-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">{{ 'collection.create.head' | translate }}</h2>
+    </div>
+  </div>
+  <ds-collection-form (submitted)="onSubmit($event)"></ds-collection-form>
+</div>

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { Community } from '../../core/shared/community.model';
+import { ComColDataService } from '../../core/data/comcol-data.service';
+import { NormalizedCommunity } from '../../core/cache/models/normalized-community.model';
+import { CommunityDataService } from '../../core/data/community-data.service';
+import { CollectionDataService } from '../../core/data/collection-data.service';
+import { Collection } from '../../core/shared/collection.model';
+
+@Component({
+  selector: 'ds-create-collection',
+  styleUrls: ['./create-collection-page.component.scss'],
+  templateUrl: './create-collection-page.component.html'
+})
+export class CreateCollectionPageComponent {
+
+  public constructor(private collectionDataService: CollectionDataService) {
+
+  }
+
+  onSubmit(data: any) {
+    const collection = Object.assign(new Collection(), {
+      name: data.name
+    });
+    this.collectionDataService.create(collection);
+  }
+
+}

src/app/core/data/collection-data.service.ts

@@ -31,7 +31,8 @@ export class CollectionDataService extends ComColDataService<NormalizedCollectio
     super();
   }
 
-  getName(collection: Collection) {
+  buildCreateParams(collection: Collection) {
-    return collection.name;
+    const urlParams = '?name=' + collection.name;
+    return urlParams;
   }
 }

src/app/core/data/comcol-data.service.ts

@@ -75,13 +75,12 @@ export abstract class ComColDataService<TNormalized extends NormalizedObject, TD
         const headers = new HttpHeaders();
         headers.append('Authentication', this.authService.buildAuthHeader());
         options.headers = headers;
-        console.log(options);
+        return new PostRequest(this.requestService.generateRequestId(), endpointURL + this.buildCreateParams(comcol));
-        return new PostRequest(this.requestService.generateRequestId(), endpointURL + '?name=' + this.getName(comcol), options);
       }),
       configureRequest(this.requestService)
-    );
+    ).subscribe();
   }
 
-  abstract getName(comcol: TDomain): string;
+  abstract buildCreateParams(comcol: TDomain): string;
 
 }

src/app/core/data/community-data.service.ts

@@ -34,7 +34,8 @@ export class CommunityDataService extends ComColDataService<NormalizedCommunity,
     return this.halService.getEndpoint(this.linkPath);
   }
 
-  getName(community: Community) {
+  buildCreateParams(community: Community) {
-    return community.name;
+    const urlParams = '?name=' + community.name;
+    return urlParams;
   }
 }