v0.1.0 (Sprint 2) (#10)

* docs: Add highlight sintax for code blocks in README

* docs: Add GNU AGPL (#4)

* Add Heroku generated app.json

* chore(ci): Testing Heroku pipelines (#5)

* chore(ci): test change for heroku pipeline

* chore(vendor): add ng-cli to main deps

* Revert "chore(vendor): add ng-cli to main deps"

This reverts commit 7f38c3c.

* chore(git): update gitignore, ignore yarn lock

* chore(ci): fix install and startup

* chore(ci): Add dependencies to make it run on Heroku (#6)

* docs: Update README (#7)

* Update README.md

* Update README.md

* feat: Books front-end (#8)

.gitignore

@@ -6,6 +6,7 @@
 
 # dependencies
 /node_modules
+yarn.lock
 
 # IDEs and editors
 /.idea

README.md

@@ -1,28 +1,28 @@
-# HAssistantClient
-Client of H Assistant app.
+# Halp Workers App
+Client for Hospital Workers.
 
-[![Build Status](https://travis-ci.org/h-assistant/h-assistant-client.svg?branch=master)](https://travis-ci.org/h-assistant/h-assistant-client)
+[![Build Status](https://travis-ci.org/halp-project/halp-workers-app.svg?branch=master)](https://travis-ci.org/halp-project/halp-workers-app)
 
-## Prerequisites
+## Prerequisites
 
 - [Node 7.x](https://nodejs.org/es/) (Install it via [nvm](https://github.com/creationix/nvm))
 
 ## Local development
-```
-npm install /* Install dependencies */
-ng serve /* Serve app in local http://localhost:4200/ */
+```bash
+npm install // Install dependencies 
+ng serve // Serve app in local http://localhost:4200/ 
 ```
 
 Advanced scripts
-```
-ng lint /* Pass linter for code beauty */
-ng build /* Build the project */
+```bash
+ng lint // Pass linter for code beauty
+ng build // Build the project
 ```
 
 More [Angular CLI](https://cli.angular.io/) commands
-```
-ng generate component component-name /* Generate a new Angular component */
-ng help /* Angular CLI helper */
+```bash
+ng generate component component-name // Generate a new Angular component 
+ng help // Angular CLI helper 
 ```
 
 ## Contribution Guides

app.json

@@ -0,0 +1,17 @@
+{
+  "name": "halp-workers-app",
+  "scripts": {
+  },
+  "env": {
+  },
+  "formation": {
+  },
+  "addons": [
+
+  ],
+  "buildpacks": [
+    {
+      "url": "heroku/nodejs"
+    }
+  ]
+}

package.json

@@ -3,28 +3,39 @@
   "version": "0.0.0",
   "license": "MIT",
   "angular-cli": {},
+  "engines": {
+    "node": "^7.7.3"
+  },
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
-    "lint": "ng lint"
+    "dev": "ng serve",
+    "lint": "ng lint",
+    "start": "http-server dist/",
+    "preinstall": "npm install -g http-server",
+    "postinstall": "ng build --prod"
   },
   "private": true,
   "dependencies": {
+    "@angular/cli": "1.0.0-beta.32.3",
     "@angular/common": "^2.4.0",
     "@angular/compiler": "^2.4.0",
+    "@angular/compiler-cli": "^2.4.0",
     "@angular/core": "^2.4.0",
     "@angular/forms": "^2.4.0",
     "@angular/http": "^2.4.0",
     "@angular/platform-browser": "^2.4.0",
     "@angular/platform-browser-dynamic": "^2.4.0",
     "@angular/router": "^3.4.0",
+    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.22",
+    "bootstrap": "^4.0.0-alpha.6",
     "core-js": "^2.4.1",
     "rxjs": "^5.1.0",
+    "typescript": "~2.0.0",
     "zone.js": "^0.7.6"
   },
   "devDependencies": {
-    "@angular/cli": "1.0.0-beta.32.3",
     "@angular/compiler-cli": "^2.4.0",
+    "@angular/cli": "1.0.0-beta.32.3",
     "@types/jasmine": "2.5.38",
     "@types/node": "~6.0.60",
     "codelyzer": "~2.0.0-beta.4",

src/app/app-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+export const routes: Routes = [
+  { path: '', redirectTo: 'auth', pathMatch: 'full'},
+  { path: 'auth', loadChildren: 'app/auth/auth.module#AuthModule' },
+  { path: 'books', loadChildren: 'app/books/books.module#BooksModule' }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.html

@@ -1,3 +1,2 @@
-<h1>
-  {{title}}
-</h1>
+<router-outlet></router-outlet>
+

src/app/app.component.ts

@@ -5,6 +5,4 @@ import { Component } from '@angular/core';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  title = 'app works!';
-}
+export class AppComponent { }

src/app/app.module.ts

@@ -2,6 +2,11 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AuthModule } from './auth/auth.module';
+import { BooksModule } from './books/books.module';
 
 import { AppComponent } from './app.component';
 
@@ -12,7 +17,11 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpModule,
+    BooksModule,
+    AuthModule,
+    AppRoutingModule,
+    NgbModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/auth/auth-routing.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AuthComponent } from './auth.component';
+
+@NgModule({
+  imports: [RouterModule.forChild([
+    { path: 'auth', component: AuthComponent }
+  ])],
+  exports: [ RouterModule ]
+})
+export class AuthRoutingModule {}

src/app/auth/auth.component.css

@@ -0,0 +1,6 @@
+#button-login {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}

src/app/auth/auth.component.html

@@ -0,0 +1 @@
+<button routerLink="../books" routerLinkActive="active" type="button" class="btn btn-primary" id="button-login">Login</button>

src/app/auth/auth.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-auth',
+  templateUrl: './auth.component.html',
+  styleUrls: ['./auth.component.css']
+})
+export class AuthComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/auth/auth.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { AuthRoutingModule } from './auth-routing.module';
+import { AuthComponent } from './auth.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    AuthRoutingModule,
+    NgbModule
+  ],
+  declarations: [ AuthComponent ]
+})
+export class AuthModule { }

src/app/books/books-grid/book-card/book-card.component.css

@@ -0,0 +1,16 @@
+.book-image {
+    max-height: 100%;
+}
+
+.book-image-box {
+    height: 200px;
+    width: 200px;
+    text-align: center;
+}
+
+card {
+    width: 20rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

src/app/books/books-grid/book-card/book-card.component.html

@@ -0,0 +1,52 @@
+<div class="card">
+  <div class="book-image-box">
+    <img class="card-img-top book-image" [src]='book.image' alt="Card image cap">
+  </div>
+  <div class="card-block">
+    <h4 class="card-title">{{ book.id }} {{ book.title }}</h4>
+    <p class="card-text">{{ book.author }}</p>
+    <button (click)="edit(content)" type="button" class="btn btn-primary">
+      <i class="fa fa-pencil" aria-hidden="true"></i> Edit
+    </button>
+    <button (click)="delete()" type="button" class="btn btn-danger">
+      <i class="fa fa-trash-o" aria-hidden="true"></i> Delete
+    </button>
+  </div>
+</div>
+
+<template #content let-c="close" let-d="dismiss">
+  <div class="modal-header">
+    <h4 class="modal-title">Edit book</h4>
+    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    <form>
+      <div class="form-group">
+        <label for="id">ID</label>
+        <input type="text" class="form-control" id="id" [value]="book.id" required>
+      </div>
+      <div class="form-group">
+        <label for="title">Title</label>
+        <input type="text" class="form-control" id="title" [value]="book.title" required>
+      </div>
+      <div class="form-group">
+        <label for="author">Author</label>
+        <input type="text" class="form-control" id="author" [value]="book.author" required>
+      </div>
+      <div class="form-group">
+        <label for="description">Description</label>
+        <input type="text" class="form-control" id="description" [value]="book.description" required>
+      </div>
+      <div class="form-group">
+        <label for="image">Image</label>
+        <input type="text" class="form-control" id="image" [value]="book.image" required>
+      </div>
+    </form>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
+    <button type="button" class="btn btn-success" (click)="c('Close click')">Save</button>
+  </div>
+</template>

src/app/books/books-grid/book-card/book-card.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
+
+import { Book } from '../book';
+
+@Component({
+  selector: 'app-book-card',
+  templateUrl: './book-card.component.html',
+  styleUrls: ['./book-card.component.css']
+})
+export class BookCardComponent implements OnInit {
+  @Input() book: Book;
+  @Output() _delete: EventEmitter<number> = new EventEmitter();
+  closeResult: string;
+
+  constructor(private modalService: NgbModal) { }
+
+  ngOnInit() {
+  }
+
+  delete() {
+    this._delete.emit(this.book.id);
+  }
+
+  edit(content) {
+    this.modalService.open(content).result.then((result) => {
+      this.closeResult = `Closed with: ${result}`;
+    }, (reason) => {
+      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
+    });
+  }
+
+  private getDismissReason(reason: any): string {
+    if (reason === ModalDismissReasons.ESC) {
+      return 'by pressing ESC';
+    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
+      return 'by clicking on a backdrop';
+    } else {
+      return  `with: ${reason}`;
+    }
+  }
+
+}

src/app/books/books-grid/book.ts

@@ -0,0 +1,15 @@
+export class Book {
+  id: number;
+  title: string;
+  author: string;
+  description: string;
+  image: string;
+
+  constructor(
+    id: number,
+    title: string,
+    author: string,
+    description: string,
+    image: string
+  ) { }
+}

src/app/books/books-grid/books-grid.component.css

@@ -0,0 +1,23 @@
+.activity-content {
+}
+
+.book-box, .activity-content {
+    display: flex; 
+    align-items: center;
+    justify-content: center;
+    margin: 1.5em 0em;
+}
+
+.book-box {
+    min-width: 200px;
+}
+
+.row-centered {
+    text-align:center;
+}
+
+.col-centered {
+    display:inline-block;
+    float:none;
+    text-align:left;
+}

src/app/books/books-grid/books-grid.component.html

@@ -0,0 +1,7 @@
+<div class="activity-content">
+  <div class="container-fluid activity-container">
+    <div class="col-3 col-centered book-box" *ngFor="let book of books">
+      <app-book-card [book]="book" (_delete)="deleteBook($bookId)"></app-book-card>
+    </div>
+  </div>
+</div>