Dev

package.json

@@ -23,6 +23,7 @@
     "@angular/router": "^5.2.0",
     "core-js": "^2.4.1",
     "ngx-bootstrap": "^2.0.4",
+    "ngx-uploadcare-widget": "^0.2.1",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.19"
   },

src/apiHeaders.ts

@@ -0,0 +1,4 @@
+export default {
+  'Authorization': 'Bearer 314a1849bfe7a604850922b4de3144aa46b69c5e-90cc387c792d007b67bc055409392c22ee85548c',
+  'Content-Type': 'application/json'
+};

src/app/app.component.css

@@ -2,4 +2,5 @@
   right: 0.5em;
   bottom: 0.5em;
   position: fixed;
+  z-index: 1;
 }

src/app/app.component.html

@@ -4,8 +4,10 @@
   <div class="container">
     <button type="button"
             class="fab-add-document btn btn-primary bmd-btn-fab"
-            (click)="openModalWithComponent()">
+            (click)="openModalWithComponent($event)">
       <i class="material-icons">add</i>
     </button>
   </div>
+  <app-showcase [documents]="documents"
+  (deleteDocument)="handleDeleteDocument($event)"></app-showcase>
 </div>

src/app/app.component.ts

@@ -1,7 +1,9 @@
-import { Component } from '@angular/core';
+import {Component, EventEmitter} from '@angular/core';
 import {CreateDocumentComponent} from './createDocument/createDocument.component';
