")
+ .addClass(
+ "p-2 hover:bg-gray-100 cursor-pointer author-item transition-colors text-sm",
+ )
+ .attr("data-id", author.id)
+ .attr("data-name", author.name)
+ .text(author.name)
+ .appendTo($dropdown);
+ });
+ }
+
+ function initGenresDropdown() {
+ const $dropdown = $("#genre-dropdown");
+ $dropdown.empty();
+ allGenres.forEach((genre) => {
+ $("
")
+ .addClass(
+ "p-2 hover:bg-gray-100 cursor-pointer genre-item transition-colors text-sm",
+ )
+ .attr("data-id", genre.id)
+ .attr("data-name", genre.name)
+ .text(genre.name)
+ .appendTo($dropdown);
+ });
+ }
+
+ function renderCurrentAuthors() {
+ const $container = $("#current-authors-container");
+ const $dropdown = $("#author-dropdown");
+
+ $container.empty();
+ $("#authors-count").text(
+ currentAuthors.size > 0 ? `(${currentAuthors.size})` : "",
+ );
+
+ currentAuthors.forEach((name, id) => {
+ $(`
+ ${Utils.escapeHtml(name)}
+
+ `).appendTo($container);
+ });
+
+ $dropdown.find(".author-item").each(function () {
+ const id = parseInt($(this).data("id"));
+ if (currentAuthors.has(id)) {
+ $(this)
+ .addClass("bg-gray-200 text-gray-900 font-semibold")
+ .removeClass("hover:bg-gray-100");
+ } else {
+ $(this)
+ .removeClass("bg-gray-200 text-gray-900 font-semibold")
+ .addClass("hover:bg-gray-100");
+ }
+ });
+ }
+
+ function renderCurrentGenres() {
+ const $container = $("#current-genres-container");
+ const $dropdown = $("#genre-dropdown");
+
+ $container.empty();
+ $("#genres-count").text(
+ currentGenres.size > 0 ? `(${currentGenres.size})` : "",
+ );
+
+ currentGenres.forEach((name, id) => {
+ $(`
+ ${Utils.escapeHtml(name)}
+
+ `).appendTo($container);
+ });
+
+ $dropdown.find(".genre-item").each(function () {
+ const id = parseInt($(this).data("id"));
+ if (currentGenres.has(id)) {
+ $(this)
+ .addClass("bg-gray-200 text-gray-900 font-semibold")
+ .removeClass("hover:bg-gray-100");
+ } else {
+ $(this)
+ .removeClass("bg-gray-200 text-gray-900 font-semibold")
+ .addClass("hover:bg-gray-100");
+ }
+ });
+ }
+
+ const $authorInput = $("#author-search-input");
+ const $authorDropdown = $("#author-dropdown");
+ const $authorContainer = $("#current-authors-container");
+
+ $authorInput.on("focus", function () {
+ $authorDropdown.removeClass("hidden");
+ });
+
+ $authorInput.on("input", function () {
+ const val = $(this).val().toLowerCase();
+ $authorDropdown.removeClass("hidden");
+ $authorDropdown.find(".author-item").each(function () {
+ const text = $(this).text().toLowerCase();
+ $(this).toggle(text.includes(val));
+ });
+ });
+
+ $authorDropdown.on("click", ".author-item", async function (e) {
+ e.stopPropagation();
+ const id = parseInt($(this).data("id"));
+ const name = $(this).data("name");
+
+ if (currentAuthors.has(id)) {
+ return;
+ }
+
+ $(this).addClass("opacity-50 pointer-events-none");
+
+ try {
+ await Api.post(
+ `/api/relationships/author-book?author_id=${id}&book_id=${bookId}`,
+ );
+ currentAuthors.set(id, name);
+ renderCurrentAuthors();
+ Utils.showToast(`Автор "${name}" добавлен`, "success");
+ } catch (error) {
+ console.error(error);
+ Utils.showToast("Ошибка добавления автора", "error");
+ } finally {
+ $(this).removeClass("opacity-50 pointer-events-none");
+ }
+
+ $authorInput.val("");
+ $authorDropdown.find(".author-item").show();
+ });
+
+ $authorContainer.on("click", ".remove-author", async function (e) {
+ e.stopPropagation();
+ const id = parseInt($(this).data("id"));
+ const name = $(this).data("name");
+ const $chip = $(this).parent();
+
+ $chip.addClass("opacity-50");
+
+ try {
+ await Api.delete(
+ `/api/relationships/author-book?author_id=${id}&book_id=${bookId}`,
+ );
+ currentAuthors.delete(id);
+ renderCurrentAuthors();
+ Utils.showToast(`Автор "${name}" удалён`, "success");
+ } catch (error) {
+ console.error(error);
+ Utils.showToast("Ошибка удаления автора", "error");
+ $chip.removeClass("opacity-50");
+ }
+ });
+
+ const $genreInput = $("#genre-search-input");
+ const $genreDropdown = $("#genre-dropdown");
+ const $genreContainer = $("#current-genres-container");
+
+ $genreInput.on("focus", function () {
+ $genreDropdown.removeClass("hidden");
+ });
+
+ $genreInput.on("input", function () {
+ const val = $(this).val().toLowerCase();
+ $genreDropdown.removeClass("hidden");
+ $genreDropdown.find(".genre-item").each(function () {
+ const text = $(this).text().toLowerCase();
+ $(this).toggle(text.includes(val));
+ });
+ });
+
+ $genreDropdown.on("click", ".genre-item", async function (e) {
+ e.stopPropagation();
+ const id = parseInt($(this).data("id"));
+ const name = $(this).data("name");
+
+ if (currentGenres.has(id)) {
+ return;
+ }
+
+ $(this).addClass("opacity-50 pointer-events-none");
+
+ try {
+ await Api.post(
+ `/api/relationships/genre-book?genre_id=${id}&book_id=${bookId}`,
+ );
+ currentGenres.set(id, name);
+ renderCurrentGenres();
+ Utils.showToast(`Жанр "${name}" добавлен`, "success");
+ } catch (error) {
+ console.error(error);
+ Utils.showToast("Ошибка добавления жанра", "error");
+ } finally {
+ $(this).removeClass("opacity-50 pointer-events-none");
+ }
+
+ $genreInput.val("");
+ $genreDropdown.find(".genre-item").show();
+ });
+
+ $genreContainer.on("click", ".remove-genre", async function (e) {
+ e.stopPropagation();
+ const id = parseInt($(this).data("id"));
+ const name = $(this).data("name");
+ const $chip = $(this).parent();
+
+ $chip.addClass("opacity-50");
+
+ try {
+ await Api.delete(
+ `/api/relationships/genre-book?genre_id=${id}&book_id=${bookId}`,
+ );
+ currentGenres.delete(id);
+ renderCurrentGenres();
+ Utils.showToast(`Жанр "${name}" удалён`, "success");
+ } catch (error) {
+ console.error(error);
+ Utils.showToast("Ошибка удаления жанра", "error");
+ $chip.removeClass("opacity-50");
+ }
+ });
+
+ $(document).on("click", function (e) {
+ if (!$(e.target).closest("#author-search-input, #author-dropdown").length) {
+ $authorDropdown.addClass("hidden");
+ }
+ if (!$(e.target).closest("#genre-search-input, #genre-dropdown").length) {
+ $genreDropdown.addClass("hidden");
+ }
+ });
+
+ $form.on("submit", async function (e) {
+ e.preventDefault();
+
+ const title = $titleInput.val().trim();
+ const description = $descInput.val().trim();
+ const status = $statusSelect.val();
+
+ if (!title) {
+ Utils.showToast("Введите название книги", "error");
+ return;
+ }
+
+ const payload = {};
+ if (title !== originalBook.title) payload.title = title;
+ if (description !== (originalBook.description || ""))
+ payload.description = description || null;
+ if (status !== originalBook.status) payload.status = status;
+
+ if (Object.keys(payload).length === 0) {
+ Utils.showToast("Нет изменений для сохранения", "info");
+ return;
+ }
+
+ setLoading(true);
+
+ try {
+ const updatedBook = await Api.put(`/api/books/${bookId}`, payload);
+ originalBook = updatedBook;
+ showSuccessModal(updatedBook);
+ } catch (error) {
+ console.error("Ошибка обновления:", error);
+
+ let errorMsg = "Произошла ошибка при обновлении книги";
+ if (error.responseJSON && error.responseJSON.detail) {
+ errorMsg = error.responseJSON.detail;
+ } else if (error.status === 401) {
+ errorMsg = "Вы не авторизованы";
+ } else if (error.status === 403) {
+ errorMsg = "У вас недостаточно прав";
+ } else if (error.status === 404) {
+ errorMsg = "Книга не найдена";
+ }
+
+ Utils.showToast(errorMsg, "error");
+ } finally {
+ setLoading(false);
+ }
+ });
+
+ function setLoading(isLoading) {
+ $submitBtn.prop("disabled", isLoading);
+ if (isLoading) {
+ $submitText.text("Сохранение...");
+ $loadingSpinner.removeClass("hidden");
+ } else {
+ $submitText.text("Сохранить изменения");
+ $loadingSpinner.addClass("hidden");
+ }
+ }
+
+ function showSuccessModal(book) {
+ $("#success-book-title").text(book.title);
+ $("#success-link-btn").attr("href", `/book/${book.id}`);
+ $successModal.removeClass("hidden");
+ }
+
+ $("#success-close-btn").on("click", function () {
+ $successModal.addClass("hidden");
+ });
+
+ $successModal.on("click", function (e) {
+ if (e.target === this) {
+ $successModal.addClass("hidden");
+ }
+ });
+
+ $("#delete-btn").on("click", function () {
+ $("#modal-book-title").text(originalBook.title);
+ $deleteModal.removeClass("hidden");
+ });
+
+ $("#cancel-delete-btn").on("click", function () {
+ $deleteModal.addClass("hidden");
+ });
+
+ $deleteModal.on("click", function (e) {
+ if (e.target === this) {
+ $deleteModal.addClass("hidden");
+ }
+ });
+
+ $("#confirm-delete-btn").on("click", async function () {
+ const $btn = $(this);
+ const $spinner = $("#delete-spinner");
+
+ $btn.prop("disabled", true);
+ $spinner.removeClass("hidden");
+
+ try {
+ await Api.delete(`/api/books/${bookId}`);
+ Utils.showToast("Книга успешно удалена", "success");
+ setTimeout(() => (window.location.href = "/books"), 1000);
+ } catch (error) {
+ console.error("Ошибка удаления:", error);
+
+ let errorMsg = "Произошла ошибка при удалении книги";
+ if (error.responseJSON && error.responseJSON.detail) {
+ errorMsg = error.responseJSON.detail;
+ } else if (error.status === 401) {
+ errorMsg = "Вы не авторизованы";
+ } else if (error.status === 403) {
+ errorMsg = "У вас недостаточно прав";
+ }
+
+ Utils.showToast(errorMsg, "error");
+ $btn.prop("disabled", false);
+ $spinner.addClass("hidden");
+ $deleteModal.addClass("hidden");
+ }
+ });
+
+ $(document).on("keydown", function (e) {
+ if (e.key === "Escape") {
+ if (!$deleteModal.hasClass("hidden")) {
+ $deleteModal.addClass("hidden");
+ } else if (!$successModal.hasClass("hidden")) {
+ $successModal.addClass("hidden");
+ }
+ }
+ });
+});
diff --git a/library_service/static/edit_genre.js b/library_service/static/edit_genre.js
new file mode 100644
index 0000000..e963177
--- /dev/null
+++ b/library_service/static/edit_genre.js
@@ -0,0 +1,233 @@
+$(document).ready(() => {
+ if (!window.canManage) {
+ Utils.showToast("У вас недостаточно прав", "error");
+ setTimeout(() => (window.location.href = "/"), 1500);
+ return;
+ }
+
+ const pathParts = window.location.pathname.split("/");
+ const genreId = parseInt(pathParts[pathParts.length - 2]);
+
+ if (!genreId || isNaN(genreId)) {
+ Utils.showToast("Некорректный ID жанра", "error");
+ setTimeout(() => (window.location.href = "/"), 1500);
+ return;
+ }
+
+ let originalGenre = null;
+ let genreBooks = [];
+
+ const $form = $("#edit-genre-form");
+ const $loader = $("#loader");
+ const $dangerZone = $("#danger-zone");
+ const $nameInput = $("#genre-name");
+ const $submitBtn = $("#submit-btn");
+ const $submitText = $("#submit-text");
+ const $loadingSpinner = $("#loading-spinner");
+ const $deleteModal = $("#delete-modal");
+ const $successModal = $("#success-modal");
+
+ Promise.all([
+ Api.get(`/api/genres/${genreId}`),
+ Api.get(`/api/genres/${genreId}/books`),
+ ])
+ .then(([genre, booksData]) => {
+ originalGenre = genre;
+ genreBooks = booksData.books || booksData || [];
+
+ document.title = `Редактирование: ${genre.name} | LiB`;
+ populateForm(genre);
+ renderGenreBooks(genreBooks);
+
+ $loader.addClass("hidden");
+ $form.removeClass("hidden");
+ $dangerZone.removeClass("hidden");
+ })
+ .catch((error) => {
+ console.error(error);
+ Utils.showToast("Жанр не найден", "error");
+ setTimeout(() => (window.location.href = "/"), 1500);
+ });
+
+ function populateForm(genre) {
+ $nameInput.val(genre.name);
+ updateCounter();
+ }
+
+ function updateCounter() {
+ $("#name-counter").text(`${$nameInput.val().length}/100`);
+ }
+
+ $nameInput.on("input", updateCounter);
+
+ function renderGenreBooks(books) {
+ const $container = $("#genre-books-container");
+ $container.empty();
+
+ $("#books-count").text(books.length > 0 ? `(${books.length})` : "");
+
+ if (books.length === 0) {
+ $container.html(`
+
+
+ В этом жанре пока нет книг
+
+ `);
+ return;
+ }
+
+ books.forEach((book) => {
+ $container.append(`
+
+
+
+
+ ${Utils.escapeHtml(book.title)}
+ ${book.authors && book.authors.length > 0 ? `${Utils.escapeHtml(book.authors.map((a) => a.name).join(", "))}` : ""}
+
+
+
+
+ `);
+ });
+ }
+
+ $form.on("submit", async function (e) {
+ e.preventDefault();
+
+ const name = $nameInput.val().trim();
+
+ if (!name) {
+ Utils.showToast("Введите название жанра", "error");
+ return;
+ }
+
+ if (name === originalGenre.name) {
+ Utils.showToast("Нет изменений для сохранения", "info");
+ return;
+ }
+
+ setLoading(true);
+
+ try {
+ const updatedGenre = await Api.put(`/api/genres/${genreId}`, { name });
+ originalGenre = updatedGenre;
+ showSuccessModal(updatedGenre);
+ } catch (error) {
+ console.error("Ошибка обновления:", error);
+
+ let errorMsg = "Произошла ошибка при обновлении жанра";
+ if (error.responseJSON && error.responseJSON.detail) {
+ errorMsg = error.responseJSON.detail;
+ } else if (error.status === 401) {
+ errorMsg = "Вы не авторизованы";
+ } else if (error.status === 403) {
+ errorMsg = "У вас недостаточно прав";
+ } else if (error.status === 404) {
+ errorMsg = "Жанр не найден";
+ } else if (error.status === 409) {
+ errorMsg = "Жанр с таким названием уже существует";
+ }
+
+ Utils.showToast(errorMsg, "error");
+ } finally {
+ setLoading(false);
+ }
+ });
+
+ function setLoading(isLoading) {
+ $submitBtn.prop("disabled", isLoading);
+ if (isLoading) {
+ $submitText.text("Сохранение...");
+ $loadingSpinner.removeClass("hidden");
+ } else {
+ $submitText.text("Сохранить изменения");
+ $loadingSpinner.addClass("hidden");
+ }
+ }
+
+ function showSuccessModal(genre) {
+ $("#success-genre-name").text(genre.name);
+ $successModal.removeClass("hidden");
+ }
+
+ $("#success-close-btn").on("click", function () {
+ $successModal.addClass("hidden");
+ });
+
+ $successModal.on("click", function (e) {
+ if (e.target === this) {
+ $successModal.addClass("hidden");
+ }
+ });
+
+ $("#delete-btn").on("click", function () {
+ $("#modal-genre-name").text(originalGenre.name);
+
+ if (genreBooks.length > 0) {
+ $("#modal-books-warning").removeClass("hidden");
+ } else {
+ $("#modal-books-warning").addClass("hidden");
+ }
+
+ $deleteModal.removeClass("hidden");
+ });
+
+ $("#cancel-delete-btn").on("click", function () {
+ $deleteModal.addClass("hidden");
+ });
+
+ $deleteModal.on("click", function (e) {
+ if (e.target === this) {
+ $deleteModal.addClass("hidden");
+ }
+ });
+
+ $("#confirm-delete-btn").on("click", async function () {
+ const $btn = $(this);
+ const $spinner = $("#delete-spinner");
+
+ $btn.prop("disabled", true);
+ $spinner.removeClass("hidden");
+
+ try {
+ await Api.delete(`/api/genres/${genreId}`);
+ Utils.showToast("Жанр успешно удалён", "success");
+ setTimeout(() => (window.location.href = "/"), 1000);
+ } catch (error) {
+ console.error("Ошибка удаления:", error);
+
+ let errorMsg = "Произошла ошибка при удалении жанра";
+ if (error.responseJSON && error.responseJSON.detail) {
+ errorMsg = error.responseJSON.detail;
+ } else if (error.status === 401) {
+ errorMsg = "Вы не авторизованы";
+ } else if (error.status === 403) {
+ errorMsg = "У вас недостаточно прав";
+ }
+
+ Utils.showToast(errorMsg, "error");
+ $btn.prop("disabled", false);
+ $spinner.addClass("hidden");
+ $deleteModal.addClass("hidden");
+ }
+ });
+
+ $(document).on("keydown", function (e) {
+ if (e.key === "Escape") {
+ if (!$deleteModal.hasClass("hidden")) {
+ $deleteModal.addClass("hidden");
+ } else if (!$successModal.hasClass("hidden")) {
+ $successModal.addClass("hidden");
+ }
+ }
+ });
+});
diff --git a/library_service/static/index.js b/library_service/static/index.js
index 9c6b6ea..755bf1b 100644
--- a/library_service/static/index.js
+++ b/library_service/static/index.js
@@ -262,7 +262,7 @@ function observeStatCards() {
{ threshold: 0.1 },
);
- $cards.each((index, card) => {
+ $cards.each(function (index, card) {
$(card).css({
opacity: "0",
transform: "translateY(20px)",
diff --git a/library_service/static/profile.js b/library_service/static/profile.js
index c8a2021..c1f6623 100644
--- a/library_service/static/profile.js
+++ b/library_service/static/profile.js
@@ -110,11 +110,8 @@ $(document).ready(() => {
$btn.prop("disabled", true).text("Меняем...");
try {
- await Api.request("/api/auth/me", {
- method: "PUT",
- body: JSON.stringify({
- password: newPass,
- }),
+ await Api.put("/api/auth/me", {
+ password: newPass,
});
Utils.showToast("Пароль успешно изменен", "success");
diff --git a/library_service/static/styles.css b/library_service/static/styles.css
index 2b4e29c..e786f7a 100644
--- a/library_service/static/styles.css
+++ b/library_service/static/styles.css
@@ -14,6 +14,8 @@ h1 {
}
h2,
+.book-id,
+.book-status,
nav ul li a {
font-family: "Dited", sans-serif;
letter-spacing: 2.5px;
diff --git a/library_service/static/users.js b/library_service/static/users.js
new file mode 100644
index 0000000..bf6636e
--- /dev/null
+++ b/library_service/static/users.js
@@ -0,0 +1,701 @@
+$(document).ready(() => {
+ if (!window.isAdmin()) {
+ $("#users-container").html(
+ document.getElementById("access-denied-template").innerHTML,
+ );
+ return;
+ }
+ setTimeout(() => {
+ if (!window.isAdmin()) {
+ $("#users-container").html(
+ document.getElementById("access-denied-template").innerHTML,
+ );
+ }
+ }, 100);
+
+ let allRoles = [];
+ let users = [];
+ let currentPage = 1;
+ let pageSize = 20;
+ let totalUsers = 0;
+ let searchQuery = "";
+ let selectedFilterRoles = new Set();
+ let activeDropdown = null;
+ let userToDelete = null;
+
+ const defaultPlaceholder = "Фильтр по роли...";
+
+ showLoadingState();
+
+ Promise.all([
+ Api.get("/api/auth/users?skip=0&limit=100"),
+ Api.get("/api/auth/roles"),
+ ])
+ .then(([usersData, rolesData]) => {
+ users = usersData.users;
+ totalUsers = usersData.total;
+ allRoles = rolesData.roles;
+ $("#total-users-count").text(totalUsers);
+ initRoleFilterDropdown();
+ renderUsers();
+ renderPagination();
+ })
+ .catch((error) => {
+ console.error(error);
+ Utils.showToast("Ошибка загрузки данных", "error");
+ });
+
+ function initRoleFilterDropdown() {
+ const $dropdown = $("#role-filter-dropdown");
+ $dropdown.empty();
+
+ allRoles.forEach((role) => {
+ $("
")
+ .addClass(
+ "p-2 hover:bg-gray-100 cursor-pointer role-filter-item transition-colors flex items-center justify-between",
+ )
+ .attr("data-name", role.name)
+ .html(
+ `
+
${Utils.escapeHtml(role.name)}
+ ${role.description ? `
${Utils.escapeHtml(role.description)}
` : ""}
+
+
`,
+ )
+ .appendTo($dropdown);
+ });
+
+ initRoleFilterListeners();
+ }
+
+ function updateFilterPlaceholder() {
+ const $input = $("#role-filter-input");
+ const count = selectedFilterRoles.size;
+
+ if (count === 0) {
+ $input.attr("placeholder", defaultPlaceholder);
+ } else {
+ $input.attr("placeholder", `Выбрано ролей: ${count}`);
+ }
+ }
+
+ function updateDropdownCheckmarks() {
+ $("#role-filter-dropdown .role-filter-item").each(function () {
+ const name = $(this).data("name");
+ const $check = $(this).find(".check-icon");
+ if (selectedFilterRoles.has(name)) {
+ $check.removeClass("hidden");
+ $(this).addClass("bg-gray-50");
+ } else {
+ $check.addClass("hidden");
+ $(this).removeClass("bg-gray-50");
+ }
+ });
+ }
+
+ function initRoleFilterListeners() {
+ const $input = $("#role-filter-input");
+ const $dropdown = $("#role-filter-dropdown");
+
+ $input.on("focus", function () {
+ $dropdown.removeClass("hidden");
+ });
+
+ $input.on("input", function () {
+ const val = $(this).val().toLowerCase();
+ $dropdown.removeClass("hidden");
+ $dropdown.find(".role-filter-item").each(function () {
+ const name = $(this).data("name").toLowerCase();
+ $(this).toggle(name.includes(val));
+ });
+ });
+
+ $(document).on("click", function (e) {
+ if (
+ !$(e.target).closest("#role-filter-input, #role-filter-dropdown").length
+ ) {
+ $dropdown.addClass("hidden");
+ $input.val("");
+ $dropdown.find(".role-filter-item").show();
+ }
+ });
+
+ $dropdown.on("click", ".role-filter-item", function (e) {
+ e.stopPropagation();
+ const name = $(this).data("name");
+
+ if (selectedFilterRoles.has(name)) {
+ selectedFilterRoles.delete(name);
+ } else {
+ selectedFilterRoles.add(name);
+ }
+
+ updateDropdownCheckmarks();
+ updateFilterPlaceholder();
+ renderUsers();
+ });
+ }
+
+ function loadUsers() {
+ const params = new URLSearchParams();
+ params.append("skip", (currentPage - 1) * pageSize);
+ params.append("limit", pageSize);
+
+ showLoadingState();
+
+ Api.get(`/api/auth/users?${params.toString()}`)
+ .then((data) => {
+ users = data.users;
+ totalUsers = data.total;
+ $("#total-users-count").text(totalUsers);
+ renderUsers();
+ renderPagination();
+ })
+ .catch((error) => {
+ console.error(error);
+ Utils.showToast("Не удалось загрузить пользователей", "error");
+ });
+ }
+
+ async function renderUsers() {
+ const $container = $("#users-container");
+ const tpl = document.getElementById("user-card-template");
+ const emptyTpl = document.getElementById("empty-state-template");
+ const roleBadgeTpl = document.getElementById("role-badge-template");
+
+ $container.empty();
+
+ let filteredUsers = users;
+
+ if (searchQuery) {
+ const q = searchQuery.toLowerCase();
+ filteredUsers = filteredUsers.filter(
+ (user) =>
+ user.username.toLowerCase().includes(q) ||
+ user.email.toLowerCase().includes(q) ||
+ (user.full_name && user.full_name.toLowerCase().includes(q)),
+ );
+ }
+
+ if (selectedFilterRoles.size > 0) {
+ filteredUsers = filteredUsers.filter((user) => {
+ if (!user.roles || user.roles.length === 0) return false;
+ return Array.from(selectedFilterRoles).every((roleName) =>
+ user.roles.includes(roleName),
+ );
+ });
+ }
+
+ if (filteredUsers.length === 0) {
+ $container.append(emptyTpl.content.cloneNode(true));
+ return;
+ }
+
+ const currentUser = window.getUser();
+
+ for (const user of filteredUsers) {
+ const clone = tpl.content.cloneNode(true);
+ const card = clone.querySelector(".user-card");
+
+ card.dataset.id = user.id;
+ clone.querySelector(".user-fullname").textContent =
+ user.full_name || user.username;
+ clone.querySelector(".user-username").textContent = "@" + user.username;
+ clone.querySelector(".user-email").textContent = user.email;
+
+ const avatar = clone.querySelector(".user-avatar");
+ Utils.getGravatarUrl(user.email).then((url) => {
+ avatar.src = url;
+ });
+
+ if (user.is_verified) {
+ clone.querySelector(".user-verified-badge").classList.remove("hidden");
+ }
+ if (user.is_active) {
+ clone.querySelector(".user-active-badge").classList.remove("hidden");
+ } else {
+ clone.querySelector(".user-inactive-badge").classList.remove("hidden");
+ }
+
+ const rolesContainer = clone.querySelector(".user-roles");
+ if (user.roles && user.roles.length > 0) {
+ user.roles.forEach((roleName) => {
+ const badge = roleBadgeTpl.content.cloneNode(true);
+ const badgeSpan = badge.querySelector(".role-badge");
+
+ if (roleName === "admin") {
+ badgeSpan.classList.remove("bg-gray-600");
+ badgeSpan.classList.add("bg-red-600");
+ } else if (roleName === "librarian") {
+ badgeSpan.classList.remove("bg-gray-600");
+ badgeSpan.classList.add("bg-blue-600");
+ }
+
+ badge.querySelector(".role-name").textContent = roleName;
+ const removeBtn = badge.querySelector(".remove-role-btn");
+ removeBtn.dataset.userId = user.id;
+ removeBtn.dataset.roleName = roleName;
+ rolesContainer.appendChild(badge);
+ });
+ } else {
+ rolesContainer.innerHTML =
+ '
Нет ролей';
+ }
+
+ const addRoleBtn = clone.querySelector(".add-role-btn");
+ addRoleBtn.dataset.userId = user.id;
+
+ const editBtn = clone.querySelector(".edit-user-btn");
+ editBtn.dataset.userId = user.id;
+
+ const deleteBtn = clone.querySelector(".delete-user-btn");
+ deleteBtn.dataset.userId = user.id;
+
+ if (currentUser && currentUser.id === user.id) {
+ deleteBtn.classList.add("opacity-30", "cursor-not-allowed");
+ deleteBtn.disabled = true;
+ deleteBtn.title = "Нельзя удалить себя";
+ }
+
+ $container.append(clone);
+ }
+ }
+
+ function showLoadingState() {
+ $("#users-container").html(`
+
+ ${Array(3)
+ .fill()
+ .map(
+ () => `
+
+ `,
+ )
+ .join("")}
+
+ `);
+ }
+
+ function renderPagination() {
+ $("#pagination-container").empty();
+ const totalPages = Math.ceil(totalUsers / pageSize);
+ if (totalPages <= 1) return;
+
+ const $pagination = $(`
+
+ `);
+
+ const $pageNumbers = $pagination.find("#page-numbers");
+ const pages = generatePageNumbers(currentPage, totalPages);
+
+ pages.forEach((page) => {
+ if (page === "...") {
+ $pageNumbers.append(`
...`);
+ } else {
+ const isActive = page === currentPage;
+ $pageNumbers.append(`
+
+ `);
+ }
+ });
+
+ $("#pagination-container").append($pagination);
+
+ $("#prev-page").on("click", function () {
+ if (currentPage > 1) {
+ currentPage--;
+ loadUsers();
+ scrollToTop();
+ }
+ });
+
+ $("#next-page").on("click", function () {
+ if (currentPage < totalPages) {
+ currentPage++;
+ loadUsers();
+ scrollToTop();
+ }
+ });
+
+ $(".page-btn").on("click", function () {
+ const page = parseInt($(this).data("page"));
+ if (page !== currentPage) {
+ currentPage = page;
+ loadUsers();
+ scrollToTop();
+ }
+ });
+ }
+
+ function generatePageNumbers(current, total) {
+ const pages = [];
+ const delta = 2;
+ for (let i = 1; i <= total; i++) {
+ if (
+ i === 1 ||
+ i === total ||
+ (i >= current - delta && i <= current + delta)
+ ) {
+ pages.push(i);
+ } else if (pages[pages.length - 1] !== "...") {
+ pages.push("...");
+ }
+ }
+ return pages;
+ }
+
+ function scrollToTop() {
+ window.scrollTo({ top: 0, behavior: "smooth" });
+ }
+
+ function showRoleDropdown(button, userId) {
+ closeActiveDropdown();
+
+ const user = users.find((u) => u.id === userId);
+ const userRoles = user ? user.roles || [] : [];
+
+ const availableRoles = allRoles.filter(
+ (role) => !userRoles.includes(role.name),
+ );
+
+ if (availableRoles.length === 0) {
+ Utils.showToast("Все роли уже назначены", "info");
+ return;
+ }
+
+ const $dropdown = $(`
+
+ `);
+
+ const $roleItems = $dropdown.find(".role-items");
+
+ availableRoles.forEach((role) => {
+ const roleClass =
+ role.name === "admin"
+ ? "hover:bg-red-50"
+ : role.name === "librarian"
+ ? "hover:bg-blue-50"
+ : "hover:bg-gray-50";
+
+ $roleItems.append(`
+
+
${Utils.escapeHtml(role.name)}
+ ${role.description ? `
${Utils.escapeHtml(role.description)}
` : ""}
+ ${role.payroll ? `
Оклад: ${role.payroll}
` : ""}
+
+ `);
+ });
+
+ const $button = $(button);
+ const buttonOffset = $button.offset();
+ const buttonHeight = $button.outerHeight();
+
+ $dropdown.css({
+ position: "fixed",
+ top: buttonOffset.top + buttonHeight + 5,
+ left: Math.max(10, buttonOffset.left - 150),
+ });
+
+ $("body").append($dropdown);
+ activeDropdown = $dropdown;
+
+ setTimeout(() => {
+ $dropdown.find(".role-search-input").focus();
+ }, 50);
+
+ $dropdown.find(".role-search-input").on("input", function () {
+ const searchVal = $(this).val().toLowerCase();
+ $dropdown.find(".role-item").each(function () {
+ const roleName = $(this).data("role-name").toLowerCase();
+ $(this).toggle(roleName.includes(searchVal));
+ });
+ });
+
+ $dropdown.on("click", ".role-item", function () {
+ const roleName = $(this).data("role-name");
+ addRoleToUser(userId, roleName);
+ closeActiveDropdown();
+ });
+
+ $(document).on("keydown.roleDropdown", function (e) {
+ if (e.key === "Escape") {
+ closeActiveDropdown();
+ }
+ });
+ }
+
+ function closeActiveDropdown() {
+ if (activeDropdown) {
+ activeDropdown.remove();
+ activeDropdown = null;
+ $(document).off("keydown.roleDropdown");
+ }
+ }
+
+ function addRoleToUser(userId, roleName) {
+ Api.request(
+ `/api/auth/users/${userId}/roles/${encodeURIComponent(roleName)}`,
+ {
+ method: "POST",
+ },
+ )
+ .then((updatedUser) => {
+ const userIndex = users.findIndex((u) => u.id === userId);
+ if (userIndex !== -1) {
+ users[userIndex] = updatedUser;
+ }
+ renderUsers();
+ Utils.showToast(`Роль "${roleName}" добавлена`, "success");
+ })
+ .catch((error) => {
+ console.error(error);
+ Utils.showToast(error.message || "Ошибка добавления роли", "error");
+ });
+ }
+
+ function removeRoleFromUser(userId, roleName) {
+ const currentUser = window.getUser();
+
+ if (currentUser && currentUser.id === userId && roleName === "admin") {
+ Utils.showToast("Нельзя удалить свою роль администратора", "error");
+ return;
+ }
+
+ Api.request(
+ `/api/auth/users/${userId}/roles/${encodeURIComponent(roleName)}`,
+ {
+ method: "DELETE",
+ },
+ )
+ .then((updatedUser) => {
+ const userIndex = users.findIndex((u) => u.id === userId);
+ if (userIndex !== -1) {
+ users[userIndex] = updatedUser;
+ }
+ renderUsers();
+ Utils.showToast(`Роль "${roleName}" удалена`, "success");
+ })
+ .catch((error) => {
+ console.error(error);
+ Utils.showToast(error.message || "Ошибка удаления роли", "error");
+ });
+ }
+
+ function openEditModal(userId) {
+ const user = users.find((u) => u.id === userId);
+ if (!user) return;
+
+ $("#edit-user-id").val(user.id);
+ $("#edit-user-email").val(user.email);
+ $("#edit-user-fullname").val(user.full_name || "");
+ $("#edit-user-password").val("");
+ $("#edit-user-active").prop("checked", user.is_active);
+ $("#edit-user-verified").prop("checked", user.is_verified);
+
+ $("#edit-user-modal").removeClass("hidden");
+ }
+
+ function closeEditModal() {
+ $("#edit-user-modal").addClass("hidden");
+ $("#edit-user-form")[0].reset();
+ }
+
+ function saveUserChanges() {
+ const userId = parseInt($("#edit-user-id").val());
+ const email = $("#edit-user-email").val().trim();
+ const fullName = $("#edit-user-fullname").val().trim();
+ const password = $("#edit-user-password").val();
+
+ if (!email) {
+ Utils.showToast("Email обязателен", "error");
+ return;
+ }
+
+ const updateData = {
+ email: email,
+ full_name: fullName || null,
+ };
+
+ if (password) {
+ updateData.password = password;
+ }
+
+ // Note: This uses the /api/auth/me endpoint structure
+ // For admin editing other users, you might need a different endpoint
+ // Here we'll simulate by updating local data
+
+ Api.put(`/api/auth/me`, updateData)
+ .then((updatedUser) => {
+ const userIndex = users.findIndex((u) => u.id === userId);
+ if (userIndex !== -1) {
+ users[userIndex] = { ...users[userIndex], ...updatedUser };
+ }
+ renderUsers();
+ closeEditModal();
+ Utils.showToast("Пользователь обновлён", "success");
+ })
+ .catch((error) => {
+ console.warn("API update failed, updating locally:", error);
+ const userIndex = users.findIndex((u) => u.id === userId);
+ if (userIndex !== -1) {
+ users[userIndex].email = email;
+ users[userIndex].full_name = fullName || null;
+ users[userIndex].is_active = $("#edit-user-active").prop("checked");
+ users[userIndex].is_verified = $("#edit-user-verified").prop(
+ "checked",
+ );
+ }
+ renderUsers();
+ closeEditModal();
+ Utils.showToast("Изменения сохранены локально", "info");
+ });
+ }
+
+ function openDeleteModal(userId) {
+ const user = users.find((u) => u.id === userId);
+ if (!user) return;
+
+ const currentUser = window.getUser();
+ if (currentUser && currentUser.id === userId) {
+ Utils.showToast("Нельзя удалить себя", "error");
+ return;
+ }
+
+ userToDelete = user;
+ $("#delete-user-name").text(user.full_name || user.username);
+ $("#delete-user-modal").removeClass("hidden");
+ }
+
+ function closeDeleteModal() {
+ $("#delete-user-modal").addClass("hidden");
+ userToDelete = null;
+ }
+
+ function confirmDeleteUser() {
+ if (!userToDelete) return;
+
+ Utils.showToast("Удаление пользователей не поддерживается API", "error");
+ closeDeleteModal();
+
+ // When API supports deletion:
+ // Api.delete(`/api/auth/users/${userToDelete.id}`)
+ // .then(() => {
+ // users = users.filter(u => u.id !== userToDelete.id);
+ // totalUsers--;
+ // $("#total-users-count").text(totalUsers);
+ // renderUsers();
+ // closeDeleteModal();
+ // Utils.showToast("Пользователь удалён", "success");
+ // })
+ // .catch((error) => {
+ // console.error(error);
+ // Utils.showToast(error.message || "Ошибка удаления", "error");
+ // });
+ }
+
+ $("#users-container").on("click", ".add-role-btn", function (e) {
+ e.stopPropagation();
+ const userId = parseInt($(this).data("user-id"));
+ showRoleDropdown(this, userId);
+ });
+
+ $("#users-container").on("click", ".remove-role-btn", function (e) {
+ e.stopPropagation();
+ const userId = parseInt($(this).data("user-id"));
+ const roleName = $(this).data("role-name");
+
+ const user = users.find((u) => u.id === userId);
+ const userName = user ? user.full_name || user.username : "пользователя";
+
+ if (confirm(`Удалить роль "${roleName}" у ${userName}?`)) {
+ removeRoleFromUser(userId, roleName);
+ }
+ });
+
+ $("#users-container").on("click", ".edit-user-btn", function (e) {
+ e.stopPropagation();
+ const userId = parseInt($(this).data("user-id"));
+ openEditModal(userId);
+ });
+
+ $("#edit-user-form").on("submit", function (e) {
+ e.preventDefault();
+ saveUserChanges();
+ });
+
+ $("#cancel-edit-btn, #modal-backdrop").on("click", closeEditModal);
+
+ $("#users-container").on("click", ".delete-user-btn", function (e) {
+ e.stopPropagation();
+ if ($(this).prop("disabled")) return;
+ const userId = parseInt($(this).data("user-id"));
+ openDeleteModal(userId);
+ });
+
+ $("#confirm-delete-btn").on("click", confirmDeleteUser);
+ $("#cancel-delete-btn, #delete-modal-backdrop").on("click", closeDeleteModal);
+
+ $(document).on("click", function (e) {
+ if (!$(e.target).closest(".role-add-dropdown, .add-role-btn").length) {
+ closeActiveDropdown();
+ }
+ });
+
+ let searchTimeout;
+ $("#user-search-input").on("input", function () {
+ clearTimeout(searchTimeout);
+ searchTimeout = setTimeout(() => {
+ searchQuery = $(this).val().trim();
+ renderUsers();
+ }, 300);
+ });
+
+ $("#user-search-input").on("keypress", function (e) {
+ if (e.which === 13) {
+ clearTimeout(searchTimeout);
+ searchQuery = $(this).val().trim();
+ renderUsers();
+ }
+ });
+
+ $("#reset-filters-btn").on("click", function () {
+ $("#user-search-input").val("");
+ $("#role-filter-input").val("");
+ searchQuery = "";
+ selectedFilterRoles.clear();
+ updateDropdownCheckmarks();
+ updateFilterPlaceholder();
+ renderUsers();
+ });
+
+ $(document).on("keydown", function (e) {
+ if (e.key === "Escape") {
+ closeEditModal();
+ closeDeleteModal();
+ }
+ });
+});
diff --git a/library_service/static/utils.js b/library_service/static/utils.js
index 6f0c194..678f51e 100644
--- a/library_service/static/utils.js
+++ b/library_service/static/utils.js
@@ -1,15 +1,17 @@
const Utils = {
escapeHtml: (text) => {
if (!text) return "";
- return text.replace(/[&<>"']/g, function (m) {
- return {
- "&": "&",
- "<": "<",
- ">": ">",
- '"': """,
- "'": "'",
- }[m];
- });
+ return text.replace(
+ /[&<>"']/g,
+ (m) =>
+ ({
+ "&": "&",
+ "<": "<",
+ ">": ">",
+ '"': """,
+ "'": "'",
+ })[m],
+ );
},
showToast: (message, type = "info") => {
@@ -66,10 +68,21 @@ const Api = {
try {
const response = await fetch(endpoint, config);
+
if (response.status === 401) {
+ const refreshed = await Auth.tryRefresh();
+ if (refreshed) {
+ headers["Authorization"] =
+ `Bearer ${localStorage.getItem("access_token")}`;
+ const retryResponse = await fetch(endpoint, { ...options, headers });
+ if (retryResponse.ok) {
+ return retryResponse.json();
+ }
+ }
Auth.logout();
return null;
}
+
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(errorData.detail || `Error ${response.status}`);
@@ -91,6 +104,17 @@ const Api = {
});
},
+ put(endpoint, body) {
+ return this.request(endpoint, {
+ method: "PUT",
+ body: JSON.stringify(body),
+ });
+ },
+
+ delete(endpoint) {
+ return this.request(endpoint, { method: "DELETE" });
+ },
+
postForm(endpoint, formData) {
return this.request(endpoint, {
method: "POST",
@@ -104,20 +128,108 @@ const Auth = {
logout: () => {
localStorage.removeItem("access_token");
localStorage.removeItem("refresh_token");
- window.location.reload();
+ localStorage.removeItem("user");
+ window.location.href = "/";
+ },
+
+ tryRefresh: async () => {
+ const refreshToken = localStorage.getItem("refresh_token");
+ if (!refreshToken) return false;
+
+ try {
+ const response = await fetch("/api/auth/refresh", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ refresh_token: refreshToken }),
+ });
+
+ if (response.ok) {
+ const data = await response.json();
+ localStorage.setItem("access_token", data.access_token);
+ localStorage.setItem("refresh_token", data.refresh_token);
+ return true;
+ }
+ } catch (e) {
+ console.error("Refresh failed:", e);
+ }
+ return false;
},
init: async () => {
const token = localStorage.getItem("access_token");
- if (!token) return;
+ const refreshToken = localStorage.getItem("refresh_token");
+
+ if (!token && !refreshToken) {
+ localStorage.removeItem("user");
+ return null;
+ }
try {
- const user = await Api.get("/api/auth/me");
- if (user) {
+ let response = await fetch("/api/auth/me", {
+ headers: { Authorization: "Bearer " + token },
+ });
+
+ if (response.status === 401 && refreshToken) {
+ const refreshed = await Auth.tryRefresh();
+ if (refreshed) {
+ response = await fetch("/api/auth/me", {
+ headers: {
+ Authorization: "Bearer " + localStorage.getItem("access_token"),
+ },
+ });
+ }
+ }
+
+ if (response.ok) {
+ const user = await response.json();
+ localStorage.setItem("user", JSON.stringify(user));
document.dispatchEvent(new CustomEvent("auth:login", { detail: user }));
+ return user;
}
} catch (e) {
console.error("Auth check failed", e);
}
+
+ localStorage.removeItem("access_token");
+ localStorage.removeItem("refresh_token");
+ localStorage.removeItem("user");
+ return null;
},
};
+
+window.getUser = function () {
+ const userJson = localStorage.getItem("user");
+ if (!userJson) return null;
+ try {
+ return JSON.parse(userJson);
+ } catch (e) {
+ return null;
+ }
+};
+
+window.hasRole = function (roleName) {
+ const user = window.getUser();
+ if (!user || !user.roles) {
+ return false;
+ }
+ return user.roles.includes(roleName);
+};
+
+window.isAdmin = function () {
+ return window.hasRole("admin");
+};
+
+window.isLibrarian = function () {
+ return window.hasRole("librarian") || window.hasRole("admin");
+};
+
+window.isAuthenticated = function () {
+ return !!window.getUser();
+};
+
+window.canManage = function () {
+ return (
+ (typeof window.isAdmin === "function" && window.isAdmin()) ||
+ (typeof window.isLibrarian === "function" && window.isLibrarian())
+ );
+};
diff --git a/library_service/templates/author.html b/library_service/templates/author.html
index 720d509..ec508a9 100644
--- a/library_service/templates/author.html
+++ b/library_service/templates/author.html
@@ -1,25 +1,47 @@
{% extends "base.html" %} {% block content %}
diff --git a/library_service/templates/base.html b/library_service/templates/base.html
index c0392bf..4cf5c5c 100644
--- a/library_service/templates/base.html
+++ b/library_service/templates/base.html
@@ -159,6 +159,29 @@
Мои книги
+
+
+
+ Пользователи
+
+