Merge pull request #352 from hargata/Hargata/vehicle.extra.fields

Added Additional Fields for Vehicle

Controllers/VehicleController.cs

@@ -97,13 +97,14 @@ namespace CarCareTracker.Controllers
         [HttpGet]
         public IActionResult AddVehiclePartialView()
         {
-            return PartialView("_VehicleModal", new Vehicle());
+            return PartialView("_VehicleModal", new Vehicle() { ExtraFields = _extraFieldDataAccess.GetExtraFieldsById((int)ImportMode.VehicleRecord).ExtraFields });
         }
         [TypeFilter(typeof(CollaboratorFilter))]
         [HttpGet]
         public IActionResult GetEditVehiclePartialViewById(int vehicleId)
         {
             var data = _dataAccess.GetVehicleById(vehicleId);
+            data.ExtraFields = StaticHelper.AddExtraFields(data.ExtraFields, _extraFieldDataAccess.GetExtraFieldsById((int)ImportMode.VehicleRecord).ExtraFields);
             return PartialView("_VehicleModal", data);
         }
         [HttpPost]

Enum/ImportMode.cs

@@ -12,6 +12,7 @@
         SupplyRecord = 7,
         Dashboard = 8,
         PlanRecord = 9,
-        OdometerRecord = 10
+        OdometerRecord = 10,
+        VehicleRecord = 11
     }
 }

Models/Vehicle.cs

@@ -8,8 +8,11 @@
         public string Make { get; set; }
         public string Model { get; set; }
         public string LicensePlate { get; set; }
+        public string PurchaseDate { get; set; }
+        public string SoldDate { get; set; }
         public bool IsElectric { get; set; } = false;
         public bool UseHours { get; set; } = false;
+        public List<ExtraField> ExtraFields { get; set; } = new List<ExtraField>();
         public List<string> Tags { get; set; } = new List<string>();
     }
 }

Views/Home/_ExtraFields.cshtml

@@ -27,6 +27,7 @@
                         <!option @(Model.Id == (int)ImportMode.SupplyRecord ? "selected" : "") value="@((int)ImportMode.SupplyRecord)">@translator.Translate(userLanguage, "Supplies")</!option>
                         <!option @(Model.Id == (int)ImportMode.PlanRecord ? "selected" : "") value="@((int)ImportMode.PlanRecord)">@translator.Translate(userLanguage, "Planner")</!option>
                         <!option @(Model.Id == (int)ImportMode.OdometerRecord ? "selected" : "") value="@((int)ImportMode.OdometerRecord)">@translator.Translate(userLanguage, "Odometer")</!option>
+                        <!option @(Model.Id == (int)ImportMode.VehicleRecord ? "selected" : "") value="@((int)ImportMode.VehicleRecord)">@translator.Translate(userLanguage, "Vehicle")</!option>
                     </select>
                 </div>
             </div>

Views/Home/_GarageDisplay.cshtml

@@ -1,5 +1,10 @@
-@model List<Vehicle>
+@using CarCareTracker.Helper
+@inject IConfigHelper config
+@inject ITranslationHelper translator
+@model List<Vehicle>
 @{
+    var userConfig = config.GetUserConfig(User);
+    var userLanguage = userConfig.UserLanguage;
     var recordTags = Model.SelectMany(x => x.Tags).Distinct();
 }
 @if (recordTags.Any())
@@ -25,7 +30,11 @@
         {
             <div class="col-xl-2 col-lg-4 col-md-4 col-sm-4 col-4 user-select-none garage-item" ondragover="dragOver(event)" ondrop="dropBox(event, @vehicle.Id)" draggable="true" ondragstart="dragStart(event, @vehicle.Id)" 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; pointer-events:none;" />
+                    <img src="@vehicle.ImageLocation" style="height:145px; object-fit:scale-down; pointer-events:none; @(string.IsNullOrWhiteSpace(vehicle.SoldDate) ? "" : "filter: grayscale(100%);")" />
+                    @if (!string.IsNullOrWhiteSpace(vehicle.SoldDate))
+                    {
+                        <div class="vehicle-sold-banner"><p class='display-6 mb-0'>@translator.Translate(userLanguage, "SOLD")</p></div>
+                    }
                     <div class="card-body">
                         <h5 class="card-title text-truncate garage-item-year" data-unit="@vehicle.Year">@($"{vehicle.Year}")</h5>
                         <h5 class="card-title text-truncate">@($"{vehicle.Make}")</h5>
@@ -41,4 +50,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>

Views/Vehicle/_VehicleModal.cshtml

@@ -34,6 +34,10 @@
             <input type="text" id="inputModel" class="form-control" placeholder="@translator.Translate(userLanguage, "Model")" value="@Model.Model">
             <label for="inputLicensePlate">@translator.Translate(userLanguage, "License Plate")</label>
             <input type="text" id="inputLicensePlate" class="form-control" placeholder="@translator.Translate(userLanguage, "License Plate")" value="@Model.LicensePlate">
+            <label for="inputPurchaseDate">@translator.Translate(userLanguage, "Purchased Date(optional)")</label>
+            <input type="text" id="inputPurchaseDate" class="form-control" placeholder="@translator.Translate(userLanguage, "Purchased Date")" value="@Model.PurchaseDate">
+            <label for="inputSoldDate">@translator.Translate(userLanguage, "Sold Date(optional)")</label>
+            <input type="text" id="inputSoldDate" class="form-control" placeholder="@translator.Translate(userLanguage, "Sold Date")" value="@Model.SoldDate">
             <div class="form-check form-switch">
                 <input class="form-check-input" type="checkbox" role="switch" id="inputIsElectric" checked="@Model.IsElectric">
                 <label class="form-check-label" for="inputIsElectric">@translator.Translate(userLanguage, "Electric Vehicle")</label>
@@ -49,6 +53,14 @@
                     <!option value="@tag">@tag</!option>
                 }
             </select>
