refactor: modularize upload page into location, input, and settings sections
This commit is contained in:
117
src/components/form/SelectPopover.tsx
Normal file
117
src/components/form/SelectPopover.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo, useState } from 'react';
|
||||
import { Check, ChevronDown } from 'lucide-react';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from '@/components/ui/popover';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface SelectPopoverOption {
|
||||
value: string;
|
||||
label: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
interface SelectPopoverProps {
|
||||
options: readonly SelectPopoverOption[];
|
||||
value: string;
|
||||
onValueChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
searchPlaceholder?: string;
|
||||
emptyMessage?: string;
|
||||
disabled?: boolean;
|
||||
align?: 'start' | 'center' | 'end';
|
||||
}
|
||||
|
||||
export function SelectPopover({
|
||||
options,
|
||||
value,
|
||||
onValueChange,
|
||||
placeholder = 'Select option',
|
||||
searchPlaceholder = 'Search',
|
||||
emptyMessage = 'No options found.',
|
||||
disabled = false,
|
||||
align = 'start',
|
||||
}: SelectPopoverProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [search, setSearch] = useState('');
|
||||
const selectedOption = options.find((option) => option.value === value);
|
||||
const filteredOptions = useMemo(() => {
|
||||
const term = search.trim().toLowerCase();
|
||||
if (!term) return options;
|
||||
return options.filter((option) =>
|
||||
option.label.toLowerCase().includes(term),
|
||||
);
|
||||
}, [options, search]);
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={disabled}
|
||||
className="h-10 w-full justify-between px-3 font-normal shadow-none"
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
'truncate',
|
||||
!selectedOption && 'text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
{selectedOption?.label ?? placeholder}
|
||||
</span>
|
||||
<ChevronDown className="size-4 opacity-60" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent align={align} className="w-72 p-0 shadow-none">
|
||||
<div className="border-b p-3">
|
||||
<Input
|
||||
value={search}
|
||||
onChange={(event) => setSearch(event.target.value)}
|
||||
placeholder={searchPlaceholder}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="max-h-72 overflow-y-auto p-2">
|
||||
{filteredOptions.length ? (
|
||||
filteredOptions.map((option) => {
|
||||
const selected = option.value === value;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
disabled={option.disabled}
|
||||
onClick={() => {
|
||||
onValueChange(option.value);
|
||||
setOpen(false);
|
||||
}}
|
||||
className={cn(
|
||||
'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-muted',
|
||||
option.disabled && 'cursor-not-allowed opacity-60',
|
||||
)}
|
||||
>
|
||||
<span className="flex size-4 shrink-0 items-center justify-center">
|
||||
{selected ? <Check className="size-3" /> : null}
|
||||
</span>
|
||||
<span className="truncate">{option.label}</span>
|
||||
</button>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div className="px-2 py-6 text-center text-sm text-muted-foreground">
|
||||
{emptyMessage}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,6 @@
|
||||
export { FormField } from './FormField';
|
||||
export { MultiSelectPopover } from './MultiSelectPopover';
|
||||
export type { MultiSelectOption } from './MultiSelectPopover';
|
||||
export { SelectPopover } from './SelectPopover';
|
||||
export type { SelectPopoverOption } from './SelectPopover';
|
||||
export { PasswordField } from './PasswordField';
|
||||
|
||||
@@ -1,373 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Check, ArrowUp, ArrowDown } from 'lucide-react';
|
||||
import { ProjectSelect } from '@/components/lookups/ProjectSelect';
|
||||
import { PackageSelect } from '@/components/lookups/PackageSelect';
|
||||
import { SegmentSelect } from '@/components/lookups/SegmentSelect';
|
||||
import {
|
||||
projectService,
|
||||
packageService,
|
||||
chainageService,
|
||||
} from '@/services/api';
|
||||
import {
|
||||
Project,
|
||||
Package as PackageType,
|
||||
Chainage,
|
||||
SessionContext,
|
||||
} from '@/types';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
type ProjectSelectionSectionProps = {
|
||||
onSelectionComplete?: (session: SessionContext) => void;
|
||||
onSelectionChange?: (session: SessionContext | null) => void;
|
||||
asStep?: boolean;
|
||||
hideButton?: boolean;
|
||||
};
|
||||
|
||||
export function ProjectSelectionSection({
|
||||
onSelectionComplete,
|
||||
onSelectionChange,
|
||||
asStep = false,
|
||||
hideButton = false,
|
||||
}: ProjectSelectionSectionProps) {
|
||||
const [selectedProjectId, setSelectedProjectId] = useState('');
|
||||
const [selectedPackageId, setSelectedPackageId] = useState('');
|
||||
const [selectedChainageId, setSelectedChainageId] = useState('');
|
||||
const [selectedProject, setSelectedProject] = useState<Project | null>(null);
|
||||
const [selectedPackage, setSelectedPackage] = useState<PackageType | null>(
|
||||
null,
|
||||
);
|
||||
const [selectedChainage, setSelectedChainage] = useState<Chainage | null>(
|
||||
null,
|
||||
);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const lastReportedIdRef = useRef<string | null>(null);
|
||||
const latestProjectIdRef = useRef('');
|
||||
const latestPackageIdRef = useRef('');
|
||||
const latestChainageIdRef = useRef('');
|
||||
|
||||
const handleProjectChange = useCallback((projectId: string) => {
|
||||
latestProjectIdRef.current = projectId;
|
||||
latestPackageIdRef.current = '';
|
||||
latestChainageIdRef.current = '';
|
||||
|
||||
setSelectedProjectId(projectId);
|
||||
setSelectedPackageId('');
|
||||
setSelectedChainageId('');
|
||||
setSelectedProject(null);
|
||||
setSelectedPackage(null);
|
||||
setSelectedChainage(null);
|
||||
setError(null);
|
||||
|
||||
if (!projectId) {
|
||||
return;
|
||||
}
|
||||
|
||||
void projectService
|
||||
.getProjectById(projectId)
|
||||
.then((project) => {
|
||||
if (latestProjectIdRef.current === projectId) {
|
||||
setSelectedProject(project);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
if (latestProjectIdRef.current === projectId) {
|
||||
console.error('Failed to resolve project:', err);
|
||||
setError('Failed to load the selected project.');
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handlePackageChange = useCallback((packageId: string) => {
|
||||
latestPackageIdRef.current = packageId;
|
||||
latestChainageIdRef.current = '';
|
||||
|
||||
setSelectedPackageId(packageId);
|
||||
setSelectedChainageId('');
|
||||
setSelectedPackage(null);
|
||||
setSelectedChainage(null);
|
||||
setError(null);
|
||||
|
||||
if (!packageId) {
|
||||
return;
|
||||
}
|
||||
|
||||
void packageService
|
||||
.getPackageById(packageId)
|
||||
.then((pkg) => {
|
||||
if (latestPackageIdRef.current === packageId) {
|
||||
setSelectedPackage(pkg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
if (latestPackageIdRef.current === packageId) {
|
||||
console.error('Failed to resolve package:', err);
|
||||
setError('Failed to load the selected package.');
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleChainageChange = useCallback((chainageId: string) => {
|
||||
latestChainageIdRef.current = chainageId;
|
||||
|
||||
setSelectedChainageId(chainageId);
|
||||
setSelectedChainage(null);
|
||||
setError(null);
|
||||
|
||||
if (!chainageId) {
|
||||
return;
|
||||
}
|
||||
|
||||
void chainageService
|
||||
.getChainageById(chainageId)
|
||||
.then((chainage) => {
|
||||
if (latestChainageIdRef.current === chainageId) {
|
||||
setSelectedChainage(chainage);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
if (latestChainageIdRef.current === chainageId) {
|
||||
console.error('Failed to resolve segment:', err);
|
||||
setError('Failed to load the selected segment.');
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Handle change reporting
|
||||
useEffect(() => {
|
||||
if (onSelectionChange) {
|
||||
const currentIds =
|
||||
selectedProject && selectedPackage && selectedChainage
|
||||
? `${selectedProject.id}-${selectedPackage.id}-${selectedChainage.id}`
|
||||
: null;
|
||||
|
||||
if (currentIds !== lastReportedIdRef.current) {
|
||||
lastReportedIdRef.current = currentIds;
|
||||
|
||||
if (selectedProject && selectedPackage && selectedChainage) {
|
||||
onSelectionChange({
|
||||
projectId: selectedProject.id,
|
||||
projectName: selectedProject.name,
|
||||
packageId: selectedPackage.id,
|
||||
packageName: selectedPackage.name,
|
||||
chainageId: selectedChainage.id,
|
||||
chainageName: selectedChainage.segment_name,
|
||||
chainageDirection: selectedChainage.direction,
|
||||
});
|
||||
} else {
|
||||
onSelectionChange(null);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [selectedProject, selectedPackage, selectedChainage, onSelectionChange]);
|
||||
|
||||
const handleProceed = () => {
|
||||
if (
|
||||
selectedProject &&
|
||||
selectedPackage &&
|
||||
selectedChainage &&
|
||||
onSelectionComplete
|
||||
) {
|
||||
onSelectionComplete({
|
||||
projectId: selectedProject.id,
|
||||
projectName: selectedProject.name,
|
||||
packageId: selectedPackage.id,
|
||||
packageName: selectedPackage.name,
|
||||
chainageId: selectedChainage.id,
|
||||
chainageName: selectedChainage.segment_name,
|
||||
chainageDirection: selectedChainage.direction,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const isComplete = selectedProject && selectedPackage && selectedChainage;
|
||||
|
||||
// Step status helpers
|
||||
const getStepStatus = (step: number) => {
|
||||
if (step === 1) return selectedProjectId ? 'completed' : 'active';
|
||||
if (step === 2)
|
||||
return selectedPackageId
|
||||
? 'completed'
|
||||
: selectedProjectId
|
||||
? 'active'
|
||||
: 'pending';
|
||||
if (step === 3)
|
||||
return selectedChainageId
|
||||
? 'completed'
|
||||
: selectedPackageId
|
||||
? 'active'
|
||||
: 'pending';
|
||||
return 'pending';
|
||||
};
|
||||
|
||||
const content = (
|
||||
<>
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<div className="p-4 rounded-md bg-destructive/10 border border-destructive/20 text-destructive text-sm mb-6">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="project" className="text-sm font-semibold">
|
||||
Project
|
||||
</Label>
|
||||
<ProjectSelect
|
||||
value={selectedProjectId}
|
||||
onValueChange={handleProjectChange}
|
||||
enabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="package" className="text-sm font-semibold">
|
||||
Package
|
||||
</Label>
|
||||
<PackageSelect
|
||||
value={selectedPackageId}
|
||||
onValueChange={handlePackageChange}
|
||||
projectId={selectedProjectId}
|
||||
enabled={Boolean(selectedProjectId)}
|
||||
disabled={!selectedProjectId}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="chainage" className="text-sm font-semibold">
|
||||
Segment
|
||||
</Label>
|
||||
<SegmentSelect
|
||||
value={selectedChainageId}
|
||||
onValueChange={handleChainageChange}
|
||||
packageId={selectedPackageId}
|
||||
enabled={Boolean(selectedPackageId)}
|
||||
disabled={!selectedPackageId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Selected Summary - Only if not asStep or if specifically desired */}
|
||||
{!asStep && isComplete && (
|
||||
<div className="px-4 py-3 rounded-md bg-secondary/50 border text-sm mb-8">
|
||||
<div className="flex items-center gap-2 flex-wrap text-muted-foreground">
|
||||
<span className="font-semibold text-foreground">Selection:</span>
|
||||
<span className="text-foreground">{selectedProject?.name}</span>
|
||||
<span>/</span>
|
||||
<span className="text-foreground">{selectedPackage?.name}</span>
|
||||
<span>/</span>
|
||||
<span className="text-foreground flex items-center gap-1.5">
|
||||
{selectedChainage?.segment_name}
|
||||
<span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-muted text-[10px] font-bold uppercase border">
|
||||
{selectedChainage?.direction === 'UP' ? (
|
||||
<ArrowUp className="h-2.5 w-2.5" />
|
||||
) : (
|
||||
<ArrowDown className="h-2.5 w-2.5" />
|
||||
)}
|
||||
{selectedChainage?.direction}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Proceed Button */}
|
||||
{!hideButton && (
|
||||
<Button
|
||||
onClick={handleProceed}
|
||||
disabled={!isComplete}
|
||||
className="w-full h-14 text-base font-bold uppercase tracking-wider"
|
||||
size="lg"
|
||||
>
|
||||
{isComplete ? 'Proceed to Upload' : 'Select all fields to proceed'}
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
if (asStep) {
|
||||
return content;
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="overflow-hidden">
|
||||
<CardHeader className="pb-6">
|
||||
<div className="flex flex-col gap-6">
|
||||
<div>
|
||||
<CardTitle className="text-2xl font-bold">
|
||||
Select Project Segment
|
||||
</CardTitle>
|
||||
<CardDescription className="mt-2 text-base">
|
||||
Select Project, Package & Segment to begin intelligent road
|
||||
analysis.
|
||||
</CardDescription>
|
||||
</div>
|
||||
|
||||
{/* Step Progress Indicator */}
|
||||
<div className="flex items-center justify-center pt-2">
|
||||
{[1, 2, 3].map((step, index) => {
|
||||
const status = getStepStatus(step);
|
||||
const labels = ['Project', 'Package', 'Segment'];
|
||||
return (
|
||||
<div key={step} className="flex items-center">
|
||||
<div className="flex flex-col items-center">
|
||||
<div
|
||||
className={cn(
|
||||
'w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold transition-all',
|
||||
status === 'completed'
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: status === 'active'
|
||||
? 'bg-primary text-primary-foreground ring-4 ring-primary/10'
|
||||
: 'bg-muted text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
{status === 'completed' ? (
|
||||
<Check className="h-5 w-5" />
|
||||
) : (
|
||||
step
|
||||
)}
|
||||
</div>
|
||||
<span
|
||||
className={cn(
|
||||
'text-xs mt-2 font-medium',
|
||||
status === 'pending'
|
||||
? 'text-muted-foreground/60'
|
||||
: 'text-foreground',
|
||||
)}
|
||||
>
|
||||
{labels[index]}
|
||||
</span>
|
||||
</div>
|
||||
{index < 2 && (
|
||||
<div
|
||||
className={cn(
|
||||
'w-16 h-0.5 mx-2 mb-6 rounded-full',
|
||||
getStepStatus(step + 1) !== 'pending'
|
||||
? 'bg-primary'
|
||||
: 'bg-border',
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="pt-0">{content}</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user