Felhasználó bootstrap, termék szerkesztés

README.md

@@ -24,3 +24,5 @@ Ezután a http://localhost:3000/ cimen érhető el az oldal.
 ## Használat
 * Felhasználónév: admin
 * Jelszó: admin123
+
+Bejelentkezés után választhatunk a terméklista és a felhasználólista között. A termékeknél jobbra található egy-egy szerkesztés gomb, ami a szerkesztő oldalra visz.

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

@@ -4,6 +4,7 @@ import { AuthCheck } from './auth-check';
 import { ProductListComponent } from './product-list/product-list.component';
 import { LoginComponent } from './login/login.component';
 import { UserListComponent } from './user-list/user-list.component';
+import { ProductEditComponent } from './product-edit/product-edit.component';
 
 const routes: Routes = [
   {
@@ -17,6 +18,10 @@ const routes: Routes = [
       {
         path: '',
         component: ProductListComponent
+      },
+      {
+        path: ':id',
+        component: ProductEditComponent
       }
     ]
   },

client/src/app/app.component.html

@@ -1,5 +1,9 @@
 <div *ngIf="userService.user; else login" class="loginbox" style="margin: 20px">
   Üdv {{ userService.user.username }}
+  <div>
+    <button mat-button class="mat-primary" (click)="router.navigate(['/'])">Termékek</button>
+    <button mat-button class="mat-primary" (click)="router.navigate(['/users'])">Felhasználók</button>
+  </div>
 </div>
 <ng-template #login>
   <div class="loginbox">
@@ -17,8 +21,4 @@
     </form>
   </div>
 </ng-template>
-<div>
-  <button mat-button class="mat-primary" (click)="router.navigate(['/'])">Termékek</button>
-  <button mat-button class="mat-primary" (click)="router.navigate(['/users'])">Felhasználók</button>
-</div>
 <router-outlet></router-outlet>

client/src/app/app.module.ts

@@ -18,6 +18,7 @@ import { UserListComponent } from './user-list/user-list.component';
 import { AuthCheck } from './auth-check';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { RegisterComponent } from './register/register.component';
+import { ProductEditComponent } from './product-edit/product-edit.component';
 
 @NgModule({
   declarations: [
@@ -25,7 +26,8 @@ import { RegisterComponent } from './register/register.component';
     ProductListComponent,
     LoginComponent,
     UserListComponent,
-    RegisterComponent
+    RegisterComponent,
+    ProductEditComponent
   ],
   imports: [
     BrowserModule,

client/src/app/model/product.model.ts

@@ -3,4 +3,5 @@ export interface Product {
   price: number;
   description: string;
   id: string;
+  _id: string;
 }

client/src/app/product-edit/product-edit.component.html

@@ -0,0 +1,7 @@
+<form [formGroup]="form">
+  <mat-form-field>
+    <mat-label>Név</mat-label>
+    <input matInput formControlName="name">
+  </mat-form-field>
+  <button mat-button class="mat-primary" (click)="save()">Mentés</button>
+</form>

client/src/app/product-edit/product-edit.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductEditComponent } from './product-edit.component';
+
+describe('ProductEditComponent', () => {
+  let component: ProductEditComponent;
+  let fixture: ComponentFixture<ProductEditComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProductEditComponent]
+    });
+    fixture = TestBed.createComponent(ProductEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/src/app/product-edit/product-edit.component.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { ProductService } from '../services/product.service';
+import { Product } from '../model/product.model';
+import { ActivatedRoute } from '@angular/router';
+import { flatMap, mergeMap, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-product-edit',
+  templateUrl: './product-edit.component.html',
+  styleUrls: ['./product-edit.component.css']
+})
+export class ProductEditComponent {
+  form = new FormGroup({
+    name: new FormControl()
+  })
+
+  constructor(private service: ProductService, route: ActivatedRoute) {
+    service.get(route.snapshot.params['id']).subscribe(value => this.form.patchValue(value));
+  }
+
+  save() {
+    this.service.edit(this.form.value as Product);
+  }
+}

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

@@ -15,6 +15,11 @@
       <td mat-cell *matCellDef="let row">{{row.price}}</td>
     </ng-container>
 
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>Műveletek</th>
+      <td mat-cell *matCellDef="let row"><button mat-button [routerLink]="['/', row._id]">Szerkesztés</button></td>
+    </ng-container>
+
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>

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

@@ -6,6 +6,7 @@ import { ProductService } from '../services/product.service';
 import { Product } from '../model/product.model';
 import { map } from 'rxjs/operators';
 import { Observable } from 'rxjs';
+import { FormControl, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'app-product-list',
@@ -20,7 +21,7 @@ export class ProductListComponent implements AfterViewInit {
   products: Observable<Product[]>
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-  displayedColumns = ['name', 'description', 'price'];
+  displayedColumns = ['name', 'description', 'price', 'actions'];
 
   constructor(private service: ProductService) {
     this.products = service.getList().pipe(map(value => value as Product[]));

client/src/app/services/product.service.ts

@@ -1,13 +1,24 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { Product } from '../model/product.model';
+import { Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
 })
 export class ProductService {
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {
+  }
 
   getList() {
     return this.http.get('/api/products')
   }
+
+  edit(data: Product) {
+    return this.http.patch('/api/products/' + data.id, data);
+  }
+
+  get(id: string) {
+    return this.http.get('/api/products/' + id) as Observable<Product>;
+  }
 }

server/db/bootstrapper.js

@@ -16,6 +16,15 @@ async function ensureAdminExists() {
 				birthdate: new Date(),
 			});
 			await newAdmin.save();
+			for (let i = 0; i < 10; i++) {
+				const user = new User({
+					username: `user${i}`,
+					password: '12345678',
+					accessLevel: 1,
+					birthdate: new Date(),
+				});
+				await user.save();
+			}
 			console.log('Az admin felhasználó sikeresen létrehozva!');
 		}
 	} catch (error) {

server/productsRouter.js

@@ -6,7 +6,7 @@ const Product = mongoose.model('product');
 const passport = require('passport');
 
 function getProductData(product) {
-	return {name: product.name, price: product.price, description: product.description, id: product.id};
+	return {name: product.name, price: product.price, description: product.description, id: product.id, _id: product._id};
 }
 
 async function getProduct(req, res, next) {

server/usersRouter.js

@@ -40,7 +40,6 @@ router.route('/logout').post((req, res) => {
 
 router.route('/status').get((req, res) => {
 	if (req.isAuthenticated()) {
-		console.log(req.user)
 		return res.status(200).send(getUserData(req.user));
 	} else {
 		return res.status(403).send({status: "NOTOK"});