Feature Suggestion: Drag Drop from a catalog of icons

[ridingmower]

It would nice to have a catalog basic widgets like so and allow user to drag and drop.

Lets assume we have a small catalog of widgets like above

<!-- Tux Dashboard container -->
<div id="dashboard-container">
  <!-- tux dash grid -->
  <div id="dashboard-grid" class="grid">
    <!-- Widgets will be added here -->
  </div>
</div>

<!-- Sidebar catalog -->
<div id="sidebar-catalog">
  <!-- Icon list -->
  <ul id="icon-list">
    <!-- Icon items -->
    <li id="icon-1" class="icon-item">
      <i class="fa fa-chart-bar"></i>
      <span>Chart</span>
    </li>
    <li id="icon-2" class="icon-item">
      <i class="fa fa-table"></i>
      <span>Table</span>
    </li>
    <!-- Add more icons here -->
  </ul>
</div>

---

We can use the on drop , need to add a js function to post the save.. but doable I think

// Import jQuery UI
import $ from 'jquery';
import 'jquery-ui';

// Initialize the dashboard grid as a drappable tux container
$('#dashboard-grid').droppable({
  accept: '.icon-item', // some icon may font awesome free 
  drop: function(event, ui) {
    // Get the dropped icon item inside sidebar view
    const iconItem = ui.draggable;
    // Get the dashboard grid container
    const dashboardGrid = $(this);
    // Create a new widget element
    const widget = $('<div class="widget"></div>');
    // Add the widget to the dashboard grid
    dashboardGrid.append(widget);
    // Set the widget's content based on the dropped icon item
    widget.html(`<h2>${iconItem.find('span').text()}</h2>`);
    // Add a remove button to the widget
    widget.append('<button class="remove-widget">Remove</button>');
    // Make the widget draggable
    widget.draggable({
      containment: '#dashboard-grid',
      grid: [50, 50]
    });
    // Bind the remove button click event
    widget.find('.remove-widget').on('click', function() {
      widget.remove();
    });
  }
});

// Make the icon items draggable
$('#icon-list li').draggable({
  helper: 'clone',
  revert: 'invalid'
});

To serve it up we can have an API controller

Since you have roles now, which is great BTW 👏 , we could add GetWidgetCatalogList, and then SaveUserLayout //blah blah...

[ApiController]
[Route("api/[controller]")]
public class DashboardController : OurTuxControllerBase //blah blah...
{
  private readonly IDashboardRepository _repository;

  public DashboardController(IDashboardRepository repository)
  {
    _repository = repository;
  }

  [HttpPost]
  public IActionResult CreateWidget(WidgetModel model)
  {
    // Create a new widget entity
    var widget = new Widget
    {
      Type = model.Type,
      Title = model.Title,
      Content = model.Content
    };
    // Save the widget to the database
    _repository.CreateWidget(widget);
    return Ok(widget);
  }

  [HttpGet]
  public IActionResult GetDashboard()
  {
    // Retrieve the dashboard layout from the database
    var dashboard = _repository.GetDashboard();
    return Ok(dashboard);
  }
}

public class WidgetModel
{
  public string Type { get; set; }
  public string Title { get; set; }
  public string Content { get; set; }
}

public interface IDashboardRepository
{
  void CreateWidget(Widget widget);
  Dashboard GetDashboard();
}

public class Dashboard
{
  public List<Widget> Widgets { get; set; }
}

public class Widget
{
  public int Id { get; set; }
  public string Type { get; set; }
  public string Title { get; set; }
  public string Content { get; set; }
}

[jdanylko]

At first glance, it looked like you were building a FormBuilder.

I'm guessing this would be the quick and easy way to drag widgets from a bar onto a LayoutRow?

What you're essentially doing is bypassing the "Add Widget Dialog" and dragging the widgets immediately onto the dashboard?

Regarding the front-end, yes, we (you) can build just about anything using a JS framework.

I'll let this concept simmer since this approach is interesting, is growing on me, and seems more intuitive.