remplacer la liste des destinataires par select2

src/ninegate-1.0/src/Cadoles/WebsocketBundle/Resources/views/Chat/client.html.twig

@@ -192,9 +192,21 @@
                         <input type="text" id="mailsuject" name="mailsuject" required="required" class="form-control">
                     </div>
                     <div>
-                        <label class="control-label required">Destinataires (cliquez sur les images pour les enlever de la liste des destinataires)<span class="mandatory">*</span></label>
+                        <label class="control-label required">Destinataires<span class="mandatory">*</span></label>
-                        <div id="listtoavatar"></div>
+
-                        <input type="hidden" id="mailto" name="mailto" required="required" class="form-control">
+                        <select id="destinataires" style="width:100%" name="states[]" multiple="multiple">
+                            {% for user in group.users %}
+                                {%if(user.user!=app.user)%}
+                                    <option value="{{user.user.email}}" data-image="\{{alias}}\uploads\avatar\{{user.user.avatar}}">{{user.user.lastname}} {{user.user.firstname}}</option>
+                                {%endif%}
+                            {% endfor %}
+                        </select>
+                        <div class="form-check">
+                            <input class="form-check-input" type="checkbox" value="" id="checkalldestinataires">
+                            <label class="form-check-label" for="checkalldestinataires">
+                               Tout le monde
+                            </label>
+                        </div>                        
                     </div>
                     <div class="form-group" style="margin-top:10px">
                         <label class="control-label required">Corps du Mail<span class="mandatory">*</span></label>
@@ -482,24 +494,50 @@
             sendbtn();
         });
 
