[No.003] Create an order list screen for the orderer

Issue PR

Overview

Create a management screen for the orderer

ToDo list

-[x] Order :: OrderingOrgSidesController added -[x] routes.rb looks good -[x] Order model added -[x] Added the contents to create a record of Order to seed -Introduction of [x] Slim -[x] Introducing TailWind -[x] Brings the look closer to Figma

ToDo details

Added Order :: OrderingOrgSidesController

Hit the following at the terminal.

bin/rails g controller order::ordering_sides

Modified app / controllers / orders / ordering_org_sides_controller.rb to the following.

module Orders
  class OrderingOrgSidesController < ApplicationController

  end
end

Make routes.rb look good

Make config / routes.rb as follows.

Rails.application.routes.draw do
  root 'orders/ordering_org_sides#index'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  namespace :orders do
    resources :ordering_org_sides, only: %i[index]
  end
end

Order model added

To add the Order model in the figure, tap below in the terminal

bin/rails g model Order trade_no:string title:string postal:string address:string name:string phone:string color_size:string status:integer

Add content to create a record of Order to seed

Reference

Added the following to db / seeds.rb.

orders = Order.create(
  [
    {trade_no: '59466918', title: '◯◯◯◯◯◯◯◯◯◯', postal: 'XXX-XXXX', address: '◯◯ prefecture ◯◯ city ◯◯ ward ◯ chome ◯◯-◯◯', name: 'YYYYYY', phone: 'XXX-XXXX-XXXX', color_size: '△△△', quantity: 1, status: 1},
    {trade_no: '56654093', title: '◯◯◯◯◯◯◯◯◯◯', postal: 'XXX-XXXX', address: '◯◯ prefecture ◯◯ city ◯◯ ward ◯ chome ◯◯-◯◯', name: 'YYYYYY', phone: 'XXX-XXXX-XXXX', color_size: '△△△', quantity: 1, status: 2},
    {trade_no: '46263602', title: '◯◯◯◯◯◯◯◯◯◯', postal: 'XXX-XXXX', address: '◯◯ prefecture ◯◯ city ◯◯ ward ◯ chome ◯◯-◯◯', name: 'YYYYYY', phone: 'XXX-XXXX-XXXX', color_size: '△△△', quantity: 1, status: 3},
    {trade_no: '76537895', title: '◯◯◯◯◯◯◯◯◯◯', postal: 'XXX-XXXX', address: '◯◯ prefecture ◯◯ city ◯◯ ward ◯ chome ◯◯-◯◯', name: 'YYYYYY', phone: 'XXX-XXXX-XXXX', color_size: '△△△', quantity: 1, status: 4},
    {trade_no: '56939175', title: '◯◯◯◯◯◯◯◯◯◯', postal: 'XXX-XXXX', address: '◯◯ prefecture ◯◯ city ◯◯ ward ◯ chome ◯◯-◯◯', name: 'YYYYYY', phone: 'XXX-XXXX-XXXX', color_size: '△△△', quantity: 1, status: 1},
    {trade_no: '83265169', title: '◯◯◯◯◯◯◯◯◯◯', postal: 'XXX-XXXX', address: '◯◯ prefecture ◯◯ city ◯◯ ward ◯ chome ◯◯-◯◯', name: 'YYYYYY', phone: 'XXX-XXXX-XXXX', color_size: '△△△', quantity: 1, status: 2},
    {trade_no: '68545632', title: '◯◯◯◯◯◯◯◯◯◯', postal: 'XXX-XXXX', address: '◯◯ prefecture ◯◯ city ◯◯ ward ◯ chome ◯◯-◯◯', name: 'YYYYYY', phone: 'XXX-XXXX-XXXX', color_size: '△△△', quantity: 1, status: 3},
    {trade_no: '86154160', title: '◯◯◯◯◯◯◯◯◯◯', postal: 'XXX-XXXX', address: '◯◯ prefecture ◯◯ city ◯◯ ward ◯ chome ◯◯-◯◯', name: 'YYYYYY', phone: 'XXX-XXXX-XXXX', color_size: '△△△', quantity: 1, status: 4},
    {trade_no: '73779350', title: '◯◯◯◯◯◯◯◯◯◯', postal: 'XXX-XXXX', address: '◯◯ prefecture ◯◯ city ◯◯ ward ◯ chome ◯◯-◯◯', name: 'YYYYYY', phone: 'XXX-XXXX-XXXX', color_size: '△△△', quantity: 1, status: 1},
    {trade_no: '16022030', title: '◯◯◯◯◯◯◯◯◯◯', postal: 'XXX-XXXX', address: '◯◯ prefecture ◯◯ city ◯◯ ward ◯ chome ◯◯-◯◯', name: 'YYYYYY', phone: 'XXX-XXXX-XXXX', color_size: '△△△', quantity: 1, status: 2},
    {trade_no: '48758961', title: '◯◯◯◯◯◯◯◯◯◯', postal: 'XXX-XXXX', address: '◯◯ prefecture ◯◯ city ◯◯ ward ◯ chome ◯◯-◯◯', name: 'YYYYYY', phone: 'XXX-XXXX-XXXX', color_size: '△△△', quantity: 1, status: 3},
    {trade_no: '94813841', title: '◯◯◯◯◯◯◯◯◯◯', postal: 'XXX-XXXX', address: '◯◯ prefecture ◯◯ city ◯◯ ward ◯ chome ◯◯-◯◯', name: 'YYYYYY', phone: 'XXX-XXXX-XXXX', color_size: '△△△', quantity: 1, status: 4},
    {trade_no: '79330602', title: '◯◯◯◯◯◯◯◯◯◯', postal: 'XXX-XXXX', address: '◯◯ prefecture ◯◯ city ◯◯ ward ◯ chome ◯◯-◯◯', name: 'YYYYYY', phone: 'XXX-XXXX-XXXX', color_size: '△△△', quantity: 1, status: 1},
  ]
)

Hit the following in the terminal.

rails db:seed

Introduction of Slim

Since some erb files have already been generated, we have responded by referring to the following. https://qiita.com/rinkun/items/391ab7e8e63a7f20339c Add the following to the Gemfile.

gem 'slim-rails'
gem 'html2slim'

At the terminal, type:

bundle exec erb2slim app/views app/views -d

Introduction of Tailwind

1.Install Tailwind via npm

# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss

2.Add Tailwind to your CSS Added app / javascript / src / scss / application.scss

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Added the following to app / javascript / packs / application.js

import '../src/scss/application.scss'

3.Create your Tailwind config file (optional)

npx tailwindcss init

4.Process your CSS with Tailwind Added the following to postcss.config.js

module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

Bring it closer to Figma

Target

Bring it closer to the appearance shown in the figure below.

https://www.figma.com/proto/k7tWzvsQYtRHSwyi877OyV/import_agent_app?node-id=2%3A0&scaling=min-zoom

reference

Tailwind Tables Sample

Confirmation of acceptance criteria

Preparation

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

Acceptance criteria

-[x] It looks like the figure below