Subversion Repositories SmartDukaan

<style>
    .select2-container .select2-selection--single {
        box-sizing: border-box;
        cursor: pointer;
        display: block;
        height: 35px;
        padding: 3px;
        user-select: none;
        -webkit-user-select: none;
    }

    .modal-body {
        overflow-y: auto;
        max-height: calc(100vh - 200px);
    }
</style>
<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header"><i class="icon_document_alt"></i>Super Catalog</h3>
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Dashboard</a></li>
                <li><i class="icon_document_alt"></i>Super Catalog</li>
                <li class="pull-right">
                    <button class="btn btn-primary map-catalog" type="button" data-toggle="modal" data-target="#manageSuperCatalogModal">
                        <i class="icon_document_alt"></i>Create New</button>
                </li>
            </ol>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-bordered" id="super-catalog">
            <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
                #if($allSuperCatalogs.size() > 0)
                    #foreach($superCatalog in $allSuperCatalogs)
                    <tr data-id="$superCatalog.getId()" data-catalog_name="$superCatalog.getSuperCatalogName()" data-brand_name="$superCatalog.getBrandId()">
                        <td>$superCatalog.getId()</td>
                        <td>$superCatalog.getSuperCatalogName()</td>
                        <td data-id="$superCatalog.getId()">
                            <button class="btn btn-primary view-super-catalog"><i class="fa fa-eye" title="View"></i></button>
                            <button class="btn btn-danger delete-super-catalog-mapping"><i class="fa fa-trash" title="Delete"></i></button>
                        </td>
                    </tr>
                    #end
                #else
                    <tr>
                        <td colspan="7">No super catalogs mapping available.</td>
                    </tr>
                #end
            </tbody>
        </table>
    </div>
</section>

<div id="manageSuperCatalogModal" class="modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Manage super catalog</h4>
            </div>
            <div class="modal-body" id="manageSuperCatalogModalBody">
                <div class="form-group">
                    <label for="brand_id">Select brand</label>
                    <select id="brand_id" class="form-control">
                        <option value="">-- Select --</option>
                        #foreach($brand in $brands)
                            <option value="$brand.getId()">$brand.getName()</option>
                        #end
                    </select>
                </div>
                <div class="form-group">
                    <label for="super_catalog_name">Super catalog name</label>
                    <select id="super_catalog_name" class="form-control selectOrCreate">
                    #foreach($row in $allSuperCatalogs)
                        <option value="$row.getId()">$row.getSuperCatalogName()</option>
                    #end
                    </select>
                </div>
                <table class="table" id="catalogMappingTable">
                    <thead>
                        <tr>
                            <th>Catalog</th>
                            <th>Variant</th>
                            <th><button class="btn btn-primary addNew"><i class="fa fa-plus"></i></button></th>
                        </tr>
                    </thead>
                    <tbody id="catalogMapping">
                        <tr>
                            <td>
                                <div class="form-group">
                                    <select id="catalog_id" class="form-control">
                                        <option value="" readonly selected>-- Select Catalog --</option>
                                        #foreach($row in $catalogs)
                                            <option value="$row.getId()">$row.getDescription()</option>
                                        #end
                                    </select>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input id="variant_name" class="form-control" placeholder="Variant name">
                                    <input id="mapping_id" type="hidden" value="0">
                                </div>
                            </td>
                            <td>
                                <button class="btn btn-primary removeExisting"><i class="fa fa-minus"></i></button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary save_super_model">Save</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    $(document).ready(function (){

        const freshTr = `<tr>
                            <td>
                                <div class="form-group">
                                    <select id="catalog_id" class="form-control">
                                        <option value="" readonly selected>-- Select Catalog --</option>
                                        #foreach($row in $catalogs)
                                            <option value="$row.getId()">$row.getDescription()</option>
                                        #end
                                    </select>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input id="variant_name" class="form-control" placeholder="Variant name">
                                    <input id="mapping_id" type="hidden" value="0">
                                </div>
                            </td>
                            <td>
                                <button class="btn btn-primary removeExisting"><i class="fa fa-minus"></i></button>
                            </td>
                        </tr>`;

        $('#catalog_id, #brand_id').multiselect({
            includeSelectAllOption: false,
            multiple:false,
            maxHeight: 200,
            buttonWidth: '100%',
            numberDisplayed: 1,
            nonSelectedText: '-- Select One --',
            nSelectedText: ' - Selected',
            enableFiltering: true,
            enableCaseInsensitiveFiltering : true
        });

        $('#manageSuperCatalogModal').on('hidden.bs.modal', function () {
            $('#mapping_id').val(0);
            $('#variant_name').val('');
            $('#brand_id').val('').trigger('change');
            $('#catalog_id').val('').trigger('change');
            $('#super_catalog_name').val('').trigger('change');
        });

        $('#manageSuperCatalogModal').on('click', '.addNew',function () {
            $('#catalogMapping').append(freshTr);
            const lastTr = $('#catalogMapping tr:last');
            lastTr.find('#catalog_id').multiselect({
                includeSelectAllOption: false,
                multiple:false,
                maxHeight: 200,
                buttonWidth: '100%',
                numberDisplayed: 1,
                nonSelectedText: '-- Select One --',
                nSelectedText: ' - Selected',
                enableFiltering: true,
                enableCaseInsensitiveFiltering : true
            });
        });

        $('#manageSuperCatalogModal').on('click', '.removeExisting',function () {
            if (confirm("Are you sure you want to remove this")) {
                const tr = $(this).closest('tr');
                const mappingId = tr.data('mapping-id');
                if (mappingId > 0) {
                    doDeleteAjaxRequestHandler(context + "/super-catalog/mapping/" + mappingId, function (response) {
                        if (response == "true") {
                            tr.remove();
                        } else {
                            alert("Something went wrong while deleting the variant");
                        }
                    })
                } else {
                    tr.remove();
                }
            }
        });

        $('.selectOrCreate').select2({
            placeholder: "Select or add new",
            tags: true,
            createTag: function(params) {
                return {
                    id: params.term,
                    text: params.term,
                    newOption: true
                };
            },
            templateResult: function(data) {
                return data.newOption ? $('<span class="new-option">Add: ' + data.text + '</span>') : data.text;
            },
        });

        $('#super-catalog').on('click', '.view-super-catalog', function (ev) {
            ev.preventDefault();
            let superCatalogId = $(this).parent().parent('tr').data('id'),
                brand = $(this).parent().parent('tr').data('brand_name');

            doGetAjaxRequestHandler(context + "/super-catalog/"+superCatalogId,(response) => {
                $('#manageSuperCatalogModalBody').empty();
                $('#manageSuperCatalogModalBody').html(response);
                $('#manageSuperCatalogModal').modal('show');
                $('#catalog_id, #brand_id').multiselect({
                    includeSelectAllOption: false,
                    multiple:false,
                    maxHeight: 200,
                    buttonWidth: '100%',
                    numberDisplayed: 1,
                    nonSelectedText: '-- Select One --',
                    nSelectedText: ' - Selected',
                    allSelectedText: 'All Selected',
                    enableFiltering: true,
                    enableCaseInsensitiveFiltering : true
                });
            });
        });

        $('#super-catalog').DataTable();

    });

</script>