├── AlpineTodo
    ├── __init__.py
    ├── __pycache__
    │   ├── __init__.cpython-38.pyc
    │   ├── settings.cpython-38.pyc
    │   ├── urls.cpython-38.pyc
    │   └── wsgi.cpython-38.pyc
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py
├── manage.py
├── tasks
    ├── __init__.py
    ├── __pycache__
    │   ├── __init__.cpython-38.pyc
    │   ├── admin.cpython-38.pyc
    │   ├── models.cpython-38.pyc
    │   ├── urls.cpython-38.pyc
    │   └── views.cpython-38.pyc
    ├── admin.py
    ├── apps.py
    ├── migrations
    │   ├── 0001_initial.py
    │   ├── 0002_auto_20200921_0812.py
    │   ├── __init__.py
    │   └── __pycache__
    │   │   ├── 0001_initial.cpython-38.pyc
    │   │   ├── 0002_auto_20200921_0812.cpython-38.pyc
    │   │   └── __init__.cpython-38.pyc
    ├── models.py
    ├── tests.py
    ├── urls.py
    └── views.py
└── templates
    └── index.html


/AlpineTodo/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitgeese/Alpine.js-Django-Todo-List/199cb2d384829f53378ab9d883f7a3c0a7a87f2b/AlpineTodo/__init__.py


--------------------------------------------------------------------------------
/AlpineTodo/__pycache__/__init__.cpython-38.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitgeese/Alpine.js-Django-Todo-List/199cb2d384829f53378ab9d883f7a3c0a7a87f2b/AlpineTodo/__pycache__/__init__.cpython-38.pyc


--------------------------------------------------------------------------------
/AlpineTodo/__pycache__/settings.cpython-38.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitgeese/Alpine.js-Django-Todo-List/199cb2d384829f53378ab9d883f7a3c0a7a87f2b/AlpineTodo/__pycache__/settings.cpython-38.pyc


--------------------------------------------------------------------------------
/AlpineTodo/__pycache__/urls.cpython-38.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitgeese/Alpine.js-Django-Todo-List/199cb2d384829f53378ab9d883f7a3c0a7a87f2b/AlpineTodo/__pycache__/urls.cpython-38.pyc


--------------------------------------------------------------------------------
/AlpineTodo/__pycache__/wsgi.cpython-38.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitgeese/Alpine.js-Django-Todo-List/199cb2d384829f53378ab9d883f7a3c0a7a87f2b/AlpineTodo/__pycache__/wsgi.cpython-38.pyc


--------------------------------------------------------------------------------
/AlpineTodo/asgi.py:
--------------------------------------------------------------------------------
 1 | """
 2 | ASGI config for AlpineTodo project.
 3 | 
 4 | It exposes the ASGI callable as a module-level variable named ``application``.
 5 | 
 6 | For more information on this file, see
 7 | https://docs.djangoproject.com/en/3.1/howto/deployment/asgi/
 8 | """
 9 | 
10 | import os
11 | 
12 | from django.core.asgi import get_asgi_application
13 | 
14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'AlpineTodo.settings')
15 | 
16 | application = get_asgi_application()
17 | 


