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

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

Feature enhancement UI
pull/45/head
Angel Aviel Domaoan 4 years ago committed by GitHub
parent
14744a463f 4e777a45a2
commit
8ae1f2eff9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 349 additions and 125 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. 7
      app/components/document_advanced_search_component.rb
  2. 24
      app/components/document_advanced_search_component/document_advanced_search_component.html.erb
  3. 150
      app/components/sidenav_component/sidenav_component.html.erb
  4. 6
      app/components/subject_accordion_component.rb
  5. 206
      app/components/subject_accordion_component/subject_accordion_component.html.erb
  6. 4
      app/components/subject_index_form_component.rb
  7. 2
      app/components/subject_index_form_component/subject_index_form_component.html.erb
  8. 11
      app/components/subjects_offcanvas_component.rb
  9. 31
      app/components/subjects_offcanvas_component/subjects_offcanvas_component.html.erb
  10. 1
      app/javascript/src/application.scss
  11. 11
      app/javascript/src/application/nav-bar.scss
  12. 21
      app/views/layouts/application.html.erb

7
app/components/document_advanced_search_component.rb
Unescape View File

@ -0,0 +1,7 @@
class DocumentAdvancedSearhComponent < BaseComponent
attr_reader :opts
def initialize(current_user: opts: {})
@opts = opts
end
end

24
app/components/document_advanced_search_component/document_advanced_search_component.html.erb
Unescape View File

@ -0,0 +1,24 @@
<%= form_tag(documents_path, method: :get) do %>
<div class="row">
<%= text_field_tag :q, params[:q], placeholder: 'Full text search', class: "form-control" %>
</div>
<div class="row">
<%= text_field_tag :reference_number, params[:reference_number], placeholder: 'G.R. Number', class: "form-control" %>
</div>
<div class="row">
<%= text_field_tag :title, params[:short_title], placeholder: 'short_title', class: "form-control" %>
</div>
<div class="row">
<div class="col-sm-12 p-2">
<%= text_field_tag :citation_finder, params[:citation_finder], class: "form-control", placeholder: "Citation Finder" %>
</div>
</div>
<div class="row">
<button type="submit" class="btn btn-primary">Search</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
<% end %>

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

