Funktionalität für das hinuzfügen und entfernen von Nutzern zu Bereichen

areas/forms.py

@@ -13,13 +13,18 @@ class AreaAddAreaForm(forms.ModelForm):
 		labels = {
 			"name" : "Bereichsname",
 			"color" : "Farbe",
-			"desc" : "Kurze Beschreibung",
+			"desc" : "Beschreibung"
-			"usersfield" : "Zugeteilte Personen"
 		}				
-		fields = ['name', 'color', 'desc', 'usersfield']
+		fields = ['name', 'color', 'desc']
 		
-	def __init__(self, user=None, *args, **kwargs):		
+	#def __init__(self, user=None, *args, **kwargs):		
-		super().__init__(*args, **kwargs)
+	#	super().__init__(*args, **kwargs)
-		if(user != None):
+	#	if(user != None):
-			users_of_agency = User.objects.filter(profile__agency__pk=user.profile.agency.pk)						
+	#		users_of_agency = User.objects.filter(profile__agency__pk=user.profile.agency.pk)						
-			self.fields['usersfield'].queryset = users_of_agency
+	#		self.fields['usersfield'].queryset = users_of_agency
+
+class AjaxForm(forms.ModelForm):
+	field = forms.CharField(max_length=200)
+	class Meta:
+		model = Areas
+		fields = ['name', 'color', 'desc']

areas/templates/areas/areas_add.html

@@ -7,6 +7,7 @@
   <form method="POST">
 	  	{% csrf_token %}
 	  	{{ form|crispy }}		
+	  	<p>Nachdem Erstellen eines Bereichs können Mitarbeiter zugewiesen werden.</p>
 	  <hr>	  	
 	  	<button type="submit" class="btn btn-success"  href="{% url 'areas-addarea' %} ">Bereich anlegen</button>&nbsp;
 	  	<a class="btn" href="{% url 'areas-management' %} ">Abbrechen</a>

areas/templates/areas/areas_management.html

@@ -36,7 +36,7 @@
             <!-- Card Body -->
             <div class="card-body">
                     <div class="row">
-                        <div class="col-md-8">
+                        <div class="col-md-6">
                             <h6><b>Name</b></h6>
                             <p>
                                 {{ item.name }}
@@ -45,13 +45,26 @@
                             <p>
                                 {{ item.created_area_by.first_name }} {{ item.created_area_by.last_name }}
                             </p>
+                            <h6><b></b></h6>
+                            <p>
+                                
+                            </p>
+                            
+                        </div>
+                        <div class="col-md-6">
+                            <h6><b>Farbe</b></h6>
+                            <p>
+                                <div style="width: 60px; height: 20px; background-color: {{ item.color }}"></div>
+                            </p>
                             <h6><b>Erstellt am</b></h6>
                             <p>
                                 {{ item.created_area_date }}
                             </p>                                                        
-                            <h6><b>Farbe</b></h6>
+                        </div>  
+                        <div class="col-md-10">
+                        <h6><b>Beschreibung</b></h6>
                             <p>
-                                <div style="width: 60px; height: 20px; background-color: {{ item.color }}"></div>
+                                {{ item.desc }}
                             </p>    
                           </div>                   
                    </div>

areas/templates/areas/areas_update.html

@@ -2,15 +2,139 @@
 {% load static %}
 {% load crispy_forms_tags %}
 {% block content %}
+
+
+
 <div class="content-section col-6">
   <h3>Bereich aktualisieren</h3>
   <hr>  
   <form method="POST">
 	  	{% csrf_token %}	  	
 	  	{{ form|crispy }}	  			  		  
+	  <h6>Mitarbeiter hinzufügen</h6>
+	  <div class="input-group mb-3">
+		  <input class="form-control" list="usersfree" name="searchusers" id="searchusers" type="text" onkeyup="javascript:checkValue()">
+		  <div class="input-group-append">
+		  	<button type="button" id="addusertoareabtn" onclick="javascript:addUserToArea()" class="btn btn-success" disabled>Mitarbeiter hinzufügen</button>
+		  	<button type="button" onclick="javascript:clearSearchfield()" class="btn btn-secondary" ><i class="fas fa-times"></i></button>
+		  </div>
+			  <datalist id="usersfree">
+			  	{% for us in possible_users %}
+			    	<option id="{{us.pk}}" value="{{us.first_name}} {{us.last_name}}"></option>			    
+			    {% endfor %}
+			  </datalist>
+			</datalist>
+		</div>
 	<hr>