--------------------------------------------------------------------------------
/AlpineTodo/settings.py:
--------------------------------------------------------------------------------
  1 | """
  2 | Django settings for AlpineTodo project.
  3 | 
  4 | Generated by 'django-admin startproject' using Django 3.1.1.
  5 | 
  6 | For more information on this file, see
  7 | https://docs.djangoproject.com/en/3.1/topics/settings/
  8 | 
  9 | For the full list of settings and their values, see
 10 | https://docs.djangoproject.com/en/3.1/ref/settings/
 11 | """
 12 | import os
 13 | from pathlib import Path
 14 | 
 15 | # Build paths inside the project like this: BASE_DIR / 'subdir'.
 16 | BASE_DIR = Path(__file__).resolve().parent.parent
 17 | 
 18 | 
 19 | # Quick-start development settings - unsuitable for production
 20 | # See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/
 21 | 
 22 | # SECURITY WARNING: keep the secret key used in production secret!
 23 | SECRET_KEY = '2ez=)xh%dze^oko7#*ms=na%i61e5*i%5z1*v+y%+yz#_n$+nb'
 24 | 
 25 | # SECURITY WARNING: don't run with debug turned on in production!
 26 | DEBUG = True
 27 | 
 28 | ALLOWED_HOSTS = []
 29 | 
 30 | 
 31 | # Application definition
 32 | 
 33 | INSTALLED_APPS = [
 34 |     'django.contrib.admin',
 35 |     'django.contrib.auth',
 36 |     'django.contrib.contenttypes',
 37 |     'django.contrib.sessions',
 38 |     'django.contrib.messages',
 39 |     'django.contrib.staticfiles',
 40 |     'tasks',
 41 |     'ordered_model',
 42 | ]
 43 | 
 44 | MIDDLEWARE = [
 45 |     'django.middleware.security.SecurityMiddleware',
 46 |     'django.contrib.sessions.middleware.SessionMiddleware',
 47 |     'django.middleware.common.CommonMiddleware',
 48 |     'django.middleware.csrf.CsrfViewMiddleware',
 49 |     'django.contrib.auth.middleware.AuthenticationMiddleware',
 50 |     'django.contrib.messages.middleware.MessageMiddleware',
 51 |     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 52 | ]
 53 | 
 54 | ROOT_URLCONF = 'AlpineTodo.urls'
 55 | 
 56 | TEMPLATES = [
 57 |     {
 58 |         'BACKEND': 'django.template.backends.django.DjangoTemplates',
 59 |         'DIRS': [os.path.join(BASE_DIR, 'templates')]
 60 |         ,
 61 |         'APP_DIRS': True,
 62 |         'OPTIONS': {
 63 |             'context_processors': [
 64 |                 'django.template.context_processors.debug',
 65 |                 'django.template.context_processors.request',
 66 |                 'django.contrib.auth.context_processors.auth',
 67 |                 'django.contrib.messages.context_processors.messages',
 68 |             ],
 69 |         },
 70 |     },
 71 | ]
 72 | 
 73 | WSGI_APPLICATION = 'AlpineTodo.wsgi.application'
 74 | 
 75 | 
 76 | # Database
 77 | # https://docs.djangoproject.com/en/3.1/ref/settings/#databases
 78 | 
 79 | DATABASES = {
 80 |     'default': {
 81 |         'ENGINE': 'django.db.backends.sqlite3',
 82 |         'NAME': BASE_DIR / 'db.sqlite3',
 83 |     }
 84 | }
 85 | 
 86 | 
 87 | # Password validation
 88 | # https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators
 89 | 
 90 | AUTH_PASSWORD_VALIDATORS = [
 91 |     {
 92 |         'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
 93 |     },
 94 |     {
 95 |         'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
 96 |     },
 97 |     {
 98 |         'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
 99 |     },
100 |     {
101 |         'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
102 |     },
103 | ]
104 | 
105 | 
106 | # Internationalization
107 | # https://docs.djangoproject.com/en/3.1/topics/i18n/
108 | 
109 | LANGUAGE_CODE = 'en-us'
110 | 
111 | TIME_ZONE = 'UTC'
112 | 
113 | USE_I18N = True
114 | 
115 | USE_L10N = True
116 | 
117 | USE_TZ = True
118 | 
119 | 
120 | # Static files (CSS, JavaScript, Images)
121 | # https://docs.djangoproject.com/en/3.1/howto/static-files/
122 | 
123 | STATIC_URL = '/static/'
124 | 


--------------------------------------------------------------------------------
/AlpineTodo/urls.py:
--------------------------------------------------------------------------------
1 | from django.contrib import admin
2 | from django.urls import path, include
3 | 
4 | urlpatterns = [
5 |     path('admin/', admin.site.urls),
6 |     path('', include('tasks.urls')),
7 | ]
8 | 


