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

add dropdown for sucos id

Browse Source
This commit is contained in:
Wikzyy
2025-03-16 12:58:27 +07:00
parent 520a17872d
commit 1fc9d72dd6
5 changed files with 156 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/pages/master/aldeias/blocks/AddDialog.tsx
View File

@ -15,6 +15,20 @@ import {
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList
} from '@/components/ui/command';
interface SucosProps {
sucos_id: number;
sucos_name: string;
}
const API_URL = apiConfig.service_master_data;
@ -22,15 +36,17 @@ const AddDialog = () => {
const parentRef = useRef<any | null>(null);
const { showAddDialog, handleAddDialog } = useManageAldeiasContext();
const { reload } = useDataGrid();
const { PostData } = useCallApi();
const { PostData, GetData } = useCallApi();
const parsedUser = getAuth()?.user;
const [sucos, setSucos] = useState<SucosProps[]>([]);
const [open, setOpen] = useState(false);
const [alert, setAlert] = useState({
show: false,
message: ''
});
const initialState = {
name: '',
sucos: 0,
sucos_id: 0,
created_by: '',
created_at: ''
};
@ -65,12 +81,12 @@ const AddDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (formField.name === '' || formField.sucos === 0) {
if (formField.name === '' || formField.sucos_id === 0) {
setAlert({ show: true, message: 'Please fill in all required fields.' });
return;
}
// doCreateAldeias(e);
doCreateAldeias(e);
console.log(formField);
setAlert({ show: false, message: '' });
};
@ -85,6 +101,28 @@ const AddDialog = () => {
}
}, [formattedTime]);
useEffect(() => {
const fetchSucos = async (sorting: any) => {
try {
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
const response = await GetData(`${API_URL}/sucos/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
// console.log('SUCOS', response?.data);
setSucos(response?.data.list);
} catch (error) {
console.error('Error fetching municipios', error);
}
};
fetchSucos([{ id: 'name', desc: false }]);
}, []);
return (
<Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@ -121,16 +159,39 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Sucos ID<span className="text-red-500">*</span>
</label>
<Input
className="input"
type="number"
min={0}
value={formField.sucos === 0 ? '' : formField.sucos}
onChange={(e) => {
const value = parseInt(e.target.value, 10);
setFormField({ ...formField, sucos: isNaN(value) ? 0 : value });
}}
/>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button type="button" className="input col-span-5 text-left">
{sucos.find((suco) => suco.sucos_id === formField.sucos_id)?.sucos_name ||
'Select Sucos'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Sucos..." />
<CommandList>
<CommandEmpty>No Sucos found.</CommandEmpty>
<CommandGroup>
{sucos.map((suco) => (
<CommandItem
key={suco.sucos_id}
value={suco.sucos_name}
onSelect={() => {
setFormField({
...formField,
sucos_id: suco.sucos_id
});
setOpen(false);
}}
>
{suco.sucos_name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div>

91
src/pages/master/aldeias/blocks/EditDialog.tsx
View File

@ -15,21 +15,37 @@ import {
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList
} from '@/components/ui/command';
interface SucosProps {
sucos_id: number;
sucos_name: string;
}
const API_URL = apiConfig.service_master_data;
const EditDialog = () => {
const { showEditDialog, handleEditDialog, selectedAldeias } = useManageAldeiasContext();
const { showEditDialog, handleEditDialog, selectedAldeias, aldeias } = useManageAldeiasContext();
const { reload } = useDataGrid();
const { PutData } = useCallApi();
const { PutData, GetData } = useCallApi();
const parsedUser = getAuth()?.user;
const [sucos, setSucos] = useState<SucosProps[]>([]);
const [open, setOpen] = useState(false);
const [alert, setAlert] = useState({
show: false,
message: ''
});
const initialState = {
name: '',
sucos: 0,
sucos_id: 0,
updated_by: '',
updated_at: ''
};
@ -64,12 +80,12 @@ const EditDialog = () => {
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (formField.name === '' || formField.sucos === 0) {
if (formField.name === '' || formField.sucos_id === 0) {
setAlert({ show: true, message: 'Please fill in all required fields.' });
return;
}
// doUpdateAldeias(e);
doUpdateAldeias(e);
console.log(formField);
setAlert({ show: false, message: '' });
};
@ -84,6 +100,28 @@ const EditDialog = () => {
}
}, [formattedTime]);
useEffect(() => {
const fetchSucos = async (sorting: any) => {
try {
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
const response = await GetData(`${API_URL}/sucos/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
// console.log('SUCOS', response?.data);
setSucos(response?.data.list);
} catch (error) {
console.error('Error fetching municipios', error);
}
};
fetchSucos([{ id: 'name', desc: false }]);
}, []);
return (
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@ -120,16 +158,39 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Sucos ID<span className="text-red-500">*</span>
</label>
<Input
className="input"
type="number"
min={0}
value={formField.sucos === 0 ? '' : formField.sucos}
onChange={(e) => {
const value = parseInt(e.target.value, 10);
setFormField({ ...formField, sucos: isNaN(value) ? 0 : value });
}}
/>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button type="button" className="input col-span-5 text-left">
{sucos.find((suco) => suco.sucos_id === formField.sucos_id)?.sucos_name ||
'Select Sucos'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Sucos..." />
<CommandList>
<CommandEmpty>No Sucos found.</CommandEmpty>
<CommandGroup>
{sucos.map((suco) => (
<CommandItem
key={suco.sucos_id}
value={suco.sucos_name}
onSelect={() => {
setFormField({
...formField,
sucos_id: suco.sucos_id
});
setOpen(false);
}}
>
{suco.sucos_name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div>

4
src/pages/master/aldeias/blocks/ListToolbar.tsx
View File

@ -31,13 +31,13 @@ const ListToolbar = () => {
<KeenIcon icon="filter" />
</Button>
</DefaultTooltip>
<Button
{/* <Button
variant="outline"
className="h-7.5 text-[0.8rem]"
onClick={() => handleSearchDialog(true)}
>
Search Sucos
</Button>
</Button> */}
</div>
<div className="flex gap-3 items-center">
<Button

2
src/pages/master/aldeias/hooks/ManageAldeiasContext.tsx
View File

@ -150,7 +150,7 @@ const ManageAldeiasContextProvider = ({ children }: { children: React.ReactNode
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
filter: JSON.stringify(filter)
});
console.log(response?.data);
// console.log(response?.data);
setAldeias(response?.data.list);
return { data: response?.data.list, totalCount: response?.data.total_count };
} catch (error) {

4
src/pages/master/sucos/blocks/ListToolbar.tsx
View File

@ -33,13 +33,13 @@ const ListToolbar = () => {
<KeenIcon icon="filter" />
</Button>
</DefaultTooltip>
<Button
{/* <Button
variant="outline"
className="h-7.5 text-[0.8rem]"
onClick={() => handleSearchDialog(true)}
>
Search Sucos
</Button>
</Button> */}
</div>
<div className="flex gap-3 items-center">
<Button