[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

Terminal


bin/rails g model org name:string org_type:integer

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

Référence

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
image.png

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

Référence

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
image.png

--Placez chaque fil / lien en diagonale vers la droite

Référence

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 [email protected]éé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

image

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

85553aaf9b9e864a3642ee1dda1b55c4

Recommended Posts

[No.007] Écran de gestion de l'organisation et processus de connexion à l'organisation
[No.007] Écran de gestion de l'organisation et processus de connexion à l'organisation
Exemple d'application du modèle de conception (n ° 1)
Rails Ajout d'une fonction de connexion facile et facile
[N ° 004] Correction de l'écran de la liste des commandes du client
Pour implémenter, écrivez le test puis codez le processus
Afficher un écran d'erreur pendant le processus de téléchargement pour répondre
[Développement individuel du service d’achat de l’agence - N ° 010] Accédez à l’écran de changement d’entreprise, à l’écran des détails de l’entreprise et à l’écran de commande après le changement d’entreprise
Je veux revenir à l'écran précédent avec kotlin et java!
"Attendez que le processus se termine" et arrêtez le processus car il reste
[Développement personnel du service d’achat de l’agence --No.008] Présentez ActionView :: Component et adaptez la barre de navigation en plein écran
Comment trouver les dizaines et les unités
Comment passer la valeur à un autre écran
[Java 7] Divisez la liste Java et exécutez le processus
Lorsque l'écran de connexion expire avec Spring-Security, le jeton CSRF expire et la connexion échoue.
Mémo: [Java] Traiter le csv lu (extraire et modifier selon les conditions) et sortir
[N ° 004] Correction de l'écran de la liste des commandes du client
Connexion SSH au serveur d'applications avec heroku
Un mémo sur le flux de Rails et Vue
Comment trouver le score total et le score moyen