implement micromodal and add appraisal modals

RockefellerArchiveCenter · Oct 24, 2024 · 82fa7b9 · 82fa7b9
1 parent d8470e6
commit 82fa7b9
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 14 deletions.
diff --git a/bag_transfer/appraise/views.py b/bag_transfer/appraise/views.py
@@ -104,7 +104,7 @@ def appraise_buttons(self, transfer):
                 note_text = "Add"
             buttons = '<button class="btn btn--xs btn--blue appraisal-accept">Accept</button>\
                        <button class="btn btn--xs btn--orange appraisal-reject">Reject</button>\
-                       <button class="btn btn--xs btn--light-blue appraisal-note {} {}" data-toggle="modal" data-target="#modal-appraisal-note" {}>{} Note</button>'.format(
+                       <button class="btn btn--xs btn--light-blue appraisal-note {} {}" "data-target="#modal-appraisal-note" {}>{} Note</button>'.format(
                 btn_class, note_class, aria_label, note_text
             )
         return buttons

diff --git a/bag_transfer/static/css/styles.css b/bag_transfer/static/css/styles.css
@@ -6,6 +6,24 @@
   font-style: normal;
 }
 
+/* Modals */
+.modal__overlay {
+	display: none;
+}
+
+.modal__overlay.is-open {
+	display: block;
+}
+
+.modal--md {
+	@media screen and (min-width: 580px) {
+		bottom: 20%;
+		left: 20%;
+		right: 20%;
+		top: 20%;
+	}
+}
+
 .container {
 	max-width: 1600px;
 }
@@ -428,10 +446,6 @@ form, .input input, .input textarea, .input select {
 	display: none;
 }
 
-.pull-right {
-	margin-left: auto;
-}
-
 /**
 * Accession form AS resource name and dismiss button styles
 **/

diff --git a/bag_transfer/static/dist/js/micromodal.min.js b/bag_transfer/static/dist/js/micromodal.min.js
diff --git a/bag_transfer/static/js/modals.js b/bag_transfer/static/js/modals.js
@@ -0,0 +1,3 @@
+document.addEventListener('DOMContentLoaded', function() {
+  MicroModal.init();
+});
diff --git a/bag_transfer/templates/appraise/confirm_modal.html b/bag_transfer/templates/appraise/confirm_modal.html
@@ -1,4 +1,4 @@
-<div class="modal fade" id="modal-confirm" role="dialog" aria-labelledby="modal-appraisal-note-title", tabindex="-1">
+<!-- <div class="modal fade" id="modal-confirm" role="dialog" aria-labelledby="modal-appraisal-note-title", tabindex="-1">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <form id="confirm-reject-form" method='get' class="form" role="form" action='.' >
@@ -24,4 +24,33 @@ <h1 id="modal-appraisal-note-title" class="modal-title">
       </form>
     </div>
   </div>
-</div>
+</div> -->
+
+<div id="modal-confirm" class="modal__overlay" aria-hidden="true">
+  <div data-micromodal-close>
+    <div tabindex="-1" class="modal modal--md" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
+      <div class="modal__header">
+        <h2 id="modalTitle" class="modal__header-title">Reject Transfer</h2>
+        <button class="modal__header-button" aria-label="Close" data-micromodal-close>
+          <span class="material-icon" aria-hidden="true">close</span>
+        </button>
+      </div>
+      <div class="modal__body">
+        <p>Are you sure you want to reject the transfer: <span class="transfer-name text--bold"></span>?</p>
+        <form id="confirm-reject-form" method='get' class="form" role="form" action='.' >
+          <input type="hidden" name="upload_id" class="upload_id" />
+          <div class="input">
+            <label for="appraisal_note">Appraisal Note</label>
+            <textarea class="appraisal_note" id="appraisal_note" rows="5" aria-describedby="message-help"></textarea>
+            <div id="message-help" class="input__help-text">A notification that includes this note will be sent to the user who uploaded the transfer.</div>
+          </div>
+          <div class="mt-20">
+            <button type="button" class="btn btn--sm btn--gray" data-micromodal-close>Cancel</button>
+            <button id="confirm-reject" type="submit" class="btn btn--sm btn--blue">Reject Transfer</button>
+          </div>
+
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/bag_transfer/templates/appraise/edit_note.html b/bag_transfer/templates/appraise/edit_note.html
@@ -1,4 +1,4 @@
-<div class="modal fade" id="modal-appraisal-note" role="dialog" aria-labelledby="modal-appraisal-note-title", tabindex="-1">
+<!-- <div class="modal fade" id="modal-appraisal-note" role="dialog" aria-labelledby="modal-appraisal-note-title", tabindex="-1">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <form id="appraisal-note-form" method='get' class="form" role="form" action='.' >
@@ -25,4 +25,36 @@ <h1 id="modal-appraisal-note-title" class="modal-title">
       </form>
     </div>
   </div>
