fix modals

Author: microstudi

app/packs/src/decidim/participatory_documents/pdf.js

@@ -15,6 +15,63 @@ window.InitDocumentManagers = (options) => {
       window.currentSuggestionForm.open();
     }
   });
+
+  const exportContent = options.exportModal.querySelector(".content");
+  const exportCallout = options.exportModal.querySelector(".callout");
+  const exportButton = options.exportModal.querySelector(".export-button");
+  const closeButton = options.exportModal.querySelector(".close-button");
+
+  options.exportButton.addEventListener("click", (evt) => {
+    evt.stopPropagation();
+    exportCallout.classList.remove("alert", "success");
+    exportCallout.classList.add("hidden");
+    exportContent.classList.remove("hidden");
+    exportButton.classList.remove("hidden");
+    window.Decidim.currentDialogs[options.exportModal.id].open();
+  });
+
+  closeButton.addEventListener("click", (evt) => {
+    evt.stopPropagation();
+    window.Decidim.currentDialogs[options.exportModal.id].close();
+  });
+
+  exportButton.addEventListener("click", (evt) => {
+    evt.stopPropagation();
+    const token = document.getElementsByName("csrf-token");
+    fetch(evt.target.dataset.url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Accept": "application/json",
+        "X-CSRF-Token": token && token[0].content
+      },
+      credentials: "include"
+    }).
+      then((response) => {
+        if (response.ok) {
+          return response.json();
+        }
+        return response.json().then((json) => { 
+          throw new Error(json.message) 
+        });
+      }).
+      then((resp) => {
+        console.log("response ok", resp);
+        exportButton.classList.add("hidden");
+        exportContent.classList.add("hidden");
+        exportCallout.classList.remove("hidden");
+        exportCallout.classList.add("success");
+        exportCallout.innerHTML = resp.message;
+      }).
+      catch((message) => {
+        exportButton.classList.add("hidden");
+        exportContent.classList.add("hidden");
+        exportCallout.classList.remove("hidden");
+        exportCallout.classList.add("alert");
+        exportCallout.innerHTML = message;
+        console.error("Error exporting", message);
+      });
+  });
 };
 
 // Call this on an annotation layer to initialize the polygon viewer (public side)

app/packs/src/decidim/participatory_documents/pdf_off.js

@@ -23,6 +23,7 @@ const openLogin = (evt) => {
 
 window.InitDocumentManagers = (options) => {
   options.globalSuggestionsButton.addEventListener("click", openLogin);
+  options.exportButton.addEventListener("click", openLogin);
 };
 
 // Call this on an annotation layer to initialize the polygon viewer (public side)

app/views/decidim/participatory_documents/admin/sections/_modal.html.erb

@@ -9,8 +9,8 @@
   </div>
   <div data-dialog-actions>
     <div>
-      <button class="button button__lg button__secondary" id="editor-modal-save"><%= t("modal.save", scope: "decidim.participatory_documents.admin.sections") %></button>
       <button class="button button__lg button__alert" id="editor-modal-remove"><%= t("modal.delete", scope: "decidim.participatory_documents.admin.sections") %></button>
+      <button class="button button__lg button__secondary" id="editor-modal-save"><%= t("modal.save", scope: "decidim.participatory_documents.admin.sections") %></button>
     </div>
   </div>
 <% end %>

app/views/decidim/participatory_documents/documents/_export_modal.html.erb

@@ -1,11 +1,14 @@
 <%= decidim_modal id: "exportSuggestionsModal" do %>
   <div data-dialog-container>
+    <%= icon "download-line" %>
     <h3 class="h3 mb-2"><%= t(".title") %></h3>
+    <div>
+      <div class="callout hidden"></div>
+      <p class="content"><%= t(".description_html", email: current_user&.email, count: all_suggestions&.count) %></p>
+    </div>
   </div>
-  <div data-dialog-container>
-    <p><%= t(".description_html", email: current_user&.email, count: all_suggestions&.count) %></p>
-  </div>
-  <div class="row text-center mt-8 my-2" data-dialog-actions>
+  <div class="mt-8 my-2" data-dialog-actions>
+    <button type="button" class="close-button button button__lg button__primary"><%= t(".close") %></button>
     <button type="button" class="export-button button button__lg button__secondary" data-url="<%= export_document_suggestions_path(document) %>"><%= t(".send") %></button>
   </div>
 <% end %>

app/views/decidim/participatory_documents/documents/_pdfjs_base.html.erb

@@ -315,7 +315,6 @@ See https://github.com/adobe-type-tools/cmap-resources
                 <%= t "global_suggestions", scope: "decidim.participatory_documents.document" %>
               </button>
               <button id="exportSuggestionsTrigger"
-                      data-dialog-open="exportSuggestionsModal"
                       class="decidimButton muted"
                       title="<%= t "export_my_suggestions", scope: "decidim.participatory_documents.document" %>">
                 <%= t "export_my_suggestions", scope: "decidim.participatory_documents.document" %>

app/views/decidim/participatory_documents/documents/pdf_viewer.html.erb

@@ -30,7 +30,7 @@
 
   <div id="notifications"></div>
 
-  <div id="participation-modal"></div>
+  <div id="participationModal"></div>
 
   <%= render "export_modal" %>
 
@@ -46,9 +46,9 @@
         i18n: I18n,
         documentPath: DocumentPath,
         globalSuggestionsButton: document.getElementById("globalSuggestionTrigger"),
-        participationLayout: document.getElementById("participation-modal"),
+        participationLayout: document.getElementById("participationModal"),
         exportButton: document.getElementById("exportSuggestionsTrigger"),
-        exportModal: document.getElementById("export-modal")
+        exportModal: document.getElementById("exportSuggestionsModal")
       };
       window.InitDocumentManagers(options);
 

config/locales/en.yml

@@ -227,6 +227,7 @@ en:
             your email inbox at %{email}."
       documents:
         export_modal:
+          close: Close
           description_html: You have %{count} suggestions on this document. If you
             want to export them, you will receive a ZIP file with and Excel document
             in it with all your data and any possible answer the admins have given