From cdd19f7c5437722263559776f0145d5155e424e3 Mon Sep 17 00:00:00 2001
From: Masahiko AMANO <hiko-19@ya.ru>
Date: Tue, 7 Jan 2025 15:42:16 +0300
Subject: [PATCH] feat(web): add quote edit form

---
 web/static/js/quotes.js   | 56 ++++++++++++++++++++++++++++++++++++++-
 web/templates/quotes.html | 43 ++++++++++++++++++++++++++++++
 2 files changed, 98 insertions(+), 1 deletion(-)

diff --git a/web/static/js/quotes.js b/web/static/js/quotes.js
index 49c34b5..9e11736 100644
--- a/web/static/js/quotes.js
+++ b/web/static/js/quotes.js
@@ -12,6 +12,7 @@ var sorting = sessionStorage.getItem("sort");
 if (sorting == null) {
 	sorting = "-datetime";
 }
+var temp_quote_id;
 
 function renderBlockQuote(quote) {
 	return `
@@ -23,7 +24,7 @@ function renderBlockQuote(quote) {
 				<p class="text-xs text-gray-400 mt-2">${quote.datetime}</p>
 			</div>
 			<div class="flex gap-2">
-				<button class="text-gray-600 hover:text-custom">
+				<button class="text-gray-600 hover:text-custom" onclick="quoteEdit('${quote.id}');">
 					<i class="fas fa-edit"></i>
 				</button>
 				<button class="text-gray-600 hover:text-red-500" onclick="quoteDelete('${quote.id}');">
@@ -104,6 +105,27 @@ function reload() {
 	load();
 }
 
+function quoteEdit(quote_id) {
+	$.ajax({
+		url: `/api/quotes/${quote_id}`,
+		type: "GET",
+		dataType: "json",
+		success: function (resp) {
+			temp_quote_id = quote_id;
+			$("#edit-quote-text").val(resp.text);
+			$("#edit-quote-author").val(resp.author);
+			$("#edit-quote-datetime").val(resp.datetime.slice(0,19));
+			$("body").css("overflow", "hidden");
+			$("#quote-editor").css("top", $(window).scrollTop());
+			$("#quote-editor").removeClass("hidden");
+		},
+		error: function (err) {
+			$("#quote-editor-error-message").text(err.responseJSON.error);
+			$("#quote-editor-error").removeClass("hidden");
+		},
+	});
+}
+
 function quoteDelete(quote_id) {
 	$.ajax({
 		url: `/api/quotes/${quote_id}`,
@@ -158,6 +180,38 @@ $(document).on("submit", "#quote-create", function (e) {
 	});
 });
 
+$(document).on("submit", "#quote-update", function (e) {
+	e.preventDefault();
+	data = formToJSON($("#quote-update"));
+	data.datetime = datetimeToLocalISO(data.datetime);
+	$.ajax({
+		url: `/api/quotes/${temp_quote_id}`,
+		type: "PATCH",
+		contentType: "application/json",
+		data: JSON.stringify(data),
+		processData: false,
+		dataType: "json",
+		success: function (resp) {
+			$("#quote-editor").addClass("hidden");
+			$("body").css("overflow", "");
+			reload();
+			$("#new-quote-text").val("");
+			$("#new-quote-author").val("");
+		},
+		error: function (err) {
+			$("#quote-editor-error-message").text(err.responseJSON.error);
+			$("#quote-editor-error").removeClass("hidden");
+		},
+	});
+});
+
+$(document).on("click", "#btn-edit-close", function (e) {
+	$("body").css("overflow", "");
+	$("#quote-editor").addClass("hidden");
+	$("#quote-editor textarea,input").val("");
+	$("#quote-editor-error").addClass("hidden");
+});
+
 $(window).on("load", function (e) {
 	load();
 });
diff --git a/web/templates/quotes.html b/web/templates/quotes.html
index 46bf819..a240487 100644
--- a/web/templates/quotes.html
+++ b/web/templates/quotes.html
@@ -102,6 +102,49 @@
 			</div>
 		</div>
 	</div>
+	<div id="quote-editor" class="hidden quote-form flex flex-col items-center justify-center">
+		<div class="max-w-4xl w-full mt-8 p-6">
+			<div class="max-w-4xl w-full space-y-8 bg-white p-10 rounded-lg shadow-lg">
+				<h3 class="text-xl font-bold font-[&#34;Playfair_Display&#34;] text-gray-900 mb-4">Редактировать цитату</h3>
+				<div id="quote-editor-error" class="hidden mt-4 p-4 rounded-md bg-red-50 border border-red-200">
+					<p id="quote-editor-error-message" class="text-sm text-red-600 font-[&#39;Inter&#39;]"></p>
+				</div>
+				<form id="quote-update" class="space-y-4">
+					<div>
+						<label for="edit-quote-text" class="block text-sm font-medium text-gray-700 font-[&#34;Inter&#34;]">
+							Цитата
+						</label>
+						<textarea id="edit-quote-text" name="text" rows="3" placeholder="Сказанная цитата может быть сказана тем, кто её сказанул." required
+								  class="!rounded-button mt-1 block w-full px-3 py-2 border border-gray-300 shadow-sm placeholder-gray-400 focus:outline-none focus:ring-custom focus:border-custom sm:text-sm font-[&#34;Inter&#34;]"></textarea>
+					</div>
+					<div>
+						<label for="edit-quote-author" class="block text-sm font-medium text-gray-700 font-[&#34;Inter&#34;]">
+							Автор
+						</label>
+						<input type="text" id="edit-quote-author" name="author" placeholder="Узбекс" required
+							   class="!rounded-button mt-1 block w-full px-3 py-2 border border-gray-300 shadow-sm placeholder-gray-400 focus:outline-none focus:ring-custom focus:border-custom sm:text-sm font-[&#34;Inter&#34;]" />
+					</div>
+					<div>
+						<label for="edit-quote-datetime" class="block text-sm font-medium text-gray-700 font-[&#34;Inter&#34;]">
+							Дата и время
+						</label>
+						<input type="datetime-local" id="edit-quote-datetime" name="datetime" step="1"
+							   class="!rounded-button mt-1 block w-full px-3 py-2 border border-gray-300 shadow-sm placeholder-gray-400 focus:outline-none focus:ring-custom focus:border-custom sm:text-sm font-[&#34;Inter&#34;]" />
+					</div>
+					<div class="flex justify-end space-x-3">
+						<button type="button" id="btn-edit-close"
+								class="!rounded-button px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-custom font-[&#34;Inter&#34;]">
+							Отмена
+						</button>
+						<button type="submit"
+								class="!rounded-button px-4 py-2 text-sm font-medium text-white bg-custom hover:bg-custom/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-custom font-[&#34;Inter&#34;]">
+							Сохранить
+						</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	</div>
 	<script src="/static/js/utils.js"></script>
 	<script src="/static/js/quotes.js"></script>
 </body>