394 lines
16 KiB
JavaScript
394 lines
16 KiB
JavaScript
"use client";
|
||
|
||
import React, { useState } from "react";
|
||
|
||
const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL;
|
||
|
||
const ModeratorRequestModal = ({ request, onClose, onModerated }) => {
|
||
const [showRejectPopup, setShowRejectPopup] = useState(false);
|
||
const [rejectReason, setRejectReason] = useState("");
|
||
const [submitting, setSubmitting] = useState(false);
|
||
const [error, setError] = useState("");
|
||
|
||
// request.status: "pending_moderation" | "approved" | "rejected"
|
||
const isApproved = request.status === "approved";
|
||
const isRejected = request.status === "rejected";
|
||
const isPending = request.status === "pending_moderation";
|
||
|
||
const getAccessToken = () => {
|
||
if (typeof window === "undefined") return null;
|
||
const saved = localStorage.getItem("authUser");
|
||
const authUser = saved ? JSON.parse(saved) : null;
|
||
return authUser?.accessToken || null;
|
||
};
|
||
|
||
const formatDate = (iso) => {
|
||
if (!iso) return "";
|
||
const d = new Date(iso);
|
||
return d.toLocaleDateString("ru-RU");
|
||
};
|
||
|
||
const formatTime = (iso) => {
|
||
if (!iso) return "";
|
||
const d = new Date(iso);
|
||
return d.toLocaleTimeString("ru-RU", {
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
});
|
||
};
|
||
|
||
const createdDate = request.date || "";
|
||
const createdTime = request.time || "";
|
||
const deadlineDate = request.deadlineDate || request.date || "";
|
||
const deadlineTime = request.deadlineTime || request.time || "";
|
||
|
||
const handleApprove = async () => {
|
||
if (!API_BASE || submitting) return;
|
||
const token = getAccessToken();
|
||
if (!token) {
|
||
setError("Вы не авторизованы");
|
||
return;
|
||
}
|
||
|
||
console.log("[MODERATION] APPROVE start", {
|
||
requestId: request.id,
|
||
statusBefore: request.status,
|
||
});
|
||
|
||
try {
|
||
setSubmitting(true);
|
||
setError("");
|
||
|
||
const res = await fetch(
|
||
`${API_BASE}/moderation/requests/${request.id}/approve`,
|
||
{
|
||
method: "POST",
|
||
headers: {
|
||
Accept: "application/json",
|
||
Authorization: `Bearer ${token}`,
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({ comment: null }),
|
||
}
|
||
);
|
||
|
||
console.log("[MODERATION] APPROVE response status", res.status);
|
||
|
||
const text = await res.text();
|
||
let data = null;
|
||
if (text) {
|
||
try {
|
||
data = JSON.parse(text);
|
||
} catch {
|
||
data = null;
|
||
}
|
||
}
|
||
|
||
console.log("[MODERATION] APPROVE response body", data || text);
|
||
|
||
if (!res.ok) {
|
||
let msg = "Не удалось одобрить заявку";
|
||
if (data && typeof data === "object" && data.error) {
|
||
msg = data.error;
|
||
} else if (text) {
|
||
msg = text;
|
||
}
|
||
console.log("[MODERATION] APPROVE error", msg);
|
||
setError(msg);
|
||
setSubmitting(false);
|
||
return;
|
||
}
|
||
|
||
onModerated?.({
|
||
...request,
|
||
status: "approved",
|
||
moderationResult: data,
|
||
});
|
||
|
||
console.log("[MODERATION] APPROVE success", {
|
||
requestId: request.id,
|
||
newStatus: "approved",
|
||
});
|
||
|
||
setSubmitting(false);
|
||
onClose();
|
||
} catch (e) {
|
||
console.log("[MODERATION] APPROVE exception", e);
|
||
setError(e.message || "Ошибка сети");
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
const handleRejectConfirm = async () => {
|
||
if (!API_BASE || submitting) return;
|
||
const token = getAccessToken();
|
||
if (!token) {
|
||
setError("Вы не авторизованы");
|
||
return;
|
||
}
|
||
if (!rejectReason.trim()) {
|
||
setError("Укажите причину отклонения");
|
||
return;
|
||
}
|
||
|
||
console.log("[MODERATION] REJECT start", {
|
||
requestId: request.id,
|
||
statusBefore: request.status,
|
||
reason: rejectReason,
|
||
});
|
||
|
||
try {
|
||
setSubmitting(true);
|
||
setError("");
|
||
|
||
const res = await fetch(
|
||
`${API_BASE}/moderation/requests/${request.id}/reject`,
|
||
{
|
||
method: "POST",
|
||
headers: {
|
||
Accept: "application/json",
|
||
Authorization: `Bearer ${token}`,
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({ comment: rejectReason }),
|
||
}
|
||
);
|
||
|
||
console.log("[MODERATION] REJECT response status", res.status);
|
||
|
||
const text = await res.text();
|
||
let data = null;
|
||
if (text) {
|
||
try {
|
||
data = JSON.parse(text);
|
||
} catch {
|
||
data = null;
|
||
}
|
||
}
|
||
|
||
console.log("[MODERATION] REJECT response body", data || text);
|
||
|
||
if (!res.ok) {
|
||
let msg = "Не удалось отклонить заявку";
|
||
if (data && typeof data === "object" && data.error) {
|
||
msg = data.error;
|
||
} else if (text) {
|
||
msg = text;
|
||
}
|
||
console.log("[MODERATION] REJECT error", msg);
|
||
setError(msg);
|
||
setSubmitting(false);
|
||
return;
|
||
}
|
||
|
||
onModerated?.({
|
||
...request,
|
||
status: "rejected",
|
||
rejectReason,
|
||
moderationResult: data,
|
||
});
|
||
|
||
console.log("[MODERATION] REJECT success", {
|
||
requestId: request.id,
|
||
newStatus: "rejected",
|
||
});
|
||
|
||
setShowRejectPopup(false);
|
||
setSubmitting(false);
|
||
onClose();
|
||
} catch (e) {
|
||
console.log("[MODERATION] REJECT exception", e);
|
||
setError(e.message || "Ошибка сети");
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
|
||
return (
|
||
<>
|
||
<div className="fixed inset-0 z-40 flex flex-col bg-[#90D2F9] px-4 pt-4 pb-20">
|
||
<div className="flex.items-center gap-2 mb-3">
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
className="text-white w-8 h-8 rounded-full flex items-center justify-center text-xl"
|
||
>
|
||
←
|
||
</button>
|
||
<p className="flex-1 text-center font-montserrat font-extrabold text-[20px] leading-[24px] text-white">
|
||
Заявка от {createdDate || "—"}
|
||
</p>
|
||
<span className="w-8" />
|
||
</div>
|
||
|
||
<div className="flex-1 flex items-start justify-center">
|
||
<div className="w-full max-w-[400px] bg-white rounded-2xl p-4 flex flex-col gap-4 shadow-lg">
|
||
<div className="flex flex-col gap-2">
|
||
<div className="w-full bg-[#72B8E2] rounded-[10px] px-3 py-2 flex items-center justify-between">
|
||
<span className="text-[14px] font-montserrat font-bold text-white">
|
||
Описание
|
||
</span>
|
||
<div className="flex gap-2">
|
||
<div className="min-w-[80px] bg-[#72B8E2] rounded-[10px] flex flex-col items-center justify-center border border-white/30 px-2 py-1">
|
||
<span className="text-[12px] font-montserrat font-bold text-white">
|
||
Дата
|
||
</span>
|
||
<span className="text-[10px] font-montserrat text-white">
|
||
{createdDate || "—"}
|
||
</span>
|
||
</div>
|
||
<div className="min-w-[80px] bg-[#72B8E2] rounded-[10px] flex flex-col items-center justify-center border border-white/30 px-2 py-1">
|
||
<span className="text-[12px] font-montserrat font-bold text-white">
|
||
Время
|
||
</span>
|
||
<span className="text-[10px] font-montserrat text-white">
|
||
{createdTime || "—"}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="w-full bg-[#72B8E2] rounded-[10px] px-3 py-2 flex flex-col gap-1">
|
||
<span className="text-[14px] font-montserrat font-bold text-white">
|
||
ФИО
|
||
</span>
|
||
<p className="text-[12px] font-montserrat text-white leading-[16px]">
|
||
{request.requesterName || "Заявитель"}
|
||
</p>
|
||
<p className="text-[12px] font-montserrat text-white leading-[14px]">
|
||
{request.address
|
||
? `${request.city ? request.city + ", " : ""}${request.address}`
|
||
: "Адрес не указан"}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between">
|
||
<div
|
||
className={`px-3 py-1 rounded-[10px] flex items-center justify-center ${isApproved
|
||
? "bg-[#94E067]"
|
||
: isRejected
|
||
? "bg-[#E06767]"
|
||
: "bg-[#E9D171]"
|
||
}`}
|
||
>
|
||
<span className="text-[12px] font-montserrat font-semibold text-black">
|
||
{isApproved
|
||
? "Принята"
|
||
: isRejected
|
||
? "Отклонена"
|
||
: "Модерация"}
|
||
</span>
|
||
</div>
|
||
<div className="flex flex-col items-end text-[12px] font-montserrat font-light text-black leading-[14px]">
|
||
<span>До {deadlineDate || "—"}</span>
|
||
<span>{deadlineTime || "—"}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<p className="text-[16px] leading-[20px] font-montserrat font-semibold text-black">
|
||
{request.title || "Задача"}
|
||
</p>
|
||
|
||
{request.description && (
|
||
<div className="flex-1 bg-[#F2F2F2] rounded-[10px] px-3 py-2 overflow-y-auto">
|
||
<p className="text-[12px] leading-[16px] font-montserrat text-black whitespace-pre-line">
|
||
{request.description}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{isRejected && (
|
||
<div className="w-full.bg-[#FFE2E2] rounded-[10px] px-3 py-2">
|
||
<p className="text-[14px] font-montserrat font-bold text-[#E06767] mb-1">
|
||
Причина отклонения
|
||
</p>
|
||
<p className="text-[12px] font-montserrat text-black whitespace-pre-line">
|
||
{request.rejectReason && request.rejectReason.trim().length > 0
|
||
? request.rejectReason
|
||
: "Причина не указана"}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{error && (
|
||
<p className="text-[12px] font-montserrat text-red-500">
|
||
{error}
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div className="mt-4 w-full max-w-[400px] mx-auto flex items-center justify-between gap-3">
|
||
<button
|
||
type="button"
|
||
onClick={handleApprove}
|
||
disabled={submitting}
|
||
className="flex-1 h-10 bg-[#94E067] rounded-[10px] flex items-center justify-center disabled:opacity-60"
|
||
>
|
||
<span className="text-[14px] font-montserrat font-bold text-white">
|
||
{submitting ? "Сохранение..." : "Принять"}
|
||
</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowRejectPopup(true)}
|
||
disabled={submitting}
|
||
className="flex-1 h-10 bg-[#E06767] rounded-[10px] flex items-center justify-center disabled:opacity-60"
|
||
>
|
||
<span className="text-[14px] font-montserrat font-bold text-white">
|
||
Отклонить
|
||
</span>
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{showRejectPopup && (
|
||
<div className="fixed inset-0 z-50 flex flex-col bg-[rgba(101,101,101,0.72)] px-4 pt-8 pb-6">
|
||
<div className="w-full max-w-[400px] mx-auto bg-white rounded-t-[15px] flex flex-col items-center px-4 pt-4 pb-4">
|
||
<p className="font-montserrat font-bold text-[20px] leading-[24px] text-black mb-3">
|
||
Причина
|
||
</p>
|
||
|
||
<div className="w-full bg-[#72B8E2] rounded-[10px] px-3 py-3 mb-4 max-h-[50vh]">
|
||
<textarea
|
||
value={rejectReason}
|
||
onChange={(e) => setRejectReason(e.target.value)}
|
||
className="w-full h-full bg-transparent text-[14px] leading-[18px] font-montserrat text-black placeholder:text-black/60 outline-none resize-none"
|
||
placeholder="Опишите причину отклонения заявки"
|
||
/>
|
||
</div>
|
||
|
||
<div className="w-full flex flex-col gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={handleRejectConfirm}
|
||
disabled={submitting}
|
||
className="w-full h-10 bg-[#E06767] rounded-[10px] flex items-center justify-center disabled:opacity-60"
|
||
>
|
||
<span className="text-[16px] font-montserrat font-bold text-white">
|
||
{submitting ? "Сохранение..." : "Подтвердить"}
|
||
</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowRejectPopup(false)}
|
||
disabled={submitting}
|
||
className="w-full h-10 bg-white rounded-[10px] border border-[#E06767] flex items-center justify-center"
|
||
>
|
||
<span className="text-[14px] font-montserrat font-semibold text-[#E06767]">
|
||
Отмена
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default ModeratorRequestModal;
|