From 0dbcb83c54a4af5eaad674b1afd70f3db9427412 Mon Sep 17 00:00:00 2001 From: ValdiANS Date: Wed, 21 Jan 2026 12:37:53 +0700 Subject: [PATCH] feat: set default value for date, kandang ID, and category from url query --- .../daily-checklist/DailyChecklistContent.tsx | 276 +++++++++++------- 1 file changed, 176 insertions(+), 100 deletions(-) diff --git a/src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx b/src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx index 5ed0dd0c..9b2b6bf2 100644 --- a/src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx +++ b/src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx @@ -41,6 +41,7 @@ import { PhaseActivity } from '@/types/api/daily-checklist/phase-activity'; import DebouncedTextArea from '@/components/input/DebouncedTextArea'; import DropFileInput from '@/components/input/DropFileInput'; import Link from 'next/link'; +import { useRouter, useSearchParams, usePathname } from 'next/navigation'; import { Icon } from '@iconify/react'; // Static categories @@ -67,7 +68,23 @@ interface Phase { } export function DailyChecklistContent() { - const [kandangId, setKandangId] = useState(''); + const router = useRouter(); + const pathname = usePathname(); + const searchParams = useSearchParams(); + + const [kandangId, setKandangId] = useState( + searchParams.get('kandang_id') || '' + ); + const [date, setDate] = useState(() => { + const paramDate = searchParams.get('date'); + if (paramDate) return paramDate; + + const today = new Date(); + return today.toISOString().split('T')[0]; + }); + const [selectedCategory, setSelectedCategory] = useState( + searchParams.get('category') || '' + ); const { options: kandangOptions, isLoadingOptions: isLoadingKandangs } = useSelect(KandangApi.basePath, 'id', 'name', 'search', { @@ -104,12 +121,6 @@ export function DailyChecklistContent() { ? employeesRes.data || [] : []; - const [date, setDate] = useState(() => { - const today = new Date(); - return today.toISOString().split('T')[0]; - }); - - const [selectedCategory, setSelectedCategory] = useState(''); const [selectedPhaseIds, setSelectedPhaseIds] = useState([]); const [selectedEmployees, setSelectedEmployees] = useState< @@ -118,7 +129,7 @@ export function DailyChecklistContent() { const [dailyChecklistId, setDailyChecklistId] = useState(null); const [checklistStatus, setChecklistStatus] = useState('DRAFT'); - const [isEditMode, setIsEditMode] = useState(false); + // const [isEditMode, setIsEditMode] = useState(false); // Activities grouped by phase const [activitiesByPhase, setActivitiesByPhase] = useState<{ @@ -148,13 +159,57 @@ export function DailyChecklistContent() { const [searchAbk, setSearchAbk] = useState(''); const [searchPhase, setSearchPhase] = useState(''); - const [loading, setLoading] = useState(false); + const [isLoadingSubmit, setIsLoadingSubmit] = useState(false); + const [isLoadingDraft, setIsLoadingDraft] = useState(false); const [initialLoading, setInitialLoading] = useState(true); const [existingDocuments, setExistingDocuments] = useState([]); const [documents, setDocuments] = useState([]); const [deletedDocumentIds, setDeletedDocumentIds] = useState([]); + // Sync state to URL query params + useEffect(() => { + const params = new URLSearchParams(searchParams.toString()); + let pendingUpdate = false; + + // Sync date + if (date) { + if (params.get('date') !== date) { + params.set('date', date); + pendingUpdate = true; + } + } else if (params.has('date')) { + params.delete('date'); + pendingUpdate = true; + } + + // Sync kandang_id + if (kandangId) { + if (params.get('kandang_id') !== kandangId) { + params.set('kandang_id', kandangId); + pendingUpdate = true; + } + } else if (params.has('kandang_id')) { + params.delete('kandang_id'); + pendingUpdate = true; + } + + // Sync category + if (selectedCategory) { + if (params.get('category') !== selectedCategory) { + params.set('category', selectedCategory); + pendingUpdate = true; + } + } else if (params.has('category')) { + params.delete('category'); + pendingUpdate = true; + } + + if (pendingUpdate) { + router.replace(`${pathname}?${params.toString()}`); + } + }, [date, kandangId, selectedCategory, pathname, router, searchParams]); + // Format date for display const formatDateForDisplay = (dateStr: string) => { if (!dateStr) return 'Pilih tanggal'; @@ -179,7 +234,7 @@ export function DailyChecklistContent() { if (!date || !kandangId || !selectedCategory) { setDailyChecklistId(null); setChecklistStatus('DRAFT'); - setIsEditMode(false); + // setIsEditMode(false); setSelectedPhaseIds([]); setActivitiesByPhase({}); setTaskIdsByPhaseActivityId({}); @@ -216,7 +271,7 @@ export function DailyChecklistContent() { existingPhases.data.phases.length > 0 ) { // Existing checklist - EDIT MODE - setIsEditMode(true); + // setIsEditMode(true); const phaseIds = existingPhases.data.phases.map((p) => String(p.phase_id) ); @@ -234,7 +289,7 @@ export function DailyChecklistContent() { } } else { // New checklist - CREATE MODE - setIsEditMode(false); + // setIsEditMode(false); setSelectedPhaseIds([]); } } catch (error) { @@ -608,7 +663,7 @@ export function DailyChecklistContent() { // taskId, // hasTaskId: !!taskId, // checklistStatus, - // isEditable, + // isChecklistStatusDraft, // }); if (!taskId) { @@ -618,7 +673,7 @@ export function DailyChecklistContent() { return; } - if (!isEditable) { + if (!isChecklistStatusDraft) { console.warn( '[CHECKBOX] Checklist is not editable, status:', checklistStatus @@ -736,7 +791,7 @@ export function DailyChecklistContent() { return; } - setLoading(true); + setIsLoadingSubmit(true); try { const submitRes = await DailyChecklistApi.submit( @@ -757,13 +812,15 @@ export function DailyChecklistContent() { console.error('Error submitting:', error); toast.error('Terjadi kesalahan'); } finally { - setLoading(false); + setIsLoadingSubmit(false); } }; const handleSaveDraft = async () => { if (!dailyChecklistId) return; + setIsLoadingDraft(true); + const uploadImageRes = await DailyChecklistApi.uploadImage( Number(dailyChecklistId), 'DRAFT', @@ -774,9 +831,11 @@ export function DailyChecklistContent() { if (isResponseError(uploadImageRes)) { console.error('Error saving draft:', uploadImageRes.message); toast.error('Gagal menyimpan draft'); + setIsLoadingDraft(false); return; } + setIsLoadingDraft(false); toast.success('Draft tersimpan!'); }; @@ -838,7 +897,7 @@ export function DailyChecklistContent() { return grouped; }; - const isEditable = checklistStatus === 'DRAFT'; + const isChecklistStatusDraft = checklistStatus === 'DRAFT'; if (initialLoading) { return ( @@ -871,7 +930,7 @@ export function DailyChecklistContent() {

Daily Checklist

- {isEditMode && ( + {isChecklistStatusDraft && ( @@ -921,7 +980,7 @@ export function DailyChecklistContent() {