+        function formatState (opt) {
+            if (!opt.id) {
+                return opt.text.toUpperCase();
+            } 
+
+            var optimage = $(opt.element).attr('data-image'); 
+            console.log(optimage)
+            if(!optimage){
+            return opt.text.toUpperCase();
+            } else {                    
+                var $opt = $(
+                '<span><img src="' + optimage + '" width="30px" height="30px" style="border-radius:100%"/> ' + opt.text + '</span>'
+                );
+                return $opt;
+            }
+        };
+
+        $("#checkalldestinataires").click(function(){
+            if($("#checkalldestinataires").is(':checked') ){
+                $("#destinataires > option").prop("selected","selected");
+                $("#destinataires").trigger("change");
+            }else{
+                $("#destinataires > option").removeAttr("selected");
+                $("#destinataires").trigger("change");
+            }
+        });
+
         function sendbtn() {
             var data = CKEDITOR.instances["chat_message"].getData();
             if($("#sendbymail").bootstrapSwitch('state')) {
                 CKEDITOR.instances["chat_messagemail"].setData(data);
                 $("#mailsuject").val("{{app.session.get('appname')}} = Notification {{ group.label }}");
-                $("#mailto").val("");
-                $("#listtoavatar").html("");
-
-                {% for user in group.users %}
-                    {%if(user.user!=app.user)%}
-                        $("#mailto").val($("#mailto").val()+";{{user.user.email}}");
-                        $("#listtoavatar").append($("<img class='avatar' title='{{user.user.lastname}} {{user.user.firstname}}' data-mail='{{user.user.email}}' src='\\{{alias}}\\uploads\\avatar\\{{user.user.avatar}}'>"));
-                    {%endif%}
-                {% endfor %}
                 
                 $("#sendbtnmail").show();
                 $("#sendbtnmailreply").hide();
                 $('#mymodal-sendmail').modal('show');
+                $("#checkalldestinataires").prop( "checked", false );
+                $("#destinataires > option").removeAttr("selected");
+                $("#destinataires").trigger("change");                
+                $('#destinataires').select2({
+                    templateResult: formatState,
+                    templateSelection: formatState,
+                    sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),
+                });
             }
             else {
                 if(data) {
@@ -538,12 +576,15 @@
         function sendbtnmail() {
             var data = CKEDITOR.instances["chat_messagemail"].getData();
             var subject=$("#mailsuject").val();
-            var mailto=$("#mailto").val();
+            var destinataires=$("#destinataires").val();
+
+            if(data&&subject&&!(jQuery.isEmptyObject(destinataires))) {
 
-            if(data&&subject&&mailto) {
                 try {
                     // Flager que l'envoit c'est fait
                     tosendmail=false;
+                    mailto=destinataires.join(';');
+                    mailto=";"+mailto;
                     $("#sendbtnmail").html("Envoyer");
                     $("#sendbtnmail").removeClass("btn-danger");
                     $("#sendbtnmail").css('cursor','auto');
@@ -581,13 +622,15 @@
         function sendbtnmailreply() {
             var data = CKEDITOR.instances["chat_messagemail"].getData();
             var subject=$("#mailsuject").val();
-            var mailto=$("#mailto").val();
+            var destinataires=$("#destinataires").val();
 
-            if(data&&subject&&mailto) {
+            if(data&&subject&&!(jQuery.isEmptyObject(destinataires))) {
 
                 try {
                     // Flager que l'envoit c'est fait
                     tosendmail=false;
+                    mailto=destinataires.join(';');
+                    mailto=";"+mailto;                    
                     $("#sendbtnmailreply").html("Envoyer");
                     $("#sendbtnmailreply").removeClass("btn-danger");
                     $("#sendbtnmailreply").css('cursor','auto');
@@ -681,21 +724,19 @@
         $(document).on('click', '.btnreplymessagemail', function(){
             CKEDITOR.instances["chat_messagemail"].setData("");
             $("#mailsuject").val("{{app.session.get('appname')}} = Notification {{ group.label }}");
-            $("#mailto").val("");
-            $("#listtoavatar").html("");
-
-            {% for user in group.users %}
-                {%if(user.user!=app.user)%}
-                    $("#mailto").val($("#mailto").val()+";{{user.user.email}}");
-                    $("#listtoavatar").append($("<img class='avatar' title='{{user.user.lastname}} {{user.user.firstname}}' data-mail='{{user.user.email}}' src='\\{{alias}}\\uploads\\avatar\\{{user.user.avatar}}'>"));
-                {%endif%}
-            {% endfor %}
 
             $("#sendbtnmail").hide();
             $("#sendbtnmailreply").show();
             $("#sendbtnmailreply").data("id",$(this).data("id"));
-
             $('#mymodal-sendmail').modal('show');
+            $("#checkalldestinataires").prop( "checked", false );
+            $("#destinataires > option").removeAttr("selected");
+            $("#destinataires").trigger("change");                
+            $('#destinataires').select2({
+                templateResult: formatState,
+                templateSelection: formatState,
+                sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),
+            });            
         });
 
 
@@ -734,12 +775,6 @@
             
         }
 
-        $(document).on('click', '#listtoavatar img', function(){
-            var mail = ";"+$(this).data("mail");
-            $("#mailto").val($("#mailto").val().replace(mail, ""));
-            $(this).remove();
-        });
-
         function recuplastmsg() {
             console.log("recuplastmsg");
 
@@ -827,7 +862,7 @@
             if(!$("#online"+userid).length) {
                 html = "<span id='online"+userid+"' style='width:70px; display:inline-block; text-align: center; font-size: 10px; color:#{{ colorbodyback }}; text-transform: uppercase; line-height:11px;overflow-wrap: break-word;vertical-align:top;'>";
                 html+= "<img style='cursor:pointer; width:40px; height:40px; margin-bottom:5px;' onclick='seeUser("+userid+")' title='"+userlastname+" "+userfirstname+"' id='user_avatar_img' src='/{{ alias }}/uploads/avatar/"+useravatar+"' class='avatar'>";
-                html+= "<span style='color:#{{colorlabel}}'>"+userlastname+" "+userfirstname+"</span>";
+                html+= "<br><span style='color:#{{colorlabel}}'>"+userlastname+" "+userfirstname+"</span>";
                 html+= "</span>";
                 $("#useronline").append(html);
             }