[RUBY] [No.004] Der Bestelllistenbildschirm des Bestellers wurde korrigiert

Issue PR

Überblick

Ändern Sie den Bestelllistenbildschirm des Bestellers

Aufgabenliste

• [x] Statusaufzählung
• [x] Schaltfläche Bearbeiten auf Schriftart
• [x] Ermöglicht horizontales Scrollen bei schmaler Breite

ToDo Details

Statusaufzählung

Rails Internationalization (i18n) API [Anfänger] Rails i18n-Unterstützung für die japanische Lokalisierung Japanische Lokalisierung mit i18n mit 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.Vor der Bestellung
        ordered: 2.Bestellt
        buying: 3.Im Kauf
        shipped: 4.Versand

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

Schaltfläche "Bearbeiten" auf "Fontawsome"

Using a Package Manager [Ruby on Rails] So installieren Sie Font Awesome mit 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

Es ist ein wenig rechts. Lassen Sie es uns in einer anderen PR beheben.

Ermöglicht horizontales Scrollen bei schmaler Breite

Korrespondenz Einfach die Flexbox entfernt.

Funktionsprüfung

Vorbereitung

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

Akzeptanzkriterium

• [x] Es sieht aus wie die Figur

• [x] Ermöglicht horizontales Scrollen bei schmalem Fenster