lubelog/Views/Vehicle/_SupplyUsage.cshtml

@using CarCareTracker.Helper
@inject IConfigHelper config
@inject ITranslationHelper translator
@{
    var userConfig = config.GetUserConfig(User);
    var userLanguage = userConfig.UserLanguage;
}
@model List<SupplyRecord>
<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.Any())
    {
        <div class="row">
            <div class="col-12" style="max-height:50vh; overflow-y:auto;">
                <div class="alert alert-warning" role="alert">
                    @translator.Translate(userLanguage,"Supplies are requisitioned immediately after the record is created and cannot be modified. If you have incorrectly entered the amount you needed you will need to correct it in the Supplies tab.")
                </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-2">@translator.Translate(userLanguage,"Quantity")</th>
                            <th scope="col" class="col-2">@translator.Translate(userLanguage, "In Stock")</th>
                            <th scope="col" class="col-5">@translator.Translate(userLanguage, "Description")</th>
                            <th scope="col" class="col-2">@translator.Translate(userLanguage, "Unit Cost")</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (SupplyRecord supplyRecord in Model)
                        {
                            <tr class="d-flex" id="supplyRows">
                                <td class="col-1"><input class="form-check-input" type="checkbox" onchange="toggleQuantityFieldDisabled(this)" value="@supplyRecord.Id"></td>
                                <td class="col-2"><input type="text" disabled onchange="recalculateTotal()" class="form-control"></td>
                                <td class="col-2 supplyquantity">@supplyRecord.Quantity</td>
                                <td class="col-5">@supplyRecord.Description</td>
                                <td class="col-2 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>
    <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('.col-2 > input[type=text]')[0];
        return $(textField);
    }
    function getInStockFieldFromCheckBox(elem) {
        var textField = $(elem.parentElement.parentElement).find('.col-2.supplyquantity')[0];
        return $(textField);
    }
    function getPriceFieldFromCheckBox(elem) {
        var textField = $(elem.parentElement.parentElement).find('.col-2.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) {
                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 || totalSum == 0));
        if (!hasError) {
            return {
                totalSum: totalSum,
                selectedSupplies: selectedSupplies.toArray()
            };
        } else {
            return {
                totalSum: 0,
                selectedSupplies: []
            }
        }
    }
</script>