[RUBY] [Nr. 007] Organisationsverwaltungsbildschirm und Anmeldevorgang bei der Organisation

Issue PR [No.006] Grobe Gestaltung des Organisationsverwaltungsbildschirms und der Anmeldung

Das Konzept usw. war "Organisation", aber die Implementierung wurde als "Unternehmen" beschlossen

Überblick

Fügen Sie den Organisationsverwaltungsbildschirm und den Organisationsanmeldevorgang hinzu

ToDo Details

--Org Modelltabelle hinzugefügt

Terminal

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

• orgs_controller hinzugefügt

Terminal

bin/rails g controller orgs

Löschen Sie nicht benötigte Dateien

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 <-Dies wurde gelöscht
      invoke  helper
      create    app/helpers/orgs_helper.rb <-Dies wurde gelöscht
      invoke    test_unit
      invoke  assets
      invoke    coffee
      invoke    scss
      create      app/assets/stylesheets/orgs.scss <-Dies wurde gelöscht

--Stellen Sie die Route des Organisationsindex # ein und fügen Sie die Ansicht hinzu

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] #<-hinzufügen
  namespace :orders do
    resources :ordering_org_sides, only: %i[index]
  end
end

Terminal

touch app/views/orgs/index.html.slim

Referenz

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:Machen Sie es möglich, Fälle mit Sass zu unterscheiden
      - 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

--Stellen Sie die Route der Organisationen # ein und zeigen Sie sie an

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 auch hinzugefügt
  namespace :orders do
    resources :ordering_org_sides, only: %i[index]
  end
end

Terminal

touch app/views/orgs/show.html.slim

Referenz

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
      |Firmendetails
    p.mt-1.max-w-2xl.text-sm.leading-5.text-gray-500
      |Ich werde die Firmendetails erklären.
  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
          |Name der Firma
        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
          |Firmenart
        dd.mt-1.text-sm.leading-5.text-gray-900.sm:mt-0.sm:col-span-2
          = @org.org_type

• Platzieren Sie jeden Anschlussdraht / jede Verbindung diagonal nach rechts

Referenz

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
                  |Firmenwechsel
                / TODO:Die Verbindung@In org umschreiben
                = 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
                  |Firmendetails

JS wird von einem anderen PR unterstützt.

• Füge Orgs zum Samen hinzu

db/seeds.rb

orgs = Org.create(
  [
    {name: 'Unternehmen_a', org_type: 0},
    {name: 'Unternehmen_b', org_type: 1},
    {name: 'Unternehmen_c', org_type: 0}
  ]
)

Funktionsprüfung

Vorbereitung

bin/rails db:migrate:reset
bin/rails db:reset

Akzeptanzkriterium

• [x] Bildschirmübergang wie unten gezeigt