@@ -557,10 +583,8 @@ const ProjectFlockTable = () => {
primaryButton={{
text: 'Ya',
color: 'success',
- onClick: async () => {
- toast.success('Project Flock berhasil di-approve!');
- confirmModal.closeModal();
- },
+ onClick: confirmationModalApproveClickHandler,
+ isLoading: isApproveLoading,
}}
/>
>
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index 1573426b..f3101f7d 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -14,7 +14,7 @@ import {
import { Icon } from '@iconify/react';
import { useFormik } from 'formik';
import { useRouter } from 'next/navigation';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { use, useEffect, useMemo, useRef, useState } from 'react';
import useSWR from 'swr';
import {
ProjectFlockFormSchema,
@@ -35,6 +35,8 @@ import { httpClient } from '@/services/http/client';
import { BaseApiResponse } from '@/types/api/api-general';
import axios from 'axios';
import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
interface ProjectFlockFormProps {
formType?: 'add' | 'edit' | 'detail';
@@ -66,6 +68,12 @@ const ProjectFlockForm = ({
initialValues?.flock?.id ?? 0
);
+ const deleteModal = useModal();
+ const confirmModal = useModal();
+
+ const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+ const [isApproveLoading, setIsApproveLoading] = useState(false);
+
// Fetch Data
const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({
search: '',
@@ -203,7 +211,7 @@ const ProjectFlockForm = ({
const optionChangeHandler = (
val: OptionType | OptionType[] | null,
- inputName: string,
+ inputName: string
) => {
formik.setFieldValue(inputName, val);
formik.setFieldValue(
@@ -218,7 +226,7 @@ const ProjectFlockForm = ({
formik.setFieldValue('category', (val as OptionType)?.value);
formik.setFieldValue('category_option', val);
formik.setFieldTouched('category', true);
- }
+ };
const kandangChangeHandler = (event: React.ChangeEvent
) => {
const { value, checked } = event.target;
@@ -240,7 +248,11 @@ const ProjectFlockForm = ({
formik.setFieldValue(
'kandang_ids',
optionsKandang
- .filter((kandang) => (kandang.status === 'NON_ACTIVE' || formik.values.kandang_ids.includes(kandang.id)))
+ .filter(
+ (kandang) =>
+ kandang.status === 'NON_ACTIVE' ||
+ formik.values.kandang_ids.includes(kandang.id)
+ )
.map((kandang) => kandang.id)
);
} else {
@@ -321,7 +333,7 @@ const ProjectFlockForm = ({
fcr_id: initialValues?.fcr?.id ?? 0,
location_id: initialValues?.location?.id ?? 0,
period: initialValues?.period ?? '',
- kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) ?? [],
+ kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id),
};
}, [initialValues]);
@@ -391,26 +403,6 @@ const ProjectFlockForm = ({
}
}, [formType, initialValues]);
- // Setelah data kandang difetch, centang otomatis kandang yang ada di initialValues
- useEffect(() => {
- if (formType != 'add' && isResponseSuccess(kandang)) {
- if (selectedLocation) {
- setOptionsKandang(kandang.data);
- setOpenSelectKandangs(true);
- const kandangIds =
- initialValues?.kandangs?.map((k: Kandang) => k.id) ?? [];
- formik.setFieldValue('kandang_ids', kandangIds);
- console.log("kandangIds");
- console.log(kandangIds);
- } else {
- setOptionsKandang([]);
- setOpenSelectKandangs(false);
- formik.setFieldValue('kandang_ids', []);
- initialValues.kandangs = [];
- }
- }
- }, [formType, kandang, initialValues]);
-
useEffect(() => {
formik.validateForm();
}, [formik.values]);
@@ -421,6 +413,43 @@ const ProjectFlockForm = ({
: formik.setFieldValue('period', '');
}, [periodFlocks]);
+ // Actions handler
+ const confirmationModalDeleteClickHandler = async () => {
+ setIsDeleteLoading(true);
+ const deleteProjectFlockRes = await ProjectFlockApi.delete(
+ initialValues?.id as number
+ );
+
+ if (isResponseSuccess(deleteProjectFlockRes)) {
+ toast.success(deleteProjectFlockRes?.message as string);
+ router.push('/production/project-flock');
+ }
+ if (isResponseError(deleteProjectFlockRes)) {
+ toast.error(deleteProjectFlockRes?.message as string);
+ }
+ setIsDeleteLoading(false);
+ };
+
+ const confirmationModalApproveClickHandler = async () => {
+ setIsApproveLoading(true);
+ const approveProjectFlockRes = await ProjectFlockApi.customRequest<
+ BaseApiResponse,
+ 'POST'
+ >(`/${initialValues?.id}/approve`, {
+ method: 'POST',
+ });
+
+ if (isResponseSuccess(approveProjectFlockRes)) {
+ toast.success('Project Flock berhasil di-approve!');
+ confirmModal.closeModal();
+ }
+ if (isResponseError(approveProjectFlockRes)) {
+ toast.error(approveProjectFlockRes?.message as string);
+ confirmModal.closeModal();
+ }
+ setIsApproveLoading(false);
+ };
+
return (
<>
@@ -459,6 +488,22 @@ const ProjectFlockForm = ({
)}
+