[RUBY] [No.007] Organization management screen and login process to the organization
Issue PR [No.006] Rough design of organization management screen and login
The concept etc. was organization, but the implementation was decided to be company
Overview
Add organization management screen and login process to organization
ToDo details
--Org model table added
Terminal
bin/rails g model org name:string org_type:integer
--Added orgs_controller
Terminal
bin/rails g controller orgs
Delete unnecessary files
Terminal
-> % bin/rails g controller orgs
Running via Spring preloader in process 22619
create app/controllers/orgs_controller.rb
invoke slim
create app/views/orgs
invoke test_unit
create test/controllers/orgs_controller_test.rb <-This was deleted
invoke helper
create app/helpers/orgs_helper.rb <-This was deleted
invoke test_unit
invoke assets
invoke coffee
invoke scss
create app/assets/stylesheets/orgs.scss <-This was deleted
--Set route of orgs # index and add view
config/routes.rb
Rails.application.routes.draw do
root 'orders/ordering_org_sides#index'
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
resource :orgs, only: %i[index] #<-add to
namespace :orders do
resources :ordering_org_sides, only: %i[index]
end
end
Terminal
touch app/views/orgs/index.html.slim
slim:app/views/orgs/index.html.slim
.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
 |
|---|
--Set route of orgs # show and add view
config/routes.rb
Rails.application.routes.draw do
root 'orders/ordering_org_sides#index'
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
resource :orgs, only: %i[index, show] #<-show also added
namespace :orders do
resources :ordering_org_sides, only: %i[index]
end
end
Terminal
touch app/views/orgs/show.html.slim
slim:app/views/orgs/show.html.slim
.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
= @org.org_type
 |
|---|
--Place each lead wire / link diagonally to the right
slim:app/views/orders/ordering_org_sides/index.html.slim
.bg-gray-100
nav.bg-white.shadow-sm
.max-w-7xl.mx-auto.px-4.sm:px-6.lg:px-8
.flex.justify-between.h-16
.flex
.flex-shrink-0.flex.items-center
.hidden.sm:ml-6.space-x-8.sm:flex
a.inline-flex.items-center.px-1.pt-1.border-b-2.border-indigo-500.text-sm.font-medium.leading-5.text-gray-900.focus:outline-none.focus:border-indigo-700.transition.duration-150.ease-in-out[href="#"]
| Sample_1
a.inline-flex.items-center.px-1.pt-1.border-b-2.border-transparent.text-sm.font-medium.leading-5.text-gray-500.hover:text-gray-700.hover:border-gray-300.focus:outline-none.focus:text-gray-700.focus:border-gray-300.transition.duration-150.ease-in-out[href="#"]
| Sample_2
a.inline-flex.items-center.px-1.pt-1.border-b-2.border-transparent.text-sm.font-medium.leading-5.text-gray-500.hover:text-gray-700.hover:border-gray-300.focus:outline-none.focus:text-gray-700.focus:border-gray-300.transition.duration-150.ease-in-out[href="#"]
| Sample_3
a.inline-flex.items-center.px-1.pt-1.border-b-2.border-transparent.text-sm.font-medium.leading-5.text-gray-500.hover:text-gray-700.hover:border-gray-300.focus:outline-none.focus:text-gray-700.focus:border-gray-300.transition.duration-150.ease-in-out[href="#"]
| Sample_4
.hidden.sm:ml-6.sm:flex.sm:items-center
button.p-1.border-2.border-transparent.text-gray-400.rounded-full.hover:text-gray-500.focus:outline-none.focus:text-gray-500.focus:bg-gray-100.transition.duration-150.ease-in-out[aria-label="Notifications"]
svg.h-6.w-6[stroke="currentColor" fill="none" viewbox="0 0 24 24"]
path[stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"]
.ml-3.relative
div
button#user-menu.flex.text-sm.border-2.border-transparent.rounded-full.focus:outline-none.focus:border-gray-300.transition.duration-150.ease-in-out[aria-label="User menu" aria-haspopup="true"]
i.fas.fa-user-circle.fa-2x.text-gray-700
.origin-top-right.absolute.right-0.mt-2.w-48.rounded-md.shadow-lg
.py-1.rounded-md.bg-white.shadow-xs
= link_to [:orgs], class: 'block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out' do
|Company switching
/ TODO:The link@Rewrite to org
= link_to '/', class: 'block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out' do
|Company details
JS will be supported by another PR.
--Add orgs to seed
db/seeds.rb
orgs = Org.create(
[
{name: 'Company_a', org_type: 0},
{name: 'Company_b', org_type: 1},
{name: 'Company_c', org_type: 0}
]
)
Operation check
Preparation
bin/rails db:migrate:reset
bin/rails db:reset
Acceptance criteria
-[x] Screen transition as shown below
Recommended Posts