From 926947bae4376ecd108781b96c538a389a6ec7b2 Mon Sep 17 00:00:00 2001 From: "DESKTOP-T0O5CDB\\DESK-555BD" Date: Wed, 5 Feb 2025 15:56:20 -0700 Subject: [PATCH] add functionality to re-arrange table columns. --- Controllers/VehicleController.cs | 1 + Models/User/UserColumnPreference.cs | 1 + Views/Vehicle/_CollisionRecords.cshtml | 14 ++--- Views/Vehicle/_Gas.cshtml | 20 +++---- Views/Vehicle/_OdometerRecords.cshtml | 14 ++--- Views/Vehicle/_ServiceRecords.cshtml | 14 ++--- Views/Vehicle/_SupplyRecords.cshtml | 18 +++--- Views/Vehicle/_TaxRecords.cshtml | 12 ++-- Views/Vehicle/_UpgradeRecords.cshtml | 14 ++--- Views/Vehicle/_UserColumnPreferences.cshtml | 6 +- wwwroot/js/shared.js | 62 ++++++++++++++++++++- 11 files changed, 120 insertions(+), 56 deletions(-) diff --git a/Controllers/VehicleController.cs b/Controllers/VehicleController.cs index 33393de..8e70a21 100644 --- a/Controllers/VehicleController.cs +++ b/Controllers/VehicleController.cs @@ -1129,6 +1129,7 @@ namespace CarCareTracker.Controllers { var existingPreference = existingUserColumnPreference.Single(); existingPreference.VisibleColumns = columnPreference.VisibleColumns; + existingPreference.ColumnOrder = columnPreference.ColumnOrder; } else { diff --git a/Models/User/UserColumnPreference.cs b/Models/User/UserColumnPreference.cs index 18bd80e..59fdebd 100644 --- a/Models/User/UserColumnPreference.cs +++ b/Models/User/UserColumnPreference.cs @@ -4,5 +4,6 @@ { public ImportMode Tab { get; set; } public List VisibleColumns { get; set; } = new List(); + public List ColumnOrder { get; set; } = new List(); } } \ No newline at end of file diff --git a/Views/Vehicle/_CollisionRecords.cshtml b/Views/Vehicle/_CollisionRecords.cshtml index 6743de1..ca9433c 100644 --- a/Views/Vehicle/_CollisionRecords.cshtml +++ b/Views/Vehicle/_CollisionRecords.cshtml @@ -54,37 +54,37 @@
  • @translator.Translate(userLanguage, "Visible Columns")
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
  • @@ -93,7 +93,7 @@ @foreach (string extraFieldColumn in extraFields) { var elementId = Guid.NewGuid(); -
  • +
  • diff --git a/Views/Vehicle/_Gas.cshtml b/Views/Vehicle/_Gas.cshtml index 45af564..85f28dd 100644 --- a/Views/Vehicle/_Gas.cshtml +++ b/Views/Vehicle/_Gas.cshtml @@ -104,55 +104,55 @@
  • @translator.Translate(userLanguage, "Visible Columns")
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
  • @@ -161,7 +161,7 @@ @foreach (string extraFieldColumn in extraFields) { var elementId = Guid.NewGuid(); -
  • +
  • diff --git a/Views/Vehicle/_OdometerRecords.cshtml b/Views/Vehicle/_OdometerRecords.cshtml index f74c1ff..80bc25d 100644 --- a/Views/Vehicle/_OdometerRecords.cshtml +++ b/Views/Vehicle/_OdometerRecords.cshtml @@ -54,37 +54,37 @@
  • @translator.Translate(userLanguage, "Visible Columns")
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
  • @@ -93,7 +93,7 @@ @foreach (string extraFieldColumn in extraFields) { var elementId = Guid.NewGuid(); -
  • +
  • diff --git a/Views/Vehicle/_ServiceRecords.cshtml b/Views/Vehicle/_ServiceRecords.cshtml index 51ef69e..ca63a21 100644 --- a/Views/Vehicle/_ServiceRecords.cshtml +++ b/Views/Vehicle/_ServiceRecords.cshtml @@ -54,37 +54,37 @@
  • @translator.Translate(userLanguage, "Visible Columns")
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
  • @@ -93,7 +93,7 @@ @foreach (string extraFieldColumn in extraFields) { var elementId = Guid.NewGuid(); -
  • +
  • diff --git a/Views/Vehicle/_SupplyRecords.cshtml b/Views/Vehicle/_SupplyRecords.cshtml index 21b452e..dad5a3e 100644 --- a/Views/Vehicle/_SupplyRecords.cshtml +++ b/Views/Vehicle/_SupplyRecords.cshtml @@ -54,49 +54,49 @@
  • @translator.Translate(userLanguage, "Visible Columns")
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
  • @@ -105,7 +105,7 @@ @foreach (string extraFieldColumn in extraFields) { var elementId = Guid.NewGuid(); -
  • +
  • diff --git a/Views/Vehicle/_TaxRecords.cshtml b/Views/Vehicle/_TaxRecords.cshtml index adc4749..2b674ae 100644 --- a/Views/Vehicle/_TaxRecords.cshtml +++ b/Views/Vehicle/_TaxRecords.cshtml @@ -54,31 +54,31 @@
  • @translator.Translate(userLanguage, "Visible Columns")
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
  • @@ -87,7 +87,7 @@ @foreach (string extraFieldColumn in extraFields) { var elementId = Guid.NewGuid(); -
  • +
  • diff --git a/Views/Vehicle/_UpgradeRecords.cshtml b/Views/Vehicle/_UpgradeRecords.cshtml index 7b3b7e8..251dc93 100644 --- a/Views/Vehicle/_UpgradeRecords.cshtml +++ b/Views/Vehicle/_UpgradeRecords.cshtml @@ -54,37 +54,37 @@
  • @translator.Translate(userLanguage, "Visible Columns")
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
  • @@ -93,7 +93,7 @@ @foreach (string extraFieldColumn in extraFields) { var elementId = Guid.NewGuid(); -
  • +
  • diff --git a/Views/Vehicle/_UserColumnPreferences.cshtml b/Views/Vehicle/_UserColumnPreferences.cshtml index 3eb6438..0fb59fd 100644 --- a/Views/Vehicle/_UserColumnPreferences.cshtml +++ b/Views/Vehicle/_UserColumnPreferences.cshtml @@ -1,9 +1,13 @@ @model IEnumerable \ No newline at end of file diff --git a/wwwroot/js/shared.js b/wwwroot/js/shared.js index d903903..a60e5d4 100644 --- a/wwwroot/js/shared.js +++ b/wwwroot/js/shared.js @@ -1370,7 +1370,7 @@ function searchTableRows(tabName) { } }); } -function loadUserColumnPreferences(columns) { +function loadUserColumnPreferences(columns, order) { if (columns.length == 0) { //user has no preference saved, reset to default return; @@ -1387,12 +1387,31 @@ function loadUserColumnPreferences(columns) { $(`[data-column='${x}']`).show(); } }); + order.map((x, y) => { + //re-order items in menu + var itemToMove = $(`[data-column-toggle='${x}'].col-visible-toggle`).closest('.dropdown-item'); + var itemCurrentlyInPosition = $('.dropdown-item[draggable="true"]')[y]; + itemToMove.insertBefore(itemCurrentlyInPosition); + //re-order table columns + $(`[data-column='${x}']`).css('order', y); + }); } function saveUserColumnPreferences(importMode) { var visibleColumns = $('.col-visible-toggle:checked').map((index, elem) => $(elem).attr('data-column-toggle')).toArray(); + var columnOrder = []; + var sortedOrderedTabs = $("ul.dropdown-menu > li[draggable='true']").toArray().sort((a, b) => { + var currentVal = $(a).css("order"); + var nextVal = $(b).css("order"); + return currentVal - nextVal; + }); + sortedOrderedTabs.map(elem => { + var elemName = $(elem).find('.col-visible-toggle').attr("data-column-toggle"); + columnOrder.push(elemName); + }); var columnPreference = { tab: importMode, - visibleColumns: visibleColumns + visibleColumns: visibleColumns, + columnOrder: columnOrder }; $.post('/Vehicle/SaveUserColumnPreferences', { columnPreference: columnPreference }, function (data) { if (!data) { @@ -1472,4 +1491,43 @@ function togglePasswordVisibility(elem) { passwordButton.removeClass('bi-eye-slash'); passwordButton.addClass('bi-eye'); } +} +var tableColumnDragToReorder = undefined; +function handleTableColumnDragStart(e) { + tableColumnDragToReorder = $(e.target).closest('.dropdown-item'); + //clear out order attribute. + $("ul.dropdown-menu > li[draggable='true']").map((index, elem) => { + $(elem).css('order', 0); + }) +} +function handleTableColumnDragOver(e) { + if (tableColumnDragToReorder == undefined || tableColumnDragToReorder == "") { + return; + } + var potentialDropTarget = $(e.target).closest('.list-group-item').find('.col-visible-toggle').attr("data-column-toggle"); + var draggedTarget = tableColumnDragToReorder.find('.col-visible-toggle').attr("data-column-toggle"); + if (draggedTarget != potentialDropTarget) { + var targetObj = $(e.target).closest('.dropdown-item'); + var draggedOrder = tableColumnDragToReorder.index(); + var targetOrder = targetObj.index(); + if (draggedOrder < targetOrder) { + tableColumnDragToReorder.insertAfter(targetObj); + } else { + tableColumnDragToReorder.insertBefore(targetObj); + } + } + else { + event.preventDefault(); + } +} +function handleTableColumnDragEnd(tabName) { + $("ul.dropdown-menu > li[draggable='true']").map((index, elem) => { + $(elem).css('order', $(elem).index()); + var columnName = $(elem).find('.col-visible-toggle').attr('data-column-toggle'); + $(`[data-column='${columnName}']`).css('order', $(elem).index()); + }); + saveUserColumnPreferences(tabName); + if (isDragging) { + isDragging = false; + } } \ No newline at end of file