--------------------------------------------------------------------------------
/AlpineTodo/wsgi.py:
--------------------------------------------------------------------------------
 1 | """
 2 | WSGI config for AlpineTodo project.
 3 | 
 4 | It exposes the WSGI callable as a module-level variable named ``application``.
 5 | 
 6 | For more information on this file, see
 7 | https://docs.djangoproject.com/en/3.1/howto/deployment/wsgi/
 8 | """
 9 | 
10 | import os
11 | 
12 | from django.core.wsgi import get_wsgi_application
13 | 
14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'AlpineTodo.settings')
15 | 
16 | application = get_wsgi_application()
17 | 


--------------------------------------------------------------------------------
/manage.py:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env python
 2 | """Django's command-line utility for administrative tasks."""
 3 | import os
 4 | import sys
 5 | 
 6 | 
 7 | def main():
 8 |     """Run administrative tasks."""
 9 |     os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'AlpineTodo.settings')
10 |     try:
11 |         from django.core.management import execute_from_command_line
12 |     except ImportError as exc:
13 |         raise ImportError(
14 |             "Couldn't import Django. Are you sure it's installed and "
15 |             "available on your PYTHONPATH environment variable? Did you "
16 |             "forget to activate a virtual environment?"
17 |         ) from exc
18 |     execute_from_command_line(sys.argv)
19 | 
20 | 
21 | if __name__ == '__main__':
22 |     main()
23 | 


--------------------------------------------------------------------------------
/tasks/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitgeese/Alpine.js-Django-Todo-List/199cb2d384829f53378ab9d883f7a3c0a7a87f2b/tasks/__init__.py


--------------------------------------------------------------------------------
/tasks/__pycache__/__init__.cpython-38.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitgeese/Alpine.js-Django-Todo-List/199cb2d384829f53378ab9d883f7a3c0a7a87f2b/tasks/__pycache__/__init__.cpython-38.pyc


--------------------------------------------------------------------------------
/tasks/__pycache__/admin.cpython-38.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitgeese/Alpine.js-Django-Todo-List/199cb2d384829f53378ab9d883f7a3c0a7a87f2b/tasks/__pycache__/admin.cpython-38.pyc


--------------------------------------------------------------------------------
/tasks/__pycache__/models.cpython-38.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitgeese/Alpine.js-Django-Todo-List/199cb2d384829f53378ab9d883f7a3c0a7a87f2b/tasks/__pycache__/models.cpython-38.pyc


--------------------------------------------------------------------------------
/tasks/__pycache__/urls.cpython-38.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitgeese/Alpine.js-Django-Todo-List/199cb2d384829f53378ab9d883f7a3c0a7a87f2b/tasks/__pycache__/urls.cpython-38.pyc


--------------------------------------------------------------------------------
/tasks/__pycache__/views.cpython-38.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitgeese/Alpine.js-Django-Todo-List/199cb2d384829f53378ab9d883f7a3c0a7a87f2b/tasks/__pycache__/views.cpython-38.pyc


--------------------------------------------------------------------------------
/tasks/admin.py:
--------------------------------------------------------------------------------
1 | from django.contrib import admin
2 | 
3 | # Register your models here.
4 | 


--------------------------------------------------------------------------------
/tasks/apps.py:
--------------------------------------------------------------------------------
1 | from django.apps import AppConfig
2 | 
3 | 
4 | class TasksConfig(AppConfig):
5 |     name = 'tasks'
6 | 


--------------------------------------------------------------------------------
/tasks/migrations/0001_initial.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 3.1.1 on 2020-09-19 14:41
 2 | 
 3 | from django.db import migrations, models
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     initial = True
 9 | 
10 |     dependencies = [
11 |     ]
12 | 
13 |     operations = [
14 |         migrations.CreateModel(
15 |             name='Task',
16 |             fields=[
17 |                 ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
18 |                 ('title', models.CharField(max_length=255)),
19 |                 ('completed', models.BooleanField(default=False)),
20 |             ],
21 |         ),
22 |     ]
23 | 


