alexdbondoc17
/
cdao-pjet
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge pull request #46 from lexintegritastech/feature-enhancement-ui 

Improve offcanvas
pull/48/head
Alexander D. Bondoc 4 years ago committed by GitHub
parent
9bc18af1a3 f922e548c8
commit
e0035895cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 70 additions and 230 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      app/components/sidenav_component/sidenav_component.html.erb
  2. 37
      app/components/subject_accordion_component.rb
  3. 179
      app/components/subject_accordion_component/subject_accordion_component.html.erb
  4. 28
      app/components/subjects_offcanvas_component/subjects_offcanvas_component.html.erb
  5. 2
      app/controllers/api/subjects_controller.rb
  6. 12
      app/javascript/controllers/subjects_controller.js
  7. 14
      app/reflexes/subjects_reflex.rb
  8. 1
      app/views/api/subjects/index.json.jbuilder
  9. 13
      app/views/layouts/application.html.erb
  10. 1
      app/views/shared/_subjects_accordion.html.erb
  11. 0
      app/views/shared/_subjects_sidenav_accorrdion.html.erb
  12. 2
      app/views/subject_indexes/index.html.erb
  13. 1
      app/views/subject_indexes/show.html.erb

10
app/components/sidenav_component/sidenav_component.html.erb
Unescape View File

@ -88,12 +88,16 @@
<%= link_to '<i class="fas fa-search me-2"></i>Search'.html_safe, documents_path, class: "nav-link" %> <%= link_to '<i class="fas fa-search me-2"></i>Search'.html_safe, documents_path, class: "nav-link" %>
</li> </li>
<li class="nav-item p-2"> <li class="nav-item p-2">
<a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#subjectsOffCanvas" data-controller="subjects"> <a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#subjectsOffCanvas"
data-controller="subjects" data-accordion-for="subjects" data-accordion-target="#subjectsAccordionBody"
data-action="click->subjects#loadSubjectsAccordion">
<i class="fas fa-indent me-2"></i> Subjects <i class="fas fa-indent me-2"></i> Subjects
</a> </a>
</li> </li>
<li class="nav-item p-2"> <li class="nav-item p-2">
<a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#subjectsOffCanvas"> <a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#subjectsOffCanvas"
data-controller="subjects" data-accordion-for="doctrines" data-accordion-target="#subjectsAccordionBody"
data-action="click->subjects#loadSubjectsAccordion">
<i class="fas fa-book me-2"></i> Doctrines <i class="fas fa-book me-2"></i> Doctrines
</a> </a>
</li> </li>
@ -112,7 +116,5 @@
</div> </div>
</div> </div>
</nav> </nav>
<% end %> <% end %>
<% end %> <% end %>

37
app/components/subject_accordion_component.rb
Unescape View File

@ -1,10 +1,35 @@
class SubjectAccordionComponent < BaseComponent class SubjectAccordionComponent < BaseComponent
attr_reader :parent, :subjects, :opts with_collection_parameter :search_result
attr_reader :search_result, :opts
def initialize(search_result:, current_user:, opts: {})
@search_result = search_result
@opts = opts
end
def initialize(current_user:, parent:, subjects: nil, opts: {}) def parent_accordion_id
@parent = parent return "subjectsAccordion" if search_result["parent_id"].blank?
@subjects = subjects
@opts = opts ["subjectsAccordion", search_result["parent_id"]].join
end end
def children_accordion_id
["subjectsAccordion", search_result["id"]].join
end
def accordion_id
["subjectsAccordion", search_result["id"]].join
end
def accordion_body_id
["subjectsAccordionBody", search_result["id"]].join
end
def custom_url
return search_doctrines_path(subject_ids: [search_result["id"]], is_index_table: false) if opts[:accordionFor].present? && opts[:accordionFor].to_s.eql?("subjects")
return search_doctrines_path(subject_ids: [search_result["id"]], is_index_table: true) if opts[:accordionFor].present? && opts[:accordionFor].to_s.eql?("doctrines")
return subject_index_path(search_result["id"]).blank?
end end
end

179
app/components/subject_accordion_component/subject_accordion_component.html.erb
Unescape View File

