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);
        min-height: 41vh;
    }
</style>
<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header"><i class="icon_document_alt"></i>Bids</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>Bids</li>
                <li class="pull-right">
                    <button class="btn btn-success map-catalog" type="button" data-toggle="modal" data-target="#publishLiquidationModal">
                        <i class="icon_document_alt"></i> Publish</button>
                </li>
                <li class="pull-right">
                    <button class="btn btn-primary map-catalog" type="button" data-toggle="modal" data-target="#manageLiquidationModal">
                    <i class="icon_document_alt"></i> Create New</button>
                </li>
            </ol>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-bordered" id="liquidation-table">
            <thead class="table-light">
            <tr>
                <th>#</th>
                <th>Catalog</th>
                <th>Start Price</th>
                <th>No of Bids</th>
                <th>Start - End</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
                #foreach($item in $liquidations)
                    <tr>
                        <td>$item.getId()</td>
                        <td>$saholicStockMap.get($item.catalogId).get(0).getBrand() $saholicStockMap.get($item.catalogId).get(0).getModelNumber()</td>
                        <td>$item.price</td>
                        <td>#if($bidsMap.get($item.getId()).size() > 0)
                            <a role="button" onclick="viewBids($item.getId(), `$saholicStockMap.get($item.catalogId).get(0).getBrand() $saholicStockMap.get($item.catalogId).get(0).getModelNumber()`)">
                                $bidsMap.get($item.getId()).size()
                            </a>
                            #else 0 #end
                        </td>
                        <td>$item.startDate.format($dateTimeFormatter) - $item.endDate.format($dateTimeFormatter)</td>
                        <td>$item.status</td>
                        <td>
                            <a role="button" onclick="editLiquidation($item.id)" class="btn btn-sm btn-info"><i class="fa fa-eye"></i> View</a>
                            #*<a role="button" onclick="deleteLiquidation($item.id)" class="btn btn-sm btn-danger">Delete</a>*#
                        </td>
                    </tr>
                #end
            </tbody>
        </table>
    </div>
</section>

<div id="manageLiquidationModal" 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 Bid</h4>
            </div>
            <div class="modal-body" id="manageLiquidationModalBody">
                <form id="biddingForm" action="$formActionUrl" method="post" class="row g-3 mb-4">
                    <input type="hidden" name="id" id="id">
                    <input type="hidden" name="quantity" id="quantity">

                    <div class="col-md-7">
                        <div class="form-group">
                            <label class="form-label" for="catalogId">Catalog <span class="text-danger">*</span></label>
                            <span class="pull-right"><input name="restricted" value="true" id="restricted" type="checkbox"> Restricted?</span>
                            <select name="catalogId" id="catalogId" class="form-select catalogId" required>
                                <option value="">Select</option>
                                #foreach($entry in $catalogs)
                                    <option value="$entry.catalogId" data-qty="$entry.shaholicNetAvailability">$entry.brand $entry.modelNumber ($entry.shaholicNetAvailability)</option>
                                #end
                            </select>
                        </div>
                    </div>

                    <div class="col-md-5">
                        <div class="form-group">
                            <label for="price" class="form-label">Bidding Price <span class="text-danger">*</span></label>
                            <input type="number" name="price" id="price" class="form-control" required>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="incrementStep" class="form-label">Increment Step <span class="text-danger">*</span></label>
                            <input type="number" name="incrementStep" id="incrementStep" class="form-control" required value="10">
                        </div>
                    </div>
                    <div class="col-md-7">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="startDate" class="form-label">Start Date <span class="text-danger">*</span></label>
                                    <input type="datetime-local" name="startDate" id="startDate" class="form-control" required>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="endDate" class="form-label">End Date <span class="text-danger">*</span></label>
                                    <input type="datetime-local" name="endDate" id="endDate" class="form-control" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                            <select name="status" id="status" class="form-select">
                                <option value="ACTIVE">Active</option>
                                <option value="INACTIVE">Inactive</option>
                                <option value="CLOSED">Closed</option>
                            </select>
                        </div>
                    </div>
                    <input type="file" id="real-file" style="display: none;">
                    <input type="hidden" name="mediaId" id="mediaId" value="0">
                </form>
            </div>
            <div class="modal-footer">
                <div class="row">
                    <div class="col-md-6">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary save-liquidation">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="publishLiquidationModal" class="modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content modal-lg">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Publish Bids</h4>
            </div>
            <div class="modal-body" id="manageLiquidationModalBody">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-3"></div>
                        <div class="col-md-6 text-center">
                            <input type="file" accept="image/*" id="real-file" style="display: none;">
                            <input type="hidden" id="mediaId">
                            <button class="btn btn-success" id="add-media">Choose file</button>
                            <br>
                            <span id="file-name"></span>
                            <img src="" alt="" id="imgPreview" width="100%">
                        </div>
                    </div>
                </div>
                <table class="table table-bordered" id="liquidation-table">
                        <thead class="table-light">
                            <tr>
                                <th></th>
                                <th>Catalog</th>
                                <th>Start Price</th>
                                <th>Start - End</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            #foreach($item in $liquidations)
                                #if($item.status == "ACTIVE")
                                    <tr>
                                        <td><input type="checkbox" class="selectLiquidations" value="$item.getId()"></td>
                                        <td>$saholicStockMap.get($item.catalogId).get(0).getBrand() $saholicStockMap.get($item.catalogId).get(0).getModelNumber()</td>
                                        <td>$item.price</td>
                                        <td>$item.startDate.format($dateTimeFormatter) - $item.endDate.format($dateTimeFormatter)</td>
                                        <td>$item.status</td>
                                    </tr>
                                #end
                            #end
                        </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 publish-liquidation">Publish</button>
            </div>
        </div>
    </div>
</div>

<div id="biddingListModal" class="modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content modal-lg">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"><span id="catalogName"></span></h4>
            </div>
            <div class="modal-body" id="bidListModalBody">
                <table class="table table-bordered" id="bids-table">
                    <thead class="table-light">
                        <tr>
                            <th></th>
                            <th>Retailer</th>
                            <th>Bid Quantity</th>
                            <th>Bid Price</th>
                            <th>Bid Time</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody id="bidsList"></tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(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) {
                    $('#mediaId').val(documentId);
                });
            } else {
                fileNameDisplay.text("No file chosen");
            }
        });
    });

    function viewBids(liquidationId, catalogName){
        const bidsMap = $!bidsMapJson;
        const retailerMap = $!retailersJson;
        let html = '';
        console.log("bidsMap[liquidationId]",bidsMap[liquidationId])
        if (bidsMap.hasOwnProperty(liquidationId) && bidsMap[liquidationId].length) {
            bidsMap[liquidationId].forEach((bid, index) => {
                html += `<tr>
                <td>${(index+1)}</td>
                <td>${(retailerMap[bid.fofoId].displayName)}</td>
                <td>${bid.quantity}</td>
                <td>${(bid.biddingAmount.toLocaleString())}</td>
                <td>${(bid.createdAt.split('T')).join(" ")}</td>
                <td>${bid.status}</td>
            </tr>`;
            });
            $('#catalogName').text(catalogName);
            $('#bidsList').html(html);
            $('#biddingListModal').modal('show');
        } else {
            alert(`No Bids found for ${catalogName}`);
        }
    }
</script>