TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add select dropdown on search

Browse Source
This commit is contained in:
Wikzyy
2025-03-14 11:22:38 +07:00
parent 0ca59401be
commit 16b2e5a16d
1 changed files with 74 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
src/pages/master/postoadms/blocks/SearchDialog.tsx
View File

@ -11,14 +11,16 @@ import { Alert, KeenIcon } from '@/components';
import { Button } from '@/components/ui/button';
import { apiConfig } from '@/config/api.config';
import axios from 'axios';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from '@/components/ui/select';
import { useManagePostoAdmsContext } from '../hooks/useManagePostoAdmsContext';
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList
} from '@/components/ui/command';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
interface SucosProps {
id: number;
@ -29,6 +31,7 @@ const API_URL = apiConfig.service_master_data;
const SearchDialog = () => {
const parentRef = useRef<any | null>(null);
const [open, setOpen] = useState(false);
const { showSearchDialog, handleSearchDialog, postoAdms } = useManagePostoAdmsContext();
const [alert, setAlert] = useState({
show: false,
@ -60,6 +63,7 @@ const SearchDialog = () => {
if (response.data.status) {
setSucos(response.data.data);
console.log(sucos);
setIsFound(true);
console.log('Found postoadms: ', response.data.data);
} else {
@ -79,25 +83,22 @@ const SearchDialog = () => {
setIsFound(false);
setSucos([]);
};
// console.log(municipios);
return (
<Dialog open={showSearchDialog} onOpenChange={(open) => handleSearchDialog(open)}>
<Dialog open={showSearchDialog} onOpenChange={handleSearchDialog}>
<DialogContent className="container-fixed max-w-[700px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
<DialogTitle></DialogTitle>
<DialogDescription></DialogDescription>
<DialogHeader className="p-2 border-0">
<DialogTitle></DialogTitle>
<DialogDescription></DialogDescription>
<div className="flex items-center justify-between flex-wrap grow">
<div className="flex flex-col justify-center">
<h1 className="text-xl font-semibold leading-none text-gray-900">
Search Sucos
</h1>
<div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
<h1 className="text-xl font-semibold leading-none text-gray-900">Search Sucos</h1>
</div>
<div
className="cursor-pointer hover:opacity-100 opacity-50"
onClick={() => {
handleSearchDialog(false);
resetForm();
handleReset();
}}
>
<KeenIcon icon="cross" className="text-1.5xl" />
@ -105,68 +106,68 @@ const SearchDialog = () => {
</div>
</DialogHeader>
<DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
<div className="flex flex-col px-0">
{alert.show && (
<Alert variant="danger" className="mb-5">
{alert.message}
</Alert>
)}
<form action="" onSubmit={handleSubmit}>
<div className="card-body grid-cols-6 gap-5 p-0">
<div className="grid grid-cols-8 gap-2 w-full items-center">
<label className="form-label flex items-center gap-1 col-span-2">
Postu Administrativo Name<span className="text-red-500">*</span>
</label>
<form onSubmit={handleSubmit} className="flex flex-col px-5 gap-5">
{alert.show && <Alert variant="danger">{alert.message}</Alert>}
<Select
value={formField.id.toString()}
onValueChange={(target) => {
const selectedPostoadms = postoAdms.find((m) => m.posto_adms_id.toString() === target);
if (selectedPostoadms) {
setFormField({
...formField,
id: selectedPostoadms.posto_adms_id,
name: selectedPostoadms.posto_adms_name
});
}
}}
>
<SelectTrigger className="col-span-6">
<SelectValue placeholder="Select Municipios" />
</SelectTrigger>
<SelectContent>
{postoAdms.map((postoAdm) => (
<SelectItem key={postoAdm.posto_adms_id} value={postoAdm.posto_adms_id.toString()}>
{postoAdm.posto_adms_name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="grid grid-cols-8 gap-1 w-full items-center">
<label className="form-label flex items-center col-span-3">
Postu Administrativo Name<span className="text-red-500">*</span>
</label>
{isFound && sucos.length > 0 && (
<div className="mt-4 border-t pt-4">
<h2 className="text-md font-semibold">Sucos: </h2>
<br />
<div className="flex flex-col">
<span className="text-sm form-hint">
{sucos.map((suco) => suco.name).join(', ')}
</span>
</div>
</div>
)}
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button type="button" className="input col-span-5 text-left">
{formField.name || 'Select PostoAdms'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search PostoAdms..." />
<CommandList>
<CommandEmpty>No PostoAdms found.</CommandEmpty>
<CommandGroup>
{postoAdms.map((postoAdm) => (
<CommandItem
key={postoAdm.posto_adms_id}
value={postoAdm.posto_adms_name}
onSelect={() => {
setFormField({
id: postoAdm.posto_adms_id,
name: postoAdm.posto_adms_name
});
setOpen(false);
}}
>
{postoAdm.posto_adms_name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
<div className="flex justify-end pt-2.5 gap-5 col-span-6">
<Button variant={'outline'} type="reset" onClick={handleReset}>
Reset
</Button>
<Button variant={'default'} type="submit">
Search
</Button>
{isFound && sucos.length > 0 && (
<div className="mt-4 border-t pt-4">
<h2 className="text-md font-semibold">Sucos: </h2>
<div className="flex flex-col">
<span className="text-sm form-hint">
{sucos.map((suco) => suco.name).join(', ')}
</span>
</div>
</div>
</form>
</div>
)}
<div className="flex justify-end gap-4">
<Button type="reset" variant="outline" onClick={handleReset}>
Reset
</Button>
<Button type="submit" variant="default">
Search
</Button>
</div>
</form>
</DialogBody>
</DialogContent>
</Dialog>