edit customer

client/src/app/app.module.ts

@@ -11,12 +11,13 @@ import { CounterModule } from './counter/counter.module';
 import { CustomerModule } from './customer/customer.module';
 import { MaterialModule } from './shared/material.module';
 import { ImportExportComponent } from './import-export/import-export.component';
+import { EditCustomerDialogComponent } from './customer/edit-customer-dialog/edit-customer-dialog.component';
 
 
 registerLocaleData(localeDe);
 
 @NgModule({
-  declarations: [AppComponent, ImportExportComponent],
+  declarations: [AppComponent, ImportExportComponent, EditCustomerDialogComponent],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,

client/src/app/article/article-table/article-table.component.html

@@ -40,7 +40,7 @@ <h1>Artikel</h1>
     <th mat-header-cell *matHeaderCellDef>Bearbeiten</th>
     <td mat-cell *matCellDef="let element">
       <button mat-icon-button color="secondary" (click)="element.edit()">
-        <mat-icon>more_horiz</mat-icon>
+        <mat-icon>edit</mat-icon>
       </button>
     </td>
   </ng-container>

client/src/app/article/article-table/article-table.component.ts

@@ -52,7 +52,7 @@ export class ArticleTableComponent implements OnInit {
           price: article.price,
           disabled: article.disabled,
           toggle: () => this.articleService.toggle(article),
-          edit: () => this.openEditDialog(article)
+          edit: () => this.openEditDialog({ ...article })
         }))
       )
     ).subscribe(data => {
@@ -68,21 +68,24 @@ export class ArticleTableComponent implements OnInit {
     this.dialog
       .open(NewArticleDialogComponent)
       .afterClosed()
-      .subscribe(({ name, category, price }) => {
-        const cents = parseFloat((price as string).replace(",", ".")) * 100
-        this.articleService.addArticle(name, category, Math.floor(cents))
+      .subscribe((data: { name: string, category: string, price: string }) => {
+        if (data !== undefined) {
+          const cents = parseFloat(data.price.replace(",", ".")) * 100
+          this.articleService.addArticle(data.name, data.category, Math.floor(cents))
+        }
       }
       );
   }
 
   openEditDialog(article: Article) {
     this.dialog
       .open(EditArticleDialogComponent, {
-        data: article
+        data: article,
       })
       .afterClosed()
-      .subscribe(({ id, name, category }) => {
-        this.articleService.editArticle(id, name, category)
+      .subscribe((data: { id: string, name: string, category: string }) => {
+        if (data !== undefined)
+          this.articleService.editArticle(data.id, data.name, data.category)
       })
   }
 }

client/src/app/article/edit-article-dialog/edit-article-dialog.component.ts

@@ -10,17 +10,11 @@ import { NewArticleDialogComponent } from '../new-article-dialog/new-article-dia
 })
 export class EditArticleDialogComponent implements OnInit {
 
-  // data: Article = {
-  //   name: '',
-  //   category: '',
-  //   price: 0,
-  //   id: '0',
-  //   disabled: false
-  // };
+  constructor(
+    public dialogRef: MatDialogRef<EditArticleDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: Article
+  ) { }
 
-  constructor(public dialogRef: MatDialogRef<NewArticleDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: Article) {
-    console.log(this);
-  }
   close() {
     this.dialogRef.close();
   }

client/src/app/customer/customer-table/customer-table.component.html

@@ -49,6 +49,15 @@ <h1>Teilnehmer</h1>
     </td>
   </ng-container>
 
+  <ng-container matColumnDef="edit">
+    <th mat-header-cell *matHeaderCellDef>Bearbeiten</th>
+    <td mat-cell *matCellDef="let element">
+      <button mat-icon-button color="secondary" (click)="element.edit()">
+        <mat-icon>edit</mat-icon>
+      </button>
+    </td>
+  </ng-container>
+
   <tr mat-header-row *matHeaderRowDef="displayedCols"></tr>
   <tr mat-row *matRowDef="let row; columns: displayedCols"></tr>
 </table>

client/src/app/customer/customer-table/customer-table.component.ts

@@ -12,6 +12,7 @@ import { Transaction } from 'src/app/models/Transaction';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { FormControl } from '@angular/forms';
+import { EditCustomerDialogComponent } from 'src/app/customer/edit-customer-dialog/edit-customer-dialog.component';
 
 interface TableDataModel {
   firstname: string;
@@ -29,7 +30,7 @@ interface TableDataModel {
   styleUrls: ['./customer-table.component.scss'],
 })
 export class CustomerTableComponent implements OnInit {
-  displayedCols = ['firstname', 'lastname', 'group', 'credit', 'deposit', 'details'];
+  displayedCols = ['firstname', 'lastname', 'group', 'credit', 'deposit', 'details', 'edit'];
   tableData: MatTableDataSource<TableDataModel> = new MatTableDataSource();
 
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@@ -59,6 +60,7 @@ export class CustomerTableComponent implements OnInit {
             customer.details,
             customer.group
           ),
+        edit: () => this.openEditDialog({ ...customer })
       })))
     ).subscribe(data => {
       this.tableData.data = data;
@@ -84,17 +86,30 @@ export class CustomerTableComponent implements OnInit {
   openNewDialog(): void {
     this.dialog.open(NewCustomerDialogComponent)
       .afterClosed()
-      .subscribe(({ firstname, lastname, group, details, credit }) => {
-        const cents = parseFloat((credit as string).replace(",", ".")) * 100
-        this.customerService.addCustomer(firstname, lastname, group, details, cents || 0)
-      }
-      )
-
+      .subscribe((data: { firstname: string, lastname: string, group: string, details: string, credit: string }) => {
+        if (data !== undefined) {
+          const cents = parseFloat(data.credit.replace(",", ".")) * 100
+          this.customerService.addCustomer(data.firstname, data.lastname, data.group, data.details, cents || 0)
+        }
+      });
   }
 
   showDetails(firstname, lastname, transactions, details, group) {
     this.dialog.open(CustomerDetailDialogComponent, {
       data: { firstname, lastname, transactions, details, group },
     });
   }
+
+  openEditDialog(customer: Customer) {
+    this.dialog
+      .open(EditCustomerDialogComponent, {
+        data: { ...customer, credit: this.customerService.calculateCredit(customer) }
+      })
+      .afterClosed()
+      .subscribe((data: { id: string, firstname: string, lastname: string, group: string, details: string }) => {
+        if (data !== undefined) {
+          this.customerService.editCustomer(data.id, data.firstname, data.lastname, data.details, data.group)
+        }
+      })
+  }
 }

client/src/app/customer/customer.module.ts

@@ -20,4 +20,4 @@ import { NewCustomerDialogComponent } from './new-customer-dialog/new-customer-d
     CustomerDetailDialogComponent,
   ],
 })
