Added and Delete Note Buttons

app/controllers/main/routes.py

@@ -387,6 +387,7 @@ def addNote():
         flash("Failed to add profile note", "danger")
         return "Failed to add profile note", 500
 
+
 @main_bp.route('/<username>/deleteNote', methods=['POST'])
 def deleteNote(username):
     """

app/models/note.py

@@ -4,6 +4,6 @@
 class Note(baseModel):
     createdBy = ForeignKeyField(User)
     createdOn = DateTimeField()
-    noteContent = CharField()
+    noteContent = TextField()
     isPrivate = BooleanField(default=False)
     noteType = CharField(null=True)

app/static/js/userProfile.js

@@ -176,6 +176,9 @@ $(document).ready(function(){
 
     $("#addNoteButton").click(function() {
         bonnerNoteOff()
+        $("#addNoteTextArea").val('')
+        $("#notesSaveButton").data('mode', 'add') 
+        $("#notesSaveButton").data('noteid', null) 
         $("#noteModal").modal("toggle")
     });
 
@@ -191,6 +194,9 @@ $(document).ready(function(){
 
     $("#addBonnerNoteButton").click(function() {
         bonnerNoteOn()
+        $("#addNoteTextArea").val('')                   
+        $("#notesSaveButton").data('mode', 'add')       
+        $("#notesSaveButton").data('noteid', null)      
         $("#noteModal").modal("toggle");
     });
 
@@ -199,6 +205,17 @@ $(document).ready(function(){
     event.preventDefault()
     let username = $("#notesSaveButton").data('username')
     let isBonner = $("#bonnerInput").is(":checked")
+    let mode = $("#notesSaveButton").data('mode')
+    let noteid = $("#notesSaveButton").data('noteid')
+
+    // If we're editing, delete the old note first
+    if (mode === 'edit') {
+        $.ajax({
+            method: "POST",
+            url: "/" + username + "/deleteNote",
+            data: { "id": noteid }
+        })
+    }
     $.ajax({
       method: "POST",
       url:  "/profile/addNote",
@@ -218,18 +235,58 @@ $(document).ready(function(){
   });
 
   $(".deleteNoteButton").click(function() {
+    $("#confirmDeleteNote").data('username', $(this).data('username'))
+    $("#confirmDeleteNote").data('noteid', $(this).data('noteid'))
+    $("#deleteNoteWarning").modal("show")
+
+  });
+
+  $("#confirmDeleteNote").click(function() { 
     let username = $(this).data('username')
     let noteid = $(this).data('noteid')
     $.ajax({
       method: "POST",
       url:  "/" + username + "/deleteNote",
       data: {"id": noteid},
       success: function(response) {
+         msgFlash("Successfully deleted note", "success", 1300, true)
         reloadWithAccordion("notes")
       }
     });
   });
+
+  $(".editNoteButton").click(function() {
+    let noteText = $(this).data('notetext')
+    let visibility = $(this).data('visibility')
+    let isBonner = $(this).data('bonner')
+    let noteid = $(this).data('noteid')
+
+
+    $("#addNoteTextArea").val(noteText)
+    $("#noteDropdown").val(visibility)
 
+
+    if (isBonner === 'yes') {
+        bonnerNoteOn()
+    } else {
+        bonnerNoteOff()
+    }
+
+    $("#notesSaveButton").data('noteid', $(this).data('noteid'))
+    $("#notesSaveButton").data('mode', 'edit')
+
+
+    $("#noteModal").modal("toggle")
+});
+    $.ajax({
+      method: "POST",
+      url:  "/" + username + "/editNote",
+      data: {"id": noteid},
+      success: function(response) {
+        reloadWithAccordion("notes")
+      }
+    });
+  });
   /*
     * Background Check Functionality
     */
@@ -355,8 +412,8 @@ $(document).ready(function(){
       typingTimer = setTimeout(saveDiet, saveInterval);
     });
   });
+ // end document.ready()
 
-}); // end document.ready()
 
 // Update program manager status
 function updateManagers(el, volunteerUsername ) {

app/templates/main/userProfile.html

@@ -432,12 +432,13 @@ <h3 class="accordion-header" id="headingSix">
                     {% else %}
                       {{ "Bonner Scholar " if row.isBonnerNote else "Everyone"}}
                     {% endif %}
-                  </td>
-                  <td>
+                  <td class ="text-nowrap">
                     {% if (g.current_user == row.note.createdBy) or g.current_user.isCeltsAdmin%}
-                      <button type="button" class="btn btn-sm btn-danger deleteNoteButton float-end" data-noteid="{{row.id}}" data-username="{{volunteer.username}}">Delete</button>
+                     <button type="button" class="btn btn-sm btn-primary me-1 editNoteButton"data-noteid="{{ row.id }}"data-notetext="{{ row.note.noteContent }}"data-username="{{ volunteer.username }}"data-visibility="{{ row.viewTier }}"data-bonner="{{ 'yes' if row.isBonnerNote else 'no' }}">Edit</button>
+                     <button type="button" class="btn btn-sm btn-danger deleteNoteButton" data-noteid="{{ row.id}}" data-username="{{volunteer.username}}">Delete</button>
                     {% else %}
-                      <button type="button" class="btn btn-sm btn-danger deleteNoteButton float-end disabled" data-noteid="{{row.id}}" data-username="{{volunteer.username}}">Delete</button>
+                      <button type="button" class="btn btn-sm btn-primary me-1" disabled>Edit</button>
+                      <button type="button" class="btn btn-sm btn-danger" disabled>Delete</button>
                     {% endif %}
                   </td>
                 </tr>
@@ -493,7 +494,19 @@ <h5>Notes</h5>
               {% if bonnerNotes|length %}
               <dl class="bonnerNotes">
                 {% for row in profileNotes|selectattr("isBonnerNote") %}
-                    <dt>{{row.note.noteContent}}</dd>
+                    <dt>{{row.note.noteContent}}
+                      <span class="float-end">
+                        <i class="bi bi-pencil text-primary editNoteButton me-2" 
+                          data-notetext="{{row.note.noteContent}}"
+                          data-visibility="{{row.note.visibility}}"
+                          data-bonner="yes"
+                          data-noteid="{{row.note.id}}"
+                          data-username="{{volunteer.username}}"
+                          style="cursor:pointer"></i>
+                       <i class="bi bi-trash text-danger deleteNoteButton"
+                          data-noteid="{{row.note.id}}"
+                          data-username="{{volunteer.username}}"
+                          style="cursor:pointer"></i>
                     <dd class='text-muted'>{{row.note.createdBy.fullName}} <span class="float-end">{{row.note.createdOn.strftime('%m/%d/%Y')}}</span></dt>
                 {% endfor %}
               </dl>
@@ -531,7 +544,7 @@ <h5>Requirement Progress</h5>
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <h5 class="modal-title">Add Notes</h5>
+          <h5 class="modal-title">Notes</h5>
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
 
@@ -572,7 +585,7 @@ <h5 class="modal-title">Add Notes</h5>
             <div class="form-group input-group-x form-outline ui-widget">
               <textarea required name="noteTextbox" rows="8" cols="80" type="input" id="addNoteTextArea" class="form-control" placeholder="This will add a note to a user's profile." ></textarea>
             </div>
-          </div>
+          </div> 
         </div>
         <div class="modal-footer justify-content-between">
           <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
@@ -584,6 +597,29 @@ <h5 class="modal-title">Add Notes</h5>
 </div>
 <!-- ################# Add Notes Modal ################ -->
 
+
+<!-- ################# Delete Note Warning Modal ################ -->
+<div class="modal fade" id="deleteNoteWarning" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Delete Note</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <p>This action is irreversible.</p>
+                <p>By deleting this note, all information regarding this note will be removed.</p>
+            </div>
+            <div class="modal-footer justify-content-between">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-danger" id="confirmDeleteNote">Delete Note</button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- ################# Delete Note Warning Modal ################ -->
+
+
 <!-- ################# Ban or Unban Modal ################ -->
 <div class="modal fade" id="banModal" tabindex="-1" aria-labelledby="banVolunteerModalLabel" aria-hidden="true" style="width:-60px;">
   <form onsubmit="return validate();">

database/prod-backup.sql

@@ -954,7 +954,7 @@ CREATE TABLE `note` (
   `id` int NOT NULL AUTO_INCREMENT,
   `createdBy_id` varchar(255) NOT NULL,
   `createdOn` datetime NOT NULL,
-  `noteContent` varchar(255) NOT NULL,
+  `noteContent` TEXT NOT NULL,
   `isPrivate` tinyint(1) NOT NULL,
   `noteType` varchar(255) DEFAULT NULL,
   PRIMARY KEY (`id`),