+</div> -->
+
+
+<div id="modal-appraisal-note" class="modal__overlay" aria-hidden="true">
+  <div data-micromodal-close>
+    <div tabindex="-1" class="modal modal--md" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
+      <div class="modal__header">
+        <h2 id="modalTitle" class="modal__header-title">Add or Edit Note</h2>
+        <button class="modal__header-button" aria-label="Close" data-micromodal-close>
+          <span class="material-icon" aria-hidden="true">close</span>
+        </button>
+      </div>
+      <div class="modal__body">
+        <p><span class="add-or-edit-label">Add</span> appraisal note for transfer: <span class="transfer-name text--bold"></span></p>
+        <form id="appraisal-note-form" method='get' class="form" role="form" action='.' >
+          <input type="hidden" name="upload_id" class="upload_id" />
+          <div class="input">
+            <label for="appraisal_note">Appraisal Note</label>
+            <textarea class="appraisal_note" id="appraisal_note" rows="5" aria-describedby="message-help"></textarea>
+            <div id="message-help" class="input__help-text">If this transfer is rejected, a notification that includes this note will be sent to the user who uploaded the transfer.</div>
+          </div>
+          <div class="title__container mt-20">
+            <button id="delete-note" style="display:none" class="btn btn--sm btn--orange mb-5">Delete Note</button>
+            <div>
+              <button type="button" class="btn btn--sm btn--gray mr-5" data-micromodal-close>Cancel</button>
+              <button type="submit" class="btn btn--sm btn--blue">Save Note</button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
 </div>
diff --git a/bag_transfer/templates/appraise/main.html b/bag_transfer/templates/appraise/main.html
@@ -94,7 +94,7 @@
     var bagData = getDataFromAttributes($(this).closest('tr'))
     cmodal.find('.transfer-name').text(bagData.transfer_name);
     cmodal.find('.upload_id').val(bagData.upload_id)
-    cmodal.modal('show');
+    MicroModal.show("modal-confirm");
     return false;
   })
 
@@ -104,6 +104,7 @@
     var data = prepareNoteData($('#appraisal-note-form'), 'delete')
     saveNote(data, amodal);
     resolveRowCallback(data.upload_id, 'delete')
+    MicroModal.close("modal-appraisal-note");
     return false;
   });
 
@@ -113,6 +114,7 @@
     var data = prepareNoteData($(this), 'submit')
     saveNote(data, amodal);
     resolveRowCallback(data.upload_id, 'add')
+    MicroModal.close("modal-appraisal-note");
     return false;
   });
 
@@ -131,6 +133,7 @@
     var upload_row = $("#appraise_table tbody").find('tr[data-transfer-id='+data.upload_id+']');
     saveNote(data, cmodal);
     handleAppraisalDecision(upload_row, data.upload_id, 0);
+    MicroModal.close("modal-confirm");
   });
 })
 
@@ -178,7 +181,7 @@
   if (checkNoteLength(data.appraisal_note)) {
     $.get(url,data,function(resp){
       if (resp.success){
-        modal.modal('hide');
+        MicroModal.close("modal-confirm");
         return true;
       } else {
         return false;
@@ -196,7 +199,7 @@
     }
 }
 
-// setups up and opens appraisal note modal
+// sets up and opens appraisal note modal
 function activateModal(uid, label, transfer_name, appraisal_note) {
   amodal.find('.upload_id').val(uid);
   amodal.find('.add-or-edit-label').text(label);
@@ -207,7 +210,7 @@
   } else {
     amodal.find('#delete-note').hide()
   }
-  amodal.modal('show');
+  MicroModal.show("modal-appraisal-note");
 }
 
 function resolveRowCallback(uid, action) {

diff --git a/bag_transfer/templates/transfers/js_scripts.html b/bag_transfer/templates/transfers/js_scripts.html
@@ -15,7 +15,11 @@
 <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.16/sorting/datetime-moment.js"></script>
 
 <!-- Bootstrap 3.3.6 -->
-<script src="{% static "bootstrap/js/bootstrap.min.js" %}"></script>
+<!-- <script src="{% static "bootstrap/js/bootstrap.min.js" %}"></script> -->
 
-<!-- alert messages -->
+<!-- Micromodal.js -->
+<script src="{% static "dist/js/micromodal.min.js" %}"></script>
+<script src="{% static "js/modals.js" %}"></script>
+
+<!-- Alert messages -->
 <script src="{% static "js/alert.js" %}"></script>