log4j-catalog/log4j-catalog-editor/src/main/webapp/js/products.js

/**
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache license, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the license for the specific language governing permissions and
 * limitations under the license.
 */
$(document).ready(function () {
    $('#ProductsTableContainer').jtable({
        title: 'Table of Products',
        paging: true, //Enable paging
        pageSize: 25, //Set page size (default: 25)
        sorting: true, //Enable sorting
        defaultSorting: 'Name ASC', //Set default sorting
        actions: {
            listAction: 'api/products/list',
        },
        toolbar: {
            items: [{
                icon: 'js/jtable.2.4.0/themes/metro/add.png',
                text: 'Add new record',
                click: () => { addEditProductItem() }
            }]
        },
        fields: {
            id: {
                key: true,
                list: false
            },
            name: {
                title: 'Name',
                width: '25%'
            },
            displayName: {
                title: 'Display Name',
                width: '25%'
            },
            description: {
                title: 'Description',
                width: '50%'
            },
            edit: {
                title: '',
                width: '25',
                display: function (productData) {
                    // Store event item data in localStorage
                    var productDataItem = JSON.stringify(productData.record);
                    localStorage.setItem('productItem' + productData.record.id, productDataItem);
                    return '<img class="log4J-action-icon" src="js/jtable.2.4.0/themes/metro/edit.png" onClick="addEditProductItem(' + productData.record.id + ')" />';
                }
            },
            delete: {
                title: '',
                width: '25',
                display: function (productData) {
                    return '<img class="log4J-action-icon" src="js/jtable.2.4.0/themes/metro/delete.png" onClick="deleteProductItem(' + productData.record.id + ')" />';
                }
            }
        }
    });
    $.ajax({
        type: 'POST',
        url: 'api/events/list',
        success:function(response){
            if (response.Result === 'OK') {
                var allEvents = response.Records.map((item) => {
                    return item.name;
                });
                localStorage.setItem('allEvents', allEvents);
            }
        },
        error:function(jqXhr, textStatus, errorThrown){
            console.error(textStatus + ' - ' + errorThrown);
        }
    });
    //Load products list from server
    $('#ProductsTableContainer').jtable('load');
});

function deleteProductItem(productId) {
    var response = confirm('Are you sure you want to delete this product?');
    if (response) {
      var postData = {};
      postData['id'] = productId;
      $.ajax({
          type: 'POST',
          contentType: 'application/json',
          url: 'api/products/delete',
          data: JSON.stringify(postData),
          success:function(response) {
              if (response.Result === 'OK') {
                  $('#ProductsTableContainer').jtable('load');
              }
          },
          error:function(jqXhr, textStatus, errorThrown) {
              console.error(textStatus + ' - ' + errorThrown);
          }
      });
    }
}

function addEditProductItemHandler() {
    var validForm = validateFormContent();
    if (validForm) {
        showLoadingAnimation();
        var postUrl = 'api/products/create';
        var postData = {};
        var productEvents = [];
        postData['name'] = $('#productName').val();
        postData['displayName'] = $('#productDisplayName').val();
        postData['description'] = $('#productDescription').val();
        $('#productEvents .product-event-row').each(function() {
            productEvents.push($(this).find('input')[0].value);
        });
        postData['events'] = productEvents;
        if ($('#productId').val()) {
            postUrl = 'api/products/update';
            postData['id'] = $('#productId').val();
        }
        $.ajax({
            type: 'POST',
            contentType: 'application/json',
            url: postUrl,
            data: JSON.stringify(postData),
            success:function(response) {
                if (response.Result === 'OK') {
                    $('#ProductsTableContainer').jtable('load');
                    closeLog4jModal();
                }
            },
            error:function(jqXhr, textStatus, errorThrown) {
                console.error(textStatus + ' - ' + errorThrown);
            }
        });
    }
}

