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
commit
8ae1f2eff9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 7
      app/components/document_advanced_search_component.rb
  2. 24
      app/components/document_advanced_search_component/document_advanced_search_component.html.erb
  3. 44
      app/components/sidenav_component/sidenav_component.html.erb
  4. 6
      app/components/subject_accordion_component.rb
  5. 94
      app/components/subject_accordion_component/subject_accordion_component.html.erb
  6. 4
      app/components/subject_index_form_component.rb
  7. 11
      app/components/subjects_offcanvas_component.rb
  8. 31
      app/components/subjects_offcanvas_component/subjects_offcanvas_component.html.erb
  9. 1
      app/javascript/src/application.scss
  10. 11
      app/javascript/src/application/nav-bar.scss
  11. 15
      app/views/layouts/application.html.erb

7
app/components/document_advanced_search_component.rb

@ -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

@ -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 %>

44
app/components/sidenav_component/sidenav_component.html.erb

@ -1,5 +1,6 @@
<% if current_user.present? %>
<% if opts[:is_sidenav].present? %>
<div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-secondary min-vh-100" style="padding: 0 !important;">
<div class="sidebar sidebar-body d-flex flex-column align-items-center align-items-sm-start pt-2 text-white min-vh-100">
<ul class="nav flex-column text-white w-100">
<a href="/" class="nav-link d-flex align-items-center h3 text-white my-2 w-100">
@ -70,5 +71,48 @@
</li>
</ul>
</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 %>

6
app/components/subject_accordion_component.rb

@ -1,8 +1,10 @@
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
@subjects = subjects
@opts = opts
end
end

94
app/components/subject_accordion_component/subject_accordion_component.html.erb

@ -1,4 +1,95 @@
<% parent.children.order(name: :asc).each do |sub1| %>
<% if opts[:is_offcanvas].present? %>
<% 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">
<% 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>
<% 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">
@ -73,4 +164,5 @@
</div>
</div>
</div>
<% end %>
<% end %>

4
app/components/subject_index_form_component.rb

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

11
app/components/subjects_offcanvas_component.rb

@ -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

@ -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

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

11
app/javascript/src/application/nav-bar.scss

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

15
app/views/layouts/application.html.erb

@ -12,15 +12,20 @@
</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">
<%= 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">
<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>
<% if current_user.present? %>
<div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-secondary min-vh-100" style="padding: 0 !important;">
<%= render(SidenavComponent.new(current_user: current_user, opts: { is_sidenav: true }))%>
<div class="offcanvas-body" id="subjectsAccordion">
<%= render(SubjectAccordionComponent.new(current_user: current_user, parent: nil, opts: { is_offcanvas: true })) %>
</div>
</div>
<% end %>
<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' %>">
<%= image_pack_tag 'application/cdasiaonline_logo.png', class:"app-logo" %>
</div>

Loading…
Cancel
Save