init
This commit is contained in:
azizziy
256
src/app/[locale]/(views)/profile-edit/page.tsx
Normal file
256
src/app/[locale]/(views)/profile-edit/page.tsx
Normal file
@@ -0,0 +1,256 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Box, TextField, Typography, Grid, Button, Card, CardMedia, CardContent } from '@mui/material';
|
||||
import Layout from '@/components/layout/landing-layout';
|
||||
import Container from '@/components/common/Container';
|
||||
import { useMyNavigation } from '@/hooks/useMyNavigation';
|
||||
|
||||
export default function UserEditForm() {
|
||||
const { back, replace } = useMyNavigation();
|
||||
const [userData, setUserData] = useState({
|
||||
fullName: 'Helen Zhou',
|
||||
birthDate: '1990-11-11',
|
||||
phone: '+998 99 365 48 11',
|
||||
serialNumber: 'AB342534',
|
||||
pinfl: '12548965451254',
|
||||
address: 'Toshkent sh. Uchtepa 12',
|
||||
aviaID: 'AT010001',
|
||||
cargoID: 'T010001',
|
||||
branch: 'Toshkent sh',
|
||||
});
|
||||
const token = localStorage.getItem('token');
|
||||
|
||||
const [passportFrontImage, setPassportFrontImage] = useState<string | null>(
|
||||
'https://a57.foxnews.com/static.foxnews.com/foxnews.com/content/uploads/2018/09/1200/675/Ireland-Plastic-Passports-1.jpg?ve=1&tl=1'
|
||||
);
|
||||
const [passportBackImage, setPassportBackImage] = useState<string | null>(
|
||||
'https://nebula.wsimg.com/08bfbadc8356b6a0ba6fd1a05dbc4987?AccessKeyId=80E5C6BFDBBCCE7AC676&disposition=0&alloworigin=1'
|
||||
);
|
||||
const [userImage, setUserImage] = useState<string | null>(
|
||||
'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZmVtYWxlJTIwcHJvZmlsZXxlbnwwfHwwfHx8MA%3D%3D'
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!token) {
|
||||
replace('/');
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setUserData({ ...userData, [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>, key?: string) => {
|
||||
if (event.target.files && event.target.files[0]) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = e => {
|
||||
if (e.target) {
|
||||
if (key === 'front') setPassportFrontImage(e.target.result as string);
|
||||
else if (key === 'user') setUserImage(e.target.result as string);
|
||||
else setPassportBackImage(e.target.result as string);
|
||||
}
|
||||
};
|
||||
reader.readAsDataURL(event.target.files[0]);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Container>
|
||||
<Box sx={{ p: { xs: 2, sm: 4 }, mx: 'auto' }}>
|
||||
<Typography variant='h6' fontWeight='bold' mb={2}>
|
||||
{"Ma'lumotlarni tahrirlash"}
|
||||
</Typography>
|
||||
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<TextField fullWidth label="To'liq ism" name='fullName' value={userData.fullName} onChange={handleChange} />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<TextField
|
||||
fullWidth
|
||||
type='date'
|
||||
label="Tug'ilgan kun"
|
||||
name='birthDate'
|
||||
value={userData.birthDate}
|
||||
onChange={handleChange}
|
||||
InputLabelProps={{ shrink: true }}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<TextField fullWidth label='Telefon raqam' name='phone' value={userData.phone} onChange={handleChange} />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label='Seriya raqam'
|
||||
name='serialNumber'
|
||||
value={userData.serialNumber}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<TextField fullWidth label='PINFL' name='pinfl' value={userData.pinfl} onChange={handleChange} />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<TextField fullWidth label='Qulay filial' name='branch' value={userData.branch} onChange={handleChange} />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<TextField fullWidth label='Adres' name='address' value={userData.address} onChange={handleChange} />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<TextField fullWidth label='Avia ID' name='aviaID' value={userData.aviaID} onChange={handleChange} />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<TextField fullWidth label='Kargo ID' name='cargoID' value={userData.cargoID} onChange={handleChange} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Box mt={3} sx={{ display: 'flex', gap: '50px' }}>
|
||||
<Box>
|
||||
<Typography variant='body1' fontWeight='bold' mb={1}>
|
||||
Rasmingiz
|
||||
</Typography>
|
||||
|
||||
<input
|
||||
type='file'
|
||||
accept='image/*'
|
||||
onChange={e => handleImageUpload(e, 'user')}
|
||||
style={{ display: 'none' }}
|
||||
id='user-upload'
|
||||
/>
|
||||
<label htmlFor='user-upload'>
|
||||
<Card
|
||||
sx={{
|
||||
width: '80px',
|
||||
height: '80px',
|
||||
borderRadius: '50%',
|
||||
cursor: 'pointer',
|
||||
border: '1px dashed gray',
|
||||
display: 'inline-block',
|
||||
}}
|
||||
>
|
||||
{userImage ? (
|
||||
<CardMedia
|
||||
component='img'
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
objectPosition: 'center',
|
||||
}}
|
||||
image={userImage}
|
||||
alt='Passport Image'
|
||||
/>
|
||||
) : (
|
||||
<CardContent sx={{ textAlign: 'center', p: 4 }}>
|
||||
<Typography variant='body2' color='gray'>
|
||||
Yuklash uchun bosing
|
||||
</Typography>
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
</label>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography variant='body1' fontWeight='bold' mb={1}>
|
||||
Passport rasmi
|
||||
</Typography>
|
||||
<input
|
||||
type='file'
|
||||
accept='image/*'
|
||||
onChange={e => handleImageUpload(e, 'front')}
|
||||
style={{ display: 'none' }}
|
||||
id='passport-front-upload'
|
||||
/>
|
||||
<input
|
||||
type='file'
|
||||
accept='image/*'
|
||||
onChange={handleImageUpload}
|
||||
style={{ display: 'none' }}
|
||||
id='passport-back-upload'
|
||||
/>
|
||||
<Box sx={{ display: 'flex', gap: '15px' }}>
|
||||
<label htmlFor='passport-front-upload'>
|
||||
<Card
|
||||
sx={{
|
||||
maxWidth: 250,
|
||||
cursor: 'pointer',
|
||||
border: '1px dashed gray',
|
||||
display: 'inline-block',
|
||||
}}
|
||||
>
|
||||
{passportFrontImage ? (
|
||||
<CardMedia
|
||||
component='img'
|
||||
height='140'
|
||||
sx={{
|
||||
maxWidth: '200px',
|
||||
maxHeight: '200px',
|
||||
objectFit: 'contain',
|
||||
objectPosition: 'center',
|
||||
}}
|
||||
image={passportFrontImage}
|
||||
alt='Passport Image'
|
||||
/>
|
||||
) : (
|
||||
<CardContent sx={{ textAlign: 'center', p: 4 }}>
|
||||
<Typography variant='body2' color='gray'>
|
||||
Yuklash uchun bosing
|
||||
</Typography>
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
</label>
|
||||
{(!!passportFrontImage || !!passportBackImage) && (
|
||||
<label htmlFor='passport-back-upload'>
|
||||
<Card
|
||||
sx={{
|
||||
maxWidth: 250,
|
||||
cursor: 'pointer',
|
||||
border: '1px dashed gray',
|
||||
display: 'inline-block',
|
||||
}}
|
||||
>
|
||||
{!!passportBackImage ? (
|
||||
<CardMedia
|
||||
component='img'
|
||||
height='140'
|
||||
sx={{
|
||||
maxWidth: '200px',
|
||||
maxHeight: '200px',
|
||||
objectFit: 'contain',
|
||||
objectPosition: 'center',
|
||||
}}
|
||||
image={passportBackImage}
|
||||
alt='Passport Image'
|
||||
/>
|
||||
) : (
|
||||
<CardContent sx={{ textAlign: 'center', p: 4 }}>
|
||||
<Typography variant='body2' color='gray'>
|
||||
Yuklash uchun bosing
|
||||
</Typography>
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
</label>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box mt={3} display='flex' justifyContent='flex-end' gap={2}>
|
||||
<Button onClick={back} variant='outlined' color='primary'>
|
||||
Bekor qilish
|
||||
</Button>
|
||||
<Button variant='contained' color='primary'>
|
||||
Saqlash
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user