ramin-0.js

$(function() {

    let currentItem, currentItemID;

    const addTypes = $('#add-types');
    const body = $(document.body);
    const confirmTarget = $('#confirm');
    const confirmTrigger = $('a[data-bs-toggle="modal"][data-bs-target="#confirm"]');
    const storeTypeInsert = $('#storeTypeInsert');
    const storeTypeInsertText = storeTypeInsert.find('input[type=text]');
    const storeTypeInsertTextArea = storeTypeInsert.find('textarea');
    const storeTypes = $('#listStoreTypes');

    confirmTrigger.hide(); // Hide global trigger for confirm dialog

    function confirmDelete(message, then) {
        confirmTrigger.trigger('click'); // Simulate click event to the global trigger confirm dialog
        let yes = confirmTarget.find('.btn.btn-danger'),
            no = confirmTarget.find('.btn.btn-secondary');
        confirmTarget.find('.modal-body').html(message);
        function reject() {
            // Remove events on reject
            yes.off('click', then);
            no.off('click', reject);
        }
        yes.on('click', then);
        no.on('click', reject);
    }

    function prepareTools() {

        // Delete store
        storeTypes.on('click', '.del', function() {
            let itemToDelete = $(this),
                itemID = itemToDelete.attr('rel');
            currentItem = itemToDelete;
            currentItemID = itemID;
            confirmDelete('Are you sure you want to delete Store Type: ' + itemID, function() {
                $.post('../dashboard/xhrDeleteStoreType', {
                    'store_type_id': currentItemID
                }, function(o) {
                    // Test
                    storeTypes.append('<h1>Hello World</h1>');
                }, 'json');
                // Remove item from the list
                currentItem.closest('tr').remove();
            });
            return false;
        });

        // Edit store
        storeTypes.on('click', '.edit', function() {

            storeTypeInsert.data('allow-submit', true);

            let item = $(this),
                id = item.attr('rel');

            // Assign `id` to global so that it becomes accessible by the form
            currentItem = item;
            currentItemID = id;

            // Show form (in modal window)
            addTypes.addClass('show');
            addTypes.attr('role', 'dialog');
            addTypes.css('display', 'block');
            body.addClass('modal-open');
            body.attr('style', 'overflow: hidden; padding-right: 0;');
            body.append('<div class="modal-backdrop fade show"></div>');

            // Change button name to "Update"
            addTypes.find('.btn.btn-primary').html('Update');

            // Update store
            /*
            addTypes.find('.btn.btn-primary').on('click', function() {
                storeTypeInsert.trigger('submit');
                $.post('../dashboard/xhrGetStoreType', {
                    'id': id
                }, function(o) {
                    // Update store type title
                    item.closest('tr').find('td').first().html(o[0].store_type_title);
                }, 'json');
            });
            */

            // Close store edit dialog
            addTypes.find('.btn-close').click(function(e) {

                storeTypeInsert.removeData('allow-submit');

                // Clear the field values
                storeTypeInsertText.val("");
                storeTypeInsertTextArea.val("");

                // Hide form (in modal window)
                addTypes.find('.btn.btn-primary').html('Add'); // Change back the button name to "Add"
                addTypes.css('display', 'none');
                addTypes.removeAttr('role');
                addTypes.removeClass('show');
                body.removeAttr('style');
                body.removeClass('modal-open');

                $('.modal-backdrop').remove();

                /*
                addTypes.find('.btn.btn-primary').off('click');
                */

            });

            // Get store type by `id` from the database
            $.post('../dashboard/xhrGetStoreType', {
                'id': id
            }, function(o) {
                // Set the field's values to the currently edited item's data
                storeTypeInsertText.val(o[0].store_type_title);
                storeTypeInsertTextArea.val(o[0].store_type_desc);
            }, 'json');

            return false;

        });

    }

    // Make sure to remove empty state placeholder in the store list if any
    storeTypes.empty();

    // Initialize data entry into the list
    $.get('../dashboard/xhrGetStoreTypes', function(o, status) {

        // `o` holds an array of object with the following properties:
        //
        // [
        //     {"id":"1","text":"test-1"},
        //     {"id":"2","text":"test-2"}
        //     ...
        // ]
        for (let i = 0; i < o.length; i++) {
            storeTypes.append('<tr>\
              <td>' + o[i].store_type_title + '</td>\
              <td scope="row">\
                <span class="d-flex gap-2">\
                  <a class="link-success edit" rel="' + o[i].store_type_id + '" href="#">Edit</a>\
                  <a class="link-danger del" rel="' + o[i].store_type_id + '" href="#">Delete</a>\
                </span>\
              </td>\
             </tr>\
            ');
        }

        // Set action events etc.
        prepareTools();

    }, 'json');

    storeTypeInsert.submit(function(e) {
        e.preventDefault();
        if (addTypes.find('.btn.btn-primary').text() !== 'Add') {
            let data = $(this).serializeArray(); // Convert form data to array
            data.push({
                name: 'store_type_id',
                value: currentItemID
            });
            /*
            // Convert `serializeArray` return value into normal object
            let formData = {};
            $.each(data, function(i, field) {
                if (field.value.trim() !== "") {
                    if (formData[field.name] !== undefined) {
                        let val = formData[field.name];
                        if (!Array.isArray(val)) {
                            arr = [val];
                        }
                        arr.push(field.value.trim());
                        formData[field.name] = arr;
                    } else {
                        formData[field.name] = field.value;
                    }
                }
            });
            */
            $.post('../dashboard/xhrUpdateStoreType', data, function(o) {

            }, 'json');

            // Get the values of the last updated item
            $.post('../dashboard/xhrGetStoreType', {
                'id': currentItemID
            }, function(o) {
                // Update store type title
                currentItem.closest('tr').find('td').first().html(o[0].store_type_title);
            }, 'json');

        } else {

            // Assign the form action
            let url = $(this).attr('action');
            // Serialize the form to make it easier to post
            let data = $(this).serialize();

            $.post(url, data, function(o) {
                storeTypes.prepend('<tr>\
                    <td>' + o.store_type_title + '</td>\
                    <td scope="row">\
                      <span class="d-flex gap-2">\
                        <a class="link-success edit" rel="' + o.store_type_id + '" href="#">Edit</a>\
                        <a class="link-danger del" rel="' + o.store_type_id + '" href="#">Delete</a>\
                      </span>\
                    </td>\
                  </tr>\
                ');
            }, 'json');

        }

        // Clear the field values
        storeTypeInsertText.val("");
        storeTypeInsertTextArea.val("");

        addTypes.find('.btn-close').click();

    });

    /*
    addTypes.find('.btn.btn-primary').click(function(e) {
        storeTypeInsert.data('allow-submit') && storeTypeInsert.trigger('submit');
    });
    */

});