fix: form create task-ta
This commit is contained in:
parent
ec2d7eb203
commit
7c721dcc96
|
|
@ -43,7 +43,7 @@ import { getCsrfToken } from "@/service/auth";
|
||||||
import { loading } from "@/lib/swal";
|
import { loading } from "@/lib/swal";
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
import dynamic from "next/dynamic";
|
import dynamic from "next/dynamic";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn, getCookiesDecrypt } from "@/lib/utils";
|
||||||
import {
|
import {
|
||||||
Popover,
|
Popover,
|
||||||
PopoverContent,
|
PopoverContent,
|
||||||
|
|
@ -181,6 +181,32 @@ export default function FormTaskTa() {
|
||||||
mode: "all",
|
mode: "all",
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const [profile, setProfile] = useState<any>(null);
|
||||||
|
const userLevelId = Number(getCookiesDecrypt("ulie"));
|
||||||
|
const roleId = Number(getCookiesDecrypt("urie"));
|
||||||
|
const userId = Number(getCookiesDecrypt("uie"));
|
||||||
|
|
||||||
|
const MABES_LEVEL_ID = 216;
|
||||||
|
const APPROVER_ROLE_ID = 3;
|
||||||
|
const isMabes = userLevelId === MABES_LEVEL_ID;
|
||||||
|
const isApprover = roleId === APPROVER_ROLE_ID;
|
||||||
|
|
||||||
|
const isMabesApprover =
|
||||||
|
userLevelId === MABES_LEVEL_ID && roleId === APPROVER_ROLE_ID;
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function fetchUserLevel() {
|
||||||
|
try {
|
||||||
|
const res = await getUserLevelForAssignments();
|
||||||
|
setProfile(res?.data?.data);
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Failed fetch user level", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
fetchUserLevel();
|
||||||
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getDataAdditional();
|
getDataAdditional();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
@ -360,12 +386,20 @@ export default function FormTaskTa() {
|
||||||
const requestData = {
|
const requestData = {
|
||||||
...data,
|
...data,
|
||||||
assignedToUsers: handleExpertChange(),
|
assignedToUsers: handleExpertChange(),
|
||||||
|
// assignedToUsers: isMabesApprover ? "464" : handleExpertChange(),
|
||||||
assignmentType: taskType,
|
assignmentType: taskType,
|
||||||
assignmentTypeId: type,
|
assignmentTypeId: type,
|
||||||
expertCompetencies: Array.from(selectedCompetencies).join(","),
|
expertCompetencies: Array.from(selectedCompetencies).join(","),
|
||||||
attachmentUrl: cleanedLinks,
|
attachmentUrl: cleanedLinks,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
console.log("FINAL ASSIGNED TO:", {
|
||||||
|
isMabesApprover,
|
||||||
|
assignedToUsers: isMabesApprover
|
||||||
|
? String(roleId)
|
||||||
|
: handleExpertChange(),
|
||||||
|
});
|
||||||
|
|
||||||
const response = await createTaskTa(requestData);
|
const response = await createTaskTa(requestData);
|
||||||
const id = String(response?.data?.data.id);
|
const id = String(response?.data?.data.id);
|
||||||
|
|
||||||
|
|
@ -718,101 +752,109 @@ export default function FormTaskTa() {
|
||||||
</PopoverContent>
|
</PopoverContent>
|
||||||
</Popover>
|
</Popover>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-5 space-y-2">
|
{!isMabesApprover && (
|
||||||
<Label>
|
<div className="mt-5 space-y-2">
|
||||||
{t("areas-expertise", { defaultValue: "Areas Expertise" })}
|
<Label>
|
||||||
</Label>
|
{t("areas-expertise", { defaultValue: "Areas Expertise" })}
|
||||||
<div className="flex flex-wrap gap-4">
|
</Label>
|
||||||
{userCompetencies?.map((item: any) => (
|
<div className="flex flex-wrap gap-4">
|
||||||
<div className="flex items-center gap-2" key={item.id}>
|
{userCompetencies?.map((item: any) => (
|
||||||
<Checkbox
|
<div className="flex items-center gap-2" key={item.id}>
|
||||||
id={`comp-${item.id}`}
|
<Checkbox
|
||||||
checked={selectedCompetencies.has(item.id)}
|
id={`comp-${item.id}`}
|
||||||
onCheckedChange={() => handleCompetencyChange(item.id)}
|
checked={selectedCompetencies.has(item.id)}
|
||||||
/>
|
onCheckedChange={() => handleCompetencyChange(item.id)}
|
||||||
<Label htmlFor={`comp-${item.id}`}>{item.name}</Label>
|
/>
|
||||||
</div>
|
<Label htmlFor={`comp-${item.id}`}>{item.name}</Label>
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mt-5 space-y-2">
|
|
||||||
<Label>
|
|
||||||
{t("choose-expert", { defaultValue: "Choose Expert" })}
|
|
||||||
</Label>
|
|
||||||
<div className="flex flex-wrap gap-4">
|
|
||||||
<Dialog>
|
|
||||||
<DialogTrigger asChild>
|
|
||||||
<Button variant="soft" size="sm" color="primary">
|
|
||||||
[{"Pilih Tenaga Ahli"}]
|
|
||||||
</Button>
|
|
||||||
</DialogTrigger>
|
|
||||||
<DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Daftar Tenaga Ahli</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
<div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
|
|
||||||
{listExpert?.map((expert: any) => (
|
|
||||||
<div key={expert.id} className="border p-2">
|
|
||||||
<Label className="flex items-center">
|
|
||||||
<Checkbox
|
|
||||||
checked={checkedLevels.has(expert.id)}
|
|
||||||
onCheckedChange={() =>
|
|
||||||
handleCheckboxChange(expert.id)
|
|
||||||
}
|
|
||||||
className="mr-3"
|
|
||||||
/>
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<div className="font-bold">{expert.fullname}</div>
|
|
||||||
<div className="italic">({expert.username})</div>
|
|
||||||
</div>
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</DialogContent>
|
))}
|
||||||
</Dialog>
|
|
||||||
</div>
|
|
||||||
{checkedLevels.size > 0 && (
|
|
||||||
<div className="mt-3">
|
|
||||||
<Label className="text-sm text-gray-600 mb-2 block">
|
|
||||||
Tenaga Ahli Terpilih ({checkedLevels.size})
|
|
||||||
</Label>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{Array.from(checkedLevels).map((expertId) => {
|
|
||||||
const expert = listExpert?.find(
|
|
||||||
(exp: any) => exp.id === expertId
|
|
||||||
);
|
|
||||||
return expert ? (
|
|
||||||
<div
|
|
||||||
key={expert.id}
|
|
||||||
className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1.5 rounded-full border border-blue-200"
|
|
||||||
>
|
|
||||||
<span>{expert.fullname}</span>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => handleCheckboxChange(expert.id)}
|
|
||||||
className="ml-1 text-blue-600 hover:text-blue-800 hover:bg-blue-200 rounded-full p-0.5 transition-colors"
|
|
||||||
title="Remove expert"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
className="w-3 h-3"
|
|
||||||
fill="currentColor"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fillRule="evenodd"
|
|
||||||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
||||||
clipRule="evenodd"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
) : null;
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</div>
|
)}
|
||||||
|
{!isMabesApprover && (
|
||||||
|
<div className="mt-5 space-y-2">
|
||||||
|
<Label>
|
||||||
|
{t("choose-expert", { defaultValue: "Choose Expert" })}
|
||||||
|
</Label>
|
||||||
|
<div className="flex flex-wrap gap-4">
|
||||||
|
<Dialog>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button variant="soft" size="sm" color="primary">
|
||||||
|
[{"Pilih Tenaga Ahli"}]
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Daftar Tenaga Ahli</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
|
||||||
|
{listExpert?.map((expert: any) => (
|
||||||
|
<div key={expert.id} className="border p-2">
|
||||||
|
<Label className="flex items-center">
|
||||||
|
<Checkbox
|
||||||
|
checked={checkedLevels.has(expert.id)}
|
||||||
|
onCheckedChange={() =>
|
||||||
|
handleCheckboxChange(expert.id)
|
||||||
|
}
|
||||||
|
className="mr-3"
|
||||||
|
/>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<div className="font-bold">
|
||||||
|
{expert.fullname}
|
||||||
|
</div>
|
||||||
|
<div className="italic">
|
||||||
|
({expert.username})
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
{checkedLevels.size > 0 && (
|
||||||
|
<div className="mt-3">
|
||||||
|
<Label className="text-sm text-gray-600 mb-2 block">
|
||||||
|
Tenaga Ahli Terpilih ({checkedLevels.size})
|
||||||
|
</Label>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{Array.from(checkedLevels).map((expertId) => {
|
||||||
|
const expert = listExpert?.find(
|
||||||
|
(exp: any) => exp.id === expertId
|
||||||
|
);
|
||||||
|
return expert ? (
|
||||||
|
<div
|
||||||
|
key={expert.id}
|
||||||
|
className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1.5 rounded-full border border-blue-200"
|
||||||
|
>
|
||||||
|
<span>{expert.fullname}</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => handleCheckboxChange(expert.id)}
|
||||||
|
className="ml-1 text-blue-600 hover:text-blue-800 hover:bg-blue-200 rounded-full p-0.5 transition-colors"
|
||||||
|
title="Remove expert"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-3 h-3"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||||
|
clipRule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : null;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<div className="mt-5 space-y-2">
|
<div className="mt-5 space-y-2">
|
||||||
<Label>{t("description", { defaultValue: "Description" })}</Label>
|
<Label>{t("description", { defaultValue: "Description" })}</Label>
|
||||||
<Controller
|
<Controller
|
||||||
|
|
|
||||||
|
|
@ -168,6 +168,13 @@ export function getMenuList(pathname: string, t: any): Group[] {
|
||||||
icon: "heroicons:shopping-cart",
|
icon: "heroicons:shopping-cart",
|
||||||
children: [],
|
children: [],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
href: "/contributor/task-ta",
|
||||||
|
label: "penugasan TA",
|
||||||
|
active: pathname.includes("/contributor/task-ta"),
|
||||||
|
icon: "heroicons:shopping-cart",
|
||||||
|
children: [],
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue