Todoアプリで完了ボタンを押すと完了したタスクが下に移動するようにしたい

Question

Todoアプリで完了ボタン（✔ボタン）を押すと完了したタスクが下に(ページネーションの下）移動するようにしたいです

・コード（完了ボタンの処理はなし）

from django.db import models
from django.utils import timezone
# Create your models here.
class Category(models.Model):
    class Meta:
        db_table = "category"
        verbose_name = "カテゴリ"
        verbose_name_plural = "カテゴリ"

    category_name = models.CharField(max_length=255,unique=True,verbose_name="カテゴリの名前",null=True)

    def __str__(self):
        return self.category_name

PRIORITY = (('danger','high'),('info','normal'),('success','low'))
class TodoModel(models.Model):
    class Meta:
        db_table = "todomodel"
        verbose_name = "todoモデル"
        verbose_name_plural = "todoモデル"

    title = models.CharField(max_length=100,verbose_name="タイトル")
    memo = models.TextField(verbose_name="メモ")
    priority = models.CharField(
        max_length = 50,
        choices = PRIORITY,
        verbose_name="優先度"
    )
    duedate = models.DateTimeField(verbose_name="期日",default=timezone.now)
    category = models.ForeignKey(Category,on_delete = models.PROTECT,verbose_name="カテゴリ",null=True)
    def __str__(self):
        return self.title

from django.shortcuts import render
from django.views.generic import ListView,CreateView,UpdateView
from .models import TodoModel
from django.urls import reverse_lazy
from django_filters.views import FilterView
from .filters import TodoFilter
from django.shortcuts import redirect
from .form import TodoForm
from django.conf import settings
import datetime
from django.core.mail import send_mail
# Create your views here.

class TodoList(FilterView):
    template_name = 'list.html'
    model = TodoModel
    paginate_by = 10

    filterset_class = TodoFilter
    strict = False

    def get(self, request, **kwargs):
        if request.GET:
            request.session['query'] = request.GET
        else:
            request.GET = request.GET.copy()
            if 'query' in request.session.keys():
                for key in request.session['query'].keys():
                    request.GET[key] = request.session['query'][key]

        return super().get(request, **kwargs)

# 削除ボタンの処理
    def post(self,request):
        delete_pk = request.POST['delete']
        TodoModel.objects.filter(pk=delete_pk).delete()
        return redirect('list')

# 通知処理
    nowtime = datetime.datetime.now().strftime('%Y-%m-%d %H:%M')
    time = datetime.datetime.strptime(nowtime,'%Y-%m-%d %H:%M')
    todo_obj = TodoModel.objects.all()
    for obj in todo_obj:
        if time == (obj.duedate - datetime.timedelta(minutes=1)):
            subject = 'タイトル：{}'.format(obj.title)
            massege = 'メモ：{}\n期日：{}\nカテゴリ：{}\n'.format(obj.memo,obj.duedate,obj.category)
            from_mail = []
            recipient = [settings.EMAIL_HOST_USER]
            send_mail(subject, massege, from_mail, recipient)

class TodoCreate(CreateView):
    template_name = 'create.html'
    model = TodoModel
    form_class = TodoForm
    success_url = reverse_lazy('list')


class TodoUpdate(UpdateView):
    template_name = 'update.html'
    model = TodoModel
    fields = ('title','memo','priority','duedate','category')
    success_url = reverse_lazy('list')

{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block customcss %}
  <link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
  <script src="https://kit.fontawesome.com/5b1578e2a2.js" crossorigin="anonymous"></script>
{% endblock customcss %}

{% block content %}
<!-- ヘッダー -->
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4"><a class="title" href="#">Todo List</a></h1>
    <p class="lead">TodoListを使って毎日を効率的に過ごしましょう。</p>
  </div>
</div>

<!-- モーダル　絞り込み検索-->
<div class='container'>
  <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">絞り込み検索</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="filter" method="get">
                    <div class="modal-body">
                         {{filter.form|crispy}}
                    </div>
                </form>
                <div class="modal-footer">
                    <a class="btn btn-outline-secondary" data-dismiss="modal">戻る</a>
                    <button type="submit" class="btn btn-outline-secondary" form="filter">検索</button>
                </div>
            </div>
        </div>
    </div>


  <div class="create"><a href="{% url 'create' %}" class="btn btn--orange btn--cubic btn--shadow" tabindex="-1" role="button" aria-disabled="true">NEW LIST</a></div>
  <div class="search"><a class="btn btn-outline-secondary" data-toggle="modal" data-target="#myModal" href="#">SEARCH</a></div>

<!-- タスク -->
  {% for item in object_list %}
    <div class="alert alert-{{ item.priority }}" role="alert">
      <!-- 完了ボタン -->
      <form action="" method="POST" style="display:inline;">{% csrf_token %}
        <button class="Button-style" type="submit" name="done" value="{{item.pk}}">✔</button>
      </form>
      <p class="item_object">TITLE：{{ item.title}}　LIMIT：{{ item.duedate|date:"Y-m-d H:i" }}　CATEGORY：{{ item.category }}</p>
      <a data-toggle="modal" data-target="#DetailModal{{ item.pk }}" class="btn2 btn--detail btn--circle  btn--shadow--a" tabindex="-1" role="button" aria-disabled="true"><i class="fas fa-eye fa-3x" data-fa-transform="shrink-8 up-5 left-1.05"></i></a>
      <a data-toggle="modal" data-target="#DeleteModal{{ item.pk }}" class="btn2 btn--delete btn--circle  btn--shadow--a" tabindex="-1" role="button" aria-disabled="true"><i class="fas fa-trash-alt fa-3x" data-fa-transform="shrink-8 up-5 right-1.1"></i></a>
      <a href="{% url 'update' item.pk %}" class="btn2 btn--update btn--circle  btn--shadow--a" tabindex="-1" role="button" aria-disabled="true"><i class="fas fa-pen-fancy fa-3x" data-fa-transform="shrink-8 up-5"></i></a>
    </div>

    <!-- モーダル　削除画面 -->
    <div class="modal fade" id="DeleteModal{{ item.pk }}" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">削除確認画面</h4>
          </div>
          <div class="modal-body">
            <label>データを削除しますか？</label>
            <p>TITLE：{{ item.title}}　LIMIT：{{ item.duedate|date:"Y-m-d H:i" }}　CATEGORY：{{ item.category }}</p>
          </div>
          <div class="modal-footer">
            <form action="" method="POST">{% csrf_token %}
              <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
              <button type="submit" class="delete-button" name="delete" value="{{item.pk}}">削除</button>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- モーダル　詳細画面 -->
    <div class="modal fade" id="DetailModal{{ item.pk }}" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">詳細画面</h4>
          </div>
          <div class="modal-body">
            <p>タイトル：{{ item.title }}</p>
            <p>メモ：{{ item.memo|linebreaksbr }}</p>
            <p>期日：{{ item.duedate|date:"Y-m-d H:i" }}</p>
            <p>カテゴリ：{{ item.category }}</p>
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>

  {% empty %}
    <li class="list-group-item">
      対象のデータがありません
    </li>
  {% endfor %}
</div>
<!-- ページネーション読み込み -->
  {% include "./pagination.html" %}
{% endblock content %}

とりあえず、完了ボタンはつけたのですが、viewやhtmlにどのような処理を書けばよいかわかりません。viewに、

def done(self,request):
    done_pk = request.POST('done')
    context = {'done':TodoModel.objects.filter(pk=done_pk)}
    return render(request,'list.html',context)

このように書いてみましたが、うまくいきませんでした。
一例としてどのような書き方がありますか？

Comments

[ryo2003]

私自身まだ初学者なので間違っていたら申し訳ないんですが、
最後のviewに書いてる
request.POST('done')で欲しいpk受け取れてますか？

Answer 1

models.py のtodoモデルに、完了フラグ（変数名は done でも良いです）を持たせましょう。
その上で、完了フラグの値によって、ページネーションの上に表示するか、下に表示するかを、queryも場合分けして記述すれば良いはずです。

もし、完了フラグ という名前とするならば、デフォルト（ToDoの新規登録時）は false、完了時に True とするのが分かり易いかと思います。

request.POST('done')で欲しいpk受け取れてますか？

⇒ request.POST['done'] でしょうかね。

　

加えて、（レコードを論理削除するならば）削除フラグも必要ですね。
（レコードを物理抹消するならば不要です。）