Felhasználó bootstrap, termék szerkesztés
This commit is contained in:
parent
d2018fa8b9
commit
b987456351
15 changed files with 98 additions and 9 deletions
|
@ -24,3 +24,5 @@ Ezután a http://localhost:3000/ cimen érhető el az oldal.
|
||||||
## Használat
|
## Használat
|
||||||
* Felhasználónév: admin
|
* Felhasználónév: admin
|
||||||
* Jelszó: admin123
|
* 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.
|
||||||
|
|
|
@ -4,6 +4,7 @@ import { AuthCheck } from './auth-check';
|
||||||
import { ProductListComponent } from './product-list/product-list.component';
|
import { ProductListComponent } from './product-list/product-list.component';
|
||||||
import { LoginComponent } from './login/login.component';
|
import { LoginComponent } from './login/login.component';
|
||||||
import { UserListComponent } from './user-list/user-list.component';
|
import { UserListComponent } from './user-list/user-list.component';
|
||||||
|
import { ProductEditComponent } from './product-edit/product-edit.component';
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{
|
{
|
||||||
|
@ -17,6 +18,10 @@ const routes: Routes = [
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
component: ProductListComponent
|
component: ProductListComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: ':id',
|
||||||
|
component: ProductEditComponent
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,5 +1,9 @@
|
||||||
<div *ngIf="userService.user; else login" class="loginbox" style="margin: 20px">
|
<div *ngIf="userService.user; else login" class="loginbox" style="margin: 20px">
|
||||||
Üdv {{ userService.user.username }}
|
Ü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>
|
</div>
|
||||||
<ng-template #login>
|
<ng-template #login>
|
||||||
<div class="loginbox">
|
<div class="loginbox">
|
||||||
|
@ -17,8 +21,4 @@
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</ng-template>
|
</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>
|
<router-outlet></router-outlet>
|
||||||
|
|
|
@ -18,6 +18,7 @@ import { UserListComponent } from './user-list/user-list.component';
|
||||||
import { AuthCheck } from './auth-check';
|
import { AuthCheck } from './auth-check';
|
||||||
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||||
import { RegisterComponent } from './register/register.component';
|
import { RegisterComponent } from './register/register.component';
|
||||||
|
import { ProductEditComponent } from './product-edit/product-edit.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
|
@ -25,7 +26,8 @@ import { RegisterComponent } from './register/register.component';
|
||||||
ProductListComponent,
|
ProductListComponent,
|
||||||
LoginComponent,
|
LoginComponent,
|
||||||
UserListComponent,
|
UserListComponent,
|
||||||
RegisterComponent
|
RegisterComponent,
|
||||||
|
ProductEditComponent
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
|
|
|
@ -3,4 +3,5 @@ export interface Product {
|
||||||
price: number;
|
price: number;
|
||||||
description: string;
|
description: string;
|
||||||
id: string;
|
id: string;
|
||||||
|
_id: string;
|
||||||
}
|
}
|
||||||
|
|
0
client/src/app/product-edit/product-edit.component.css
Normal file
0
client/src/app/product-edit/product-edit.component.css
Normal file
7
client/src/app/product-edit/product-edit.component.html
Normal file
7
client/src/app/product-edit/product-edit.component.html
Normal file
|
@ -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>
|
21
client/src/app/product-edit/product-edit.component.spec.ts
Normal file
21
client/src/app/product-edit/product-edit.component.spec.ts
Normal file
|
@ -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();
|
||||||
|
});
|
||||||
|
});
|
26
client/src/app/product-edit/product-edit.component.ts
Normal file
26
client/src/app/product-edit/product-edit.component.ts
Normal file
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
|
@ -15,6 +15,11 @@
|
||||||
<td mat-cell *matCellDef="let row">{{row.price}}</td>
|
<td mat-cell *matCellDef="let row">{{row.price}}</td>
|
||||||
</ng-container>
|
</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-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
|
@ -6,6 +6,7 @@ import { ProductService } from '../services/product.service';
|
||||||
import { Product } from '../model/product.model';
|
import { Product } from '../model/product.model';
|
||||||
import { map } from 'rxjs/operators';
|
import { map } from 'rxjs/operators';
|
||||||
import { Observable } from 'rxjs';
|
import { Observable } from 'rxjs';
|
||||||
|
import { FormControl, FormGroup } from '@angular/forms';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-product-list',
|
selector: 'app-product-list',
|
||||||
|
@ -20,7 +21,7 @@ export class ProductListComponent implements AfterViewInit {
|
||||||
products: Observable<Product[]>
|
products: Observable<Product[]>
|
||||||
|
|
||||||
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
|
/** 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) {
|
constructor(private service: ProductService) {
|
||||||
this.products = service.getList().pipe(map(value => value as Product[]));
|
this.products = service.getList().pipe(map(value => value as Product[]));
|
||||||
|
|
|
@ -1,13 +1,24 @@
|
||||||
import { Injectable } from '@angular/core';
|
import { Injectable } from '@angular/core';
|
||||||
import { HttpClient } from '@angular/common/http';
|
import { HttpClient } from '@angular/common/http';
|
||||||
|
import { Product } from '../model/product.model';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root'
|
||||||
})
|
})
|
||||||
export class ProductService {
|
export class ProductService {
|
||||||
constructor(private http: HttpClient) { }
|
constructor(private http: HttpClient) {
|
||||||
|
}
|
||||||
|
|
||||||
getList() {
|
getList() {
|
||||||
return this.http.get('/api/products')
|
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>;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
9
server/db/bootstrapper.js
vendored
9
server/db/bootstrapper.js
vendored
|
@ -16,6 +16,15 @@ async function ensureAdminExists() {
|
||||||
birthdate: new Date(),
|
birthdate: new Date(),
|
||||||
});
|
});
|
||||||
await newAdmin.save();
|
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!');
|
console.log('Az admin felhasználó sikeresen létrehozva!');
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
|
|
@ -6,7 +6,7 @@ const Product = mongoose.model('product');
|
||||||
const passport = require('passport');
|
const passport = require('passport');
|
||||||
|
|
||||||
function getProductData(product) {
|
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) {
|
async function getProduct(req, res, next) {
|
||||||
|
|
|
@ -40,7 +40,6 @@ router.route('/logout').post((req, res) => {
|
||||||
|
|
||||||
router.route('/status').get((req, res) => {
|
router.route('/status').get((req, res) => {
|
||||||
if (req.isAuthenticated()) {
|
if (req.isAuthenticated()) {
|
||||||
console.log(req.user)
|
|
||||||
return res.status(200).send(getUserData(req.user));
|
return res.status(200).send(getUserData(req.user));
|
||||||
} else {
|
} else {
|
||||||
return res.status(403).send({status: "NOTOK"});
|
return res.status(403).send({status: "NOTOK"});
|
||||||
|
|
Loading…
Reference in a new issue