From 159fd25d1642b69ef63d6d98bfc134d122100da7 Mon Sep 17 00:00:00 2001
From: Olusesan Ameye <ses66181@gmail.com>
Date: Fri, 9 Sep 2022 19:31:33 -0400
Subject: [PATCH] Visual editor & append to message accordion

---
 www/application/views/jobs/view_thisjob.php | 68 ++++++++++++++++++---
 1 file changed, 58 insertions(+), 10 deletions(-)

diff --git a/www/application/views/jobs/view_thisjob.php b/www/application/views/jobs/view_thisjob.php
index 30e2b617..ed387a6c 100644
--- a/www/application/views/jobs/view_thisjob.php
+++ b/www/application/views/jobs/view_thisjob.php
@@ -88,7 +88,7 @@
                                             <input type='hidden' name='contractId' value='<?php echo $contract_id; ?>'>
 
                                             <div class="form-group">
-                                                <textarea cols="18" onkeypress="textContentChanged();" style="height:180px;" rows="3" id='jobmessage' name='jobmessage' class="textarea wysihtml5 wysihtml5-min form-control" placeholder="Enter message here ..."></textarea>
+                                                <textarea cols="18" onchange="textContentChanged();" style="height:180px;" rows="3" id='jobmessage' name='jobmessage' class="textarea wysihtml5 wysihtml5-min form-control" placeholder="Enter message here ..."></textarea>
                                             </div>
 
                                             <div class="form-group">
@@ -269,7 +269,7 @@
 
 <script type="text/javascript">
     <!--
-       var length_limit = 500;
+       const length_limit = 500;
         var timerId = setTimeout(function tick() {
         $.ajax({
             url: "/proj/thisjobfiles?jobID=<?php echo $jobID; ?>"
@@ -288,13 +288,17 @@
 
     function textContentChanged(){
 
+        /*
         if (length_limit <= document.message.jobmessage.value.length){
             document.message.jobmessage.value  = document.message.jobmessage.value .substring(0, length_limit);
         }
-        $('#remain_text').text(length_limit -document.message.jobmessage.value.length);
+        */
+        var r = length_limit -document.message.jobmessage.value.length;
+        if (r < 0) r = 0;
+        $('#remain_text').text(r);
 
         //   document.message.remain_text.value=  length_limit -document.message.jobmessage.value.length;
-
+/*
         if (document.message.jobmessage.value.length > 0 ){
           //  alert(100);
             document.message.btn_cancel.disabled = false;
@@ -302,6 +306,17 @@
         else{
             document.message.btn_cancel.disabled = true;
         }
+*/
+        if(document.message.jobmessage.value.length > length_limit) 
+        {
+            document.message.btn_submit.disabled = true;
+        } 
+        else 
+        {
+            document.message.btn_submit.disabled = false;
+        }
+        console.log('JobMessage Length = '+document.message.jobmessage.value.length);
+        console.log('JobMessage Value  = '+document.message.jobmessage.value);
     }
 
     function SendMessage() {
@@ -318,12 +333,30 @@
                 } else {
                     $('#jobs_contract_message > tbody:last-child').append(res);
                 }
+                var id = Date.now();
+                var html = `<div class="accordion-item">
+        <h2 class="accordion-header" id="kt_accordion_1_header_1">
+            <button class="accordion-button fs-4 fw-semibold" 
+                    type="button" data-bs-toggle="collapse" data-bs-target="#kt_accordion_1_` + id + `" 
+                    aria-expanded="true" aria-controls="kt_accordion_1_body_1">
+                <b></b><?= $_SESSION["firstname"] ?>-` + d_str + `
+            </button>
+        </h2>
+        <div id="kt_accordion_1_` + id + `" class="accordion-collapse collapse" aria-labelledby="kt_accordion_1_header_1" data-bs-parent="#kt_accordion_1">
+            <div class="accordion-body">
+            ` + document.message.jobmessage.value + `            
+            </div>
+        </div>
+    </div>`;
                 document.message.jobmessage.value = '';
-                $('#jobmessage').data("wysihtml5").editor.clear();
+                //$('#jobmessage').data("wysihtml5").editor.clear();
+                
+                $('#jobmessage').trumbowyg('empty');
                 $('#sendmessagenote').html('<div class=\"text-left\"><div class=\"alert alert-info no-border\">Message was sent!</div></div>');
+                // Append
+                $(html).prependTo('#kt_accordion_1');
             } else {
-                alert(data);
-                alert('<div class=\"text-left\"><div class=\"alert alert-danger no-border\">Failed to send message</div></div>');
+                $('#sendmessagenote').html('<div class=\"text-left\"><div class=\"alert alert-danger no-border\">Failed to send message</div></div>');
             }
             document.message.btn_cancel.disabled = false;
             document.message.btn_submit.disabled = false;
@@ -331,8 +364,23 @@
     }
 
     $(document).ready(function () {
-        var length_limit = 500;
-        $('#jobmessage').data("wysihtml5").editor.observe("load", function () {
+        $('#jobmessage').trumbowyg({
+            btns: [
+                ['viewHTML'],
+                ['undo','redo'],// Only supported in Blink browsers
+                ['formatting'],
+                ['strong','em','del'],
+                ['superscript','subscript'],
+                ['link'],
+                /* ['insertImage'], */
+                ['justifyLeft','justifyCenter','justifyRight','justifyFull'],
+                ['unorderedList','orderedList'],
+                ['horizontalRule'],
+                ['removeformat'],
+                ['fullscreen']
+            ]
+        });
+        /*$('#jobmessage').data("wysihtml5").editor.observe("load", function () {
             editor.composer.element.addEventListener("keyup", function () {
                 // enter your listener-triggered code or function call here
                 var content = $(this).html();
@@ -341,7 +389,7 @@
                     $(this).html(content.substr(0, length_limit));
                 }
             });
-        });
+        });*/
     });
     // -->
     </script>