+	<h6>Zugewiesene Mitarbeiter</h6>
+	<div id="added_users_button">
+		{% if added_users|length > 0 %}
+		<p id="no_user_in_area" style="display: none">Noch kein Mitarbeiter zugewiesen.</p>
+		  {% for us in added_users %}	  	
+		  	<span id="span_btn_{{us.pk}}" class="badge badge-pill badge-primary mr-2"><a  class="btn btn-primary" onclick="javascript:removeUserFromArea('{{ us.pk }}')">{{ us.first_name }} {{ us.last_name }}&nbsp;&nbsp;<i class="fas fa-times"></i></a >	  		
+		  	</span>
+		  {% endfor %}
+		 {% else %}
+		 	<p id="no_user_in_area">Diesem Bereich ist noch kein Mitarbeiter zugewiesen.</p>
+		 {% endif %}
+	 </div>
+	  <hr>
+
   	<button type="submit" class="btn btn-success">Bereich aktualisieren</button>&nbsp;
   	<a class="btn" href="{% url 'areas-management' %} ">Abbrechen</a>
   </form>
 </div>
+<script type="text/javascript">
+	var tempid = null;
+	var tempcounter = 0;
+	function addUserToArea(){
+		$.ajax(
+	    {
+	        type: "GET",
+	        url: "/areas/areaajax",
+	        data:{
+	                 userid: tempid,
+	                 action : 'adduser',
+	                 objectid : {{objectid}}
+	        },
+	        success: function( data ) 
+	        {	
+	        	clearSearchfield();	  
+	        	//Add User-Button  	        	
+	        	$("#added_users_button").append('<span id="span_btn_'+data['userid']+'" class="badge badge-pill badge-primary mr-2"><a  class="btn btn-primary" onclick="javascript:removeUserFromArea('+data['userid']+')">'+data['username_clean']+'&nbsp;&nbsp;<i class="fas fa-times"></i></a ></span>');
+
+	        	$("#usersfree").empty();
+	        	for (var i in data['remaining_users']) {
+	        		id = data['remaining_users'][i]['id'];
+	        		name = data['remaining_users'][i]['first_name'] + " " + data['remaining_users'][i]['last_name'];
+	        		console.log(data['remaining_users'][i]);
+		          	$("#usersfree").append('<option id="'+id+'" value="'+name+'"></option>');
+		        }
+		        if(data['remaining_users_counter'] == 0){
+		        	$("#no_user_in_area").show();	        
+		        }
+		        else {
+		        	$("#no_user_in_area").hide();	
+		        }
+		    }
+	     });		
+	}
+
+	//Remove individual User from area, appened to the datalist!
+	function removeUserFromArea(user_id){
+		$.ajax(
+	    {
+	        type: "GET",
+	        url: "/areas/areaajax",
+	        data:{
+	                 userid: user_id,
+	                 action : 'remuser',
+	                 objectid : {{objectid}}
+	        },
+	        success: function( data ) 
+	        {
+	        	//Remove User-Button  	       
+	        	$("#span_btn_"+data['userid']).remove();
+	        	//Rebuilding the Datalist
+	        	$("#usersfree").empty();
+	        	for (var i in data['remaining_users']) {
+	        		id = data['remaining_users'][i]['id'];
+	        		name = data['remaining_users'][i]['first_name'] + " " + data['remaining_users'][i]['last_name'];
+	        		$("#usersfree").append('<option id="'+id+'" value="'+name+'"></option>');
+		        }
+		        if(data['remaining_users_counter'] == 0){
+		        	$("#no_user_in_area").show();	        
+		        }
+		        else {
+		        	$("#no_user_in_area").hide();	
+		        }
+		    }
+	     });
+	}
+
+	//Clearing searchfield and set AddUser to false
+	function clearSearchfield(){
+		$("#searchusers").val("");
+		$("#addusertoareabtn").prop('disabled', true);
+	}
+
+	//Ajax-Call to add a User to Area
+	function addUser(numb){
+		console.log("USER HINZU: " + numb);
+	}
+
+	//Check for valid input on inputfield
+	function checkValue(){		
+		var g = $('#searchusers').val();
+    	var id = $('#usersfree').find('option[value="' + g + '"]').attr('id');
+    	if(id != undefined && id.length > 0){    		
+    		tempid = id;
+    		$("#addusertoareabtn").prop('disabled', false);	
+    	}
+    	else{
+    		tempid = null;
+    		$("#addusertoareabtn").prop('disabled', true);
+    	}    	
+	}
+</script>
 {% endblock content %}

areas/urls.py

@@ -2,6 +2,7 @@ from django.urls import path
 from django.contrib.auth import views as auth_views
 from django.contrib.auth.decorators import login_required, permission_required
 from .views import AreasManagement, AreasAddArea, AreaDeleteView, AreaUpdateView