function addEditProductItem(productId) {
    var hiddenIdField = '';
    var productData = {};
    if (productId) {
        hiddenIdField = '<input type="hidden" id="productId" name="id" value="' + productId + '" />';
    } else {
        productId = 'tempProductData';
        var tempProductData = {
            id: productId,
            events: [],
        }
        localStorage.setItem('productItem' + productId, JSON.stringify(tempProductData));
    }
    productFormContent = ' \
        <form id="add-edit-product-form" class="log4j-catalog-form" method="post"> \
          ' + hiddenIdField + ' \
          <p> \
              <label>Name</label> \
              <input type="text" id="productName" name="name" class="required" /> \
          </p> \
          <p> \
              <label>Display Name</label> \
              <input type="text" id="productDisplayName" name="displayName" class="required" /> \
          </p> \
          <p> \
              <label>Description</label> \
              <input type="text" id="productDescription" name="description" class="required" /> \
          </p> \
          <p> \
              <label>Assigned Events</label> \
              <span id="productEvents"></span> \
          </p> \
          <p> \
              <label>Add Event</label> \
              <span> \
                  <select name="addProductEvent" id="addProductEvent"> \
                      <option value="">loading...</option> \
                  </select> \
                  <button id="addProductEventButton">+</button> \
              </span> \
          </p> \
        </form> \
        <div class="log4j-catalog-button-row"> \
            <button class="log4j-catalog-button" onclick="closeLog4jModal()">Cancel</button>\
            <button class="log4j-catalog-button" onclick="addEditProductItemHandler()">Save</button> \
        </div> \
    ';
    showLog4JModal('Add / Edit Product Item', productFormContent);
    if (localStorage.getItem('productItem' + productId)) {
        productData = JSON.parse(localStorage.getItem('productItem' + productId));
        $('#productName').val(productData.name);
        $('#productDisplayName').val(productData.displayName);
        $('#productDescription').val(productData.description);
    }
    populateProductEvents(productData.events, productId);
}

function populateProductEvents(assignedEvents, productId) {
    var selectedEvents = [];
    $('#productEvents').children().remove();
    if (productId) {
        assignedEvents.map((item) => {
            selectedEvents.push(item);
            $('#productEvents').append(' \
                <span class="product-event-row"> \
                    <input type="text" name="events[]" value="' + item + '" disabled /> \
                    <button class="remove-product-event-button" alt="' + productId + '" rel="' + item + '">-</button> \
                </span> \
            ');
        });
    }
    function checkPendingRequest() {
        if ($.active > 0) {
            window.setTimeout(checkPendingRequest, 1000);
        } else {
            var allEvents = localStorage.getItem('allEvents').split(',');
            allEvents.sort();
            $('#addProductEvent option').remove();
            allEvents.map((item) => {
                if (!selectedEvents.includes(item)) {
                    $('#addProductEvent').append(' \
                        <option value="' + item + '">' + item + '</option> \
                    ');
                }
            });
        }
    };
    checkPendingRequest();
    assignProductEventListeners(productId);
}

function assignProductEventListeners(productId) {
    $('#addProductEventButton, .remove-product-event-button').unbind();
    $('#addProductEventButton').click(function(e) {
        e.preventDefault();
        var allEvents = localStorage.getItem('allEvents').split(',');
        var productData = JSON.parse(localStorage.getItem('productItem' + productId));
        productData.events.push($('#addProductEvent').val());
        localStorage.setItem('productItem' + productId, JSON.stringify(productData));
        populateProductEvents(productData.events, productId);
    });

    $('.remove-product-event-button').click(function(e) {
        e.preventDefault();
        var allEvents = localStorage.getItem('allEvents').split(',');
        var productData = JSON.parse(localStorage.getItem('productItem' + productId));
        productData.events.pop($(this).attr('rel'));
        localStorage.setItem('productItem' + productId, JSON.stringify(productData));
        populateProductEvents(productData.events, productId);
    });
}