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 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>
                <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>