creating pages for every topic; doing: articlePage

README.md

@@ -25,3 +25,9 @@ Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To u
 ## Further help
 
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+
+
+##Notes:
+
+- for the component bill, is it better to pass clients and articles data via the localstorage or make another api request? 
+or is it better to call the component directly without using routes ? 

src/app/app-routing.module.ts

@@ -3,11 +3,15 @@ import { CommonModule } from '@angular/common';
 import {Router, RouterModule, Routes} from "@angular/router";
 import {BillCreationComponent} from "./components/bill-creation/bill-creation.component";
 import {HomePageComponent} from "./components/home-page/home-page.component";
+import {ClientPageComponent} from "./components/client-page/client-page.component";
+import {ArticlesPageComponent} from "./components/articles-page/articles-page.component";
 
 
 const routes: Routes = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
   { path: 'bill', component: BillCreationComponent },
+  { path: 'clients', component: ClientPageComponent },
+  { path: 'articles', component: ArticlesPageComponent },
   { path: 'home', component: HomePageComponent }
 ];
 

src/app/app.component.html

@@ -1,2 +1,8 @@
 <!--<app-home-page></app-home-page>-->
+<mat-toolbar>
+  <button mat-button routerLink="/home">Home page</button>
+  <button mat-button routerLink="/clients">Client page</button>
+  <button mat-button routerLink="/articles">Article page</button>
+  <button mat-button>Bill page</button>
+</mat-toolbar>
 <router-outlet></router-outlet>

src/app/app.module.ts

@@ -19,6 +19,14 @@ import { BillCreationComponent } from './components/bill-creation/bill-creation.
 import {MatExpansionModule} from "@angular/material/expansion";
 import { AppRoutingModule } from './app-routing.module';
 import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+import {MatCheckboxModule} from "@angular/material/checkbox";