@ -1,168 +1,21 @@
<% if opts[:is_offcanvas].present? %> <div class="accordion accordion-flash" id="<%= parent_accordion_id %>">
<% Cdao::Subject.roots.order(name: :asc).each do |root| %> <div class="accordion-item">
<div class="accordion accordion-flash" id="mainPanel<%= root.id %>"> <div class="accordion-header d-flex justify-content-between">
<div class="accordion-item"> <% if search_result["parent_id"].present? %>
<div class="accordion-header d-flex justify-content-between"> <div class="accordion-button collapsed m-0 p-0" data-bs-toggle="collapse" data-bs-target="#<%= children_accordion_id %>"
<% if root.children.present? %> data-accordion-id="<%= children_accordion_id %>" data-accordion-for="<%= opts[:accordionFor] %>"
<div class="accordion-button collapsed m-0 p-0" data-bs-toggle="collapse" data-bs-target="#<%= ["rootLevel", root.id].join %>"> data-parent-id="<%= search_result["parent_id"] %>" data-accordion-target="#<%= accordion_body_id %>"
<%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %> data-action="click->subjects#loadSubjectsAccordion">
</div> <%= link_to search_result["name"], custom_url, class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
<% else %>
<%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
<% end %>
</div> </div>
<% else %>
<div class="accordion-collapse collapse" id="<%= ["rootLevel", root.id].join %>" data-bs-parent="#mainPanel<%= root.id %>"> <%= link_to search_result["name"], custom_url, class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
<div class="accordion-body pt-1 pb-1"> <% end %>
<% root.children.order(name: :asc).each do |sub1| %>
<div class="accordion accordion-flush ps-20" id="#secondLevelPanel<%= sub1.id %>">
<div class="accordion-item">
<div class="accordion-header d-flex justify-content-between">
<% if sub1.children.present? %>
<div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["secondLevel", sub1.id].join %>">
<%= link_to sub1.name, subject_index_path(sub1.id), class: "accordion-link text-decoration-none text-dark d-block sub2 clickable-link" %>
</div>
<% else %>
<%= link_to sub1.name, subject_index_path(sub1.id), class: "accordion-link text-decoration-none text-dark d-block sub2 clickable-link" %>
<% end %>
</div>
<div class="accordion-collapse collapse" id="<%= ["secondLevel", sub1.id].join %>" data-bs-parent="#secondLevelPanel<%= sub1.id %>">
<div class="accordion-body pt-1">
<% sub1.children.order(name: :asc).each do |sub2| %>
<div class="accordion accordion-flush ps-20" id="thirdLevelPanel<%= sub2.id %>">
<div class="accordion-item">
<div class="accordion-header d-flex justify-content-between">
<% if sub1.children.present? %>
<div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["thirdLevel", sub2.id].join %>">
<%= link_to sub2.name, subject_index_path(sub2.id), class: "accordion-link text-decoration-none text-dark d-block sub3 clickable-link" %>
</div>
<% else %>
<%= link_to sub2.name, subject_index_path(sub2.id), class: "accordion-link text-decoration-none text-dark d-block sub3 clickable-link" %>
<% end %>
</div>
<div class="accordion-collapse collapse" id="<%= ["thirdLevel", sub2.id].join %>" data-bs-parent="#thirdLevelPanel<%= sub2.id %>">
<div class="accordion-body pt-1">
<% sub2.children.order(name: :asc).each do |sub3| %>
<div class="accordion accordion-flush ps-20" id="fourthLevelPanel<%= sub3.id %>">
<div class="accordion-item">
<div class="accordion-header d-flex justify-content-between">
<% if sub3.children.present? %>
<div class="<%= sub3.children.present? ? 'accordion-button' : '' %> collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["fourthLevel", sub3.id].join %>">
<%= link_to sub3.name, subject_index_path(sub3.id), class: "accordion-link text-decoration-none text-dark d-block sub4 clickable-link" %>
</div>
<% else %>
<%= link_to sub3.name, subject_index_path(sub3.id), class: "accordion-link text-decoration-none text-dark d-block sub4 clickable-link" %>
<% end %>
</div>
<div class="accordion-collapse collapse" id="<%= ["fourthLevel", sub3.id].join %>" data-bs-parent="#fourthLevelPanel<%= sub3.id %>">
<div class="accordion-body pt-1">
<% sub3.children.order(name: :asc).each do |sub4| %>
<div class="accordion accordion-flush ps-20">
<div class="accordion-item d-flex justify-content-between">
<div>
<%= link_to sub4.name, subject_index_path(sub4.id), class: "accordion-link text-decoration-none text-dark d-block sub5 clickable-link" %>
</div>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div> </div>
<% end %>
<% else %>
<% parent.children.order(name: :asc).each do |sub1| %>
<div class="accordion accordion-flush ps-20" id="#secondLevelPanel<%= sub1.id %>">
<div class="accordion-item">
<div class="accordion-header d-flex justify-content-between">
<% if sub1.children.present? %>
<div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["secondLevel", sub1.id].join %>">
<%= link_to sub1.name, subject_index_path(sub1.id), class: "accordion-link text-decoration-none text-dark d-block sub2 clickable-link" %>
<%= link_to "Add Sub Level", new_subject_index_path(parent_id: sub1.id), class: "btn btn-sm btn-primary text-decoration-none d-block sub1 clickable-link position-absolute end-0 me-5" %>
</div>
<% else %>
<%= link_to sub1.name, subject_index_path(sub1.id), class: "accordion-link text-decoration-none text-dark d-block sub2 clickable-link" %>
<%= link_to "Add Sub Level", new_subject_index_path(parent_id: sub1.id), class: "btn btn-sm btn-primary text-decoration-none d-block sub1 clickable-link position-absolute end-0 accordion-action-button-margin" %>
<% end %>
</div>
<div class="accordion-collapse collapse" id="<%= ["secondLevel", sub1.id].join %>" data-bs-parent="#secondLevelPanel<%= sub1.id %>">
<div class="accordion-body pt-1">
<% sub1.children.order(name: :asc).each do |sub2| %>
<div class="accordion accordion-flush ps-20" id="thirdLevelPanel<%= sub2.id %>">
<div class="accordion-item">
<div class="accordion-header d-flex justify-content-between">
<% if sub1.children.present? %>
<div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["thirdLevel", sub2.id].join %>">
<%= link_to sub2.name, subject_index_path(sub2.id), class: "accordion-link text-decoration-none text-dark d-block sub3 clickable-link" %>
<%= link_to "Add Sub Level", new_subject_index_path(parent_id: sub2.id), class: "btn btn-sm btn-primary text-decoration-none d-block sub1 clickable-link position-absolute end-0 me-5" %>
</div>
<% else %>
<%= link_to sub2.name, subject_index_path(sub2.id), class: "accordion-link text-decoration-none text-dark d-block sub3 clickable-link" %>
<%= link_to "Add Sub Level", new_subject_index_path(parent_id: sub2.id), class: "btn btn-sm btn-primary text-decoration-none d-block sub1 clickable-link position-absolute end-0 accordion-action-button-margin" %>
<% end %>
</div>
<div class="accordion-collapse collapse" id="<%= ["thirdLevel", sub2.id].join %>" data-bs-parent="#thirdLevelPanel<%= sub2.id %>"> <div class="accordion-collapse collapse" id="<%= children_accordion_id %>" data-bs-parent="#<%= parent_accordion_id %>">
<div class="accordion-body pt-1"> <div class="accordion-body pt-1 pb-1" id="<%= accordion_body_id %>">
<% sub2.children.order(name: :asc).each do |sub3| %>
<div class="accordion accordion-flush ps-20" id="fourthLevelPanel<%= sub3.id %>">
<div class="accordion-item">
<div class="accordion-header d-flex justify-content-between">
<% if sub3.children.present? %>
<div class="<%= sub3.children.present? ? 'accordion-button' : '' %> collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["fourthLevel", sub3.id].join %>">
<%= link_to sub3.name, subject_index_path(sub3.id), class: "accordion-link text-decoration-none text-dark d-block sub4 clickable-link" %>
<%= link_to "Add Sub Level", new_subject_index_path(parent_id: sub3.id), class: "btn btn-sm btn-primary text-decoration-none d-block sub1 clickable-link position-absolute end-0 me-5" %>
</div>
<% else %>
<%= link_to sub3.name, subject_index_path(sub3.id), class: "accordion-link text-decoration-none text-dark d-block sub4 clickable-link" %>
<%= link_to "Add Sub Level", new_subject_index_path(parent_id: sub3.id), class: "btn btn-sm btn-primary text-decoration-none d-block sub1 clickable-link position-absolute end-0 accordion-action-button-margin" %>
<% end %>
</div>
<div class="accordion-collapse collapse" id="<%= ["fourthLevel", sub3.id].join %>" data-bs-parent="#fourthLevelPanel<%= sub3.id %>">
<div class="accordion-body pt-1">
<% sub3.children.order(name: :asc).each do |sub4| %>
<div class="accordion accordion-flush ps-20">
<div class="accordion-item d-flex justify-content-between">
<div>
<%= link_to sub4.name, subject_index_path(sub4.id), class: "accordion-link text-decoration-none text-dark d-block sub5 clickable-link" %>
<%= link_to "Add Sub Level", new_subject_index_path(parent_id: sub4.id), class: "btn btn-sm btn-primary text-decoration-none d-block sub1 clickable-link position-absolute end-0 accordion-action-button-margin" %>
</div>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div>
<% end %>
</div>
</div>
</div> </div>
</div> </div>
<% end %> </div>
<% end %> </div>

