From 3d910f78db57c674252b0dda4dab3cff7fe3abb6 Mon Sep 17 00:00:00 2001 From: ValdiANS Date: Fri, 24 Apr 2026 16:22:15 +0700 Subject: [PATCH] fix: set initial value to MarketingFilter --- .../pages/marketing/MarketingFilter.tsx | 72 ++++++++------- .../pages/marketing/MarketingTable.tsx | 88 ++++++++++++++++++- 2 files changed, 127 insertions(+), 33 deletions(-) diff --git a/src/components/pages/marketing/MarketingFilter.tsx b/src/components/pages/marketing/MarketingFilter.tsx index 86298598..8e1ab8c0 100644 --- a/src/components/pages/marketing/MarketingFilter.tsx +++ b/src/components/pages/marketing/MarketingFilter.tsx @@ -1,6 +1,6 @@ 'use client'; -import { RefObject, useMemo } from 'react'; +import { RefObject, useCallback, useMemo } from 'react'; import { useFormik } from 'formik'; import { Icon } from '@iconify/react'; import Modal from '@/components/Modal'; @@ -17,22 +17,31 @@ import { import { MarketingFilter } from '@/types/api/marketing/marketing'; import SelectInputCheckbox from '@/components/input/SelectInputCheckbox'; import { MarketingApi } from '@/services/api/marketing/marketing'; -import { CustomerApi } from '@/services/api/master-data'; +import { CustomerApi, ProductApi } from '@/services/api/master-data'; import { isResponseSuccess } from '@/lib/api-helper'; import { BaseMarketing, BaseSalesOrder } from '@/types/api/marketing/marketing'; import { ProjectFlockApi } from '@/services/api/production'; import { ProjectFlock } from '@/types/api/production/project-flock'; +import { Product } from '@/types/api/master-data/product'; interface MarketingFilterModal { ref: RefObject; onSubmit?: (values: MarketingFilter) => void; onReset?: () => void; + initialValues?: { + product_ids: OptionType[]; + status: OptionType | null; + customer: OptionType | null; + project_flock: OptionType | null; + project_flock_kandang: OptionType | null; + }; } const MarketingFilterModal = ({ ref, onSubmit, onReset, + initialValues, }: MarketingFilterModal) => { const closeModalHandler = () => { ref.current?.close(); @@ -40,36 +49,13 @@ const MarketingFilterModal = ({ // ===== OPTIONS ===== const { - rawData: productsRawData, + options: productsOptions, isLoadingOptions: isLoadingProductsOptions, setInputValue: setProductsInputValue, loadMore: loadMoreProducts, - } = useSelect( - MarketingApi.basePath, - 'id', - 'so_number', - 'search' - ); - - const productsOptions = useMemo(() => { - if (!productsRawData || !isResponseSuccess(productsRawData)) return []; - - const productsMap = new Map(); - - productsRawData.data.forEach((deliveryOrder: BaseMarketing) => { - deliveryOrder.sales_order?.forEach((so: BaseSalesOrder) => { - const product = so.product_warehouse?.product; - if (product?.id && product?.name) { - productsMap.set(product.id, { - value: product.id, - label: product.name, - }); - } - }); - }); - - return Array.from(productsMap.values()); - }, [productsRawData]); + } = useSelect(ProductApi.basePath, 'id', 'name', 'search', { + include_all: 'true', + }); const { options: customersOptions, @@ -102,7 +88,7 @@ const MarketingFilterModal = ({ ]; const formik = useFormik({ - initialValues: { + initialValues: initialValues || { product_ids: [], status: null, customer: null, @@ -114,11 +100,17 @@ const MarketingFilterModal = ({ onSubmit: async (values) => { const formattedValues: MarketingFilter = { product_ids: values.product_ids.map((item) => Number(item.value)), + product_names: values.product_ids.map((item) => item.label), status: values.status?.value.toString() || '', + status_name: values.status?.label || '-', customer_id: Number(values.customer?.value), - project_flock_id: Number(values.project_flock?.value) || undefined, + customer_name: values.customer?.label || '-', + project_flock_id: values.project_flock?.value || undefined, + project_flock_name: values.project_flock?.label, project_flock_kandang_id: Number(values.project_flock_kandang?.value) || undefined, + project_flock_kandang_name: + values.project_flock_kandang?.label || undefined, }; onSubmit?.(formattedValues); @@ -131,6 +123,22 @@ const MarketingFilterModal = ({ }, }); + const { resetForm } = formik; + + const formikResetHandler = useCallback(() => { + resetForm({ + values: { + product_ids: [], + status: null, + customer: null, + project_flock: null, + project_flock_kandang: null, + }, + }); + onReset?.(); + closeModalHandler(); + }, [resetForm, onReset, closeModalHandler]); + const productChangeHandler = (val: OptionType | OptionType[] | null) => { formik.setFieldValue('product_ids', val as OptionType[]); }; @@ -176,7 +184,7 @@ const MarketingFilterModal = ({ >
{/* Modal Header */} diff --git a/src/components/pages/marketing/MarketingTable.tsx b/src/components/pages/marketing/MarketingTable.tsx index 4c7edce1..06949171 100644 --- a/src/components/pages/marketing/MarketingTable.tsx +++ b/src/components/pages/marketing/MarketingTable.tsx @@ -189,10 +189,15 @@ const MarketingTable = () => { initial: { search: '', product_ids: '', + product_names: '', status: '', + status_name: '', customer_id: '', + customer_name: '', project_flock_id: '', + project_flock_name: '', project_flock_kandang_id: '', + project_flock_kandang_name: '', }, paramMap: { page: 'page', @@ -203,6 +208,13 @@ const MarketingTable = () => { project_flock_id: 'project_flock_id', project_flock_kandang_id: 'project_flock_kandang_id', }, + excludeKeysFromUrl: [ + 'product_names', + 'status_name', + 'customer_name', + 'project_flock_name', + 'project_flock_kandang_name', + ], persist: true, storeName: 'marketing-table', @@ -225,17 +237,21 @@ const MarketingTable = () => { values.product_ids?.map((item) => item.toString()).join(','), true ); + updateFilter('product_names', values.product_names?.join(',')); updateFilter('status', values.status ? values.status.toString() : '', true); + updateFilter('status_name', values.status_name, true); updateFilter( 'customer_id', values.customer_id ? values.customer_id.toString() : '', true ); + updateFilter('customer_name', values.customer_name, true); updateFilter( 'project_flock_id', values.project_flock_id ? values.project_flock_id.toString() : '', true ); + updateFilter('project_flock_name', values.project_flock_name ?? '', true); updateFilter( 'project_flock_kandang_id', values.project_flock_kandang_id @@ -243,6 +259,11 @@ const MarketingTable = () => { : '', true ); + updateFilter( + 'project_flock_kandang_name', + values.project_flock_kandang_name ?? '', + true + ); }; const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] = @@ -250,10 +271,15 @@ const MarketingTable = () => { const filterResetHandler = () => { updateFilter('product_ids', '', true); + updateFilter('product_names', '', true); updateFilter('status', '', true); + updateFilter('status_name', '', true); updateFilter('customer_id', '', true); + updateFilter('customer_name', '', true); updateFilter('project_flock_id', '', true); + updateFilter('project_flock_name', '', true); updateFilter('project_flock_kandang_id', '', true); + updateFilter('project_flock_kandang_name', '', true); }; const approveClickHandler = () => { @@ -333,6 +359,56 @@ const MarketingTable = () => { ? 'DELIVERY_ORDER' : null; + const marketingFilterInitialValues = useMemo(() => { + const productIds = tableFilterState.product_ids + ? tableFilterState.product_ids + .split(',') + .map((item) => item.trim()) + .filter(Boolean) + : []; + + const productLabels = tableFilterState.product_names + ? tableFilterState.product_names + .split(',') + .map((item) => item.trim()) + .filter(Boolean) + : []; + + return { + product_ids: productIds.map((value, idx) => ({ + value: Number(value), + label: productLabels[idx] || '-', + })), + status: tableFilterState.status + ? { + value: tableFilterState.status, + label: tableFilterState.status_name, + } + : null, + + customer: tableFilterState.customer_id + ? { + value: Number(tableFilterState.customer_id), + label: tableFilterState.customer_name, + } + : null, + + project_flock: tableFilterState.project_flock_id + ? { + value: Number(tableFilterState.project_flock_id), + label: tableFilterState.project_flock_name, + } + : null, + + project_flock_kandang: tableFilterState.project_flock_kandang_id + ? { + value: Number(tableFilterState.project_flock_kandang_id), + label: tableFilterState.project_flock_kandang_name, + } + : null, + }; + }, [tableFilterState]); + const approveMarketingHandler = async (notes: string) => { if (idsToProcess.length === 0) { toast.error(`Tidak ada data yang valid untuk di ${approveAction}.`); @@ -774,7 +850,16 @@ const MarketingTable = () => {
{ filterModal.openModal(); }} @@ -1146,6 +1231,7 @@ const MarketingTable = () => { ref={filterModal.ref} onSubmit={filterSubmitHandler} onReset={filterResetHandler} + initialValues={marketingFilterInitialValues} /> );