lubelog/Views/Vehicle/_SupplyUsage.cshtml

@using CarCareTracker.Helper
@inject IConfigHelper config
@inject ITranslationHelper translator
@{
    var userConfig = config.GetUserConfig(User);
    var userLanguage = userConfig.UserLanguage;
    var recordTags = Model.Supplies.SelectMany(x => x.Tags).Distinct();
}
@model SupplyUsageViewModel
<div class="modal-header">
    <h5 class="modal-title">@translator.Translate(userLanguage,"Select Supplies")</h5>
    <button type="button" class="btn-close" onclick="hideSuppliesModal()" aria-label="Close"></button>
</div>
<div class="modal-body">
    @if (Model.Supplies.Any())
    {
        <div class="row">
            <div class="col-12" style="max-height:50vh; overflow-y:auto;" id="supplies-table">
                <div class="alert alert-warning" role="alert">
                    @translator.Translate(userLanguage,"Supplies are requisitioned immediately after the record is saved.")
                </div>
                <div class="d-flex align-items-center flex-wrap">
                    @foreach (string recordTag in recordTags)
                    {
                        <span onclick="filterTable('supplies-table', this)" class="user-select-none ms-2 rounded-pill badge bg-secondary tagfilter" style="cursor:pointer;">@recordTag</span>
                    }
                </div>
                <table class="table table-hover">
                    <thead class="sticky-top">
                        <tr class="d-flex">
                            <th scope="col" class="col-1"></th>
                            <th scope="col" class="col-3 col-sm-2 text-truncate flex-grow">@translator.Translate(userLanguage,"Quantity")</th>
                            <th scope="col" class="col-1 col-sm-2 text-truncate flex-shrink">@translator.Translate(userLanguage, "In Stock")</th>
                            <th scope="col" class="col-2 text-truncate flex-shrink">@translator.Translate(userLanguage, "Part Number")</th>
                            <th scope="col" class="col-3 text-truncate flex-shrink">@translator.Translate(userLanguage, "Description")</th>
                            <th scope="col" class="col-2 text-truncate flex-shrink">@translator.Translate(userLanguage, "Unit Cost")</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (SupplyRecord supplyRecord in Model.Supplies)
                        {
                            var supplyUsage = Model.Usage.Where(x => x.SupplyId == supplyRecord.Id).SingleOrDefault();
                            <tr class="d-flex" id="supplyRows" data-tags='@string.Join(" ", supplyRecord.Tags)'>
                                <td class="col-1"><input class="form-check-input" type="checkbox" onchange="toggleQuantityFieldDisabled(this)" value="@supplyRecord.Id" @(supplyUsage == default ? "" : "checked")></td>
                                <td class="col-3 col-sm-2 flex-grow text-truncate supplyquantityinput"><input type="text" inputmode="decimal" onkeydown="interceptDecimalKeys(event)" onkeyup="fixDecimalInput(this, 2)" @(supplyUsage == default ? "disabled" : "") value="@(supplyUsage == default ? "" : supplyUsage.Quantity)" onchange="recalculateTotal()" class="form-control"></td>
                                <td class="col-1 col-sm-2 flex-shrink text-truncate supplyquantity">@supplyRecord.Quantity</td>
                                <td class="col-2 flex-shrink text-truncate">@StaticHelper.TruncateStrings(supplyRecord.PartNumber)</td>
                                <td class="col-3 flex-shrink text-truncate">@StaticHelper.TruncateStrings(supplyRecord.Description)</td>
                                <td class="col-2 flex-shrink text-truncate supplyprice">@((supplyRecord.Quantity > 0 ? supplyRecord.Cost / supplyRecord.Quantity : 0).ToString("F"))</td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    }
    else
    {
        <div class="row">
            <div class="col-12">
                <div class="text-center">
                    <h4>@translator.Translate(userLanguage, "No supplies with quantities greater than 0 is found.")</h4>
                </div>
            </div>
        </div>
    }
</div>
<div class="modal-footer">
    <span id="supplySumLabel" style="margin-right:auto;">Total: 0.00</span>
    <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch" id="inputCopySuppliesAttachments">
        <label class="form-check-label" for="inputCopySuppliesAttachments">@translator.Translate(userLanguage, "Copy Attachments")</label>
    </div>
    <button type="button" class="btn btn-secondary" onclick="hideSuppliesModal()">@translator.Translate(userLanguage, "Cancel")</button>
    <button type="button" class="btn btn-primary" disabled id="selectSuppliesButton" onclick="selectSupplies()">@translator.Translate(userLanguage, "Select")</button>
</div>
<script>
    function recalculateTotal() {
        setDebounce(getSuppliesAndQuantity);
    }
    function toggleQuantityFieldDisabled(e) {
        var textField = getTextFieldFromCheckBox(e);
        var isChecked = $(e).is(":checked");
        textField.attr('disabled', !isChecked);
        if (!isChecked) {
            textField.removeClass("is-invalid");
        }
        recalculateTotal();
    }
    function getTextFieldFromCheckBox(elem) {
        var textField = $(elem.parentElement.parentElement).find('.supplyquantityinput input[type=text]')[0];
        return $(textField);
    }
    function getInStockFieldFromCheckBox(elem) {
        var textField = $(elem.parentElement.parentElement).find('.supplyquantity')[0];
        return $(textField);
    }
    function getPriceFieldFromCheckBox(elem) {
        var textField = $(elem.parentElement.parentElement).find('.supplyprice')[0];
        return $(textField);
    }
    function getSuppliesAndQuantity() {
        var totalSum = 0;
        var hasError = false;
        var selectedSupplies = $("#supplyRows :checked").map(function () {
            var textField = getTextFieldFromCheckBox(this);
            var inStock = getInStockFieldFromCheckBox(this);
            var priceField = getPriceFieldFromCheckBox(this);
            var requestedQuantity = globalParseFloat(textField.val());
            var inStockQuantity = globalParseFloat(inStock.text());
            var unitPrice = globalParseFloat(priceField.text());
            //validation
            if (isNaN(requestedQuantity) || requestedQuantity > inStockQuantity || requestedQuantity <= 0) {
                textField.addClass("is-invalid");
                hasError = true;
            } else {
                textField.removeClass("is-invalid");
            }
            //calculate sum.
            var sum = requestedQuantity * unitPrice;
            totalSum += sum;
            return {
                supplyId: this.value,
                quantity: textField.val()
            };
        });
        if (isNaN(totalSum) || hasError) {
            $("#supplySumLabel").text(`Total: 0.00`);
        } else {
            totalSum = totalSum.toFixed(2);
            var parsedFloat = globalFloatToString(totalSum);
            $("#supplySumLabel").text(`Total: ${parsedFloat}`);
        }
        $("#selectSuppliesButton").attr('disabled', (hasError || selectedSupplies.toArray().length == 0));
        if (!hasError) {
            return {
                totalSum: globalFloatToString(totalSum),
                selectedSupplies: selectedSupplies.toArray()
            };
        } else {
            return {
                totalSum: 0,
                selectedSupplies: []
            }
        }
    }
</script>