From 36757e77bd9f07d680744ea348b47cde54d3f8ed Mon Sep 17 00:00:00 2001
From: janpaulo <janpaulobinaluyo@gmail.com>
Date: Fri, 11 Feb 2022 20:37:19 +0800
Subject: [PATCH] Enahnce ui for doctrine show

---
 ...tation_marks_modal_form_component.html.erb |   6 +-
 .../document_doctrine_show_component.html.erb | 301 +++++++++---------
 .../pagination_component.html.erb             |   3 +-
 app/javascript/src/application.scss           |   9 +
 app/views/doctrines/search.html.erb           |   3 +-
 app/views/kaminari/_gap.html.erb              |   2 +-
 6 files changed, 169 insertions(+), 155 deletions(-)

diff --git a/app/components/annotation_marks_modal_form_component/annotation_marks_modal_form_component.html.erb b/app/components/annotation_marks_modal_form_component/annotation_marks_modal_form_component.html.erb
index bbd0cbc..951b599 100644
--- a/app/components/annotation_marks_modal_form_component/annotation_marks_modal_form_component.html.erb
+++ b/app/components/annotation_marks_modal_form_component/annotation_marks_modal_form_component.html.erb
@@ -3,7 +3,7 @@
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title">Edit Annotations</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close-x" data-bs-dismiss="modal" aria-label="Close">x</button>
       </div>
 
       <div class="modal-body">
@@ -12,7 +12,7 @@
             <strong> <%= label_tag :annotation_marks %> </strong> 
             <%= hidden_field_tag :document_id, document.id %>
             <%= hidden_field_tag :document_ids, citing_document_ids %>
-            <%= select_tag "annomark_ids[]", options_from_collection_for_select(Annomark.all, :id, :name, annotation.annomark_ids), class: "form-select default-selectize", multiple: true, prompt: "Please select" %>
+            <%= select_tag "annomark_ids[]", options_from_collection_for_select(Annomark.all, :id, :name, annotation.annomark_ids), class: "form-control default-selectize pe-0 ps-0", multiple: true, prompt: "Please select" %>
           </div>
         </div>
 
@@ -33,7 +33,7 @@
             </div>
           </div>
 
-          <div class="row tab">
+          <div class="row tab ms-1 ps-0">
             <table class="table table-striped table-hover mb-0">
               <thead>
                 <th class="bg-light"> Reference No. </th>
diff --git a/app/components/document_doctrine_show_component/document_doctrine_show_component.html.erb b/app/components/document_doctrine_show_component/document_doctrine_show_component.html.erb
index 51251b1..9c3193d 100644
--- a/app/components/document_doctrine_show_component/document_doctrine_show_component.html.erb
+++ b/app/components/document_doctrine_show_component/document_doctrine_show_component.html.erb
@@ -1,192 +1,197 @@
-<div class="card">
-  <div class="card-header">
+<hr class="mt-0"/>
+<div class="row  pe-0">
+  <div class="col-sm-10">
+    <h5> <b>Doctrine Details</b> </h5>
+  </div>
+
+  <div class="col-sm-2 d-flex justify-content-end pe-0">
+    <a class="btn btn-sm btn-secondary me-3" data-bs-toggle="modal" data-bs-target="#doctrineModal"> Edit </a>
+    <a class="btn btn-sm btn-danger" href="<%= jurisprudence_doctrine_path(document_id, id) %>" data-confirm="Are you sure to delete this record?" data-method="DELETE"> Delete </a>
+  </div>
+</div>
+<hr class="mt-3"/>
+<div class="">
+  
+  <div class="container-sm row-flex col-sm-12 mt-2">
+    <%= render(DoctrineModalFormComponent.new(current_user: current_user, doctrine: doctrine, subjects: all_subjects, opts: { form_url: jurisprudence_doctrine_path(jurisprudence_id: document_id, id: doctrine.id), form_method: "PUT" })) %>
+  </div>
+</div>
+
+<div class="card-body pt-0">
     <div class="row">
-      <div class="col-sm-10">
-        <h5> Doctrine Details </h5>
+      <div class="col-sm-2" style="width: 100px;">
+        <strong> Subjects: </strong>
       </div>
 
-      <div class="col-sm-2 justify-content-end">
-        <a class="btn btn-sm btn-secondary" data-bs-toggle="modal" data-bs-target="#doctrineModal"> Edit </a>
-        <a class="btn btn-sm btn-danger" href="<%= jurisprudence_doctrine_path(document_id, id) %>" data-confirm="Are you sure to delete this record?" data-method="DELETE"> Delete </a>
+      <div class="col-sm-10">
+        <%= subjects.map(&:lineage_name).join(" & ") %>
       </div>
     </div>
 