@ -1,74 +1,118 @@
<% if current_user.present? %> <% if current_user.present? %>
<% if opts[:is_sidenav].present? %> <% if opts[:is_sidenav].present? %>
<div class="sidebar sidebar-body d-flex flex-column align-items-center align-items-sm-start pt-2 text-white min-vh-100"> <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-secondary min-vh-100" style="padding: 0 !important;">
<ul class="nav flex-column text-white w-100"> <div class="sidebar sidebar-body d-flex flex-column align-items-center align-items-sm-start pt-2 text-white min-vh-100">
<a href="/" class="nav-link d-flex align-items-center h3 text-white my-2 w-100"> <ul class="nav flex-column text-white w-100">
PJET <a href="/" class="nav-link d-flex align-items-center h3 text-white my-2 w-100">
</a> PJET
<hr/> </a>
<hr/>
<li class="nav-link d-flex align-items-center d-flex align-items-center"> <li class="nav-link d-flex align-items-center d-flex align-items-center">
<i class="fas fa-home"></i> <%= link_to "Home", root_path, class: "mx-2 text-white text-decoration-none w-100" %> <i class="fas fa-home"></i> <%= link_to "Home", root_path, class: "mx-2 text-white text-decoration-none w-100" %>
</li> </li>
<li class="nav-link d-flex align-items-center"> <li class="nav-link d-flex align-items-center">
<i class="fas fa-search"></i> <%= link_to "Search", documents_path, class: "mx-2 text-white text-decoration-none w-100" %> <i class="fas fa-search"></i> <%= link_to "Search", documents_path, class: "mx-2 text-white text-decoration-none w-100" %>
</li> </li>
<li class="nav-link"> <li class="nav-link">
<div class="accordion-item accordion-body bg-transparent "> <div class="accordion-item accordion-body bg-transparent ">
<div class="accordion-header bg-transparent"> <div class="accordion-header bg-transparent">
<button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#mainSubjectIndexSubMenu"> <button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#mainSubjectIndexSubMenu">
<i class="fas fa-indent"></i> <%= link_to "Subjects", "#", class: "accordion-link text-decoration-none mx-2 text-dark text-white " %> <i class="fas fa-indent"></i> <%= link_to "Subjects", "#", class: "accordion-link text-decoration-none mx-2 text-dark text-white " %>
</button> </button>
</div>
<%= render(SubjectsSidenavSubMenuComponent.new(current_user: current_user, opts: { is_subjects_index: true, main_sub_menu: "mainSubjectIndexSubMenu", second_sub_menu: "secondSubjectIndexSubMenu", third_sub_menu: "thirdSubjectIndexSubMenu", fourth_sub_menu: "fourthSubjectIndexSubMenu", fifth_sub_menu: "fifthSubjectIndexSubMenu" })) %>
</div> </div>
</li>
<%= render(SubjectsSidenavSubMenuComponent.new(current_user: current_user, opts: { is_subjects_index: true, main_sub_menu: "mainSubjectIndexSubMenu", second_sub_menu: "secondSubjectIndexSubMenu", third_sub_menu: "thirdSubjectIndexSubMenu", fourth_sub_menu: "fourthSubjectIndexSubMenu", fifth_sub_menu: "fifthSubjectIndexSubMenu" })) %> <li class="nav-link ">
</div> <div class="accordion-item accordion-body bg-transparent">
</li> <div class="accordion-header">
<button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#mainDoctrinesSubMenu">
<i class="fas fa-book"></i> <%= link_to "Doctrines", "#", class: "accordion-link text-decoration-none mx-2 text-dark text-white " %>
</button>
</div>
<li class="nav-link "> <%= render(SubjectsSidenavSubMenuComponent.new(current_user: current_user, opts: { is_doctrines_index: true, main_sub_menu: "mainDoctrinesSubMenu", second_sub_menu: "secondDoctrinesSubMenu", third_sub_menu: "thirdDoctrinesSubMenu", fourth_sub_menu: "fourthDoctrinesSubMenu", fifth_sub_menu: "fifthDoctrinesSubMenu" })) %>
<div class="accordion-item accordion-body bg-transparent">
<div class="accordion-header">
<button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#mainDoctrinesSubMenu">
<i class="fas fa-book"></i> <%= link_to "Doctrines", "#", class: "accordion-link text-decoration-none mx-2 text-dark text-white " %>
</button>
</div> </div>
</li>
<%= render(SubjectsSidenavSubMenuComponent.new(current_user: current_user, opts: { is_doctrines_index: true, main_sub_menu: "mainDoctrinesSubMenu", second_sub_menu: "secondDoctrinesSubMenu", third_sub_menu: "thirdDoctrinesSubMenu", fourth_sub_menu: "fourthDoctrinesSubMenu", fifth_sub_menu: "fifthDoctrinesSubMenu" })) %> <li class="nav-link d-flex align-items-center">
</div> <i class="fas fa-map-signs"></i> <%= link_to "Desicions", decisions_path, class: "mx-2 text-white text-decoration-none" %>
</li> </li>
<li class="nav-link d-flex align-items-center">
<i class="fas fa-map-signs"></i> <%= link_to "Desicions", decisions_path, class: "mx-2 text-white text-decoration-none" %>
</li>
<li class="nav-link"> <li class="nav-link">
<div class="accordion-item accordion-body bg-transparent "> <div class="accordion-item accordion-body bg-transparent ">
<div class="accordion-header bg-transparent"> <div class="accordion-header bg-transparent">
<button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#settings"> <button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#settings">
<i class="fas fa-cog"></i> <%= link_to "Settings", "#", class: "accordion-link text-decoration-none mx-2 text-white" %> <i class="fas fa-cog"></i> <%= link_to "Settings", "#", class: "accordion-link text-decoration-none mx-2 text-white" %>
</button> </button>
</div> </div>
<div class="accordion-collapse collapse" id="settings" data-bs-parent="#sidenav"> <div class="accordion-collapse collapse" id="settings" data-bs-parent="#sidenav">
<div class="accordion-body pb-0 pe-0 pt-0"> <div class="accordion-body pb-0 pe-0 pt-0">
<div class="accordion accordion-flush ps-20" id="firstLevelSubMenu"> <div class="accordion accordion-flush ps-20" id="firstLevelSubMenu">
<div class="accordion-item bg-transparent"> <div class="accordion-item bg-transparent">
<div class="accordion-header bg-transparent"> <div class="accordion-header bg-transparent">
<%= link_to "Subjects", subject_indexes_path, class: "accordion-link text-white text-decoration-none text-dark d-block sub1 clickable-link" %> <%= link_to "Subjects", subject_indexes_path, class: "accordion-link text-white text-decoration-none text-dark d-block sub1 clickable-link" %>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </li>
</li>
<li class="nav-link d-flex align-items-center"> <li class="nav-link d-flex align-items-center">
<i class="fas fa-sign-out-alt"></i> <%= link_to "Logout", destroy_user_session_path, class: "mx-2 text-white text-decoration-none" %> <i class="fas fa-sign-out-alt"></i> <%= link_to "Logout", destroy_user_session_path, class: "mx-2 text-white text-decoration-none" %>
</li> </li>
</ul> </ul>
</div>
</div> </div>
<% elsif opts[:is_nav_bar].present? %>
<nav class="navbar navbar-expand-lg navbar-light bg-light p-0">
<div class="container-fluid">
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
<div>
<a class="navbar-brand" href="#"><%= image_pack_tag 'application/cdasiaonline_logo.png', class:"nav-bar-app-logo" %></a>
</div>
<form class="d-flex">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item p-2">
<%= link_to ' <i class="fas fa-home me-2"></i>Home'.html_safe, root_path, class: "nav-link" %>
</li>
<li class="nav-item p-2">
<%= link_to '<i class="fas fa-search me-2"></i>Search'.html_safe, documents_path, class: "nav-link" %>
</li>
<li class="nav-item p-2">
<a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#subjectsOffCanvas" data-controller="subjects">
<i class="fas fa-indent me-2"></i> Subjects
</a>
</li>
<li class="nav-item p-2">
<a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#subjectsOffCanvas">
<i class="fas fa-book me-2"></i> Doctrines
</a>
</li>
<li class="nav-item p-2">
<%= link_to '<i class="fas fa-map-signs me-2"></i> Desicions'.html_safe, decisions_path, class: "nav-link" %>
</li>
<li class="nav-item p-2">
<%= link_to '<i class="fas fa-cog me-2"></i>Settings'.html_safe, "#", class: "nav-link" %>
</li>
<li class="nav-item p-2 active-red">
<%= link_to '<i class="fas fa-sign-out-alt"></i> Sign Out'.html_safe, destroy_user_session_path, class:" text-white nav-link" %>
</li>
</ul>
</form>
</div>
</div>
</nav>
<% end %> <% end %>
<% end %> <% end %>

