[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.

e7ef354b87581d5d483dd4fc3fec8f55

Operation check

Preparation

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

Acceptance criteria

-[x] It looks like the figure

image

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

Recommended Posts

[No.004] Corrected the order list screen of the orderer
[No.003] Create an order list screen for the orderer
[Java] Delete the elements of List
Explanation of the order of rails routes
Official logo list of the service
Order of processing in the program
[Purchase agency service individual development --No.011] Create a link to the order list on the company management screen
How to sort the List of SelectItem
Fix the view screen of the post page
[Order method] Set the order of data in Rails
Add empty data to the top of the list
About the description order of Java system properties
The order of Java method modifiers is fixed
Ominous odor list suggesting the possibility of refactoring
[Android] List all setting items on the setting screen
ArrayList and the role of the interface seen from List
How to delete / update the list field of OneToMany
List the contents of categories created with Active Hash
[No.006] Rough design of organization management screen and login
[No.007] Organization management screen and login process to the organization
I saw the list view of Android development collectively
<Android> Change the background color of the List row of ListView
Display the list in setDetails on the screen with spring-security
The objects in the List were references, right? Confirmation of
Extract a specific element from the list of objects
I can't get out of the Rails dbconsole screen