[RUBY] [Purchase agency service personal development --No.008] Introduce ActionView :: Component and adapt the navigation bar to the full screen
github/view_component About [Rails 6.1] ActionView :: Component " Introduction of ActionView :: Component
Overview
Introduce ActionView :: Component to adapt the navbar to full screen
ToDo details
--Installing ActionView :: Component
Gemfile
gem "view_component", require: "view_component/engine"
Terminal
bundle install
--Componentize the navbar part
Terminal
-> % bin/rails generate component Layout::Navbar org
Running via Spring preloader in process 30401
create app/components/layout/navbar_component.rb
invoke test_unit
create test/components/layout/navbar_component_test.rb
invoke slim
create app/components/layout/navbar_component.html.slim
--Apply navbar component to app / views / orders / ordering_org_sides / index.html.slim
slim:app/views/orders/ordering_org_sides/index.html.slim
.bg-gray-100
= render(::Layout::NavbarComponent.new(org: @org))
.py-10
.max-w-7xl.mx-auto.sm:px-6.lg:px-8
.py-5
.-my-2.overflow-x-auto(class="sm:-mx-6 lg:-mx-8")
.py-2.align-middle.inline-block.min-w-full(class="sm:px-6 lg:px-8")
.shadow.overflow-hidden.border-b.border-gray-200(class="sm:rounded-lg")
table.min-w-full.divide-y.divide-gray-200
thead
tr
th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
|Order No
th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
|Product image
th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
|Seller page
th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
|Purchase destination page
th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
|Color, size, etc.
th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
|quantity
th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
|Addressee
th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
|Purchase cost
th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
|status
th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
|Edit
tbody.bg-white.divide-y.divide-gray-200
- @orders.each do |order|
tr
td.px-6.py-4.whitespace-no-wrap.text-sm.leading-5.text-gray-500
= order.trade_no
td.px-6.py-4.whitespace-no-wrap.text-sm.leading-5.text-gray-500
|Product image
td.px-6.py-4.whitespace-no-wrap.text-sm.leading-5.text-gray-500
a.text-indigo-600.hover:text-indigo-900 href="#"Seller page
td.px-6.py-4.whitespace-no-wrap.text-sm.leading-5.text-gray-500
a.text-indigo-600.hover:text-indigo-900 href="#"Purchase destination page
td.px-6.py-4.whitespace-no-wrap.text-sm.leading-5.text-gray-500
= order.color_size
td.px-6.py-4.whitespace-no-wrap.text-sm.leading-5.text-gray-500
= order.quantity
td.px-6.py-4.whitespace-no-wrap.text-sm.leading-5.text-gray-500
| 〒#{order.postal}
br
= order.address
td.px-6.py-4.whitespace-no-wrap.text-sm.leading-5.text-gray-500
| $100
td.px-6.py-4.whitespace-no-wrap.text-sm.leading-5.text-gray-500
= order.status_i18n
td.px-6.py-4.whitespace-no-wrap.text-right.text-sm.leading-5.font-medium
a.text-indigo-600.hover:text-indigo-900 href="#"
i.fas.fa-edit
--Apply navbar component to app / views / orgs / index.html.slim
slim:app/views/orgs/index.html.slim
= render(::Layout::NavbarComponent.new(org: @org))
.bg-white.shadow.m-auto.sm:rounded-md.mt-5(class="w-2/4")
ul
- @orgs.each do |org|
/ TODO:Make it possible to distinguish cases with Sass
- border_t = org == @orgs.first ? '' : 'border-t border-gray-200'
li.(class=border_t)
= link_to [org], class: 'block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out' do
.flex.items-center.px-4.py-4.sm:px-6
.min-w-0.flex-1.flex.items-center
.min-w-0.flex-1.px-4.md:grid.md:grid-cols-2.md:gap-4
div
.text-sm.leading-5.font-medium.text-indigo-600.truncate
= org.name
div
i.fas.fa-sign-in-alt.fa-lg.bg-gray-50.text-gray-500
--Apply navbar component to app / views / orgs / show.html.slim
slim:app/views/orgs/show.html.slim
= render(::Layout::NavbarComponent.new(org: @org))
.bg-white.shadow.m-auto.mt-5.overflow-hidden.sm:rounded-lg(class="w-1/2")
.px-4.py-5.border-b.border-gray-200.sm:px-6
h3.text-lg.leading-6.font-medium.text-gray-900
|Company details
p.mt-1.max-w-2xl.text-sm.leading-5.text-gray-500
|I will explain the company details.
div
dl
.bg-gray-100.px-4.py-5.sm:grid.sm:grid-cols-3.sm:gap-4.sm:px-6
dt.text-sm.leading-5.font-medium.text-gray-500
|company name
dd.mt-1.text-sm.leading-5.text-gray-900.sm:mt-0.sm:col-span-2
= @org.name
.bg-white.px-4.py-5.sm:grid.sm:grid-cols-3.sm:gap-4.sm:px-6
dt.text-sm.leading-5.font-medium.text-gray-500
|Company type
dd.mt-1.text-sm.leading-5.text-gray-900.sm:mt-0.sm:col-span-2
/ TODO:Enum
= @org.org_type
Operation check
Preparation
bin/rails db:migrate:reset
bin/rails db:reset
Acceptance criteria
-[x] navbar is applied to the full screen as shown below
- The link is messed up.
- Drop-down JS will be supported at a later date.
Recommended Posts