feat:publish planning,update form

This commit is contained in:
Anang Yusman 2024-12-21 13:25:07 +07:00
parent 437e20fc70
commit 30cb1acc54
13 changed files with 619 additions and 113 deletions

View File

@ -34,6 +34,7 @@ import "swiper/css/navigation";
import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
import { Avatar, AvatarImage } from "@/components/ui/avatar";
import JoditEditor from "jodit-react";
import { Badge } from "@/components/ui/badge";
const detailSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }),
@ -286,12 +287,19 @@ export default function DetailDocument() {
</div>
</RadioGroup>
</div>
<div className=" py-3">
<div className="py-3">
<div className="space-y-2">
<Label>Tag</Label>
<p className="border rounded-md text-blue-600 px-2 py-2">
{detail?.tags}
</p>
<div className="flex flex-wrap gap-2">
{detail?.tags?.split(",").map((tag, index) => (
<Badge
key={index}
className="border rounded-md px-2 py-2"
>
{tag.trim()}
</Badge>
))}
</div>
</div>
</div>
<div className=" py-3">

View File

@ -33,6 +33,7 @@ import "swiper/css";
import "swiper/css/navigation";
import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
const detailSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }),
@ -285,12 +286,19 @@ export default function DetailImage() {
</div>
</RadioGroup>
</div>
<div className=" py-3">
<div className="py-3">
<div className="space-y-2">
<Label>Tag</Label>
<p className="border rounded-md text-blue-600 px-2 py-2">
{detail?.tags}
</p>
<div className="flex flex-wrap gap-2">
{detail?.tags?.split(",").map((tag, index) => (
<Badge
key={index}
className="border rounded-md px-2 py-2"
>
{tag.trim()}
</Badge>
))}
</div>
</div>
</div>
<div className=" py-3">

View File

@ -33,6 +33,7 @@ import "swiper/css";
import "swiper/css/navigation";
import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
const detailSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }),
@ -292,12 +293,19 @@ export default function DetailImage() {
</div>
</RadioGroup>
</div>
<div className=" py-3">
<div className="py-3">
<div className="space-y-2">
<Label>Tag</Label>
<p className="border rounded-md text-blue-600 px-2 py-2">
{detail?.tags}
</p>
<div className="flex flex-wrap gap-2">
{detail?.tags?.split(",").map((tag, index) => (
<Badge
key={index}
className="border rounded-md px-2 py-2"
>
{tag.trim()}
</Badge>
))}
</div>
</div>
</div>
<div className=" py-3">

View File

@ -336,7 +336,7 @@ export default function FormBlogDetail() {
/>
</Card>
</div>
<div className="px-3 py-3">
<div className="px-3 py-3 mt-6">
<label
htmlFor="kategori"
className="block text-sm font-medium text-gray-700"

View File

@ -55,7 +55,7 @@ export type taskDetail = {
id: number;
name: string;
};
createdAt: string;
targetOutput: string;
targetParticipantTopLevel: string;
description: string;
@ -120,14 +120,10 @@ export default function FormContestDetail() {
const details = response.data?.data;
setDetail(details);
// if (details?.createdAt) {
// // Memisahkan string duration menjadi start dan end date
// const [startDate, endDate] = details.createdAt.split(" - ");
// setDate({
// from: parseISO(startDate),
// to: parseISO(endDate),
// });
// }
if (details?.createdAt) {
const parsedDate = parseISO(details.createdAt);
setDate({ from: parsedDate, to: parsedDate });
}
}
}
initState();
@ -278,6 +274,7 @@ export default function FormContestDetail() {
<Popover>
<PopoverTrigger asChild>
<Button
value={detail?.createdAt}
id="date"
variant={"outline"}
className={cn(
@ -331,7 +328,7 @@ export default function FormContestDetail() {
))}
</div>
</div>
<div className="flex flex-col mt-5">
<div className="flex flex-col mt-7">
<Label>Pelaksana Tugas</Label>
<div className="flex flex-row mt-2 gap-2">
{Object.keys(unitSelection).map((key) => (
@ -352,8 +349,7 @@ export default function FormContestDetail() {
))}
</div>
</div>
<div className="mt-5">
<div className="mt-7">
<Label>Narasi Penugasan</Label>
<Controller
control={control}
@ -375,12 +371,11 @@ export default function FormContestDetail() {
</div>
</div>
{/* Submit Button */}
<div className="mt-4">
{/* <div className="mt-4">
<Button type="submit" color="primary">
Submit
</Button>
</div>
</div> */}
</form>
) : (
""

View File

@ -20,16 +20,27 @@ import {
import { Checkbox } from "@/components/ui/checkbox";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import JoditEditor from "jodit-react";
import { createTask } from "@/service/task";
import { createTask, getUserLevelForAssignments } from "@/service/task";
import { cn } from "@/lib/utils";
import { format } from "date-fns";
import { CalendarIcon } from "lucide-react";
import { CalendarIcon, ChevronDown, ChevronUp } from "lucide-react";
import { id } from "date-fns/locale";
import { getPlanningById } from "@/service/planning/planning";
import { getPlanningById, publishPlanning } from "@/service/planning/planning";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { AlertDialogHeader } from "@/components/ui/alert-dialog";
import { Description } from "@radix-ui/react-toast";
const taskSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }),
naration: z.string().min(2, {
description: z.string().min(2, {
message: "Narasi Penugasan harus lebih dari 2 karakter.",
}),
});
@ -37,8 +48,10 @@ const taskSchema = z.object({
export type mediahubDetail = {
id: number;
title: string;
name: string;
fileTypeOutput: string;
assignedToTopLevel: string;
assignedToLevel: string;
assignmentType: {
id: number;
name: string;
@ -70,6 +83,10 @@ export default function PublishMediahub() {
const [startDate, setStartDate] = useState<Date>(new Date());
const [detail, setDetail] = useState<mediahubDetail>();
const [refresh] = useState(false);
const [listDest, setListDest] = useState([]); // Data Polda dan Polres
const [checkedLevels, setCheckedLevels] = useState(new Set());
const [expandedPolda, setExpandedPolda] = useState([{}]);
const [isLoading, setIsLoading] = useState(false);
const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
const [unitSelection, setUnitSelection] = useState({
@ -93,6 +110,29 @@ export default function PublishMediahub() {
setPlatformTypeVisible(selectedValue === 2);
};
useEffect(() => {
async function fetchPoldaPolres() {
setIsLoading(true);
try {
const response = await getUserLevelForAssignments();
setListDest(response.data.data.list);
const initialExpandedState = response.data.data.list.reduce(
(acc: any, polda: any) => {
acc[polda.id] = false;
return acc;
},
{}
);
setExpandedPolda(initialExpandedState);
console.log("polres", initialExpandedState);
} catch (error) {
console.error("Error fetching Polda/Polres data:", error);
} finally {
setIsLoading(false);
}
}
fetchPoldaPolres();
}, []);
useEffect(() => {
async function initState() {
@ -102,7 +142,14 @@ export default function PublishMediahub() {
setDetail(details);
if (details?.date) {
setStartDate(new Date(details.date)); // Konversi string tanggal ke objek Date
setStartDate(new Date(details.date));
}
if (details?.assignedToLevel) {
const levels = new Set(
details.assignedToLevel.split(",").map(Number)
);
setCheckedLevels(levels);
}
}
}
@ -111,7 +158,7 @@ export default function PublishMediahub() {
useEffect(() => {
if (detail?.fileTypeOutput) {
const outputSet = new Set(detail.fileTypeOutput.split(",").map(Number)); // Membagi string ke dalam array dan mengonversi ke nomor
const outputSet = new Set(detail.fileTypeOutput.split(",").map(Number));
setTaskOutput({
all: outputSet.has(0),
video: outputSet.has(2),
@ -126,7 +173,7 @@ export default function PublishMediahub() {
if (detail?.assignedToTopLevel) {
const outputSet = new Set(
detail.assignedToTopLevel.split(",").map(Number)
); // Membagi string ke dalam array dan mengonversi ke nomor
);
setUnitSelection({
allUnit: outputSet.has(0),
mabes: outputSet.has(1),
@ -146,30 +193,49 @@ export default function PublishMediahub() {
};
const selectedOutputs = Object.keys(taskOutput)
.filter((key) => taskOutput[key as keyof typeof taskOutput]) // Ambil hanya yang `true`
.map((key) => fileTypeMapping[key as keyof typeof fileTypeMapping]) // Konversi ke nilai string
.filter((key) => taskOutput[key as keyof typeof taskOutput])
.map((key) => fileTypeMapping[key as keyof typeof fileTypeMapping])
.join(",");
const requestData = {
const requestData: {
id?: number;
title: string;
target: string;
taskType: string;
assignedToLevel: any;
assignmentPurpose: any;
assignmentTypeId: string;
fileTypeOutput: string;
description: string;
platformType: string | null;
date: any;
assignmentMainTypeId: number;
planningTypeId: number;
} = {
...data,
// assignmentType,
// assignmentCategory,
target: selectedTarget,
unitSelection,
assignedToRole: "3",
taskType: taskType,
broadcastType: broadcastType,
assignmentMainTypeId: mainType,
assignmentPurpose: "1",
assignedToLevel: checkedLevels,
assignmentPurpose: unitSelection,
assignmentTypeId: type,
fileTypeOutput: selectedOutputs,
id: null,
narration: data.naration,
description: data.description,
platformType: "",
title: data.title,
date: startDate,
planningTypeId: 1,
assignmentMainTypeId: 1,
};
const response = await createTask(requestData);
if (id) {
requestData.id = parseInt(id, 10); // Ensure id is a number
}
console.log("Form Data Submitted:", requestData);
const response = await publishPlanning(requestData);
console.log("Form Data Submitted:", requestData);
console.log("response", response);
@ -181,7 +247,7 @@ export default function PublishMediahub() {
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then(() => {
router.push("/en/contributor/task");
router.push("/en/contributor/planning/mediahub");
});
};
@ -201,6 +267,25 @@ export default function PublishMediahub() {
});
};
const handleCheckboxChange = (levelId: any) => {
setCheckedLevels((prev: any) => {
const updatedLevels = new Set(prev);
if (updatedLevels.has(levelId)) {
updatedLevels.delete(levelId);
} else {
updatedLevels.add(levelId);
}
return updatedLevels;
});
};
const toggleExpand = (poldaId: any) => {
setExpandedPolda((prev: any) => ({
...prev,
[poldaId]: !prev[poldaId],
}));
};
return (
<Card>
<div className="px-6 py-6">
@ -218,7 +303,7 @@ export default function PublishMediahub() {
<Input
size="md"
type="text"
value={detail?.title}
defaultValue={detail?.title}
onChange={field.onChange}
placeholder="Enter Title"
/>
@ -228,7 +313,7 @@ export default function PublishMediahub() {
<p className="text-red-400 text-sm">{errors.title.message}</p>
)}
</div>
<div className="mt-5">
<div className="mt-6">
<Label>Output Tugas</Label>
<div className="flex flex-wrap gap-3 mt-1">
{Object.keys(taskOutput).map((key) => (
@ -247,10 +332,12 @@ export default function PublishMediahub() {
))}
</div>
</div>
<div className="flex flex-row items-center">
<div className="mt-5">
<Label>Pelaksana Tugas</Label>
<div className="flex flex-wrap mt-1 gap-2">
<div className="mt-6">
<Label>Pelaksana Tugas</Label>
</div>
<div className="flex flex-row items-center gap-3">
<div className="">
<div className="flex flex-wrap gap-2">
{Object.keys(unitSelection).map((key) => (
<div className="flex items-center gap-2" key={key}>
<Checkbox
@ -269,12 +356,91 @@ export default function PublishMediahub() {
))}
</div>
</div>
<Dialog>
<DialogTrigger asChild>
<Button variant="soft" size="sm" color="primary">
[Kustom]
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
<DialogHeader>
<DialogTitle>Daftar Wilayah Polda dan Polres</DialogTitle>
</DialogHeader>
<div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
{listDest.map((polda: any) => (
<div key={polda.id} className="border p-2">
<Label className="flex items-center">
<Checkbox
checked={checkedLevels.has(polda.id)}
onCheckedChange={() =>
handleCheckboxChange(polda.id)
}
className="mr-3"
/>
{polda.name}
<button
onClick={() => toggleExpand(polda.id)}
className="ml-2 focus:outline-none"
>
{expandedPolda[polda.id] ? (
<ChevronUp size={16} />
) : (
<ChevronDown size={16} />
)}
</button>
</Label>
{expandedPolda[polda.id] && (
<div className="ml-6 mt-2">
<Label className="block">
<Checkbox
checked={polda?.subDestination?.every(
(polres: any) =>
checkedLevels.has(polres.id)
)}
onCheckedChange={(isChecked) => {
const updatedLevels = new Set(
checkedLevels
);
polda?.subDestination?.forEach(
(polres: any) => {
if (isChecked) {
updatedLevels.add(polres.id);
} else {
updatedLevels.delete(polres.id);
}
}
);
setCheckedLevels(updatedLevels);
}}
className="mr-2"
/>
Pilih Semua Polres
</Label>
{polda?.subDestination?.map((polres: any) => (
<Label key={polres.id} className="block mt-1">
<Checkbox
checked={checkedLevels.has(polres.id)}
onCheckedChange={() =>
handleCheckboxChange(polres.id)
}
className="mr-2"
/>
{polres.name}
</Label>
))}
</div>
)}
</div>
))}
</div>
</DialogContent>
</Dialog>
</div>
<div className="mt-5">
<div className="mt-6">
<Label>Jenis Penugasan</Label>
<RadioGroup
value={detail.assignmentType.id.toString()} // State yang dipetakan ke value RadioGroup
onValueChange={(value) => setType(value)} // Mengubah nilai state ketika pilihan berubah
value={detail?.assignmentType?.id.toString()}
onValueChange={(value) => setType(value)}
className="flex flex-wrap gap-3"
>
<div className="flex items-center gap-2">
@ -291,12 +457,12 @@ export default function PublishMediahub() {
</div>
</RadioGroup>
</div>
<div className="mt-5">
<div className="mt-6">
<div className="flex flex-col">
<Label>Date</Label>
<div>
<Button
value={detail.date}
defaultValue={detail?.date}
variant="outline"
size="md"
className={cn(
@ -314,11 +480,11 @@ export default function PublishMediahub() {
</div>
</div>
</div>
<div className="mt-5">
<div className="mt-6">
<Label>Narasi Penugasan</Label>
<Controller
control={control}
name="naration"
name="description"
render={({ field: { onChange, value } }) => (
<JoditEditor
ref={editor}
@ -328,9 +494,9 @@ export default function PublishMediahub() {
/>
)}
/>
{errors.naration?.message && (
{errors.description?.message && (
<p className="text-red-400 text-sm">
{errors.naration.message}
{errors.description.message}
</p>
)}
</div>

View File

@ -20,16 +20,23 @@ import {
import { Checkbox } from "@/components/ui/checkbox";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import JoditEditor from "jodit-react";
import { createTask } from "@/service/task";
import { createTask, getUserLevelForAssignments } from "@/service/task";
import { cn } from "@/lib/utils";
import { format } from "date-fns";
import { CalendarIcon } from "lucide-react";
import { CalendarIcon, ChevronDown, ChevronUp } from "lucide-react";
import { id } from "date-fns/locale";
import { getPlanningById } from "@/service/planning/planning";
import { getPlanningById, publishPlanning } from "@/service/planning/planning";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
const taskSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }),
naration: z.string().min(2, {
description: z.string().min(2, {
message: "Narasi Penugasan harus lebih dari 2 karakter.",
}),
});
@ -70,6 +77,10 @@ export default function PublishMedsos() {
const [startDate, setStartDate] = useState<Date>(new Date());
const [detail, setDetail] = useState<medsosDetail>();
const [refresh] = useState(false);
const [listDest, setListDest] = useState([]); // Data Polda dan Polres
const [checkedLevels, setCheckedLevels] = useState(new Set());
const [expandedPolda, setExpandedPolda] = useState([{}]);
const [isLoading, setIsLoading] = useState(false);
const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
const [unitSelection, setUnitSelection] = useState({
@ -94,6 +105,30 @@ export default function PublishMedsos() {
setPlatformTypeVisible(selectedValue === 2);
};
useEffect(() => {
async function fetchPoldaPolres() {
setIsLoading(true);
try {
const response = await getUserLevelForAssignments();
setListDest(response.data.data.list);
const initialExpandedState = response.data.data.list.reduce(
(acc: any, polda: any) => {
acc[polda.id] = false;
return acc;
},
{}
);
setExpandedPolda(initialExpandedState);
console.log("polres", initialExpandedState);
} catch (error) {
console.error("Error fetching Polda/Polres data:", error);
} finally {
setIsLoading(false);
}
}
fetchPoldaPolres();
}, []);
useEffect(() => {
async function initState() {
if (id) {
@ -104,6 +139,13 @@ export default function PublishMedsos() {
if (details?.date) {
setStartDate(new Date(details.date)); // Konversi string tanggal ke objek Date
}
if (details?.assignedToLevel) {
const levels = new Set(
details.assignedToLevel.split(",").map(Number)
);
setCheckedLevels(levels);
}
}
}
initState();
@ -146,30 +188,49 @@ export default function PublishMedsos() {
};
const selectedOutputs = Object.keys(taskOutput)
.filter((key) => taskOutput[key as keyof typeof taskOutput]) // Ambil hanya yang `true`
.map((key) => fileTypeMapping[key as keyof typeof fileTypeMapping]) // Konversi ke nilai string
.filter((key) => taskOutput[key as keyof typeof taskOutput])
.map((key) => fileTypeMapping[key as keyof typeof fileTypeMapping])
.join(",");
const requestData = {
const requestData: {
id?: number;
title: string;
target: string;
taskType: string;
assignedToLevel: any;
assignmentPurpose: any;
assignmentTypeId: string;
fileTypeOutput: string;
description: string;
platformType: string | null;
date: any;
assignmentMainTypeId: number;
planningTypeId: number;
} = {
...data,
// assignmentType,
// assignmentCategory,
target: selectedTarget,
unitSelection,
assignedToRole: "3",
taskType: taskType,
broadcastType: broadcastType,
assignmentMainTypeId: mainType,
assignmentPurpose: "1",
assignedToLevel: checkedLevels,
assignmentPurpose: unitSelection,
assignmentTypeId: type,
fileTypeOutput: selectedOutputs,
id: null,
narration: data.naration,
description: data.description,
platformType: "",
title: data.title,
date: startDate,
planningTypeId: 2,
assignmentMainTypeId: 1,
};
const response = await createTask(requestData);
if (id) {
requestData.id = parseInt(id, 10); // Ensure id is a number
}
console.log("Form Data Submitted:", requestData);
const response = await publishPlanning(requestData);
console.log("Form Data Submitted:", requestData);
console.log("response", response);
@ -181,7 +242,7 @@ export default function PublishMedsos() {
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then(() => {
router.push("/en/contributor/task");
router.push("/en/contributor/planning/medsos-mediahub");
});
};
@ -201,6 +262,25 @@ export default function PublishMedsos() {
});
};
const handleCheckboxChange = (levelId: any) => {
setCheckedLevels((prev: any) => {
const updatedLevels = new Set(prev);
if (updatedLevels.has(levelId)) {
updatedLevels.delete(levelId);
} else {
updatedLevels.add(levelId);
}
return updatedLevels;
});
};
const toggleExpand = (poldaId: any) => {
setExpandedPolda((prev: any) => ({
...prev,
[poldaId]: !prev[poldaId],
}));
};
return (
<Card>
<div className="px-6 py-6">
@ -228,7 +308,7 @@ export default function PublishMedsos() {
<p className="text-red-400 text-sm">{errors.title.message}</p>
)}
</div>
<div className="mt-5">
<div className="mt-6">
<Label>Output Tugas</Label>
<div className="flex flex-wrap gap-3 mt-1">
{Object.keys(taskOutput).map((key) => (
@ -247,10 +327,12 @@ export default function PublishMedsos() {
))}
</div>
</div>
<div className="flex flex-row items-center">
<div className="mt-5">
<Label>Pelaksana Tugas</Label>
<div className="flex flex-wrap mt-1 gap-2">
<div className="mt-6">
<Label>Pelaksana Tugas</Label>
</div>
<div className="flex flex-row items-center gap-3">
<div>
<div className="flex flex-wrap gap-2">
{Object.keys(unitSelection).map((key) => (
<div className="flex items-center gap-2" key={key}>
<Checkbox
@ -269,8 +351,87 @@ export default function PublishMedsos() {
))}
</div>
</div>
<Dialog>
<DialogTrigger asChild>
<Button variant="soft" size="sm" color="primary">
[Kustom]
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
<DialogHeader>
<DialogTitle>Daftar Wilayah Polda dan Polres</DialogTitle>
</DialogHeader>
<div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
{listDest.map((polda: any) => (
<div key={polda.id} className="border p-2">
<Label className="flex items-center">
<Checkbox
checked={checkedLevels.has(polda.id)}
onCheckedChange={() =>
handleCheckboxChange(polda.id)
}
className="mr-3"
/>
{polda.name}
<button
onClick={() => toggleExpand(polda.id)}
className="ml-2 focus:outline-none"
>
{expandedPolda[polda.id] ? (
<ChevronUp size={16} />
) : (
<ChevronDown size={16} />
)}
</button>
</Label>
{expandedPolda[polda.id] && (
<div className="ml-6 mt-2">
<Label className="block">
<Checkbox
checked={polda?.subDestination?.every(
(polres: any) =>
checkedLevels.has(polres.id)
)}
onCheckedChange={(isChecked) => {
const updatedLevels = new Set(
checkedLevels
);
polda?.subDestination?.forEach(
(polres: any) => {
if (isChecked) {
updatedLevels.add(polres.id);
} else {
updatedLevels.delete(polres.id);
}
}
);
setCheckedLevels(updatedLevels);
}}
className="mr-2"
/>
Pilih Semua Polres
</Label>
{polda?.subDestination?.map((polres: any) => (
<Label key={polres.id} className="block mt-1">
<Checkbox
checked={checkedLevels.has(polres.id)}
onCheckedChange={() =>
handleCheckboxChange(polres.id)
}
className="mr-2"
/>
{polres.name}
</Label>
))}
</div>
)}
</div>
))}
</div>
</DialogContent>
</Dialog>
</div>
<div className="mt-5">
<div className="mt-6">
<Label>Jenis Penugasan</Label>
<RadioGroup
value={detail.assignmentType.id.toString()} // State yang dipetakan ke value RadioGroup
@ -291,7 +452,7 @@ export default function PublishMedsos() {
</div>
</RadioGroup>
</div>
<div className="mt-5">
<div className="mt-6">
<div className="flex flex-col">
<Label>Date</Label>
<div>
@ -314,11 +475,11 @@ export default function PublishMedsos() {
</div>
</div>
</div>
<div className="mt-5">
<div className="mt-6">
<Label>Narasi Penugasan</Label>
<Controller
control={control}
name="naration"
name="description"
render={({ field: { onChange, value } }) => (
<JoditEditor
ref={editor}
@ -328,9 +489,9 @@ export default function PublishMedsos() {
/>
)}
/>
{errors.naration?.message && (
{errors.description?.message && (
<p className="text-red-400 text-sm">
{errors.naration.message}
{errors.description.message}
</p>
)}
</div>

View File

@ -128,7 +128,7 @@ export default function FormEventDetail() {
)}
</div>
<div className="flex flex-row items-center">
<div className="mt-5">
<div className="mt-6">
<Label>Live Streaming</Label>
<div className="flex items-center gap-3">
<p>Aktifkan fitur live streaming</p>
@ -167,7 +167,7 @@ export default function FormEventDetail() {
</div>
)}
<div className="flex flex-col lg:flex-row mt-3 items-start lg:items-center justify-between">
<div className="flex flex-col lg:flex-row mt-6 items-start lg:items-center justify-between">
<div className="flex flex-col">
<Label className="mr-3 mb-1">Tanggal</Label>
<Popover>
@ -229,7 +229,7 @@ export default function FormEventDetail() {
</div>
</div>
</div>
<div>
<div className="mt-6">
{/* Kirim setValue ke MapHome */}
<MapHome
draggable
@ -253,7 +253,9 @@ export default function FormEventDetail() {
{errors.location?.message}
</div>
</div>
<p className="text-sm my-2 font-semibold">DI SAMPAIKAN OLEH</p>
<p className="text-sm my-2 font-semibold mt-6">
DI SAMPAIKAN OLEH
</p>
<div className="flex flex-col ">
<div className="mt-1">
<Label>Nama Pangkat</Label>

View File

@ -136,7 +136,7 @@ export default function FormDetailPressRillis() {
)}
</div>
<div className="flex flex-row items-center">
<div className="mt-5">
<div className="mt-6">
<Label>Live Streaming</Label>
<div className="flex items-center gap-3">
<p>Aktifkan fitur live streaming</p>
@ -175,7 +175,7 @@ export default function FormDetailPressRillis() {
</div>
)}
<div className="flex flex-col lg:flex-row mt-3 items-start lg:items-center justify-between">
<div className="flex flex-col lg:flex-row mt-6 items-start lg:items-center justify-between">
<div className="flex flex-col">
<Label className="mr-3 mb-1">Tanggal</Label>
<Popover>
@ -237,7 +237,7 @@ export default function FormDetailPressRillis() {
</div>
</div>
</div>
<div>
<div className="mt-6">
{/* Kirim setValue ke MapHome */}
<MapHome
draggable
@ -261,7 +261,7 @@ export default function FormDetailPressRillis() {
{errors.location?.message}
</div>
</div>
<div className="mt-5">
<div className="mt-6">
<Label>Invitation</Label>
<Select onValueChange={setSelectedTarget}>
<SelectTrigger size="md">
@ -278,7 +278,9 @@ export default function FormDetailPressRillis() {
</SelectContent>
</Select>
</div>
<p className="text-sm my-2 font-semibold">DI SAMPAIKAN OLEH</p>
<p className="text-sm my-2 font-semibold mt-6">
DI SAMPAIKAN OLEH
</p>
<div className="flex flex-col ">
<div className="mt-1">
<Label>Nama Pangkat</Label>

View File

@ -128,7 +128,7 @@ export default function FormDetailPressConference() {
)}
</div>
<div className="flex flex-row items-center">
<div className="mt-5">
<div className="mt-6">
<Label>Live Streaming</Label>
<div className="flex items-center gap-3">
<p>Aktifkan fitur live streaming</p>
@ -167,7 +167,7 @@ export default function FormDetailPressConference() {
</div>
)}
<div className="flex flex-col lg:flex-row mt-3 items-start lg:items-center justify-between">
<div className="flex flex-col lg:flex-row items-start lg:items-center justify-between mt-6">
<div className="flex flex-col">
<Label className="mr-3 mb-1">Tanggal</Label>
<Popover>
@ -229,7 +229,7 @@ export default function FormDetailPressConference() {
</div>
</div>
</div>
<div>
<div className="mt-6">
{/* Kirim setValue ke MapHome */}
<MapHome
draggable
@ -253,7 +253,9 @@ export default function FormDetailPressConference() {
{errors.location?.message}
</div>
</div>
<p className="text-sm my-2 font-semibold">DI SAMPAIKAN OLEH</p>
<p className="text-sm my-2 font-semiboldc mt-6">
DI SAMPAIKAN OLEH
</p>
<div className="flex flex-col ">
<div className="mt-1">
<Label>Nama Pangkat</Label>

View File

@ -20,7 +20,19 @@ import {
import { Checkbox } from "@/components/ui/checkbox";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import JoditEditor from "jodit-react";
import { createTask, getTask } from "@/service/task";
import {
createTask,
getTask,
getUserLevelForAssignments,
} from "@/service/task";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { ChevronDown, ChevronUp } from "lucide-react";
const taskSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }),
@ -74,6 +86,10 @@ export default function FormTaskDetail() {
const [selectedTarget, setSelectedTarget] = useState("all");
const [detail, setDetail] = useState<taskDetail>();
const [refresh] = useState(false);
const [listDest, setListDest] = useState([]); // Data Polda dan Polres
const [checkedLevels, setCheckedLevels] = useState(new Set());
const [expandedPolda, setExpandedPolda] = useState([{}]);
const [isLoading, setIsLoading] = useState(false);
const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
const [unitSelection, setUnitSelection] = useState({
@ -98,6 +114,30 @@ export default function FormTaskDetail() {
// setPlatformTypeVisible(selectedValue === 2);
// };
useEffect(() => {
async function fetchPoldaPolres() {
setIsLoading(true);
try {
const response = await getUserLevelForAssignments();
setListDest(response.data.data.list);
const initialExpandedState = response.data.data.list.reduce(
(acc: any, polda: any) => {
acc[polda.id] = false;
return acc;
},
{}
);
setExpandedPolda(initialExpandedState);
console.log("polres", initialExpandedState);
} catch (error) {
console.error("Error fetching Polda/Polres data:", error);
} finally {
setIsLoading(false);
}
}
fetchPoldaPolres();
}, []);
useEffect(() => {
async function initState() {
if (id) {
@ -105,6 +145,13 @@ export default function FormTaskDetail() {
const details = response.data?.data;
setDetail(details);
if (details?.assignedToLevel) {
const levels = new Set(
details.assignedToLevel.split(",").map(Number)
);
setCheckedLevels(levels);
}
}
}
initState();
@ -208,6 +255,25 @@ export default function FormTaskDetail() {
});
};
const handleCheckboxChange = (levelId: any) => {
setCheckedLevels((prev: any) => {
const updatedLevels = new Set(prev);
if (updatedLevels.has(levelId)) {
updatedLevels.delete(levelId);
} else {
updatedLevels.add(levelId);
}
return updatedLevels;
});
};
const toggleExpand = (poldaId: any) => {
setExpandedPolda((prev: any) => ({
...prev,
[poldaId]: !prev[poldaId],
}));
};
return (
<Card>
<div className="px-6 py-6">
@ -236,7 +302,7 @@ export default function FormTaskDetail() {
)}
</div>
<div className="flex flex-row items-center">
<div className="mt-5">
<div className="mt-6">
<Label>Tujuan Pemilihan Tugas</Label>
<Select onValueChange={setSelectedTarget}>
<SelectTrigger size="md">
@ -249,7 +315,7 @@ export default function FormTaskDetail() {
</SelectContent>
</Select>
</div>
<div className="flex flex-wrap gap-3 mt-5 pt-5 ml-3">
<div className="flex flex-wrap gap-3 mt-6 pt-5 ml-3">
{Object.keys(unitSelection).map((key) => (
<div className="flex items-center gap-2" key={key}>
<Checkbox
@ -267,8 +333,91 @@ export default function FormTaskDetail() {
</div>
))}
</div>
<div className="mt-6 pt-5 pl-3">
<Dialog>
<DialogTrigger asChild>
<Button variant="soft" size="sm" color="primary">
[Kustom]
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
<DialogHeader>
<DialogTitle>
Daftar Wilayah Polda dan Polres
</DialogTitle>
</DialogHeader>
<div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
{listDest.map((polda: any) => (
<div key={polda.id} className="border p-2">
<Label className="flex items-center">
<Checkbox
checked={checkedLevels.has(polda.id)}
onCheckedChange={() =>
handleCheckboxChange(polda.id)
}
className="mr-3"
/>
{polda.name}
<button
onClick={() => toggleExpand(polda.id)}
className="ml-2 focus:outline-none"
>
{expandedPolda[polda.id] ? (
<ChevronUp size={16} />
) : (
<ChevronDown size={16} />
)}
</button>
</Label>
{expandedPolda[polda.id] && (
<div className="ml-6 mt-2">
<Label className="block">
<Checkbox
checked={polda?.subDestination?.every(
(polres: any) =>
checkedLevels.has(polres.id)
)}
onCheckedChange={(isChecked) => {
const updatedLevels = new Set(
checkedLevels
);
polda?.subDestination?.forEach(
(polres: any) => {
if (isChecked) {
updatedLevels.add(polres.id);
} else {
updatedLevels.delete(polres.id);
}
}
);
setCheckedLevels(updatedLevels);
}}
className="mr-2"
/>
Pilih Semua Polres
</Label>
{polda?.subDestination?.map((polres: any) => (
<Label key={polres.id} className="block mt-1">
<Checkbox
checked={checkedLevels.has(polres.id)}
onCheckedChange={() =>
handleCheckboxChange(polres.id)
}
className="mr-2"
/>
{polres.name}
</Label>
))}
</div>
)}
</div>
))}
</div>
</DialogContent>
</Dialog>
</div>
</div>
<div className="mt-5">
<div className="mt-6">
<Label>Tipe Penugasan</Label>
<RadioGroup
value={detail.assignmentMainType.id.toString()} // State yang dipetakan ke value RadioGroup
@ -283,7 +432,7 @@ export default function FormTaskDetail() {
<Label htmlFor="medsos-mediahub">Medsos Mediahub</Label>
</RadioGroup>
</div>
<div className="mt-5">
<div className="mt-6">
<Label>Jenis Tugas </Label>
<RadioGroup
value={detail.taskType.toString()}
@ -297,7 +446,7 @@ export default function FormTaskDetail() {
</RadioGroup>
</div>
{/* RadioGroup Assignment Category */}
<div className="mt-5">
<div className="mt-6">
<Label>Jenis Penugasan</Label>
<RadioGroup
value={detail.assignmentType.id.toString()} // State yang dipetakan ke value RadioGroup
@ -318,7 +467,7 @@ export default function FormTaskDetail() {
</div>
</RadioGroup>
</div>
<div className="mt-5">
<div className="mt-6">
<Label>Output Tugas</Label>
<div className="flex flex-wrap gap-3">
{Object.keys(taskOutput).map((key) => (
@ -337,7 +486,7 @@ export default function FormTaskDetail() {
))}
</div>
</div>
<div className="mt-5">
<div className="mt-6">
<Label>Broadcast </Label>
<RadioGroup
value={broadcastType} // Nilai terpilih diambil dari state broadcastType
@ -358,7 +507,7 @@ export default function FormTaskDetail() {
</div>
</RadioGroup>
</div>
<div className="mt-5">
<div className="mt-6">
<Label>Narasi Penugasan</Label>
<Controller
control={control}

View File

@ -1,4 +1,4 @@
import { getAPIInterceptor } from "@/config/api";
import { getAPIInterceptor, postAPIInterceptor } from "@/config/api";
import { httpGetInterceptor } from "../http-config/http-interceptor-service";
export async function getPlanningSentPagination(
@ -16,3 +16,8 @@ export async function getPlanningById(id: any) {
const url = `planning?id=${id}`;
return getAPIInterceptor(url);
}
export async function publishPlanning(data: any) {
const url = "planning/publish";
return postAPIInterceptor(url, data);
}

View File

@ -58,7 +58,7 @@ export async function deleteTask(id: any) {
export async function getUserLevelForAssignments() {
const url = "/users/user-levels/assignment";
return getAPIInterceptor({ url });
return getAPIInterceptor(url);
}
export async function getAssignmentResponseList(id: any) {