-    <div class="container-sm row-flex col-sm-12 mt-2">
-      <%= render(DoctrineModalFormComponent.new(current_user: current_user, doctrine: doctrine, subjects: all_subjects, opts: { form_url: jurisprudence_doctrine_path(jurisprudence_id: document_id, id: doctrine.id), form_method: "PUT" })) %>
-    </div>
-  </div>
-
-  <div class="card-body">
-      <div class="row">
-        <div class="col-sm-2" style="width: 100px;">
-          <strong> Subjects: </strong>
-        </div>
-
-        <div class="col-sm-10">
-          <%= subjects.map(&:lineage_name).join(" & ") %>
-        </div>
+    <div class="row">
+      <div class="col-sm-2" style="width: 100px;">
+        <strong> Content: </strong>
       </div>
 
-      <div class="row">
-        <div class="col-sm-2" style="width: 100px;">
-          <strong> Content: </strong>
-        </div>
-
-        <div class="col-sm-10">
-          <%= raw content %>
-        </div>
+      <div class="col-sm-10">
+        <%= raw content %>
       </div>
+    </div>
 
-    <div class="row">
-      <div class="col-sm-10"> </div>
-      <div class="col-sm-2 p-2">
-        <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#caseListsCollapse" aria-expanded="false" aria-controls="collapseExample"> Case Lists </button>
-      </div>
+  <div class="row">
+    <div class="col-sm-10"> </div>
+    <div class="col-sm-2 p-2">
+      <button type="button" class="btn btn-primary d-block ms-auto" data-bs-toggle="collapse" data-bs-target="#caseListsCollapse" aria-expanded="false" aria-controls="collapseExample"> Case Lists </button>
     </div>
+  </div>
 
-    <div class="collapse mb-3" id="caseListsCollapse">
-      <div class="row" data-controller="document" data-document-id="<%= document_id %>" data-doctrine-id="<%= id %>">
-        <div class="col-sm-10 p-2">
-          <%= text_field_tag :q, nil, class: "form-control", placeholder: "Search GR Number", data: { target: "document.input" } %>
-        </div>
-        <div class="col-sm-1 p-2">
-          <%= button_tag "Search", class: "btn btn-primary", data: { action: "click->document#search" } %>
-        </div>
+  <div class="collapse mb-3 mt-2" id="caseListsCollapse">
+    <div class="row" data-controller="document" data-document-id="<%= document_id %>" data-doctrine-id="<%= id %>">
+      <div class="col-sm-11 p-2">
+        <%= text_field_tag :q, nil, class: "form-control", placeholder: "Search GR Number", data: { target: "document.input" } %>
+      </div>
+      <div class="col p-2">
+        <%= button_tag "Search", class: "btn btn-primary", data: { action: "click->document#search" } %>
       </div>
+    </div>
 
-      <div class="row tab">
-        <table class="table table-striped table-hover mb-0">
-          <thead>
-            <th class="bg-light"> Reference No. </th>
-            <th class="bg-light"> Title </th>
-            <th class="bg-light"> Date </th>
-            <th class="bg-light"> </th>
-          </thead>
-
-          <tbody id="documentIndexTable"> </tbody>
-        </table>
-
-        <div class="modal fade new-annotation-modal" id="newAnnotationModal" tabindex="-1" aria-labelledby="annotationModal" aria-hidden="true">
-          <%= form_tag(doctrine_annotations_path(id), method: :post) do%>
-            <div class="modal-dialog modal-lg modal-dialog-scrollable">
-              <div class="modal-content">
-                <div class="modal-header">
-                  <h5 class="modal-title">New Annotations</h5>
-                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
+    <div class="row tab">
+      <table class="table table-striped table-hover mb-0" style="width: 98%;margin: 0 auto;">
+        <thead>
+          <th class="bg-light"> Reference No. </th>
+          <th class="bg-light"> Title </th>
+          <th class="bg-light"> Date </th>
+          <th class="bg-light"> </th>
+        </thead>
+
+        <tbody id="documentIndexTable"> 
+        
+        </tbody>
+      </table>
+
+      <div class="modal fade new-annotation-modal" id="newAnnotationModal" tabindex="-1" aria-labelledby="annotationModal" aria-hidden="true">
+        <%= form_tag(doctrine_annotations_path(id), method: :post) do%>
+          <div class="modal-dialog modal-lg modal-dialog-scrollable">
+            <div class="modal-content">
+              <div class="modal-header">
+                <h5 class="modal-title">New Annotations</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+              </div>
 
