[RUBY] [Nr.003] Erstellen Sie einen Bestelllistenbildschirm für den Besteller

Issue PR

Überblick

Erstellen Sie einen Verwaltungsbildschirm für den Besteller

Aufgabenliste

• [x] Order :: OrderingOrgSidesController hinzugefügt
• [x] route.rb sieht gut aus
• [x] Bestellmodell hinzugefügt
• [x] Der Inhalt wurde hinzugefügt, um einen Datensatz über die Reihenfolge der Samen zu erstellen -Einführung von [x] Slim
• [x] Einführung von TailWind
• [x] Lass es Figma näher kommen

ToDo Details

Order :: OrderingOrgSidesController hinzugefügt

Treffen Sie am Terminal Folgendes.

bin/rails g controller order::ordering_sides

App / controller / orders / ordering_org_sides_controller.rb wurde wie folgt geändert.

module Orders
  class OrderingOrgSidesController < ApplicationController

  end
end

Mach route.rb schön

Machen Sie config / route.rb wie folgt.

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

Bestellmodell hinzugefügt

Um das Bestellmodell in der Abbildung hinzuzufügen, klicken Sie im Terminal auf Folgendes

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

Fügen Sie Inhalte hinzu, um einen Datensatz mit der Reihenfolge zum Startwert zu erstellen

Referenz

Folgendes wurde zu db / seeds.rb hinzugefügt.

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

Drücken Sie im Terminal Folgendes.

rails db:seed

Einführung von Slim

Da einige erb-Dateien bereits generiert wurden, haben wir auf Folgendes reagiert. https://qiita.com/rinkun/items/391ab7e8e63a7f20339c Fügen Sie der Gemfile Folgendes hinzu.

gem 'slim-rails'
gem 'html2slim'

Geben Sie am Terminal Folgendes ein:

bundle exec erb2slim app/views app/views -d

Einführung von Rückenwind

1.Install Tailwind via npm

# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss

2.Add Tailwind to your CSS App / javascript / src / scss / application.scss hinzugefügt

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

Folgendes wurde zu app / javascript / packs / application.js hinzugefügt

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

3.Create your Tailwind config file (optional)

npx tailwindcss init

4.Process your CSS with Tailwind Folgendes wurde zu postcss.config.js hinzugefügt

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

Bringen Sie den Blick näher zu Figma

Ziel

Bringen Sie es näher an das in der folgenden Abbildung gezeigte Erscheinungsbild.

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

Referenz

Beispiel für Rückenwindtabellen

Bestätigung der Akzeptanzkriterien

Vorbereitung

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

Akzeptanzkriterium

• [x] Es sieht aus wie in der Abbildung unten