Data Docter dan Hospital dnegan Filter di dashboard
This commit is contained in:
pajri
778
frontend/dashboard/src/pages/Master/Hospitals/Form.tsx
Normal file
778
frontend/dashboard/src/pages/Master/Hospitals/Form.tsx
Normal file
@@ -0,0 +1,778 @@
|
||||
import * as Yup from 'yup';
|
||||
import { useSnackbar } from 'notistack';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
|
||||
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||
import * as React from 'react';
|
||||
|
||||
// form
|
||||
import { Controller, useForm } from 'react-hook-form';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
// @mui
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Card,
|
||||
Grid,
|
||||
Stack,
|
||||
Typography,
|
||||
TextField,
|
||||
Tab,
|
||||
Chip,
|
||||
Autocomplete,
|
||||
} from '@mui/material';
|
||||
|
||||
import TabContext from '@mui/lab/TabContext';
|
||||
import TabList from '@mui/lab/TabList';
|
||||
import TabPanel from '@mui/lab/TabPanel';
|
||||
|
||||
import CancelIcon from '@mui/icons-material/Cancel';
|
||||
|
||||
// components
|
||||
import {
|
||||
FormProvider,
|
||||
RHFTextField,
|
||||
RHFRadioGroup,
|
||||
RHFUploadAvatar,
|
||||
RHFSwitch,
|
||||
RHFSelect,
|
||||
RHFEditor,
|
||||
RHFDatepicker,
|
||||
RHFMultiCheckbox,
|
||||
RHFCheckbox,
|
||||
RHFCustomMultiCheckbox,
|
||||
} from '../../../components/hook-form';
|
||||
import axios from '../../../utils/axios';
|
||||
import { fCurrency } from '../../../utils/formatNumber';
|
||||
import { Organizations } from '../../../@types/organization';
|
||||
import { Provinces } from '../../../@types/organization';
|
||||
import { Cities } from '../../../@types/organization';
|
||||
import { Districts } from '../../../@types/organization';
|
||||
import { Villages } from '../../../@types/organization';
|
||||
|
||||
import { Label } from '@mui/icons-material';
|
||||
import MyDropzone from '../../../components/MyDropzone';
|
||||
|
||||
const LabelStyle = styled(Typography)(({ theme }) => ({
|
||||
...theme.typography.h6,
|
||||
marginBottom: theme.spacing(2),
|
||||
marginTop: theme.spacing(2),
|
||||
}));
|
||||
|
||||
const HeaderStyle = styled('header')(({ theme }) => ({
|
||||
padding: theme.spacing(5),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}));
|
||||
|
||||
const Title = styled(Typography)(({ theme }) => ({
|
||||
...theme.typography.h4,
|
||||
boxShadow: 'none',
|
||||
// paddingBottom: theme.spacing(3),
|
||||
fontWeight: 700,
|
||||
color: '#005B7F',
|
||||
}));
|
||||
|
||||
// const [timezone, setTimezone] = React.useState('');
|
||||
|
||||
// const selectInput = (event: SelectChangeEvent) => {
|
||||
// setTimezone(event.target.value as string);
|
||||
// const name = event.target.name;
|
||||
// const value = event.target.value;
|
||||
// setInputs((values) => ({ ...values, [name]: value }));
|
||||
// };
|
||||
// const [inputs, setInputs] = useState({});
|
||||
|
||||
interface FormValuesProps extends Partial<Organizations> {
|
||||
taxes: boolean;
|
||||
inStock: boolean;
|
||||
}
|
||||
|
||||
type Props = {
|
||||
isEdit: boolean;
|
||||
currentOrganizations?: Organizations;
|
||||
};
|
||||
|
||||
export default function OrganizationsForm({ isEdit, currentOrganizations }: Props) {
|
||||
const navigate = useNavigate();
|
||||
const [organizations_group, setOrganizationsGroups] = useState([]);
|
||||
|
||||
// const [ errors, setErrors ] = useState<{ [key: string]: string }>({});
|
||||
|
||||
const { enqueueSnackbar } = useSnackbar();
|
||||
|
||||
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'),
|
||||
});
|
||||
|
||||
const defaultValues = useMemo(
|
||||
() => ({
|
||||
name: currentOrganizations?.name || '',
|
||||
code: currentOrganizations?.code || '',
|
||||
phone: currentOrganizations?.phone || '',
|
||||
lat: currentOrganizations?.lat || '',
|
||||
lng: currentOrganizations?.lng || '',
|
||||
address: currentOrganizations?.address || '',
|
||||
timezone: currentOrganizations?.timezone || '',
|
||||
active: currentOrganizations?.active === 1 ? true : false,
|
||||
province_id: currentOrganizations?.province_id || '',
|
||||
city_id: currentOrganizations?.city_id || '',
|
||||
district_id: currentOrganizations?.district_id || '',
|
||||
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]
|
||||
);
|
||||
|
||||
console.log('defaultValues', defaultValues);
|
||||
|
||||
function StatusLabel({ value }: { value: boolean }) {
|
||||
return (
|
||||
<Chip
|
||||
label={value ? 'Aktif' : 'Tidak Aktif'}
|
||||
size="medium"
|
||||
sx={{
|
||||
backgroundColor: value ? 'rgba(84, 214, 44, 0.16)' : 'rgba(255, 72, 66, 0.16)',
|
||||
color: value ? '#229A16' : '#B72136',
|
||||
padding: '1 8 1 8 px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '12px',
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const methods = useForm<FormValuesProps>({
|
||||
resolver: yupResolver(NewCorporateSchema),
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
const {
|
||||
reset,
|
||||
watch,
|
||||
control,
|
||||
setValue,
|
||||
getValues,
|
||||
setError,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = methods;
|
||||
|
||||
const values = watch();
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit && currentOrganizations) {
|
||||
reset(defaultValues);
|
||||
}
|
||||
if (!isEdit) {
|
||||
reset(defaultValues);
|
||||
}
|
||||
|
||||
// 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);
|
||||
} else {
|
||||
formData.append('province_id', data.province_id?.value ?? '');
|
||||
}
|
||||
|
||||
if (data.city_id === currentOrganizations?.city_id) {
|
||||
formData.append('city_id', data.city_id);
|
||||
} else {
|
||||
formData.append('city_id', data.city_id?.value ?? '');
|
||||
}
|
||||
|
||||
if (data.district_id === currentOrganizations?.district_id) {
|
||||
formData.append('district_id', data.district_id);
|
||||
} else {
|
||||
formData.append('district_id', data.district_id?.value ?? '');
|
||||
}
|
||||
|
||||
if (data.village_id === currentOrganizations?.village_id) {
|
||||
formData.append('village_id', data.village_id);
|
||||
} 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) {
|
||||
const response = await axios.post('/organizations', formData);
|
||||
} else {
|
||||
formData.append('_method', 'PUT');
|
||||
const response = await axios.post(
|
||||
'/organizations/' + currentOrganizations?.id ?? '',
|
||||
formData
|
||||
);
|
||||
}
|
||||
reset();
|
||||
enqueueSnackbar(
|
||||
!isEdit ? 'Organizations Created Successfully!' : 'Organizations Udpated Successfully!',
|
||||
{ variant: 'success' }
|
||||
);
|
||||
navigate('/master/organizations');
|
||||
} catch (error: any) {
|
||||
if (error && error.response.status === 422) {
|
||||
for (const [key, value] of Object.entries(error.response.data.errors)) {
|
||||
setError(key, { message: value[0] });
|
||||
enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
|
||||
}
|
||||
} else {
|
||||
enqueueSnackbar(error.message ?? 'Failed Processing Request', { variant: 'error' });
|
||||
}
|
||||
}
|
||||
|
||||
const ascent = document?.querySelector('ascent');
|
||||
if (ascent != null) {
|
||||
ascent.innerHTML = '';
|
||||
}
|
||||
};
|
||||
|
||||
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>([]);
|
||||
|
||||
useEffect(() => {
|
||||
axios.get('/province').then((res) => {
|
||||
setProvince(res.data.data.map((item: any) => ({ value: item.id, label: item.name })));
|
||||
});
|
||||
|
||||
const loadCity = async () => {
|
||||
if (values.province_id == currentOrganizations?.province_id) {
|
||||
const res = await axios.get('/city?province_id=' + values.province_id);
|
||||
setCity(res.data.data.map((item: any) => ({ value: item.id, label: item.name })));
|
||||
} else {
|
||||
const res = await axios.get('/city?province_id=' + values.province_id?.value);
|
||||
setCity(res.data.data.map((item: any) => ({ value: item.id, label: item.name })));
|
||||
}
|
||||
};
|
||||
|
||||
const loadDistrict = async () => {
|
||||
if (values.city_id == currentOrganizations?.city_id) {
|
||||
const res = await axios.get('/district?city_id=' + values.city_id);
|
||||
setDistrict(res.data.data.map((item: any) => ({ value: item.id, label: item.name })));
|
||||
} else {
|
||||
const res = await axios.get('/district?city_id=' + values.city_id?.value);
|
||||
setDistrict(res.data.data.map((item: any) => ({ value: item.id, label: item.name })));
|
||||
}
|
||||
};
|
||||
|
||||
// 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 })));
|
||||
// });
|
||||
// }
|
||||
|
||||
if (values.province_id) {
|
||||
loadCity();
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
const findValueProvince = province.find(
|
||||
(item: any) => item.value === currentOrganizations?.province_id
|
||||
);
|
||||
const findValueCity = city.find((item: any) => item.value === currentOrganizations?.city_id);
|
||||
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
|
||||
);
|
||||
|
||||
return (
|
||||
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
|
||||
<Stack spacing={3}>
|
||||
<Card sx={{ p: 5 }}>
|
||||
<HeaderStyle>
|
||||
<Grid item xs={6} md={6}>
|
||||
<Title>Data Rumah Sakit</Title>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={6}>
|
||||
{/* <Typography>Status Rumah Sakit</Typography> */}
|
||||
<RHFSwitch name="active" label="" />
|
||||
<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>
|
||||
)}
|
||||
/> */}
|
||||
|
||||
<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>Kecamatan</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="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>
|
||||
</Box>
|
||||
<Box sx={{ width: '100%', p: 5 }}>
|
||||
<Stack
|
||||
alignItems="center"
|
||||
justifyContent="end"
|
||||
direction={{ xs: 'column', md: 'row' }}
|
||||
sx={{ width: 1, textAlign: { xs: 'center', md: 'left' } }}
|
||||
>
|
||||
<Grid item xs={12} md={4}>
|
||||
<LoadingButton
|
||||
sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)' }}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
// fullWidth={true}
|
||||
loading={isSubmitting}
|
||||
>
|
||||
{!isEdit ? 'Simpan' : 'Simpan Perubahan'}
|
||||
</LoadingButton>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Card>
|
||||
</Stack>
|
||||
</FormProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user