Reordenando os itens e salvando no Django

reorder.md

Reordenando os itens e salvando no Django

• HTML

<input id="hid_order" name="hid_order" type="hidden" />
<div id="sortable_items">
  {% for t in tasks %}
  <div class="row">
    <!-- O segredo está aqui, use {{ t.pk }} -->
    <div id="{{ t.pk }}" class="col-xs-10">
      <i class="fa fa-bars text-primary"></i>
      {{ t.tasktemplate.title }}
    </div>
    <a class="col-xs-1 text-danger" id="del_{{ t.pk }}" href="#" data-toggle="modal" data-target="#DeleteModal">
      <i class="glyphicon glyphicon-remove"></i>
    </a>
  </div>
  {% endfor %}
</div>

• JS

function save_order() {
  $.ajax({
    // Calma, vou tirar o url django daqui =D
    url: "{% url 'save_order_onboardtemplatetasks' obj.pk %}",
    type: "POST",
    data: {
      data_hid_order: $('#hid_order').val(),
    },
    success: function(response) {
      // body...
    },
    error: function(xhr, errmsg, err) {
      // body...
    },
  });
}

let listValues = []
let strItems = "";

$('#sortable_items').sortable({
  update: function(e, ui) {
    strItems = ""
    $('#sortable_items').find('div div').each(function(i) {
      var item = $(this);
      strItems += item.attr("id") + ',';
    });
    // Remove a última virgula e Transforma em lista
    listValues = strItems.slice(0,-1).split(',')
    // Insere listValues em hid_order.
    $('#hid_order').val(listValues);
    save_order()
  }
});

• Django

def save_order_onboardtemplatetasks(request, pk):
    obj = get_object_or_404(OnBoardTemplate, pk=pk)
    if request.is_ajax():
        items = request.POST.get('data_hid_order')
        items = items.split(',')
        for new_order, item in enumerate(items):
            task = OnBoardTemplateTasks.objects.get(pk=item)
            task.order = new_order
            task.save()
    response = {'status': 'update'}
    return JsonResponse(response)

Versão 2 (com load page)

<input id="hid_order" name="hid_order" type="hidden" />
<div id="lista">
{% include "onboard/_include_onboardtemplatetasks.html" %}
</div>

• _include_onboardtemplatetasks.html

{% load i18n %}
{% load static %}

<div id="sortable_items">
  {% for t in tasks %}
    <div class="row">
      <div id="{{ t.pk }}" class="col-xs-10">
        <i class="fa fa-bars text-primary"></i>
        {{ t.tasktemplate.title }}
      </div>
      <a class="col-xs-1 text-danger" id="del_{{ t.pk }}" href="#" data-toggle="modal" data-target="#DeleteModal">
        <i class="glyphicon glyphicon-remove"></i>
      </a>
    </div>
  {% endfor %}
</div>

<script src="{% static 'company/js/jquery-ui.js' %}"></script>
<script src="{% static 'company/js/ajax-main.js' %}"></script>

• js

  function save_order() {
    $.ajax({
      url: this.action,
      type: "POST",
      data: {
        data_hid_order: $('#hid_order').val(),
      },
      success: function(response) {
        $('#lista').load("{% url 'include_onboardtemplatetasks' obj.pk %}");
      },
      error: function(xhr, errmsg, err) {
        console.log('Falhou');
      },
    });
  }

  let listValues = []
  let strItems = "";

  $('#sortable_items').sortable({
    update: function(e, ui) {
      strItems = ""
      $('#sortable_items').find('div div').each(function(i) {
        var item = $(this);
        strItems += item.attr("id") + ',';
      });
      // Remove a última virgula e Transforma em lista
      listValues = strItems.slice(0,-1).split(',')
      // Insere listValues em hid_order.
      $('#hid_order').val(listValues);
      save_order()
    }
  });

class OnBoardDetail(generic.DetailView):
    model = OnBoardTemplate
    template_name = 'onboard/onboard-templates-detail.html'

    def get_context_data(self, **kwargs):
        context = super(OnBoardDetail, self).get_context_data(**kwargs)
        obj = self.object
        context['tasks'] = OnBoardTemplateTasks.objects.filter(onboardtemplate=obj)
        context['obj'] = obj
        return context

    def post(self, request, *args, **kwargs):
        obj = self.get_object()

        if 'add_btn' in request.POST:
            task_list = request.POST.getlist('task_selected')

            for i, item in enumerate(task_list):
                t = TaskTemplate.objects.get(id=item)
                # tasks is m2m with through='OnBoardTemplateTasks'
                element = OnBoardTemplateTasks.objects.filter(
                    onboardtemplate=obj,
                    tasktemplate=t,).first()
                if not element:
                    OnBoardTemplateTasks.objects.create(
                        onboardtemplate=obj,
                        tasktemplate=t,
                        order=i
                    )

            # Renumera as tarefas após adicionados
            for i, item in enumerate(task_list):
                t = TaskTemplate.objects.get(id=item)
                element = OnBoardTemplateTasks.objects.get(
                    onboardtemplate=obj,
                    tasktemplate=t
                )
                element.order = i
                element.save()

            messages.success(request, _('Item adicionado com sucesso.'))

        if request.is_ajax():
            items = request.POST.get('data_hid_order')
            items = items.split(',')
            for new_order, item in enumerate(items):
                task = OnBoardTemplateTasks.objects.get(pk=item)
                task.order = new_order
                task.save()
            response = {'status': 'update'}
            return JsonResponse(response)

        return HttpResponseRedirect(reverse('onboardtmpdetail', kwargs={'pk': obj.pk}))


def include_onboardtemplatetasks(request, pk):
    obj = get_object_or_404(OnBoardTemplate, pk=pk)
    tasks = OnBoardTemplateTasks.objects.filter(onboardtemplate=obj)
    ctx = {
        'tasks': tasks,
        'obj': obj
    }
    template_name = 'onboard/_include_onboardtemplatetasks.html'
    return render(request, template_name, ctx)