336 lines
10 KiB
TypeScript
336 lines
10 KiB
TypeScript
"use client";
|
|
"use client";
|
|
import React, { useEffect, useState } from "react";
|
|
import { useForm, Controller } from "react-hook-form";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Card } from "@/components/ui/card";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import * as z from "zod";
|
|
import Swal from "sweetalert2";
|
|
import withReactContent from "sweetalert2-react-content";
|
|
import { useParams } from "next/navigation";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { Avatar, AvatarImage } from "@/components/ui/avatar";
|
|
import {
|
|
getEscalationDiscussion,
|
|
getQuestionTicket,
|
|
getTicketingDetail,
|
|
getTicketingInternalDetail,
|
|
getTicketingInternalDiscussion,
|
|
saveTicketInternalReply,
|
|
saveTicketsQuestion,
|
|
} from "@/service/communication/communication";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Icon } from "@iconify/react/dist/iconify.js";
|
|
import { Link } from "@/i18n/routing";
|
|
import { loading } from "@/lib/swal";
|
|
import { id } from "date-fns/locale";
|
|
import { DetailTicket } from "../ticketing/info-lainnya-types";
|
|
import { Description } from "@radix-ui/react-toast";
|
|
|
|
const taskSchema = z.object({
|
|
title: z.string().min(1, { message: "Judul diperlukan" }),
|
|
description: z.string().min(2, {
|
|
message: "Narasi Penugasan harus lebih dari 2 karakter.",
|
|
}),
|
|
});
|
|
|
|
export type replyDetail = {
|
|
id: number;
|
|
message: string;
|
|
createdAt: string;
|
|
messageFrom: {
|
|
id: number;
|
|
fullname: string;
|
|
};
|
|
messageTo: {
|
|
id: number;
|
|
fullname: string;
|
|
};
|
|
};
|
|
|
|
export default function FormQuestionsForward() {
|
|
const MySwal = withReactContent(Swal);
|
|
const { id } = useParams() as { id: string };
|
|
|
|
const [detail, setDetail] = useState<any>();
|
|
const [ticketReply, setTicketReply] = useState<replyDetail[]>([]);
|
|
const [replyVisible, setReplyVisible] = useState(false);
|
|
const [listDiscussion, setListDiscussion] = useState();
|
|
const [message, setMessage] = useState("");
|
|
|
|
const [detailTickets, setDetailTickets] = useState<DetailTicket | null>(null);
|
|
const [selectedPriority, setSelectedPriority] = useState("");
|
|
const [replyMessage, setReplyMessage] = useState("");
|
|
const [selectedStatus, setSelectedStatus] = useState("");
|
|
const [replies, setReplies] = useState([
|
|
{
|
|
id: 1,
|
|
name: "Mabes Polri - Approver",
|
|
message: "test",
|
|
timestamp: "2024-12-20 00:56:10",
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Mabes Polri - Approver",
|
|
message: "balas",
|
|
timestamp: "2025-01-18 17:42:48",
|
|
},
|
|
]);
|
|
|
|
const {
|
|
control,
|
|
handleSubmit,
|
|
reset,
|
|
formState: { errors },
|
|
} = useForm({
|
|
resolver: zodResolver(taskSchema),
|
|
});
|
|
|
|
// useEffect(() => {
|
|
// async function initState() {
|
|
// const response = await getQuestionTicket(id);
|
|
// setDetail(response?.data?.data);
|
|
|
|
// if (response?.data !== null) {
|
|
// setDetailTickets(response?.data?.data);
|
|
// }
|
|
|
|
// if (detailTickets?.emergencyIssue) {
|
|
// reset({
|
|
// title: detailTickets.emergencyIssue.title || "",
|
|
// description: detailTickets.emergencyIssue.description || "",
|
|
// });
|
|
// // setSelectedPriority(String(detailTickets.emergencyIssue.urgencyId));
|
|
// // setSelectedStatus(String(detailTickets.statusId)); // jika ada
|
|
// }
|
|
// }
|
|
// initState();
|
|
// getTicketReply();
|
|
// }, [id, reset]);
|
|
|
|
useEffect(() => {
|
|
async function initState() {
|
|
if (id) {
|
|
const response = await getTicketingDetail(id);
|
|
setDetail(response?.data?.data);
|
|
}
|
|
}
|
|
initState();
|
|
getTicketReply();
|
|
}, [id]);
|
|
|
|
async function getTicketReply() {
|
|
const res = await getTicketingInternalDiscussion(id);
|
|
if (res?.data !== null) {
|
|
setTicketReply(res?.data?.data);
|
|
}
|
|
}
|
|
|
|
const onSubmit = async (data: any) => {
|
|
try {
|
|
const payload = {
|
|
id,
|
|
title: data.title,
|
|
description: data.description,
|
|
priorityId: selectedPriority,
|
|
statusId: selectedStatus,
|
|
typeId: detailTickets?.typeId,
|
|
parentCommentId: detailTickets?.feedId,
|
|
};
|
|
|
|
const response = await saveTicketsQuestion(payload);
|
|
|
|
MySwal.fire({
|
|
title: "Sukses",
|
|
text: "Data berhasil diperbarui.",
|
|
icon: "success",
|
|
});
|
|
|
|
// Refresh data jika perlu
|
|
getTicketReply();
|
|
} catch (error) {
|
|
console.error("Gagal update:", error);
|
|
MySwal.fire({
|
|
title: "Error",
|
|
text: "Terjadi kesalahan saat memperbarui.",
|
|
icon: "error",
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleSendReply = () => {
|
|
if (replyMessage.trim() === "") return;
|
|
|
|
const newReply = {
|
|
id: replies.length + 1,
|
|
name: "Mabes Polri - Approver", // Sesuaikan dengan data dinamis jika ada
|
|
message: replyMessage,
|
|
timestamp: new Date().toISOString().slice(0, 19).replace("T", " "),
|
|
};
|
|
|
|
setReplies([...replies, newReply]);
|
|
setReplyMessage("");
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex">
|
|
<div className="flex flex-col mt-6 w-full mb-3">
|
|
{detail !== undefined && (
|
|
<div key={detail?.id} className="bg-slate-300 rounded-md">
|
|
<p className="p-5 bg-slate-300 rounded-md text-lg font-semibold">
|
|
Ticket #{detail.id}
|
|
</p>
|
|
<div className="flex flex-row gap-3 bg-sky-100 p-5 items-center">
|
|
<Icon icon="qlementine-icons:user-16" width={36} />
|
|
|
|
<div>
|
|
<p>
|
|
<span className="font-bold">
|
|
{detail?.commentFromUserName}
|
|
</span>
|
|
{` `}
|
|
mengirimkan pesan untuk{` `}
|
|
<Link
|
|
href={
|
|
detail?.feed
|
|
? detail?.feed?.permalink_url == undefined
|
|
? detail?.feedUrl
|
|
: detail?.feed?.permalink_url
|
|
: ""
|
|
}
|
|
target="_blank"
|
|
className="font-bold"
|
|
>
|
|
{detail?.message}
|
|
</Link>
|
|
</p>
|
|
<p className="text-xs">
|
|
{`${new Date(detail?.createdAt).getDate()}-${
|
|
new Date(detail?.createdAt).getMonth() + 1
|
|
}-${new Date(detail?.createdAt).getFullYear()} ${new Date(
|
|
detail?.createdAt
|
|
).getHours()}:${new Date(detail?.createdAt).getMinutes()}`}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p className="p-5 bg-white">{detail.message}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{detail !== undefined && (
|
|
<div className="gap-5 mb-5 w-full border mt-3 rounded-md bg-white">
|
|
<div className="space-y-2 px-3 mt-3">
|
|
<Label>Judul</Label>
|
|
<Controller
|
|
control={control}
|
|
name="title"
|
|
render={({ field }) => (
|
|
<Input
|
|
size="md"
|
|
type="text"
|
|
value={detail?.title}
|
|
onChange={field.onChange}
|
|
placeholder="Enter Title"
|
|
/>
|
|
)}
|
|
/>
|
|
{/* {errors.title?.message && (
|
|
<p className="text-red-400 text-sm">
|
|
{errors.title.message}
|
|
</p>
|
|
)} */}
|
|
</div>
|
|
<div className="mt-5 px-3">
|
|
<Label>Prioritas</Label>
|
|
<Select
|
|
onValueChange={setSelectedPriority}
|
|
value={detail?.priority?.name}
|
|
>
|
|
<SelectTrigger size="md" className="w-3/12">
|
|
<SelectValue placeholder="Pilih" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="Low">Low</SelectItem>
|
|
<SelectItem value="Medium">Medium</SelectItem>
|
|
<SelectItem value="High">High</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2 px-3 mt-3">
|
|
<Label>Description</Label>
|
|
<Controller
|
|
control={control}
|
|
name="title"
|
|
render={({ field }) => (
|
|
<Textarea
|
|
value={detail?.description}
|
|
onChange={field.onChange}
|
|
placeholder="Enter Title"
|
|
/>
|
|
)}
|
|
/>
|
|
{/* {errors.title?.message && (
|
|
<p className="text-red-400 text-sm">
|
|
{errors.title.message}
|
|
</p>
|
|
)} */}
|
|
</div>
|
|
<div className="mx-3 my-3">
|
|
<h3 className="text-gray-700 font-medium">Tanggapan</h3>
|
|
<div className="space-y-4">
|
|
{replies.map((reply) => (
|
|
<div key={reply.id} className="border-b pb-2">
|
|
<p className="font-semibold text-gray-800">{reply.name}</p>
|
|
<p className="text-gray-600">{reply.message}</p>
|
|
<p className="text-sm text-gray-400">{reply.timestamp}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mx-3">
|
|
<label
|
|
htmlFor="replyMessage"
|
|
className="block text-gray-700 font-medium mb-2"
|
|
>
|
|
Tulis Tanggapan Anda
|
|
</label>
|
|
<textarea
|
|
id="replyMessage"
|
|
className="w-full h-24 border border-gray-300 rounded-md p-2"
|
|
value={replyMessage}
|
|
onChange={(e) => setReplyMessage(e.target.value)}
|
|
placeholder="Tulis tanggapan anda di sini..."
|
|
/>
|
|
<div className="flex justify-end gap-3 mt-2 mb-3">
|
|
<button
|
|
onClick={() => setReplyMessage("")}
|
|
className="px-4 py-2 bg-gray-200 text-gray-800 rounded-md"
|
|
>
|
|
Batal
|
|
</button>
|
|
<button
|
|
onClick={handleSendReply}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-md"
|
|
>
|
|
Kirim Pesan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|