[RUBY] [No.003] Créer un écran de liste de commandes pour le client

Issue PR

Aperçu

Créer un écran de gestion pour le client

Liste de choses à faire

• [x] Order :: OrderingOrgSidesController ajouté
• [x] routes.rb semble bon
• [x] Modèle de commande ajouté
• [x] Ajout du contenu pour créer un enregistrement de la commande à semer -Introduction de [x] Slim
• [x] Présentation de TailWind
• [x] Rendez-le plus proche de Figma

Détails ToDo

Ordre ajouté :: OrderingOrgSidesController

Frappez ce qui suit au terminal.

bin/rails g controller order::ordering_sides

App / controllers / orders / ordering_org_sides_controller.rb modifié comme suit.

module Orders
  class OrderingOrgSidesController < ApplicationController

  end
end

Rendre routes.rb sympa

Créez config / routes.rb comme suit.

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

Modèle de commande ajouté

Pour ajouter le modèle Order dans la figure, cliquez sur ce qui suit dans le terminal

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

Ajouter du contenu pour créer un enregistrement de la commande à semer

Référence

Ajout de ce qui suit à db / seedss.rb.

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

Frappez ce qui suit dans le terminal.

rails db:seed

Introduction de Slim

Étant donné que certains fichiers erb ont déjà été générés, nous avons répondu en faisant référence à ce qui suit. https://qiita.com/rinkun/items/391ab7e8e63a7f20339c Ajoutez ce qui suit au Gemfile.

gem 'slim-rails'
gem 'html2slim'

Au terminal, tapez:

bundle exec erb2slim app/views app/views -d

Introduction de Tailwind

1.Install Tailwind via npm

# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss

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

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

Ajout de ce qui suit à 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 Ajout de ce qui suit à postcss.config.js

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

Rapprochez-vous de Figma

Cible

Rapprochez-le de l'apparence illustrée dans la figure ci-dessous.

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

référence

Exemple de tables Tailwind

Confirmation des critères d'acceptation

Préparation

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

Critères d'acceptation

• [x] Cela ressemble à la figure ci-dessous