[RUBY] [No.007] Écran de gestion de l'organisation et processus de connexion à l'organisation
Issue PR [No.006] Conception approximative de l'écran de gestion de l'organisation et de la connexion
Le concept, etc. était «organisation», mais la mise en œuvre a été décidée comme «entreprise»
Aperçu
Ajouter un écran de gestion de l'organisation et un processus de connexion à l'organisation
Détails ToDo
- Table de modèle d'Org ajoutée
Terminal
bin/rails g model org name:string org_type:integer
- Ajouté orgs_controller
Terminal
bin/rails g controller orgs
Supprimer les fichiers inutiles
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 <-Cela a été supprimé
invoke helper
create app/helpers/orgs_helper.rb <-Cela a été supprimé
invoke test_unit
invoke assets
invoke coffee
invoke scss
create app/assets/stylesheets/orgs.scss <-Cela a été supprimé
--Définir la route de l'index des organisations et ajouter une vue
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] #<-ajouter à
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:Rendre possible de distinguer les cas avec 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
 |
|---|
--Définir l'itinéraire des organisations # afficher et ajouter une vue
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] #<-spectacle également ajouté
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
|Détails de l'entreprise
p.mt-1.max-w-2xl.text-sm.leading-5.text-gray-500
|Je vais expliquer les détails de l'entreprise.
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
|Nom de la compagnie
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
|type de compagnie
dd.mt-1.text-sm.leading-5.text-gray-900.sm:mt-0.sm:col-span-2
= @org.org_type
 |
|---|
--Placez chaque fil / lien en diagonale vers la droite
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
|Changement d'entreprise
/ TODO:Le lien@Réécrire dans l'organisation
= 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
|Détails de l'entreprise
JS sera soutenu par un autre PR.
--Ajouter des organisations à la graine
db/seeds.rb
orgs = Org.create(
[
{name: 'Compagnie_a', org_type: 0},
{name: 'Compagnie_b', org_type: 1},
{name: 'Compagnie_c', org_type: 0}
]
)
Contrôle de fonctionnement
Préparation
bin/rails db:migrate:reset
bin/rails db:reset
Critères d'acceptation
- [x] Transition d'écran comme indiqué ci-dessous
Recommended Posts