--------------------------------------------------------------------------------
/tasks/migrations/0002_auto_20200921_0812.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 3.1.1 on 2020-09-21 08:12
 2 | 
 3 | from django.db import migrations, models
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     dependencies = [
 9 |         ('tasks', '0001_initial'),
10 |     ]
11 | 
12 |     operations = [
13 |         migrations.AlterModelOptions(
14 |             name='task',
15 |             options={'ordering': ('order',)},
16 |         ),
17 |         migrations.AddField(
18 |             model_name='task',
19 |             name='order',
20 |             field=models.PositiveIntegerField(db_index=True, default=1, editable=False, verbose_name='order'),
21 |             preserve_default=False,
22 |         ),
23 |     ]
24 | 


--------------------------------------------------------------------------------
/tasks/migrations/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitgeese/Alpine.js-Django-Todo-List/199cb2d384829f53378ab9d883f7a3c0a7a87f2b/tasks/migrations/__init__.py


--------------------------------------------------------------------------------
/tasks/migrations/__pycache__/0001_initial.cpython-38.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitgeese/Alpine.js-Django-Todo-List/199cb2d384829f53378ab9d883f7a3c0a7a87f2b/tasks/migrations/__pycache__/0001_initial.cpython-38.pyc


--------------------------------------------------------------------------------
/tasks/migrations/__pycache__/0002_auto_20200921_0812.cpython-38.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitgeese/Alpine.js-Django-Todo-List/199cb2d384829f53378ab9d883f7a3c0a7a87f2b/tasks/migrations/__pycache__/0002_auto_20200921_0812.cpython-38.pyc


--------------------------------------------------------------------------------
/tasks/migrations/__pycache__/__init__.cpython-38.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitgeese/Alpine.js-Django-Todo-List/199cb2d384829f53378ab9d883f7a3c0a7a87f2b/tasks/migrations/__pycache__/__init__.cpython-38.pyc


--------------------------------------------------------------------------------
/tasks/models.py:
--------------------------------------------------------------------------------
 1 | from django.db import models
 2 | from ordered_model.models import OrderedModel
 3 | 
 4 | 
 5 | class Task(OrderedModel):
 6 |     STATUS = (
 7 |         ('in progress', 'In Progress'),
 8 |         ('finished', 'Finished')
 9 |     )
10 |     title = models.CharField(max_length=255)
11 |     completed = models.BooleanField(default=False)
12 | 


--------------------------------------------------------------------------------
/tasks/tests.py:
--------------------------------------------------------------------------------
1 | from django.test import TestCase
2 | 
3 | # Create your tests here.
4 | 


--------------------------------------------------------------------------------
/tasks/urls.py:
--------------------------------------------------------------------------------
 1 | from django.urls import path
 2 | 
 3 | from . import views
 4 | 
 5 | urlpatterns = [
 6 |     path('', views.index, name='index'),
 7 |     path('tasks/', views.task_list, name='task_list'),
 8 |     path('tasks/create/', views.create_task, name='create_task'),
 9 |     path('tasks/<int:task_id>/delete/', views.delete_task, name='delete_task'),
10 |     path('tasks/<int:task_id>/update/', views.update_task_status, name='update_task'),
11 |     path('tasks/<int:task_id>/updateOrder/', views.update_task_order, name='update_task_order'),
12 | ]
13 | 


--------------------------------------------------------------------------------
/tasks/views.py:
--------------------------------------------------------------------------------
 1 | from django.http import JsonResponse
 2 | from django.shortcuts import get_object_or_404, render
 3 | from django.views.decorators.csrf import csrf_exempt
 4 | 
 5 | from tasks.models import Task
 6 | 
 7 | 
 8 | def index(request):
 9 |     return render(request, 'index.html')
