[RUBY] [N ° 004] Correction de l'écran de la liste des commandes du client

Issue PR

Aperçu

Modifier l'écran de la liste des commandes du client

Liste de choses à faire

• [x] Énumération de l'état
• [x] Bouton Modifier pour faire une police
• [x] Permet le défilement horizontal lorsque la largeur est étroite

Détails ToDo

Énumération d'état

API Rails Internationalization (i18n) [Débutant] Prise en charge de Rails i18n pour la localisation japonaise Localisation japonaise utilisant i18n avec 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.Avant de commander
        ordered: 2.Commandé
        buying: 3.En cours d'achat
        shipped: 4.Expédié

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

Modifier le bouton en police

Using a Package Manager [Ruby on Rails] Comment installer Font Awesome avec 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

C'est un peu à droite. Fixons-le dans un autre PR.

Permet le défilement horizontal lorsque la largeur est étroite

Correspondance Je viens de retirer la flexbox.

Contrôle de fonctionnement

Préparation

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

Critères d'acceptation

• [x] Cela ressemble à la figure

• [x] Lorsque la fenêtre est étroite, vous pouvez faire défiler horizontalement.