Merge pull request #80 from lexintegritastech/improve-main-ui

Improve UI for `documents`, `doctrines`, and `annotations`

app/components/annotation_marks_modal_form_component/annotation_marks_modal_form_component.html.erb

@@ -27,26 +27,26 @@
           </div>
         </div>
 
-        <div class="row">
+        <div id="annotatedDocumentsSearchResults">
-          <div class="col-sm-10 p-2">
+          <div class="row">
-            <%= text_field_tag :q, nil, class: "form-control", placeholder: "Search GR Number", data: { target: "annotations.q" } %>
+            <div class="col-sm-10 p-2">
-          </div>
+              <%= text_field_tag :q, nil, class: "form-control", placeholder: "Search GR Number", data: { target: "annotations.q" } %>
-          <div class="col-sm-1 p-2">
+            </div>
-            <button type="button" class="btn btn-success" data-action="click->annotations#searchDocument"> Search </button>
+            <div class="col-sm-1 p-2">
+              <button type="button" class="btn btn-success" data-action="click->annotations#searchDocuments"> Search </button>
+            </div>
           </div>
-        </div>
 
-        <div class="row tab">
+          <div class="row tab">
-          <table class="table table-striped table-hover mb-0" style="width: 98%; margin: 0 auto;">
+            <table class="table table-striped table-hover mb-0" style="width: 98%; margin: 0 auto;">
-            <thead>
+              <thead>
-              <th class="bg-light"> Reference No. </th>
+                <th class="bg-light"> Reference No. </th>
-              <th class="bg-light"> Title </th>
+                <th class="bg-light"> Title </th>
-              <th class="bg-light"> Date </th>
+                <th class="bg-light"> Date </th>
-              <th class="bg-light"> </th>
+                <th class="bg-light"> </th>
-            </thead>
+              </thead>
-
+            </table>
-            <tbody id="documentSearchResultTable"> </tbody>
+          </div>
-          </table>
         </div>
 
         <div class="row">

app/components/document_doctrine_show_component.rb

@@ -1,7 +1,8 @@
 class DocumentDoctrineShowComponent < BaseComponent
-  attr_reader :current_user, :document_id, :doctrine, :subjects
+  attr_reader :current_user, :annotations, :document_id, :doctrine, :subjects
 
-  def initialize(current_user:, doctrine:, document_id:, subjects:, opts: {})
+  def initialize(current_user:, annotations:, doctrine:, document_id:, subjects:, opts: {})
+    @annotations = annotations
     @doctrine = doctrine
     @document_id = document_id
     @current_user = current_user
@@ -13,7 +14,6 @@ class DocumentDoctrineShowComponent < BaseComponent
   delegate :headnote, to: :doctrine
   delegate :subject_ids, to: :doctrine
   delegate :content, to: :doctrine
-  delegate :annotations, to: :doctrine
   delegate :subjects, to: :doctrine
 
   def annotation_form_url

app/components/document_doctrine_show_component/document_doctrine_show_component.html.erb

@@ -74,8 +74,6 @@
           <th class="bg-light"> Date </th>
           <th class="bg-light"> </th>
         </thead>
-
-        <tbody id="documentIndexTable"> </tbody>
       </table>
     </div>
   </div>
@@ -83,8 +81,9 @@
 
   <div class="row-flex">
     <div class="annot-header"> <h5> Annotations </h5> </div>
-    <div class="">
+    <div class="" id="annotationsIndexView">
-      <% doctrine.annotations.order(rank: :asc).each do |annotation| %>
+      <%= render(partial: "/shared/annotations_pagination", locals: { annotations: annotations, opts: { current_page: 1 } }) %>
+      <% annotations.each do |annotation| %>
         <% 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 = [] %>
@@ -108,7 +107,7 @@
                 data-controller="annotations" data-doctrine-id="<%= id %>" data-annotation-id="<%= annotation.id %>" 
                 data-document-title="<%= citing_document_title %>" 
                 data-action="click->annotations#renderForm"> Edit </a>
-            <a class="btn btn-danger" href="<%= doctrine_annotation_path(doctrine.id, annotation.id) %>" data-confirm="Are you sure to delete this record?" data-method="DELETE"> Delete </a>
+            <a class="btn btn-danger" data-controller="annotations" data-doctrine-id="<%= id %>" data-annotation-id="<%= annotation.id %>" data-action="click->annotations#delete" > Delete </a>
           </div>
         </div>
 