10 | 
11 | 
12 | def task_list(request):
13 |     tasks = [{"id": task.id,
14 |               "title": task.title,
15 |               "completed": task.completed,
16 |               'position': task.order} for task in Task.objects.all()]
17 |     return JsonResponse(status=200, data=tasks, safe=False)
18 | 
19 | 
20 | def create_task(request):
21 |     title = request.POST.get('title')
22 |     if not title:
23 |         return JsonResponse(status=400, data={'error': 'title is required'})
24 |     task = Task.objects.create(title=title)
25 |     return JsonResponse(status=201, data={'title': task.title,
26 |                                           'completed': task.completed,
27 |                                           'id': task.id,
28 |                                           'position': task.order}, safe=False)
29 | 
30 | 
31 | def delete_task(request, task_id):
32 |     task = get_object_or_404(Task, pk=task_id)
33 |     task.delete()
34 |     return JsonResponse(status=204, data={'message': 'task deleted'})
35 | 
36 | 
37 | def update_task_status(request, task_id):
38 |     task = get_object_or_404(Task, pk=task_id)
39 |     status = request.POST.get('status')
40 |     if not status:
41 |         return JsonResponse(status=400, data={'error': 'status is required'})
42 |     task.completed = int(status)
43 |     task.save()
44 |     return JsonResponse(status=204, data={'message': 'task status updated'})
45 | 
46 | 
47 | def update_task_order(request, task_id):
48 |     task = get_object_or_404(Task, pk=task_id)
49 |     order = request.POST.get('position')
50 |     if not order:
51 |         return JsonResponse(status=400, data={'error': 'position is required'})
52 |     task.to(int(order))
53 |     return JsonResponse(data={"message": "position updated"}, status=200)
54 | 
55 | 


