// For full API documentation, including code examples, visit http://wix.to/94BuAAs

 

// onReady - initialises the table with any pre existing values.

// Because it uses a dataset it needs to wait for the dataset to be ready

$w.onReady(function () {

    //set up page defaults

    clearErrorMessage();

    // Wait for the dataset to load

    $w('#kvPairsDataset').onReady(() => {

        loadTable();

    });

    

});

 

// clearKeyValuePair - convenience function to clear the input fields

function clearKeyValuePair() {

    $w('#key').value = '';

    $w('#value').value = '';

}

 

// clearTable - Convenience function to clear the table display

function clearTable() {

    $w('#kvTable').rows = [];

}

 

// loadTable - retrieves all saved dataset items and uses them to update the table and dropdown

function loadTable () {

    clearTable();

    return refreshKVPairs(['key', 'value'])

    .then((kvPairs) => {

        refreshTable(kvPairs);

        refreshDropDowns(kvPairs);

    })

}

 

// uniqueListForColumn - generates an array of unique values from a given column name

// kvPairs is the dataset we have extracted to display as an array of objects

// columnName is the name of the key in each kvPairs record that we want in our unique list

function uniqueListForColumn(kvPairs, columnName) {

    let result = [];

    // If there is at least one kvPair with the column name (key name in the object) then we can generate a list

    // Uses Object.keys to grab the array of column names from each kvPairs row element returning true if a key matches

    if (kvPairs.some(rowElement => Object.keys(rowElement).indexOf(columnName) !== -1)) {

        // Cycle through each rowItem in the kvPairs records we were given and extract the column values we have been asked for

        kvPairs.forEach((rowItem) => {

            let columnValue = rowItem[columnName];

            // We need the list to be unique so if we have this value already then ignore it

            if (columnValue && result.indexOf(columnValue) === -1) {

                // We can add this as we don't already have it

                result.push(columnValue);

            }

        });

    }

    return result.sort();

}

 

// updateTable - adds the key value pair in the input fields if they don't already exist in the dataset

// The function calls refreshKVPairs() to get the current set of data in our dataset.

// It then verifies that the key value pair is not in the set.

// It then updates the dataset with a new record and refreshes the table view and the drop down list

function updateTable() {

let key = $w('#key').value;

    let value = $w('#value').value;

    if (key.length === 0 || value.length === 0) {

        setErrorMessage("Please enter a Key and a Value");

    } else {

        // Reload the kvPairs from our dataset

        refreshKVPairs(['key', 'value'])

        .then((datasetRecords) => {

            // We should now have a list of the key and value columns from the dataset

            if (!keyValuePairIsNew(datasetRecords, key, value)) {

                clearKeyValuePair();

                throw Error("Key Value Pair already exists");

            }

            // This set is new so add it to the dataset

            return updateKVPairs(key, value);

        })

        .then(() => {

            // Dataset save succeeded so update the views

            loadTable();

        })

        .catch(err => {

            setErrorMessage(err.message);

        });

        

    }

}

 

// updateKVPairs - forces a new dataset item to be created. Adds the new values and saves the new item.

// The function returns the promise returned by the dataset save function.

function updateKVPairs(key, value) {

    return $w('#kvPairsDataset').new()

    .then(() => {

        $w('#kvPairsDataset').setFieldValues({'key':key, 'value':value});

        return $w('#kvPairsDataset').save();

    })

}

 

// refreshDropDowns - cycles through the dropdowns on the page generating a unique list for each drop down

function refreshDropDowns(kvPairs) {

    let dropDowns = ['key', 'value'];

    dropDowns.forEach(dropDown => {

        let dropDownList = uniqueListForColumn(kvPairs, dropDown);

        // The drop down list is a simple array of strings. We need to map it into an options

        //object array required by the dropDown element

        $w('#'+dropDown+'Dropdown').options = dropDownList.map(listItem => {return {'label':listItem, 'value':listItem}});

    });

}

 

// keyValuePairIsNew - Scans the given records list (array of objects) for a matching key value pair.

// Returns a boolen that is true if no match is found, false otherwise

function keyValuePairIsNew(records, key, value) {

    // Return the result of finding and index or not. Not finding an index (-1) results in a true result

    return records.findIndex((arrayItem) => {

        //Test each element in the array to see if the kv pair already exists

        return (arrayItem.key === key && arrayItem.value === value);

    }) === -1;

}

 

// refreshKVPairs - loads all records in the dataset and then filters it to limit

// the results to the columns requested in the arguments array

function refreshKVPairs(columnNames) {

    // We want all records so we will scope the get to include totalCount items

    return $w('#kvPairsDataset').getItems(0, $w('#kvPairsDataset').getTotalCount())

    .then((kvRecords) => {

        let result = [];

        // We have a successful result. Use the array map function to filter the dataset

        result = kvRecords.items.map ( item => {

            let mapRecord = {};

            // Cycle through the requested columnNames saving the values we find in the results array

            for (var columnName of columnNames) {

                // Grab the value if it exists

                let columnValue = item[columnName];

                if (columnValue) {

                    // Value exists so add it to the results.

                    mapRecord[columnName] = columnValue;

                }

            }

            return mapRecord;

        })

        // Return the result as a promise so it can be used in futher promise processing

        return Promise.resolve(result);

    })

}

 

// refreshTable - takes an array of objects containing label and value key value pairs and loads the table element

function refreshTable(kvPairs) {

$w('#kvTable').rows = kvPairs;

}

 

// setErrorMessage - convenience function to show an error

function setErrorMessage(message) {

    $w('#error').text = message;

}

 

// clearErrorMessage - clears the error message

function clearErrorMessage() {

    $w('#error').text = '';

}

 

// value_change - value change handler used to clear an error message if a new value is added

export function value_change(event) {

    clearErrorMessage();

}

 

// key_change - key change handler used to clear an error message if a new value is added

export function key_change(event) {

    clearErrorMessage();

}

 

// addToTable_click - click handler used to examine the input fields and update the table and download elements

export function addToTable_click(event) {

    updateTable();

}