refactor approve interpretation UI

app/controllers/jinja_globals.py

@@ -15,7 +15,7 @@ def build_qa_url_using_interpretation(interpretation: m.Interpretation):
     section: m.Section = interpretation.section
     collection: m.Collection = section.collection
     sub_collection = None
-    if not collection.parent.is_root:
+    if collection.parent and not collection.parent.is_root:
         sub_collection: m.Collection = collection
         collection: m.Collection = collection.parent
     book: m.Book = section.version.book

app/templates/book/approve_interpretation_modal.html

@@ -0,0 +1,27 @@
+<!-- prettier-ignore-->
+<div id="approve_interpretation_modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-[150] hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
+  <div class="relative w-full max-w-2xl max-h-full">
+    <!-- Modal content -->
+    <form
+      id="approve-interpretation-form"
+      class="relative bg-white rounded-lg shadow dark:bg-gray-700"
+      >
+      {{ form_hidden_tag() }}
+      <!-- Modal header -->
+      <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
+        <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Important Note</h3>
+        <button id="modalAddCloseButton" data-modal-hide="approve_interpretation_modal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button>
+      </div>
+
+      <!-- Modal body -->
+      <div class="flex dark:text-white items-center p-6 space-x-2  dark:border-gray-600">
+        There's already an approved interpretation for this section. Do you want to proceed to replace it?
+      </div>
+
+      <!-- Modal footer -->
+      <div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
+        <button name="submit" type="submit" class="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">Confirm</button>
+      </div>
+    </form>
+  </div>
+</div>

app/templates/book/interpretation_view.html

@@ -2,15 +2,16 @@
 {% extends 'base.html' %}
 
 {% if current_user.is_authenticated %}
-{% include 'book/delete_section_modal.html' %}
-{% include 'book/edit_section_modal.html' %}
+  {% include 'book/delete_section_modal.html' %}
+  {% include 'book/edit_section_modal.html' %}
+  {% include 'book/approve_interpretation_modal.html' %}
 <!-- prettier-ignore -->
 {% set show_delete_section = True %}
 <!-- prettier-ignore -->
 {% set show_edit_section = True %}
-{% block right_sidebar %}
-  {% include 'book/right_sidebar.html' %}
-{% endblock %}
+  {% block right_sidebar %}
+    {% include 'book/right_sidebar.html' %}
+  {% endblock %}
 {% endif %}
 
 
@@ -170,6 +171,12 @@
             </div>
           </dl>
         {% endfor %}
+
+        <span class="approved-interpretation-id hidden">
+          {% if section.approved_interpretation.approved %}
+            {{ section.approved_interpretation.id }}
+          {% endif %}
+        </span>
       </dl>
     </div>
   </div>

app/views/approve.py

@@ -33,6 +33,24 @@ def approve_interpretation(interpretation_id: int):
         )
         return jsonify({"message": "You dont have permission"}), 404
 
+    already_approved_interpretations = (
+        m.Interpretation.query.filter_by(
+            approved=True, section_id=interpretation.section_id
+        )
+        .filter(m.Interpretation.id != interpretation.id)
+        .all()
+    )
+    for approved_interpretation in already_approved_interpretations:
+        approved_interpretation: m.Interpretation
+        approved_interpretation.approved = False
+        log(
+            log.INFO,
+            "User [%s] revoked the approval of the interpretation: [%s]",
+            current_user,
+            interpretation,
+        )
+        approved_interpretation.save(False)
+
     interpretation.approved = not interpretation.approved
     log(
         log.INFO,

src/approve.ts

@@ -1,8 +1,31 @@
+import {Modal} from 'flowbite';
+import type {ModalOptions, ModalInterface} from 'flowbite';
+
 const REQUEST_URLS: {[key: string]: string} = {
   interpretation: '/approve/interpretation/',
   comment: '/approve/comment/',
 };
 
+const setAllApproveIconsToInactive = () => {
+  const approvedIconElements = document.querySelectorAll('.approved-icon');
+  approvedIconElements.forEach(el => {
+    el.classList.remove('hidden');
+    el.classList.add('hidden');
+  });
+
+  const notApprovedIconElements =
+    document.querySelectorAll('.not-approved-icon');
+  notApprovedIconElements.forEach(el => {
+    el.classList.remove('hidden');
+  });
+};
+
+// prettier-ignore
+const $approveInterpretationModalElement: HTMLElement = document.querySelector( '#approve_interpretation_modal', );
+const modalOptions: ModalOptions = {onShow: () => {}};
+// prettier-ignore
+const approveModal: ModalInterface = new Modal( $approveInterpretationModalElement, modalOptions, );
+
 const approveClickEventListener = async (btn: Element) => {
   const approve = btn.getAttribute('data-approve');
 
@@ -13,6 +36,54 @@ const approveClickEventListener = async (btn: Element) => {
 
   const entityId = btn.getAttribute('data-entity-id');
 
+  const approvedInterpretationIdBlock = document.querySelector(
+    '.approved-interpretation-id',
+  );
+  if (approve == 'interpretation') {
+    // prettier-ignore
+    if (approvedInterpretationIdBlock) {
+      const approvedInterpretationId = parseInt(
+        approvedInterpretationIdBlock.innerHTML,
+      );
+      if (approvedInterpretationId && approvedInterpretationId != parseInt(entityId)) {
+        approveModal.show();
+
+        const approvedInterpretationForm: HTMLFormElement =
+          document.querySelector('#approve-interpretation-form');
+
+        const submitFormEventListener = async (e: any) => {
+          e.preventDefault();
+          approvedInterpretationForm.removeEventListener(
+            'submit',
+            submitFormEventListener,
+          );
+          sendApproveRequest(
+            approve,
+            entityId,
+            btn,
+            approvedInterpretationIdBlock,
+          );
+          setAllApproveIconsToInactive();
+          approveModal.hide();
+        };
+        approvedInterpretationForm.addEventListener(
+          'submit',
+          submitFormEventListener,
+        );
+        return;
+      }
+    }
+  }
+
+  sendApproveRequest(approve, entityId, btn, approvedInterpretationIdBlock);
+};
+
+const sendApproveRequest = async (
+  approve: string,
+  entityId: string,
+  btn: Element,
+  approvedInterpretationIdBlock?: Element,
+) => {
   const requestUrl = REQUEST_URLS[approve] + entityId;
   const response = await fetch(requestUrl, {
     method: 'POST',
@@ -24,6 +95,13 @@ const approveClickEventListener = async (btn: Element) => {
 
   const json = await response.json();
   const approved = json.approve;
+  if (approve == 'interpretation') {
+    if (approved) {
+      approvedInterpretationIdBlock!.innerHTML = entityId;
+    } else {
+      approvedInterpretationIdBlock!.innerHTML = '';
+    }
+  }
 
   const approvedIconSvg = btn.querySelector('.approved-icon');
   const notApprovedIconSvg = btn.querySelector('.not-approved-icon');