src/app/components/dashboard-admin/dashboard-admin.component.ts
Admin dashboard component
| selector | app-dashboard-admin |
| styleUrls | dashboard-admin.component.scss |
| templateUrl | ./dashboard-admin.component.html |
Properties |
|
Methods |
constructor(auth: FirebaseAuthService, afs: FirebaseFirestoreService, formBuilder: FormBuilder)
|
||||||||||||||||
|
Constructor
Parameters :
|
| deleteEvent | ||||||||
deleteEvent(event: Event)
|
||||||||
|
Sete deleted value
Parameters :
Returns :
void
|
| deleteUser | ||||||||
deleteUser(user: User)
|
||||||||
|
Delete user
Parameters :
Returns :
void
|
| editEvent | ||||||||
editEvent(event: Event)
|
||||||||
|
Open edit event modal
Parameters :
Returns :
void
|
| editUser | ||||||||
editUser(user: User)
|
||||||||
|
Open edit user modal
Parameters :
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Initialize component
Returns :
void
|
| trackByIndex |
trackByIndex(index: number, obj: any)
|
|
Track ngFor loop
Returns :
any
any |
| updateEvent |
updateEvent()
|
|
Update event and hide modal
Returns :
void
|
| updatePrintingHouse |
updatePrintingHouse()
|
|
Update printing house
Returns :
void
|
| updateUser |
updateUser()
|
|
Update user and hide modal
Returns :
void
|
| Public editEventModal |
editEventModal:
|
Type : ModalDirective
|
Decorators : ViewChild
|
|
Edit event modal |
| Public editUserModal |
editUserModal:
|
Type : ModalDirective
|
Decorators : ViewChild
|
|
Edit user modal |
| Public eventEdit |
eventEdit:
|
Type : Event
|
|
Event to edit |
| Public eventForm |
eventForm:
|
Type : FormGroup
|
|
Event modal form |
| Public events |
events:
|
Type : Observable<[]>
|
|
All events from Firestore |
| Private log |
log:
|
Default value : Log.create('DashboardAdminComponent')
|
|
Logger |
| Public printingHouse |
printingHouse:
|
Type : PrintingHouse
|
|
Printing House |
| Public printingHouseForm |
printingHouseForm:
|
Type : FormGroup
|
|
Printing house modal form |
| Public transactions |
transactions:
|
Type : Observable<[]>
|
|
All transactions |
| Public userEdit |
userEdit:
|
Type : User
|
|
User to edit |
| Public userForm |
userForm:
|
Type : FormGroup
|
|
User modal form |
| Public users |
users:
|
Type : Observable<[]>
|
|
All users from Firestore |
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ModalDirective } from 'ng-mdb-pro/free/modals/modal.directive';
import { Log } from 'ng2-logger';
import { Observable } from 'rxjs/Observable';
import { Event } from '../../classes/event';
import { User } from '../../classes/user';
import { PRINTTYPE } from '../../enums/print-type';
import { PrintingHouse } from '../../interfaces/printing-house';
import { Transaction } from '../../interfaces/transaction';
import { FirebaseAuthService } from '../../services/auth/firebase-auth/firebase-auth.service';
import { FirebaseFirestoreService } from '../../services/firebase/firestore/firebase-firestore.service';
/**
* Admin dashboard component
* @author Daniel Sogl
*/
@Component({
selector: 'app-dashboard-admin',
templateUrl: './dashboard-admin.component.html',
styleUrls: ['./dashboard-admin.component.scss']
})
export class DashboardAdminComponent implements OnInit {
/** Logger */
private log = Log.create('DashboardAdminComponent');
/** Printing House */
public printingHouse: PrintingHouse;
/** User modal form */
public userForm: FormGroup;
/** Event modal form */
public eventForm: FormGroup;
/** Printing house modal form */
public printingHouseForm: FormGroup;
/** Event to edit */
public eventEdit: Event;
/** User to edit */
public userEdit: User;
/** All users from Firestore */
public users: Observable<User[]>;
/** All events from Firestore */
public events: Observable<Event[]>;
/** All transactions */
public transactions: Observable<Transaction[]>;
/** Edit user modal */
@ViewChild('editUserModal') public editUserModal: ModalDirective;
/** Edit event modal */
@ViewChild('editEventModal') public editEventModal: ModalDirective;
/**
* Constructor
* @param {FirebaseAuthService} privateauth Firebase Auth Service
* @param {FirebaseFirestoreService} privateafs Firebase Firestore Service
* @param {FormBuilder} privateformBuilder Form Builder
*/
constructor(
private auth: FirebaseAuthService,
private afs: FirebaseFirestoreService,
private formBuilder: FormBuilder
) {
this.userForm = this.formBuilder.group({
city: ['', Validators.required],
email: ['', Validators.email],
eventCounter: ['', Validators.required],
eventsLeft: ['', Validators.required],
isValidated: ['', Validators.required],
lastname: ['', Validators.required],
name: ['', Validators.required],
phone: ['', Validators.required],
role: ['', Validators.required],
street: ['', Validators.required],
subscription: ['', Validators.required],
uid: ['', Validators.required],
zip: ['', Validators.required]
});
this.eventForm = this.formBuilder.group({
date: ['', Validators.required],
description: ['', Validators.required],
id: ['', Validators.required],
location: ['', Validators.required],
name: ['', Validators.required],
password: ['', Validators.required],
photographerUid: ['', Validators.required],
public: [false, Validators.required],
ratings: [0, Validators.required]
});
this.printingHouseForm = this.formBuilder.group({
address: this.formBuilder.group({
city: ['', Validators.required],
email: ['', Validators.email],
name: ['', Validators.required],
phone: ['', Validators.required],
street: ['', Validators.required],
streetnumber: ['', Validators.required],
zip: ['', Validators.required]
}),
paymentInformation: this.formBuilder.group({
iban: ['', Validators.required],
bic: ['', Validators.required],
accountOwner: ['', Validators.required]
}),
id: ['', Validators.required],
uid: ['', Validators.required],
isDefault: [true, Validators.required]
});
}
/**
* Initialize component
*/
ngOnInit() {
this.log.color = 'orange';
this.log.d('Component initialized');
if (this.auth.getCurrentFirebaseUser()) {
// Load users from Firestore
this.users = this.afs.getAllUser().valueChanges();
// Load events from Firestore
this.events = this.afs.getAllEvents().valueChanges();
// Load all transactions from Firestore
this.transactions = this.afs.getAllTransactions().valueChanges();
this.users.subscribe(user => {
this.log.d('User', user);
});
this.events.subscribe(events => {
this.log.d('Events', events);
});
this.transactions.subscribe(transactions => {
this.log.d('Transactions', transactions);
});
this.afs
.getDefautlPrintingHouse()
.valueChanges()
.subscribe(house => {
if (house[0]) {
this.printingHouse = house[0];
this.log.d(
'Loaded printinghouse from firestore',
this.printingHouse
);
this.printingHouseForm.patchValue(this.printingHouse);
} else {
const printingHouse: PrintingHouse = {
address: {
city: 'Ludwigsburg',
email: 'info@druckhaus-goetz.de',
name: 'Druckhaus Götz GmbH',
phone: '07141451450',
street: 'Schwieberdinger Str.',
streetnumber: '111-115',
zip: '71636'
},
paymentInformation: {
accountOwner: 'Druckhaus Götz GmbH',
iban: 'DE27100777770209299700',
bic: 'NORSDE51XXX'
},
printingHouseItems: [
{
name: PRINTTYPE.PICTURE,
articles: [
{
price: 0,
heigh: 20,
width: 30,
minPrice: 1,
name: '20x30 cm'
},
{
price: 0,
heigh: 30,
width: 40,
minPrice: 1.5,
name: '30x40 cm'
},
{
price: 0,
heigh: 30,
width: 45,
minPrice: 2,
name: '30x45 cm'
},
{
price: 0,
heigh: 40,
width: 60,
minPrice: 2.5,
name: '40x60 cm'
},
{
price: 0,
heigh: 45,
width: 60,
minPrice: 3,
name: '45x60 cm'
},
{
price: 0,
heigh: 50,
width: 75,
minPrice: 3.5,
name: '50x75 cm'
},
{
price: 0,
heigh: 60,
width: 80,
minPrice: 4,
name: '60x80 cm'
}
]
}
],
isDefault: true,
uid: this.auth.getCurrentFirebaseUser().uid,
id: this.afs.getId()
};
this.afs
.createPrintingHouse(printingHouse)
.then(() => {
this.log.d('Created default printing house');
})
.catch(err => {
this.log.er('Error creating default printing house', err);
});
}
});
}
}
/**
* Track ngFor loop
* @param {number} index Index
* @param {any} obj Object
* @returns any
*/
trackByIndex(index: number, obj: any): any {
return index;
}
/**
* Open edit event modal
* @param {Event} event Event
*/
editEvent(event: Event) {
this.eventForm.patchValue(event);
this.editEventModal.show();
}
/**
* Update event and hide modal
*/
updateEvent() {
this.afs
.updatePhotographerEvent(this.eventForm.getRawValue() as Event)
.then(() => {
this.log.d('Updated event');
this.editEventModal.hide();
})
.catch(err => {
this.log.er('Error updating event', err);
this.editEventModal.hide();
});
}
/**
* Open edit user modal
* @param {User} user User
*/
editUser(user: User) {
this.userEdit = user;
this.editUserModal.show();
}
/**
* Update user and hide modal
*/
updateUser() {
this.afs
.updateUserData(this.userEdit)
.then(() => {
this.log.d('Updated user');
this.editUserModal.hide();
})
.catch(err => {
this.log.er('Error updating user', err);
this.editUserModal.hide();
});
}
/**
* Delete user
*/
deleteUser(user: User) {
this.afs
.deleteUser(user.uid)
.then(() => {
this.log.d('Deleted user');
this.editUserModal.hide();
})
.catch(err => {
this.log.er('Error deleting user', err);
this.editUserModal.hide();
});
}
/**
* Update printing house
*/
updatePrintingHouse() {
if (this.printingHouseForm.valid) {
const printingHouseItems = this.printingHouse.printingHouseItems;
this.printingHouse = this.printingHouseForm.getRawValue();
this.printingHouse.printingHouseItems = printingHouseItems;
this.afs
.updatePrintingHouse(this.printingHouse)
.then(() => {
this.log.d('Updated printing house');
})
.catch(err => {
this.log.er('Error saving printing house', err);
});
}
}
/**
* Sete deleted value
* @param {Event} event Event
*/
deleteEvent(event: Event) {
this.afs
.deletePhotographerEvent(event.id)
.then(() => {
this.log.d('Event deleted');
})
.catch(err => {
this.log.er('Error deliting event', err);
});
}
}
<mdb-tabset [buttonClass]="'nav-tabs indigo'" [contentClass]="'card'">
<mdb-tab heading="{{ 'TABS.REVENUE' | translate }}">
<div class="row">
<div class="col-12">
<br>
</div>
</div>
</mdb-tab>
<mdb-tab heading="{{ 'TABS.EVENTS' | translate }}">
<div class="row">
<div class="col-12">
<br>
<div class="table-responsive text-left">
<table class="table">
<thead class="thead-default">
<tr>
<th>#</th>
<th>{{ 'DASHBOARD.NAME' | translate }}</th>
<th>{{ 'DASHBOARD.DATE' | translate }}</th>
<th>{{ 'DASHBOARD.LOCATION' | translate }}</th>
<th>{{ 'DASHBOARD.RATINGS' | translate }}</th>
<th>{{ 'DASHBOARD.EDIT' | translate }}</th>
<th>{{ 'TABLE.DELETE' | translate }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let event of (events | async); let i = index" [class.table-danger]="event.deleted">
<td>{{ i + 1}}</td>
<td>{{ event.name }}</td>
<td>{{ event.date }}</td>
<td>{{ event.location }}</td>
<td>{{ event.ratings }}</td>
<td>
<a (click)="editEvent(event)">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</td>
<td>
<a (click)="deleteEvent(event)">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</mdb-tab>
<mdb-tab heading="{{ 'TABS.USER' | translate }}">
<div class="row">
<div class="col-12">
<br>
<div class="table-responsive text-left">
<table class="table">
<thead class="thead-default">
<tr>
<th>#</th>
<th>{{ 'DASHBOARD.EMAIL' | translate }}</th>
<th>{{ 'DASHBOARD.ROLE' | translate }}</th>
<th>{{ 'DASHBOARD.SUBSCRIPTION' | translate }}</th>
<th>{{ 'DASHBOARD.EDIT' | translate }}</th>
<th>{{ 'TABLE.DELETE' | translate }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of (users | async); let i = index" [class.table-warning]="!user.isValidated && user.roles.photographer">
<th scope="row">{{ i + 1 }}</th>
<td>{{ user.email }}</td>
<td>
<span *ngIf="user.roles.admin">{{ 'DASHBOARD.ADMIN' | translate }}</span>
<span *ngIf="user.roles.photographer">{{ 'DASHBOARD.PHOTOGRAPHER' | translate }}</span>
<span *ngIf="user.roles.user">{{ 'DASHBOARD.USER' | translate }}</span>
</td>
<td>{{ user.subscription.membership }}</td>
<td>
<a (click)="editUser(user)">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</td>
<td>
<a (click)="deleteUser(user)">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</mdb-tab>
<mdb-tab heading="{{ 'TABS.PRINTING_HOUSES' | translate }}">
<div class="row" *ngIf="printingHouse">
<div class="col-12 text-left">
<br>
<mdb-squeezebox [multiple]="false" aria-multiselectable="true">
<form [formGroup]="printingHouseForm">
<mdb-item>
<mdb-item-head>Contact Information</mdb-item-head>
<mdb-item-body>
<br>
<div formArrayName="address">
<div class="md-form">
<input type="text" class="form-control" formControlName="name">
<label class="active">{{ 'INPUTS.NAME' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" formControlName="email">
<label class="active">{{ 'INPUTS.EMAIL' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" formControlName="phone">
<label class="active">{{ 'INPUTS.PHONE' | translate }}</label>
</div>
<div class="row">
<div class="col-md-9">
<div class="md-form">
<input type="text" class="form-control" formControlName="street">
<label class="active">{{ 'INPUTS.STREET' | translate }}</label>
</div>
</div>
<div class="col-md-3">
<div class="md-form">
<input type="text" class="form-control" formControlName="streetnumber">
<label class="active">{{ 'INPUTS.STREET_NUMBER' | translate }}</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="md-form">
<input type="text" class="form-control" formControlName="zip">
<label class="active">{{ 'INPUTS.ZIP' | translate }}</label>
</div>
</div>
<div class="col-md-9">
<div class="md-form">
<input type="text" class="form-control" formControlName="city">
<label class="active">{{ 'INPUTS.CITY' | translate }}</label>
</div>
</div>
</div>
</div>
</mdb-item-body>
</mdb-item>
<mdb-item>
<mdb-item-head>Payment Information</mdb-item-head>
<mdb-item-body>
<br>
<div formArrayName="paymentInformation">
<div class="md-form">
<input type="text" class="form-control" formControlName="accountOwner">
<label class="active">{{ 'INPUTS.ACCOUNT_OWNER' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" formControlName="iban">
<label class="active">{{ 'INPUTS.IBAN' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" formControlName="bic">
<label class="active">{{ 'INPUTS.BIC' | translate }}</label>
</div>
</div>
</mdb-item-body>
</mdb-item>
</form>
<mdb-item>
<mdb-item-head>Product Prices</mdb-item-head>
<mdb-item-body>
<br>
<mdb-tabset [buttonClass]="'nav-tabs indigo'">
<mdb-tab heading="Photo">
<div class="row">
<div class="col-12">
<br>
<div *ngFor="let article of printingHouse.printingHouseItems; let i = index">
<h1>{{ article.name }}</h1>
<table class="table">
<thead class="thead-default">
<tr>
<th scope="row">Article</th>
<th>Format</th>
<th>Minimal Price</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of article.articles; let j = index; trackBy:trackByIndex">
<td>{{ item.name }}</td>
<td>{{ item.width }}x{{ item.heigh }}</td>
<td>
<input type="number" class="form-control" [(ngModel)]="printingHouse.printingHouseItems[i].articles[j].minPrice">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</mdb-tab>
</mdb-tabset>
</mdb-item-body>
</mdb-item>
</mdb-squeezebox>
<button type="submit" class="btn btn-lg btn-block waves-light indigo" mdbRippleRadius (click)="updatePrintingHouse()">{{ 'BUTTONS.SAVE' | translate }}</button>
</div>
</div>
</mdb-tab>
</mdb-tabset>
<div mdbModal #editUserModal="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header indigo white-text">
<h4 class="title">
<i class="fa fa-pencil"></i> {{ 'LABELS.EDIT_USER' | translate }}</h4>
<button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close" (click)="editUserModal.hide()">
<span class="white-text" aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mb-0">
<form [formGroup]="userForm" (ngSubmit)="updateUser()">
<mdb-tabset [buttonClass]="'nav-tabs indigo'" [contentClass]="'card'">
<mdb-tab heading="Account data">
<div class="row">
<div class="col-12">
<br>
</div>
</div>
</mdb-tab>
<mdb-tab heading="Contact">
<div class="row">
<div class="col-12">
<br>
</div>
</div>
</mdb-tab>
<mdb-tab heading="Payment">
<div class="row">
<div class="col-12">
<br>
</div>
</div>
</mdb-tab>
<mdb-tab heading="Subscription">
<div class="row">
<div class="col-12">
<br>
</div>
</div>
</mdb-tab>
</mdb-tabset>
<br>
<button type="submit" class="btn indigo btn-lg btn-block waves-light" mdbRippleRadius>
<i class="fa fa-refresh mr-1"></i>{{ 'BUTTONS.UPDATE_USER' | translate }}</button>
</form>
</div>
</div>
</div>
</div>
<div mdbModal #editEventModal="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header indigo white-text">
<h4 class="title">
<i class="fa fa-pencil"></i> {{ 'LABELS.EDIT_EVENT' | translate }}</h4>
<button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close" (click)="editEventModal.hide()">
<span class="white-text" aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mb-0">
<form [formGroup]="eventForm">
<div class="md-form">
<input type="text" class="form-control" formControlName="name">
<label class="active">{{ 'INPUTS.NAME' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" formControlName="description">
<label class="active">{{ 'INPUTS.DESCRIPTION' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" formControlName="location">
<label class="active">{{ 'INPUTS.LOCATION' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" formControlName="date">
<label class="active">{{ 'INPUTS.DATE' | translate }}</label>
</div>
<div class="md-form">
<input type="password" class="form-control" formControlName="password">
<label class="active">{{ 'INPUTS.PASSWORD' | translate }}</label>
</div>
</form>
<button type="button" class="btn indigo btn-lg btn-block waves-light" (click)="updateEvent()" mdbRippleRadius>
<i class="fa fa-refresh mr-1"></i>{{ 'BUTTONS.UPDATE_EVENT' | translate }}</button>
</div>
</div>
</div>
</div>