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

fix form add and edit

Browse Source 
- add type and code field
- fix field with response
This commit is contained in:
Wikzyy
2025-03-21 09:46:09 +07:00
parent 545ae06ea8 50810f539c
commit a4685289ec
6 changed files with 336 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/pages/master/products/blocks/AddDialog.tsx
View File

@ -15,13 +15,25 @@ import {
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from '@/components/ui/select';
interface ProviderProps {
id: number;
name: string;
}
const API_URL = apiConfig.service_master_data;
const AddDialog = () => {
const parentRef = useRef<any | null>(null);
const parsedUser = getAuth()?.user;
const { showAddDialog, handleAddDialog } = useManageProductsContext();
const { PostData } = useCallApi();
const { PostData, GetData } = useCallApi();
const { reload } = useDataGrid();
const [alert, setAlert] = useState({
show: false,
@ -29,17 +41,21 @@ const AddDialog = () => {
});
const initialState = {
name: '',
code: '',
type: '',
description: '',
price_point: 0,
price_cash: 0,
cashback_point: 0,
cashback_cash: 0,
status: '',
providerId: '',
provider: '',
process_on_third_party: '',
created_by: '',
created_at: ''
};
const [formField, setFormField] = useState(initialState);
const [providers, setProviders] = useState<ProviderProps[]>([]);
const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
@ -67,11 +83,30 @@ const AddDialog = () => {
[formField]
);
const doFetchProvider = useCallback(async (sorting: any) => {
try {
const response = await GetData(`${API_URL}/provider/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
// console.log('PROVIDER: ', response?.data);
setProviders(response?.data.list);
} catch (error) {
console.error('Error fetching provider', error);
}
}, []);
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (
formField.name.trim() === '' ||
formField.type.trim() === '' ||
formField.code.trim() === '' ||
formField.description.trim() === '' ||
formField.price_point === 0 ||
formField.price_cash === 0 ||
@ -90,6 +125,10 @@ const AddDialog = () => {
setAlert({ show: false, message: '' });
};
useEffect(() => {
doFetchProvider([{ id: 'id', desc: false }]);
}, []);
useEffect(() => {
if (showAddDialog) {
setFormField({
@ -113,7 +152,7 @@ const AddDialog = () => {
<DialogTitle>Product - Create</DialogTitle>
<DialogDescription></DialogDescription>
</DialogHeader>
<DialogBody ref={parentRef}>
<DialogBody ref={parentRef} className='overflow-y-auto'>
<div className="flex flex-col">
{alert.show && (
<Alert variant="danger">
@ -137,6 +176,34 @@ const AddDialog = () => {
</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">
Type<span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
value={formField.type}
onChange={(e) => setFormField({ ...formField, type: e.target.value })}
/>
</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">
Code<span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
value={formField.code}
onChange={(e) => setFormField({ ...formField, code: e.target.value })}
/>
</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">
@ -232,12 +299,18 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Status<span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
<Select
value={formField.status}
onChange={(e) => setFormField({ ...formField, status: e.target.value })}
/>
onValueChange={(value) => setFormField({ ...formField, status: value })}
>
<SelectTrigger>
<SelectValue placeholder="Select Status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Yes</SelectItem>
<SelectItem value="N">No</SelectItem>
</SelectContent>
</Select>
</div>
</div>
@ -246,12 +319,45 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Provider ID
</label>
<Input
className="input"
type="text"
value={formField.providerId}
onChange={(e) => setFormField({ ...formField, providerId: e.target.value })}
/>
<Select
value={formField.provider}
onValueChange={(value) =>
setFormField({ ...formField, provider: value.toString() })
}
>
<SelectTrigger>
<SelectValue placeholder="Select Provider" />
</SelectTrigger>
<SelectContent>
{providers.map((provider) => (
<SelectItem key={provider.id} value={provider.id.toString()}>
{provider.name}
</SelectItem>
))}
</SelectContent>
</Select>
</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">
Process on Third Party<span className="text-red-500">*</span>
</label>
<Select
value={formField.process_on_third_party}
onValueChange={(value) =>
setFormField({ ...formField, process_on_third_party: value })
}
>
<SelectTrigger>
<SelectValue placeholder="Select Status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Yes</SelectItem>
<SelectItem value="N">No</SelectItem>
</SelectContent>
</Select>
</div>
</div>

138
src/pages/master/products/blocks/EditDialog.tsx
View File

@ -15,6 +15,18 @@ import {
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from '@/components/ui/select';
interface ProviderProps {
id: string;
name: string;
}
const API_URL = apiConfig.service_master_data;
const EditDialog = () => {
@ -30,17 +42,21 @@ const EditDialog = () => {
});
const initialState = {
name: '',
code: '',
type: '',
description: '',
price_point: 0,
price_cash: 0,
cashback_point: 0,
cashback_cash: 0,
status: '',
providerId: '',
provider: '',
process_on_third_party: '',
updated_by: '',
updated_at: ''
};
const [formField, setFormField] = useState(initialState);
const [providers, setProviders] = useState<ProviderProps[]>([]);
const resetForm = () => {
setFormField(initialState);
@ -66,19 +82,40 @@ const EditDialog = () => {
[selectedProducts, formField]
);
const doFetchProvider = useCallback(async (sorting: any) => {
try {
const response = await GetData(`${API_URL}/provider/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
// console.log('PROVIDER: ', response?.data);
setProviders(response?.data.list);
} catch (error) {
console.error('Error fetching provider', error);
}
}, []);
const doFetchData = useCallback(async (id: string) => {
const response = await GetData(`${API_URL}/product/getdata/${selectedProducts}`, { id });
const response = await GetData(`${API_URL}/product/getdata/${id}`, { id });
console.log(response);
if (response?.status) {
setFormField((prev) => ({
...prev,
name: response.data.name,
type: response.data.type,
code: response.data.code,
description: response.data.description,
price_point: response.data.price_point,
price_cash: response.data.price_cash,
cashback_point: response.data.cashback_point,
cashback_cash: response.data.cashback_cash,
status: response.data.status
status: response.data.status,
provider: response.data.provider_id,
process_on_third_party: response.data.process_on_third_party
}));
} else {
setFormField(initialState);
@ -90,6 +127,8 @@ const EditDialog = () => {
if (
formField.name.trim() === '' ||
formField.type.trim() === '' ||
formField.code.trim() === '' ||
formField.description.trim() === '' ||
formField.price_point === 0 ||
formField.price_cash === 0 ||
@ -130,6 +169,10 @@ const EditDialog = () => {
}
}, [formattedTime]);
useEffect(() => {
doFetchProvider([{ 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">
@ -137,7 +180,7 @@ const EditDialog = () => {
<DialogTitle>Product - Update</DialogTitle>
<DialogDescription></DialogDescription>
</DialogHeader>
<DialogBody>
<DialogBody className="overflow-y-auto">
<div className="flex flex-col">
{alert.show && (
<Alert variant="danger">
@ -161,6 +204,34 @@ const EditDialog = () => {
</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">
Type<span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
value={formField.type}
onChange={(e) => setFormField({ ...formField, type: e.target.value })}
/>
</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">
Code<span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
value={formField.code}
onChange={(e) => setFormField({ ...formField, code: e.target.value })}
/>
</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">
@ -256,12 +327,18 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Status<span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
<Select
value={formField.status}
onChange={(e) => setFormField({ ...formField, status: e.target.value })}
/>
onValueChange={(e) => setFormField({ ...formField, status: e })}
>
<SelectTrigger>
<SelectValue placeholder="Select a Status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">Inactive</SelectItem>
</SelectContent>
</Select>
</div>
</div>
@ -270,12 +347,43 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Provider ID
</label>
<Input
className="input"
type="text"
value={formField.providerId}
onChange={(e) => setFormField({ ...formField, providerId: e.target.value })}
/>
<Select
value={formField.provider}
onValueChange={(e) => setFormField({ ...formField, provider: e })}
>
<SelectTrigger>
<SelectValue placeholder="Select a Provider" />
</SelectTrigger>
<SelectContent>
{providers.map((provider) => (
<SelectItem key={provider.id} value={provider.id}>
{provider.name}
</SelectItem>
))}
</SelectContent>
</Select>
</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">
Process on Third Party<span className="text-red-500">*</span>
</label>
<Select
value={formField.process_on_third_party}
onValueChange={(value) =>
setFormField({ ...formField, process_on_third_party: value })
}
>
<SelectTrigger>
<SelectValue placeholder="Select Status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Yes</SelectItem>
<SelectItem value="N">No</SelectItem>
</SelectContent>
</Select>
</div>
</div>

27
src/pages/master/profession/blocks/EditDialog.tsx
View File

@ -20,7 +20,7 @@ const API_URL = apiConfig.service_master_data;
const EditDialog = () => {
const { showEditDialog, handleEditDialog, selectedProfession } = useManageProfessionContext();
const { reload } = useDataGrid();
const { PutData } = useCallApi();
const { PutData, GetData } = useCallApi();
const parsedUser = getAuth()?.user;
const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
@ -62,6 +62,19 @@ const EditDialog = () => {
[selectedProfession, formField]
);
const doFetchData = useCallback(async (id: string) => {
const response = await GetData(`${API_URL}/profession/getdata/${id}`, { id });
if (response?.status) {
setFormField((prev) => ({
...prev,
name: response.data.name
}));
} else {
setFormField(initialState);
}
}, []);
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
@ -75,6 +88,12 @@ const EditDialog = () => {
setAlert({ show: false, message: '' });
};
useEffect(() => {
if (selectedProfession) {
doFetchData(selectedProfession);
}
}, [selectedProfession]);
useEffect(() => {
if (showEditDialog) {
setFormField({
@ -85,6 +104,12 @@ const EditDialog = () => {
}
}, [formattedTime]);
useEffect(() => {
if (showEditDialog === false) {
resetForm();
}
}, [showEditDialog]);
return (
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">

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

@ -91,22 +91,54 @@ const EditDialog = () => {
[selectedProvider, formField]
);
const doFetchData = useCallback(async () => {
if (selectedProvider) {
const data = provider.find((item) => item.id === selectedProvider);
if (data) {
setFormField((prev) => ({
...prev,
name: data.name,
description: data.description,
type: data.type,
status: data.status,
transactionTypeId: data.transactionTypeId,
agentId: data.agentId
}));
}
} else {
resetForm();
const getCustomerList = async (sorting: any) => {
try {
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
// console.log('CUSTOMER: ', response?.data);
setCustomers(response?.data.list);
} catch (error) {
console.error('Error fetching customer', error);
}
};
const getTransactionTypeList = async (sorting: any) => {
try {
const response = await GetData(`${API_URL_TRANSACTION}/transactiontype/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
// console.log('TRANSACTION TYPE: ', response?.data);
setTransactions(response?.data.list);
} catch (error) {
console.error('Error fetching transaction type', error);
}
};
const doFetchData = useCallback(async (id: string) => {
const response = await GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id });
if (response?.status) {
setFormField((prev) => ({
...prev,
name: response?.data.name,
description: response?.data.description,
type: response?.data.type,
status: response?.data.status,
transactionTypeId: response?.data.transactionTypeId,
agentId: response?.data.agentId
}));
}
}, []);
@ -130,9 +162,15 @@ const EditDialog = () => {
setAlert({ show: false, message: '' });
};
useEffect(() => {
if (showEditDialog === false) {
resetForm();
}
}, [showEditDialog]);
useEffect(() => {
if (selectedProvider) {
doFetchData();
doFetchData(selectedProvider);
}
}, [selectedProvider]);
@ -147,41 +185,6 @@ const EditDialog = () => {
}, [formattedTime]);
useEffect(() => {
const getCustomerList = async (sorting: any) => {
try {
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
// console.log('CUSTOMER: ', response?.data);
setCustomers(response?.data.list);
} catch (error) {
console.error('Error fetching customer', error);
}
};
const getTransactionTypeList = async (sorting: any) => {
try {
const response = await GetData(`${API_URL_TRANSACTION}/transactiontype/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
// console.log('TRANSACTION TYPE: ', response?.data);
setTransactions(response?.data.list);
} catch (error) {
console.error('Error fetching transaction type', error);
}
};
getCustomerList([{ id: 'msisdn', desc: false }]);
getTransactionTypeList([{ id: 'name', desc: false }]);
}, []);