File

modules/add-product-component/src/add-product.component.ts

Description

Component that represent a form to add new products to database

Metadata

selector app-add-product
styleUrls add-product.component.scss
templateUrl add-product.component.html

Constructor

constructor(fb: any, dal: any, productService: any)

Methods

addProduct
addProduct()

Add product to database

Returns: void
addAttribute
addAttribute()

Attach attribute to product

Returns: void
addTag
addTag()

Attach tag to product

Returns: void
filterProps
filterProps(props: any, addedProps: any)

Filter properties

Parameters :
  • props
  • addedProps
Returns: void
check
check(attr: any, valueName: string, $event: any)

Process check of attribute

Parameters :
  • attr

    Attribute

  • valueName

    Attribute name

  • event
Returns: void
removeAttribute
removeAttribute(index: any)

Remove attribute

Parameters :
  • index

    Index of attribute in array

Returns: void
removeTag
removeTag(index: any)

Remove tag

Parameters :
  • index

    Index of tagin array

Returns: void
searchAttrValues
searchAttrValues(attrId: any)
Returns: void
getTags
getTags($event: any)

Get tags by category

Parameters :
  • event
Returns: void
getAttributes
getAttributes($event: any)

Get attributes by category

Parameters :
  • event
Returns: void
getProps
getProps($event: any)

Get properties (attributes, tags)

Parameters :
  • event
Returns: void
getCategories
getCategories()

Get categories

Returns: void

Properties

addedAttributes
addedAttributes: any[]

User attached attributes to product

addedTags
addedTags: any[]

User attached tags to product

attributes
attributes: any[]

Store attributes

categories
categories: any[]

Store categories

isCategorySelected
isCategorySelected: boolean
Default value: false
productForm
productForm: any

Form object

tags
tags: any[]

Store tags

import { ProductService } from '@nodeart/productservice';
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder} from '@angular/forms';
import {DbAbstractionLayer} from "@nodeart/dal";

/**
 * Component that represent a form to add new products to database
 */
@Component({
  selector: 'app-add-product',
  templateUrl: './add-product.component.html',
  styleUrls: ['./add-product.component.scss']
})
export class AddProductComponent implements OnInit {

  /**
   * Form object
   */
  productForm : FormGroup;
  
  /**
   * Store categories
   */
  categories = [];
  
  /**
   * Store attributes
   */
  attributes = [];

  /**
   * Store tags
   */
  tags = [];

  /**
   * User attached attributes to product
   */
  addedAttributes = [];

  /**
   * User attached tags to product
   */
  addedTags = [];

  isCategorySelected = false;
  constructor(protected fb: FormBuilder, 
              protected dal: DbAbstractionLayer,
              protected productService: ProductService) {

    this.productForm = this.fb.group({
      name: '',
      price: '',
      imageUrl: '',
      category: '',
      attributes: {},
      tags: [],
      description: ''
    });

  }

  ngOnInit() {
    this.getCategories();
  }

  /**
   * Add product to database
   */
  addProduct(){
    let attributes = {};
    let tags = [];
    for(let i = 0; i < this.addedAttributes.length; i++){
      let attr = this.addedAttributes[i];
      attributes[attr.id] = attr.childs;
    }
    for(let i = 0; i < this.addedTags.length; i++){
      let tag = this.addedTags[i];
      tags.push(tag.id);
    }
    this.productForm.patchValue({
      attributes:  attributes,
      tags: tags
    });
    console.log(this.productForm.controls);
    this.dal.addProduct(this.productForm.value);
  }

  /**
   * Attach attribute to product
   */
  addAttribute(){
    this.addedAttributes.push({
      id: '',
      childs: [],
      attrs: this.filterProps(this.attributes, this.addedAttributes)
    });
    console.log(this.addedAttributes);
  }

  /**
   * Attach tag to product
   */
  addTag(){
    this.addedTags.push({
      id: '',
      tags: this.filterProps(this.tags, this.addedTags)
    });
  }

  /**
   * Filter properties
   * @param props 
   * @param addedProps 
   */
  filterProps(props, addedProps){
    return props.filter(prop => {
      let flag = true;
      for (let i = 0; i < addedProps.length; i++) {
        if (prop.id !== addedProps[i].id){
          continue;
        } else {
          flag = false;
        }
      }
      if (flag) {
        return prop;
      }
    });
  }

  /**
   * Process check of attribute
   * @param attr Attribute 
   * @param valueName Attribute name
   * @param event 
   */
  check(attr, valueName: string, $event){
    if($event.target.checked){
      attr.childs.push(valueName);
    }else{
      attr.childs = attr.childs.filter(value => {
        if(value !== valueName){
          return value;
        }
      });
    }
    console.log(attr);
  }

  /**
   * Remove attribute
   * @param index Index of attribute in array
   */
  removeAttribute(index){
    this.addedAttributes.splice(index, 1);
  }

  /**
   * Remove tag
   * @param index Index of tagin array
   */
  removeTag(index){
    this.addedTags.splice(index, 1);
  }

  searchAttrValues(attrId){
    console.log(attrId);
    for(let i = 0; i < this.attributes.length; i++){
      if(this.attributes[i].id == attrId){
        return this.attributes[i].childs;
      }
    }
  }

  /**
   * Get tags by category
   * @param event 
   */
  getTags($event){
    let categoryId = $event.target.value;
    console.log(categoryId);
      this.productService.getCategory(categoryId).subscribe( data => {
      if(data.val()){
        console.log("Attrs ids:");
        console.log(data.val());
        let ids = data.val()[0]['_source']['tags'];
        let queryObject = {
            query: {
                bool: {
                  should: []
                }
            }
        };
        // add OR matches to find all attributes 
        for(let i = 0; i < ids.length; i++){
          queryObject.query.bool.should.push({
            match: {
              "_id": ids[i]
            }
          })
        }
        this.dal.getTags(queryObject).subscribe( data => {
          if(data.val()){
            console.log("Final data: ");
            this.tags = data.val().map(item => {
              item['_source']['id'] = item['_id'];
              return item['_source'];
            });
            console.log(this.tags);
          }
        });
        this.isCategorySelected = true;
      }
    });
  }

  /**
   * Get attributes by category
   * @param event 
   */
  getAttributes($event){
    let categoryId = $event.target.value;
    console.log(categoryId);
      this.productService.getCategory(categoryId).subscribe( data => {
      if(data.val()){
        console.log("Attrs ids:");
        console.log(data.val());
        let ids = data.val()[0]['_source']['attrs'];
        let queryObject = {
            query: {
                bool: {
                  should: []
                }
            }
        };
        // add OR matches to find all attributes 
        for(let i = 0; i < ids.length; i++){
          queryObject.query.bool.should.push({
            match: {
              "_id": ids[i]
            }
          })
        }
        this.dal.getAttributes(queryObject).subscribe( data => {
          if(data.val()){
            console.log("Final data: ");
            this.attributes = data.val().map(item => {
              item['_source']['id'] = item['_id'];
              return item['_source'];
            });
            console.log(this.attributes);
          }
        });
        this.isCategorySelected = true;
      }
    });
  }

  /**
   * Get properties (attributes, tags)
   * @param event 
   */
  getProps($event){
    this.getAttributes($event);
    this.getTags($event);
  }

  /**
   * Get categories
   */
  getCategories(){
    this.productService.getCategories().subscribe( data => {
      if(data.val()) {
        this.categories = data.val().map(item => {
              item['_source']['id'] = item['_id'];
              return item['_source'];
        });
      }
    });
  }

}

results matching ""

    No results matching ""