28
app/components/subjects_offcanvas_component/subjects_offcanvas_component.html.erb
Unescape View File

@ -1,31 +1,9 @@
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" data-bs-backdrop="false" id="subjectsOffCanvas"> <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" data-bs-backdrop="false" id="subjectsOffCanvas" data-controller="subjects">
<div class="offcanvas-header"> <div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Subjects</h5> <h5 class="offcanvas-title">Subjects</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div> </div>
<div class="offcanvas-body" id="subjectsAccordion"> <div class="offcanvas-body" id="subjectsAccordionBody">
<% Cdao::Subject.roots.order(name: :asc).each do |root| %>
<div class="accordion accordion-flash" id="mainPanel<%= root.id %>">
<div class="accordion-item">
<div class="accordion-header d-flex justify-content-between">
<% if root.children.present? %>
<div class="accordion-button collapsed m-0 p-0" data-bs-toggle="collapse" data-bs-target="#<%= ["rootLevel", root.id].join %>">
<%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
</div>
<% else %>
<%= link_to root.name, subject_index_path(root.id), class: "accordion-link text-decoration-none text-dark d-block sub1 clickable-link" %>
<% end %>
</div>
<div class="accordion-collapse collapse" id="<%= ["rootLevel", root.id].join %>" data-bs-parent="#mainPanel<%= root.id %>">
<div class="accordion-body pt-1 pb-1">
<%= render(SubjectAccordionComponent.new(current_user: current_user, parent: root)) %>
</div>
</div>
</div>
</div>
<% end %>
</div> </div>
</div> </div>

