Drag and drop sortierung in der Tabelle Bereiche angepasst. Die Sortierung erfolgt einfach von 0 bis ANzahl-Bereiche. Jetzt einfach per drag-n-drop hoch und runterbewegen :)

areas/forms.py

@@ -12,9 +12,8 @@ class AreaAddAreaForm(forms.ModelForm):
 			"name" : "Bereichsname",
 			"color" : "Farbe",
 			"desc" : "Beschreibung",
-			"visible": "Im Organigramm sichtbar",
+			"visible": "Im Organigramm sichtbar"
-			"areaorder": "Sortierung"
 
 		}				
-		fields = ['name', 'color', 'desc', 'areaorder']
+		fields = ['name', 'color', 'desc']
 

areas/templates/areas/areas_management.html

@@ -1,5 +1,6 @@
 {% extends "users/base.html" %}
 {% block content %}
+<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <div class="content-section col-12">
   <h3>Bereichsverwaltung</h3>  
   <hr>
@@ -28,7 +29,7 @@
         </thead>
         <tbody id="tableresults">
          {% for item in areas_of_agency %}
-          <tr>
+          <tr id="{{ item.pk }}">
               <td>{{ item.name }}</td>
               <td>{{ item.created_area_by.first_name }} {{ item.created_area_by.last_name }}</td>
               <td>{{ item.created_area_date }}</td>     
@@ -53,6 +54,7 @@
       </table>
     </div>
 </div>
+<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <script>
 $(document).ready(function(){
   $("#tableSearch").on("keyup", function() {
@@ -61,6 +63,38 @@ $(document).ready(function(){
       $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
     });
   });
+
+
 });
+
+/*
+  Update the sort-list by drag'n'drop
+*/
+$( "tbody" ).sortable({
+  update: function( event, ui ) {
+    datatoserver = [];
+    var rows = $( "tbody" ).sortable( "widget" )[0]['rows'];
+    for(i = 0; i < rows.length; i++){
+      datatoserver.push({"id" : rows[i]['id'], "neworder" : i});
+    }
+
+    $.ajax(
+    {
+        type: "GET",
+        url: "/areas/updateorder",
+        data:{
+          action: "newareaorder",
+          finalod : JSON.stringify(datatoserver)
+        },
+        success: function( data ) 
+        {
+          console.log(data);
+      }
+     });
+
+
+  }
+});
+
 </script>
 {% endblock content %}

areas/urls.py

@@ -16,7 +16,8 @@ urlpatterns = [
     path('addarea/', permission_required('users.areas_management')(AreasAddArea.as_view(template_name="areas/areas_add.html")), name='areas-addarea'),   
     path('areas/<int:pk>/delete', permission_required('users.areas_management')(AreaDeleteView.as_view()), name='areas-delete'),
     path('area/<int:pk>/', permission_required('users.areas_management')(AreaUpdateView.as_view()), name='areas-manage'),
-    path('areaajax/', views.area_addareas_ajax, name="area-ajaxview")
+    path('areaajax/', views.area_addareas_ajax, name="area-ajaxview"),
+    path('updateorder/', views.area_neworder, name="area-ajaxorder")
 ]
 
 

areas/views.py

@@ -6,7 +6,7 @@ from django.contrib import messages
 from .forms import AreaAddAreaForm
 from django.contrib.auth.models import User
 from django.http import HttpResponse, JsonResponse
-
+import json
 
 
 class AreasManagement(LoginRequiredMixin, ListView):
@@ -17,7 +17,7 @@ class AreasManagement(LoginRequiredMixin, ListView):
 	def get_context_data(self, **kwargs):
 		context = super().get_context_data(**kwargs)
 	#	# Get all Users of the Same Agency as logged user
-		areas_of_agency = Areas.objects.filter(agency__pk=self.request.user.profile.agency.pk)
+		areas_of_agency = Areas.objects.filter(agency__pk=self.request.user.profile.agency.pk).order_by('areaorder')
 
 		context.update({'active_link' : 'areasmanagement', 'areas_of_agency':areas_of_agency})
 		return context
@@ -131,3 +131,28 @@ def area_addareas_ajax(request):
 		return JsonResponse({'userid' : userid, 'username_clean' : username_clean, 'remaining_users':possible_users_js, 'remaining_users_counter' : final_possible_users})
 	else:
 		return HttpResponse("Request method is not a GET")
+
+'''
+
+	Update the Area-Order by drag and drop. Save per ID and order in table, example:
+	ID    ORDER
+	0 --> 0
+	4 --> 1
+	2 --> 2
+	5 --> 3
+
+	Triggered by ajax in areas_management.html
+	Save all areas after drag n drop elements in table
+
+'''
+def area_neworder(request):
+	if request.method == 'GET':
+		if request.GET['action'] == 'newareaorder':
+			neworderdata = json.loads(request.GET['finalod'])
+			for ele in neworderdata:
+				area = Areas.objects.get(pk=ele['id'])
+				area.areaorder = ele['neworder']
+				area.save()
+		return HttpResponse("UPDATED")
+	else:
+		return HttpResponse("Request method is not a GET")

digitaleagentur/settings.py

@@ -16,6 +16,8 @@ import os
 # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
 
+# FOR SUMMERNOTE ORIGIN
+X_FRAME_OPTIONS = 'SAMEORIGIN'
 
 # Quick-start development settings - unsuitable for production
 # See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/
@@ -40,6 +42,7 @@ INSTALLED_APPS = [
     'crispy_forms',
     'colorful',
     'ckeditor',
+    'django_summernote',
     'ckeditor_uploader',
     'django.contrib.admin',
     'django.contrib.auth',

digitaleagentur/urls.py

@@ -40,6 +40,7 @@ urlpatterns = [
     path('password-reset-complete/', auth_views.PasswordResetCompleteView.as_view(template_name='users/password_reset_complete.html'), name='password_reset_complete'),
     path('register/', AgencyCreateView.as_view(template_name='users/register.html'), name='register'),
     path('register/done', views.registerdone, name='register-done'),
+    path('summernote/', include('django_summernote.urls')),
 ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
 if settings.DEBUG:
 	urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)