Skip to content

14 fr implement a dashboard sidebar #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
oleksandr-jr wants to merge 4 commits into
base: spring-boot
Choose a base branch
from
Open

14 fr implement a dashboard sidebar #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d5f9ba0
Draft implementation of the Dashboard
swefd May 30, 2025
22f14be
Merge branch 'spring-boot' into 14-fr-implement-a-dashboard-sidebar
swefd Jun 23, 2025
9be08ce
Trigger Build
swefd Jun 23, 2025
be01f02
Format the code
swefd Jun 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 48 additions & 0 deletions src/main/java/ua/com/javarush/gnew/contactm/controller/web/DashboardController.java
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
package ua.com.javarush.gnew.contactm.controller.web;

import java.util.List;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import ua.com.javarush.gnew.contactm.entity.AppUser;
import ua.com.javarush.gnew.contactm.entity.Contact;
import ua.com.javarush.gnew.contactm.services.ContactService;

@Controller
@RequestMapping("/dashboard")
@RequiredArgsConstructor
public class DashboardController {

private final ContactService contactService;

@GetMapping
public String home(Model model) {
AppUser appUser = new AppUser();
appUser.setUsername("testUser");
appUser.setFirstName("Test");
appUser.setLastName("User");
appUser.setEmail("<EMAIL>");

model.addAttribute("appUser", appUser);

return "dashboard/dashboard";
}

@GetMapping(value = "/contact/list")
public String contactList(Model model) {
AppUser appUser = new AppUser();
appUser.setUsername("testUser");
appUser.setFirstName("Test");
appUser.setLastName("User");
appUser.setEmail("<EMAIL>");
model.addAttribute("appUser", appUser);

List<Contact> all = contactService.findAll();
model.addAttribute("tableName", "All contacts");
model.addAttribute("contacts", all);

return "dashboard/contact-list";
}
}
5 changes: 5 additions & 0 deletions src/main/java/ua/com/javarush/gnew/contactm/services/ContactService.java
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
package ua.com.javarush.gnew.contactm.services;

import java.util.List;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;
import ua.com.javarush.gnew.contactm.DTOs.ContactDTO;
Expand Down Expand Up @@ -29,4 +30,8 @@ public Contact findById(Long id) {
public void delete(Long id) {
contactRepository.deleteById(id);
}

public List<Contact> findAll() {
return contactRepository.findAll();
}
}
53 changes: 53 additions & 0 deletions src/main/resources/templates/dashboard/contact-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="UTF-8">
<title>Contact Manager</title>
<link th:href="@{/main.css}" rel="stylesheet">
</head>

<body>

<div th:replace="~{components/header-component}"></div>

<div class="">

<div
id="view"
class="h-full w-screen flex flex-row"
x-data="{ sidenav: true }"
>
<button
@click="sidenav = true"
class="p-2 border-2 bg-white rounded-md border-gray-200 shadow-lg text-gray-500 focus:bg-teal-500 focus:outline-none focus:text-white absolute top-0 left-0 sm:hidden"
>
<svg
class="w-5 h-5 fill-current"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd"
></path>
</svg>
</button>

<div th:replace="~{dashboard/sidebar :: sideBar( ${ appUser } ) }"></div>
<div th:replace="~{components/table-component :: contactTable( ${contacts} ) }"></div>


</div>


</div>


<div th:replace="~{components/footer-component}"></div>

</body>

</html>
52 changes: 52 additions & 0 deletions src/main/resources/templates/dashboard/dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="UTF-8">
<title>Contact Manager</title>
<link th:href="@{/main.css}" rel="stylesheet">
</head>

<body>

<div th:replace="~{components/header-component}"></div>

<div class="">

<div
id="view"
class="h-full w-screen flex flex-row"
x-data="{ sidenav: true }"
>
<button
@click="sidenav = true"
class="p-2 border-2 bg-white rounded-md border-gray-200 shadow-lg text-gray-500 focus:bg-teal-500 focus:outline-none focus:text-white absolute top-0 left-0 sm:hidden"
>
<svg
class="w-5 h-5 fill-current"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd"
></path>
</svg>
</button>

<div th:replace="~{dashboard/sidebar :: sideBar( ${ appUser } ) }"></div>


</div>


</div>


<div th:replace="~{components/footer-component}"></div>

</body>

</html>
101 changes: 101 additions & 0 deletions src/main/resources/templates/dashboard/sidebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<body>
<div th:fragment="sideBar(appUser)">
<div
id="sidebar"
class="bg-white h-screen md:block shadow-xl px-3 w-30 md:w-60 lg:w-60 overflow-x-hidden transition-transform duration-300 ease-in-out"
x-show="sidenav"
@click.away="sidenav = false"
>
<div class="space-y-6 md:space-y-10 mt-10">
<!-- <h1 class="font-bold text-4xl text-center md:hidden">-->
<!-- D<span class="text-teal-600">.</span>-->
<!-- </h1>-->
<!-- <h1 class="hidden md:block font-bold text-sm md:text-xl text-center">-->
<!-- Dashwind<span class="text-teal-600">.</span>-->
<!-- </h1>-->
<div id="profile" class="space-y-3">
<img
src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
alt="Avatar user"
class="w-10 md:w-16 rounded-full mx-auto"
/>
<div>
<h2
class="font-medium text-xs md:text-sm text-center text-teal-500"
th:text="${appUser.firstName + ' ' + appUser.lastName}"
>
</h2>
<p class="text-xs text-gray-500 text-center">Administrator</p>
</div>
</div>
<!-- <div-->
<!-- class="flex border-2 border-gray-200 rounded-md focus-within:ring-2 ring-teal-500"-->
<!-- >-->
<!-- <input-->
<!-- type="text"-->
<!-- class="w-full rounded-tl-md rounded-bl-md px-2 py-3 text-sm text-gray-600 focus:outline-none"-->
<!-- placeholder="Search"-->
<!-- />-->
<!-- <button-->
<!-- class="rounded-tr-md rounded-br-md px-2 py-3 hidden md:block"-->
<!-- >-->
<!-- <svg-->
<!-- class="w-4 h-4 fill-current"-->
<!-- fill="currentColor"-->
<!-- viewBox="0 0 20 20"-->
<!-- xmlns="http://www.w3.org/2000/svg"-->
<!-- >-->
<!-- <path-->
<!-- fill-rule="evenodd"-->
<!-- d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"-->
<!-- clip-rule="evenodd"-->
<!-- ></path>-->
<!-- </svg>-->
<!-- </button>-->
<!-- </div>-->
<div id="menu" class="flex flex-col space-y-2">

<a
th:href="@{dashboard/contact/list}"
class="text-sm font-medium text-gray-700 py-2 px-2 hover:bg-teal-600 hover:text-white hover:scale-105 rounded-md transition duration-150 ease-in-out"
>
<svg
class="w-6 h-6 fill-current inline-block"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"
></path>
</svg>
<span class="">Contacts</span>
</a>

<a
href=""
class="text-sm font-medium text-gray-700 py-2 px-2 hover:bg-teal-600 hover:text-white hover:scale-105 rounded-md transition duration-150 ease-in-out"
>
<svg
class="w-6 h-6 fill-current inline-block"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd"
></path>
</svg>
<span class="">Contact book</span>
</a>

</div>
</div>
</div>
</div>
</body>
</html>