2
app/controllers/api/subjects_controller.rb
Unescape View File

@ -14,7 +14,7 @@ module Api
private private
def search_params def search_params
params.permit(:q, :name, :parent_id, :state, :doctrine_ids, :page, :per_page, exclude_ids: []) params.permit(:q, :name, :parent_id, :state, :doctrine_ids, :is_root, :page, :per_page, exclude_ids: [])
end end
end end
end end

12
app/javascript/controllers/subjects_controller.js
Unescape View File

@ -4,18 +4,20 @@ export default class extends ApplicationController {
super.connect() super.connect()
} }
renderSidenavAccordion () { loadSubjectsAccordion () {
var parent_id = this.element.dataset["subjectParentId"], $this = this, params = {} var $this = this, params = { per_page: 200 }, parent_id = $this.element.dataset["subjectParentId"],
opts = { parent_accordion_id: $this.element.dataset["accordionId"], accordionTarget: $this.element.dataset["accordionTarget"],
accordionFor: $this.element.dataset["accordionFor"] }
if (parent_id !== null && parent_id !== undefined && parent_id !== "") { if (parent_id !== null && parent_id !== undefined && parent_id !== "") {
params.parent_id = parent_id params.parent_id = parent_id
} else { } else {
params.is_root_only = true params.is_root = true
} }
$.get("/api/subjects.json", params, function (results, status) { $.get("/api/subjects.json", params, function (search_results, status) {
if (status === "success") { if (status === "success") {
$this.stimulate("SubjectsReflex#render_sidenav_accordion", results) $this.stimulate("SubjectsReflex#render_subjects_accordion", search_results, opts)
} }
}) })
} }

14
app/reflexes/subjects_reflex.rb
Unescape View File