+            @foreach (ExtraField field in Model.ExtraFields)
+            {
+                var elementId = Guid.NewGuid();
+                <div class="extra-field">
+                    <label for="@elementId">@field.Name</label>
+                    <input type="text" id="@elementId" class="form-control @(field.IsRequired ? "extra-field-required" : "")" placeholder="@field.Name" value="@field.Value">
+                </div>
+            }
             @if (!string.IsNullOrWhiteSpace(Model.ImageLocation))
             {
                 <label for="inputImage">@translator.Translate(userLanguage, "Replace picture(optional)")</label>

wwwroot/css/site.css

@@ -358,4 +358,12 @@ input[type="file"] {
 .zero-y-padding{
     padding-top: 0rem;
     padding-bottom: 0rem;
+}
+.vehicle-sold-banner {
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.6);
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    z-index: 10;
 }

wwwroot/js/garage.js

@@ -4,6 +4,8 @@
         if (data) {
             $("#addVehicleModalContent").html(data);
             initTagSelector($("#inputTag"));
+            initDatePicker($('#inputPurchaseDate'));
+            initDatePicker($('#inputSoldDate'));
             $('#addVehicleModal').modal('show');
         }
     })

wwwroot/js/shared.js

@@ -37,11 +37,17 @@ function saveVehicle(isEdit) {
     var vehicleMake = $("#inputMake").val();
     var vehicleModel = $("#inputModel").val();
     var vehicleTags = $("#inputTag").val();
+    var vehiclePurchaseDate = $("#inputPurchaseDate").val();
+    var vehicleSoldDate = $("#inputSoldDate").val();
     var vehicleLicensePlate = $("#inputLicensePlate").val();
     var vehicleIsElectric = $("#inputIsElectric").is(":checked");
     var vehicleUseHours = $("#inputUseHours").is(":checked");
+    var extraFields = getAndValidateExtraFields(true);
     //validate
     var hasError = false;
+    if (extraFields.hasError) {
+        hasError = true;
+    }
     if (vehicleYear.trim() == '' || parseInt(vehicleYear) < 1900) {
         hasError = true;
         $("#inputYear").addClass("is-invalid");
@@ -78,7 +84,10 @@ function saveVehicle(isEdit) {
         licensePlate: vehicleLicensePlate,
         isElectric: vehicleIsElectric,
         tags: vehicleTags,
-        useHours: vehicleUseHours
+        useHours: vehicleUseHours,
+        extraFields: extraFields.extraFields,
+        purchaseDate: vehiclePurchaseDate,
+        soldDate: vehicleSoldDate
     }, function (data) {
         if (data) {
             if (!isEdit) {
@@ -398,10 +407,11 @@ function showBulkImportModal(mode) {
 function hideBulkImportModal() {
     $("#bulkImportModal").modal('hide');
 }
-function getAndValidateExtraFields() {
+function getAndValidateExtraFields(isVehicle) {
     var hasError = false;
     var outputData = [];
-    $(".extra-field").map((index, elem) => {
+    var fieldName = isVehicle ? '#addVehicleModalContent .extra-field,#editVehicleModalContent .extra-field' : '.extra-field:not(#addVehicleModalContent .extra-field, #editVehicleModalContent .extra-field)';
+    $(`${fieldName}`).map((index, elem) => {
         var extraFieldName = $(elem).children("label").text();
         var extraFieldInput = $(elem).children("input");
         var extraFieldValue = extraFieldInput.val();

wwwroot/js/vehicle.js

@@ -215,6 +215,8 @@ function editVehicle(vehicleId) {
         if (data) {
             $("#editVehicleModalContent").html(data);
             initTagSelector($("#inputTag"), true);
+            initDatePicker($('#inputPurchaseDate'));
+            initDatePicker($('#inputSoldDate'));
             $('#editVehicleModal').modal('show');
         }
     });