-                <div class="modal-body">
-                  <div class="row">
-                    <div class="col-sm-12 p-2">
-                      <strong> <%= label_tag :annotation_marks %> </strong>
-                      <%= hidden_field_tag :document_id, nil %>
-                      <%= hidden_field_tag :document_ids, nil %>
-                      <%= select_tag "annomark_ids[]", options_from_collection_for_select(Annomark.all, :id, :name), class: "form-select default-selectize", multiple: true, prompt: "Please select" %>
-                    </div>
+              <div class="modal-body">
+                <div class="row">
+                  <div class="col-sm-12 p-2">
+                    <strong> <%= label_tag :annotation_marks %> </strong>
+                    <%= hidden_field_tag :document_id, nil %>
+                    <%= hidden_field_tag :document_ids, nil %>
+                    <%= select_tag "annomark_ids[]", options_from_collection_for_select(Annomark.all, :id, :name), class: "form-select default-selectize", multiple: true, prompt: "Please select" %>
                   </div>
+                </div>
 
-                  <div class="row">
-                    <div class="col-sm-12 p-2">
-                      <strong> <%= label_tag :document_title %> </strong>
-                      <%= text_area_tag :document_title, nil, class: "form-control" %>
-                    </div>
+                <div class="row">
+                  <div class="col-sm-12 p-2">
+                    <strong> <%= label_tag :document_title %> </strong>
+                    <%= text_area_tag :document_title, nil, class: "form-control" %>
                   </div>
+                </div>
 
-                  <div class="row">
-                    <div class="row" data-controller="document">
-                      <div class="col-sm-10 p-2">
-                        <%= text_field_tag :q, nil, class: "form-control", placeholder: "Search GR Number", data: { target: "document.input" } %>
-                      </div>
-                      <div class="col-sm-1 p-2">
-                        <button type="button" class="btn btn-primary" data-action="click->document#modalDocumentSearch"> Search </button>
-                      </div>
+                <div class="row">
+                  <div class="row" data-controller="document">
+                    <div class="col-sm-10 p-2">
+                      <%= text_field_tag :q, nil, class: "form-control", placeholder: "Search GR Number", data: { target: "document.input" } %>
                     </div>
-
-                    <div class="row tab">
-                      <table class="table table-striped table-hover mb-0">
-                        <thead>
-                          <th class="bg-light"> Reference No. </th>
-                          <th class="bg-light"> Title </th>
-                          <th class="bg-light"> Date </th>
-                          <th class="bg-light"> </th>
-                        </thead>
-
-                        <tbody id="modalDocumentSearchTable"> </tbody>
-                      </table>
+                    <div class="col-sm-1 p-2">
+                      <button type="button" class="btn btn-primary" data-action="click->document#modalDocumentSearch"> Search </button>
                     </div>
                   </div>
 
-                  <div class="row">
-                    <div class="col-sm-12 p-2">
-                      <strong> <%= label_tag :phil_rep %> </strong> 
-                      <%= text_field_tag :phil_rep, nil, class: "form-control" %>
-                    </div>
+                  <div class="row tab">
+                    <table class="table table-striped table-hover mb-0">
+                      <thead>
+                        <th class="bg-light"> Reference No. </th>
+                        <th class="bg-light"> Title </th>
+                        <th class="bg-light"> Date </th>
+                        <th class="bg-light"> </th>
+                      </thead>
+
+                      <tbody id="modalDocumentSearchTable"> </tbody>
+                    </table>
                   </div>
+                </div>
 
-                  <div class="row">
-                    <div class="col-sm-12 p-2">
-                      <strong> <%= label_tag :editor_notes %> </strong> 
-                      <trix-editor id="editor_notes" placeholder="Editor Notes"> </trix-editor>
-                    </div>
+                <div class="row">
+                  <div class="col-sm-12 p-2">
+                    <strong> <%= label_tag :phil_rep %> </strong> 
+                    <%= text_field_tag :phil_rep, nil, class: "form-control" %>
                   </div>
                 </div>
 
-                <div class="modal-footer">
-                  <%= submit_tag "Save", class: "btn btn-primary" %>
-                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                <div class="row">
+                  <div class="col-sm-12 p-2">
+                    <strong> <%= label_tag :editor_notes %> </strong> 
+                    <trix-editor id="editor_notes" placeholder="Editor Notes"> </trix-editor>
+                  </div>
                 </div>
               </div>
