Multi Key Value Collector

It is a component in which multiple key value pairs can be added.

Features/Functionality

Gives a card to add to take values from user for keys given.
Type of value can be added.
Will display the values if data is given.
Value Pairs can be added or deleted.
Component is container responsive.
It is cross browser compatible. (IE11, Edge, Firefox, chrome).

Basic Usage

Dependency

jquery
font-awesome
shared styles
shared scripts

HTML Structure

<require from="{user_path}/key_value_collectors/key_value_collector"></require>
<cst-multi-multi-key-value-collector items.bind="{items}" display-items.bind="{displayItems}" options.bind="{options}" ext-disabled.bind="{disabled}"></cst-multi-key-value-collector>

Bindable Properties

Property	Data Type	Required	Description
items	array	Yes	Data to be passed to component. Atleast blank array should be given to set data in that.
displayItems	array	Yes	Display structure
extHideItem	object	No	Hide item or items as per given value
options	object	No	Basic component options
extDisabled	boolean	No	To disable editing
validationController	object	No	Validation controller instance
idPrefix	string	Yes	Unique identifier prefix
validateCallback	method	No	Method to be called for validation

Structure of bindable properties

items

items = [
    {
        valueProp: ''       // valueProp is the value given in display items
    },...
]

displayItems

displayItems: [
   {
     label: '',             // to give label on the left
     valueProp: '',
     isRequired: true/false,
     dataType: {
        name: '',           // text/checkbox_group/checkbox/icon_dropdown
        validations: {},    // not implemented
        source: [           // for checkbox source:{label:''} // to give label on right of checkbox
          {
            id: '',
            label:''
          }
        ],
        options: {
            propId: '',
            propLabel:''
        },
        format: ''          // not implemented yet
    }
   }
]

extHideItem

extHideItem = {
    [valueProp]: false       // valueProp is the value given in display items
}

options

options = {
    addButton : {
        label: '',
        tooltip: ''
    }
    pageLabel: {},          // Override page labels
    pageColorData: {}       // Override css colour porperty
}

CSS Overriding

Following classes are given to override CSS:
- .cst-multi-key-value-container-override : Container Class
- .cst-multi-key-value-element-override: Element Class

Note

While giving the classes in page, give them in nested structure.

Rules

Component measurements

Image of measurements

** box-sizing: border-box is used. So width and height will be dimensions + padding.

Working Example

HTML

<template>
  <require from="./components/key_value_collectors/key_value_collector"></require>
  <div class="cst-ex-multi-key-value-collector">
    <cst-multi-key-value-collector items.bind="items" display-items.bind="displayItems" options.bind="options" ext-disabled.bind="disabled"></cst-multi-key-value-collector>
  </div>
</template>

CSS

.cst-ex-multi-key-value-collector {
    .cst-multi-key-value-container-override : {
        min-width: 500px !important;
    }
    .cst-multi-key-value-element-override: {
        width: 300px !important;
        min-height: 100px !important;
    }
}

class MyCls{
    constructor(){
        this.items = [
            {
                label:'Very Poor'
            },
            {
                label:'Poor',
            },
            {
                label:'Good',
                isDefault:true
            },
            {
                label:'Very Good',
                isDefault:false
            }
        ];
        this.displayItems = [
        {
            label: 'Label',
            valueProp: 'label',
            isRequired: true,
            dataType: {
                name: 'text',           
                validations: {},
                format: ''
            }
        },
        {
            label: 'Is Default',
            valueProp:'isDefault',
            dataType:{
                name:'checkbox',           
                validations: {},
                format: ''
            }
        }
        ]
    }
}
export { MyCls }