← Каталог
Практикум Spring Boot — Simple CRM — Этап 11 — шаблон `list.html`
Фрагмент из «Практикум Spring Boot — Simple CRM»: Этап 11 — шаблон `list.html`.
<!DOCTYPE html>
<html lang="ru" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Клиенты — Simple CRM</title>
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<header class="header">
<div class="container header-inner">
<a class="logo" th:href="@{/customers}">Simple CRM</a>
<nav class="nav">
<a th:href="@{/customers}" class="active">Клиенты</a>
<a th:href="@{/customers/new}" class="btn btn-primary btn-sm">+ Добавить</a>
</nav>
</div>
</header>
<main class="container main">
<div th:if="${message}" class="alert alert-success" th:text="${message}"></div>
<div class="page-header">
<h1>Клиенты</h1>
<p class="subtitle">Управление базой клиентов</p>
</div>
<div th:if="${#lists.isEmpty(customers)}" class="empty-state">
<p>Пока нет клиентов.</p>
<a th:href="@{/customers/new}" class="btn btn-primary">Добавить первого клиента</a>
</div>
<div th:unless="${#lists.isEmpty(customers)}" class="card">
<table class="table">
<thead>
<tr>
<th>Имя</th>
<th>Email</th>
<th>Телефон</th>
<th>Компания</th>
<th class="actions-col">Действия</th>
</tr>
</thead>
<tbody>
<tr th:each="customer : ${customers}">
<td>
<strong th:text="${customer.name}">Name</strong>
<div class="muted small" th:if="${customer.notes}" th:text="${customer.notes}"></div>
</td>
<td th:text="${customer.email ?: '—'}">email</td>
<td th:text="${customer.phone ?: '—'}">phone</td>
<td th:text="${customer.company ?: '—'}">company</td>
<td class="actions-col">
<a th:href="@{/customers/{id}/edit(id=${customer.id})}" class="btn btn-secondary btn-sm">Изменить</a>
<form th:action="@{/customers/{id}/delete(id=${customer.id})}" method="post" class="inline-form"
onsubmit="return confirm('Удалить клиента?');">
<button type="submit" class="btn btn-danger btn-sm">Удалить</button>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</main>
<footer class="footer">
<div class="container">
REST API: <code>GET /api/customers</code>
</div>
</footer>
</body>
</html><!DOCTYPE html>
<html lang="ru" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Клиенты — Simple CRM</title>
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<header class="header">
<div class="container header-inner">
<a class="logo" th:href="@{/customers}">Simple CRM</a>
<nav class="nav">
<a th:href="@{/customers}" class="active">Клиенты</a>
<a th:href="@{/customers/new}" class="btn btn-primary btn-sm">+ Добавить</a>
</nav>
</div>
</header>
<main class="container main">
<div th:if="${message}" class="alert alert-success" th:text="${message}"></div>
<div class="page-header">
<h1>Клиенты</h1>
<p class="subtitle">Управление базой клиентов</p>
</div>
<div th:if="${#lists.isEmpty(customers)}" class="empty-state">
<p>Пока нет клиентов.</p>
<a th:href="@{/customers/new}" class="btn btn-primary">Добавить первого клиента</a>
</div>
<div th:unless="${#lists.isEmpty(customers)}" class="card">
<table class="table">
<thead>
<tr>
<th>Имя</th>
<th>Email</th>
<th>Телефон</th>
<th>Компания</th>
<th class="actions-col">Действия</th>
</tr>
</thead>
<tbody>
<tr th:each="customer : ${customers}">
<td>
<strong th:text="${customer.name}">Name</strong>
<div class="muted small" th:if="${customer.notes}" th:text="${customer.notes}"></div>
</td>
<td th:text="${customer.email ?: '—'}">email</td>
<td th:text="${customer.phone ?: '—'}">phone</td>
<td th:text="${customer.company ?: '—'}">company</td>
<td class="actions-col">
<a th:href="@{/customers/{id}/edit(id=${customer.id})}" class="btn btn-secondary btn-sm">Изменить</a>
<form th:action="@{/customers/{id}/delete(id=${customer.id})}" method="post" class="inline-form"
onsubmit="return confirm('Удалить клиента?');">
<button type="submit" class="btn btn-danger btn-sm">Удалить</button>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</main>
<footer class="footer">
<div class="container">
REST API: <code>GET /api/customers</code>
</div>
</footer>
</body>
</html>