-import { BsModalService } from 'ngx-bootstrap/modal';
-import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
+import {BsModalService} from 'ngx-bootstrap/modal';
+import {BsModalRef} from 'ngx-bootstrap/modal/bs-modal-ref.service';
+import {HttpClient} from '@angular/common/http';
+import apiHeaders from '../apiHeaders';
 
 @Component({
   selector: 'app-root',
@@ -10,16 +12,72 @@ import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
 })
 export class AppComponent {
   bsModalRef: BsModalRef;
-  constructor(private modalService: BsModalService) {}
-  openModalWithComponent() {
-    const initialState = {
-      name: '',
-      description: '',
-      images: [],
-      title: 'Create a Document'
-    };
-    this.bsModalRef = this.modalService.show(CreateDocumentComponent, {initialState});
+  documents;
+  defaultInitialState: {
+    name: 'Type your Name',
+    description: 'Add Some Description',
+    images: Array<any>,
+    title: 'Create a Document',
+    _id: ''
+  };
+
+  constructor(private modalService: BsModalService,
+              public http: HttpClient) {
+  }
+
+  setDocuments() {
+    this.http.request(
+      'GET',
+      'https://alpha-dataflownode.zerionsoftware.com/code_assignment/records',
+      {
+        headers: {
+          ...apiHeaders
+        }
+      }
+    ).subscribe((d) => {
+        this.documents = d;
+      },
+      () => {
+        alert('Problem retrieving documents');
+      });
+  }
+
+  deleteDocument(id) {
+    const deleteUrl = 'https://alpha-dataflownode.zerionsoftware.com/code_assignment/records/'
+      + id;
+    return this.http.delete(
+      deleteUrl,
+      {
+        headers: {
+          ...apiHeaders
+        }
+      }
+    );
+  }
+
+  handleDeleteDocument(e) {
+    this.deleteDocument(e).subscribe(
+      () => {
+        this.setDocuments();
+      },
+      () => {
+        alert('There was a problem deleting document');
+      }
+    );
+  }
+
+  openModalWithComponent(initialState = this.defaultInitialState) {
+    this.modalService.onHide = new EventEmitter<any>();
+    this.modalService.onHide.subscribe(() => {
+      this.setDocuments();
+    });
+    this.bsModalRef = this.modalService.show(CreateDocumentComponent,
+      {initialState});
     this.bsModalRef.content.closeBtnName = 'Cancel';
     this.bsModalRef.content.saveBtnName = 'Save';
   }
+
+  ngOnInit() {
+    this.setDocuments();
+  }
 }

src/app/app.module.ts

@@ -2,21 +2,27 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import {AlertModule} from 'ngx-bootstrap/alert';
 import {ModalModule} from 'ngx-bootstrap';
+import {HttpClientModule} from '@angular/common/http';
 
 import { AppComponent } from './app.component';
 import { NavbarComponent } from './navbar/navbar.component';
 import { CreateDocumentComponent } from './createDocument/createDocument.component';
+import {UcWidgetComponent} from 'ngx-uploadcare-widget';
+import {ShowcaseComponent} from './showcase/showcase.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     NavbarComponent,
-    CreateDocumentComponent
+    CreateDocumentComponent,
+    UcWidgetComponent,
+    ShowcaseComponent
   ],
   imports: [
     BrowserModule,
     AlertModule.forRoot(),
-    ModalModule.forRoot()
+    ModalModule.forRoot(),
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [

src/app/createDocument/createDocument.component.html

@@ -0,0 +1,43 @@
+<div class="modal-header">
+  <h4 class="modal-title pull-left">{{title}}</h4>
+  <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="modal-body">
+  <form>
+    <div class="form-group">
+      <label for="form-input-name">Name</label>
+      <input id="form-input-name"
+             type="text"
+             class="form-control"
+             placeholder="{{name}}"
+             (input)="changeName($event)"
+             aria-label="Username"
+             aria-describedby="basic-addon1">
+    </div>
+    <div class="form-group">
+      <label for="form-input-description">Description</label>
+      <textarea id="form-input-description"
+                class="form-control"
+                (input)="changeDescription($event)"
+                placeholder="{{description}}"
+                rows="3"></textarea>
+    </div>
+    <div class="form-group">
+      <label for="form-input-files">Images - 3 at Max</label>
+        <ngx-uploadcare-widget
+          id="form-input-files"
+          images-only="true"
+          public-key="{{UPLOADCARE_PUBLIC_KEY}}"
+          multiple="true"
+          multipleMax="3"
+          (on-upload-complete)="handleOnUploadComplete($event)">
+        </ngx-uploadcare-widget>
+    </div>
+  </form>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-default" (click)="handleClose()">{{closeBtnName}}</button>
+  <button type="button" class="btn btn-default" (click)="handleSave()">{{saveBtnName}}</button>
+</div>

src/app/createDocument/createDocument.component.ts

@@ -0,0 +1,76 @@
+import {Component} from '@angular/core';
+import {BsModalRef} from 'ngx-bootstrap/modal/bs-modal-ref.service';
+import {HttpClient} from '@angular/common/http';
+import apiHeaders from '../../apiHeaders';
+
+@Component({
+  selector: 'app-create-document',
+  templateUrl: './createDocument.component.html',
+  styleUrls: ['./createDocument.component.css']
+})
+
+export class CreateDocumentComponent {
+  name: String;
+  description: String;
+  images: Array<Object>;
+  title: String;
+
+  inputName = '';
+  inputDescription = '';
+  UPLOADCARE_PUBLIC_KEY = 'demopublickey';
+
+  constructor(public bsModalRef: BsModalRef,
+              private http: HttpClient) {
+  }
+
+  changeName(e) {
+    this.inputName = e.target.value;
+  }
+
+  changeDescription(e) {
+    this.inputDescription = e.target.value;
+  }
+
+  handleOnUploadComplete(e) {
+    console.log(e);
+    this.images = [];
+    for (let i = 0; i < e.count; i++) {
+      const tempImageLink = e.cdnUrl + 'nth/' + i + '/';
+      this.images.push({
+        'url': tempImageLink
+      });
+    }
+  }
+
+  handleSave($scope) {
+    this.http.request(
+      'POST',
+      'https://alpha-dataflownode.zerionsoftware.com/code_assignment/records',
+      {
+        headers: {
+          ...apiHeaders
+        },
+        body: {
+          'name': this.inputName,
+          'description': this.inputDescription,
+          'imgs': this.images
+        }
+      }
+    ).subscribe(() => {
+        alert('Document Created Successfully');
+        $scope.emit('documentCreated');
+      },
+      ({error}) => {
+        if (error.error !== undefined) {
+          alert(error.error);
+        } else {
+          alert('There was an Unknown Problem, Try again later !');
+        }
+      });
+    this.handleClose();
+  }
+
+  handleClose() {
+    this.bsModalRef.hide();
+  }
+}

src/app/navbar/navbar.component.css

@@ -0,0 +1,5 @@
+.navbar  {
+  position: sticky;
+  top: 0;
+  width: 100%;
+}

src/app/showcase/showcase.component.css

@@ -0,0 +1,19 @@
+.showcase-container {
+  margin: 1rem;
+}
+
+.card-img-top {
+  max-height: 20em;
+  max-width: 30em;
+  align-self: center;
+}
+
+.card {
+  margin: 0.5em;
+  padding: 1rem;
+}
+
+.card-text {
+  height: 10rem;
+  overflow: hidden;
+}

src/app/showcase/showcase.component.html

@@ -0,0 +1,20 @@
+<div class="showcase-container">
+  <div class="row">
+    <div *ngFor="let doc of documents" class="card col-sm-6 col-md-3 col-lg-3">
+      <img class="card-img-top"
+      src="{{doc.imgs[0].url}}"
+      alt="Card image cap">
+      <div class="card-body">
+        <h5 class="card-title">{{doc.name}}</h5>
+        <p class="card-text">{{doc.description}}</p>
+      </div>
+      <button type="button" class="btn btn-secondary" (click)="handleDelete(doc._id)">
+      <i class="material-icons">delete</i>
+      </button>
+      <button type="button" class="btn btn-secondary">
+      <i class="material-icons">edit</i>
+      </button>
+    </div>
+  </div>
+</div>
+

src/app/showcase/showcase.component.ts

@@ -0,0 +1,16 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+
+@Component({
+  selector: 'app-showcase',
+  templateUrl: './showcase.component.html',
+  styleUrls: ['./showcase.component.css']
+})
+
+export class ShowcaseComponent {
+  @Input() public documents;
+  @Output() public deleteDocument: EventEmitter<any> = new EventEmitter();
+
+  handleDelete(id) {
+    this.deleteDocument.emit(id);
+  }
+}