6
app/components/subject_accordion_component.rb
Unescape View File

@ -1,8 +1,10 @@
class SubjectAccordionComponent < BaseComponent class SubjectAccordionComponent < BaseComponent
attr_reader :parent attr_reader :parent, :subjects, :opts
def initialize(current_user:, parent:) def initialize(current_user:, parent:, subjects: nil, opts: {})
@parent = parent @parent = parent
@subjects = subjects
@opts = opts
end end
end end

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

@ -1,76 +1,168 @@
<% parent.children.order(name: :asc).each do |sub1| %> <% if opts[:is_offcanvas].present? %>
<div class="accordion accordion-flush ps-20" id="#secondLevelPanel<%= sub1.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 sub1.children.present? %> <div class="accordion-header d-flex justify-content-between">
<div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["secondLevel", sub1.id].join %>"> <% if root.children.present? %>
<%= link_to sub1.name, subject_index_path(sub1.id), class: "accordion-link text-decoration-none text-dark d-block sub2 clickable-link" %> <div class="accordion-button collapsed m-0 p-0" data-bs-toggle="collapse" data-bs-target="#<%= ["rootLevel", root.id].join %>">
<%= 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" %> <%= 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">
<% 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>
<% else %> </div>
<%= 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>
</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-collapse collapse" id="<%= ["secondLevel", sub1.id].join %>" data-bs-parent="#secondLevelPanel<%= sub1.id %>">
<div class="accordion-body pt-1"> <div class="accordion-body pt-1">
<% sub1.children.order(name: :asc).each do |sub2| %> <% sub1.children.order(name: :asc).each do |sub2| %>
<div class="accordion accordion-flush ps-20" id="thirdLevelPanel<%= sub2.id %>"> <div class="accordion accordion-flush ps-20" id="thirdLevelPanel<%= sub2.id %>">
<div class="accordion-item"> <div class="accordion-item">
<div class="accordion-header d-flex justify-content-between"> <div class="accordion-header d-flex justify-content-between">
<% if sub1.children.present? %> <% if sub1.children.present? %>
<div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["thirdLevel", sub2.id].join %>"> <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 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" %> <%= 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" %>
</div> <% end %>
<% else %> </div>
<%= 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="<%= ["thirdLevel", sub2.id].join %>" data-bs-parent="#thirdLevelPanel<%= sub2.id %>">
<div class="accordion-body pt-1"> <div class="accordion-body pt-1">
<% sub2.children.order(name: :asc).each do |sub3| %> <% sub2.children.order(name: :asc).each do |sub3| %>
<div class="accordion accordion-flush ps-20" id="fourthLevelPanel<%= sub3.id %>"> <div class="accordion accordion-flush ps-20" id="fourthLevelPanel<%= sub3.id %>">
<div class="accordion-item"> <div class="accordion-item">
<div class="accordion-header d-flex justify-content-between"> <div class="accordion-header d-flex justify-content-between">
<% if sub3.children.present? %> <% if sub3.children.present? %>
<div class="<%= sub3.children.present? ? 'accordion-button' : '' %> collapsed" data-bs-toggle="collapse" data-bs-target="#<%= ["fourthLevel", sub3.id].join %>"> <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 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" %> <%= 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" %>
</div> <% end %>
<% else %> </div>
<%= 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-collapse collapse" id="<%= ["fourthLevel", sub3.id].join %>" data-bs-parent="#fourthLevelPanel<%= sub3.id %>">
<div class="accordion-body pt-1"> <div class="accordion-body pt-1">
<% sub3.children.order(name: :asc).each do |sub4| %> <% sub3.children.order(name: :asc).each do |sub4| %>
<div class="accordion accordion-flush ps-20"> <div class="accordion accordion-flush ps-20">
<div class="accordion-item d-flex justify-content-between"> <div class="accordion-item d-flex justify-content-between">
<div> <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 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" %> <%= 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>
</div> </div>
</div> <% end %>
<% end %> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <% end %>
<% end %> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <% end %>
<% end %> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <% end %>
<% end %> <% end %>

