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

update field agent to optional on Provider

Browse Source
This commit is contained in:
Wikzyy
2025-04-10 11:09:33 +07:00
parent ebd11d082e
commit 07dfcf6074
2 changed files with 145 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/pages/master/provider/blocks/AddDialog.tsx
View File

@ -61,7 +61,17 @@ const AddDialog = () => {
show: false, show: false,
message: '' message: ''
}); });
const initialState = {
const initialState: {
name: string;
description: string;
type: string;
status: string;
transaction_type: string;
agent: string;
created_by: string;
created_at: string;
} = {
name: '', name: '',
description: '', description: '',
type: '', type: '',
@ -71,6 +81,7 @@ const AddDialog = () => {
created_by: '', created_by: '',
created_at: '' created_at: ''
}; };
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
const [customers, setCustomers] = useState<CustomerProps[]>([]); const [customers, setCustomers] = useState<CustomerProps[]>([]);
const [transactions, setTransactions] = useState<TransactionProps[]>([]); const [transactions, setTransactions] = useState<TransactionProps[]>([]);
@ -116,8 +127,7 @@ const AddDialog = () => {
formField.description.trim() === '' || formField.description.trim() === '' ||
formField.type.trim() === '' || formField.type.trim() === '' ||
formField.status.trim() === '' || formField.status.trim() === '' ||
formField.transaction_type === '' || formField.transaction_type === ''
formField.agent.trim() === ''
) { ) {
setAlert({ show: true, message: 'Please fill in all required fields.' }); setAlert({ show: true, message: 'Please fill in all required fields.' });
return; return;
@ -242,7 +252,7 @@ const AddDialog = () => {
<SelectValue placeholder="Select Type" /> <SelectValue placeholder="Select Type" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="h2h">H2H</SelectItem> <SelectItem value="h2h">Host to Host</SelectItem>
<SelectItem value="agent">Agent</SelectItem> <SelectItem value="agent">Agent</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
@ -294,56 +304,67 @@ const AddDialog = () => {
</div> </div>
</div> </div>
<div className="w-full"> {formField.type === 'agent' ? (
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="w-full">
<label className="form-label flex items-center gap-1 max-w-56"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
Agent Name<span className="text-red-500">*</span> <label className="form-label flex items-center gap-1 max-w-56">
</label> Agent Name<span className="text-red-500">*</span>
<Popover open={open} onOpenChange={setOpen}> </label>
<PopoverTrigger asChild> <Popover open={open} onOpenChange={setOpen}>
<button <PopoverTrigger asChild>
type="button" <button
className="input col-span-5 text-left" type="button"
style={{ color: 'inherit' }} className="input col-span-5 text-left"
> style={{ color: 'inherit' }}
{customers.find((customer) => customer.id === formField.agent)
?.username || 'Select Agent'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Agent..." />
<CommandList
className="max-h-[300px] overflow-y-auto"
style={{ touchAction: 'pan-y' }}
onWheel={(e) => {
e.currentTarget.scrollTop += e.deltaY;
}}
> >
<CommandEmpty>No Agent found.</CommandEmpty> {customers.find((customer) => customer.id === formField.agent)
<CommandGroup> ?.username || 'Select Agent'}
{customers.map((customer) => ( </button>
<CommandItem </PopoverTrigger>
key={customer.id} <PopoverContent className="w-[400px] p-0">
value={customer.username} <Command>
onSelect={() => { <CommandInput placeholder="Search Agent..." />
setFormField({ <CommandList
...formField, className="max-h-[300px] overflow-y-auto"
agent: customer.id style={{ touchAction: 'pan-y' }}
}); onWheel={(e) => {
setOpen(false); e.currentTarget.scrollTop += e.deltaY;
}} }}
> >
{customer.username} <CommandEmpty>No Agent found.</CommandEmpty>
</CommandItem> <CommandGroup>
))} {customers.map((customer) => (
</CommandGroup> <CommandItem
</CommandList> key={customer.id}
</Command> value={customer.username}
</PopoverContent> onSelect={() => {
</Popover> setFormField({
...formField,
agent: customer.id
});
setOpen(false);
}}
>
{customer.username}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div> </div>
</div> ) : (
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Agent Name<span className="text-red-500">*</span>
</label>
<Input type="text" placeholder="Type Agent Only" readOnly />
</div>
</div>
)}
<div className="flex justify-end gap-5"> <div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}> <Button type="button" variant="outline" onClick={resetForm}>

122
src/pages/master/provider/blocks/EditDialog.tsx
View File

@ -51,7 +51,17 @@ const EditDialog = () => {
show: false, show: false,
message: '' message: ''
}); });
const initialState = {
const initialState: {
name: string;
description: string;
type: string;
status: string;
transaction_type: string;
agent: string;
updated_by: string;
updated_at: string;
} = {
name: '', name: '',
description: '', description: '',
type: '', type: '',
@ -61,6 +71,7 @@ const EditDialog = () => {
updated_by: '', updated_by: '',
updated_at: '' updated_at: ''
}; };
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
const [transactions, setTransactions] = useState<TransactionProps[]>([]); const [transactions, setTransactions] = useState<TransactionProps[]>([]);
const [customers, setCustomers] = useState<CustomerProps[]>([]); const [customers, setCustomers] = useState<CustomerProps[]>([]);
@ -257,7 +268,7 @@ const EditDialog = () => {
<SelectValue placeholder="Select Type" /> <SelectValue placeholder="Select Type" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="h2h">H2H</SelectItem> <SelectItem value="h2h">Host to Host</SelectItem>
<SelectItem value="agent">Agent</SelectItem> <SelectItem value="agent">Agent</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
@ -309,56 +320,67 @@ const EditDialog = () => {
</div> </div>
</div> </div>
<div className="w-full"> {formField.type === 'agent' ? (
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="w-full">
<label className="form-label flex items-center gap-1 max-w-56"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
Agent Name<span className="text-red-500">*</span> <label className="form-label flex items-center gap-1 max-w-56">
</label> Agent Name<span className="text-red-500">*</span>
<Popover open={open} onOpenChange={setOpen}> </label>
<PopoverTrigger asChild> <Popover open={open} onOpenChange={setOpen}>
<button <PopoverTrigger asChild>
type="button" <button
className="input col-span-5 text-left" type="button"
style={{ color: 'inherit' }} className="input col-span-5 text-left"
> style={{ color: 'inherit' }}
{customers.find((customer) => customer.id === formField.agent)
?.fullname || 'Select Agent'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Agent..." />
<CommandList
className="max-h-[300px] overflow-y-auto"
style={{ touchAction: 'pan-y' }}
onWheel={(e) => {
e.currentTarget.scrollTop += e.deltaY;
}}
> >
<CommandEmpty>No Agent found.</CommandEmpty> {customers.find((customer) => customer.id === formField.agent)
<CommandGroup> ?.username || 'Select Agent'}
{customers.map((customer) => ( </button>
<CommandItem </PopoverTrigger>
key={customer.id} <PopoverContent className="w-[400px] p-0">
value={customer.username} <Command>
onSelect={() => { <CommandInput placeholder="Search Agent..." />
setFormField({ <CommandList
...formField, className="max-h-[300px] overflow-y-auto"
agent: customer.id style={{ touchAction: 'pan-y' }}
}); onWheel={(e) => {
setOpen(false); e.currentTarget.scrollTop += e.deltaY;
}} }}
> >
{customer.fullname} <CommandEmpty>No Agent found.</CommandEmpty>
</CommandItem> <CommandGroup>
))} {customers.map((customer) => (
</CommandGroup> <CommandItem
</CommandList> key={customer.id}
</Command> value={customer.username}
</PopoverContent> onSelect={() => {
</Popover> setFormField({
...formField,
agent: customer.id
});
setOpen(false);
}}
>
{customer.username}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div> </div>
</div> ) : (
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Agent Name<span className="text-red-500">*</span>
</label>
<Input type="text" placeholder="Type Agent Only" readOnly />
</div>
</div>
)}
<div className="flex justify-end"> <div className="flex justify-end">
<Button variant="default">Save Changes</Button> <Button variant="default">Save Changes</Button>