Merge pull request #198 from hargata/Hargata/tags

Hargata/tags
2024-01-31 09:14:55 -07:00
parent af5d72e0d0 d8f53e4b65
commit 28615d9038
25 changed files with 839 additions and 33 deletions
--- a/Controllers/VehicleController.cs
+++ b/Controllers/VehicleController.cs
@@ -667,7 +667,8 @@ namespace CarCareTracker.Controllers
                Mileage = result.Mileage,
                Notes = result.Notes,
                VehicleId = result.VehicleId,
-                Files = result.Files
+                Files = result.Files,
+                Tags = result.Tags
            };
            return PartialView("_ServiceRecordModal", convertedResult);
        }
@@ -736,7 +737,8 @@ namespace CarCareTracker.Controllers
                Mileage = result.Mileage,
                Notes = result.Notes,
                VehicleId = result.VehicleId,
-                Files = result.Files
+                Files = result.Files,
+                Tags = result.Tags
            };
            return PartialView("_CollisionRecordModal", convertedResult);
        }
@@ -1379,7 +1381,8 @@ namespace CarCareTracker.Controllers
                Mileage = result.Mileage,
                Notes = result.Notes,
                VehicleId = result.VehicleId,
-                Files = result.Files
+                Files = result.Files,
+                Tags = result.Tags
            };
            return PartialView("_UpgradeRecordModal", convertedResult);
        }
--- a/Models/Collision/CollisionRecordInput.cs
+++ b/Models/Collision/CollisionRecordInput.cs
@@ -11,6 +11,7 @@
        public string Notes { get; set; }
        public List<UploadedFiles> Files { get; set; } = new List<UploadedFiles>();
        public List<SupplyUsage> Supplies { get; set; } = new List<SupplyUsage>();
-        public CollisionRecord ToCollisionRecord() { return new CollisionRecord { Id = Id, VehicleId = VehicleId, Date = DateTime.Parse(Date), Cost = Cost, Mileage = Mileage, Description = Description, Notes = Notes, Files = Files }; }
+        public List<string> Tags { get; set; } = new List<string>();
+        public CollisionRecord ToCollisionRecord() { return new CollisionRecord { Id = Id, VehicleId = VehicleId, Date = DateTime.Parse(Date), Cost = Cost, Mileage = Mileage, Description = Description, Notes = Notes, Files = Files, Tags = Tags }; }
    }
 }
--- a/Models/GenericRecord.cs
+++ b/Models/GenericRecord.cs
@@ -10,5 +10,6 @@
        public decimal Cost { get; set; }
        public string Notes { get; set; }
        public List<UploadedFiles> Files { get; set; } = new List<UploadedFiles>();
+        public List<string> Tags { get; set;} = new List<string>();
    }
 }
--- a/Models/ServiceRecord/ServiceRecordInput.cs
+++ b/Models/ServiceRecord/ServiceRecordInput.cs
@@ -11,6 +11,7 @@
        public string Notes { get; set; }
        public List<UploadedFiles> Files { get; set; } = new List<UploadedFiles>();
        public List<SupplyUsage> Supplies { get; set; } = new List<SupplyUsage>();
-        public ServiceRecord ToServiceRecord() { return new ServiceRecord { Id = Id, VehicleId = VehicleId, Date = DateTime.Parse(Date), Cost = Cost, Mileage = Mileage, Description = Description, Notes = Notes, Files = Files }; }
+        public List<string> Tags { get; set; } = new List<string>();
+        public ServiceRecord ToServiceRecord() { return new ServiceRecord { Id = Id, VehicleId = VehicleId, Date = DateTime.Parse(Date), Cost = Cost, Mileage = Mileage, Description = Description, Notes = Notes, Files = Files, Tags = Tags }; }
    }
 }
--- a/Models/UpgradeRecord/UpgradeReportInput.cs
+++ b/Models/UpgradeRecord/UpgradeReportInput.cs
@@ -11,6 +11,7 @@
        public string Notes { get; set; }
        public List<UploadedFiles> Files { get; set; } = new List<UploadedFiles>();
        public List<SupplyUsage> Supplies { get; set; } = new List<SupplyUsage>();
-        public UpgradeRecord ToUpgradeRecord() { return new UpgradeRecord { Id = Id, VehicleId = VehicleId, Date = DateTime.Parse(Date), Cost = Cost, Mileage = Mileage, Description = Description, Notes = Notes, Files = Files }; }
+        public List<string> Tags { get; set; } = new List<string>();
+        public UpgradeRecord ToUpgradeRecord() { return new UpgradeRecord { Id = Id, VehicleId = VehicleId, Date = DateTime.Parse(Date), Cost = Cost, Mileage = Mileage, Description = Description, Notes = Notes, Files = Files, Tags = Tags }; }
    }
 }
--- a/Models/Vehicle.cs
+++ b/Models/Vehicle.cs
@@ -10,5 +10,6 @@
        public string LicensePlate { get; set; }
        public bool IsElectric { get; set; } = false;
        public bool UseHours { get; set; } = false;
+        public List<string> Tags { get; set; } = new List<string>();
    }
 }
--- a/Views/Home/Index.cshtml
+++ b/Views/Home/Index.cshtml
@@ -70,9 +70,8 @@
    </ul>
    <div class="tab-content" id="homeTab">
        <div class="tab-pane fade @(Model == "garage" ? "show active" : "")" id="garage-tab-pane" role="tabpanel" tabindex="0">
-            <div class="row">
-                <div id="garageContainer" class="row gy-3 align-items-stretch">
-                </div>
+            <div id="garageContainer">
+
            </div>
        </div>
        <div class="tab-pane fade @(Model == "settings" ? "show active" : "")" id="settings-tab-pane" role="tabpanel" tabindex="0">
