Ajustando o projeto Admin para adicionar categorias no cadastro dos produtos

Criando a seed de categorias

Precisamos inicialmente criar uma seed para adicionar algumas categorias na nossa loja:

npx knex seed:make create_initial_categories

O arquivo da seed deve ser com o abaixo:

seeds/create_initial_categories.js

exports.seed = function(knex) {
  // Remove todos as categories
  return knex('categories').del()
    .then(function () {
      // Depois insere as categories:
      return knex('categories').insert([
        {
          name: 'Alimentos'
        },
        {
          name: 'Brinquedos'
        },
        {
          name: 'Animais'
        }
      ]);
    });
};

Repare que o comando acima inicialmente remove as categorias já adicionadas antes de criar as novas. Se você deseja criar uma seed que não remove registros anteriores, basta omitir o ".del()".

Executando a seed específica criada (com a opção --specific):

npx knex seed:run --specific=create_initial_categories.js

Usando as categorias cadastradas na seed nos formulários de cadastro de produto

Em routes/products.js, adicione na rota '/new' uma variável, disponível na renderização da view, com a lista de categorias (que será mostrada em um select) e também na rota '/create' adicione o atributo category_id ao salvar o produto. Na rota '/' (listagem de produtos) também é feita a busca da categoria do produto e para cada um dos listados. O arquivo routes/products.js ficará assim ao final:

routes/products.js

const express = require('express');
const router = express.Router();

const knexConfig = require('../knexfile');
const knex = require('knex')(knexConfig);

const multer  = require('multer');

const upload = multer({ dest: './public/images' });

router.get('/', async (req, res) => {
  const products = await knex.table('products').select();
  for (const product of products) {

    product.category = await knex.table('categories').where('id', '=', product.category_id).first()
    console.log(product.category);
  }
  res.render('products/list', { products });
});

router.get('/new', async (req, res) => {
  const categories = await knex.table('categories').select();
  res.render('products/new', { categories });
});

router.post('/create', upload.single('photo'), async (req, res) => {
  await knex.table('products').insert({
    name: req.body.name,
    description: req.body.description,
    price: parseFloat(req.body.price),
    photo: req.file.filename,
    category_id: req.body.category_id
  });
  res.redirect('/products');
});

module.exports = router;

Altere o arquivo views/products/new.ejs para adicionar a categoria no cadastro do produto:

<h1>Criar produto</h1>
<form method="POST" action="/products/create" enctype="multipart/form-data">
  Foto: <input type="file" name="photo" /><br/>
  Nome: <input type="text" name="name" /><br/>
  Preço: <input type="text" name="price" /><br/>
  Descrição: <input type="text" name="description" /><br/>
  Categoria:
  <select name="category_id">
    <% for (const category of categories) { %>
      <option value="<%= category.id %>"><%= category.name %></option>
    <% } %>
  </select><br/>
  <input type="submit" value="Salvar produto" />
</form>

Altere o arquivo views/products/list.ejs para adicionar a categoria na listagem:

<h1>Lista de produtos</h1>

<a href="/">Voltar</a>
<a href="/products/new">Adicionar produto</a>

<table>
  <% for (const product of products) { %>
    <tr>
      <td><img src="/images/<%= product.photo %>" width="100px" /></td>
      <td><%= product.name %></td>
      <td><%= product.price %></td>
      <td><%= product.category?.name %></td>
    </tr>
  <% } %>
</table>

Repare que product.category?.name tem uma "?" indicando que só será mostrado o nome se a categoria existir. Esse é um recurso interessante do Javascript e nos ajuda pois alguns produtos podem ter sido cadastrados sem categoria antes desse recurso ter sido criado.

O formulário de cadastro de produto agora tem a Categoria para ser escolhida:

Claro que para se ter uma gestão completa de produtos e categorias, vários outros recursos poderiam ser adicionados como "editar produto", "criar/editar categorias", poderíamos também adicionar uma biblioteca CSS para melhorar o visual e usabilidade, enfim… muito pode ainda ser feito nessa aplicação Admin. Vamos, entretanto, nos manter com o básico pois o nosso objetivo é ter uma visão geral de como integrar sistemas com diferentes plataformas e você pode depois incrementar o sistema com os conhecimentos que adquiriu e tecnologias que desejar.