+from . import views
 '''
 
 '' - Startseite nach erfolgreichem LOGIN
@@ -14,7 +15,8 @@ urlpatterns = [
 	path('', permission_required('users.tasks_management')(AreasManagement.as_view(template_name="areas/areas_management.html")), name='areas-management'),   
     path('addarea/', permission_required('users.tasks_management')(AreasAddArea.as_view(template_name="areas/areas_add.html")), name='areas-addarea'),   
     path('areas/<int:pk>/delete', permission_required('users.users_usermanagement')(AreaDeleteView.as_view()), name='areas-delete'),
-    path('area/<int:pk>/', permission_required('users.users_usermanagement')(AreaUpdateView.as_view()), name='areas-manage')
+    path('area/<int:pk>/', permission_required('users.users_usermanagement')(AreaUpdateView.as_view()), name='areas-manage'),
+    path('areaajax/', views.area_addareas_ajax, name="area-ajaxview")
 ]
 
 

areas/views.py

@@ -3,9 +3,9 @@ from django.contrib.auth.mixins import LoginRequiredMixin
 from django.views.generic import CreateView, ListView, UpdateView, DetailView, DeleteView, View
 from .models  import Areas
 from django.contrib import messages
-from .forms import AreaAddAreaForm
+from .forms import AreaAddAreaForm, AjaxForm
 from django.contrib.auth.models import User
-
+from django.http import HttpResponse, JsonResponse
 
 
 
@@ -71,18 +71,54 @@ class AreaUpdateView(LoginRequiredMixin, UpdateView):
 		return super().form_valid(form)
 
 	# Form wird geladen; Checkboxen werden vorbereitet und hier rausgerendert.
-	def get(self,request,*args, **kwargs):
+	#def get(self,request,*args, **kwargs):
-		# User ist der hier Aufgerufene, bzw. das Profil!
+	#	# User ist der hier Aufgerufene, bzw. das Profil!
-		loggeduser = request.user
+	#	loggeduser = request.user
+	#	
+	#	return render (request, self.template_name, {'form':self.form_class(loggeduser), 'active_link': 'usersmanagement'})
 
-		return render (request, self.template_name, {'form':self.form_class(loggeduser), 'active_link': 'usersmanagement'})
+
+	def get_context_data(self, **kwargs):
+		context = super(AreaUpdateView, self).get_context_data(**kwargs)		
+		area = Areas.objects.get(pk=context['object'].pk)
+		# User still in Area		
+		context['added_users'] = area.usersfield.all()
+		# Get all Users from same Agency which are NOT in context_added_users
+		possible_users = User.objects.filter(profile__agency__pk=self.request.user.profile.agency.pk).exclude(pk__in=context['added_users'])
+		context['possible_users'] = possible_users				
+		# Active-Link for Base-Design
+		context['active_link'] = 'areasmanagement'
+		# Area ID
+		context['objectid'] = context['object'].pk
+		return context
+
+
+def area_addareas_ajax(request):
+	if request.method == 'GET':
+
+		# ADD USER TO MANY-TO-MANY USERSFIELD
+		if request.GET['action'] == 'adduser':
+			area = Areas.objects.get(pk=request.GET['objectid'])
+			area.usersfield.add(User.objects.get(pk=request.GET['userid']))
+			area.save()
+		# REMOVE USER TO MANY-TO-MANY USERSFIELD
+		elif request.GET['action'] == 'remuser':
+			area = Areas.objects.get(pk=request.GET['objectid'])
+			area.usersfield.remove(User.objects.get(pk=request.GET['userid']))
+			area.save()
+		userid = request.GET['userid']
+		workinguser = User.objects.get(pk=userid)
+		username_clean = workinguser.first_name + " " + workinguser.last_name
+		
+		# Getting Remaining-Users
+		area = Areas.objects.get(pk=request.GET['objectid'])
+		added_users = area.usersfield.all()
+		possible_users = User.objects.filter(profile__agency__pk=request.user.profile.agency.pk).exclude(pk__in=added_users)
+		possible_users_js = list(possible_users.values())
+		remaining_users_counter = len(added_users)
+		return JsonResponse({'userid' : userid, 'username_clean' : username_clean, 'remaining_users':possible_users_js, 'remaining_users_counter' : remaining_users_counter})
+	else:
+		return HttpResponse("Request method is not a GET")
 
 
 
-
-#def get_context_data(self, **kwargs):
-	#	context = super(AreaUpdateView, self).get_context_data(**kwargs)	
-	#	users_of_agency = User.objects.filter(profile__agency__pk=self.request.user.profile.agency.pk)
-	#	context['possible_users'] = users_of_agency
-	#	context['active_link'] = 'areasmanagement'
-	#	return context

users/templates/users/base.html

@@ -14,10 +14,9 @@
   
   <link rel="canonical" href="https://www.digitale-agentur.com">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-  <script src="{%static 'users/js/bootstrap-multiselect.js' %}"></script>
+  
 
   <link href="{%static 'users/vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet" type="text/css">
-  <link href="{%static 'users/css/bootstrap-multiselect.css' %}" rel="stylesheet" type="text/css">
   
   <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
 
@@ -210,8 +209,11 @@
           <!-- MESSAGES -->
          {% if messages %}
             {% for message in messages %}
-              <div class="alert alert-{{ message.tags }}" id="message_{{forloop.counter}}">
+            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                 {{ message }}
+                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
               </div>
               <script>
                 setTimeout(function() {