src/app/components/dashboard-user/dashboard-user.component.ts
User dashboard component
| selector | app-dashboard-user |
| styleUrls | dashboard-user.component.scss |
| templateUrl | ./dashboard-user.component.html |
Properties |
|
Methods |
constructor(auth: FirebaseAuthService, afs: FirebaseFirestoreService, formBuilder: FormBuilder, alert: AlertService)
|
||||||||||||||||||||
|
Constructor
Parameters :
|
| downloadAllImages | ||||||||
downloadAllImages(items: TransactionItem[])
|
||||||||
|
Download all images as a zip folder
Parameters :
Returns :
void
|
| downloadImage | ||||||||
downloadImage(url: string)
|
||||||||
|
Download Image
Parameters :
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Initialize component
Returns :
void
|
| openTransaction | ||||||||
openTransaction(transaction: Transaction)
|
||||||||
|
Open transaction detail model
Parameters :
Returns :
void
|
| updateProfile |
updateProfile()
|
|
Update user profile
Returns :
void
|
| Private log |
log:
|
Default value : Log.create('DashboardUserComponent')
|
|
Logger |
| Public transaction |
transaction:
|
Type : Transaction
|
|
Transaction modal data |
| Public transactionModal |
transactionModal:
|
Type : ModalDirective
|
Decorators : ViewChild
|
|
Create new event modal |
| Public transactions |
transactions:
|
Type : Observable<[]>
|
|
Transactions |
| Public user |
user:
|
Type : User
|
|
Firebase user |
| Public userForm |
userForm:
|
Type : FormGroup
|
|
New event form |
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { saveAs } from 'file-saver/FileSaver';
import * as JSZip from 'jszip';
import { ModalDirective } from 'ng-mdb-pro/free/modals/modal.directive';
import { Log } from 'ng2-logger';
import { Observable } from 'rxjs/Observable';
import { User } from '../../classes/user';
import { Transaction, TransactionItem } from '../../interfaces/transaction';
import { AlertService } from '../../services/alert/alert.service';
import { FirebaseAuthService } from '../../services/auth/firebase-auth/firebase-auth.service';
import { FirebaseFirestoreService } from '../../services/firebase/firestore/firebase-firestore.service';
/**
* User dashboard component
* @author Daniel Sogl
*/
@Component({
selector: 'app-dashboard-user',
templateUrl: './dashboard-user.component.html',
styleUrls: ['./dashboard-user.component.scss']
})
export class DashboardUserComponent implements OnInit {
/** Logger */
private log = Log.create('DashboardUserComponent');
/** Firebase user */
public user: User;
/** Transactions */
public transactions: Observable<Transaction[]>;
/** New event form */
public userForm: FormGroup;
/** Transaction modal data */
public transaction: Transaction;
/** Create new event modal */
@ViewChild('transactionModal') public transactionModal: ModalDirective;
/**
* Constructor
* @param {FirebaseAuthService} auth Firebase Auth Service
* @param {FirebaseFirestoreService} afs Firebase Firestore Service
* @param {AlertService} alert Alert Service
*/
constructor(
private auth: FirebaseAuthService,
private afs: FirebaseFirestoreService,
private formBuilder: FormBuilder,
private alert: AlertService
) {
this.userForm = this.formBuilder.group({
name: ['', Validators.required],
lastname: ['', Validators.required],
email: ['', Validators.required],
billingAdress: this.formBuilder.group({
city: ['', Validators.required],
company: [''],
email: ['', Validators.email],
name: [''],
lastname: [''],
phone: ['', Validators.required],
street: ['', Validators.required],
streetnumber: ['', Validators.required],
zip: ['', Validators.required]
}),
deliveryAdress: this.formBuilder.group({
city: ['', Validators.required],
company: [''],
email: ['', Validators.email],
name: [''],
lastname: [''],
phone: ['', Validators.required],
street: ['', Validators.required],
streetnumber: ['', Validators.required],
zip: ['', Validators.required]
})
});
}
/**
* Initialize component
*/
ngOnInit() {
this.log.color = 'orange';
this.log.d('Component initialized');
this.auth.user.subscribe(user => {
if (user) {
this.user = user;
this.log.d('Loaded user', user);
this.userForm.patchValue(this.user);
}
});
if (this.auth.getCurrentFirebaseUser()) {
this.transactions = this.afs
.getTransactionsByUser(this.auth.getCurrentFirebaseUser().uid)
.valueChanges();
this.transactions.subscribe(transactions => {
this.log.d('Transactions', transactions);
});
}
}
/**
* Open transaction detail model
* @param {Transaction} transaction Transaction to open
*/
openTransaction(transaction: Transaction) {
this.transaction = transaction;
this.transactionModal.show();
}
/**
* Download Image
* @param {string} url Download URL
*/
downloadImage(url: string) {
// This can be downloaded directly:
const xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function(event) {
const blob = xhr.response;
};
xhr.open('GET', url);
xhr.send();
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
const downloadUrl = URL.createObjectURL(xhr.response);
const a = document.createElement('a');
document.body.appendChild(a);
a.href = downloadUrl;
a.download = '';
a.click();
}
};
}
/**
* Download all images as a zip folder
* @param {TransactionItem} images Images to download
*/
downloadAllImages(items: TransactionItem[]) {
let count = 0;
const zip = new JSZip();
items.forEach(item => {
if (item.sku === 'Download') {
// This can be downloaded directly:
const xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = event => {
const blob = xhr.response;
};
xhr.open('GET', item.downloadUrl);
xhr.send();
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
zip.file(item.name.split('/')[1], xhr.response, { binary: true });
count++;
if (count === items.length) {
zip.generateAsync({ type: 'blob' }).then(content => {
saveAs(content, name);
});
}
}
};
} else {
count++;
}
});
}
/**
* Update user profile
*/
updateProfile() {
const user = this.userForm.getRawValue();
this.user.billingAdress = user.billingAdress;
this.user.deliveryAdress = user.deliveryAdress;
this.user.name = user.name;
this.user.lastname = user.lastname;
this.user.email = user.email;
this.afs
.updateUserData(this.user)
.then(() => {
this.log.d('Updated user');
this.alert.showInfo({ title: 'Profil erfolgreich aktualisiert' });
})
.catch(err => {
this.log.er('Error updating', err);
this.alert.showError({
title: 'Profil konnte nicht aktualisiert werden.'
});
});
}
}
<mdb-tabset #staticTabs [buttonClass]="'nav-tabs indigo'" [contentClass]="'card'">
<mdb-tab heading="Käufe">
<div class="row">
<div class="col-12">
<hr>
<table class="table text-left">
<thead class="thead-default">
<tr>
<td>#</td>
<td>Rechnungsnummer</td>
<td>Bestelldatum</td>
<td>Preis</td>
<td>Bestellstatus</td>
<td>Bestellung anzeigen</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let transaction of (transactions | async); let i = index">
<td>{{ i + 1 }}</td>
<td>{{ transaction.invoice_number }}</td>
<td>{{ transaction.date | date }}</td>
<td>{{ transaction.amount.total | number:'0.2-2' }} €</td>
<td>{{ transaction.status | uppercase }}</td>
<td>
<a (click)="openTransaction(transaction)" *ngIf="transaction.status === 'available'">
<i class="fa fa-eye fa-lg" aria-hidden="true"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</mdb-tab>
<mdb-tab heading="Profil">
<div class="row">
<div class="col-12 text-left">
<br>
<form [formGroup]="userForm">
<mdb-squeezebox [multiple]="false" aria-multiselectable="true">
<mdb-item>
<mdb-item-head>Kontaktdaten</mdb-item-head>
<mdb-item-body>
<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="lastname">
<label class="active">{{ 'INPUTS.LASTNAME' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" formControlName="email">
<label class="active">{{ 'INPUTS.EMAIL' | translate }}</label>
</div>
</mdb-item-body>
</mdb-item>
<mdb-item>
<mdb-item-head>Rechnungsadresse</mdb-item-head>
<mdb-item-body formArrayName="billingAdress">
<div class="md-form">
<input type="text" class="form-control" formControlName="company">
<label class="active">{{ 'INPUTS.COMPANY' | translate }}</label>
</div>
<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="lastname">
<label class="active">{{ 'INPUTS.LASTNAME' | 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="md-form">
<input type="text" class="form-control" formControlName="email">
<label class="active">{{ 'INPUTS.CONTACT_EMAIL' | 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>
</mdb-item-body>
</mdb-item>
<mdb-item>
<mdb-item-head>Lieferadresse</mdb-item-head>
<mdb-item-body formArrayName="deliveryAdress">
<div class="md-form">
<input type="text" class="form-control" formControlName="company">
<label class="active">{{ 'INPUTS.COMPANY' | translate }}</label>
</div>
<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="lastname">
<label class="active">{{ 'INPUTS.LASTNAME' | 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="md-form">
<input type="text" class="form-control" formControlName="email">
<label class="active">{{ 'INPUTS.CONTACT_EMAIL' | 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>
</mdb-item-body>
</mdb-item>
</mdb-squeezebox>
<br>
<div class="row no-gutters justify-content-start" style="align-items: center">
<div class="col-4"></div>
<div class="col-4">
<button type="submit" class="btn btn-lg btn-block waves-light pink" mdbRippleRadius (click)="updateProfile()">{{ 'BUTTONS.UPDATE_PROFILE' | translate }}</button>
</div>
<div class="col-4"></div>
</div>
</form>
</div>
</div>
</mdb-tab>
</mdb-tabset>
<div mdbModal #transactionModal="mdb-modal" class="modal fade" id="transactionModal" tabindex="-1" role="dialog" aria-labelledby="transactionModal"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content" *ngIf="transaction">
<div class="modal-header indigo">
<h4 class="modal-title w-100 text-white" id="myModalLabel">Order: {{ transaction.invoice_number }}</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="transactionModal.hide()">
<span aria-hidden="true" class="text-white">×</span>
</button>
</div>
<div class="modal-body">
<mdb-tabset #staticTabs [buttonClass]="'nav-tabs indigo'" [contentClass]="''">
<mdb-tab heading="<i class='fa fa-credit-card'></i> Rechnung">
<div class="row">
<div class="col-12">
<br>
<div class="row">
<div class="col-4 text-left">
<h4>Versandadresse</h4>
<br>
<p>{{ transaction.item_list.shipping_address.recipient_name }}</p>
<p>{{ transaction.item_list.shipping_address.line1 }}</p>
<p>{{ transaction.item_list.shipping_address.line2 }}</p>
<p>{{ transaction.item_list.shipping_address.postal_code }} {{ transaction.item_list.shipping_address.city
}}
</p>
<p>Tel: {{ transaction.item_list.shipping_address.phone }}</p>
</div>
<div class="col-4 text-left">
<h4>Kosten</h4>
<br>
<p>Kosten: {{ transaction.amount.details.subtotal | number:'0.2-2' }}€</p>
<p>Versandkosten: {{ transaction.amount.details.shipping | number:'0.2-2' }}€</p>
<hr>
<strong>Gesamtkosten: {{ transaction.amount.total | number:'0.2-2' }}€</strong>
</div>
</div>
</div>
</div>
</mdb-tab>
<mdb-tab heading="<i class='fa fa-download'></i> Downloads">
<div class="row">
<div class="col-12">
<br>
<table class="table text-left">
<thead>
<tr>
<td>#</td>
<td>Name</td>
<td>Preis</td>
<td>Öffnen</td>
<td>Download</td>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let item of transaction.item_list.items; let i = index">
<tr *ngIf="item.sku === 'Download'">
<td>{{ i + 1 }}</td>
<td>{{ item.name }}</td>
<td>{{ item.price | number:'0.2-2' }}€</td>
<td>
<a [href]="item.downloadUrl" target="_blank">
<i class="fa fa-eye" aria-hidden="true"></i>
</a>
</td>
<td>
<a (click)="downloadImage(item.downloadUrl)">Download</a>
</td>
</tr>
</ng-container>
</tbody>
</table>
<br>
<button type="button" class="btn btn-lg btn-block waves-light pink" mdbRippleRadius (click)="downloadAllImages(transaction.item_list.items)">Bilder als .zip Ordner herunterladen</button>
</div>
</div>
</mdb-tab>
<mdb-tab heading="<i class='fa fa-print'></i> Druckerei Bilder">
<div class="row">
<div class="col-12">
<br>
<table class="table text-left">
<thead>
<tr>
<td>#</td>
<td>Name</td>
<td>Preis</td>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let item of transaction.item_list.items; let i = index">
<tr *ngIf="item.sku === 'Print'">
<td>{{ i + 1 }}</td>
<td>{{ item.name }}</td>
<td>{{ item.price | number:'0.2-2' }}€</td>
</tr>
</ng-container>
</tbody>
</table>
</div>
</div>
</mdb-tab>
</mdb-tabset>
</div>
</div>
</div>
</div>