--- a/Views/Home/_GarageDisplay.cshtml
+++ b/Views/Home/_GarageDisplay.cshtml
@@ -1,24 +1,38 @@
@model List<Vehicle>
-
-@if (Model.Any())
+@{
+    var recordTags = Model.SelectMany(x => x.Tags).Distinct();
+}
+@if (recordTags.Any())
 {
-    foreach (Vehicle vehicle in Model)
-    {
-        <div class="col-xl-2 col-lg-4 col-md-4 col-sm-4 col-4 user-select-none" id="gridVehicle_@vehicle.Id" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom" data-bs-trigger="manual" onmouseenter="loadPinnedNotes(@vehicle.Id)" ontouchstart="loadPinnedNotes(@vehicle.Id)" ontouchcancel="hidePinnedNotes(@vehicle.Id)" ontouchend="hidePinnedNotes(@vehicle.Id)" onmouseleave="hidePinnedNotes(@vehicle.Id)">
-            <div class="card" onclick="viewVehicle(@vehicle.Id)">
-                <img src="@vehicle.ImageLocation" style="height:145px; object-fit:scale-down;" />
-                <div class="card-body">
-                    <h5 class="card-title text-truncate">@($"{vehicle.Year}")</h5>
-                    <h5 class="card-title text-truncate">@($"{vehicle.Make}")</h5>
-                    <h5 class="card-title text-truncate">@($"{vehicle.Model}")</h5>
-                    <p class="card-text text-truncate">@vehicle.LicensePlate</p>
+    <div class='row'>
+        <div class="d-flex align-items-center flex-wrap mt-4">
+            @foreach (string recordTag in recordTags)
+            {
+                <span onclick="filterGarage(this)" class="user-select-none ms-2 rounded-pill badge bg-secondary tagfilter" style="cursor:pointer;">@recordTag</span>
+            }
+        </div>
+    </div>
+}
+<div class="row">
+    <div class="row gy-3 align-items-stretch">
+        @foreach (Vehicle vehicle in Model)
+        {
+            <div class="col-xl-2 col-lg-4 col-md-4 col-sm-4 col-4 user-select-none garage-item" data-tags='@string.Join(" ", vehicle.Tags)' id="gridVehicle_@vehicle.Id" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom" data-bs-trigger="manual" onmouseenter="loadPinnedNotes(@vehicle.Id)" ontouchstart="loadPinnedNotes(@vehicle.Id)" ontouchcancel="hidePinnedNotes(@vehicle.Id)" ontouchend="hidePinnedNotes(@vehicle.Id)" onmouseleave="hidePinnedNotes(@vehicle.Id)">
+                <div class="card" onclick="viewVehicle(@vehicle.Id)">
+                    <img src="@vehicle.ImageLocation" style="height:145px; object-fit:scale-down;" />
+                    <div class="card-body">
+                        <h5 class="card-title text-truncate">@($"{vehicle.Year}")</h5>
+                        <h5 class="card-title text-truncate">@($"{vehicle.Make}")</h5>
+                        <h5 class="card-title text-truncate">@($"{vehicle.Model}")</h5>
+                        <p class="card-text text-truncate">@vehicle.LicensePlate</p>
+                    </div>
                </div>
            </div>
+        }
+        <div class="col-xl-2 col-lg-4 col-md-4 col-sm-4 col-4">
+            <div class="card" onclick="showAddVehicleModal()" style="height:100%;">
+                <img src="/defaults/addnew_vehicle.png" style="object-fit:scale-down;height:100%;" />
+            </div>
        </div>
-    }
-}
-<div class="col-xl-2 col-lg-4 col-md-4 col-sm-4 col-4">
-    <div class="card" onclick="showAddVehicleModal()" style="height:100%;">
-        <img src="/defaults/addnew_vehicle.png" style="object-fit:scale-down;height:100%;" />
    </div>
-</div>
+</div>
--- a/Views/Shared/_Layout.cshtml
+++ b/Views/Shared/_Layout.cshtml
@@ -29,6 +29,7 @@
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap-icons.css" />
    <link rel="stylesheet" href="~/lib/bootstrap-datepicker/css/bootstrap-datepicker.min.css" />
+    <link rel="stylesheet" href="~/lib/bootstrap-tagsinput/bootstrap-tagsinput.css" />
    <link rel="stylesheet" href="~/css/site.css"/>
    <link rel="stylesheet" href="~/css/loader.css"/>
    <link rel="stylesheet" href="~/sweetalert/sweetalert2.min.css"/>
@@ -42,6 +43,7 @@
    <script src="~/js/shared.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/lib/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
+    <script src="~/lib/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
    <script src="~/sweetalert/sweetalert2.all.min.js"></script>
    <script src="~/js/loader.js"></script>
    <script>
--- a/Views/Vehicle/_CollisionRecordModal.cshtml
+++ b/Views/Vehicle/_CollisionRecordModal.cshtml
@@ -27,6 +27,13 @@
                    {
                        @await Html.PartialAsync("_SupplyStore", "RepairRecord")
                    }
+                    <label for="collisionRecordTag">Tags(optional)</label>
+                    <select multiple class="form-select" id="collisionRecordTag">
+                        @foreach (string tag in Model.Tags)
+                        {
+                            <!option value="@tag">@tag</!option>
+                        }
+                    </select>
                </div>
                <div class="col-md-6 col-12">
                    <label for="collisionRecordNotes">Notes(optional)<a class="link-underline link-underline-opacity-0" onclick="showLinks(this)"><i class="bi bi-markdown ms-2"></i></a></label>
--- a/Views/Vehicle/_CollisionRecords.cshtml
+++ b/Views/Vehicle/_CollisionRecords.cshtml
@@ -3,6 +3,7 @@
@{
    var enableCsvImports = config.GetUserConfig(User).EnableCsvImports;
    var hideZero = config.GetUserConfig(User).HideZero;
+    var recordTags = Model.SelectMany(x => x.Tags).Distinct();
 }
@model List<CollisionRecord>
 <div class="row">
@@ -10,6 +11,10 @@
        <div class="d-flex align-items-center flex-wrap">
            <span class="ms-2 badge bg-success">@($"# of Repair Records: {Model.Count()}")</span>
            <span class="ms-2 badge bg-primary">@($"Total: {Model.Sum(x => x.Cost).ToString("C")}")</span>
+            @foreach (string recordTag in recordTags)
+            {
+                <span onclick="filterTable('accident-tab-pane', this)" class="user-select-none ms-2 rounded-pill badge bg-secondary tagfilter" style="cursor:pointer;">@recordTag</span>
+            }
        </div>
        <div>
            @if (enableCsvImports)