+
+              <div class="modal-footer">
+                <%= submit_tag "Save", class: "btn btn-primary" %>
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+              </div>
             </div>
-          <% end %>
-        </div>
+          </div>
+        <% end %>
       </div>
     </div>
+  </div>
 
-    <div class="card row-flex">
-      <h5 class="card-header"> Annotations </h5>
-      <div class="card-body">
-        <% doctrine.annotations.order(rank: :asc).each do |annotation| %>
-          <div class="row">
-            <div class="col-sm-10">
-              <p class="pb-0 ms-3">
-                <strong> <%= "#{annotation.annomarks.map { |annomark| "(#{annomark.code})" }.join(" ")}" %> </strong>
-                <% document_title = annotation.document.short_title || annotation.document.title %>
-                <% date_or_year = annotation.document.docdate.present? ? annotation.document.docdate.strftime("%B %d, %Y") : annotation.document.year %>
-                <% annotated_documents_title = [] %>
-                <% annotation.documents.each do |annotated_document| %>
-                  <% ad_title = annotated_document.short_title || annotated_document.title %>
-                  <% ad_date_or_year = annotated_document.docdate.present? ? annotated_document.docdate.strftime("%B %d, %Y") : annotated_document.year %>
-                  <% annotated_documents_title << [" citing #{ad_title}", annotated_document.reference_number, ad_date_or_year].join(", ") %>
-                <% end %>
-                <%= raw [document_title, annotation.document.reference_number, date_or_year, annotation.phil_rep, annotated_documents_title].reject(&:blank?).join(', ').html_safe %>
-              </p>
-            </div>
+  <div class="row-flex">
+    <div class="annot-header">
+    <h5> Annotations </h5>
+    </div>
+    <div class="">
+      <% doctrine.annotations.order(rank: :asc).each do |annotation| %>
+        <div class="row">
+          <div class="col-sm-10">
+            <p class="pb-0 ms-3">
+              <strong> <%= "#{annotation.annomarks.map { |annomark| "(#{annomark.code})" }.join(" ")}" %> </strong>
+              <% document_title = annotation.document.short_title || annotation.document.title %>
+              <% date_or_year = annotation.document.docdate.present? ? annotation.document.docdate.strftime("%B %d, %Y") : annotation.document.year %>
+              <% annotated_documents_title = [] %>
+              <% annotation.documents.each do |annotated_document| %>
+                <% ad_title = annotated_document.short_title || annotated_document.title %>
+                <% ad_date_or_year = annotated_document.docdate.present? ? annotated_document.docdate.strftime("%B %d, %Y") : annotated_document.year %>
+                <% annotated_documents_title << [" citing #{ad_title}", annotated_document.reference_number, ad_date_or_year].join(", ") %>
+              <% end %>
+              <%= raw [document_title, annotation.document.reference_number, date_or_year, annotation.phil_rep, annotated_documents_title].reject(&:blank?).join(', ').html_safe %>
+            </p>
+          </div>
 
-            <div class="col-sm-2">
-              <a class="btn btn-sm btn-secondary" data-bs-toggle="modal" data-bs-target="#editAnnotationModal<%= annotation.id %>"> Edit </a>
-              <a class="btn btn-sm btn-danger" href="<%= doctrine_annotation_path(doctrine.id, annotation.id) %>" data-confirm="Are you sure to delete this record?" data-method="DELETE"> Delete </a>
-            </div>
+          <div class="col-sm-2 d-flex justify-content-end align-items-baseline">
+            <a class="btn btn-sm btn-secondary me-3" data-bs-toggle="modal" data-bs-target="#editAnnotationModal<%= annotation.id %>"> Edit </a>
+            <a class="btn btn-sm btn-danger" href="<%= doctrine_annotation_path(doctrine.id, annotation.id) %>" data-confirm="Are you sure to delete this record?" data-method="DELETE"> Delete </a>
           </div>
+        </div>
 
-          <% if annotation.editor_notes.present? %>
-            <div class="row">
-              <div class="col-sm-1 ms-5 p-0" style="width: 105px;">
-                <span> Editors Note: </span>
-              </div>
-              
-              <div class="col-sm-10 ps-0">
-                <%= raw annotation.editor_notes %>
-              </div>
+        <% if annotation.editor_notes.present? %>
+          <div class="row">
+            <div class="col-sm-1 ms-5 p-0" style="width: 105px;">
+              <span> Editors Note: </span>
             </div>
-          <% end %>
-
-          <div class="row annotation-marks-modal-container">
-            <div class="modal fade" id="editAnnotationModal<%= annotation.id %>" tabindex="-1" aria-labelledby="annotationModal" aria-hidden="true">
-              <%= render AnnotationMarksModalFormComponent.new(current_user: current_user, document: document, annotation: annotation, opts: { form_url: doctrine_annotation_path(id, annotation.id), form_method: "PUT" }) %>
+            
+            <div class="col-sm-10 ps-0">
+              <%= raw annotation.editor_notes %>
             </div>
           </div>
+          <hr/>
         <% end %>
-      </div>
+
+        <div class="row annotation-marks-modal-container">
+          <div class="modal fade modal-doctrine-body" id="editAnnotationModal<%= annotation.id %>" tabindex="-1" aria-labelledby="annotationModal" aria-hidden="true">
+            <%= render AnnotationMarksModalFormComponent.new(current_user: current_user, document: document, annotation: annotation, opts: { form_url: doctrine_annotation_path(id, annotation.id), form_method: "PUT" }) %>
+          </div>
+        </div>
+      <% end %>
     </div>
   </div>
 </div>
diff --git a/app/components/pagination_component/pagination_component.html.erb b/app/components/pagination_component/pagination_component.html.erb
index 0beedf0..a6d80f5 100644
--- a/app/components/pagination_component/pagination_component.html.erb
+++ b/app/components/pagination_component/pagination_component.html.erb
@@ -1,7 +1,7 @@
 <div class="col col-md-12">
   <header class="header bg-white b-b clearfix">
     <div class="row m-t-sm align-items-end pagination-body">
-      <div class="col-md-6 mb-0">
+      <div class="col-md-6 mb-0<%=opts[:is_subject_breadcrums].present? && subjects.present? ? '' : ' ps-0' %> ">
         <% if opts[:is_subject_breadcrums].present? && subjects.present? %>
           <ol class="breadcrumb mb-0">
             <% subjects.each do |subject| %>
@@ -30,5 +30,4 @@
       </div>
     </div>
   </header>
-  <hr class="mt-0"/>
 </div>
diff --git a/app/javascript/src/application.scss b/app/javascript/src/application.scss
index f347db2..59eb892 100644
--- a/app/javascript/src/application.scss
+++ b/app/javascript/src/application.scss
@@ -94,3 +94,12 @@
 .doctrine-index-body .doctrine-content-body {
   padding-left: 15px;
 }
+
+.annot-header {
+  border-bottom: 1px solid darkred;
+  border-top: 1px solid darkred;
+  padding-top: 8px;
+  margin-bottom: 10px;
+  padding-left: 5px;
+  background: #efefef;
+}
\ No newline at end of file
diff --git a/app/views/doctrines/search.html.erb b/app/views/doctrines/search.html.erb
index e71b3d8..5c45a4d 100644
--- a/app/views/doctrines/search.html.erb
+++ b/app/views/doctrines/search.html.erb
@@ -1,6 +1,6 @@
 <div class="container-sm mt-1 p-0 doctrine-index-body"> 
   <div class="container m-2 ps-0"> <%= render PaginationComponent.new(data: @doctrines, opts: { is_subject_breadcrums: true, subject_ids: params[:subject_ids] }) %> </div>
-
+  <hr class="mt-0"/>
   <% if params[:is_index_table].to_s.eql?("true") %>
     <div class="card-body col-sm-12 tableFixHead p-0 mt-1">
       <%= render(DoctrineIndexTableComponent.new(current_user: current_user, search_results: @doctrines)) %>
@@ -8,4 +8,5 @@
   <% else %>
     <%= render(DocumentDoctrineIndexComponent.with_collection(@doctrines, current_user: current_user, opts: { is_doctrines_index: true, subject_ids: params[:subject_ids] })) %>
   <% end %>
+ 
 </div>
diff --git a/app/views/kaminari/_gap.html.erb b/app/views/kaminari/_gap.html.erb
index bbb0f98..75ccf51 100644
--- a/app/views/kaminari/_gap.html.erb
+++ b/app/views/kaminari/_gap.html.erb
@@ -5,4 +5,4 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<span class="page gap"><%= t('views.pagination.truncate').html_safe %></span>
+<span class="page gap ms-2 me-2"><%= t('views.pagination.truncate').html_safe %></span>