-export class CustomerModule {}
+export class CustomerModule { }

client/src/app/customer/edit-customer-dialog/edit-customer-dialog.component.html

@@ -0,0 +1,29 @@
+<h1 mat-dialog-title>Teilnehmer bearbeiten</h1>
+<div mat-dialog-content>
+    <mat-form-field>
+        <mat-label>Vorname</mat-label>
+        <input matInput [(ngModel)]="data.firstname">
+    </mat-form-field>
+    <mat-form-field>
+        <mat-label>Nachname</mat-label>
+        <input matInput [(ngModel)]="data.lastname">
+    </mat-form-field>
+    <mat-form-field>
+        <mat-label>Zelt</mat-label>
+        <input matInput [(ngModel)]="data.group">
+    </mat-form-field>
+    <mat-form-field>
+        <mat-label>Details</mat-label>
+        <textarea matInput [(ngModel)]="data.details"></textarea>
+        <mat-hint>Allergien, Unverträglichkeiten etc.</mat-hint>
+    </mat-form-field>
+    <mat-form-field>
+        <mat-label>Guthaben</mat-label>
+        <input matInput disabled autocomplete="off" placeholder="1.00" value="{{(data.credit / 100).toFixed(2)}}">
+        <span matSuffix>€&nbsp;</span>
+    </mat-form-field>
+</div>
+<div mat-dialog-actions>
+    <button mat-button [mat-dialog-close]="">Abbrechen</button>
+    <button mat-button [mat-dialog-close]="data">Ok</button>
+</div>

client/src/app/customer/edit-customer-dialog/edit-customer-dialog.component.scss

@@ -0,0 +1,12 @@
+textarea {
+  width: 100%;
+  height: 5rem;
+}
+
+.mat-dialog-content {
+  width: 250px;
+}
+
+mat-form-field {
+  width: 100%;
+}

client/src/app/customer/edit-customer-dialog/edit-customer-dialog.component.ts

