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
|
||||
* 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.
|
||||
|
|
|
@ -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
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -3,4 +3,5 @@ export interface Product {
|
|||
price: number;
|
||||
description: 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>
|
||||
</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>
|
||||
|
|
|
@ -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[]));
|
||||
|
|
|
@ -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>;
|
||||
}
|
||||
}
|
||||
|
|
9
server/db/bootstrapper.js
vendored
9
server/db/bootstrapper.js
vendored
|
@ -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) {
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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"});
|
||||
|
|
Loading…
Reference in a new issue