app/controllers/api/doctrine/annotations_controller.rb

@@ -1,10 +1,22 @@
 module Api
   module Doctrine
     class AnnotationsController < ::Api::BaseController
+      include AnnotationSearch
+
       load_and_authorize_resource :doctrine, class: "Doctrine"
       load_and_authorize_resource :annotation, class: "Annotation", through: :doctrine
 
       def index
+        search = annotation_search(search_params)
+        @annotations = search.results
+
+        respond_with @annotations
+      end
+
+      def search
+        search = annotation_search(search_params)
+        @annotations = search.results
+
         respond_with @annotations
       end
 
@@ -14,12 +26,21 @@ module Api
 
       def create
         attrs = resource_params.to_unsafe_h.deep_symbolize_keys
-        subject_ids = attrs.delete(:subject_ids)
+        document_id = attrs.delete(:document_id)
-
+        document_ids = params[:document_ids].split(",")
+    
         @annotation = @doctrine.annotations.new(attrs)
+    
+        if document_id.present?
+          @annotation.document = Cdao::Document.find(document_id)
+        end
+    
+        if document_ids.present?
+          @documents = Cdao::Document.where(id: document_ids)
+        end
 
         if @annotation.save
-          @annotation.subject_ids = subject_ids if subject_ids.present?
+          @documents.each { |document| @annotation.add_document(document) } if @documents.present?
 
           respond_with @annotation
         else
@@ -29,10 +50,21 @@ module Api
 
       def update
         attrs = resource_params.to_unsafe_h.deep_symbolize_keys
-        subject_ids = attrs.delete(:subject_ids)
+        document_id = attrs.delete(:document_id)
+        document_ids = params[:document_ids].split(",")
+    
+        if document_ids.present?
+          @documents = Cdao::Jurisprudence.where(id: document_ids)
+        end
+    
+        attrs[:document] = Cdao::Jurisprudence.find(document_id) if document_id.present?
 
         if @annotation.update(attrs)
-          @annotation.subject_ids = subject_ids if subject_ids.present?
+          @annotation.annotation_documents.each do |annotation_document|
+            @annotation.remove_document(annotation_document.document)
+          end
+  
+          @documents.each { |document| @annotation.add_document(document) } if @documents.present?
 
           respond_with @annotation
         else
@@ -49,7 +81,11 @@ module Api
       private
 
         def resource_params
-          params.permit(:content, subject_ids: [])
+          params.permit(:document_id, :phil_rep, :editor_notes, :rank, annomark_ids: [])
+        end
+
+        def search_params
+          params.permit(:doctrine_id, :document_id, :phil_rep, :q, :page, :per_page)
         end
     end
   end

app/controllers/api/doctrines_controller.rb

@@ -20,12 +20,17 @@ module Api
     def create
       attrs = resource_params.to_unsafe_h.deep_symbolize_keys
       subject_ids = attrs.delete(:subject_ids)
+      jurisprudence_ids = attrs.delete(:jurisprudence_ids)
 
       @doctrine = ::Doctrine.new(attrs)
 
       if @doctrine.save
         @doctrine.subject_ids = subject_ids if subject_ids.present?
 
+        jurisprudence_ids.each do |jurisprudence_id|
+          @doctrine.doctrine_jurisprudences.create(jurisprudence_id: jurisprudence_id)
+        end
+
         respond_with @doctrine
       else
         render errors: @doctrine.errors, status: 422

app/controllers/concerns/annotation_search.rb

@@ -0,0 +1,17 @@
+module AnnotationSearch
+  def annotation_search(search_params)
+    fulltext_fields = %i[phil_rep].freeze
+
+    search = ::Annotation.search do
+      fulltext search_params[:q], fields: fulltext_fields if search_params[:q].present?
+
+      %i[doctrine_id document_id].each do |field|
+        with field, search_params[field] if search_params[field].present?
+      end
+
+      paginate page: search_params[:page] || 1, per_page: search_params[:per_page] || 20
+    end
+
+    search
+  end
+end

app/controllers/doctrines_controller.rb

@@ -1,5 +1,6 @@
 class DoctrinesController < ApplicationController
   include DoctrineSearch
+  include AnnotationSearch
 
   load_and_authorize_resource :doctrine, class: "Doctrine"
 