@@ -54,7 +59,7 @@
            <tbody>
                @foreach (CollisionRecord collisionRecord in Model)
                {
-                    <tr class="d-flex" style="cursor:pointer;" onclick="showEditCollisionRecordModal(@collisionRecord.Id)">
+                    <tr class="d-flex" style="cursor:pointer;" onclick="showEditCollisionRecordModal(@collisionRecord.Id)" data-tags='@string.Join(" ", collisionRecord.Tags)'>
                        <td class="col-2 col-xl-1">@collisionRecord.Date.ToShortDateString()</td>
                        <td class="col-2">@collisionRecord.Mileage</td>
                        <td class="col-3 col-xl-4">@collisionRecord.Description</td>
--- a/Views/Vehicle/_ServiceRecordModal.cshtml
+++ b/Views/Vehicle/_ServiceRecordModal.cshtml
@@ -27,6 +27,13 @@
                    {
                        @await Html.PartialAsync("_SupplyStore", "ServiceRecord")
                    }
+                    <label for="serviceRecordTag">Tags(optional)</label>
+                    <select multiple class="form-select" id="serviceRecordTag">
+                        @foreach(string tag in Model.Tags)
+                        {
+                            <!option value="@tag">@tag</!option>
+                        }
+                        </select>
                </div>
                <div class="col-md-6 col-12">
                    <label for="serviceRecordNotes">Notes(optional)<a class="link-underline link-underline-opacity-0" onclick="showLinks(this)"><i class="bi bi-markdown ms-2"></i></a></label>
--- a/Views/Vehicle/_ServiceRecords.cshtml
+++ b/Views/Vehicle/_ServiceRecords.cshtml
@@ -3,6 +3,7 @@
@{
    var enableCsvImports = config.GetUserConfig(User).EnableCsvImports;
    var hideZero = config.GetUserConfig(User).HideZero;
+    var recordTags = Model.SelectMany(x => x.Tags).Distinct();
 }
@model List<ServiceRecord>
 <div class="row">
@@ -10,6 +11,10 @@
        <div class="d-flex align-items-center flex-wrap">
            <span class="ms-2 badge bg-success">@($"# of Service Records: {Model.Count()}")</span>
            <span class="ms-2 badge bg-primary">@($"Total: {Model.Sum(x => x.Cost).ToString("C")}")</span>
+            @foreach(string recordTag in recordTags)
+            {
+                <span onclick="filterTable('servicerecord-tab-pane', this)" class="user-select-none ms-2 rounded-pill badge bg-secondary tagfilter" style="cursor:pointer;">@recordTag</span>
+            }
        </div>
        <div>
            @if (enableCsvImports)
@@ -54,7 +59,7 @@
            <tbody>
                @foreach (ServiceRecord serviceRecord in Model)
                {
-                    <tr class="d-flex" style="cursor:pointer;" onclick="showEditServiceRecordModal(@serviceRecord.Id)">
+                    <tr class="d-flex" style="cursor:pointer;" onclick="showEditServiceRecordModal(@serviceRecord.Id)" data-tags='@string.Join(" ",serviceRecord.Tags)'>
                        <td class="col-2 col-xl-1">@serviceRecord.Date.ToShortDateString()</td>
                        <td class="col-2">@serviceRecord.Mileage</td>
                        <td class="col-3 col-xl-4">@serviceRecord.Description</td>
--- a/Views/Vehicle/_UpgradeRecordModal.cshtml
+++ b/Views/Vehicle/_UpgradeRecordModal.cshtml
@@ -27,6 +27,13 @@
                    {
                        @await Html.PartialAsync("_SupplyStore", "UpgradeRecord")
                    }
+                    <label for="upgradeRecordTag">Tags(optional)</label>
+                    <select multiple class="form-select" id="upgradeRecordTag">
+                        @foreach (string tag in Model.Tags)
+                        {
+                            <!option value="@tag">@tag</!option>
+                        }
+                    </select>
                </div>
                <div class="col-md-6 col-12">
                    <label for="upgradeRecordNotes">Notes(optional)<a class="link-underline link-underline-opacity-0" onclick="showLinks(this)"><i class="bi bi-markdown ms-2"></i></a></label>
--- a/Views/Vehicle/_UpgradeRecords.cshtml
+++ b/Views/Vehicle/_UpgradeRecords.cshtml
@@ -3,6 +3,7 @@
@{
    var enableCsvImports = config.GetUserConfig(User).EnableCsvImports;
    var hideZero = config.GetUserConfig(User).HideZero;
+    var recordTags = Model.SelectMany(x => x.Tags).Distinct();
 }
@model List<UpgradeRecord>
 <div class="row">
@@ -10,6 +11,10 @@
        <div class="d-flex align-items-center flex-wrap">
            <span class="ms-2 badge bg-success">@($"# of Upgrade Records: {Model.Count()}")</span>
            <span class="ms-2 badge bg-primary">@($"Total: {Model.Sum(x => x.Cost).ToString("C")}")</span>
+            @foreach (string recordTag in recordTags)
+            {
+                <span onclick="filterTable('upgrade-tab-pane', this)" class="user-select-none ms-2 rounded-pill badge bg-secondary tagfilter" style="cursor:pointer;">@recordTag</span>
+            }
        </div>
        <div>
            @if (enableCsvImports)
@@ -54,7 +59,7 @@
            <tbody>
                @foreach (UpgradeRecord upgradeRecord in Model)
                {
-                    <tr class="d-flex" style="cursor:pointer;" onclick="showEditUpgradeRecordModal(@upgradeRecord.Id)">
+                    <tr class="d-flex" style="cursor:pointer;" onclick="showEditUpgradeRecordModal(@upgradeRecord.Id)" data-tags='@string.Join(" ", upgradeRecord.Tags)'>
                        <td class="col-2 col-xl-1">@upgradeRecord.Date.ToShortDateString()</td>
                        <td class="col-2">@upgradeRecord.Mileage</td>
                        <td class="col-3 col-xl-4">@upgradeRecord.Description</td>
--- a/Views/Vehicle/_VehicleModal.cshtml
+++ b/Views/Vehicle/_VehicleModal.cshtml
@@ -37,6 +37,13 @@
                <input class="form-check-input" type="checkbox" role="switch" id="inputUseHours" checked="@Model.UseHours">
                <label class="form-check-label" for="inputUseHours">Use Engine Hours</label>
            </div>
+            <label for="inputTag">Tags(optional)</label>
+            <select multiple class="form-select" id="inputTag">
+                @foreach (string tag in Model.Tags)
+                {
+                    <!option value="@tag">@tag</!option>
+                }
+            </select>
            @if (!string.IsNullOrWhiteSpace(Model.ImageLocation))
            {
                <label for="inputImage">Replace picture(optional)</label>
--- a/wwwroot/css/site.css
+++ b/wwwroot/css/site.css
@@ -300,4 +300,7 @@ input[type="file"] {
 }
 [data-bs-theme=light] .taskCard {
    background-color: rgba(80,80,80,0.25);
+}
+.override-hide{
+    display: none !important;
 }
--- a/wwwroot/js/collisionrecord.js
+++ b/wwwroot/js/collisionrecord.js
@@ -4,6 +4,7 @@
            $("#collisionRecordModalContent").html(data);
            //initiate datepicker
            initDatePicker($('#collisionRecordDate'));
+            initTagSelector($("#collisionRecordTag"));
            $('#collisionRecordModal').modal('show');
        }
    });
@@ -14,6 +15,7 @@ function showEditCollisionRecordModal(collisionRecordId) {
            $("#collisionRecordModalContent").html(data);
            //initiate datepicker
            initDatePicker($('#collisionRecordDate'));
+            initTagSelector($("#collisionRecordTag"));
            $('#collisionRecordModal').modal('show');
            $('#collisionRecordModal').off('shown.bs.modal').on('shown.bs.modal', function () {
                if (getGlobalConfig().useMarkDown) {
@@ -80,6 +82,7 @@ function getAndValidateCollisionRecordValues() {
    var collisionDescription = $("#collisionRecordDescription").val();
    var collisionCost = $("#collisionRecordCost").val();
    var collisionNotes = $("#collisionRecordNotes").val();
+    var collisionTags = $("#collisionRecordTag").val();
    var vehicleId = GetVehicleId().vehicleId;
    var collisionRecordId = getCollisionRecordModelData().id;
    var addReminderRecord = $("#addReminderCheck").is(":checked");
@@ -120,6 +123,7 @@ function getAndValidateCollisionRecordValues() {
        notes: collisionNotes,
        files: uploadedFiles,
        supplies: selectedSupplies,
+        tags: collisionTags,
        addReminderRecord: addReminderRecord
    }
 }
--- a/wwwroot/js/garage.js
+++ b/wwwroot/js/garage.js
@@ -3,9 +3,10 @@
    $.get('/Vehicle/AddVehiclePartialView', function (data) {
        if (data) {
            $("#addVehicleModalContent").html(data);
+            initTagSelector($("#inputTag"));
+            $('#addVehicleModal').modal('show');
        }
    })
-    $('#addVehicleModal').modal('show');
 }
 function hideAddVehicleModal() {
    $('#addVehicleModal').modal('hide');
@@ -44,13 +45,39 @@ function loadPinnedNotes(vehicleId) {
                new bootstrap.Tooltip(hoveredGrid);
                hoveredGrid.tooltip("show");
            } else {
+                //disable the tooltip
                hoveredGrid.attr("data-bs-title", "");
            }
        });
    } else {
-        hoveredGrid.tooltip("show");
+        if (hoveredGrid.attr("data-bs-title") != '') {
+            hoveredGrid.tooltip("show");
+        }
    }
 }
 function hidePinnedNotes(vehicleId) {
-    $(`#gridVehicle_${vehicleId}`).tooltip("hide");
+    if ($(`#gridVehicle_${vehicleId}`).attr('data-bs-title') != '') {
+        $(`#gridVehicle_${vehicleId}`).tooltip("hide");
+    }
+}
+
+function filterGarage(sender) {
+    var tagName = sender.textContent;
+    var rowData = $(".garage-item");
+    if ($(sender).hasClass("bg-primary")) {
+            rowData.removeClass('override-hide');
+            $(sender).removeClass('bg-primary');
+            $(sender).addClass('bg-secondary');
+    } else {
+        //hide table rows.
+        rowData.addClass('override-hide');
+        $(`[data-tags~='${tagName}']`).removeClass('override-hide');
+        if ($(".tagfilter.bg-primary").length > 0) {
+            //disabling other filters
+            $(".tagfilter.bg-primary").addClass('bg-secondary');
+            $(".tagfilter.bg-primary").removeClass('bg-primary');
+        }
+        $(sender).addClass('bg-primary');
+        $(sender).removeClass('bg-secondary');
+    }
 }
--- a/wwwroot/js/servicerecord.js
+++ b/wwwroot/js/servicerecord.js
@@ -4,6 +4,7 @@
            $("#serviceRecordModalContent").html(data);
            //initiate datepicker
            initDatePicker($('#serviceRecordDate'));
+            initTagSelector($("#serviceRecordTag"));
            $('#serviceRecordModal').modal('show');
        }
    });