@@ -0,0 +1,21 @@
+import { CurrencyPipe } from '@angular/common';
+import { Component, Inject, OnInit } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { CustomerService } from 'src/app/shared/customer.service';
+
+@Component({
+  selector: 'app-edit-customer-dialog',
+  templateUrl: './edit-customer-dialog.component.html',
+  styleUrls: ['./edit-customer-dialog.component.scss']
+})
+export class EditCustomerDialogComponent implements OnInit {
+
+  constructor(
+    public dialogRef: MatDialogRef<EditCustomerDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+}

client/src/app/shared/api.service.ts

@@ -33,6 +33,14 @@ export class ApiService {
     );
   }
 
+  updateCustomer(id, firstname, lastname, details, group) {
+    return this.http.patch<Customer>(
+      this.apiUrl + '/customer/' + id,
+      { firstname, lastname, details, group },
+      { headers: this.headers }
+    )
+  }
+
   addArticle(name, category, price): Observable<Article> {
     return this.http.post<Article>(
       this.apiUrl + '/article',

client/src/app/shared/customer.service.ts

@@ -8,7 +8,6 @@ import { ApiService } from './api.service';
   providedIn: 'root'
 })
 export class CustomerService {
-
   private customersSubject = new BehaviorSubject<Customer[]>([])
   private selectedSubject = new BehaviorSubject<Customer>(null);
   customers$ = this.customersSubject.asObservable();
@@ -51,6 +50,17 @@ export class CustomerService {
     this.selectedSubject.next(null);
   }
 
+  editCustomer(id: string, firstname: string, lastname: string, details: string, group: string) {
+    this.apiService.updateCustomer(id, firstname, lastname, details, group)
+      .subscribe(c => {
+        const oldCustomers = this.customersSubject.getValue();
+        const newCustomers = [...oldCustomers];
+
+        newCustomers[c.id] = c;
+        this.customersSubject.next(newCustomers);
+      })
+  }
+
   calculateCredit(customer: Customer) {
     return customer.transactions.reduce((sum, transaction) =>
       sum += transaction.deposit

src/api/routes/customer.ts

@@ -28,5 +28,12 @@ export const customerRouter = (db: DatabaseAdapter) => {
     res.json(customer);
   }));
 
+  router.patch('/:id', catchAsync(async (req: Request, res: Response) => {
+    const { firstname, lastname, details, group } = req.body;
+    const id = parseInt(req.params.id, 10);
+    const customer = db.updateCustomer(id, firstname, lastname, group, details);
+    res.json(customer);
+  }))
+
   return router;
 };

src/dataproviders/database-adapter.ts

@@ -65,6 +65,18 @@ export class DatabaseAdapter {
     return this.getCustomers().filter(c => c.id === id)[0];
   }
 
+  updateCustomer(id: number, firstname: string, lastname: string, group: string, details: string): Customer {
+    const customer = this.getCustomerByID(id);
+    customer.firstname = firstname;
+    customer.lastname = lastname;
+    customer.details = details;
+    customer.group = group;
+
+    const index = this.db.getIndex('/customers', id);
+    this.db.push(`/customers[${index}]`, customer, true)
+    return customer;
+  }
+
   // Transactions
   getTransactions(): Transaction[] {
     return this.getCustomers().flatMap(c => c.transactions);

src/dataproviders/excel.ts

@@ -29,12 +29,11 @@ export class ExcelAdapter {
         ];
 
         const articles = [
-            ['Name', 'Price', 'Category (ct.)', 'Disabled'],
+            ['Name', 'Price (ct.)', 'Category'],
             ...(this.dbAdapter.getArticles()).map(article => ([
                 article.name,
                 article.price,
-                article.category,
-                article.disabled
+                article.category
             ]))
         ];
 
@@ -72,13 +71,12 @@ export class ExcelAdapter {
         }
 
 
-        const articles = data.find(sheet => sheet.name === 'Articles')?.data.slice(1).filter(row => row.length === 4).map(row => {
-            const [name, price, category, disabled] = row;
+        const articles = data.find(sheet => sheet.name === 'Articles')?.data.slice(1).filter(row => row.length === 3).map(row => {
+            const [name, price, category] = row;
             if (typeof name !== 'string' || !name) throw new Error(name + ' is not a valid article name');
             if (typeof price !== 'number') throw new Error(price + ' is not a valid price');
             if (typeof category !== 'string') throw new Error(category + ' is not a valid category');
-            if (typeof disabled !== 'boolean') throw new Error(disabled + ' is not a valid boolean value');
-            return { name, price, category, disabled };
+            return { name, price, category, disabled: false };
         });
 
         if (articles) {