dcAssetAttributes/dcAssetAttributes.js

/*************************************************************************
 *
 * VLOCITY, INC. CONFIDENTIAL
 * __________________
 *
 *  [2014] - [2020] Vlocity, Inc.
 *  All Rights Reserved.
 *
 * NOTICE:  All information contained herein is, and remains
 * the property of Vlocity, Inc. and its suppliers,
 * if any. The intellectual and technical concepts contained
 * herein are proprietary to Vlocity, Inc. and its suppliers and may be
 * covered by U.S. and Foreign Patents, patents in process, and are
 * protected by trade secret or copyright law. Dissemination of this
 * information and reproduction, modification or reverse-engineering
 * of this material, is prohibited unless prior written permission
 * is obtained from Vlocity, Inc.
 *
 */
import { LightningElement, track, api } from "lwc";
import { DCBaseComponent } from "c/dcBaseComponent";

/**
 * @class DCAssetAttributes
 * @extends {LitElement} Extend the LitElement base class
 *
 * @classdesc
 * c-dc-asset-attributes  is the component for listing all the asset attributes.
 * @property {Array} attributes - Array containing list of all attributes of current asset.
 *
 * @example
 * Sample Usage -
 *
 * Include the component in your template by adding c-dc-asset-attributes  custom tag
 *
 * <c-dc-asset-attributes .asset="${asset}"></c-dc-asset-attributes >
 *
 * | Attribute Name    | Type Expected                                                                   | Required |
 * |-------------------|---------------------------------------------------------------------------------|----------|
 * | asset             | It expects an object which contains a current asset from asset list             |   Yes    |
 *
 *  KEY INFO -
 *
 *  events fired : none
 *
 *  events registered : none
 *
 *  Dependency - c-dc-asset-attributes is a child component of c-dc-asset-details.
 *  It is used inside c-dc-asset-details for displaying attributes.
 *
 *
 *                | Parent Component         | Expected Children Components |
 *                |--------------------------|------------------------------|
 *                | c-dc-asset-details       |   none                       |
 *
 * Sample with slots -
 *
 * <c-dc-asset-attributes >
 *    <span slot="{slot_name}">
 *      Custom HTML elements goes here
 *    </span>
 * </c-dc-asset-attributes >
 *
 * List of available slots -
 *
 * | Slot names                  | Dynamic     | Description                     | Impact                                 |
 * |--------------------------   |-------------|---------------------------------|----------------------------------------|
 * | dc-asset-attributes         | -           | Wrapper for asset attributes    | Replaces asset attributes              |
 *
 */
export default class DCAssetAttributes extends DCBaseComponent(
  LightningElement
) {
  @track loading = false;
  @track attributes = [];
  attributeValueIndex = 0;
  @api
  set attributes(val) {
    if (val) {
      this._attributes = val;
    }
  }
  get attributes() {
    return this._attributes;
  }

  /**
   * This function is used as getter to get attribute value to be displayed in UI
   * @memberof DCAssetAttributes
   */
  get attributeValue() {
    if (this.attributeValueIndex >= this.attributes.length) {
      this.attributeValueIndex = 0;
    }
    const attribute = this.attributes[this.attributeValueIndex];
    this.attributeValueIndex++;
    if (attribute.inputType === "radio") {
      const userValue = attribute.userValues;
      const value = attribute.values.filter((value) => {
        return userValue === value.value;
      });
      return value.length ? value[0].label : "";
    } else {
      return attribute.userValues;
    }
  }
}