mirror of
https://github.com/hazemKrimi/crimson-quirks-ui.git
synced 2026-05-01 18:20:28 +00:00
Add template creation page
This commit is contained in:
Hazem Krimi
@@ -0,0 +1,824 @@
|
|||||||
|
import * as Yup from 'yup';
|
||||||
|
import { useFormik } from 'formik';
|
||||||
|
import { Redirect, useHistory } from 'react-router';
|
||||||
|
import {
|
||||||
|
useLazyQuery,
|
||||||
|
useMutation,
|
||||||
|
useQuery,
|
||||||
|
useReactiveVar,
|
||||||
|
} from '@apollo/client';
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { roleVar } from '../../graphql/state';
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Text,
|
||||||
|
SectionSelector,
|
||||||
|
Input,
|
||||||
|
Alert,
|
||||||
|
TextArea,
|
||||||
|
Select,
|
||||||
|
Spinner,
|
||||||
|
FeatureCard,
|
||||||
|
} from '../../components';
|
||||||
|
import { Wrapper } from './styles';
|
||||||
|
import { ArrowLeft, General, Specification, Features } from '../../assets';
|
||||||
|
import {
|
||||||
|
AddTemplateMutation,
|
||||||
|
AddTemplateMutationVariables,
|
||||||
|
FeatureOutput,
|
||||||
|
GetAllCategoriesQuery,
|
||||||
|
GetAllCategoriesQueryVariables,
|
||||||
|
GetAllFeaturesQuery,
|
||||||
|
GetAllFeaturesQueryVariables,
|
||||||
|
TemplateInput,
|
||||||
|
} from '../../graphql/types';
|
||||||
|
import { ADD_TEMPLATE } from '../../graphql/template.api';
|
||||||
|
import { GET_ALL_CATEGORIES } from '../../graphql/category.api';
|
||||||
|
import { GET_ALL_FEATURES } from '../../graphql/feature.api';
|
||||||
|
|
||||||
|
const AddTemplate = () => {
|
||||||
|
const history = useHistory();
|
||||||
|
const role = useReactiveVar(roleVar);
|
||||||
|
const [newTemplate, setNewTemplate] = useState<TemplateInput>({
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
image: {
|
||||||
|
name: '',
|
||||||
|
src: '',
|
||||||
|
},
|
||||||
|
category: '',
|
||||||
|
specification: {
|
||||||
|
introduction: {
|
||||||
|
purpose: '',
|
||||||
|
documentConventions: '',
|
||||||
|
intendedAudience: '',
|
||||||
|
projectScope: '',
|
||||||
|
},
|
||||||
|
overallDescription: {
|
||||||
|
perspective: '',
|
||||||
|
userCharacteristics: '',
|
||||||
|
operatingEnvironment: '',
|
||||||
|
designImplementationConstraints: '',
|
||||||
|
userDocumentation: '',
|
||||||
|
assemptionsDependencies: '',
|
||||||
|
},
|
||||||
|
nonFunctionalRequirements: {
|
||||||
|
performanceRequirements: '',
|
||||||
|
safetyRequirements: '',
|
||||||
|
securityRequirements: '',
|
||||||
|
softwareQualityAttributes: '',
|
||||||
|
},
|
||||||
|
otherRequirements: '',
|
||||||
|
glossary: '',
|
||||||
|
analysisModels: '',
|
||||||
|
issuesList: '',
|
||||||
|
},
|
||||||
|
features: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
const [availableFeatures, setAvailableFeatures] = useState<
|
||||||
|
Array<FeatureOutput>
|
||||||
|
>();
|
||||||
|
|
||||||
|
const [selectedSection, setSelectedSection] = useState<
|
||||||
|
'general' | 'specification' | 'features'
|
||||||
|
>('general');
|
||||||
|
const [error, setError] = useState<string>('');
|
||||||
|
|
||||||
|
const { data: categories, loading: categoriesLoading } = useQuery<
|
||||||
|
GetAllCategoriesQuery,
|
||||||
|
GetAllCategoriesQueryVariables
|
||||||
|
>(GET_ALL_CATEGORIES, {
|
||||||
|
fetchPolicy: 'network-only',
|
||||||
|
});
|
||||||
|
|
||||||
|
const [getFeatures, { loading: featuresLoading }] = useLazyQuery<
|
||||||
|
GetAllFeaturesQuery,
|
||||||
|
GetAllFeaturesQueryVariables
|
||||||
|
>(GET_ALL_FEATURES, {
|
||||||
|
onCompleted({ getAllFeatures }) {
|
||||||
|
setAvailableFeatures(getAllFeatures);
|
||||||
|
},
|
||||||
|
fetchPolicy: 'network-only',
|
||||||
|
});
|
||||||
|
|
||||||
|
const [addTemplate, { loading }] = useMutation<
|
||||||
|
AddTemplateMutation,
|
||||||
|
AddTemplateMutationVariables
|
||||||
|
>(ADD_TEMPLATE, {
|
||||||
|
onCompleted({ addTemplate: { id } }) {
|
||||||
|
history.push(`/template/${id}`);
|
||||||
|
},
|
||||||
|
onError({ graphQLErrors }) {
|
||||||
|
setError(graphQLErrors[0]?.extensions?.info);
|
||||||
|
setTimeout(() => setError(''), 3000);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const generalForm = useFormik({
|
||||||
|
initialValues: {
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
imageName: '',
|
||||||
|
imageSource: '',
|
||||||
|
category: '',
|
||||||
|
},
|
||||||
|
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'),
|
||||||
|
category: Yup.string().required('Category is required'),
|
||||||
|
}),
|
||||||
|
onSubmit: ({ name, description, category, imageName, imageSource }) => {
|
||||||
|
setNewTemplate({
|
||||||
|
name,
|
||||||
|
description,
|
||||||
|
image: { name: imageName, src: imageSource },
|
||||||
|
category,
|
||||||
|
});
|
||||||
|
setSelectedSection('specification');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const specificationForm = useFormik({
|
||||||
|
initialValues: {
|
||||||
|
purpose: '',
|
||||||
|
documentConventions: '',
|
||||||
|
intendedAudience: '',
|
||||||
|
projectScope: '',
|
||||||
|
perspective: '',
|
||||||
|
userCharacteristics: '',
|
||||||
|
operatingEnvironment: '',
|
||||||
|
designImplementationConstraints: '',
|
||||||
|
userDocumentation: '',
|
||||||
|
assemptionsDependencies: '',
|
||||||
|
performanceRequirements: '',
|
||||||
|
safetyRequirements: '',
|
||||||
|
securityRequirements: '',
|
||||||
|
softwareQualityAttributes: '',
|
||||||
|
otherRequirements: '',
|
||||||
|
glossary: '',
|
||||||
|
analysisModels: '',
|
||||||
|
issuesList: '',
|
||||||
|
},
|
||||||
|
validationSchema: Yup.object().shape({
|
||||||
|
purpose: Yup.string().required('Purpose is required'),
|
||||||
|
documentConventions: Yup.string().required(
|
||||||
|
'Document conventions is required'
|
||||||
|
),
|
||||||
|
intendedAudience: Yup.string().required('Intented audience is required'),
|
||||||
|
projectScope: Yup.string().required('Project scope is required'),
|
||||||
|
perspective: Yup.string().required('Perspective is required'),
|
||||||
|
userCharacteristics: Yup.string().required(
|
||||||
|
'User characteristics is required'
|
||||||
|
),
|
||||||
|
operatingEnvironment: Yup.string().required(
|
||||||
|
'Operating environment is required'
|
||||||
|
),
|
||||||
|
designImplementationConstraints: Yup.string().required(
|
||||||
|
'Design and implementation constraints is required'
|
||||||
|
),
|
||||||
|
userDocumentation: Yup.string().required(
|
||||||
|
'User documentation is required'
|
||||||
|
),
|
||||||
|
assemptionsDependencies: Yup.string().required(
|
||||||
|
'Assumptions and dependencies is required'
|
||||||
|
),
|
||||||
|
performanceRequirements: Yup.string().required(
|
||||||
|
'Performance requirements is required'
|
||||||
|
),
|
||||||
|
safetyRequirements: Yup.string().required(
|
||||||
|
'Safety requirements is required'
|
||||||
|
),
|
||||||
|
securityRequirements: Yup.string().required(
|
||||||
|
'Security requirements is required'
|
||||||
|
),
|
||||||
|
softwareQualityAttributes: Yup.string().required(
|
||||||
|
'Software quality attributes is required'
|
||||||
|
),
|
||||||
|
otherRequirements: Yup.string().required(
|
||||||
|
'Other requirements is required'
|
||||||
|
),
|
||||||
|
glossary: Yup.string().required('Glossary is required'),
|
||||||
|
analysisModels: Yup.string().required('Analysis models is required'),
|
||||||
|
issuesList: Yup.string().required('Issues list is required'),
|
||||||
|
}),
|
||||||
|
onSubmit: ({
|
||||||
|
purpose,
|
||||||
|
documentConventions,
|
||||||
|
intendedAudience,
|
||||||
|
projectScope,
|
||||||
|
perspective,
|
||||||
|
userCharacteristics,
|
||||||
|
operatingEnvironment,
|
||||||
|
designImplementationConstraints,
|
||||||
|
userDocumentation,
|
||||||
|
assemptionsDependencies,
|
||||||
|
performanceRequirements,
|
||||||
|
safetyRequirements,
|
||||||
|
securityRequirements,
|
||||||
|
softwareQualityAttributes,
|
||||||
|
otherRequirements,
|
||||||
|
glossary,
|
||||||
|
analysisModels,
|
||||||
|
issuesList,
|
||||||
|
}) => {
|
||||||
|
setNewTemplate({
|
||||||
|
...newTemplate,
|
||||||
|
specification: {
|
||||||
|
introduction: {
|
||||||
|
purpose,
|
||||||
|
documentConventions,
|
||||||
|
intendedAudience,
|
||||||
|
projectScope,
|
||||||
|
},
|
||||||
|
overallDescription: {
|
||||||
|
perspective,
|
||||||
|
userCharacteristics,
|
||||||
|
operatingEnvironment,
|
||||||
|
designImplementationConstraints,
|
||||||
|
userDocumentation,
|
||||||
|
assemptionsDependencies,
|
||||||
|
},
|
||||||
|
nonFunctionalRequirements: {
|
||||||
|
performanceRequirements,
|
||||||
|
safetyRequirements,
|
||||||
|
securityRequirements,
|
||||||
|
softwareQualityAttributes,
|
||||||
|
},
|
||||||
|
otherRequirements,
|
||||||
|
glossary,
|
||||||
|
analysisModels,
|
||||||
|
issuesList,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
setSelectedSection('features');
|
||||||
|
getFeatures();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const featuresForm = useFormik<{ features: Array<string> }>({
|
||||||
|
initialValues: {
|
||||||
|
features: [],
|
||||||
|
},
|
||||||
|
onSubmit: ({ features }) => {
|
||||||
|
addTemplate({ variables: { template: { ...newTemplate, features } } });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return role === 'productOwner' ? (
|
||||||
|
<Wrapper>
|
||||||
|
<Box>
|
||||||
|
<Button
|
||||||
|
text='Back'
|
||||||
|
color={role || 'client'}
|
||||||
|
size='small'
|
||||||
|
onClick={() => history.goBack()}
|
||||||
|
iconLeft={<ArrowLeft />}
|
||||||
|
/>
|
||||||
|
<Text variant='headline' weight='bold'>
|
||||||
|
Add Template
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
display='grid'
|
||||||
|
gridTemplateColumns='0.5fr 2fr'
|
||||||
|
columnGap='25px'
|
||||||
|
marginTop='1rem'
|
||||||
|
>
|
||||||
|
<Box display='grid' rowGap='0.5rem' gridTemplateRows='repeat(3, 50px)'>
|
||||||
|
<SectionSelector
|
||||||
|
icon={<General />}
|
||||||
|
color={role || 'client'}
|
||||||
|
text='General'
|
||||||
|
selected={selectedSection === 'general'}
|
||||||
|
/>
|
||||||
|
<SectionSelector
|
||||||
|
icon={<Specification />}
|
||||||
|
color={role || 'client'}
|
||||||
|
text='Specification'
|
||||||
|
selected={selectedSection === 'specification'}
|
||||||
|
/>
|
||||||
|
<SectionSelector
|
||||||
|
icon={<Features />}
|
||||||
|
color={role || 'client'}
|
||||||
|
text='Features'
|
||||||
|
selected={selectedSection === 'features'}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
background='white'
|
||||||
|
boxShadow='1px 1px 10px 0px rgba(50, 59, 105, 0.25)'
|
||||||
|
borderRadius='10px'
|
||||||
|
width='100%'
|
||||||
|
padding='30px'
|
||||||
|
>
|
||||||
|
{selectedSection === 'general' && (
|
||||||
|
<>
|
||||||
|
{!categoriesLoading ? (
|
||||||
|
<>
|
||||||
|
<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}>
|
||||||
|
<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.touched.imageName &&
|
||||||
|
(!!generalForm.errors.imageName ||
|
||||||
|
!!generalForm.errors.imageSource)
|
||||||
|
}
|
||||||
|
errorMessage={generalForm.errors.imageName}
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
name='category'
|
||||||
|
label='Category'
|
||||||
|
onChange={generalForm.handleChange}
|
||||||
|
onBlur={generalForm.handleBlur}
|
||||||
|
value={generalForm.values.category}
|
||||||
|
select={generalForm.values.category}
|
||||||
|
options={
|
||||||
|
categories?.getAllCategories
|
||||||
|
? categories.getAllCategories.map(
|
||||||
|
({ id, name }) => ({
|
||||||
|
value: id,
|
||||||
|
label: name,
|
||||||
|
})
|
||||||
|
)
|
||||||
|
: [{ value: '', label: 'Default' }]
|
||||||
|
}
|
||||||
|
error={
|
||||||
|
generalForm.touched.category &&
|
||||||
|
!!generalForm.errors.category
|
||||||
|
}
|
||||||
|
errorMessage={generalForm.errors.category}
|
||||||
|
/>
|
||||||
|
<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}
|
||||||
|
/>
|
||||||
|
<Box
|
||||||
|
marginTop='0.5rem'
|
||||||
|
display='flex'
|
||||||
|
justifyContent='flex-end'
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
variant='primary-action'
|
||||||
|
color={role || 'client'}
|
||||||
|
text='Next'
|
||||||
|
type='submit'
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<Box display='grid' alignItems='center' justifyContent='center'>
|
||||||
|
<Spinner color={role || 'client'} />
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{selectedSection === 'specification' && (
|
||||||
|
<>
|
||||||
|
<Box
|
||||||
|
display='grid'
|
||||||
|
gridTemplateColumns='auto 1fr'
|
||||||
|
columnGap='1rem'
|
||||||
|
alignItems='center'
|
||||||
|
marginBottom='50px'
|
||||||
|
>
|
||||||
|
<Text variant='subheader' weight='bold'>
|
||||||
|
Specification
|
||||||
|
</Text>
|
||||||
|
{error && <Alert color='error' text={error} />}
|
||||||
|
</Box>
|
||||||
|
<form onSubmit={specificationForm.handleSubmit}>
|
||||||
|
<Box display='grid' gridTemplateColumns='auto' rowGap='0.5rem'>
|
||||||
|
<Text variant='headline' gutterBottom>
|
||||||
|
Introduction
|
||||||
|
</Text>
|
||||||
|
<TextArea
|
||||||
|
name='purpose'
|
||||||
|
label='Purpose'
|
||||||
|
color={role || 'client'}
|
||||||
|
value={specificationForm.values.purpose}
|
||||||
|
onChange={specificationForm.handleChange}
|
||||||
|
onBlur={specificationForm.handleBlur}
|
||||||
|
error={
|
||||||
|
specificationForm.touched.purpose &&
|
||||||
|
!!specificationForm.errors.purpose
|
||||||
|
}
|
||||||
|
errorMessage={specificationForm.errors.purpose}
|
||||||
|
/>
|
||||||
|
<TextArea
|
||||||
|
name='documentConventions'
|
||||||
|
label='Document Conventions'
|
||||||
|
color={role || 'client'}
|
||||||
|
value={specificationForm.values.documentConventions}
|
||||||
|
onChange={specificationForm.handleChange}
|
||||||
|
onBlur={specificationForm.handleBlur}
|
||||||
|
error={
|
||||||
|
specificationForm.touched.documentConventions &&
|
||||||
|
!!specificationForm.errors.documentConventions
|
||||||
|
}
|
||||||
|
errorMessage={specificationForm.errors.documentConventions}
|
||||||
|
/>
|
||||||
|
<TextArea
|
||||||
|
name='intendedAudience'
|
||||||
|
label='Intended Audience'
|
||||||
|
color={role || 'client'}
|
||||||
|
value={specificationForm.values.intendedAudience}
|
||||||
|
onChange={specificationForm.handleChange}
|
||||||
|
onBlur={specificationForm.handleBlur}
|
||||||
|
error={
|
||||||
|
specificationForm.touched.intendedAudience &&
|
||||||
|
!!specificationForm.errors.intendedAudience
|
||||||
|
}
|
||||||
|
errorMessage={specificationForm.errors.intendedAudience}
|
||||||
|
/>
|
||||||
|
<TextArea
|
||||||
|
name='projectScope'
|
||||||
|
label='Project Scope'
|
||||||
|
color={role || 'client'}
|
||||||
|
value={specificationForm.values.projectScope}
|
||||||
|
onChange={specificationForm.handleChange}
|
||||||
|
onBlur={specificationForm.handleBlur}
|
||||||
|
error={
|
||||||
|
specificationForm.touched.projectScope &&
|
||||||
|
!!specificationForm.errors.projectScope
|
||||||
|
}
|
||||||
|
errorMessage={specificationForm.errors.projectScope}
|
||||||
|
/>
|
||||||
|
<Text variant='headline' gutterBottom>
|
||||||
|
Overall Description
|
||||||
|
</Text>
|
||||||
|
<TextArea
|
||||||
|
name='perspective'
|
||||||
|
label='Perspective'
|
||||||
|
color={role || 'client'}
|
||||||
|
value={specificationForm.values.perspective}
|
||||||
|
onChange={specificationForm.handleChange}
|
||||||
|
onBlur={specificationForm.handleBlur}
|
||||||
|
error={
|
||||||
|
specificationForm.touched.perspective &&
|
||||||
|
!!specificationForm.errors.perspective
|
||||||
|
}
|
||||||
|
errorMessage={specificationForm.errors.perspective}
|
||||||
|
/>
|
||||||
|
<TextArea
|
||||||
|
name='userCharacteristics'
|
||||||
|
label='User Characteristics'
|
||||||
|
color={role || 'client'}
|
||||||
|
value={specificationForm.values.userCharacteristics}
|
||||||
|
onChange={specificationForm.handleChange}
|
||||||
|
onBlur={specificationForm.handleBlur}
|
||||||
|
error={
|
||||||
|
specificationForm.touched.userCharacteristics &&
|
||||||
|
!!specificationForm.errors.userCharacteristics
|
||||||
|
}
|
||||||
|
errorMessage={specificationForm.errors.userCharacteristics}
|
||||||
|
/>
|
||||||
|
<TextArea
|
||||||
|
name='operatingEnvironment'
|
||||||
|
label='Operating Environment'
|
||||||
|
color={role || 'client'}
|
||||||
|
value={specificationForm.values.operatingEnvironment}
|
||||||
|
onChange={specificationForm.handleChange}
|
||||||
|
onBlur={specificationForm.handleBlur}
|
||||||
|
error={
|
||||||
|
specificationForm.touched.operatingEnvironment &&
|
||||||
|
!!specificationForm.errors.operatingEnvironment
|
||||||
|
}
|
||||||
|
errorMessage={specificationForm.errors.operatingEnvironment}
|
||||||
|
/>
|
||||||
|
<TextArea
|
||||||
|
name='designImplementationConstraints'
|
||||||
|
label='Design and Implementation Constraints'
|
||||||
|
color={role || 'client'}
|
||||||
|
value={
|
||||||
|
specificationForm.values.designImplementationConstraints
|
||||||
|
}
|
||||||
|
onChange={specificationForm.handleChange}
|
||||||
|
onBlur={specificationForm.handleBlur}
|
||||||
|
error={
|
||||||
|
specificationForm.touched
|
||||||
|
.designImplementationConstraints &&
|
||||||
|
!!specificationForm.errors.designImplementationConstraints
|
||||||
|
}
|
||||||
|
errorMessage={
|
||||||
|
specificationForm.errors.designImplementationConstraints
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<TextArea
|
||||||
|
name='userDocumentation'
|
||||||
|
label='User Documentation'
|
||||||
|
color={role || 'client'}
|
||||||
|
value={specificationForm.values.userDocumentation}
|
||||||
|
onChange={specificationForm.handleChange}
|
||||||
|
onBlur={specificationForm.handleBlur}
|
||||||
|
error={
|
||||||
|
specificationForm.touched.userDocumentation &&
|
||||||
|
!!specificationForm.errors.userDocumentation
|
||||||
|
}
|
||||||
|
errorMessage={specificationForm.errors.userDocumentation}
|
||||||
|
/>
|
||||||
|
<TextArea
|
||||||
|
name='assemptionsDependencies'
|
||||||
|
label='Assumptions and Dependencies'
|
||||||
|
color={role || 'client'}
|
||||||
|
value={specificationForm.values.assemptionsDependencies}
|
||||||
|
onChange={specificationForm.handleChange}
|
||||||
|
onBlur={specificationForm.handleBlur}
|
||||||
|
error={
|
||||||
|
specificationForm.touched.assemptionsDependencies &&
|
||||||
|
!!specificationForm.errors.assemptionsDependencies
|
||||||
|
}
|
||||||
|
errorMessage={
|
||||||
|
specificationForm.errors.assemptionsDependencies
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Text variant='headline' gutterBottom>
|
||||||
|
Non-Functional Requirements
|
||||||
|
</Text>
|
||||||
|
<TextArea
|
||||||
|
name='performanceRequirements'
|
||||||
|
label='Performance Requirements'
|
||||||
|
color={role || 'client'}
|
||||||
|
value={specificationForm.values.performanceRequirements}
|
||||||
|
onChange={specificationForm.handleChange}
|
||||||
|
onBlur={specificationForm.handleBlur}
|
||||||
|
error={
|
||||||
|
specificationForm.touched.performanceRequirements &&
|
||||||
|
!!specificationForm.errors.performanceRequirements
|
||||||
|
}
|
||||||
|
errorMessage={
|
||||||
|
specificationForm.errors.performanceRequirements
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<TextArea
|
||||||
|
name='safetyRequirements'
|
||||||
|
label='Safety Requirements'
|
||||||
|
color={role || 'client'}
|
||||||
|
value={specificationForm.values.safetyRequirements}
|
||||||
|
onChange={specificationForm.handleChange}
|
||||||
|
onBlur={specificationForm.handleBlur}
|
||||||
|
error={
|
||||||
|
specificationForm.touched.safetyRequirements &&
|
||||||
|
!!specificationForm.errors.safetyRequirements
|
||||||
|
}
|
||||||
|
errorMessage={specificationForm.errors.safetyRequirements}
|
||||||
|
/>
|
||||||
|
<TextArea
|
||||||
|
name='securityRequirements'
|
||||||
|
label='Security Requirements'
|
||||||
|
color={role || 'client'}
|
||||||
|
value={specificationForm.values.securityRequirements}
|
||||||
|
onChange={specificationForm.handleChange}
|
||||||
|
onBlur={specificationForm.handleBlur}
|
||||||
|
error={
|
||||||
|
specificationForm.touched.securityRequirements &&
|
||||||
|
!!specificationForm.errors.securityRequirements
|
||||||
|
}
|
||||||
|
errorMessage={specificationForm.errors.securityRequirements}
|
||||||
|
/>
|
||||||
|
<TextArea
|
||||||
|
name='softwareQualityAttributes'
|
||||||
|
label='Software Quality Attributes'
|
||||||
|
color={role || 'client'}
|
||||||
|
value={specificationForm.values.softwareQualityAttributes}
|
||||||
|
onChange={specificationForm.handleChange}
|
||||||
|
onBlur={specificationForm.handleBlur}
|
||||||
|
error={
|
||||||
|
specificationForm.touched.softwareQualityAttributes &&
|
||||||
|
!!specificationForm.errors.softwareQualityAttributes
|
||||||
|
}
|
||||||
|
errorMessage={
|
||||||
|
specificationForm.errors.softwareQualityAttributes
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<TextArea
|
||||||
|
name='otherRequirements'
|
||||||
|
label='Other Requirements'
|
||||||
|
color={role || 'client'}
|
||||||
|
value={specificationForm.values.otherRequirements}
|
||||||
|
onChange={specificationForm.handleChange}
|
||||||
|
onBlur={specificationForm.handleBlur}
|
||||||
|
error={
|
||||||
|
specificationForm.touched.otherRequirements &&
|
||||||
|
!!specificationForm.errors.otherRequirements
|
||||||
|
}
|
||||||
|
errorMessage={specificationForm.errors.otherRequirements}
|
||||||
|
/>
|
||||||
|
<TextArea
|
||||||
|
name='glossary'
|
||||||
|
label='Glossary'
|
||||||
|
color={role || 'client'}
|
||||||
|
value={specificationForm.values.glossary}
|
||||||
|
onChange={specificationForm.handleChange}
|
||||||
|
onBlur={specificationForm.handleBlur}
|
||||||
|
error={
|
||||||
|
specificationForm.touched.glossary &&
|
||||||
|
!!specificationForm.errors.glossary
|
||||||
|
}
|
||||||
|
errorMessage={specificationForm.errors.glossary}
|
||||||
|
/>
|
||||||
|
<TextArea
|
||||||
|
name='analysisModels'
|
||||||
|
label='Analysis Models'
|
||||||
|
color={role || 'client'}
|
||||||
|
value={specificationForm.values.analysisModels}
|
||||||
|
onChange={specificationForm.handleChange}
|
||||||
|
onBlur={specificationForm.handleBlur}
|
||||||
|
error={
|
||||||
|
specificationForm.touched.analysisModels &&
|
||||||
|
!!specificationForm.errors.analysisModels
|
||||||
|
}
|
||||||
|
errorMessage={specificationForm.errors.analysisModels}
|
||||||
|
/>
|
||||||
|
<TextArea
|
||||||
|
name='issuesList'
|
||||||
|
label='Issues List'
|
||||||
|
color={role || 'client'}
|
||||||
|
value={specificationForm.values.issuesList}
|
||||||
|
onChange={specificationForm.handleChange}
|
||||||
|
onBlur={specificationForm.handleBlur}
|
||||||
|
error={
|
||||||
|
specificationForm.touched.issuesList &&
|
||||||
|
!!specificationForm.errors.issuesList
|
||||||
|
}
|
||||||
|
errorMessage={specificationForm.errors.issuesList}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
<Box marginTop='1rem' display='flex' justifyContent='flex-end'>
|
||||||
|
<Button
|
||||||
|
variant='primary-action'
|
||||||
|
color={role || 'client'}
|
||||||
|
text='Next'
|
||||||
|
type='submit'
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{selectedSection === 'features' && (
|
||||||
|
<>
|
||||||
|
{!featuresLoading ? (
|
||||||
|
<>
|
||||||
|
<Box
|
||||||
|
display='grid'
|
||||||
|
gridTemplateColumns='auto 1fr'
|
||||||
|
columnGap='1rem'
|
||||||
|
alignItems='center'
|
||||||
|
marginBottom='50px'
|
||||||
|
>
|
||||||
|
<Text variant='subheader' weight='bold'>
|
||||||
|
Features
|
||||||
|
</Text>
|
||||||
|
{error && <Alert color='error' text={error} />}
|
||||||
|
</Box>
|
||||||
|
<form onSubmit={featuresForm.handleSubmit}>
|
||||||
|
<Box
|
||||||
|
display='grid'
|
||||||
|
gridTemplateColumns='repeat(2, 1fr)'
|
||||||
|
columnGap='40px'
|
||||||
|
rowGap='45px'
|
||||||
|
alignItems='stretch'
|
||||||
|
>
|
||||||
|
{availableFeatures &&
|
||||||
|
availableFeatures.map((feature) => (
|
||||||
|
<FeatureCard
|
||||||
|
feature={feature}
|
||||||
|
selectable
|
||||||
|
selected={featuresForm.values.features.includes(
|
||||||
|
feature.id
|
||||||
|
)}
|
||||||
|
toggleSelect={() => {
|
||||||
|
if (
|
||||||
|
!featuresForm.values.features.includes(
|
||||||
|
feature.id
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
featuresForm.setFieldValue('features', [
|
||||||
|
...featuresForm.values.features,
|
||||||
|
feature.id,
|
||||||
|
]);
|
||||||
|
} else {
|
||||||
|
featuresForm.setFieldValue(
|
||||||
|
'features',
|
||||||
|
featuresForm.values.features.filter(
|
||||||
|
(id) => id !== feature.id
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</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 display='grid' alignItems='center' justifyContent='center'>
|
||||||
|
<Spinner color={role || 'client'} />
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Wrapper>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{role === 'admin' && <Redirect to='/clients' />}
|
||||||
|
{role === 'client' ||
|
||||||
|
(role === 'developer' && <Redirect to='/project' />)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddTemplate;
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
export const Wrapper = styled.div`
|
||||||
|
padding: 35px 45px 35px 120px;
|
||||||
|
`;
|
||||||
Reference in New Issue
Block a user