[RUBY] [Purchase agency service individual development --No.010] Go to the company switching screen, company details screen, and order screen after company switching

Issue PR

Overview

Go to the company switching screen, company details screen, and order screen after company switching Get closer to Figma

ToDo list

--Corrected company switching screen

--Correction of order screen

--Corrected company details screen

ToDo list details

--Add logo ʻApp / assets / images / svg / sample.svg` added

--Corrected company switching screen

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

= render(::Layout::NavbarComponent.new(org: @org, tab: false))
.py-10.px-8
  header
    .max-w-7xl.mx-auto.px-4.sm:px-6.lg:px-8
      h1.text-3xl.font-bold.leading-tight.text-gray-900
        |List of affiliated companies
  main
    .max-w-7xl.mx-auto.sm:px-6.lg:px-8
      .px-4.py-8.sm:px-0
        .border-4.border-dashed.border-gray-200.rounded-lg.h-96
          .bg-white.shadow.sm:rounded-md.my-16.m-auto(class="w-3/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 orders_ordering_org_sides_path, class: 'block hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out' do
                    .flex.items-baseline.px-4.py-4.sm:px-6
                      .min-w-0.flex-1.flex.items-baseline
                        .min-w-0.flex-1.px-4.md:grid.md:grid-cols-3.md:gap-4
                          div.align-middle
                            .text-xl.font-medium.text-indigo-600.truncate.leading-10
                              = org.name
                          div
                            .text-xs.text-gray-500
                              |Company type
                            .text-lg.leading-5.font-medium.text-gray-900.truncate
                              / TODO:ENUM
                              |Purchasing company
                          div
                            .text-xs.text-gray-500
                              |Owner
                            .text-lg.leading-5.font-medium.text-gray-900.truncate
                              / TODO:After associating the User model, call it
                              |Yamada Taro
                      div
                        i.fas.fa-sign-in-alt.fa-lg.text-gray-600

--Correction of order screen

slim:app/views/orders/ordering_org_sides/index.html.slim

.bg-gray-100
  = render(::Layout::NavbarComponent.new(org: @org, tab: true, active: :order_ordering_org_sides))
  / ...Abbreviation

--Corrected company details screen

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

= render(::Layout::NavbarComponent.new(org: @org, tab: true))
.bg-white.shadow.overflow-hidden.m-auto.mt-16.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 details of the company
  .px-4.py-5.sm:p-0
    dl
    .sm:grid.sm:grid-cols-3.sm:gap-4.sm:px-6.sm:py-5
      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
    .mt-8.sm:mt-0.sm:grid.sm:grid-cols-3.sm:gap-4.sm:border-t.sm:border-gray-200.sm:px-6.sm:py-5
      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
        |Purchasing company
    .mt-8.sm:mt-0.sm:grid.sm:grid-cols-3.sm:gap-4.sm:border-t.sm:border-gray-200.sm:px-6.sm:py-5
      dt.text-sm.leading-5.font-medium.text-gray-500
        |Owner
      dd.mt-1.text-sm.leading-5.text-gray-900.sm:mt-0.sm:col-span-2
        |Yamada Taro

Operation check

Preparation

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

Acceptance criteria

-[] The design is Figma -[] The screen transition is as shown in the figure below. After switching companies, you will be taken to the order list screen.

Drop-down JS will be implemented at a later date