crimson-quirks/crimson-quirks-ui
1
0
Fork 0
mirror of https://github.com/hazemKrimi/crimson-quirks-ui.git synced 2026-05-02 02:30:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Complete add feature

Browse Source
This commit is contained in:
Hazem Krimi
2021-05-28 17:42:07 +01:00
parent 5a80fde47a
commit 482d0dc2b6
1 changed files with 128 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/AddFeature/index.tsx
+128 -24
View File
@@ -13,6 +13,7 @@ import {
Alert, Alert,
TextArea, TextArea,
CheckBox, CheckBox,
ImagePreview,
} from '../../components'; } from '../../components';
import { Wrapper } from './styles'; import { Wrapper } from './styles';
import { ArrowLeft, General, Design } from '../../assets'; import { ArrowLeft, General, Design } from '../../assets';
@@ -39,7 +40,17 @@ const AddFeature = () => {
}>; }>;
price: number; price: number;
repo: string; repo: string;
}>(); }>({
name: '',
description: '',
featureType: '',
image: {
name: '',
src: '',
},
price: 0,
repo: '',
});
const [selectedSection, setSelectedSection] = useState< const [selectedSection, setSelectedSection] = useState<
'general' | 'wireframes' 'general' | 'wireframes'
@@ -100,6 +111,17 @@ const AddFeature = () => {
}, },
}); });
const wireframesForm = useFormik<{
wireframes: Array<{ name: string; src: string }>;
}>({
initialValues: {
wireframes: [],
},
onSubmit: ({ wireframes }) => {
addFeature({ variables: { feature: { ...newFeature, wireframes } } });
},
});
return role === 'developer' ? ( return role === 'developer' ? (
<Wrapper> <Wrapper>
<Box> <Box>
@@ -125,14 +147,13 @@ const AddFeature = () => {
icon={<General />} icon={<General />}
color={role || 'client'} color={role || 'client'}
text='General' text='General'
selected selected={selectedSection === 'general'}
/> />
<SectionSelector <SectionSelector
icon={<Design />} icon={<Design />}
color={role || 'client'} color={role || 'client'}
text='Wireframes' text='Wireframes'
selected={selectedSection === 'wireframes'} selected={selectedSection === 'wireframes'}
onClick={() => setSelectedSection('wireframes')}
/> />
</Box> </Box>
<Box <Box
@@ -142,20 +163,20 @@ const AddFeature = () => {
width='100%' width='100%'
padding='30px' padding='30px'
> >
<Box
display='grid'
gridTemplateColumns='auto 1fr'
columnGap='1rem'
alignItems='center'
marginBottom='50px'
>
<Text variant='subheader' weight='bold'>
General
</Text>
{error && <Alert color='error' text={error} />}
</Box>
{selectedSection === 'general' && ( {selectedSection === 'general' && (
<> <>
<Box
display='grid'
gridTemplateColumns='auto 1fr'
columnGap='1rem'
alignItems='center'
marginBottom='50px'
>
<Text variant='subheader' weight='bold'>
{selectedSection === 'general' ? 'General' : 'Wireframes'}
</Text>
{error && <Alert color='error' text={error} />}
</Box>
<form onSubmit={generalForm.handleSubmit}> <form onSubmit={generalForm.handleSubmit}>
<Box <Box
display='grid' display='grid'
@@ -209,8 +230,9 @@ const AddFeature = () => {
} }
}} }}
error={ error={
!!generalForm.errors.imageName || generalForm.touched.imageName &&
!!generalForm.errors.imageSource (!!generalForm.errors.imageName ||
!!generalForm.errors.imageSource)
} }
errorMessage={generalForm.errors.imageName} errorMessage={generalForm.errors.imageName}
/> />
@@ -230,13 +252,14 @@ const AddFeature = () => {
Type Type
</Text> </Text>
</Box> </Box>
{!!generalForm.errors.featureType && ( {!!generalForm.touched.featureType &&
<Box justifySelf='flex-end'> generalForm.errors.featureType && (
<Text variant='body' color='error'> <Box justifySelf='flex-end'>
{generalForm.errors.featureType} <Text variant='body' color='error'>
</Text> {generalForm.errors.featureType}
</Box> </Text>
)} </Box>
)}
</Box> </Box>
<Box <Box
display='flex' display='flex'
@@ -370,6 +393,87 @@ const AddFeature = () => {
</form> </form>
</> </>
)} )}
{selectedSection === 'wireframes' && (
<>
<Box
display='grid'
gridTemplateColumns='auto 1fr'
columnGap='1rem'
alignItems='center'
marginBottom='50px'
>
<Text variant='subheader' weight='bold'>
Wireframes
</Text>
{error && <Alert color='error' text={error} />}
</Box>
<form onSubmit={wireframesForm.handleSubmit}>
<Box
display='grid'
gridTemplate='auto / repeat(auto-fit, 175px)'
gap='30px'
alignItems='stretch'
>
<ImagePreview
color={role}
image={undefined}
onChange={async (
event: React.ChangeEvent<HTMLInputElement>
) => {
const formData = new FormData();
if (event.target.files && event.target.files[0]) {
formData.append('file', event.target.files[0]);
formData.append('upload_preset', 'xofll5kc');
const data = await (
await fetch(
`${process.env.REACT_APP_CLOUDINARY_URL}`,
{
method: 'POST',
body: formData,
}
)
).json();
const filename = data.original_filename;
const filesource = data.secure_url;
wireframesForm.setFieldValue('wireframes', [
...wireframesForm.values.wireframes,
{ name: filename, src: filesource },
]);
}
}}
/>
{wireframesForm.values.wireframes.map((image) => (
<ImagePreview
key={image.name}
color={role}
image={image}
onDelete={() => {
wireframesForm.setFieldValue(
'wireframes',
wireframesForm.values.wireframes.filter(
({ name }) => name !== image.name
)
);
}}
/>
))}
</Box>
<Box marginTop='1rem' display='flex' justifyContent='flex-end'>
<Button
variant='primary-action'
color={role || 'client'}
text='Save'
type='submit'
loading={loading}
/>
</Box>
</form>
</>
)}
</Box> </Box>
</Box> </Box>
</Wrapper> </Wrapper>