Thymeleaf múltiples condiciones, cambiar el color de fondo

Question

Las celdas de la tabla en las columnas accountDTO.state y accountDTO.accountDTO deben cambiar el color de fondo, según el valor de texto de accountDTO.state. He probado esto:

Thymeleaf: cómo aplicar dos (o más) estilos según condiciones mutuamente excluyentes

y he buscado algunas soluciones más, pero todos usan condicionales para dos valores posibles, o en la URL anterior hay múltiples condiciones. Solo tengo una condición, pero tengo 9 valores posibles en ese campo. El usuario selecciona un valor para ese campo en una página web diferente. En esta página, se muestra una lista de la base de datos.

Ahora probé con th: switch statement dentro de la etiqueta td pero luego necesito agregar span o div dentro de td, pero en este caso no funciona, las celdas no están coloreadas. He buscado algo como estructura if / else / if o elif, pero parece que no hay ninguno. Y no puedo repetir esto: si en una sola etiqueta. Espero poder usar th: switch pero, ¿por qué no funciona?

A continuación se muestra solo un cambio de versión más corto, solo algunos de los casos para este ejemplo, pero necesitaré nueve casos en total.

            <tbody>
                <tr th:each = "accountDTO : ${listOfAccounts}"> <td th:text = "${accountDTO.accountDTO}"></td>
                    <td th:text = "${accountDTO.startBalance}"></td> <td th:text = "${accountDTO.currentBalance}"></td>
                    <td th:text = "${accountDTO.state}" th:switch = "${accountDTO.state}"
                    ><span th:case = "${accountDTO.state} == 'OUT_OF_USE'" th:appendstyle = "'background: red'"></span> <span th:case = "${accountDTO.state} == 'DEVICE'" th:appendstyle = "'background: green'"></span>
                    <span th:case = "${accountDTO.state} == 'LOCKED'" th:appendstyle = "'background: blue'"></span> </td> <td th:text = "${accountDTO.employee.employeeName}"></td>
                    <td><a th:href = "@{/editAccount/{id}(id=${accountDTO.idAccount})}" class="btn btn-primary btn-lg" id = "eBtn" th:data = "${accountDTO.idAccount}">Edit</a></td>
                </tr>
            </tbody>

Answer 1

Considere usar la variable como clase para simplificar Thymeleaf y HTML. Luego, puede establecer el formato de manera coherente con su CSS. Su HTML se vería así:

<tbody>
    <tr th:each = "accountDTO : ${listOfAccounts}"> <td th:text = "${accountDTO.accountDTO}"></td>
        <td th:text = "${accountDTO.startBalance}"></td> <td th:text = "${accountDTO.currentBalance}"></td>
        <td th:text = "${accountDTO.state}" th:classappend = "${accountDTO.state}"></td>
        <td th:text = "${accountDTO.employee.employeeName}"></td> <td><a th:href = "@{/editAccount/{id}(id=${accountDTO.idAccount})}" class="btn btn-primary btn-lg" id = "eBtn" th:data = "${accountDTO.idAccount}">Edit</a></td>
    <tr>
</tbody>

Luego mira algo como esto en tu CSS:

td.OUT_OF_USE {
    background: red;
}
td.DEVICE {
    background: green;
}
td.LOCKED {
    background: blue;
}

Posiblemente útil para hacer que una salida similar sea consistente en páginas separadas.