@ -1,17 +1,7 @@
# frozen_string_literal: true # frozen_string_literal: true
class SubjectsReflex < ApplicationReflex class SubjectsReflex < ApplicationReflex
def load_sidenav_accordion(search_results, opts = {}) def render_subjects_accordion(search_results, opts = {})
morph "#" morph opts[:accordionTarget], render(partial: "/shared/subjects_accordion", locals: { search_results: search_results, opts: opts })
end end
def save
raise @subject_index.inspect
end
private
def resource_params
params.permit(:name, :parent_id, library_ids: [])
end
end end

1
app/views/api/subjects/index.json.jbuilder
Unescape View File

@ -1,4 +1,5 @@
json.array!(@subjects) do |subject| json.array!(@subjects) do |subject|
json.extract! subject, *%i[id name parent_id state doctrine_ids created_at updated_at] json.extract! subject, *%i[id name parent_id state doctrine_ids created_at updated_at]
json.text subject.lineage_name json.text subject.lineage_name
json.heirarchy_level subject.ancestors.count
end end

13
app/views/layouts/application.html.erb
Unescape View File

@ -14,20 +14,11 @@
<body class="<%= current_user.present? ? 'container-fluid h-100 w-100 p-0' : 'container-fluid h-100 w-100 p-0 sessions-body-bg' %> " data-controller="selectize"> <body class="<%= current_user.present? ? 'container-fluid h-100 w-100 p-0' : 'container-fluid h-100 w-100 p-0 sessions-body-bg' %> " data-controller="selectize">
<%= render(SidenavComponent.new(current_user: current_user, opts: { is_nav_bar: true }))%> <%= render(SidenavComponent.new(current_user: current_user, opts: { is_nav_bar: true }))%>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" data-bs-backdrop="false" id="subjectsOffCanvas"> <%= render(SubjectsOffcanvasComponent.new(current_user: current_user, opts: { is_render: true })) %>
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body" id="subjectsAccordion">
<%= render(SubjectAccordionComponent.new(current_user: current_user, parent: nil, opts: { is_offcanvas: true })) %>
</div>
</div>
<div class="<%= current_user.present? ? 'row flex-nowrap h-100 w-100 p-0 ms-0' : 'row h-100 justify-content-end align-items-center' %>"> <div class="<%= current_user.present? ? 'row flex-nowrap h-100 w-100 p-0 ms-0' : 'row h-100 justify-content-end align-items-center' %>">
<div class="<%= current_user.present? ? 'd-none' : 'col-sm-8 login-logo' %>"> <div class="<%= current_user.present? ? 'd-none' : 'col-sm-8 login-logo' %>">
<%= image_pack_tag 'application/cdasiaonline_logo.png', class:"app-logo" %> <%= image_pack_tag 'application/cdasiaonline_logo.png', class:"app-logo" %>
</div> </div>
<div class="<%= current_user.present? ? 'col py-3 main-content-body' : 'col-sm-4 login-body-box' %>"> <div class="<%= current_user.present? ? 'col py-3 main-content-body' : 'col-sm-4 login-body-box' %>">
<div class="content-body"> <div class="content-body">

1
app/views/shared/_subjects_accordion.html.erb
Unescape View File

@ -0,0 +1 @@
<%= render(SubjectAccordionComponent.with_collection(search_results, current_user: current_user, opts: opts)) %>

0
app/views/shared/_subjects_sidenav_accorrdion.html.erb
Unescape View File

2
app/views/subject_indexes/index.html.erb
Unescape View File

@ -21,8 +21,6 @@
<div class="accordion-collapse collapse" id="<%= ["rootLevel", root.id].join %>" data-bs-parent="#mainPanel<%= root.id %>"> <div class="accordion-collapse collapse" id="<%= ["rootLevel", root.id].join %>" data-bs-parent="#mainPanel<%= root.id %>">
<div class="accordion-body pt-1 pb-1"> <div class="accordion-body pt-1 pb-1">
<%= render(SubjectAccordionComponent.new(current_user: current_user, parent: root)) %>
</div> </div>
</div> </div>
</div> </div>

1
app/views/subject_indexes/show.html.erb
Unescape View File

@ -38,7 +38,6 @@
</div> </div>
</div> </div>
<div class="card-body"> <div class="card-body">
<%= render(SubjectAccordionComponent.new(current_user: current_user, parent: @subject_index)) %>
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save