+import { BillConfirmerComponent } from './components/bill-confirmer/bill-confirmer.component';
+import {MatDatepickerModule} from "@angular/material/datepicker";
+import {MatNativeDateModule} from "@angular/material/core";
+import {MatToolbarModule} from "@angular/material/toolbar";
+import { ClientPageComponent } from './components/client-page/client-page.component';
+import { ArticlesPageComponent } from './components/articles-page/articles-page.component';
+import { AddArticleFormComponent } from './components/add-article-form/add-article-form.component';
 
 
 @NgModule({
@@ -28,7 +36,11 @@ import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
     ArticlesListComponent,
     AddClientFormComponent,
     ClientListComponent,
-    BillCreationComponent
+    BillCreationComponent,
+    BillConfirmerComponent,
+    ClientPageComponent,
+    ArticlesPageComponent,
+    AddArticleFormComponent
   ],
   imports: [
     BrowserModule,
@@ -42,8 +54,12 @@ import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
     MatExpansionModule,
     AppRoutingModule,
     MatProgressSpinnerModule,
+    MatCheckboxModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    MatToolbarModule,
   ],
-  providers: [FacturatorApiCallService],
+  providers: [FacturatorApiCallService, MatDatepickerModule],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/components/article/articles-list.component.html

@@ -7,9 +7,8 @@ <h1>{{article.price}} CHF</h1>
         {{article.description}}
       </p>
     </mat-card-content>
-    <mat-card-actions>
-      <button mat-button>LIKE</button>
-      <button mat-button>SHARE</button>
+    <mat-card-actions *ngIf="selectionMode">
+      <mat-checkbox (click)="selUnselArticle(article)">Select Article</mat-checkbox>
     </mat-card-actions>
   </mat-card>
 </div>

src/app/components/article/articles-list.component.ts

@@ -1,6 +1,7 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {Article} from "../../shared/models/article";
 import {articles} from "../../hcData/data";
+import {Client} from "../../shared/models/client";
 
 @Component({
   selector: 'app-articles-list',
@@ -10,15 +11,19 @@ import {articles} from "../../hcData/data";
 export class ArticlesListComponent implements OnInit {
 
   @Input() articles: Article[] = [];
+  @Input() selectionMode:boolean = false;
+  @Output() selUnselectArticle = new EventEmitter<Article>();
 
   constructor() { }
 
   ngOnInit(): void {
   }
 
   ngOnChanges():void{
-    console.log("articles in articleComponent");
-    console.log(this.articles);
+  }
+
+  selUnselArticle(article:Article){
+    this.selUnselectArticle.emit(article);
   }
 
 }

src/app/components/bill-creation/bill-creation.component.css

@@ -0,0 +1,14 @@
+.bill-expansion{
+  margin: 4em;
+  margin-left: 8em;
+  margin-right: 8em;
+}
+
+mat-expansion-panel{
+  margin: 2em 0 2em 0
+}
+
+.client-list{
+  height: 400px;
+  background-color: lightblue;
+}

src/app/components/bill-creation/bill-creation.component.html

@@ -1,11 +1,55 @@
-<mat-expansion-panel hideToggle>
-  <mat-expansion-panel-header>
-    <mat-panel-title>
-      This is the expansion title
-    </mat-panel-title>
-    <mat-panel-description>
-      This is a summary of the content
-    </mat-panel-description>
-  </mat-expansion-panel-header>
-  <p>This is the primary content of the panel.</p>
-</mat-expansion-panel>
+<div class="bill-expansion">
+
+  <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" hideToggle>
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        Select a Client
+      </mat-panel-title>
+    </mat-expansion-panel-header>
+    <div class="client-list">
+      <app-client-list [clients]="clients" [selectionMode]="true" (selectedClient)="setBillClient($event)"></app-client-list>
+    </div>
+    <mat-action-row>
+      <button mat-button color="primary" (click)="nextStep()">Next</button>
+    </mat-action-row>
+  </mat-expansion-panel>
+
+  <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle>
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        Select Articles
+      </mat-panel-title>
+    </mat-expansion-panel-header>
+    <div class="client-list">
+      <app-articles-list [articles]="articles" [selectionMode]="true" (selUnselectArticle)="addRemoveArticleToBill($event)"></app-articles-list>
+    </div>
+    <mat-action-row>
+      <button mat-button color="warn" (click)="prevStep()">Previous</button>
+      <button mat-button color="primary" (click)="nextStep()">Next</button>
+    </mat-action-row>
+  </mat-expansion-panel>
+
+  <mat-expansion-panel [expanded]="step === 2" (opened)="setStep(2)" hideToggle>
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        Confirm
+      </mat-panel-title>
+    </mat-expansion-panel-header>
+    <div class="confirm-bill">
+      <app-articles-list [articles]="bill.articles"></app-articles-list>
+      <app-client-list [clients]="[bill.client]"></app-client-list>
+    </div>
+    <mat-action-row>
+      <button mat-button color="warn" (click)="prevStep()">Previous</button>
+      <button mat-button color="primary" (click)="nextStep()">Next</button>
+      <div>
+        <mat-form-field appearance="fill">
+          <mat-label>Choose a date</mat-label>
+          <input matInput [matDatepicker]="picker">
+          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+          <mat-datepicker #picker></mat-datepicker>
+        </mat-form-field>
+      </div>
+    </mat-action-row>
+  </mat-expansion-panel>
+</div>

src/app/components/bill-creation/bill-creation.component.ts

@@ -1,15 +1,53 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
+import {Client} from "../../shared/models/client";
+import {Bill} from "../../shared/models/bill";
+import {Article} from "../../shared/models/article";
+import {auditTime} from "rxjs/operators";
 
 @Component({
   selector: 'app-bill-creation',
   templateUrl: './bill-creation.component.html',
   styleUrls: ['./bill-creation.component.css']
 })
 export class BillCreationComponent implements OnInit {
+  @Input() clients:any;
+  @Input() articles:any;
+
+  bill:Bill = new Bill();
+
+  step = 0;
 
   constructor() { }
 
   ngOnInit(): void {
   }
 
+  setBillClient(client:Client){
+    this.bill.client = client;
+    this.nextStep();
+  }
+
+  addRemoveArticleToBill(article:Article){
+    let index = this.bill.articles.indexOf(article);
+    if (index > -1){
+      this.bill.articles.splice(index, 1);
+    }
+    else {
+      this.bill.articles.push(article)
+    }
+  }
+
+
+  setStep(index: number) {
+    this.step = index;
+  }
+
+  nextStep() {
+    this.step++;
+  }
+
+  prevStep() {
+    this.step--;
+  }
+
 }

src/app/components/client-list/client-list.component.html

@@ -5,9 +5,8 @@
       <p><strong>Address: </strong>{{client.address}}</p>
       <p><strong>E-Mail: </strong>{{client.email}}</p>
     </mat-card-content>
-    <mat-card-actions>
-      <button mat-button>Ok</button>
-      <button mat-button>Not Ok</button>
+    <mat-card-actions *ngIf="selectionMode">
+      <button mat-stroked-button color="primary" (click)="selectClient(client)">Select Client</button>
     </mat-card-actions>
   </mat-card>
 </div>

src/app/components/client-list/client-list.component.ts

@@ -1,4 +1,5 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Client} from "../../shared/models/client";
 
 @Component({
   selector: 'app-client-list',
@@ -8,6 +9,8 @@ import {Component, Input, OnInit} from '@angular/core';
 export class ClientListComponent implements OnInit {
 
   @Input() clients:any [] = [];
+  @Input() selectionMode:boolean = false;
+  @Output() selectedClient = new EventEmitter<Client>();
 
   constructor() { }
 
@@ -18,4 +21,8 @@ export class ClientListComponent implements OnInit {
     console.log(this.clients);
   }
 
+  selectClient(client:Client){
+    this.selectedClient.emit(client);
+  }
+
 }

src/app/components/home-page/home-page.component.html

@@ -5,3 +5,5 @@
   <app-articles-list id="article-list" [articles]="articles"></app-articles-list>
 </div>
 <!--<button (click)="addClient()">Add Client</button>-->
+<!--<button mat-flat-button (click)="addClient()">Add Client</button>-->
+<app-bill-creation [clients]="clients" [articles]="articles"></app-bill-creation>

src/app/hcData/data.ts

@@ -3,10 +3,10 @@ import {Bill} from "../shared/models/bill";
 import {Client} from "../shared/models/client";
 
 export const articles: Article[] = [
-  new Article("0-1", "phone", "/photo/url", 55.99 , "description"),
-  new Article("0-2", "laptop", "/photo/url", 225.99, "description" ),
-  new Article("0-3", "fridge", "/photo/url", 79.99 , "description"),
-  new Article("0-4", "book", "/photo/url", 5.99 , "description")
+  new Article( "phone",55.99 , "/photo/url", "description", "0-1"),
+  new Article("laptop",225.99, "/photo/url",  "description","0-2" ),
+  new Article( "fridge", 79.99, "/photo/url", "description", "0-3"),
+  new Article("book",  5.99 ,"/photo/url", "description","0-4")
 ];
 
 export const bills: Bill[] = [];

src/app/services/article-dto.service.ts

@@ -9,7 +9,7 @@ export class ArticleDtoService {
   constructor() { }
 
   public dataToArticle(dtoArticle: any):Article{
-    let article = new Article(dtoArticle['id'],dtoArticle['name'],dtoArticle['photoUrl'],dtoArticle['price'], dtoArticle['description']);
+    let article = new Article(dtoArticle['id'],dtoArticle['price'],dtoArticle['name'],dtoArticle['photoUrl'], dtoArticle['description']);
     return article;
   }
 }

src/app/services/articles-service.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import {Article} from "../shared/models/article";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ArticlesServiceService {
+
+  backendURL: string = "https://localhost:44335/api";
+
+  constructor() { }
+
+  getArticles(){
+    let articles:any[] = [];
+    fetch(this.backendURL + "/article/", {method: 'GET'}).then(response => response.json()).then((data)=>{
+      for (let article of data){
+        articles.push(new Article(article["Name"], article["Price"], article["Photo"], article["Description"], article["Id"]));
+      }
+      //      return data;
+    });
+    return articles;
+    //return articles;
+  }
+}

src/app/services/facturator-api-call.service.ts

@@ -8,7 +8,8 @@ import {Client} from "../shared/models/client";
 })
 export class FacturatorApiCallService {
 
-  backendURL: string = "https://localhost:44335/api"
+  backendURL: string = "https://localhost:44335/api";
+
 
 
   constructor(private http: HttpClient) { }

src/app/shared/models/article.ts

@@ -1,11 +1,11 @@
 export class Article{
-  id: string = "";
+  id: any = "";
   name: string = "";
   photo: string = "";
   price: number = 0;
   description: string = "";
 
-  constructor(_id:string, _name:string, _photo:string, price:number, description:string) {
+  constructor(_name:string, price:number, _photo:string, description:string, _id?:string ) {
     this.id = _id;
     this.name = _name;
     this.photo = _photo;