4
app/components/subject_index_form_component.rb
Unescape View File

@ -7,10 +7,6 @@ class SubjectIndexFormComponent < BaseComponent
@parent_id = @opts[:parent_id] @parent_id = @opts[:parent_id]
end end
def all_subjects
Cdao::Subject.all.order(name: :asc)
end
def current_library def current_library
Cdao::Library.first Cdao::Library.first
end end

2
app/components/subject_index_form_component/subject_index_form_component.html.erb
Unescape View File

@ -22,4 +22,4 @@
<button type="button" class="btn btn-secondary" href="<%= subject_indexes_path() %>"> Back </button> <button type="button" class="btn btn-secondary" href="<%= subject_indexes_path() %>"> Back </button>
</div> </div>
</div> </div>
<% end %> <% end %>

11
app/components/subjects_offcanvas_component.rb
Unescape View File

@ -0,0 +1,11 @@
class SubjectsOffcanvasComponent < BaseComponent
attr_reader :opts
def initialize(current_user:, opts: {})
@opts = opts
end
def render?
opts[:is_render].present?
end
end

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

@ -0,0 +1,31 @@
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" data-bs-backdrop="false" id="subjectsOffCanvas">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Subjects</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body" id="subjectsAccordion">
<% 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>

1
app/javascript/src/application.scss
Unescape View File

@ -3,6 +3,7 @@
@import "./application/sessions"; @import "./application/sessions";
@import "./application/pagination"; @import "./application/pagination";
@import "./application/table"; @import "./application/table";
@import "./application/nav-bar";
.tableFixHead { .tableFixHead {
overflow: auto; overflow: auto;

11
app/javascript/src/application/nav-bar.scss
Unescape View File

@ -0,0 +1,11 @@
img.nav-bar-app-logo {
width: 220px;
}
.active-red {
background: #f75353;
}
.active-red a:hover {
background: transparent;
}

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

@ -12,15 +12,20 @@
</head> </head>
<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 }))%>
<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="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" data-bs-backdrop="false" id="subjectsOffCanvas">
<% if current_user.present? %> <div class="offcanvas-header">
<div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-secondary min-vh-100" style="padding: 0 !important;"> <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
<%= render(SidenavComponent.new(current_user: current_user, opts: { is_sidenav: true }))%> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div> </div>
<% end %>
<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? ? '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>

Write Preview
Loading…
Cancel
Save