modules/product-component/src/product.component.ts
Component that represent product page
selector | app-product |
styleUrls | product.component.scss |
templateUrl | product.component.html |
constructor(productService: any, route: any, basket: any, zone: any, router: any, dal: any, authService: any)
|
getAttributes |
getAttributes()
|
Get attributes of product
Returns:
void
|
getTags |
getTags()
|
Get tags of product
Returns:
void
|
changedAttrSelect |
changedAttrSelect(index: any, value: any)
|
Set value of selected attribute
Parameters :
Returns:
void
|
buyProduct |
buyProduct()
|
Add product to basket
Returns:
void
|
generateBuyObject |
generateBuyObject()
|
Returns:
void
|
login |
login()
|
Redirect to login page
Returns:
void
|
attributes |
attributes: |
Product attributes |
attributesToChoose |
attributesToChoose: |
Attributes that user must choose |
id |
id: |
Id of product |
isAuth |
isAuth: |
Default value: false
|
Is user authorized |
items |
items: |
Default value: 1
|
Items of product |
product |
product: |
Product data |
tags |
tags: |
Product tags |
import { AuthService } from '@nodeart/auth-service';
import {Component, OnInit, NgZone} from '@angular/core';
import {ProductService} from "@nodeart/productservice";
import {ActivatedRoute, Params, Router} from "@angular/router";
import {BasketService} from "@nodeart/basketservice";
import {DbAbstractionLayer} from "@nodeart/dal";
/**
* Component that represent product page
*/
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.scss']
})
export class ProductComponent implements OnInit {
/**
* Id of product
*/
id: string;
/**
* Product data
*/
product;
/**
* Product attributes
*/
attributes = [];
/**
* Product tags
*/
tags = [];
/**
* Attributes that user must choose
*/
attributesToChoose = [];
/**
* Is user authorized
*/
isAuth = false;
/**
* Items of product
*/
items : number = 1;
constructor(protected productService: ProductService,
protected route: ActivatedRoute,
protected basket: BasketService,
protected zone: NgZone,
protected router: Router,
protected dal: DbAbstractionLayer,
protected authService: AuthService){
}
ngOnInit() {
this.dal.getAuth().onAuthStateChanged(data => {
if(data == null) {
this.isAuth = false;
} else {
this.isAuth =true;
}
});
this.route.params.forEach((params: Params) => {
this.id = params['id'];
this.productService.getOneProduct(this.id).subscribe( product => {
if(product.val()){
console.log(product.val());
this.zone.run(() => {
this.product = product.val()['_source'];
this.product['id'] = product.val()['_id'];
});
this.getAttributes();
this.getTags();
}
});
});
}
/**
* Get attributes of product
*/
getAttributes(){
let attributes = this.product['attributes'];
if(attributes){
for(let attrId in attributes){
if(attributes.hasOwnProperty(attrId)){
let attributeChilds = this.product['attributes'][attrId];
this.productService.getOneAttribute(attrId).subscribe( attribute => {
if(attribute.val()){
let attributeObj = {
id: '',
name: '',
childNames: []
};
attributeObj['id'] = attribute.val()['_id'];
attribute = attribute.val()['_source'];
attributeObj['name'] = attribute.name;
for (let i = 0; i < attributeChilds.length; i++){
let childKey = attributeChilds[i];
for(let j = 0; j < attribute.childs.length; j++){
if(childKey === attribute.childs[j].key){
attributeObj.childNames.push({
name: attribute.childs[j].name,
key: attribute.childs[j].key
});
}
}
}
this.zone.run(() => {
this.attributes.push(attributeObj);
if(attributeObj.childNames.length > 1){
attributeObj['selectedValue'] = attributeObj.childNames[0].key;
this.attributesToChoose.push(attributeObj);
}
});
}
});
}
}
}
}
/**
* Get tags of product
*/
getTags(){
let tags = this.product['tags'];
if(tags){
for (let i = 0; i < tags.length; i++){
this.productService.getOneTag(tags[i]).subscribe( data => {
if(data.val()){
let tag = data.val()[0]['_source'];
this.zone.run(() => {
this.tags.push(tag);
});
}
});
}
}
}
/**
* Set value of selected attribute
* @param index index in {@link attributesToChoose}
* @param value
*/
changedAttrSelect(index, value){
this.attributesToChoose[index]['selectedValue'] = value;
}
/**
* Add product to basket
*/
buyProduct(){
let buyObj = this.generateBuyObject();
this.basket.addProduct(buyObj);
}
generateBuyObject() {
let buyObj = {
id: this.id,
fullId: this.id + "?",
attributes: [],
product: this.product,
items: +this.items
};
buyObj.attributes = this.attributesToChoose.map(item => {
let obj = {
id: item.id,
name: item.name,
value: item.selectedValue
};
buyObj.fullId += "" + obj.id + "=" + obj.value + ";";
return obj;
});
return buyObj;
}
/**
* Redirect to login page
*/
login(){
this.router.navigate(['login']);
}
}