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>Categories</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>Categories</li>
                <li class="pull-right">
                    <button class="btn btn-primary map-catalog" type="button" onclick="resetForm('form')" data-toggle="modal" data-target="#manageCategory">
                        <i class="icon_document_alt"></i>Create New</button>
                </li>
            </ol>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-bordered" id="categories">
            <thead>
            <tr>
                <th>#</th>
                <th>Image</th>
                <th>Parent Category</th>
                <th>Label</th>
                <th>Display Name</th>
                <th>Featured</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
                #if($allCategories.size() > 0)
                    #foreach($category in $allCategories)
                    <tr data-id="$category.getId()" data-category_name="$category.getDisplayName()">
                        <td>$category.getId()</td>
                        <td>
                            #if($category.getImageId() > 0)
                                <img src="$imgURL$category.getImageId()" alt="IMG" width="50">
                            #else
                                <img src="https://placehold.co/50" alt="IMG">
                            #end
                        </td>
                        <td>
                            #if($category.getParentCategoryId() > 0)
                                $allCategories.get($math.toInteger($category.getParentCategoryId())).getLabel()
                            #end
                        </td>
                        <td>$category.getLabel()</td>
                        <td>
                            #if($category.getDisplayName())
                                $category.getDisplayName()
                            #end
                        </td>
                        <td>
                            #if($category.isFeatured())
                                Yes
                            #else
                                No
                            #end
                        </td>
                        <td data-id="$category.getId()">
                            <button class="btn btn-primary view-category"><i class="fa fa-eye" title="View"></i></button>
                            <button class="btn btn-danger delete-category"><i class="fa fa-trash" title="Delete"></i></button>
                        </td>
                    </tr>
                    #end
                #else
                <tr>
                    <td colspan="7">No category available.</td>
                </tr>
                #end
            </tbody>
        </table>
    </div>
</section>

<div id="manageCategory" 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 category</h4>
            </div>
            <div class="modal-body" id="manageCategoryBody">
                <form action="#">
                    <div class="col-md-4"></div>
                    <div class="col-md-4"><img src="" alt="" id="imgPreview" width="100%"></div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="parent_id">Select Parent Category</label>
                                <select id="parent_id" class="form-control">
                                    <option value="">-- Select --</option>
                                    #foreach($cat in $allCategories)
                                        <option value="$cat.getId()">$cat.getLabel()</option>
                                    #end
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="imageId">Select Image</label>
                                <input type="file" accept="image/*" id="real-file" style="display: none;">
                                <input type="hidden" id="imageId">
                                <button type="button" class="btn btn-success btn-group-justified" id="add-media">Choose file</button>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="label">Category Label</label>
                                <input id="label" class="form-control" placeholder="Category Label">
                                <input id="category_id" type="hidden">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="display_name">Display Name</label>
                                <input id="display_name" class="form-control" placeholder="Display Name">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                    <label for="description">Description</label>
                    <input id="description" class="form-control" placeholder="Description">
                </div>
                </form>
            </div>
            <div class="modal-footer">
                <span class="pull-left">
                    <input type="checkbox" id="featured"> Featured
                </span>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary save_category">Save</button>
            </div>
        </div>
    </div>
</div>

<script>
    $('.map-catalog').click(function () {
        $('#manageCategory').on('show.bs.modal', function () {
            console.log("shown bs model")
            $('tbody#catalogMapping').empty();
        });
    });
    $(function() {
        const realFileInput = $("#real-file");
        const addMedia = $("#add-media");
        const fileNameDisplay = $("#file-name");
        addMedia.click(function(){
            realFileInput.click();
        });

        realFileInput.change(function(event) {
            const files = event.target.files;
            console.log("change triggered", files);
            if (files.length > 0) {
                var output = document.getElementById('imgPreview');
                output.src = URL.createObjectURL(event.target.files[0]);
                output.onload = function() {
                    URL.revokeObjectURL(output.src)
                }
                fileNameDisplay.text(files[0].name);
                uploadDocument(files[0], function (documentId) {
                    $('#imageId').val(documentId);
                });
            } else {
                fileNameDisplay.text("No file chosen");
            }
        });
    });
</script>