WebBuild/wwwroot/apps/transact/controls/orders/cartdetails.component.js

var Bizgaze;
(function (Bizgaze) {
    let Apps;
    (function (Apps) {
        let Transact;
        (function (Transact) {
            let Controls;
            (function (Controls) {
                class CartDetails extends Unibase.Platform.Core.BaseComponent {
                    constructor() {
                        super(...arguments);
                        this.g_Categories = [];
                    }
                    init(formpropertyid, prop, callback) {
                        var instance = this;
                        instance.loadControlSettings(prop.ControlJsonText, prop.FormPropertyId);
                        instance.loadPropertySettings(prop.PropertySettings, prop.FormPropertyId);
                    }
                    loadControl(containerid, prop) {
                        var html = `<div class="col-sm-12 cart-categories-wrap">
                                <div id="categoryInputCard" class="card d-none">
                                    <div class="card-body pa-10 text-center">
                                             <input type="text" class="form-control category-input" id="addCategoryInput" placeholder="Enter Category"/>
                                             <a href="javascript:;" class="btn btn-sm btn-primary mt-15" id="addCategoryBtn" data-uniqueid='0'>Add</a>
                                    </div>
                                 </div>
                                 <a href="javascript:;" class="btn btn-sm btn-primary pull-right mb-15 hidden" id="cartCategoryAddBtn">Add Category
                                 </a>
                                 <div id="addedCategoriesList" class="added-categories-list d-none"></div>
                            </div>

                            <div class="row col-sm-12">
                                <div class="col-sm-12">
                                    <div class="col-sm-8 divOrderCart pull-left">
                                      <a id="totalOrderItems_link" style="cursor:pointer"><u class="text-info" style="color:deepskyblue;font-size:15px">Total Items : (<b class="netpacks" id="totalOrderItems"></b>) </u></a>
                                    </div>
                                    <div class="col-sm-4 pull-right">
                                     <span class="font-bold pull-right"> Total Quantity : (<b id="OverallOrderQuantity"></b>)</span>
                                     </div>
                                    </div>
                                </div>
                                <br/>` +
                            `<div class="col-sm-12 m-t-xs leverage-Warning hidden">
                                    <div class="alert alert-success alert-block">
                                        <h4>Warning..!</h4>
                                        <p id="lblSpocNotes">Leverage percent exceeded, Some item have the discount of more than your approved leverage of      <span class="empLeverage"></span> %.
                                        </p>
                                    </div>
                                </div>
                                
                                <div class="order-cart-list" id="CartItemsList" style="min-height:150px;">` +
                            `<div class="floating-label-form-group CartItemFindTxt hidden">
                                        <label for="CartItemSearch" id="">Search Items </label>
                                            <input type="search" id="cartItemsSearch" class="form-control  floating-label-control" data-isdynamic="false" placeholder="Search Items" data-placeholder="Item Name" data-label="Search Items" autocomplete="on"/>
                                    </div>` +
                            `<ul class="list-group no-radius clear cartItemsSortable col-sm-12" id="ulOrder_Cart"></ul>
                                    <ul class="list-group no-radius clear col-sm-12" id="ulOpportunityTag_Cart"></ul>
                                    <div id="ContinueShopping_Div" class="row mt-10">
                                        <div class="col-md-8 col-sm-6">
                                            <a href="javascript:;" id="btn_ContinueShopping" class="btn btn-primary ContinueShopping mr-auto btn-sm">Continue Shopping</a>
                                        </div>
                                        <div class="col-md-4 col-sm-6 biz-select2-wrap d-none" id="categoriesSelectWrap">
                                            <select id="cartCategoriesSelect"></select>
                                        </div>
                                    </div>
                            </div>`;
                        $("#" + containerid).html(html);
                    }
                    loadControlSettings(controlsettingjson, formpropertyid) {
                        const instance = this;
                        $("#totalOrderItems_link").click(function () {
                            $("#ulOrder_Cart").toggleClass("hidden");
                        });
                        $("#cartItemsSearch").on("keyup", function () {
                            let value = $(this).val().toString().toLowerCase();
                            $("#ulOrder_Cart li:not(:first-child)").filter(function () {
                                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
                            });
                        });
                        $('#cartCategoriesSelect').select2({
                            placeholder: 'Select Category',
                            data: instance.g_Categories,
                            allowClear: true,
                        }).on('select2:select', function () {
                            const catId = +$(this).val();
                            $(this).val("").trigger("change");
                            $('#ulOrder_Cart .cart-item-chk').each(function (i, e) {
                                if ($(e).is(':checked')) {
                                    const catSortableEl = $(`#catItemsSortable_${catId}`);
                                    $(e).parents('.cartitem').detach().appendTo(catSortableEl);
                                    catSortableEl.find('.cart-item-remove').removeClass('d-none').click(function () {
                                        const cartItemEl = $(this).parents('.cartitem');
                                        cartItemEl.find('.cart-item-remove').addClass('d-none');
                                        cartItemEl.find('.cart-item-chk').removeClass('d-none');
                                        cartItemEl.detach().appendTo($("#ulOrder_Cart"));
                                    });
                                    catSortableEl.find('.cart-item-chk').addClass('d-none').prop('checked', false);
                                }
                            });
                        });
                        $('#cartCategoryAddBtn').click(function () {
                            $(this).addClass('d-none');
                            $('#categoryInputCard').removeClass('d-none');
                        });
                        $('#addCategoryBtn').click(function () {
                            const inputVal = $('#addCategoryInput').val();
                            const key = +$(this).attr('data-uniqueid');
                            if (inputVal.trim().length) {
                                $('#addCategoryInput').val('');
                                $('#addedCategoriesList').append(`<div class="card cart-cat-card" id="catergoryCard_${key}" data-catid="${key}"><div class="card-header d-flex justify-content-between align-items-center pa-10" id="catCardHeader_${key}"><div class="cat-title-wrap"><span class="cat-title-span" id="catTitleSpan_${key}">${inputVal}</span><input type="text" value="${inputVal}" class="cat-title-input form-control font-14 h-30p py-0 px-1 d-none" id="catTitleInput_${key}"></div><div class="flex-shrink-0 ml-15"><a href="javascript:;" class="btn btn-icon btn-flush-biz-theme btn-rounded flush-soft-hover d-30" id="catTitleEditBtn_${key}" data-tooltip="true" title="Edit title"><span class="btn-icon-wrap"><i class="fa fa-pencil font-16"></i></span></a><a href="javascript:;" class="btn btn-icon btn-flush-biz-theme btn-rounded flush-soft-hover d-30 d-none" id="catTitleSaveBtn_${key}" data-tooltip="true" title="Save title"><span class="btn-icon-wrap"><i class="fa fa-check font-16 text-success"></i></span></a></div></div><div class="card-body pa-10" id="catergoryCardBody_${key}"><ul id="catItemsSortable_${key}" class="cartItemsSortable d-flex flex-column"><li class="alert alert-warning text-center border border-2 border-dotted flex-center h-10p my-10 order-1 drag-placeholder">Drag Items Here</li></ul></div></div>`).removeClass('d-none');
                                $(this).attr('data-uniqueid', key + 1);
                                const newCatObj = { id: key, text: inputVal };
                                instance.g_Categories.push(newCatObj);
                                const newOption = new Option(newCatObj.text, newCatObj.id.toString(), false, false);
                                $('#categoriesSelectWrap,#ulOrder_Cart .cart-item-chk').removeClass('d-none');
                                $('#cartCategoriesSelect').append(newOption);
                                $('#cartCategoriesSelect').val(null).trigger('change');
                                const orderCartEl = $('#ulOrder_Cart');
                                orderCartEl.sortable();
                                orderCartEl.sortable('destroy');
                                orderCartEl.sortable({
                                    connectWith: '.cartItemsSortable',
                                    receive: function () {
                                        orderCartEl.find('.drag-placeholder').remove();
                                    },
                                    remove: function () {
                                        if (!orderCartEl.find('.cartitem:visible').length) {
                                            orderCartEl.append('<li class="alert alert-warning text-center border border-2 border-dotted flex-center mb-10 order-1 drag-placeholder h-10p mt-30">Drag Items Here</li>');
                                        }
                                        else {
                                            orderCartEl.find('.drag-placeholder').remove();
                                        }
                                    }
                                }).disableSelection();
                                $(`#catItemsSortable_${key}`).sortable({
                                    connectWith: ".cartItemsSortable",
                                    items: '.cartitem',
                                    cancel: ".drag-placeholder",
                                    receive: function (event, ui) {
                                        $(ui.item).find('.cart-item-chk').addClass('d-none');
                                        $(ui.item).find('.cart-item-remove').removeClass('d-none').click(function () {
                                            $(this).addClass('d-none');
                                            $(ui.item).find('.cart-item-chk').removeClass('d-none');
                                            $(this).parents('.cartitem').detach().appendTo(orderCartEl);
                                        });
                                    },
                                    remove: function (event, ui) {
                                        $(ui.item).find('.cart-item-remove').addClass('d-none');
                                        $(ui.item).find('.cart-item-chk').removeClass('d-none');
                                    }
                                }).disableSelection();
                                $(`#catTitleEditBtn_${key}`).click(function () {
                                    $(`#catTitleEditBtn_${key},#catTitleSpan_${key}`).addClass('d-none');
                                    $(`#catTitleInput_${key},#catTitleSaveBtn_${key}`).removeClass('d-none');
                                    $(`#catTitleInput_${key}`).trigger('focus');
                                });
                                $(`#catTitleSaveBtn_${key}`).click(function () {
                                    const inputVal = $(`#catTitleInput_${key}`).val().toString();
                                    $(`#catTitleInput_${key},#catTitleSaveBtn_${key}`).addClass('d-none');
                                    $(`#catTitleEditBtn_${key},#catTitleSpan_${key}`).removeClass('d-none');
                                    $(`#catTitleSpan_${key}`).text(inputVal);
                                    $(`#cartCategoriesSelect option[value="${key}"]`).remove();
                                    const newCatObj = { id: key, text: inputVal };
                                    const newOption = new Option(newCatObj.text, newCatObj.id.toString(), false, false);
                                    $('#cartCategoriesSelect').append(newOption);
                                    $('#cartCategoriesSelect').val(null).trigger('change');
                                });
                            }
                        });
                    }
                    loadPropertySettings(propertysettings, formpropertyid) {
                        return null;
                    }
                    bindEditFormDetails(formpropertyid, propval, DocPropertyName) {
                        return null;
                    }
                    getCategoryIndex(CategoryName) {
                        let instance = this;
                        let CatgryIndex = instance.g_Categories.findIndex(x => x.CategoryName == CategoryName);
                        return CatgryIndex;
                    }
                    getNewRowId() {
                        let text = "";
                        let possible = "0123456789";
                        for (let i = 0; i < 5; i++)
                            text += possible.charAt(Math.floor(Math.random() * possible.length));
                        return Number(text);
                    }
                    isCategoryExists(CategoryName) {
                        let instance = this;
                        let CatgryIndex = instance.getCategoryIndex(CategoryName);
                        if (CatgryIndex == -1) {
                            return false;
                        }
                        else {
                            return true;
                        }
                    }
                    pushCategoryIfNotExists(CategoryName) {
                        let instance = this;
                        let isCatgryExists = instance.isCategoryExists(CategoryName);
                        if (!isCatgryExists) {
                            let CatgryRowId = instance.getNewRowId();
                            let CatgryIndex = instance.getCategoryIndex(CategoryName);
                            if (CatgryIndex != -1) {
                                CatgryRowId = instance.getNewRowId();
                            }
                            instance.g_Categories.push({
                                CategoryName: CategoryName,
                                CatgryRowId: CatgryRowId
                            });
                        }
                    }
                    getCategoryDesign(CatgryRowId, CategoryName) {
                        let html = `<div class="card cart-cat-card" id="catergoryCard_` + CatgryRowId + `" data-catid="` + CatgryRowId + `">
                                <div class="card-header d-flex justify-content-between align-items-center pa-10" id="catCardHeader_` + CatgryRowId + `">
                                    <div class="cat-title-wrap">
                                        <span class="cat-title-span" id="catTitleSpan_` + CatgryRowId + `">` + CategoryName + `</span>
                                        <input type="text" value="` + CategoryName + `" class="cat-title-input form-control font-14 h-30p py-0 px-1 d-none" id="catTitleInput_` + CatgryRowId + `">
                                    </div>
                                    <div class="flex-shrink-0 ml-15">
                                        <a href="javascript:;" class="btn btn-icon btn-flush-biz-theme btn-rounded flush-soft-hover d-30" id="catTitleEditBtn_` + CatgryRowId + `" data-tooltip="true" title="Edit Category">
                                            <span class="btn-icon-wrap">
                                                <i class="fa fa-pencil font-16"></i>
                                            </span>
                                        </a>
                                        <a href="javascript:;" class="btn btn-icon btn-flush-biz-theme btn-rounded flush-soft-hover d-30 d-none" id="catTitleSaveBtn_` + CatgryRowId + `" data-tooltip="true" title="Save Category">
                                            <span class="btn-icon-wrap">
                                                <i class="fa fa-check font-16 text-success"></i>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="card-body pa-10" id="catergoryCardBody_` + CatgryRowId + `">
                                    <ul id="catItemsSortable_` + CatgryRowId + `" class="cartItemsSortable d-flex flex-column">
                                        <input type="hidden" id="hf_categoryrowid" value=` + CatgryRowId + `>
                                        <input type="hidden" id="hf_categoryname" value=` + CategoryName + `>
                                        <li class="alert alert-warning text-center border border-2 border-dotted flex-center h-10p my-10 order-1 drag-placeholder">Drag Items Here</li>
                                    </ul>
                                </div>
                            </div>`;
                        return html;
                    }
                    bindCategoryEvents(CatgryRowId, CategoryName) {
                        let key = CatgryRowId;
                        $('#addCategoryInput').val('');
                        $('#addedCategoriesList').removeClass('d-none');
                        let optionLength = $("#cartCategoriesSelect option[value='" + CatgryRowId + "']").length;
                        if (optionLength == 0) {
                            const newOption = new Option(CategoryName, CatgryRowId.toString(), false, false);
                            $('#cartCategoriesSelect').append(newOption);
                            $('#cartCategoriesSelect').val(null).trigger('change');
                        }
                        $('#categoriesSelectWrap,#ulOrder_Cart .cart-item-chk').removeClass('d-none');
                        const orderCartEl = $('#ulOrder_Cart');
                        orderCartEl.sortable();
                        orderCartEl.sortable('destroy');
                        orderCartEl.sortable({
                            connectWith: '.cartItemsSortable',
                            receive: function () {
                                orderCartEl.find('.drag-placeholder').remove();
                            },
                            remove: function () {
                                if (!orderCartEl.find('.cartitem:visible').length) {
                                    orderCartEl.append('<li class="alert alert-warning text-center border border-2 border-dotted flex-center mb-10 order-1 drag-placeholder h-10p mt-30">Drag Items Here</li>');
                                }
                                else {
                                    orderCartEl.find('.drag-placeholder').remove();
                                }
                            }
                        }).disableSelection();
                        $(`#catItemsSortable_` + key).sortable({
                            connectWith: ".cartItemsSortable",
                            items: '.cartitem',
                            cancel: ".drag-placeholder",
                            receive: function (event, ui) {
                                $(ui.item).find('.cart-item-chk').addClass('d-none');
                                $(ui.item).find('.cart-item-remove').removeClass('d-none').click(function () {
                                    $(this).addClass('d-none');
                                    $(ui.item).find('.cart-item-chk').removeClass('d-none');
                                    $(this).parents('.cartitem').detach().appendTo(orderCartEl);
                                });
                            },
                            remove: function (event, ui) {
                                $(ui.item).find('.cart-item-remove').addClass('d-none');
                                $(ui.item).find('.cart-item-chk').removeClass('d-none');
                            }
                        }).disableSelection();
                        $(`#catTitleEditBtn_` + key).click(function () {
                            $(`#catTitleEditBtn_` + key + `,#catTitleSpan_` + key).addClass('d-none');
                            $(`#catTitleInput_` + key + `,#catTitleSaveBtn_` + key).removeClass('d-none');
                            $(`#catTitleInput_` + key).trigger('focus');
                        });
                        $(`#catTitleSaveBtn_` + key).click(function () {
                            const inputVal = $(`#catTitleInput_` + key).val().toString();
                            $(`#catTitleInput_` + key + `,#catTitleSaveBtn_` + key).addClass('d-none');
                            $(`#catTitleEditBtn_` + key + `,#catTitleSpan_` + key).removeClass('d-none');
                            $(`#catTitleSpan_` + key).text(inputVal);
                            $(`#cartCategoriesSelect option[value="` + key + `"]`).remove();
                            const newCatObj = { id: key, text: inputVal };
                            const newOption = new Option(newCatObj.text, newCatObj.id.toString(), false, false);
                            $('#cartCategoriesSelect').append(newOption);
                            $('#cartCategoriesSelect').val(null).trigger('change');
                        });
                    }
                    bindElementToCategory(html, CategoryName) {
                        let instance = this;
                        let CatgryRowId = 0;
                        $('#cartCategoryAddBtn').addClass('d-none');
                        $('#categoryInputCard').removeClass('d-none');
                        let isCatgryExists = instance.isCategoryExists(CategoryName);
                        let CatgryIndex = instance.getCategoryIndex(CategoryName);
                        if (!isCatgryExists) {
                            instance.pushCategoryIfNotExists(CategoryName);
                            CatgryIndex = instance.getCategoryIndex(CategoryName);
                            CatgryRowId = instance.g_Categories[CatgryIndex].CatgryRowId;
                            let CatgryDesign = instance.getCategoryDesign(CatgryRowId, CategoryName);
                            $("#addedCategoriesList").append(CatgryDesign).removeClass("d-none");
                        }
                        if (CatgryIndex != -1) {
                            CatgryRowId = instance.g_Categories[CatgryIndex].CatgryRowId;
                            $("#catItemsSortable_" + CatgryRowId).append(html);
                            instance.bindCategoryEvents(CatgryRowId, CategoryName);
                            instance.hideUnUsedCategories();
                        }
                    }
                    hideUnUsedCategories() {
                        let instance = this;
                        $(".cartItemsSortable").each(function () {
                            let li_length = $(this).find(".cartitem").length;
                            if (li_length == 0) {
                                let CatgryRowId = $(this).find("#hf_categoryrowid").val();
                                $("#catergoryCard_" + CatgryRowId).remove();
                                let CatgryIndex = instance.g_Categories.findIndex(x => x.CatgryRowId == CatgryRowId);
                                if (CatgryIndex != -1) {
                                    instance.g_Categories.splice(CatgryIndex, 1);
                                    $("#cartCategoriesSelect option[value='" + CatgryRowId + "']").remove();
                                }
                            }
                        });
                    }
                    static Instance() {
                        if (this.instance === undefined) {
                            this.instance = new CartDetails();
                        }
                        return this.instance;
                    }
                }
                Controls.CartDetails = CartDetails;
            })(Controls = Transact.Controls || (Transact.Controls = {}));
        })(Transact = Apps.Transact || (Apps.Transact = {}));
    })(Apps = Bizgaze.Apps || (Bizgaze.Apps = {}));
})(Bizgaze || (Bizgaze = {}));