@@ -23,6 +24,9 @@ class DoctrinesController < ApplicationController
 
   def show
     @jurisprudence = @doctrine.doctrine_jurisprudences.present? ? @doctrine.doctrine_jurisprudences.first.jurisprudence : nil
+
+    search = annotation_search(params.permit(:page, :per_page))
+    @annotations = search.results
   end
 
   def create

app/controllers/document/doctrines_controller.rb

@@ -1,7 +1,12 @@
 class Document::DoctrinesController < ApplicationController
+  include AnnotationSearch
+
   load_and_authorize_resource :document, class: "Cdao::Jurisprudence"
   load_and_authorize_resource :doctrine, class: "Doctrine", through: :document
 
 
-  def show; end
+  def show
+    search = annotation_search(params.permit(:page, :per_page))
+    @annotations = search.results
+  end
 end

app/javascript/controllers/annotations_controller.js

@@ -7,8 +7,12 @@ export default class extends ApplicationController {
     super.connect()
   }
 
-  searchDocument () {
+  searchDocuments () {
-    this.stimulate("AnnotationReflex#render_document_search_results", { q: this.qTarget.value })
+    this.stimulate("AnnotationReflex#render_document_search_results", { q: this.qTarget.value, page: 1 })
+  }
+
+  paginateDocuments () {
+    this.stimulate("AnnotationReflex#render_document_search_results", { q: this.element.dataset["q"], page: this.element.dataset["page"] })
   }
 
   renderForm () {
@@ -40,7 +44,7 @@ export default class extends ApplicationController {
     }
   }
 
-  addCitingDocument () {
+  addAnnotatedDocument () {
     var document_id = "", document_ref_no = "", document_date = "", document_title = "", 
         $modal = $("#annotationModal"), $doc_title = $modal.find("#document_title"), 
         $citing_document_ids = $modal.find("#document_ids")
@@ -71,12 +75,41 @@ export default class extends ApplicationController {
 
     if (annotation_id !== null && annotation_id !== undefined && annotation_id !== "") {
       $.ajax({
-        url: "/doctrines/" + doctrine_id + "/annotations/" + annotation_id,
+        url: "/api/doctrines/" + doctrine_id + "/annotations/" + annotation_id,
         type: 'PUT',
-        data: params
+        data: params,
+        success: function() {
+          $(".btn-close-x").trigger("click")
+          $this.stimulate("AnnotationReflex#render_annotations_views", { page: 1 })
+        }
       })
     } else {
-      $.post("/doctrines/" + doctrine_id + "/annotations", params)
+      $.post("/api/doctrines/" + doctrine_id + "/annotations", params, function(result, status) {
+        if(status === "success") {
+          $(".btn-close-x").trigger("click")
+          $this.stimulate("AnnotationReflex#render_annotations_views", { page: 1 })
+        }
+      })
     }
   }
+
+  delete(ev) {
+    var $this = this, doctrine_id = $this.element.dataset["doctrineId"], annotation_id = this.element.dataset["annotationId"]
+
+    ev.preventDefault();
+    const contrim_alert = confirm("Are you sure to delete this record?")
+    if (contrim_alert) {
+      $.ajax({
+        url: "/api/doctrines/" + doctrine_id + "/annotations/" + annotation_id,
+        type: 'DELETE',
+        success: function() {
+          $this.stimulate("AnnotationReflex#render_annotations_views", { page: 1 })
+        }
+      })
+    }
+  }
+
+  paginate () {
+    this.stimulate("AnnotationReflex#render_annotations_views", { page: this.element.dataset["page"] })
+  }
 }

app/javascript/controllers/document_controller.js

@@ -7,10 +7,15 @@ export default class extends ApplicationController {
   }
 
   search () {
-    this.stimulate("DocumentReflex#render_index_table", 
+    this.stimulate("DocumentReflex#render_case_lists_search_results", 
-                   { q: this.inputTarget.value },
+                   { q: this.inputTarget.value, page: 1 },
-                   this.element.dataset["documentId"], 
+                     this.element.dataset["doctrineId"])
-                   this.element.dataset["doctrineId"])
+  }
+
+  paginate () {
+    this.stimulate("DocumentReflex#render_case_lists_search_results", 
+                   { q: this.element.dataset["q"], page: this.element.dataset["page"] },
+                     this.element.dataset["doctrineId"])
   }
 
   loadYears () {

app/javascript/src/application.scss

@@ -26,7 +26,7 @@
     left: 0; 
 }
 
-.clickable-link, .clickable-tr, .accordion-button {
+.clickable-link, .clickable-tr, .accordion-button, .page-item, .page-link {
   cursor: pointer;
 }
 

app/reflexes/annotation_reflex.rb

@@ -2,11 +2,18 @@
 
 class AnnotationReflex < ApplicationReflex
   include DocumentSearch
+  include AnnotationSearch
 
   def render_document_search_results(search_params)
     search = document_search(search_params)
     @documents = search.results
-    opts = { is_citing_document: true }
+    opts = { current_page: search_params[:page], q: search_params[:q] }
-    morph "tbody#documentSearchResultTable", render(partial: "document_search_results_table", locals: { search_results: @documents, opts: opts })
+    morph "#annotatedDocumentsSearchResults", render(partial: "/shared/annotated_documents_search_results", locals: { documents: @documents, opts: opts })
+  end
+
+  def render_annotations_views(search_params)
+    search = annotation_search(search_params)
+    @annotations = search.results
+    morph "#annotationsIndexView", render(partial: "/shared/annotations_index_view", locals: { annotations: @annotations, opts: { current_page: search_params[:page] } })
   end
 end

app/reflexes/document_reflex.rb

@@ -3,11 +3,11 @@
 class DocumentReflex < ApplicationReflex
   include DocumentSearch
 
-  def render_index_table(search_params, document_id, doctrine_id)
+  def render_case_lists_search_results(search_params, doctrine_id)
     search = document_search(search_params)
     @documents = search.results
-    opts = { is_case_lists: true, doctrine_id: doctrine_id }
+    opts = { doctrine_id: doctrine_id, current_page: search_params[:page], q: search_params[:q] }
-    morph "tbody#documentIndexTable", render(partial: "document_search_results_table", locals: { search_results: @documents, opts: opts })
+    morph "#caseListsCollapse", render(partial: "/shared/case_lists_search_results", locals: { documents: @documents, opts: opts })
   end
 
   def render_years(results)

app/views/api/doctrine/annotations/create.json.jbuilder

@@ -0,0 +1,2 @@
+json.(@annotation,  *%i[id doctrine_id document_id phil_rep editor_notes annomark_ids citing_document_ids])
+json.doctrine_jurisprudence @annotation.doctrine.doctrine_jurisprudences.first.jurisprudence

app/views/api/doctrine/annotations/destroy.json.jbuilder

@@ -0,0 +1,2 @@
+json.(@annotation,  *%i[id doctrine_id document_id phil_rep editor_notes annomark_ids citing_document_ids])
+json.doctrine_jurisprudence @annotation.doctrine.doctrine_jurisprudences.first.jurisprudence

app/views/api/doctrine/annotations/edit.json.jbuilder

@@ -0,0 +1,2 @@
+json.(@annotation,  *%i[id doctrine_id document_id phil_rep editor_notes annomark_ids citing_document_ids])
+json.doctrine_jurisprudence @annotation.doctrine.doctrine_jurisprudences.first.jurisprudence

app/views/api/doctrine/annotations/index.json.jbuilder

@@ -0,0 +1,3 @@
+json.array!(@annotations) do |annotation|
+  json.extract! annotation, *%i[id doctrine_id document_id phil_rep editor_notes annomark_ids created_at updated_at]
+end

app/views/api/doctrine/annotations/search.json.jbuilder

@@ -0,0 +1,3 @@
+json.array!(@annotations) do |annotation|
+  json.extract! annotation, *%i[id doctrine_id document_id phil_rep editor_notes annomark_ids created_at updated_at]
+end

app/views/doctrines/show.html.erb

@@ -20,7 +20,7 @@
   <div class="card-body pt-0">
 
     <div class="row">
-      <%= render(DocumentDoctrineShowComponent.new(current_user: current_user, doctrine: @doctrine, document_id:  @jurisprudence.present? ? @jurisprudence.id : @jurisprudence, subjects: @subjects)) %>
+      <%= render(DocumentDoctrineShowComponent.new(current_user: current_user, annotations: @annotations, doctrine: @doctrine, document_id:  @jurisprudence.present? ? @jurisprudence.id : @jurisprudence, subjects: @subjects)) %>
     </div>
   </div>
 </div>

app/views/document/doctrines/show.html.erb

@@ -25,7 +25,7 @@
     </div>
 
     <div class="row">
-      <%= render(DocumentDoctrineShowComponent.new(current_user: current_user, doctrine: @doctrine, document_id: @document.id, subjects: @subjects)) %>
+      <%= render(DocumentDoctrineShowComponent.new(current_user: current_user, annotations: @annotations, doctrine: @doctrine, document_id: @document.id, subjects: @subjects)) %>
     </div>
   </div>
 </div>

app/views/shared/_annotated_documents_search_results.html.erb

@@ -0,0 +1,96 @@
+<div class="row" data-controller="annotations">
+  <div class="col-sm-10 p-2">
+    <%= text_field_tag :q, opts[:q], class: "form-control", placeholder: "Search GR Number", data: { target: "annotations.input" } %>
+  </div>
+  <div class="col-sm-1 p-2">
+    <%= button_tag "Search", class: "btn btn-success", data: { action: "click->annotations#searchDocuments" } %>
+  </div>
+</div>
+
+<header class="header bg-white b-b clearfix">
+  <div class="row m-t-sm align-items-end pagination-body">
+    <div class="<%= documents.present? ? "col-md-6  mb-0 " : "col-md-12 mb-0"%> ">
+      <h4 style="color: darkred" class="m-0">Search Results</h4>
+      <small style="color: darkred">
+        <%= page_entries_info documents, entry_name: 'records' if documents.present? %>
+      </small>
+    </div>
+    <div class="<%= documents.present? ? "col-md-6 position-relative" : "d-none"%>">
+      <div class="text-center pagination justify-content-end me-3">
+        <nav class="pagination pagination-sm" role="navigation" aria-label="pager">
+          <% unless  documents.first_page? %>
+            <span class="page-item first">
+              <a class="page-link" data-controller="annotations" data-q="<%= opts[:q] %>" data-page="<%= 1 %>" data-action="click->annotations#paginateDocuments">
+                <i class="fas fa-angle-double-left"></i>
+              </a>
+            </span>
+
+            <span class="page-item prev">
+              <a class="page-link" data-controller="annotations" data-q="<%= opts[:q] %>" data-page="<%= opts[:current_page].to_i - 1 %>" data-action="click->annotations#paginateDocuments">
+                <i class="fas fa-angle-left"></i>
+              </a>
+            </span>
+          <% end %>
+
+          <% documents.total_pages.times do |page| -%>
+            <% if opts[:current_page].to_i.eql?(page + 1) %>
+              <span class="page-item page current page-link"> <%= page + 1 %> </span>
+            <% else %>
+            <span class="page-item page <%= 'current' if opts[:current_page].to_i.eql?(page + 1) %>">
+              <a class="page-link <%= 'current' if opts[:current_page].to_i.eql?(page + 1) %>" 
+                 data-controller="annotations" data-q="<%= opts[:q] %>" data-page="<%= page + 1 %>" 
+                 data-action="click->annotations#paginateDocuments"> <%= page + 1 %> </a>
+            </span>
+            <% end %>
+          <% end -%>
+
+          <% unless documents.last_page? %>
+            <span class="page-item next">
+              <a class="page-link" data-controller="annotations" data-q="<%= opts[:q] %>" 
+                data-page="<%= opts[:current_page].to_i + 1 %>" data-action="click->annotations#paginateDocuments">
+                <i class="fas fa-angle-right"></i>
+              </a>
+            </span>
+            
+            <span class="page-item last">
+              <a class="page-link" data-controller="annotations" data-q="<%= opts[:q] %>" 
+                data-page="<%= documents.total_pages %>" data-action="click->annotations#paginateDocuments">
+                <i class="fas fa-angle-double-right"></i>
+              </a>
+            </span>
+          <% end %>
+        </nav>
+      </div>
+    </div>
+  </div>
+</header>
+
+<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>
+      <% documents.each do |document| %>
+        <tr>
+          <td> <%= document.clean_reference_number %> </td>
+          <td> <%= document.short_title || document.title %> </td>
+          <td> <%= document.doc_date.present? ? document.doc_date : document.year %> </td>
+          <td> 
+            <a class="btn btn-success" data-controller="annotations" data-document-id="<%= document.id %>"
+              data-document-reference-number="<%= document.clean_reference_number %>" 
+              data-document-date="<%= document.doc_date || document.year %>"
+              data-document-title="<%= document.short_title || document.title %>"
+              data-action="click->annotations#addAnnotatedDocument" > 
+                  Add
+            </a> 
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>

app/views/shared/_annotations_index_view.html.erb

@@ -0,0 +1,42 @@
+<%= render(partial: "/shared/annotations_pagination", locals: { annotations: annotations, opts: opts }) %>
+<% annotations.each do |annotation| %>
+  <% 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 %>
+  <% citing_document_title = [document_title, annotation.document.reference_number, date_or_year, annotation.phil_rep, annotated_documents_title].reject(&:blank?).join(', ').html_safe %>
+
+  <div class="row">
+    <div class="col-sm-10">
+      <p class="pb-0 ms-3">
+        <strong> <%= "#{annotation.annomarks.map { |annomark| "(#{annomark.code})" }.join(" ")}" %> </strong>
+        <%= raw citing_document_title %>
+      </p>
+    </div>
+
+    <div class="col-sm-2 d-flex justify-content-end align-items-baseline">
+      <a class="btn btn-secondary me-3" data-bs-toggle="modal" data-bs-target="#annotationModal" 
+          data-controller="annotations" data-doctrine-id="<%= annotation.doctrine_id %>" data-annotation-id="<%= annotation.id %>" 
+          data-document-title="<%= citing_document_title %>" 
+          data-action="click->annotations#renderForm"> Edit </a>
+      <a class="btn btn-danger" data-controller="annotations" data-doctrine-id="<%= annotation.doctrine_id %>" data-annotation-id="<%= annotation.id %>" data-action="click->annotations#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>
+    </div>
+    <hr/>
+  <% end %>
+<% end %>

app/views/shared/_annotations_pagination.html.erb

@@ -0,0 +1,58 @@
+<header class="header bg-white b-b clearfix m-2">
+  <div class="row m-t-sm align-items-end pagination-body">
+    <div class="<%= annotations.present? ? "col-md-6  mb-0 " : "col-md-12 mb-0"%> ">
+      <small style="color: darkred">
+        <%= page_entries_info annotations, entry_name: 'records' if annotations.present? %>
+      </small>
+    </div>
+    <div class="<%= annotations.present? ? "col-md-6 position-relative" : "d-none"%>">
+      <div class="text-center pagination justify-content-end me-3">
+        <nav class="pagination pagination-sm" role="navigation" aria-label="pager">
+          <% unless  annotations.first_page? %>
+            <span class="page-item first">
+              <a class="page-link" data-controller="annotations" data-page="<%= 1 %>" data-action="click->annotations#paginate">
+                <i class="fas fa-angle-double-left"></i>
+              </a>
+            </span>
+
+            <span class="page-item prev">
+              <a class="page-link" data-controller="annotations" data-page="<%= opts[:current_page].to_i - 1 %>" 
+                 data-action="click->annotations#paginate">
+                <i class="fas fa-angle-left"></i>
+              </a>
+            </span>
+          <% end %>
+
+          <% annotations.total_pages.times do |page| -%>
+            <% if opts[:current_page].to_i.eql?(page + 1) %>
+              <span class="page-item page current page-link"> <%= page + 1 %> </span>
+            <% else %>
+              <span class="page-item page">
+                <a class="page-link" data-controller="annotations" data-page="<%= page + 1 %>" 
+                  data-action="click->annotations#paginate"> <%= page + 1 %> </a>
+              </span>
+            <% end %>
+          <% end -%>
+
+          <% unless annotations.last_page? %>
+            <span class="page-item next">
+              <a class="page-link" data-controller="annotations"
+                data-page="<%= opts[:current_page].to_i + 1 %>" 
+                data-action="click->annotations#paginate">
+                <i class="fas fa-angle-right"></i>
+              </a>
+            </span>
+            
+            <span class="page-item last">
+              <a class="page-link" data-controller="annotations"
+                data-page="<%= annotations.total_pages %>" 
+                data-action="click->annotations#paginate">
+                <i class="fas fa-angle-double-right"></i>
+              </a>
+            </span>
+          <% end %>
+        </nav>
+      </div>
+    </div>
+  </div>
+</header>

app/views/shared/_case_lists_search_results.html.erb

@@ -0,0 +1,104 @@
+<div class="row" data-controller="document">
+  <div class="col-sm-11 p-2">
+    <%= text_field_tag :q, opts[:q], 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-success", data: { action: "click->document#search" } %>
+  </div>
+</div>
+
+<header class="header bg-white b-b clearfix">
+  <div class="row m-t-sm align-items-end pagination-body">
+    <div class="<%= documents.present? ? "col-md-6  mb-0 " : "col-md-12 mb-0"%> ">
+      <h4 style="color: darkred" class="m-0">Search Results</h4>
+      <small style="color: darkred">
+        <%= page_entries_info documents, entry_name: 'records' if documents.present? %>
+      </small>
+    </div>
+    <div class="<%= documents.present? ? "col-md-6 position-relative" : "d-none"%>">
+      <div class="text-center pagination justify-content-end me-3">
+        <nav class="pagination pagination-sm" role="navigation" aria-label="pager">
+          <% unless documents.first_page? %>
+            <span class="page-item first">
+              <a class="page-link" data-controller="document" data-doctrine-id="<%= opts[:doctrine_id] %>" 
+                 data-q="<%= opts[:q] %>" data-page="<%= 1 %>" data-action="click->document#paginate">
+                <i class="fas fa-angle-double-left"></i>
+              </a>
+            </span>
+
+            <span class="page-item prev">
+              <a class="page-link" data-controller="document" data-doctrine-id="<%= opts[:doctrine_id] %>" 
+                 data-q="<%= opts[:q] %>" data-page="<%= opts[:current_page].to_i - 1 %>" 
+                 data-action="click->document#paginate">
+                <i class="fas fa-angle-left"></i>
+              </a>
+            </span>
+          <% end %>
+
+          <% documents.total_pages.times do |page| -%>
+            <% if opts[:current_page].to_i.eql?(page + 1) %>
+              <span class="page-item page current page-link"> <%= page + 1 %> </span>
+            <% else %>
+              <span class="page-item page">
+                <a class="page-link" data-controller="document" data-doctrine-id="<%= opts[:doctrine_id] %>" 
+                  data-q="<%= opts[:q] %>" data-page="<%= page + 1 %>" data-action="click->document#paginate"> 
+                  <%= page + 1 %> 
+                </a>
+              </span>
+            <% end %>
+          <% end -%>
+
+          <% unless documents.last_page? %>
+            <span class="page-item next">
+              <a class="page-link" data-doctrine-id="<%= opts[:doctrine_id] %>" 
+                data-controller="document" data-q="<%= opts[:q] %>" data-page="<%= opts[:current_page].to_i + 1 %>" 
+                data-action="click->document#paginate">
+                <i class="fas fa-angle-right"></i>
+              </a>
+            </span>
+            
+            <span class="page-item last">
+              <a class="page-link" data-doctrine-id="<%= opts[:doctrine_id] %>" 
+                data-controller="document" data-q="<%= opts[:q] %>" data-page="<%= documents.total_pages %>" 
+                data-action="click->document#paginate">
+                <i class="fas fa-angle-double-right"></i>
+              </a>
+            </span>
+          <% end %>
+        </nav>
+      </div>
+    </div>
+  </div>
+</header>
+
+<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>
+      <% documents.each do |document| %>
+        <tr>
+          <td> <%= document.clean_reference_number %> </td>
+          <td> <%= document.short_title || document.title %> </td>
+          <td> <%= document.doc_date.present? ? document.doc_date : document.year %> </td>
+          <td>
+            <% date_or_year = document.doc_date || document.year %>
+            <% title = document.short_title || document.title %>
+            <a class="btn btn-success" data-bs-toggle="modal" data-bs-target="#annotationModal" data-controller="annotations" 
+              data-doctrine-id="<%= opts[:doctrine_id] %>" data-document-id="<%= document.id %>" data-document-title="<%= title %>"
+              data-document-reference-number="<%= document.clean_reference_number %>" data-document-date-or-year="<%= date_or_year %>" 
+              data-document-phil-rep="<%= document.phil_rep %>" data-action="click->annotations#renderForm"> 
+                  Add Annotations
+            </a>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>

config/routes.rb

@@ -30,7 +30,9 @@ Rails.application.routes.draw do
   namespace :api, defaults: { format: :json } do
     resources :doctrines do
       scope module: :doctrine do
-        resources :annotations
+        resources :annotations do
+          get :search, on: :collection
+        end
       end
     end