mirror of
https://github.com/hazemKrimi/crimson-quirks-ui.git
synced 2026-05-01 18:20:28 +00:00
Add feature creation page
This commit is contained in:
Hazem Krimi
@@ -0,0 +1,386 @@
|
||||
import * as Yup from 'yup';
|
||||
import { useFormik } from 'formik';
|
||||
import { Redirect, useHistory } from 'react-router';
|
||||
import { useMutation, useReactiveVar } from '@apollo/client';
|
||||
import React, { useState } from 'react';
|
||||
import { roleVar } from '../../graphql/state';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Text,
|
||||
SectionSelector,
|
||||
Input,
|
||||
Alert,
|
||||
TextArea,
|
||||
CheckBox,
|
||||
} from '../../components';
|
||||
import { Wrapper } from './styles';
|
||||
import { ArrowLeft, General, Design } from '../../assets';
|
||||
import {
|
||||
AddFeatureMutation,
|
||||
AddFeatureMutationVariables,
|
||||
} from '../../graphql/types';
|
||||
import { ADD_CATEGORY } from '../../graphql/category.api';
|
||||
import { ADD_FEATURE } from '../../graphql/feature.api';
|
||||
|
||||
const AddFeature = () => {
|
||||
const history = useHistory();
|
||||
const role = useReactiveVar(roleVar);
|
||||
const [newFeature, setNewFeature] = useState<{
|
||||
name: string;
|
||||
description: string;
|
||||
featureType: string;
|
||||
image: {
|
||||
name: string;
|
||||
src: string;
|
||||
};
|
||||
wireframes?: Array<{
|
||||
name: string;
|
||||
src: string;
|
||||
}>;
|
||||
price: number;
|
||||
repo: string;
|
||||
}>();
|
||||
|
||||
const [selectedSection, setSelectedSection] = useState<
|
||||
'general' | 'wireframes'
|
||||
>('general');
|
||||
const [error, setError] = useState<string>('');
|
||||
|
||||
const [addFeature, { loading }] = useMutation<
|
||||
AddFeatureMutation,
|
||||
AddFeatureMutationVariables
|
||||
>(ADD_FEATURE, {
|
||||
onCompleted({ addFeature: { id } }) {
|
||||
history.push(`/feature/${id}`);
|
||||
},
|
||||
onError({ graphQLErrors }) {
|
||||
setError(graphQLErrors[0]?.extensions?.info);
|
||||
setTimeout(() => setError(''), 3000);
|
||||
},
|
||||
});
|
||||
|
||||
const generalForm = useFormik({
|
||||
initialValues: {
|
||||
name: '',
|
||||
description: '',
|
||||
imageName: '',
|
||||
imageSource: '',
|
||||
featureType: '',
|
||||
price: '',
|
||||
repo: '',
|
||||
},
|
||||
validationSchema: Yup.object().shape({
|
||||
name: Yup.string().required('Name is required'),
|
||||
description: Yup.string().required('Description is required'),
|
||||
imageName: Yup.string().required('Image is required'),
|
||||
imageSource: Yup.string().required('Image is required'),
|
||||
featureType: Yup.string().required('Feature Type is required'),
|
||||
// prettier-ignore
|
||||
price: Yup.number().typeError('Price must be a number').required('Price is required'),
|
||||
repo: Yup.string().required('Repo is required'),
|
||||
}),
|
||||
onSubmit: ({
|
||||
name,
|
||||
description,
|
||||
imageName,
|
||||
imageSource,
|
||||
featureType,
|
||||
price,
|
||||
repo,
|
||||
}) => {
|
||||
setNewFeature({
|
||||
name,
|
||||
description,
|
||||
featureType,
|
||||
image: { name: imageName, src: imageSource },
|
||||
price: parseFloat(price),
|
||||
repo,
|
||||
});
|
||||
setSelectedSection('wireframes');
|
||||
},
|
||||
});
|
||||
|
||||
return role === 'developer' ? (
|
||||
<Wrapper>
|
||||
<Box>
|
||||
<Button
|
||||
text='Back'
|
||||
color={role || 'client'}
|
||||
size='small'
|
||||
onClick={() => history.goBack()}
|
||||
iconLeft={<ArrowLeft />}
|
||||
/>
|
||||
<Text variant='headline' weight='bold'>
|
||||
Add Feature
|
||||
</Text>
|
||||
</Box>
|
||||
<Box
|
||||
display='grid'
|
||||
gridTemplateColumns='0.5fr 2fr'
|
||||
columnGap='25px'
|
||||
marginTop='1rem'
|
||||
>
|
||||
<Box display='grid' rowGap='0.5rem' gridTemplateRows='50px'>
|
||||
<SectionSelector
|
||||
icon={<General />}
|
||||
color={role || 'client'}
|
||||
text='General'
|
||||
selected
|
||||
/>
|
||||
<SectionSelector
|
||||
icon={<Design />}
|
||||
color={role || 'client'}
|
||||
text='Wireframes'
|
||||
selected={selectedSection === 'wireframes'}
|
||||
onClick={() => setSelectedSection('wireframes')}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
background='white'
|
||||
boxShadow='1px 1px 10px 0px rgba(50, 59, 105, 0.25)'
|
||||
borderRadius='10px'
|
||||
width='100%'
|
||||
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' && (
|
||||
<>
|
||||
<form onSubmit={generalForm.handleSubmit}>
|
||||
<Box
|
||||
display='grid'
|
||||
gridTemplateColumns='auto'
|
||||
rowGap='0.5rem'
|
||||
position='relative'
|
||||
>
|
||||
<Input
|
||||
name='name'
|
||||
label='Name'
|
||||
color={role || 'client'}
|
||||
value={generalForm.values.name}
|
||||
onChange={generalForm.handleChange}
|
||||
onBlur={generalForm.handleBlur}
|
||||
error={
|
||||
generalForm.touched.name && !!generalForm.errors.name
|
||||
}
|
||||
errorMessage={generalForm.errors.name}
|
||||
/>
|
||||
<Input
|
||||
type='file'
|
||||
label='Image'
|
||||
color={role || 'client'}
|
||||
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');
|
||||
|
||||
generalForm.setFieldValue('imageName', '');
|
||||
generalForm.setFieldValue('imageSource', '');
|
||||
|
||||
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;
|
||||
|
||||
generalForm.setFieldValue('imageName', filename);
|
||||
generalForm.setFieldValue('imageSource', filesource);
|
||||
}
|
||||
}}
|
||||
error={
|
||||
!!generalForm.errors.imageName ||
|
||||
!!generalForm.errors.imageSource
|
||||
}
|
||||
errorMessage={generalForm.errors.imageName}
|
||||
/>
|
||||
<Box>
|
||||
<Box
|
||||
display='flex'
|
||||
flexDirection='row'
|
||||
alignItems='center'
|
||||
justifyContent='space-between'
|
||||
>
|
||||
<Box justifySelf='flex-start'>
|
||||
<Text
|
||||
variant='body'
|
||||
weight='bold'
|
||||
className='feature-type'
|
||||
>
|
||||
Type
|
||||
</Text>
|
||||
</Box>
|
||||
{!!generalForm.errors.featureType && (
|
||||
<Box justifySelf='flex-end'>
|
||||
<Text variant='body' color='error'>
|
||||
{generalForm.errors.featureType}
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<Box
|
||||
display='flex'
|
||||
flexDirection='row'
|
||||
alignItems='center'
|
||||
marginTop='5px'
|
||||
>
|
||||
<Box marginRight='50px'>
|
||||
<CheckBox
|
||||
label='Frontend'
|
||||
name='featureType'
|
||||
color={role || 'client'}
|
||||
onClick={() => {
|
||||
if (
|
||||
generalForm.values.featureType === 'fullstack'
|
||||
) {
|
||||
generalForm.setFieldValue(
|
||||
'featureType',
|
||||
'backend'
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (generalForm.values.featureType === 'backend') {
|
||||
generalForm.setFieldValue(
|
||||
'featureType',
|
||||
'fullstack'
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (generalForm.values.featureType === 'frontend') {
|
||||
generalForm.setFieldValue('featureType', '');
|
||||
return;
|
||||
}
|
||||
generalForm.setFieldValue(
|
||||
'featureType',
|
||||
'frontend'
|
||||
);
|
||||
}}
|
||||
checked={
|
||||
generalForm.values.featureType === 'frontend' ||
|
||||
generalForm.values.featureType === 'fullstack'
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<CheckBox
|
||||
label='Backend'
|
||||
name='featureType'
|
||||
color={role || 'client'}
|
||||
onClick={() => {
|
||||
if (
|
||||
generalForm.values.featureType === 'fullstack'
|
||||
) {
|
||||
generalForm.setFieldValue(
|
||||
'featureType',
|
||||
'frontend'
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (generalForm.values.featureType === 'frontend') {
|
||||
generalForm.setFieldValue(
|
||||
'featureType',
|
||||
'fullstack'
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (generalForm.values.featureType === 'backend') {
|
||||
generalForm.setFieldValue('featureType', '');
|
||||
return;
|
||||
}
|
||||
generalForm.setFieldValue('featureType', 'backend');
|
||||
}}
|
||||
checked={
|
||||
generalForm.values.featureType === 'backend' ||
|
||||
generalForm.values.featureType === 'fullstack'
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<TextArea
|
||||
name='description'
|
||||
label='Description'
|
||||
color={role || 'client'}
|
||||
value={generalForm.values.description}
|
||||
onChange={generalForm.handleChange}
|
||||
onBlur={generalForm.handleBlur}
|
||||
error={
|
||||
generalForm.touched.description &&
|
||||
!!generalForm.errors.description
|
||||
}
|
||||
errorMessage={generalForm.errors.description}
|
||||
/>
|
||||
<Input
|
||||
name='price'
|
||||
label='Price'
|
||||
color={role || 'client'}
|
||||
value={generalForm.values.price}
|
||||
onChange={generalForm.handleChange}
|
||||
onBlur={generalForm.handleBlur}
|
||||
error={
|
||||
generalForm.touched.price && !!generalForm.errors.price
|
||||
}
|
||||
errorMessage={generalForm.errors.price}
|
||||
/>
|
||||
<Input
|
||||
name='repo'
|
||||
label='Repo'
|
||||
color={role || 'client'}
|
||||
value={generalForm.values.repo}
|
||||
onChange={generalForm.handleChange}
|
||||
onBlur={generalForm.handleBlur}
|
||||
error={
|
||||
generalForm.touched.repo && !!generalForm.errors.repo
|
||||
}
|
||||
errorMessage={generalForm.errors.repo}
|
||||
/>
|
||||
<Box
|
||||
marginTop='0.5rem'
|
||||
display='flex'
|
||||
justifyContent='flex-end'
|
||||
>
|
||||
<Button
|
||||
variant='primary-action'
|
||||
color={role || 'client'}
|
||||
text='Next'
|
||||
type='submit'
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Wrapper>
|
||||
) : (
|
||||
<>
|
||||
{role === 'admin' && <Redirect to='/clients' />}
|
||||
{role === 'client' ||
|
||||
(role === 'productOwner' && <Redirect to='/project' />)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddFeature;
|
||||
@@ -0,0 +1,11 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
padding: 35px 45px 35px 120px;
|
||||
|
||||
.feature-type {
|
||||
background: ${({ theme }) => theme.colors.gray.dark};
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
`;
|
||||
Reference in New Issue
Block a user