[DOCKER] Create a Todo app with Django ⑤ Create a task editing function

Next, we will create a task editing function.

List of articles

Create a Todo app with Django ① Build an environment with Docker Create a Todo app with Django ② Create a folder list page Create a Todo app with Django ③ Create a task list page Create Todo app with Django ④ Implementation of folder and task creation function Create a Todo app with Django ⑤ Create a task editing function

URL settings

First, set the URL. Add the following sentence to todo / urls.py.

todo/urls.py

path('<int:id>/tasks/<int:task_id>', views.edit_task, name='tasks.edit')

Insert link

Insert the link in the edit part of templates / index.html as shown below.

templates/index.html

<a href="{% url 'tasks.edit' id=current_folder_id task_id=task.id %}}">Edit</a>

template

Create ʻedit.html under the templates directory. Then edit ʻedit.html as follows.

templates/edit.html

{% extends 'base.html' %}

{% block styles %}
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
  <link rel="stylesheet" href="https://npmcdn.com/flatpickr/dist/themes/material_blue.css">
{% endblock %}

{% block content %}
  <div class="container">
    <div class="row">
      <div class="col col-md-offset-3 col-md-6">
        <nav class="panel panel-default">
          <div class="panel-heading">Edit task</div>
          <div class="panel-body">
            <form method="POST">
              {% csrf_token %}
              {{ form.as_p }}
              <div class="text-right">
                <button type="submit" class="btn btn-primary">Send</button>
              </div>
            </form>
          </div>
        </nav>
      </div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
  <script src="https://npmcdn.com/flatpickr/dist/flatpickr.min.js"></script>
  <script src="https://npmcdn.com/flatpickr/dist/l10n/ja.js"></script>
  <script>
    flatpickr(document.getElementsByName('due_date'), {
      locale: 'ja',
      minDate: new Date()
    });
  </script>
{% endblock %}

Next, I will write a view.

View Add the following ʻedit_task` method to the view.

views.py

def edit_task(request, id, task_id):
    #Get the selected task
    task = get_object_or_404(Task, id=task_id)
    if request.method == "POST":
        form = TaskForm(request.POST, instance=task)
        if form.is_valid():
            task = form.save(commit=False)
            task.save()
            return redirect('tasks.index', id=task.folder_id.id)
    else:
        form = TaskForm(instance=task)
    return render(request, 'edit.html', {'form': form}, {'task':task})

When data is added to request.POST, the processing of the if statement is written so that the contents entered in the form are saved in the database.

Complete!

This is the end of this chapter and the Todo app is complete! The code so far can be found in the repository's chapter5 branch.

From here, I think you can also add a delete function or an authentication function, so I think it's a good idea to customize it! Thank you for referring to this tutorial!

List of articles

Create a Todo app with Django ① Build an environment with Docker Create a Todo app with Django ② Create a folder list page Create a Todo app with Django ③ Create a task list page Create Todo app with Django ④ Implementation of folder and task creation function Create a Todo app with Django ⑤ Create a task editing function