tbfajri/aso
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

CRUD Doctor Hospital

Browse Source
This commit is contained in:
pajri
2023-02-09 13:15:45 +07:00
parent 6491f4d3e3
commit 387658a992
20 changed files with 1236 additions and 616 deletions
Download Patch File Download Diff File Expand all files Collapse all files

591
frontend/dashboard/src/pages/Master/Hospitals/Form.tsx
View File

@@ -65,7 +65,6 @@ const LabelStyle = styled(Typography)(({ theme }) => ({
}));
const HeaderStyle = styled('header')(({ theme }) => ({
padding: theme.spacing(5),
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
@@ -76,7 +75,6 @@ const Title = styled(Typography)(({ theme }) => ({
boxShadow: 'none',
// paddingBottom: theme.spacing(3),
fontWeight: 700,
color: '#005B7F',
}));
// const [timezone, setTimezone] = React.useState('');
@@ -110,10 +108,6 @@ export default function OrganizationsForm({ isEdit, currentOrganizations }: Prop
const NewCorporateSchema = Yup.object().shape({
name: Yup.string().required('Name is required'),
code: Yup.string().required('Corporate Code is required'),
active: Yup.boolean().required('Corporate Status is required'),
lat: Yup.string().required('Latitude is required'),
lng: Yup.string().required('Longitude is required'),
timezone: Yup.string().required('Timezone is required'),
// file: Yup.boolean().required('Corporate Status is required'),
});
@@ -133,12 +127,6 @@ export default function OrganizationsForm({ isEdit, currentOrganizations }: Prop
village_id: currentOrganizations?.village_id || '',
postal_code: currentOrganizations?.postal_code || '',
description: currentOrganizations?.description || '',
technology: currentOrganizations?.technology || '',
support_services: currentOrganizations?.support_services || '',
merchant_code: currentOrganizations?.merchant_code || '',
merchant_key: currentOrganizations?.merchant_key || '',
image_url: currentOrganizations?.image_url || '',
region_groups: currentOrganizations?.region_groups || '',
}),
// eslint-disable-next-line react-hooks/exhaustive-deps
[currentOrganizations]
@@ -192,25 +180,15 @@ export default function OrganizationsForm({ isEdit, currentOrganizations }: Prop
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isEdit, currentOrganizations]);
const currentImage = currentOrganizations?.image_url;
console.log('currentImage', currentImage);
console.log('current_image', currentImage);
const [file, setFile] = useState(null);
console.log('file', file);
const onSubmit = async (data: FormValuesProps) => {
try {
const formData = new FormData();
console.log('data', data);
formData.append('name', data.name);
formData.append('code', data.code);
formData.append('phone', data.phone);
formData.append('lat', data.lat);
formData.append('lng', data.lng);
formData.append('address', data.address);
formData.append('timezone', data.timezone);
formData.append('active', data.active ? '1' : '0');
if (data.province_id === currentOrganizations?.province_id) {
formData.append('province_id', data.province_id);
@@ -235,21 +213,12 @@ export default function OrganizationsForm({ isEdit, currentOrganizations }: Prop
} else {
formData.append('village_id', data.village_id?.value ?? '');
}
if (data.region_groups === currentOrganizations?.region_groups) {
formData.append('region_groups', data.region_groups);
} else {
formData.append('region_groups', data.region_groups?.value ?? '');
}
formData.append('postal_code', data.postal_code);
formData.append('description', data.description);
formData.append('technology', data.technology);
formData.append('support_services', data.support_services);
formData.append('merchant_code', data.merchant_code);
formData.append('merchant_key', data.merchant_key);
formData.append('image', file);
if (!isEdit) {
console.log('formData', formData);
const response = await axios.post('/organizations', formData);
} else {
formData.append('_method', 'PUT');
@@ -263,9 +232,10 @@ export default function OrganizationsForm({ isEdit, currentOrganizations }: Prop
!isEdit ? 'Organizations Created Successfully!' : 'Organizations Udpated Successfully!',
{ variant: 'success' }
);
navigate('/master/organizations');
navigate('/master/hospitals');
} catch (error: any) {
if (error && error.response.status === 422) {
console.log('error', error.response.data.errors);
for (const [key, value] of Object.entries(error.response.data.errors)) {
setError(key, { message: value[0] });
enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
@@ -281,34 +251,10 @@ export default function OrganizationsForm({ isEdit, currentOrganizations }: Prop
}
};
const [valueTab, setValueTab] = React.useState('1');
const handleChangeTab = (event: React.SyntheticEvent, newValueTab: string) => {
setValueTab(newValueTab);
};
const handleDrop = useCallback(
(acceptedFiles) => {
setValue(
'logo',
acceptedFiles.map((file: Blob | MediaSource) =>
Object.assign(file, {
preview: URL.createObjectURL(file),
})
)
);
},
[setValue]
);
const handleRemove = (file: File | string) => {
setValue('logo', null);
};
const [province, setProvince] = useState<any>([]);
const [city, setCity] = useState<any>([]);
const [district, setDistrict] = useState<any>([]);
// const [village, setVillage] = useState<any>([]);
const [village, setVillage] = useState<any>([]);
useEffect(() => {
axios.get('/province').then((res) => {
@@ -335,17 +281,15 @@ export default function OrganizationsForm({ isEdit, currentOrganizations }: Prop
}
};
// if (values.province_id) {
// if (values.city_id) {
// loadDistrict();
// } else {
// loadCity();
// }
// } else {
// axios.get('/province').then((res) => {
// setProvince(res.data.data.map((item: any) => ({ value: item.id, label: item.name })));
// });
// }
const loadVillage = async () => {
if (values.district_id == currentOrganizations?.district_id) {
const res = await axios.get('/village?district_id=' + values.district_id);
setVillage(res.data.data.map((item: any) => ({ value: item.id, label: item.name })));
} else {
const res = await axios.get('/village?district_id=' + values.district_id?.value);
setVillage(res.data.data.map((item: any) => ({ value: item.id, label: item.name })));
}
};
if (values.province_id) {
loadCity();
@@ -354,12 +298,11 @@ export default function OrganizationsForm({ isEdit, currentOrganizations }: Prop
if (values.city_id) {
loadDistrict();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [values.province_id, values.city_id, values.district_id]);
console.log('province', values.province_id);
console.log('city', values.city_id);
console.log('district', values.district_id);
if (values.district_id) {
loadVillage();
}
}, [values.province_id, values.city_id, values.district_id, values.village_id]);
const findValueProvince = province.find(
(item: any) => item.value === currentOrganizations?.province_id
@@ -368,53 +311,8 @@ export default function OrganizationsForm({ isEdit, currentOrganizations }: Prop
const findValueDistrict = district.find(
(item: any) => item.value === currentOrganizations?.district_id
);
console.log('findValueProvince', findValueProvince);
console.log('findValueCity', findValueCity);
console.log('findValueDistrict', findValueDistrict);
const timezone = [
{
value: 'WIB',
label: 'WIB',
},
{
value: 'WITA',
label: 'WITA',
},
{
value: 'WIT',
label: 'WIT',
},
];
const region_groups = [
{
value: 'Jabodetabek',
label: 'Jabodetabek',
},
{
value: 'Jawa',
label: 'Jawa',
},
{
value: 'Kalimantan',
label: 'Kalimantan',
},
{
value: 'Papua',
label: 'Papua',
},
{
value: 'Sulawesi',
label: 'Sulawesi',
},
{
value: 'Sumatera',
label: 'Sumatera',
},
];
const findVaalueGroupWilayah = region_groups.find(
(item: any) => item.value === currentOrganizations?.region_groups
const findValueVillage = village.find(
(item: any) => item.value === currentOrganizations?.village_id
);
return (
@@ -431,326 +329,147 @@ export default function OrganizationsForm({ isEdit, currentOrganizations }: Prop
<StatusLabel value={values.active} />
</Grid>
</HeaderStyle>
<Box sx={{ width: '100%', typography: 'body1' }}>
<TabContext value={valueTab}>
<Box
sx={{
borderBottom: 1,
borderColor: 'divider',
backgroundColor: '#F4F6F8',
pl: 5,
pr: 5,
}}
>
<TabList onChange={handleChangeTab} aria-label="lab API tabs example">
<Tab label="Rumah Sakit" value="1" sx={{ pr: 5, pl: 5 }} />
<Tab label="Informasi" value="2" sx={{ pr: 5, pl: 5 }} />
<Tab label="Duitku Setting" value="3" sx={{ pr: 5, pl: 5 }} />
</TabList>
</Box>
<TabPanel value="1">
<Box sx={{ width: '100%', p: 5 }}>
<Grid container rowSpacing={4} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
<Grid item xs={12}>
<LabelStyle>Nama Rumah Sakit</LabelStyle>
<RHFTextField name="name" placeholder="Tuliskan Nama Rumah Sakit" />
</Grid>
<Grid item xs={12} md={12}>
<LabelStyle>Pilih Foto Rumah Sakit</LabelStyle>
<Box sx={{ width: '100%' }}>
<MyDropzone setFile={setFile} currentImage={currentImage} />
</Box>
</Grid>
<Grid item xs={12}>
<LabelStyle>Nomor IGD</LabelStyle>
<RHFTextField name="phone" placeholder="Tuliskan No IGD" />
</Grid>
<Grid item xs={12}>
<LabelStyle>Code Rumah Sakit</LabelStyle>
<RHFTextField name="code" placeholder="Tuliskan Code Rumah Sakit" />
</Grid>
<Grid item xs={12}>
<LabelStyle>Group Wilayah</LabelStyle>
<Controller
name="region_groups"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
id="combo-box-demo"
options={region_groups}
getOptionLabel={(option) =>
option.label ?? findVaalueGroupWilayah?.label ?? ''
}
value={value}
onChange={(event: any, newValue: any) => {
console.log('newValue', newValue);
setValue('region_groups', newValue?.value);
onChange(newValue);
}}
renderInput={(params) => (
<TextField
{...params}
label="Group Wilayah"
variant="outlined"
fullWidth
/>
)}
/>
)}
/>
</Grid>
<Grid item xs={12}>
<LabelStyle>Alamat</LabelStyle>
<RHFTextField name="address" placeholder="Tuliskan Alamat" />
</Grid>
<Grid item xs={12} md={6}>
<LabelStyle>Provinsi</LabelStyle>
{/*
<Controller
name="province_id"
control={control}
render={({ field: { onChange, value } }) => (
<Select
className="input-container"
size="medium"
disabled={!province?.length}
value={value}
onChange={(e: any) => {
onChange(e);
}}
fullWidth
MenuProps={{
PaperProps: {
sx: {
maxHeight: 224,
width: 250,
p: 1,
},
},
}}
>
{province?.map((item: any) => (
<MenuItem key={item.value} value={item.value}>
{item.label}
</MenuItem>
))}
</Select>
)}
/> */}
<Box sx={{ width: '100%', typography: 'body1', mt: 2 }}>
<Grid container rowSpacing={4} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
<Grid item xs={12}>
<LabelStyle>Nama Rumah Sakit</LabelStyle>
<RHFTextField name="name" placeholder="Tuliskan Nama Rumah Sakit" />
</Grid>
<Controller
name="province_id"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
id="combo-box-demo"
options={province}
getOptionLabel={(option) =>
option.label ?? findValueProvince?.label ?? ''
}
value={value}
onChange={(event: any, newValue: any) => {
console.log('newValue', newValue);
setValue('province_id', newValue?.value);
onChange(newValue);
}}
renderInput={(params) => (
<TextField
{...params}
label="Provinsi"
variant="outlined"
fullWidth
/>
)}
/>
)}
/>
</Grid>
<Grid item xs={12} md={6}>
<LabelStyle>Kabupaten / Kota</LabelStyle>
{/* <Controller
name="city_id"
control={control}
render={({ field: { onChange, value } }) => (
<Select
className="input-container"
size="medium"
disabled={!city?.length}
value={value}
onChange={(e: any) => {
onChange(e);
}}
fullWidth
MenuProps={{
PaperProps: {
sx: {
maxHeight: 224,
width: 250,
p: 1,
},
},
}}
>
{city?.map((item: any) => (
<MenuItem key={item.value} value={item.value}>
{item.label}
</MenuItem>
))}
</Select>
)}
/> */}
<Controller
name="city_id"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
id="combo-box-demo"
options={city}
getOptionLabel={(option) => option.label ?? findValueCity?.label ?? ''}
value={value}
onChange={(event: any, newValue: any) => {
console.log('newValue', newValue);
setValue('city_id', newValue?.value);
onChange(newValue);
}}
renderInput={(params) => (
<TextField
{...params}
label="Kabupaten / Kota"
variant="outlined"
fullWidth
/>
)}
/>
)}
/>
</Grid>
<Grid item xs={12} md={6}>
<LabelStyle>Code Rumah Sakit</LabelStyle>
<RHFTextField name="code" placeholder="Tuliskan Code Rumah Sakit" />
</Grid>
<Grid item xs={12} md={6}>
<LabelStyle>Nomor IGD</LabelStyle>
<RHFTextField name="phone" placeholder="Tuliskan No IGD" />
</Grid>
<Grid item xs={12}>
<LabelStyle>Alamat</LabelStyle>
<RHFTextField name="address" placeholder="Tuliskan Alamat" />
</Grid>
<Grid item xs={12} md={6}>
<LabelStyle>Provinsi</LabelStyle>
<Grid item xs={12} md={6}>
<LabelStyle>Kecamatan</LabelStyle>
<Controller
name="province_id"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
id="combo-box-demo"
options={province}
getOptionLabel={(option) => option.label ?? findValueProvince?.label ?? ''}
value={value}
onChange={(event: any, newValue: any) => {
console.log('newValue', newValue);
setValue('province_id', newValue?.value);
onChange(newValue);
}}
renderInput={(params) => (
<TextField {...params} label="Provinsi" variant="outlined" fullWidth />
)}
/>
)}
/>
</Grid>
<Grid item xs={12} md={6}>
<LabelStyle>Kabupaten / Kota</LabelStyle>
{/* <Controller
name="district_id"
control={control}
render={({ field: { onChange, value } }) => (
<Select
className="input-container"
size="medium"
disabled={!district?.length}
value={value}
onChange={(e: any) => {
onChange(e);
}}
fullWidth
MenuProps={{
PaperProps: {
sx: {
maxHeight: 224,
width: 250,
p: 1,
},
},
}}
>
{district?.map((item: any) => (
<MenuItem key={item.value} value={item.value}>
{item.label}
</MenuItem>
))}
</Select>
)}
/> */}
<Controller
name="city_id"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
id="combo-box-demo"
options={city}
getOptionLabel={(option) => option.label ?? findValueCity?.label ?? ''}
value={value}
onChange={(event: any, newValue: any) => {
console.log('newValue', newValue);
setValue('city_id', newValue?.value);
onChange(newValue);
}}
renderInput={(params) => (
<TextField
{...params}
label="Kabupaten / Kota"
variant="outlined"
fullWidth
/>
)}
/>
)}
/>
</Grid>
<Controller
name="district_id"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
id="combo-box-demo"
options={district}
getOptionLabel={(option) =>
option.label ?? findValueDistrict?.label ?? ''
}
value={value}
onChange={(event: any, newValue: any) => {
console.log('newValue', newValue);
setValue('district_id', newValue?.value);
onChange(newValue);
}}
renderInput={(params) => (
<TextField
{...params}
label="Kecamatan"
variant="outlined"
fullWidth
/>
)}
/>
)}
/>
</Grid>
<Grid item xs={12} md={6}>
<LabelStyle>Kode Pos</LabelStyle>
<RHFTextField name="postal_code" placeholder="Tuliskan Kode Pos" />
</Grid>
<Grid item xs={12} md={4}>
<LabelStyle>Latitude</LabelStyle>
<RHFTextField name="lat" placeholder="Tuliskan Lattitude" />
</Grid>
<Grid item xs={12} md={4}>
<LabelStyle>Longitude</LabelStyle>
<RHFTextField name="lng" placeholder="Tuliskan Longitude" />
</Grid>
<Grid item xs={12} md={4}>
<LabelStyle>Timezone</LabelStyle>
{/* <RHFTextField name="timezone" /> */}
<RHFSelect name="timezone" label="Pilih Timezone">
<option value="" />
{timezone.map((option, index) => (
<option key={index} value={option.value}>
{option.label}
</option>
))}
</RHFSelect>
</Grid>
</Grid>
</Box>
</TabPanel>
<TabPanel value="2">
<Box sx={{ width: '100%', p: 5 }}>
<Grid container rowSpacing={4} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
<Grid item xs={12}>
<LabelStyle>Deskripsi</LabelStyle>
<RHFEditor name="description" placeholder="Tuliskan Deskripsi" />
</Grid>
<Grid item xs={12}>
<LabelStyle>Teknologi</LabelStyle>
<RHFEditor name="technology" placeholder="Tuliskan Teknologi" />
</Grid>
<Grid item xs={12}>
<LabelStyle>Layanan Penunjang</LabelStyle>
<RHFEditor name="support_services" placeholder="Tuliskan Layanan Penunjang" />
</Grid>
</Grid>
</Box>
</TabPanel>
<TabPanel value="3">
<Box sx={{ width: '100%', p: 5 }}>
<Grid container rowSpacing={4} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
<Grid item xs={12}>
<LabelStyle>Merchant Code</LabelStyle>
<RHFTextField name="merchant_code" placeholder="Tuliskan Merchant Code" />
</Grid>
<Grid item xs={12}>
<LabelStyle>Merchant Key</LabelStyle>
<RHFTextField name="merchant_key" placeholder="Tuliskan Merchant Key" />
</Grid>
</Grid>
</Box>
</TabPanel>
</TabContext>
<Grid item xs={12} md={6}>
<LabelStyle>Kecamatan</LabelStyle>
<Controller
name="district_id"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
id="combo-box-demo"
options={district}
getOptionLabel={(option) => option.label ?? findValueDistrict?.label ?? ''}
value={value}
onChange={(event: any, newValue: any) => {
console.log('newValue', newValue);
setValue('district_id', newValue?.value);
onChange(newValue);
}}
renderInput={(params) => (
<TextField {...params} label="Kecamatan" variant="outlined" fullWidth />
)}
/>
)}
/>
</Grid>
<Grid item xs={12} md={6}>
<LabelStyle>Desa</LabelStyle>
<Controller
name="village_id"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
id="combo-box-demo"
options={village}
getOptionLabel={(option) => option.label ?? findValueVillage?.label ?? ''}
value={value}
onChange={(event: any, newValue: any) => {
console.log('newValue', newValue);
setValue('village_id', newValue?.value);
onChange(newValue);
}}
renderInput={(params) => (
<TextField {...params} label="Desa" variant="outlined" fullWidth />
)}
/>
)}
/>
</Grid>
<Grid item xs={12} md={4}>
<LabelStyle>Kode Pos</LabelStyle>
<RHFTextField name="postal_code" placeholder="Tuliskan Kode Pos" />
</Grid>
<Grid item xs={12} md={4}>
<LabelStyle>Latitude</LabelStyle>
<RHFTextField name="lat" placeholder="Tuliskan Lattitude" />
</Grid>
<Grid item xs={12} md={4}>
<LabelStyle>Longitude</LabelStyle>
<RHFTextField name="lng" placeholder="Tuliskan Longitude" />
</Grid>
<Grid item xs={12}>
<LabelStyle>Deskripsi</LabelStyle>
<RHFEditor name="description" placeholder="Tuliskan Deskripsi" />
</Grid>
</Grid>
</Box>
<Box sx={{ width: '100%', p: 5 }}>
<Box sx={{ width: '100%', mt: 5 }}>
<Stack
alignItems="center"
justifyContent="end"