@@ -14,6 +15,7 @@ function showEditServiceRecordModal(serviceRecordId) {
            $("#serviceRecordModalContent").html(data);
            //initiate datepicker
            initDatePicker($('#serviceRecordDate'));
+            initTagSelector($("#serviceRecordTag"));
            $('#serviceRecordModal').modal('show');
            $('#serviceRecordModal').off('shown.bs.modal').on('shown.bs.modal', function () {
                if (getGlobalConfig().useMarkDown) {
@@ -80,6 +82,7 @@ function getAndValidateServiceRecordValues() {
    var serviceDescription = $("#serviceRecordDescription").val();
    var serviceCost = $("#serviceRecordCost").val();
    var serviceNotes = $("#serviceRecordNotes").val();
+    var serviceTags = $("#serviceRecordTag").val();
    var vehicleId = GetVehicleId().vehicleId;
    var serviceRecordId = getServiceRecordModelData().id;
    var addReminderRecord = $("#addReminderCheck").is(":checked");
@@ -120,6 +123,7 @@ function getAndValidateServiceRecordValues() {
        notes: serviceNotes,
        files: uploadedFiles,
        supplies: selectedSupplies,
+        tags: serviceTags,
        addReminderRecord: addReminderRecord
    }
 }
--- a/wwwroot/js/shared.js
+++ b/wwwroot/js/shared.js
@@ -36,6 +36,7 @@ function saveVehicle(isEdit) {
    var vehicleYear = $("#inputYear").val();
    var vehicleMake = $("#inputMake").val();
    var vehicleModel = $("#inputModel").val();
+    var vehicleTags = $("#inputTag").val();
    var vehicleLicensePlate = $("#inputLicensePlate").val();
    var vehicleIsElectric = $("#inputIsElectric").is(":checked");
    var vehicleUseHours = $("#inputUseHours").is(":checked");
@@ -76,6 +77,7 @@ function saveVehicle(isEdit) {
        model: vehicleModel,
        licensePlate: vehicleLicensePlate,
        isElectric: vehicleIsElectric,
+        tags: vehicleTags,
        useHours: vehicleUseHours
    }, function (data) {
        if (data) {
@@ -137,6 +139,9 @@ function initDatePicker(input, futureOnly) {
        });
    }
 }
+function initTagSelector(input) {
+    input.tagsinput();
+}

 function showMobileNav() {
    $(".lubelogger-mobile-nav").addClass("lubelogger-mobile-nav-show");
@@ -178,6 +183,7 @@ function toggleSort(tabName, sender) {
        sender.removeClass('sort-desc');
        sender.html(`${sortColumn}`);
        $(`#${tabName} table tbody`).html(storedTableRowState);
+        filterTable(tabName, $(".tagfilter.bg-primary").get(0), true);
    } else {
        //first time sorting.
        //check if table was sorted before by a different column(only relevant to fuel tab)
@@ -217,4 +223,35 @@ function sortTable(tabName, columnName, desc) {
        }
    });
    $(`#${tabName} table tbody`).html(sortedRow);
+    filterTable(tabName, $(".tagfilter.bg-primary").get(0), true);
+}
+function filterTable(tabName, sender, isSort) {
+    var rowData = $(`#${tabName} table tbody tr`);
+    if (sender == undefined) {
+        rowData.removeClass('override-hide');
+        return;
+    }
+    var tagName = sender.textContent;
+    //check for other applied filters
+    if ($(sender).hasClass("bg-primary")) {
+        if (!isSort) {
+            rowData.removeClass('override-hide');
+            $(sender).removeClass('bg-primary');
+            $(sender).addClass('bg-secondary');
+        } else {
+            rowData.addClass('override-hide');
+            $(`[data-tags~='${tagName}']`).removeClass('override-hide');
+        }
+    } else {
+        //hide table rows.
+        rowData.addClass('override-hide');
+        $(`[data-tags~='${tagName}']`).removeClass('override-hide');
+        if ($(".tagfilter.bg-primary").length > 0) {
+            //disabling other filters
+            $(".tagfilter.bg-primary").addClass('bg-secondary');
+            $(".tagfilter.bg-primary").removeClass('bg-primary');
+        }
+        $(sender).addClass('bg-primary');
+        $(sender).removeClass('bg-secondary');
+    }
 }
--- a/wwwroot/js/upgraderecord.js
+++ b/wwwroot/js/upgraderecord.js
@@ -4,6 +4,7 @@
            $("#upgradeRecordModalContent").html(data);
            //initiate datepicker
            initDatePicker($('#upgradeRecordDate'));
+            initTagSelector($("#upgradeRecordTag"));
            $('#upgradeRecordModal').modal('show');
        }
    });
