[No.004] Corrected the order list screen of the orderer

Issue PR

Overview

Modify the order list screen of the orderer

ToDo list

-[x] Enumeration of status -[x] Edit button to font awesome -[x] Allows side-scrolling when the width is narrow

ToDo details

Enumeration of status

Rails Internationalization (i18n) API [Beginner] Rails support for Japanese localization by i18n Japanese localization using i18n with Rails

config/application.rb

module ImportAgentApp
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.2

    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration can go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded after loading
    # the framework and any gems in your application.
    config.i18n.default_locale = :ja
  end
end

Gemfile

gem 'rails-i18n':

config/locales/ja.yml

ja:
  enum:
    orders:
      status:
        before_order: 1.Before ordering
        ordered: 2.Ordered
        buying: 3.Under purchase
        shipped: 4.Shipped

app/models/order.rb

class Order < ApplicationRecord
  enum status: {
    before_order: 1,
    ordered: 2,
    buying: 3,
    shipped: 4
  }

  def status_i18n
    I18n.t status, scope: %i[enum orders status]
  end
end

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

td.px-6.py-4.whitespace-no-wrap.text-sm.leading-5.text-gray-500
  = order.status_i18n

Edit button to font awesome

Using a Package Manager [Ruby on Rails] How to install Font Awesome with Webpacker

Terminal

npm install --save @fortawesome/fontawesome-free

Terminal

yarn add @fortawesome/fontawesome-free

app/javascript/packs/application.js

import '@fortawesome/fontawesome-free/js/all'

Font Awesome edit

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

td.px-6.py-4.whitespace-no-wrap.text-right.text-sm.leading-5.font-medium
  a.text-indigo-600.hover:text-indigo-900 href="#"
    i.fas.fa-edit

It's a little to the right. Let's fix it in another PR.

Allows side-scrolling when the width is narrow

Correspondence Just removed flexbox.

Operation check

Preparation

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

Acceptance criteria

-[x] It looks like the figure

-[x] Side-scrolling is possible when the window is narrow.