Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

O card não está mudando de cor de acordo com o status

Referente ao curso Spring MVC: crie um web app com Thymeleaf e Bootstrap, no capítulo Formatação e finalização e atividade Modelando o status

por Ayrton da Silva Barreto
| 158.6k xp | 23 posts

Procurei o "erro" até no projeto final do curso, mas não encontrei.

home.html

<!DOCTYPE html>
<html lang="pt">
<head th:replace="~{base :: head('Página Principal')}"></head>
<body>
    <div th:replace="~{base :: logo}"></div>
    <div class="container">
        <div th:replace="~{base :: titulo('Meus Pedidos')}"></div>
        <nav class="navbar navbar-expand navbar-light bg-light d-flex justify-content-between mb-3">
            <div class="navbar-nav">
                <a th:classappend="${status} == 'null' ? 'active'" class="nav-item nav-link" href="/home">Todos</a>
                <a th:classappend="${status} == 'aguardando' ? 'active'" class="nav-item nav-link" href="/home/aguardando">Aguardando</a>
                <a th:classappend="${status} == 'aprovado' ? 'active'" class="nav-item nav-link" href="/home/aprovado">Aprovado</a>
                <a th:classappend="${status} == 'entregue' ? 'active'" class="nav-item nav-link" href="/home/entregue">Entregue</a>
            </div>
            <a href="/pedido/formulario">
                <button class="btn btn-outline-secondary my-2 my-sm-0">Novo</button>
            </a>
        </nav>
        <div class="card mb-3" th:each="pedido : ${pedidos}">
            <th:block th:switch="${pedido.status.name()}">
                <div th:case="'AGUARDANDO'" class="card-header alert-warning" th:text="${pedido.nomeProduto}">Nome do Produto</div>
                <div th:case="'APROVADO'" class="card-header alert-success" th:text="${pedido.nomeProduto}">Nome do Produto</div>
                <div th:case="'ENTREGUE'" class="card-header alert-dark" th:text="${pedido.nomeProduto}">Nome do Produto</div>
            </th:block>

            <div class="card-body">
                <div class="row">
                    <div class="col-12 mb-3 col-sm-8">
                        <div class="row">
                            <div class="col-md-5"> Valor: <span th:if="${pedido.valorNegociado} != null" th:text="${'R$ ' + #numbers.formatDecimal(pedido.valorNegociado,3,'POINT',2,'COMMA')}"></span></div>
                            <div class="col-md-7"> Data da entrega: <span th:text="${#temporals.format(pedido.dataEntrega,'dd/MM/yyyy')}"></span>
                            </div>
                        </div>

                        <div>Produto</div>
                        <div><input class="form-control" th:value="${pedido.urlProduto}"></div>

                        <div>Descrição</div>
                        <div>
                            <textarea class="form-control" th:text="${pedido.descricao}">descrição do pedido</textarea>
                        </div>
                    </div>

                    <div class="col-12 col-sm-4">
                        <div>
                            <img class="img-thumbnail" th:src="${pedido.urlImagem}"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

base.html

<head th:fragment="head(valor)">
    <meta charset="UTF-8">
    <title th:text="${valor}"></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Handlee&display=swap" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/style.css}"/>
</head>

<div th:fragment="logo" class="logo-container mb-3 p-3 d-flex justify-content-between align-items-center">
    <span class="logo">mudi</span>
    <span>login</span>
</div>

<div th:fragment="titulo(valor)" class="container-fluid bg-dark text-light p-5">
    <h1 class="display-4" th:text="${valor}"></h1>
</div>
2 respostas
por Ayrton da Silva Barreto
| 158.6k xp | 23 posts

HomeController.java

package br.com.ayrton.mvc.mudi.controller;

import br.com.ayrton.mvc.mudi.model.Pedido;
import br.com.ayrton.mvc.mudi.model.enums.StatusPedido;
import br.com.ayrton.mvc.mudi.service.PedidoService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;

@Controller
@RequestMapping("/home")
public class HomeController {
    private final PedidoService pedidoService;

    public HomeController(PedidoService pedidoService) {
        this.pedidoService = pedidoService;
    }

    @GetMapping
    public String home(Model model){
        List<Pedido> pedidos = pedidoService.getAll();
        model.addAttribute("pedidos",pedidos);
        return "home";
    }

    @GetMapping("/{status}")
    public String porStatus(@PathVariable("status")String status, Model model){
        List<Pedido> pedidos = pedidoService.buscarPorStatus(StatusPedido.valueOf(status.toUpperCase()));
        model.addAttribute("pedidos",pedidos);
        model.addAttribute("status",status);
        return "home";
    }

    @ExceptionHandler(IllegalArgumentException.class)
    public String onError(){
        return "redirect:/home";
    }
}
solução!
por Ayrton da Silva Barreto
| 158.6k xp | 23 posts
            <th:block th:switch="${pedido.status.name()}">
                <div th:case="'AGUARDANDO'" class="card-header alert alert-warning" th:text="${pedido.nomeProduto}">Nome do produto</div>
                <div th:case="'APROVADO'" class="card-header alert alert-success" th:text="${pedido.nomeProduto}">Nome do produto</div>
                <div th:case="'ENTREGUE'" class="card-header alert  alert-dark" th:text="${pedido.nomeProduto}">Nome do produto</div>
            </th:block>

No meu caso, tive que adicionar em cada class um alert após o card-header para que funcionasse.

Para mais informações: https://getbootstrap.com/docs/5.2/components/alerts/