improve FMUs show page, two columns, show geojson in modal dialog for copy-paste actions

Author: tsubik

app/admin/fmu.rb

@@ -69,7 +69,7 @@ def download_shapefiles(fmus)
     }
   end
 
-  sidebar "Shapefiles" do
+  sidebar "Shapefiles", only: :index do
     div do
       link_to "Download Filtered Shapefiles", download_filtered_shapefiles_admin_fmus_path(
         q: params[:q]&.to_unsafe_h
@@ -101,29 +101,51 @@ def download_shapefiles(fmus)
   end
 
   show do
-    attributes_table do
-      row :id
-      row :name
-      row :forest_type
-      row :country
-      row :operator
-      row :certification_fsc
-      row :certification_pefc
-      row :certification_olb
-      row :certification_pafc
-      row :certification_fsc_cw
-      row :certification_tlv
-      row :certification_ls
-      if resource.geojson && resource.centroid.present?
-        row :map do |r|
-          render partial: "map", locals: {center: [r.centroid.x, r.centroid.y], center_marker: false, geojson: r.geojson, bbox: r.bbox}
+    columns class: "d-flex" do
+      column class: "flex-1" do
+        attributes_table do
+          row :id
+          row :name
+          row :forest_type
+          row :country
+          row :operator
+
+          if resource.geojson && resource.centroid.present?
+            row :map do |r|
+              render partial: "map", locals: {center: [r.centroid.x, r.centroid.y], center_marker: false, geojson: r.geojson, bbox: r.bbox}
+            end
+          end
+          if resource.geojson
+            row(:geojson) do
+              div id: "geojson_modal", style: "display: none;" do
+                resource.geojson
+              end
+              link_to t("active_admin.view"), "javascript:void(0)", onclick: "$('#geojson_modal').dialog({ modal: true, dialogClass: 'custom_dialog' })"
+            end
+            row(:properties) do
+              div id: "properties_modal", style: "display: none;" do
+                resource.properties
+              end
+              link_to t("active_admin.view"), "javascript:void(0)", onclick: "$('#properties_modal').dialog({ modal: true, dialogClass: 'custom_dialog' })"
+            end
+          end
+          row :created_at
+          row :updated_at
+          row :deleted_at
+        end
+      end
+
+      column max_width: "250px" do
+        attributes_table title: t("active_admin.fmus_page.certification") do
+          row :certification_fsc
+          row :certification_pefc
+          row :certification_olb
+          row :certification_pafc
+          row :certification_fsc_cw
+          row :certification_tlv
+          row :certification_ls
         end
       end
-      row(:geojson) { |fmu| fmu.geojson.to_json }
-      row(:properties) { |fmu| fmu.geojson&.dig("properties")&.to_json }
-      row :created_at
-      row :updated_at
-      row :deleted_at
     end
   end
 

app/assets/stylesheets/active_admin.scss

@@ -214,3 +214,13 @@ body.active_admin {
   display: none;
 }
 
+.custom_dialog {
+  width: unset !important;
+  max-height: 80vh;
+  max-width: 70vw;
+  overflow-y: auto;
+
+  .ui-dialog-content {
+    padding: 10px;
+  }
+}

config/locales/en.yml

@@ -330,6 +330,7 @@ en:
       indicator_apv: 'Indicator APV'
       law_details: 'Law details'
     fmus_page:
+      certification: Certification
       download_shapefile: 'Download shapefile'
       confirm_delete: 'Are you sure you want to delete this FMU?'
     operator_page:

config/locales/fr.yml

@@ -362,6 +362,7 @@ fr:
       indicator_apv: 'Indicateur APV'
       law_details: 'Détails de la loi'
     fmus_page:
+      certification: Certification
       download_shapefile: 'Télécharger shapefile'
       confirm_delete: 'Êtes-vous sûr de vouloir supprimer cette FMU?'
     required_operator_document_page: