fix(FE-86): fixing approve button and delete button

This commit is contained in:
randy-ar
2025-10-21 14:11:08 +07:00
parent c8cdb3e772
commit 9a04724095
4 changed files with 66 additions and 80 deletions
@@ -6,7 +6,7 @@ import { cn } from '@/lib/helper';
import Button from '@/components/Button';
import { Icon } from '@iconify/react';
import { useTableFilter } from '@/services/hooks/useTableFilter';
import { use, useState } from 'react';
import { useState } from 'react';
import useSWR from 'swr';
import { FlockApi } from '@/services/api/master-data';
import { useModal } from '@/components/Modal';
@@ -3,7 +3,6 @@
import Button from '@/components/Button';
import DebouncedTextInput from '@/components/input/DebouncedTextInput';
import SelectInput, { OptionType } from '@/components/input/SelectInput';
import TextInput from '@/components/input/TextInput';
import { useModal } from '@/components/Modal';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
import Table from '@/components/Table';
@@ -22,10 +21,9 @@ import { Icon } from '@iconify/react';
import {
CellContext,
ColumnDef,
ColumnSort,
SortingState,
} from '@tanstack/react-table';
import { ChangeEventHandler, useCallback, useEffect, useState } from 'react';
import { ChangeEventHandler, useState } from 'react';
import toast from 'react-hot-toast';
import useSWR from 'swr';
@@ -140,7 +138,6 @@ const ProjectFlockTable = () => {
const {
data: areas,
isLoading: isLoadingAreas,
mutate: refreshAreas,
} = useSWR(areaUrl, AreaApi.getAllFetcher);
const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
@@ -151,7 +148,6 @@ const ProjectFlockTable = () => {
const {
data: locations,
isLoading: isLoadingLocations,
mutate: refreshLocations,
} = useSWR(locationUrl, LocationApi.getAllFetcher);
const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
@@ -163,7 +159,6 @@ const ProjectFlockTable = () => {
const {
data: kandangs,
isLoading: isLoadingKandang,
mutate: refreshKandang,
} = useSWR(kandangUrl, KandangApi.getAllFetcher);
// Data to Options Mapping
@@ -337,19 +332,6 @@ const ProjectFlockTable = () => {
const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
updateFilter('search', e.target.value);
};
const updateSortingFilter = useCallback(
(
sortName: Exclude<keyof typeof tableFilterState, 'page' | 'pageSize'>,
sortFilter: ColumnSort | undefined
) => {
if (!sortFilter) {
updateFilter(sortName, '');
} else {
updateFilter(sortName, sortFilter.desc ? 'desc' : 'asc');
}
},
[updateFilter]
);
const handleSelectAll = (checked: boolean) => {
if (checked && isResponseSuccess(projectFlocks)) {
const allIds = projectFlocks.data.map((item) => item.id);
@@ -458,6 +440,7 @@ const ProjectFlockTable = () => {
(val as OptionType)?.value.toString()
);
}}
onInputChange={setAreaSelectInputValue}
isClearable
/>
<SelectInput
@@ -472,6 +455,7 @@ const ProjectFlockTable = () => {
(val as OptionType)?.value.toString()
);
}}
onInputChange={setLocationSelectInputValue}
isClearable
/>
<SelectInput
@@ -486,6 +470,7 @@ const ProjectFlockTable = () => {
(val as OptionType)?.value.toString()
);
}}
onInputChange={setKandangSelectInputValue}
isClearable
/>
<DebouncedTextInput
@@ -569,7 +554,7 @@ const ProjectFlockTable = () => {
selectedFlocks.length > 0
? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks
.map(
(flock, index) =>
(flock) =>
`${flock.flock?.name ?? '(Tanpa nama)'} - ${
flock.area?.name ?? '-'
}`
@@ -1,4 +1,3 @@
import { min } from 'moment';
import * as Yup from 'yup';
export const ProjectFlockFormSchema = Yup.object({
@@ -9,7 +9,6 @@ import {
FlockApi,
KandangApi,
LocationApi,
ProductCategoryApi,
} from '@/services/api/master-data';
import { Icon } from '@iconify/react';
import { useFormik } from 'formik';
@@ -106,14 +105,6 @@ const ProjectFlockForm = ({
FcrApi.getAllFetcher
);
const productCategoryUrl = `${
ProductCategoryApi.basePath
}?${new URLSearchParams({
search: '',
}).toString()}`;
const { data: productCategories, isLoading: isLoadingProductCategories } =
useSWR(productCategoryUrl, ProductCategoryApi.getAllFetcher);
const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
search: '',
location_id: selectedLocation == '' ? '0' : selectedLocation,
@@ -153,12 +144,6 @@ const ProjectFlockForm = ({
label: flock.name,
}))
: [];
const optionsProductCategory = isResponseSuccess(productCategories)
? productCategories?.data.map((productCategory) => ({
value: productCategory.id,
label: productCategory.name,
}))
: [];
useEffect(() => {
if (isResponseSuccess(locations)) {
@@ -168,7 +153,7 @@ const ProjectFlockForm = ({
}));
setOptionsLocation(options);
}
}, [locations]);
}, [locations, setSelectedLocation]);
useEffect(() => {
if (isResponseSuccess(kandang)) {
@@ -327,11 +312,16 @@ const ProjectFlockForm = ({
: null,
flock_id: initialValues?.flock?.id ?? 0,
area_id: initialValues?.area?.id ?? 0,
category: initialValues?.category as (NonNullable<"GROWING" | "LAYING" | undefined>),
category: initialValues?.category as NonNullable<
'GROWING' | 'LAYING' | undefined
>,
fcr_id: initialValues?.fcr?.id ?? 0,
location_id: initialValues?.location?.id ?? 0,
period: initialValues?.period ?? 0,
kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as (number | undefined)[],
kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as (
| number
| undefined
)[],
};
}, [initialValues]);
@@ -385,9 +375,11 @@ const ProjectFlockForm = ({
formik.setFieldValue('period', initialValues?.period);
}
}, [initialValues, setSelectedArea, formType]);
useEffect(() => {
formikSetValues(formikInitialValues);
}, [formikSetValues, formikInitialValues, formik]);
}, [formikSetValues, formikInitialValues]);
// Aktifkan lokasi jika formType = 'detail'
useEffect(() => {
if (formType === 'detail') {
@@ -408,9 +400,9 @@ const ProjectFlockForm = ({
}, [formik.values]);
useEffect(() => {
isResponseSuccess(periodFlocks)
? formik.setFieldValue('period', periodFlocks.data.next_period)
: formik.setFieldValue('period', '');
if(isResponseSuccess(periodFlocks)){
formik.setFieldValue('period', periodFlocks.data.next_period);
}
}, [periodFlocks]);
// Actions handler
@@ -488,6 +480,7 @@ const ProjectFlockForm = ({
</div>
</div>
)}
{formType == 'detail' && (
<div className='w-full py-4'>
<Button
variant='outline'
@@ -504,6 +497,7 @@ const ProjectFlockForm = ({
Approve
</Button>
</div>
)}
<form
className='w-auto h-auto'
onSubmit={formik.handleSubmit}
@@ -511,7 +505,9 @@ const ProjectFlockForm = ({
>
<div className='card bg-base-100 shadow w-full mb-6'>
<div className='card-body'>
<div className='card-title mb-4'>Informasi Umum {formik.values.kandang_ids && formik.values.kandang_ids.join(', ')}</div>
<div className='card-title mb-4'>
Informasi Umum
</div>
<div className='grid sm:grid-cols-2 gap-4'>
<SelectInput
@@ -603,6 +599,7 @@ const ProjectFlockForm = ({
errorMessage={formik.errors.period as string}
readOnly={formType === 'detail'}
disabled={true}
isLoading={isLoadingPeriodFlocks}
/>
</div>
</div>
@@ -633,6 +630,9 @@ const ProjectFlockForm = ({
open={openSelectKandangs}
>
<div className='overflow-x-auto'>
{isLoadingKandang && (
<span className="loading loading-dots loading-xl"></span>
)}
<table className='table'>
{/* head */}
<thead>
@@ -756,6 +756,7 @@ const ProjectFlockForm = ({
)}
</div>
</form>
{formType != 'add' && (
<div className='w-full'>
<Button
onClick={() => {
@@ -774,6 +775,7 @@ const ProjectFlockForm = ({
Delete
</Button>
</div>
)}
</section>
<ConfirmationModal