refactor: implement project package segment lazy select
This commit is contained in:
72
src/components/lookups/PackageSelect.tsx
Normal file
72
src/components/lookups/PackageSelect.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
'use client';
|
||||
|
||||
import { AsyncSelect, usePaginatedSelect } from '@/components/async-select';
|
||||
import type { AsyncSelectOption } from '@/components/async-select';
|
||||
import { packageService } from '@/services/api';
|
||||
import type { Package } from '@/types';
|
||||
|
||||
import { packageKeys } from '@/app/(modules)/package/queries/packageKeys';
|
||||
import type { PackageSelectProps } from './PackageSelect.types';
|
||||
|
||||
const PACKAGE_PAGE_SIZE = 20;
|
||||
|
||||
function mapPackageOption(pkg: Package): AsyncSelectOption {
|
||||
return {
|
||||
value: pkg.id,
|
||||
label: pkg.name,
|
||||
};
|
||||
}
|
||||
|
||||
export function PackageSelect({
|
||||
value,
|
||||
onValueChange,
|
||||
projectId,
|
||||
enabled = true,
|
||||
disabled = false,
|
||||
portalContainer,
|
||||
}: PackageSelectProps) {
|
||||
const lookup = usePaginatedSelect<Package>({
|
||||
enabled,
|
||||
selectedValue: value,
|
||||
pageSize: PACKAGE_PAGE_SIZE,
|
||||
queryKey: (searchTerm) =>
|
||||
[
|
||||
...packageKeys.lists(),
|
||||
'async-lookup',
|
||||
projectId || 'all',
|
||||
searchTerm,
|
||||
PACKAGE_PAGE_SIZE,
|
||||
] as const,
|
||||
queryFn: async ({ searchTerm, skip, limit }) => {
|
||||
const params = {
|
||||
search_term: searchTerm || undefined,
|
||||
skip,
|
||||
limit,
|
||||
};
|
||||
const data = projectId
|
||||
? await packageService.getPackagesByProject(projectId, params)
|
||||
: await packageService.getPackages(params);
|
||||
|
||||
return { items: data.items, total: data.totalItems };
|
||||
},
|
||||
mapOption: mapPackageOption,
|
||||
resolveSelected: (packageId) =>
|
||||
packageId ? packageService.getPackageById(packageId) : Promise.resolve(null),
|
||||
resolveSelectedQueryKey: (packageId) =>
|
||||
packageId
|
||||
? packageKeys.detail(packageId)
|
||||
: [...packageKeys.details(), 'invalid', packageId],
|
||||
});
|
||||
|
||||
return (
|
||||
<AsyncSelect
|
||||
lookup={lookup}
|
||||
onValueChange={onValueChange}
|
||||
disabled={disabled}
|
||||
placeholder="Select package"
|
||||
searchPlaceholder="Search packages..."
|
||||
emptyMessage="No packages found."
|
||||
portalContainer={portalContainer}
|
||||
/>
|
||||
);
|
||||
}
|
||||
10
src/components/lookups/PackageSelect.types.ts
Normal file
10
src/components/lookups/PackageSelect.types.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import type { RefObject } from 'react';
|
||||
|
||||
export interface PackageSelectProps {
|
||||
value: string;
|
||||
onValueChange: (value: string) => void;
|
||||
projectId?: string;
|
||||
enabled?: boolean;
|
||||
disabled?: boolean;
|
||||
portalContainer?: RefObject<HTMLDivElement | null>;
|
||||
}
|
||||
67
src/components/lookups/ProjectSelect.tsx
Normal file
67
src/components/lookups/ProjectSelect.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
'use client';
|
||||
|
||||
import { AsyncSelect, usePaginatedSelect } from '@/components/async-select';
|
||||
import type { AsyncSelectOption } from '@/components/async-select';
|
||||
import { projectService } from '@/services/api';
|
||||
import type { Project } from '@/types';
|
||||
|
||||
import { projectKeys } from '@/app/(modules)/project/queries/projectKeys';
|
||||
import type { ProjectSelectProps } from './ProjectSelect.types';
|
||||
|
||||
const PROJECT_PAGE_SIZE = 20;
|
||||
|
||||
function mapProjectOption(project: Project): AsyncSelectOption {
|
||||
return {
|
||||
value: project.id,
|
||||
label: project.name,
|
||||
};
|
||||
}
|
||||
|
||||
export function ProjectSelect({
|
||||
value,
|
||||
onValueChange,
|
||||
enabled = true,
|
||||
disabled = false,
|
||||
portalContainer,
|
||||
}: ProjectSelectProps) {
|
||||
const lookup = usePaginatedSelect<Project>({
|
||||
enabled,
|
||||
selectedValue: value,
|
||||
pageSize: PROJECT_PAGE_SIZE,
|
||||
queryKey: (searchTerm) =>
|
||||
[
|
||||
...projectKeys.lists(),
|
||||
'async-lookup',
|
||||
searchTerm,
|
||||
PROJECT_PAGE_SIZE,
|
||||
] as const,
|
||||
queryFn: async ({ searchTerm, skip, limit }) => {
|
||||
const data = await projectService.getProjects({
|
||||
search_term: searchTerm || undefined,
|
||||
skip,
|
||||
limit,
|
||||
});
|
||||
|
||||
return { items: data.items, total: data.totalItems };
|
||||
},
|
||||
mapOption: mapProjectOption,
|
||||
resolveSelected: (projectId) =>
|
||||
projectId ? projectService.getProjectById(projectId) : Promise.resolve(null),
|
||||
resolveSelectedQueryKey: (projectId) =>
|
||||
projectId
|
||||
? projectKeys.detail(projectId)
|
||||
: [...projectKeys.details(), 'invalid', projectId],
|
||||
});
|
||||
|
||||
return (
|
||||
<AsyncSelect
|
||||
lookup={lookup}
|
||||
onValueChange={onValueChange}
|
||||
disabled={disabled}
|
||||
placeholder="Select project"
|
||||
searchPlaceholder="Search projects..."
|
||||
emptyMessage="No projects found."
|
||||
portalContainer={portalContainer}
|
||||
/>
|
||||
);
|
||||
}
|
||||
9
src/components/lookups/ProjectSelect.types.ts
Normal file
9
src/components/lookups/ProjectSelect.types.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import type { RefObject } from 'react';
|
||||
|
||||
export interface ProjectSelectProps {
|
||||
value: string;
|
||||
onValueChange: (value: string) => void;
|
||||
enabled?: boolean;
|
||||
disabled?: boolean;
|
||||
portalContainer?: RefObject<HTMLDivElement | null>;
|
||||
}
|
||||
74
src/components/lookups/SegmentSelect.tsx
Normal file
74
src/components/lookups/SegmentSelect.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
'use client';
|
||||
|
||||
import { AsyncSelect, usePaginatedSelect } from '@/components/async-select';
|
||||
import type { AsyncSelectOption } from '@/components/async-select';
|
||||
import { chainageService } from '@/services/api';
|
||||
import type { Chainage } from '@/types';
|
||||
|
||||
import { segmentKeys } from '@/app/(modules)/segment/queries/segmentKeys';
|
||||
import type { SegmentSelectProps } from './SegmentSelect.types';
|
||||
|
||||
const SEGMENT_PAGE_SIZE = 20;
|
||||
|
||||
function mapSegmentOption(segment: Chainage): AsyncSelectOption {
|
||||
return {
|
||||
value: segment.id,
|
||||
label: segment.segment_name,
|
||||
};
|
||||
}
|
||||
|
||||
export function SegmentSelect({
|
||||
value,
|
||||
onValueChange,
|
||||
packageId,
|
||||
enabled = true,
|
||||
disabled = false,
|
||||
portalContainer,
|
||||
}: SegmentSelectProps) {
|
||||
const lookup = usePaginatedSelect<Chainage>({
|
||||
enabled,
|
||||
selectedValue: value,
|
||||
pageSize: SEGMENT_PAGE_SIZE,
|
||||
queryKey: (searchTerm) =>
|
||||
[
|
||||
...segmentKeys.lists(),
|
||||
'async-lookup',
|
||||
packageId || 'all',
|
||||
searchTerm,
|
||||
SEGMENT_PAGE_SIZE,
|
||||
] as const,
|
||||
queryFn: async ({ searchTerm, skip, limit }) => {
|
||||
const params = {
|
||||
search_term: searchTerm || undefined,
|
||||
skip,
|
||||
limit,
|
||||
};
|
||||
const data = packageId
|
||||
? await chainageService.getChainagesByPackage(packageId, params)
|
||||
: await chainageService.getChainages(params);
|
||||
|
||||
return { items: data.items, total: data.totalItems };
|
||||
},
|
||||
mapOption: mapSegmentOption,
|
||||
resolveSelected: (segmentId) =>
|
||||
segmentId
|
||||
? chainageService.getChainageById(segmentId)
|
||||
: Promise.resolve(null),
|
||||
resolveSelectedQueryKey: (segmentId) =>
|
||||
segmentId
|
||||
? segmentKeys.detail(segmentId)
|
||||
: [...segmentKeys.details(), 'invalid', segmentId],
|
||||
});
|
||||
|
||||
return (
|
||||
<AsyncSelect
|
||||
lookup={lookup}
|
||||
onValueChange={onValueChange}
|
||||
disabled={disabled}
|
||||
placeholder="Select segment"
|
||||
searchPlaceholder="Search segments..."
|
||||
emptyMessage="No segments found."
|
||||
portalContainer={portalContainer}
|
||||
/>
|
||||
);
|
||||
}
|
||||
10
src/components/lookups/SegmentSelect.types.ts
Normal file
10
src/components/lookups/SegmentSelect.types.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import type { RefObject } from 'react';
|
||||
|
||||
export interface SegmentSelectProps {
|
||||
value: string;
|
||||
onValueChange: (value: string) => void;
|
||||
packageId?: string;
|
||||
enabled?: boolean;
|
||||
disabled?: boolean;
|
||||
portalContainer?: RefObject<HTMLDivElement | null>;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
@@ -10,14 +10,10 @@ import {
|
||||
} from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Loader2, Check, ArrowUp, ArrowDown } from 'lucide-react';
|
||||
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,
|
||||
@@ -38,23 +34,15 @@ type ProjectSelectionSectionProps = {
|
||||
hideButton?: boolean;
|
||||
};
|
||||
|
||||
let globalProjectsCache: Project[] | null = null;
|
||||
let projectsPromise: Promise<Project[]> | null = null;
|
||||
|
||||
export function ProjectSelectionSection({
|
||||
onSelectionComplete,
|
||||
onSelectionChange,
|
||||
asStep = false,
|
||||
hideButton = false,
|
||||
}: ProjectSelectionSectionProps) {
|
||||
// Data states
|
||||
const [projects, setProjects] = useState<Project[]>(
|
||||
globalProjectsCache || [],
|
||||
);
|
||||
const [packages, setPackages] = useState<PackageType[]>([]);
|
||||
const [chainages, setChainages] = useState<Chainage[]>([]);
|
||||
|
||||
// Selection states
|
||||
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,
|
||||
@@ -62,159 +50,99 @@ export function ProjectSelectionSection({
|
||||
const [selectedChainage, setSelectedChainage] = useState<Chainage | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
// Loading states
|
||||
const [loadingProjects, setLoadingProjects] = useState(!globalProjectsCache);
|
||||
const [loadingPackages, setLoadingPackages] = useState(false);
|
||||
const [loadingChainages, setLoadingChainages] = useState(false);
|
||||
|
||||
// Error state
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Load projects on mount
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
const lastReportedIdRef = useRef<string | null>(null);
|
||||
const latestProjectIdRef = useRef('');
|
||||
const latestPackageIdRef = useRef('');
|
||||
const latestChainageIdRef = useRef('');
|
||||
|
||||
const loadProjects = async () => {
|
||||
// Use cache if we already have it
|
||||
if (globalProjectsCache) {
|
||||
if (isMounted) {
|
||||
setProjects(globalProjectsCache);
|
||||
setLoadingProjects(false);
|
||||
}
|
||||
return;
|
||||
}
|
||||
const handleProjectChange = useCallback((projectId: string) => {
|
||||
latestProjectIdRef.current = projectId;
|
||||
latestPackageIdRef.current = '';
|
||||
latestChainageIdRef.current = '';
|
||||
|
||||
// If a fetch is already in flight, reuse that promise
|
||||
if (!projectsPromise) {
|
||||
projectsPromise = projectService
|
||||
.getProjects()
|
||||
.then((data) => {
|
||||
globalProjectsCache = data.items;
|
||||
return data.items;
|
||||
})
|
||||
.catch((err) => {
|
||||
projectsPromise = null; // Reset on error to allow retry
|
||||
throw err;
|
||||
});
|
||||
}
|
||||
setSelectedProjectId(projectId);
|
||||
setSelectedPackageId('');
|
||||
setSelectedChainageId('');
|
||||
setSelectedProject(null);
|
||||
setSelectedPackage(null);
|
||||
setSelectedChainage(null);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
setLoadingProjects(true);
|
||||
const data = await projectsPromise;
|
||||
if (isMounted) {
|
||||
setProjects(data);
|
||||
}
|
||||
} catch (err) {
|
||||
if (isMounted) {
|
||||
setError('Failed to load projects. Please check connection.');
|
||||
}
|
||||
} finally {
|
||||
if (isMounted) {
|
||||
setLoadingProjects(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
if (!projectId) {
|
||||
return;
|
||||
}
|
||||
|
||||
loadProjects();
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
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.');
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Load packages when project changes
|
||||
useEffect(() => {
|
||||
if (!selectedProject) {
|
||||
setPackages([]);
|
||||
setSelectedPackage(null);
|
||||
const handlePackageChange = useCallback((packageId: string) => {
|
||||
latestPackageIdRef.current = packageId;
|
||||
latestChainageIdRef.current = '';
|
||||
|
||||
setSelectedPackageId(packageId);
|
||||
setSelectedChainageId('');
|
||||
setSelectedPackage(null);
|
||||
setSelectedChainage(null);
|
||||
setError(null);
|
||||
|
||||
if (!packageId) {
|
||||
return;
|
||||
}
|
||||
|
||||
let isMounted = true;
|
||||
const loadPackages = async () => {
|
||||
try {
|
||||
setLoadingPackages(true);
|
||||
setError(null);
|
||||
setSelectedPackage(null);
|
||||
setSelectedChainage(null);
|
||||
setChainages([]);
|
||||
const data = await packageService.getPackagesByProject(
|
||||
selectedProject.id,
|
||||
);
|
||||
if (isMounted) {
|
||||
setPackages(data.items);
|
||||
void packageService
|
||||
.getPackageById(packageId)
|
||||
.then((pkg) => {
|
||||
if (latestPackageIdRef.current === packageId) {
|
||||
setSelectedPackage(pkg);
|
||||
}
|
||||
} catch (err) {
|
||||
if (isMounted) {
|
||||
console.error('Failed to load packages:', err);
|
||||
setError('Failed to load packages for the selected project.');
|
||||
})
|
||||
.catch((err) => {
|
||||
if (latestPackageIdRef.current === packageId) {
|
||||
console.error('Failed to resolve package:', err);
|
||||
setError('Failed to load the selected package.');
|
||||
}
|
||||
} finally {
|
||||
if (isMounted) {
|
||||
setLoadingPackages(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
loadPackages();
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [selectedProject]);
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Load chainages when package changes
|
||||
useEffect(() => {
|
||||
if (!selectedPackage) {
|
||||
setChainages([]);
|
||||
setSelectedChainage(null);
|
||||
const handleChainageChange = useCallback((chainageId: string) => {
|
||||
latestChainageIdRef.current = chainageId;
|
||||
|
||||
setSelectedChainageId(chainageId);
|
||||
setSelectedChainage(null);
|
||||
setError(null);
|
||||
|
||||
if (!chainageId) {
|
||||
return;
|
||||
}
|
||||
|
||||
let isMounted = true;
|
||||
const loadChainages = async () => {
|
||||
try {
|
||||
setLoadingChainages(true);
|
||||
setError(null);
|
||||
setSelectedChainage(null);
|
||||
const data = await chainageService.getChainagesByPackage(
|
||||
selectedPackage.id,
|
||||
);
|
||||
if (isMounted) {
|
||||
setChainages(data.items);
|
||||
void chainageService
|
||||
.getChainageById(chainageId)
|
||||
.then((chainage) => {
|
||||
if (latestChainageIdRef.current === chainageId) {
|
||||
setSelectedChainage(chainage);
|
||||
}
|
||||
} catch (err) {
|
||||
if (isMounted) {
|
||||
console.error('Failed to load chainages:', err);
|
||||
setError('Failed to load segments for the selected package.');
|
||||
})
|
||||
.catch((err) => {
|
||||
if (latestChainageIdRef.current === chainageId) {
|
||||
console.error('Failed to resolve segment:', err);
|
||||
setError('Failed to load the selected segment.');
|
||||
}
|
||||
} finally {
|
||||
if (isMounted) {
|
||||
setLoadingChainages(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
loadChainages();
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [selectedPackage]);
|
||||
|
||||
const handleProjectChange = (projectId: string) => {
|
||||
const project = projects.find((p) => p.id === projectId) || null;
|
||||
setSelectedProject(project);
|
||||
};
|
||||
|
||||
const handlePackageChange = (packageId: string) => {
|
||||
const pkg = packages.find((p) => p.id === packageId) || null;
|
||||
setSelectedPackage(pkg);
|
||||
};
|
||||
|
||||
const handleChainageChange = (chainageId: string) => {
|
||||
const chainage = chainages.find((chn) => chn.id === chainageId) || null;
|
||||
setSelectedChainage(chainage);
|
||||
};
|
||||
|
||||
// Cache the last reported state to prevent infinite loops
|
||||
const lastReportedIdRef = useRef<string | null>(null);
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Handle change reporting
|
||||
useEffect(() => {
|
||||
@@ -267,17 +195,17 @@ export function ProjectSelectionSection({
|
||||
|
||||
// Step status helpers
|
||||
const getStepStatus = (step: number) => {
|
||||
if (step === 1) return selectedProject ? 'completed' : 'active';
|
||||
if (step === 1) return selectedProjectId ? 'completed' : 'active';
|
||||
if (step === 2)
|
||||
return selectedPackage
|
||||
return selectedPackageId
|
||||
? 'completed'
|
||||
: selectedProject
|
||||
: selectedProjectId
|
||||
? 'active'
|
||||
: 'pending';
|
||||
if (step === 3)
|
||||
return selectedChainage
|
||||
return selectedChainageId
|
||||
? 'completed'
|
||||
: selectedPackage
|
||||
: selectedPackageId
|
||||
? 'active'
|
||||
: 'pending';
|
||||
return 'pending';
|
||||
@@ -293,120 +221,41 @@ export function ProjectSelectionSection({
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
{/* Project Dropdown */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="project" className="text-sm font-semibold">
|
||||
Project
|
||||
</Label>
|
||||
<Select
|
||||
value={selectedProject?.id || ''}
|
||||
<ProjectSelect
|
||||
value={selectedProjectId}
|
||||
onValueChange={handleProjectChange}
|
||||
disabled={loadingProjects}
|
||||
>
|
||||
<SelectTrigger id="project" className="h-11">
|
||||
{loadingProjects ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span>Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue placeholder="Select project" />
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{projects.map((project) => (
|
||||
<SelectItem key={project.id} value={project.id}>
|
||||
{project.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
enabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Package Dropdown */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="package" className="text-sm font-semibold">
|
||||
Package
|
||||
</Label>
|
||||
<Select
|
||||
value={selectedPackage?.id || ''}
|
||||
<PackageSelect
|
||||
value={selectedPackageId}
|
||||
onValueChange={handlePackageChange}
|
||||
disabled={!selectedProject || loadingPackages}
|
||||
>
|
||||
<SelectTrigger id="package" className="h-11">
|
||||
{loadingPackages ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span>Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue
|
||||
placeholder={
|
||||
selectedProject ? 'Select package' : 'Select project first'
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{packages.map((pkg) => (
|
||||
<SelectItem key={pkg.id} value={pkg.id}>
|
||||
{pkg.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
projectId={selectedProjectId}
|
||||
enabled={Boolean(selectedProjectId)}
|
||||
disabled={!selectedProjectId}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Chainage Dropdown */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="chainage" className="text-sm font-semibold">
|
||||
Segment
|
||||
</Label>
|
||||
<Select
|
||||
value={selectedChainage?.id || ''}
|
||||
<SegmentSelect
|
||||
value={selectedChainageId}
|
||||
onValueChange={handleChainageChange}
|
||||
disabled={!selectedPackage || loadingChainages}
|
||||
>
|
||||
<SelectTrigger id="chainage" className="h-11">
|
||||
{loadingChainages ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span>Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue
|
||||
placeholder={
|
||||
selectedPackage ? 'Select segment' : 'Select package first'
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{chainages.map((chn) => (
|
||||
<SelectItem key={chn.id} value={chn.id}>
|
||||
<div className="flex flex-col gap-0.5 py-0.5">
|
||||
<span className="font-semibold text-sm">
|
||||
{chn.segment_name}
|
||||
</span>
|
||||
<div className="flex items-center gap-2 text-[10px] text-muted-foreground font-medium">
|
||||
<span>
|
||||
{chn.chainage_start_km}-{chn.chainage_end_km} km
|
||||
</span>
|
||||
<span className="h-2.5 w-px bg-border" />
|
||||
<span className="flex items-center gap-1 uppercase">
|
||||
{chn.direction === 'UP' ? (
|
||||
<ArrowUp className="h-2.5 w-2.5" />
|
||||
) : (
|
||||
<ArrowDown className="h-2.5 w-2.5" />
|
||||
)}
|
||||
{chn.direction}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
packageId={selectedPackageId}
|
||||
enabled={Boolean(selectedPackageId)}
|
||||
disabled={!selectedPackageId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user