@@ -14,6 +15,7 @@ function showEditUpgradeRecordModal(upgradeRecordId) {
            $("#upgradeRecordModalContent").html(data);
            //initiate datepicker
            initDatePicker($('#upgradeRecordDate'));
+            initTagSelector($("#upgradeRecordTag"));
            $('#upgradeRecordModal').modal('show');
            $('#upgradeRecordModal').off('shown.bs.modal').on('shown.bs.modal', function () {
                if (getGlobalConfig().useMarkDown) {
@@ -80,6 +82,7 @@ function getAndValidateUpgradeRecordValues() {
    var upgradeDescription = $("#upgradeRecordDescription").val();
    var upgradeCost = $("#upgradeRecordCost").val();
    var upgradeNotes = $("#upgradeRecordNotes").val();
+    var upgradeTags = $("#upgradeRecordTag").val();
    var vehicleId = GetVehicleId().vehicleId;
    var upgradeRecordId = getUpgradeRecordModelData().id;
    var addReminderRecord = $("#addReminderCheck").is(":checked");
@@ -120,6 +123,7 @@ function getAndValidateUpgradeRecordValues() {
        notes: upgradeNotes,
        files: uploadedFiles,
        supplies: selectedSupplies,
+        tags: upgradeTags,
        addReminderRecord: addReminderRecord
    }
 }
--- a/wwwroot/js/vehicle.js
+++ b/wwwroot/js/vehicle.js
@@ -214,6 +214,7 @@ function editVehicle(vehicleId) {
    $.get(`/Vehicle/GetEditVehiclePartialViewById?vehicleId=${vehicleId}`, function (data) {
        if (data) {
            $("#editVehicleModalContent").html(data);
+            initTagSelector($("#inputTag"));
            $('#editVehicleModal').modal('show');
        }
    });
--- a/wwwroot/lib/bootstrap-tagsinput/bootstrap-tagsinput.css
+++ b/wwwroot/lib/bootstrap-tagsinput/bootstrap-tagsinput.css
@@ -0,0 +1,21 @@
+.bootstrap-tagsinput {
+  cursor: text;
+}
+.bootstrap-tagsinput input {
+  border: none;
+  box-shadow: none;
+  outline: none;
+  background-color: transparent;
+  padding: 0 6px;
+  margin: 0;
+  width: auto;
+  max-width: inherit;
+}
+.bootstrap-tagsinput input:focus {
+  border: none;
+  box-shadow: none;
+}
+.bootstrap-tagsinput .tag [data-role="remove"] {
+  margin-left: 8px;
+  cursor: pointer;
+}
--- a/wwwroot/lib/bootstrap-tagsinput/bootstrap-tagsinput.js
+++ b/wwwroot/lib/bootstrap-tagsinput/bootstrap-tagsinput.js
@@ -0,0 +1,639 @@
+(function ($) {
+  "use strict";
+
+  var defaultOptions = {
+    tagClass: function(item) {
+      return 'label label-info';
+    },
+    itemValue: function(item) {
+      return item ? item.toString() : item;
+    },
+    itemText: function(item) {
+      return this.itemValue(item);
+    },
+    itemTitle: function(item) {
+      return null;
+    },
+    freeInput: true,
+    addOnBlur: true,
+    maxTags: undefined,
+    maxChars: undefined,
+    confirmKeys: [13,32],
+    delimiter: ',',
+    delimiterRegex: null,
+    cancelConfirmKeysOnEmpty: true,
+    onTagExists: function(item, $tag) {
+      $tag.hide().fadeIn();
+    },
+    trimValue: false,
+    allowDuplicates: false
+  };
+
+  /**
+   * Constructor function
+   */
+  function TagsInput(element, options) {
+    this.itemsArray = [];
+
+    this.$element = $(element);
+    this.$element.hide();
+
+    this.isSelect = (element.tagName === 'SELECT');
+    this.multiple = (this.isSelect && element.hasAttribute('multiple'));
+    this.objectItems = options && options.itemValue;
+    this.placeholderText = element.hasAttribute('placeholder') ? this.$element.attr('placeholder') : '';
+    this.inputSize = Math.max(1, this.placeholderText.length);
+
+    this.$container = $('<div class="form-control bootstrap-tagsinput"></div>');
+    this.$input = $('<input type="text" placeholder="' + this.placeholderText + '"/>').appendTo(this.$container);
+
+    this.$element.before(this.$container);
+
+    this.build(options);
+  }
+
+  TagsInput.prototype = {
+    constructor: TagsInput,
+
+    /**
+     * Adds the given item as a new tag. Pass true to dontPushVal to prevent
+     * updating the elements val()
+     */
+    add: function(item, dontPushVal, options) {
+      var self = this;
+
+      if (self.options.maxTags && self.itemsArray.length >= self.options.maxTags)
+        return;
+
+      // Ignore falsey values, except false
+      if (item !== false && !item)
+        return;
+
+      // Trim value
+      if (typeof item === "string" && self.options.trimValue) {
+        item = $.trim(item);
+      }
+
+      // Throw an error when trying to add an object while the itemValue option was not set
+      if (typeof item === "object" && !self.objectItems)
+        throw("Can't add objects when itemValue option is not set");
+
+      // Ignore strings only containg whitespace
+      if (item.toString().match(/^\s*$/))
+        return;
+
+      // If SELECT but not multiple, remove current tag
+      if (self.isSelect && !self.multiple && self.itemsArray.length > 0)
+        self.remove(self.itemsArray[0]);
+
+      if (typeof item === "string" && this.$element[0].tagName === 'INPUT') {
+        var delimiter = (self.options.delimiterRegex) ? self.options.delimiterRegex : self.options.delimiter;
+        var items = item.split(delimiter);
+        if (items.length > 1) {
+          for (var i = 0; i < items.length; i++) {
+            this.add(items[i], true);
+          }
+
+          if (!dontPushVal)
+            self.pushVal();
+          return;
+        }
+      }
+
+      var itemValue = self.options.itemValue(item),
+          itemText = self.options.itemText(item),
+          tagClass = self.options.tagClass(item),
+          itemTitle = self.options.itemTitle(item);
+
+      // Ignore items allready added
+      var existing = $.grep(self.itemsArray, function(item) { return self.options.itemValue(item) === itemValue; } )[0];
+      if (existing && !self.options.allowDuplicates) {
+        // Invoke onTagExists
+        if (self.options.onTagExists) {
+          var $existingTag = $(".tag", self.$container).filter(function() { return $(this).data("item") === existing; });
+          self.options.onTagExists(item, $existingTag);
+        }
+        return;
+      }
+
+      // if length greater than limit
+      if (self.items().toString().length + item.length + 1 > self.options.maxInputLength)
+        return;
+
+      // raise beforeItemAdd arg
+      var beforeItemAddEvent = $.Event('beforeItemAdd', { item: item, cancel: false, options: options});
+      self.$element.trigger(beforeItemAddEvent);
+      if (beforeItemAddEvent.cancel)
+        return;
+
+      // register item in internal array and map
+      self.itemsArray.push(item);
+
+      // add a tag element
+
+        var $tag = $('<span class="tag badge rounded-pill text-bg-primary ' + htmlEncode(tagClass) + (itemTitle !== null ? ('" title="' + itemTitle) : '') + '">' + htmlEncode(itemText) + '<span data-role="remove"><i class="bi bi-x"></i></span></span>');
+      $tag.data('item', item);
+      self.findInputWrapper().before($tag);
+      $tag.after(' ');
+
+      // add <option /> if item represents a value not present in one of the <select />'s options
+      if (self.isSelect && !$('option[value="' + encodeURIComponent(itemValue) + '"]',self.$element)[0]) {
+        var $option = $('<option selected>' + htmlEncode(itemText) + '</option>');
+        $option.data('item', item);
+        $option.attr('value', itemValue);
+        self.$element.append($option);
+      }
+
+      if (!dontPushVal)
+        self.pushVal();
+
+      // Add class when reached maxTags
+      if (self.options.maxTags === self.itemsArray.length || self.items().toString().length === self.options.maxInputLength)
+        self.$container.addClass('bootstrap-tagsinput-max');
+
+      self.$element.trigger($.Event('itemAdded', { item: item, options: options }));
+    },
+
+    /**
+     * Removes the given item. Pass true to dontPushVal to prevent updating the
+     * elements val()
+     */
+    remove: function(item, dontPushVal, options) {
+      var self = this;
+
+      if (self.objectItems) {
+        if (typeof item === "object")
+          item = $.grep(self.itemsArray, function(other) { return self.options.itemValue(other) ==  self.options.itemValue(item); } );
+        else
+          item = $.grep(self.itemsArray, function(other) { return self.options.itemValue(other) ==  item; } );
+
+        item = item[item.length-1];
+      }
+
+      if (item) {
+        var beforeItemRemoveEvent = $.Event('beforeItemRemove', { item: item, cancel: false, options: options });
+        self.$element.trigger(beforeItemRemoveEvent);
+        if (beforeItemRemoveEvent.cancel)
+          return;
+
+        $('.tag', self.$container).filter(function() { return $(this).data('item') === item; }).remove();
+        $('option', self.$element).filter(function() { return $(this).data('item') === item; }).remove();
+        if($.inArray(item, self.itemsArray) !== -1)
+          self.itemsArray.splice($.inArray(item, self.itemsArray), 1);
+      }
+
+      if (!dontPushVal)
+        self.pushVal();
+
+      // Remove class when reached maxTags
+      if (self.options.maxTags > self.itemsArray.length)
+        self.$container.removeClass('bootstrap-tagsinput-max');
+
+      self.$element.trigger($.Event('itemRemoved',  { item: item, options: options }));
+    },
+
+    /**
+     * Removes all items
+     */
+    removeAll: function() {
+      var self = this;
+
+      $('.tag', self.$container).remove();
+      $('option', self.$element).remove();
+
+      while(self.itemsArray.length > 0)
+        self.itemsArray.pop();
+
+      self.pushVal();
+    },
+
+    /**
+     * Refreshes the tags so they match the text/value of their corresponding
+     * item.
+     */
+    refresh: function() {
+      var self = this;
+      $('.tag', self.$container).each(function() {
+        var $tag = $(this),
+            item = $tag.data('item'),
+            itemValue = self.options.itemValue(item),
+            itemText = self.options.itemText(item),
+            tagClass = self.options.tagClass(item);
+
+          // Update tag's class and inner text
+          $tag.attr('class', null);
+          $tag.addClass('tag ' + htmlEncode(tagClass));
+          $tag.contents().filter(function() {
+            return this.nodeType == 3;
+          })[0].nodeValue = htmlEncode(itemText);
+
+          if (self.isSelect) {
+            var option = $('option', self.$element).filter(function() { return $(this).data('item') === item; });
+            option.attr('value', itemValue);
+          }
+      });
+    },
+
+    /**
+     * Returns the items added as tags
+     */
+    items: function() {
+      return this.itemsArray;
+    },
+
+    /**
+     * Assembly value by retrieving the value of each item, and set it on the
+     * element.
+     */
+    pushVal: function() {
+      var self = this,
+          val = $.map(self.items(), function(item) {
+            return self.options.itemValue(item).toString();
+          });
+
+      self.$element.val(val, true).trigger('change');
+    },
+
+    /**
+     * Initializes the tags input behaviour on the element
+     */
+    build: function(options) {
+      var self = this;
+
+      self.options = $.extend({}, defaultOptions, options);
+      // When itemValue is set, freeInput should always be false
+      if (self.objectItems)
+        self.options.freeInput = false;
+
+      makeOptionItemFunction(self.options, 'itemValue');
+      makeOptionItemFunction(self.options, 'itemText');
+      makeOptionFunction(self.options, 'tagClass');
+
+      // Typeahead Bootstrap version 2.3.2
+      if (self.options.typeahead) {
+        var typeahead = self.options.typeahead || {};
+
+        makeOptionFunction(typeahead, 'source');
+
+        self.$input.typeahead($.extend({}, typeahead, {
+          source: function (query, process) {
+            function processItems(items) {
+              var texts = [];
+
+              for (var i = 0; i < items.length; i++) {
+                var text = self.options.itemText(items[i]);
+                map[text] = items[i];
+                texts.push(text);
+              }
+              process(texts);
+            }
+
+            this.map = {};
+            var map = this.map,
+                data = typeahead.source(query);
+
+            if ($.isFunction(data.success)) {
+              // support for Angular callbacks
+              data.success(processItems);
+            } else if ($.isFunction(data.then)) {
+              // support for Angular promises
+              data.then(processItems);
+            } else {
+              // support for functions and jquery promises
+              $.when(data)
+               .then(processItems);
+            }
+          },
+          updater: function (text) {
+            self.add(this.map[text]);
+            return this.map[text];
+          },
+          matcher: function (text) {
+            return (text.toLowerCase().indexOf(this.query.trim().toLowerCase()) !== -1);
+          },
+          sorter: function (texts) {
+            return texts.sort();
+          },
+          highlighter: function (text) {
+            var regex = new RegExp( '(' + this.query + ')', 'gi' );
+            return text.replace( regex, "<strong>$1</strong>" );
+          }
+        }));
+      }
+
+      // typeahead.js
+      if (self.options.typeaheadjs) {
+          var typeaheadConfig = null;
+          var typeaheadDatasets = {};
+
+          // Determine if main configurations were passed or simply a dataset
+          var typeaheadjs = self.options.typeaheadjs;
+          if ($.isArray(typeaheadjs)) {
+            typeaheadConfig = typeaheadjs[0];
+            typeaheadDatasets = typeaheadjs[1];
+          } else {
+            typeaheadDatasets = typeaheadjs;
+          }
+
+          self.$input.typeahead(typeaheadConfig, typeaheadDatasets).on('typeahead:selected', $.proxy(function (obj, datum) {
+            if (typeaheadDatasets.valueKey)
+              self.add(datum[typeaheadDatasets.valueKey]);
+            else
+              self.add(datum);
+            self.$input.typeahead('val', '');
+          }, self));
+      }
+
+      self.$container.on('click', $.proxy(function(event) {
+        if (! self.$element.attr('disabled')) {
+          self.$input.removeAttr('disabled');
+        }
+        self.$input.focus();
+      }, self));
+
+        if (self.options.addOnBlur && self.options.freeInput) {
+          self.$input.on('focusout', $.proxy(function(event) {
+              // HACK: only process on focusout when no typeahead opened, to
+              //       avoid adding the typeahead text as tag
+              if ($('.typeahead, .twitter-typeahead', self.$container).length === 0) {
+                self.add(self.$input.val());
+                self.$input.val('');
+              }
+          }, self));
+        }
+
+
+      self.$container.on('keydown', 'input', $.proxy(function(event) {
+        var $input = $(event.target),
+            $inputWrapper = self.findInputWrapper();
+
+        if (self.$element.attr('disabled')) {
+          self.$input.attr('disabled', 'disabled');
+          return;
+        }
+
+        switch (event.which) {
+          // BACKSPACE
+          case 8:
+            if (doGetCaretPosition($input[0]) === 0) {
+              var prev = $inputWrapper.prev();
+              if (prev.length) {
+                self.remove(prev.data('item'));
+              }
+            }
+            break;
+
+          // DELETE
+          case 46:
+            if (doGetCaretPosition($input[0]) === 0) {
+              var next = $inputWrapper.next();
+              if (next.length) {
+                self.remove(next.data('item'));
+              }
+            }
+            break;
+
+          // LEFT ARROW
+          case 37:
+            // Try to move the input before the previous tag
+            var $prevTag = $inputWrapper.prev();
+            if ($input.val().length === 0 && $prevTag[0]) {
+              $prevTag.before($inputWrapper);
+              $input.focus();
+            }
+            break;
+          // RIGHT ARROW
+          case 39:
+            // Try to move the input after the next tag
+            var $nextTag = $inputWrapper.next();
+            if ($input.val().length === 0 && $nextTag[0]) {
+              $nextTag.after($inputWrapper);
+              $input.focus();
+            }
+            break;
+         default:
+             // ignore
+         }
+
+        // Reset internal input's size
+        var textLength = $input.val().length,
+            wordSpace = Math.ceil(textLength / 5),
+            size = textLength + wordSpace + 1;
+        $input.attr('size', Math.max(this.inputSize, $input.val().length));
+      }, self));
+
+      self.$container.on('keypress', 'input', $.proxy(function(event) {
+         var $input = $(event.target);
+
+         if (self.$element.attr('disabled')) {
+            self.$input.attr('disabled', 'disabled');
+            return;
+         }
+         var text = $input.val(),
+         maxLengthReached = self.options.maxChars && text.length >= self.options.maxChars;
+         if (self.options.freeInput && (keyCombinationInList(event, self.options.confirmKeys) || maxLengthReached)) {
+             //check if confirm keys are in input and then replace them.
+             text = text.replace(String.fromCharCode(event.which), "")
+             // Only attempt to add a tag if there is data in the field
+             if (text.length !== 0) {
+               self.add(maxLengthReached ? text.substr(0, self.options.maxChars) : text);
+               $input.val('');
+            }
+
+            // If the field is empty, let the event triggered fire as usual
+            if (self.options.cancelConfirmKeysOnEmpty === false) {
+               event.preventDefault();
+            }
+         }
+
+         // Reset internal input's size
+         var textLength = $input.val().length,
+            wordSpace = Math.ceil(textLength / 5),
+            size = textLength + wordSpace + 1;
+         $input.attr('size', Math.max(this.inputSize, $input.val().length));
+      }, self));
+
+      // Remove icon clicked
+      self.$container.on('click', '[data-role=remove]', $.proxy(function(event) {
+        if (self.$element.attr('disabled')) {
+          return;
+        }
+        self.remove($(event.target).closest('.tag').data('item'));
+      }, self));
+
+      // Only add existing value as tags when using strings as tags
+      if (self.options.itemValue === defaultOptions.itemValue) {
+        if (self.$element[0].tagName === 'INPUT') {
+            self.add(self.$element.val());
+        } else {
+          $('option', self.$element).each(function() {
+            self.add($(this).attr('value'), true);
+          });
+        }
+      }
+    },
+
+    /**
+     * Removes all tagsinput behaviour and unregsiter all event handlers
+     */
+    destroy: function() {
+      var self = this;
+
+      // Unbind events
+      self.$container.off('keypress', 'input');
+      self.$container.off('click', '[role=remove]');
+
+      self.$container.remove();
+      self.$element.removeData('tagsinput');
+      self.$element.show();
+    },
+
+    /**
+     * Sets focus on the tagsinput
+     */
+    focus: function() {
+      this.$input.focus();
+    },
+
+    /**
+     * Returns the internal input element
+     */
+    input: function() {
+      return this.$input;
+    },
+
+    /**
+     * Returns the element which is wrapped around the internal input. This
+     * is normally the $container, but typeahead.js moves the $input element.
+     */
+    findInputWrapper: function() {
+      var elt = this.$input[0],
+          container = this.$container[0];
+      while(elt && elt.parentNode !== container)
+        elt = elt.parentNode;
+
+      return $(elt);
+    }
+  };
+
+  /**
+   * Register JQuery plugin
+   */
+  $.fn.tagsinput = function(arg1, arg2, arg3) {
+    var results = [];
+
+    this.each(function() {
+      var tagsinput = $(this).data('tagsinput');
+      // Initialize a new tags input
+      if (!tagsinput) {
+          tagsinput = new TagsInput(this, arg1);
+          $(this).data('tagsinput', tagsinput);
+          results.push(tagsinput);
+
+          if (this.tagName === 'SELECT') {
+              $('option', $(this)).attr('selected', 'selected');
+          }
+
+          // Init tags from $(this).val()
+          $(this).val($(this).val());
+      } else if (!arg1 && !arg2) {
+          // tagsinput already exists
+          // no function, trying to init
+          results.push(tagsinput);
+      } else if(tagsinput[arg1] !== undefined) {
+          // Invoke function on existing tags input
+            if(tagsinput[arg1].length === 3 && arg3 !== undefined){
+               var retVal = tagsinput[arg1](arg2, null, arg3);
+            }else{
+               var retVal = tagsinput[arg1](arg2);
+            }
+          if (retVal !== undefined)
+              results.push(retVal);
+      }
+    });
+
+    if ( typeof arg1 == 'string') {
+      // Return the results from the invoked function calls
+      return results.length > 1 ? results : results[0];
+    } else {
+      return results;
+    }
+  };
+
+  $.fn.tagsinput.Constructor = TagsInput;
+
+  /**
+   * Most options support both a string or number as well as a function as
+   * option value. This function makes sure that the option with the given
+   * key in the given options is wrapped in a function
+   */
+  function makeOptionItemFunction(options, key) {
+    if (typeof options[key] !== 'function') {
+      var propertyName = options[key];
+      options[key] = function(item) { return item[propertyName]; };
+    }
+  }
+  function makeOptionFunction(options, key) {
+    if (typeof options[key] !== 'function') {
+      var value = options[key];
+      options[key] = function() { return value; };
+    }
+  }
+  /**
+   * HtmlEncodes the given value
+   */
+  var htmlEncodeContainer = $('<div />');
+  function htmlEncode(value) {
+    if (value) {
+      return htmlEncodeContainer.text(value).html();
+    } else {
+      return '';
+    }
+  }
+
+  /**
+   * Returns the position of the caret in the given input field
+   * http://flightschool.acylt.com/devnotes/caret-position-woes/
+   */
+  function doGetCaretPosition(oField) {
+    var iCaretPos = 0;
+    if (document.selection) {
+      oField.focus ();
+      var oSel = document.selection.createRange();
+      oSel.moveStart ('character', -oField.value.length);
+      iCaretPos = oSel.text.length;
+    } else if (oField.selectionStart || oField.selectionStart == '0') {
+      iCaretPos = oField.selectionStart;
+    }
+    return (iCaretPos);
+  }
+
+  /**
+    * Returns boolean indicates whether user has pressed an expected key combination.
+    * @param object keyPressEvent: JavaScript event object, refer
+    *     http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
+    * @param object lookupList: expected key combinations, as in:
+    *     [13, {which: 188, shiftKey: true}]
+    */
+  function keyCombinationInList(keyPressEvent, lookupList) {
+      var found = false;
+      $.each(lookupList, function (index, keyCombination) {
+          if (typeof (keyCombination) === 'number' && keyPressEvent.which === keyCombination) {
+              found = true;
+              return false;
+          }
+
+          if (keyPressEvent.which === keyCombination.which) {
+              var alt = !keyCombination.hasOwnProperty('altKey') || keyPressEvent.altKey === keyCombination.altKey,
+                  shift = !keyCombination.hasOwnProperty('shiftKey') || keyPressEvent.shiftKey === keyCombination.shiftKey,
+                  ctrl = !keyCombination.hasOwnProperty('ctrlKey') || keyPressEvent.ctrlKey === keyCombination.ctrlKey;
+              if (alt && shift && ctrl) {
+                  found = true;
+                  return false;
+              }
+          }
+      });
+
+      return found;
+  }
+})(window.jQuery);