--------------------------------------------------------------------------------
/templates/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |     <title>Simple ToDo List</title>
  8 | 
  9 |     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
 10 |     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" defer></script>
 11 |     <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
 12 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.2/Sortable.min.js" ></script>
 13 | 
 14 |   </head>
 15 | 
 16 |   <body class="bg-purple-100">
 17 | 
 18 |       <div x-data="todos()" x-init="loadTasks()" class="max-w-4xl mx-auto mt-6">
 19 | 
 20 |           <div class="text-5xl font-extrabold leading-none tracking-tight text-center">
 21 |               <h1 class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 via-pink-600 to-purple-900">Simple To-Do List</h1>
 22 |           </div>
 23 | 
 24 |           <!-- Task Input -->
 25 |           <div id="task-input" class="mt-4 flex justify-center">
 26 |               <div class="m-4 flex">
 27 |                   <input x-model="taskTitle" class="rounded-l-lg p-4 border-t mr-0 border-b border-l text-gray-800 border-gray-200" placeholder="Task Title"/>
 28 |                   <button @click="if (taskTitle) { addTask() } else { alert('task title cannot be empty')}" class="px-8 rounded-r-lg bg-purple-800 text-gray-100 font-bold p-4 uppercase">Add Task</button>
 29 |               </div>
 30 |           </div>
 31 | 
 32 |           <!-- Task List -->
 33 |           <div class="max-w-md mx-auto grid grid-cols-1 gap-2 mt-6">
 34 |               <template x-for="task in tasks">
 35 |                   <div :data-id="task.id" class="p-4 bg-white hover:bg-gray-100 cursor-pointer flex justify-between items-center border rounded-md">
 36 |                       <p :class="{ 'line-through': task.completed }" x-text="task.title"></p>
 37 |                       <div class="flex">
 38 |                           <button @click="updateTask(task)"  class="mr-4" type="button">
 39 |                               <svg x-show="!task.completed" class="h-6 w-6 text-gray-500 hover:text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 40 |                                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
 41 |                               </svg>
 42 |                               <svg x-show="task.completed" class="h-6 w-6 text-green-500 hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
 43 |                                   <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
 44 |                               </svg>
 45 |                           </button>
 46 |                           <button @click="deleteTask(task.id)" type="button">
 47 |                               <svg class="h-6 w-6 text-red-400 hover:text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 48 |                                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
 49 |                               </svg>
 50 |                           </button>
 51 |                       </div>
 52 |                   </div>
 53 |               </template>
 54 |           </div>
 55 | 
 56 |       </div>
 57 | 
 58 | 
 59 |   <script>
 60 |     function todos() {
 61 |         return {
 62 |             tasks: [],
 63 |             taskTitle: '',
 64 |             loadTasks() {
 65 |                 let self = this;
 66 |                 axios.get('http://127.0.0.1:8000/tasks/')
 67 |                   .then(function (response) {
 68 |                     // handle success
 69 |                     self.tasks = response.data;
 70 |                   })
 71 |                   .catch(function (error) {
 72 |                     // handle error
 73 |                     console.log(error);
 74 |                   });
 75 |             },
 76 |             addTask() {
 77 |                 let self = this;
 78 |                 let params = new URLSearchParams();
 79 |                 params.append('title', this.taskTitle );
 80 |                 axios.post('http://127.0.0.1:8000/tasks/create/', params,
 81 |                     {
 82 |                         headers: { 'X-CSRFToken': '{{ csrf_token }}' },
 83 |                     }
 84 |                     )
 85 |                     .then(function (response) {
 86 |                         self.tasks.push(response.data);
 87 |                         self.taskTitle = '';
 88 |                     }).catch(function (error) {
 89 |                     // handle error
 90 |                     console.log(error);
 91 |                   });
 92 |             },
 93 |             deleteTask(taskId) {
 94 |                 let self = this;
 95 |                 axios.post('http://127.0.0.1:8000/tasks/' + taskId +  '/delete/', {},
 96 |                 { headers: { 'X-CSRFToken': '{{ csrf_token }}' }})
 97 |                     .then(function (response) {
 98 |                         let removeIndex = self.tasks.map(item => item.id).indexOf(taskId);
 99 |                         ~removeIndex && self.tasks.splice(removeIndex, 1);
100 |                     }).catch(function (error) {
101 |                     // handle error
102 |                     console.log(error);
103 |                     });
104 |             },
105 |             updateTask(task) {
106 |                 let params = new URLSearchParams();
107 |                 if (task.completed) {
108 |                     params.append('status', 0);
109 |                 } else {
110 |                     params.append('status', 1);
111 |                 }
112 |                 axios.post('http://127.0.0.1:8000/tasks/' + task.id + '/update/', params,
113 |                     { headers: { 'X-CSRFToken': '{{ csrf_token }}' }})
114 |                 .then(function (response) {
115 |                     task.completed = !task.completed;
116 |                 }).catch(function (error) {
117 |                     // handle error
118 |                     console.log(error);
119 |                 });
120 |             },
121 |         }
122 |     }
123 |   </script>
124 |   <script>
125 |         const table = document.getElementById('task-list');
126 |         new Sortable(table, {
127 |             animation: 150,
128 |             ghostClass: 'bg-indigo-100',
129 |             // Element dragging ended
130 |             onEnd: function (e) {
131 |                 let itemEl = e.item;  // dragged HTMLElement
132 |                 let newIndex = e.newIndex;
133 |                 let taskId = itemEl.getAttribute('data-id');
134 |                 let params = new URLSearchParams();
135 |                 params.append('position', newIndex)
136 |                 let csrfToken = '{{ csrf_token }}';
137 |                 console.log(newIndex);
138 |                 axios.post('http://127.0.0.1:8000/tasks/' + taskId + '/updateOrder/', params,
139 |                 { headers: { 'X-CSRFToken': csrfToken }})
140 |                   .then(function (response) {
141 |                     // success
142 |                     console.log('success')
143 |                       console.log(response.data)
144 | 
145 |                   })
146 |                   .catch(function (error) {
147 |                     // handle error
148 |                     console.log(error);
149 |                   });
150 |             },
151 |         });
152 |     </script>
153 | 
154 |   </body>
155 | </html>


--------------------------------------------------------------------------------