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

Improve networking, loading and redirection

Browse Source
This commit is contained in:
Hazem Krimi
2023-05-11 19:16:19 +01:00
parent 597c4703f2
commit 38527c2621
22 changed files with 1750 additions and 1750 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+5 -5
View File
@@ -28,7 +28,7 @@ import {
AddProject,
UpdateProject,
Payments,
SupportMessaging,
Support,
} from './pages';
import { GetUserByIdQuery, GetUserByIdQueryVariables } from './graphql/types';
import { GET_USER_BY_ID } from './graphql/auth.api';
@@ -136,18 +136,18 @@ const App = () => {
}
/>
<Route
path='/support-messaging/:project'
path='/support/:project'
element={
<Protected>
<SupportMessaging />
<Support />
</Protected>
}
/>
<Route
path='/support-messaging/:project/:id'
path='/support/:project/:id'
element={
<Protected>
<SupportMessaging />
<Support />
</Protected>
}
/>
src/components/Sidebar/index.tsx
+10 -13
View File
@@ -56,8 +56,7 @@ const Sidebar = () => {
},
onCompleted({ getAllProjectsByClientId }) {
setProjects(getAllProjectsByClientId);
},
fetchPolicy: 'network-only',
}
});
const [getProjects] = useLazyQuery<
@@ -66,8 +65,7 @@ const Sidebar = () => {
>(GET_ALL_PROJECTS, {
onCompleted({ getAllProjects }) {
setProjects(getAllProjects);
},
fetchPolicy: 'network-only',
}
});
const [getTemplates] = useLazyQuery<
@@ -77,7 +75,6 @@ const Sidebar = () => {
onCompleted({ getAllTemplates }) {
setTemplates(getAllTemplates);
},
fetchPolicy: 'network-only',
});
const [getFeatures] = useLazyQuery<
@@ -87,7 +84,6 @@ const Sidebar = () => {
onCompleted({ getAllFeatures }) {
setFeatures(getAllFeatures);
},
fetchPolicy: 'network-only',
});
const [getCategories] = useLazyQuery<
@@ -97,7 +93,6 @@ const Sidebar = () => {
onCompleted({ getAllCategories }) {
setCategories(getAllCategories);
},
fetchPolicy: 'network-only',
});
useEffect(() => {
@@ -123,8 +118,6 @@ const Sidebar = () => {
setFeatures([]);
setCategories([]);
};
// eslint-disable-next-line
}, [location.pathname]);
return (
@@ -133,14 +126,15 @@ const Sidebar = () => {
<>
<Box display='flex' flexDirection='column'>
{projects &&
projects.map((project) => (
new RegExp(/project/, 'i').test(location.pathname) &&
projects.map((project, index) => (
<Box marginBottom='20px' key={project.id}>
<div id={`project-${project.id}`}>
<SidebarItem
color={role}
selected={new RegExp(project.id, 'i').test(
location.pathname
)}
selected={
new RegExp(project.id, 'i').test(location.pathname) ||
(index === 0 && location.pathname === '/project')}
text={project.name[0]}
onClick={() => navigate(`/project/${project.id}`)}
/>
@@ -152,6 +146,7 @@ const Sidebar = () => {
</Box>
))}
{templates &&
new RegExp(/template/, 'i').test(location.pathname) &&
templates.map((template, index) => (
<Box marginBottom='20px' key={template.id}>
<div id={`template-${template.id}`}>
@@ -172,6 +167,7 @@ const Sidebar = () => {
</Box>
))}
{features &&
new RegExp(/feature/, 'i').test(location.pathname) &&
features.map((feature, index) => (
<Box marginBottom='20px' key={feature.id}>
<div id={`feature-${feature.id}`}>
@@ -192,6 +188,7 @@ const Sidebar = () => {
</Box>
))}
{categories &&
new RegExp(/category/, 'i').test(location.pathname) &&
categories.map((category, index) => (
<Box marginBottom='20px' key={category.id}>
<div id={`category-${category.id}`}>
src/pages/AddCategory/index.tsx
+8 -7
View File
@@ -66,7 +66,14 @@ const AddCategory = () => {
},
});
return role === 'developer' ? (
if (role !== 'developer') return (
<>
{role === 'admin' && <Navigate to='/clients' />}
{['client', 'productOwer'].includes(role as string) && <Navigate to='/project' />}
</>
)
return (
<Wrapper>
<Box>
<Button
@@ -188,12 +195,6 @@ const AddCategory = () => {
</Box>
</Box>
</Wrapper>
) : (
<>
{role === 'admin' && <Navigate to='/clients' />}
{role === 'client' ||
(role === 'productOwner' && <Navigate to='/project' />)}
</>
);
};
src/pages/AddFeature/index.tsx
+8 -8
View File
@@ -86,7 +86,6 @@ const AddFeature = () => {
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'),
}),
@@ -122,7 +121,14 @@ const AddFeature = () => {
},
});
return role === 'developer' ? (
if (role !== 'developer') return (
<>
{role === 'admin' && <Navigate to='/clients' />}
{['client', 'productOwer'].includes(role as string) && <Navigate to='/project' />}
</>
)
return (
<Wrapper>
<Box>
<Button
@@ -477,12 +483,6 @@ const AddFeature = () => {
</Box>
</Box>
</Wrapper>
) : (
<>
{role === 'admin' && <Navigate to='/clients' />}
{role === 'client' ||
(role === 'productOwner' && <Navigate to='/project' />)}
</>
);
};
src/pages/AddProject/index.tsx
+4 -11
View File
@@ -153,8 +153,7 @@ const AddProject = () => {
>(GET_ALL_CATEGORIES, {
onCompleted({ getAllCategories }) {
setCategories(getAllCategories);
},
fetchPolicy: 'network-only',
}
});
const [getTemplates, { loading: templatesLoading }] = useLazyQuery<
@@ -163,8 +162,7 @@ const AddProject = () => {
>(GET_ALL_TEMPLATES_BY_CATEGORIES_ID, {
onCompleted({ getAllTemplatesByCategoriesId }) {
setTemplates(getAllTemplatesByCategoriesId);
},
fetchPolicy: 'network-only',
}
});
const [getFeatures, { loading: featuresLoading }] = useLazyQuery<
@@ -173,8 +171,7 @@ const AddProject = () => {
>(GET_ALL_FEATURES, {
onCompleted({ getAllFeatures }) {
setFeatures(getAllFeatures);
},
fetchPolicy: 'network-only',
}
});
const [getDevelopers, { loading: developersLoading }] = useLazyQuery<
@@ -183,8 +180,7 @@ const AddProject = () => {
>(GET_ALL_USERS, {
onCompleted({ getAllUsers }) {
setDevelopers(getAllUsers.filter((user) => user.role === 'Developer'));
},
fetchPolicy: 'network-only',
}
});
const [createUser, { loading: createUserLoading }] = useMutation<
@@ -248,8 +244,6 @@ const AddProject = () => {
if (step === 'features') getFeatures();
if (step === 'client-creation') getCountryCodes();
if (step === 'project-metadata') getDevelopers();
// eslint-disable-next-line
}, [step]);
const basicInfoForm = useFormik({
@@ -512,7 +506,6 @@ const AddProject = () => {
validationSchema: Yup.object().shape({
summary: Yup.string().required('Summary is required'),
purpose: Yup.string().required('Purpose is required'),
// prettier-ignore
months: Yup.number().typeError('Months must be a number').required('Months is required'),
}),
onSubmit: ({
src/pages/AddTemplate/index.tsx
+92 -79
View File
@@ -22,7 +22,7 @@ import {
FeatureCard,
} from '../../components';
import { Wrapper } from './styles';
import { ArrowLeft, General, Specification, Features } from '../../assets';
import { ArrowLeft, General, Specification, Features, Empty } from '../../assets';
import {
AddTemplateMutation,
AddTemplateMutationVariables,
@@ -85,14 +85,14 @@ const AddTemplate = () => {
>('general');
const [error, setError] = useState<string>('');
const { data: categories, loading: categoriesLoading } = useQuery<
const { data: categories, loading: categoriesLoading, error: categoriesError } = useQuery<
GetAllCategoriesQuery,
GetAllCategoriesQueryVariables
>(GET_ALL_CATEGORIES, {
fetchPolicy: 'network-only',
});
const [getFeatures, { loading: featuresLoading }] = useLazyQuery<
const [getFeatures, { loading: featuresLoading, error: featuresError }] = useLazyQuery<
GetAllFeaturesQuery,
GetAllFeaturesQueryVariables
>(GET_ALL_FEATURES, {
@@ -267,7 +267,34 @@ const AddTemplate = () => {
},
});
return role === 'productOwner' ? (
if (role !== 'productOwner') return (
<>
{role === 'admin' && <Navigate to='/clients' />}
{['client', 'developer'].includes(role as string) && <Navigate to='/project' />}
</>
);
if (categoriesLoading || featuresLoading) return (
<Spinner fullScreen color={role || 'client'} />
);
if (categoriesError || featuresError || !availableFeatures || !categories) return (
<Wrapper color={role}>
<Box
width='100%'
height='100vh'
display='grid'
alignItems='center'
justifyContent='center'
>
<Box>
<Empty />
</Box>
</Box>
</Wrapper>
);
return (
<Wrapper>
<Box>
<Button
@@ -734,89 +761,75 @@ const AddTemplate = () => {
)}
{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(
<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
)}
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}
)
) {
featuresForm.setFieldValue('features', [
...featuresForm.values.features,
feature.id,
]);
} else {
featuresForm.setFieldValue(
'features',
featuresForm.values.features.filter(
(id) => id !== feature.id
)
);
}
}}
/>
</Box>
</form>
</>
) : (
<Box display='grid' alignItems='center' justifyContent='center'>
<Spinner color={role || 'client'} />
))}
</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>
</Wrapper>
) : (
<>
{role === 'admin' && <Navigate to='/clients' />}
{role === 'client' ||
(role === 'developer' && <Navigate to='/project' />)}
</>
);
};
src/pages/Category/index.tsx
+58 -65
View File
@@ -23,24 +23,22 @@ const Category = () => {
const { id } = useParams<{ id: string }>();
const [category, setCategory] = useState<CategoryOutput>();
const [getCategories, { loading: categoriesLoading }] = useLazyQuery<
const [getCategories, { loading: categoriesLoading, error: categoriesError }] = useLazyQuery<
GetAllCategoriesQuery,
GetAllCategoriesQueryVariables
>(GET_ALL_CATEGORIES, {
onCompleted({ getAllCategories }) {
setCategory(getAllCategories[0]);
},
fetchPolicy: 'network-only',
}
});
const [getCategory, { loading: categoryLoading }] = useLazyQuery<
const [getCategory, { loading: categoryLoading, error: categoryError }] = useLazyQuery<
GetCategoryByIdQuery,
GetCategoryByIdQueryVariables
>(GET_CATEGORY_BY_ID, {
onCompleted({ getCategoryById }) {
setCategory(getCategoryById);
},
fetchPolicy: 'network-only',
}
});
useEffect(() => {
@@ -49,70 +47,65 @@ const Category = () => {
} else {
getCategories();
}
// eslint-disable-next-line
}, [id]);
return role === 'developer' ? (
<>
{!categoriesLoading && !categoryLoading ? (
<>
{category ? (
<Wrapper>
<Box padding='35px 45px 0px 120px'>
<Box
display='flex'
flexDirection='row'
alignItems='center'
marginBottom='20px'
>
<Box flexGrow='1'>
<Text variant='headline' weight='bold'>
{category.name}
</Text>
</Box>
<Button
color={role || 'client'}
variant='primary-action'
text='Settings'
iconLeft={<Settings />}
onClick={() =>
navigate(`/category-settings/${id || category.id}`)
}
/>
</Box>
<Box>
<Text variant='headline'>Description</Text>
<Text>{category.description}</Text>
</Box>
</Box>
</Wrapper>
) : (
<Wrapper color={role}>
<Box
width='100%'
height='100vh'
display='grid'
alignItems='center'
justifyContent='center'
>
<Box>
<Empty />
</Box>
</Box>
</Wrapper>
)}
</>
) : (
<Spinner fullScreen color={role || 'client'} />
)}
</>
) : (
if (role !== 'developer') return (
<>
{role === 'admin' && <Navigate to='/clients' />}
{role === 'client' ||
(role === 'productOwner' && <Navigate to='/project' />)}
{['client', 'productOwer'].includes(role as string) && <Navigate to='/project' />}
</>
)
if (categoriesLoading || categoryLoading) return (
<Spinner fullScreen color={role || 'client'} />
);
if (categoriesError || categoryError || !category) return (
<Wrapper color={role}>
<Box
width='100%'
height='100vh'
display='grid'
alignItems='center'
justifyContent='center'
>
<Box>
<Empty />
</Box>
</Box>
</Wrapper>
);
return (
<Wrapper>
<Box padding='35px 45px 0px 120px'>
<Box
display='flex'
flexDirection='row'
alignItems='center'
marginBottom='20px'
>
<Box flexGrow='1'>
<Text variant='headline' weight='bold'>
{category.name}
</Text>
</Box>
<Button
color={role || 'client'}
variant='primary-action'
text='Settings'
iconLeft={<Settings />}
onClick={() =>
navigate(`/category-settings/${id || category.id}`)
}
/>
</Box>
<Box>
<Text variant='headline'>Description</Text>
<Text>{category.description}</Text>
</Box>
</Box>
</Wrapper>
);
};
src/pages/CategorySettings/index.tsx
+31 -19
View File
@@ -16,7 +16,7 @@ import {
Modal,
} from '../../components';
import { Wrapper } from './styles';
import { ArrowLeft, General } from '../../assets';
import { ArrowLeft, Empty, General } from '../../assets';
import {
CategoryOutput,
DeleteCategoryMutation,
@@ -44,14 +44,13 @@ const CategorySettings = () => {
const [deleteCategoryModal, setDeleteCategoryModal] =
useState<boolean>(false);
const [getCategory, { loading: categoryLoading }] = useLazyQuery<
const [getCategory, { loading: categoryLoading, error: categoryError }] = useLazyQuery<
GetCategoryByIdQuery,
GetCategoryByIdQueryVariables
>(GET_CATEGORY_BY_ID, {
onCompleted({ getCategoryById }) {
setCategory(getCategoryById);
},
fetchPolicy: 'network-only',
}
});
const [updateCategory, { loading }] = useMutation<
@@ -84,8 +83,6 @@ const CategorySettings = () => {
useEffect(() => {
getCategory({ variables: { id: id as string } });
// eslint-disable-next-line
}, [id]);
const form = useFormik({
@@ -116,7 +113,34 @@ const CategorySettings = () => {
enableReinitialize: true,
});
return role === 'developer' ? (
if (role !== 'developer') return (
<>
{role === 'admin' && <Navigate to='/clients' />}
{['client', 'productOwer'].includes(role as string) && <Navigate to='/project' />}
</>
)
if (categoryLoading) return (
<Spinner fullScreen color={role || 'client'} />
);
if (categoryError || !category) return (
<Wrapper color={role}>
<Box
width='100%'
height='100vh'
display='grid'
alignItems='center'
justifyContent='center'
>
<Box>
<Empty />
</Box>
</Box>
</Wrapper>
);
return (
<Wrapper>
{deleteCategoryModal && (
<Modal
@@ -176,7 +200,6 @@ const CategorySettings = () => {
<Alert color='success' text='Category updated successfully' />
)}
</Box>
{!categoryLoading ? (
<form onSubmit={form.handleSubmit}>
<Box
display='grid'
@@ -262,20 +285,9 @@ const CategorySettings = () => {
</Box>
</Box>
</form>
) : (
<Box display='grid' alignItems='center' justifyContent='center'>
<Spinner color={role || 'client'} />
</Box>
)}
</Box>
</Box>
</Wrapper>
) : (
<>
{role === 'admin' && <Navigate to='/clients' />}
{role === 'client' ||
(role === 'productOwner' && <Navigate to='/project' />)}
</>
);
};
src/pages/CreateUser/index.tsx
+5 -3
View File
@@ -172,7 +172,11 @@ const CreateUser = () => {
},
});
return role === 'admin' ? (
if (role !== 'admin') return (
<Navigate to='/' />
)
return (
<Wrapper>
<Box>
<Button
@@ -470,8 +474,6 @@ const CreateUser = () => {
</Box>
</Box>
</Wrapper>
) : (
<Navigate to='/' />
);
};
src/pages/Feature/index.tsx
+120 -127
View File
@@ -28,24 +28,22 @@ const Feature = () => {
const { id } = useParams<{ id: string }>();
const [feature, setFeature] = useState<FeatureOutput>();
const [getFeatures, { loading: featuresLoading }] = useLazyQuery<
const [getFeatures, { loading: featuresLoading, error: featuresError }] = useLazyQuery<
GetAllFeaturesQuery,
GetAllFeaturesQueryVariables
>(GET_ALL_FEATURES, {
onCompleted({ getAllFeatures }) {
setFeature(getAllFeatures[0]);
},
fetchPolicy: 'network-only',
}
});
const [getFeature, { loading: featureLoading }] = useLazyQuery<
const [getFeature, { loading: featureLoading, error: featureError }] = useLazyQuery<
GetFeatureByIdQuery,
GetFeatureByIdQueryVariables
>(GET_FEATURE_BY_ID, {
onCompleted({ getFeatureById }) {
setFeature(getFeatureById);
},
fetchPolicy: 'network-only',
}
});
useEffect(() => {
@@ -54,133 +52,128 @@ const Feature = () => {
} else {
getFeatures();
}
// eslint-disable-next-line
}, [id]);
return role === 'developer' ? (
<>
{!featuresLoading && !featureLoading ? (
<>
{feature ? (
<Wrapper>
<Box padding='35px 45px 0px 120px'>
<Box
display='flex'
flexDirection='row'
alignItems='center'
marginBottom='20px'
>
<Box flexGrow='1'>
<Text variant='headline' weight='bold'>
{feature.name}
</Text>
</Box>
<Button
color={role || 'client'}
variant='primary-action'
text='Settings'
iconLeft={<Settings />}
onClick={() =>
navigate(`/feature-settings/${id || feature.id}`)
}
/>
</Box>
<Box marginBottom='30px'>
<Text variant='headline' gutterBottom>
Description
</Text>
<Text>{feature.description}</Text>
</Box>
<Box
display='flex'
flexDirection='row'
alignItems='center'
marginBottom='30px'
>
<Box marginRight='35px'>
<Text variant='headline' gutterBottom>
Price
</Text>
</Box>
<Text variant='title' weight='bold'>
${feature.price}
</Text>
</Box>
{feature.wireframes && (
<Box
display='flex'
flexDirection='column'
marginBottom='30px'
>
<Text variant='headline' gutterBottom>
Wireframes
</Text>
<Box
background='white'
boxShadow='1px 1px 10px 0px rgba(50, 59, 105, 0.25)'
borderRadius='10px'
width='100%'
padding='30px'
display='grid'
gridTemplate='auto / repeat(auto-fit, 175px)'
gap='30px'
alignItems='stretch'
>
{feature.wireframes.map((image) => (
<ImagePreview
key={image.name}
color={role}
image={image}
/>
))}
</Box>
</Box>
)}
<Box
display='flex'
flexDirection='row'
alignItems='center'
marginBottom='30px'
>
<Box marginRight='35px'>
<Text variant='headline' gutterBottom>
Repo
</Text>
</Box>
<Link url target='_blank' href={feature.repo}>
{feature.repo}
</Link>
</Box>
</Box>
</Wrapper>
) : (
<Wrapper color={role}>
<Box
width='100%'
height='100vh'
display='grid'
alignItems='center'
justifyContent='center'
>
<Box>
<Empty />
</Box>
</Box>
</Wrapper>
)}
</>
) : (
<Spinner fullScreen color={role || 'client'} />
)}
</>
) : (
if (role !== 'developer') return (
<>
{role === 'admin' && <Navigate to='/clients' />}
{role === 'client' ||
(role === 'productOwner' && <Navigate to='/project' />)}
{['client', 'productOwer'].includes(role as string) && <Navigate to='/project' />}
</>
);
if (featureLoading || featureLoading) return (
<Spinner fullScreen color={role || 'client'} />
);
if (featuresError || featureError || !feature) return (
<Wrapper color={role}>
<Box
width='100%'
height='100vh'
display='grid'
alignItems='center'
justifyContent='center'
>
<Box>
<Empty />
</Box>
</Box>
</Wrapper>
);
return (
<Wrapper>
<Box padding='35px 45px 0px 120px'>
<Box
display='flex'
flexDirection='row'
alignItems='center'
marginBottom='20px'
>
<Box flexGrow='1'>
<Text variant='headline' weight='bold'>
{feature.name}
</Text>
</Box>
<Button
color={role || 'client'}
variant='primary-action'
text='Settings'
iconLeft={<Settings />}
onClick={() =>
navigate(`/feature-settings/${id || feature.id}`)
}
/>
</Box>
<Box marginBottom='30px'>
<Text variant='headline' gutterBottom>
Description
</Text>
<Text>{feature.description}</Text>
</Box>
<Box
display='flex'
flexDirection='row'
alignItems='center'
marginBottom='30px'
>
<Box marginRight='35px'>
<Text variant='headline' gutterBottom>
Price
</Text>
</Box>
<Text variant='title' weight='bold'>
${feature.price}
</Text>
</Box>
{feature.wireframes && (
<Box
display='flex'
flexDirection='column'
marginBottom='30px'
>
<Text variant='headline' gutterBottom>
Wireframes
</Text>
<Box
background='white'
boxShadow='1px 1px 10px 0px rgba(50, 59, 105, 0.25)'
borderRadius='10px'
width='100%'
padding='30px'
display='grid'
gridTemplate='auto / repeat(auto-fit, 175px)'
gap='30px'
alignItems='stretch'
>
{feature.wireframes.map((image) => (
<ImagePreview
key={image.name}
color={role}
image={image}
/>
))}
</Box>
</Box>
)}
<Box
display='flex'
flexDirection='row'
alignItems='center'
marginBottom='30px'
>
<Box marginRight='35px'>
<Text variant='headline' gutterBottom>
Repo
</Text>
</Box>
<Link url target='_blank' href={feature.repo}>
{feature.repo}
</Link>
</Box>
</Box>
</Wrapper>
);
};
export default Feature;
src/pages/FeatureSettings/index.tsx
+269 -259
View File
@@ -18,7 +18,7 @@ import {
ImagePreview,
} from '../../components';
import { Wrapper } from './styles';
import { ArrowLeft, Design, General } from '../../assets';
import { ArrowLeft, Design, Empty, General } from '../../assets';
import {
DeleteFeatureMutation,
DeleteFeatureMutationVariables,
@@ -59,14 +59,13 @@ const FeatureSettings = () => {
const [deleteFeatureModal, setDeleteFeatureModal] = useState<boolean>(false);
const [getFeature, { loading: featureLoading }] = useLazyQuery<
const [getFeature, { loading: featureLoading, error: featureError }] = useLazyQuery<
GetFeatureByIdQuery,
GetFeatureByIdQueryVariables
>(GET_FEATURE_BY_ID, {
onCompleted({ getFeatureById }) {
setFeature(getFeatureById);
},
fetchPolicy: 'network-only',
}
});
const [updateFeature, { loading }] = useMutation<
@@ -99,8 +98,6 @@ const FeatureSettings = () => {
useEffect(() => {
getFeature({ variables: { id: id as string } });
// eslint-disable-next-line
}, [id]);
const generalForm = useFormik({
@@ -178,7 +175,34 @@ const FeatureSettings = () => {
enableReinitialize: true,
});
return role === 'developer' ? (
if (role !== 'developer') return (
<>
{role === 'admin' && <Navigate to='/clients' />}
{['client', 'productOwer'].includes(role as string) && <Navigate to='/project' />}
</>
)
if (featureLoading || featureLoading) return (
<Spinner fullScreen color={role || 'client'} />
);
if (featureError || !feature) return (
<Wrapper color={role}>
<Box
width='100%'
height='100vh'
display='grid'
alignItems='center'
justifyContent='center'
>
<Box>
<Empty />
</Box>
</Box>
</Wrapper>
);
return (
<Wrapper>
<Box>
<Button
@@ -238,262 +262,254 @@ const FeatureSettings = () => {
</Box>
{selectedSection === 'general' && (
<>
{!featureLoading ? (
<>
{deleteFeatureModal && (
<Modal
color={role || 'client'}
title='Delete Feature'
description='
If you delete this feature you cannot recover it.'
onClose={() => setDeleteFeatureModal(false)}
onConfirm={() =>
deleteFeature({ variables: { id: id as string } })
{deleteFeatureModal && (
<Modal
color={role || 'client'}
title='Delete Feature'
description='
If you delete this feature you cannot recover it.'
onClose={() => setDeleteFeatureModal(false)}
onConfirm={() =>
deleteFeature({ variables: { id: id as string } })
}
></Modal>
)}
<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(
`${import.meta.env.VITE_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
);
}
></Modal>
)}
<form onSubmit={generalForm.handleSubmit}>
}}
error={
generalForm.touched.imageName &&
(!!generalForm.errors.imageName ||
!!generalForm.errors.imageSource)
}
errorMessage={generalForm.errors.imageName}
/>
<Box>
<Box
display='grid'
gridTemplateColumns='auto'
rowGap='0.5rem'
position='relative'
display='flex'
flexDirection='row'
alignItems='center'
justifyContent='space-between'
>
<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(
`${import.meta.env.VITE_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}
/>
<Box>
<Box
display='flex'
flexDirection='row'
alignItems='center'
justifyContent='space-between'
<Box justifySelf='flex-start'>
<Text
variant='body'
weight='bold'
className='feature-type'
>
<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>
Type
</Text>
</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='space-between'
>
<Button
variant='text'
color='error'
text='Delete Feature'
onClick={() => setDeleteFeatureModal(true)}
/>
<Button
variant='primary-action'
{!!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'}
text='Save'
type='submit'
loading={loading}
disabled={loading}
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>
</form>
</>
) : (
<Box display='grid' alignItems='center' justifyContent='center'>
<Spinner color={role || 'client'} />
</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='space-between'
>
<Button
variant='text'
color='error'
text='Delete Feature'
onClick={() => setDeleteFeatureModal(true)}
/>
<Button
variant='primary-action'
color={role || 'client'}
text='Save'
type='submit'
loading={loading}
disabled={loading}
/>
</Box>
</Box>
)}
</form>
</>
)}
{selectedSection === 'wireframes' && (
@@ -564,12 +580,6 @@ const FeatureSettings = () => {
</Box>
</Box>
</Wrapper>
) : (
<>
{role === 'admin' && <Navigate to='/clients' />}
{role === 'client' ||
(role === 'productOwner' && <Navigate to='/project' />)}
</>
);
};
src/pages/FeatureSettings/styles.ts
+1
View File
@@ -5,6 +5,7 @@ export const Wrapper = styled.div`
.feature-type {
background: ${({ theme }) => theme.colors.gray.dark};
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
src/pages/Project/index.tsx
+560 -587
View File
File diff suppressed because it is too large Load Diff
src/pages/Prototype/index.tsx
+144 -154
View File
@@ -6,12 +6,7 @@ import ReactFlow, {
ControlButton,
Connection,
Edge,
Node,
MarkerType,
applyNodeChanges,
applyEdgeChanges,
NodeChange,
EdgeChange,
useEdgesState,
useNodesState
} from 'reactflow';
@@ -65,17 +60,16 @@ const Prototype = () => {
const [success, setSuccess] = useState<boolean>(false);
const diagramParentRef = useRef<HTMLDivElement>(null);
const [getTemplate, { loading: templateLoading }] = useLazyQuery<
const [getTemplate, { loading: templateLoading, error: templateError }] = useLazyQuery<
GetTemplateByIdQuery,
GetTemplateByIdQueryVariables
>(GET_TEMPLATE_BY_ID, {
onCompleted({ getTemplateById }) {
setTemplate(getTemplateById);
},
fetchPolicy: 'network-only',
});
const [getPrototype, { loading: prototypeLoading }] = useLazyQuery<
const [getPrototype, { loading: prototypeLoading, error: prototypeError }] = useLazyQuery<
GetPrototypeByIdQuery,
GetPrototypeByIdQueryVariables
>(GET_PROTOTYPE_BY_ID, {
@@ -197,158 +191,154 @@ const Prototype = () => {
}
};
return role === 'productOwner' ||
role === 'developer' ||
role === 'client' ? (
<>
{!templateLoading && !prototypeLoading ? (
<>
{template ? (
<Wrapper color={role}>
<Box padding='35px 45px 0px 120px'>
<Box
display='flex'
flexDirection='row'
alignItems='center'
marginBottom='20px'
>
<Box marginRight='50px'>
<Button
text='Back'
color={role || 'client'}
size='small'
onClick={() => navigate(-1)}
iconLeft={<ArrowLeft />}
/>
<Text variant='headline' weight='bold'>
Prototype
</Text>
</Box>
{success && (
<Alert
color='success'
text='Prototype updated successfully'
/>
)}
{error && <Alert color='error' text={error} />}
</Box>
{template.features && (
<>
<Box
display='flex'
flexDirection='column'
marginBottom='30px'
>
<Box marginBottom='10px'>
<Text variant='headline' gutterBottom>
Frontend Features
</Text>
</Box>
<Box
display='grid'
background='#F9FAFA'
boxShadow='1px 1px 10px rgba(50, 59, 105, 0.25)'
borderRadius='10px'
width='100%'
height='400px'
ref={diagramParentRef}
>
<Box
width={
diagramParentRef.current
? `${
getComputedStyle(diagramParentRef.current)
?.width
}}px`
: '100%'
}
height='auto'
>
<ReactFlow
fitView
nodes={nodes}
edges={edges}
nodeTypes={nodeTypes}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
>
{role === 'developer' && (
<>
<MiniMap />
<Controls
showInteractive={false}
showFitView
>
<ControlButton onClick={handleEditPrototype}>
{!editing ? <Edit /> : <CheckCircle />}
</ControlButton>
</Controls>
</>
)}
</ReactFlow>
</Box>
</Box>
</Box>
<Box
display='flex'
flexDirection='column'
marginBottom='30px'
>
<Box marginBottom='10px'>
<Text variant='headline' gutterBottom>
Backend Features
</Text>
</Box>
<Box
display='grid'
gridTemplateColumns='repeat(3, 1fr)'
gap='20px'
alignItems='stretch'
justifyContent='center'
>
{template.features.map((feature) => {
if (
feature.featureType === 'backend' ||
feature.featureType === 'fullstack'
) {
return (
<BackendFeatureCard
feature={feature}
key={feature.id}
/>
);
}
return null;
})}
</Box>
</Box>
</>
)}
if (role === 'admin') return (
<Navigate to='/clients' />
)
if (templateLoading || prototypeLoading) return (
<Spinner fullScreen color={role || 'client'} />
);
if (templateError || prototypeError || !template || !prototype) return (
<Wrapper color={role}>
<Box
width='100%'
height='100vh'
display='grid'
alignItems='center'
justifyContent='center'
>
<Box>
<Empty />
</Box>
</Box>
</Wrapper>
);
return (
<Wrapper color={role}>
<Box padding='35px 45px 0px 120px'>
<Box
display='flex'
flexDirection='row'
alignItems='center'
marginBottom='20px'
>
<Box marginRight='50px'>
<Button
text='Back'
color={role || 'client'}
size='small'
onClick={() => navigate(-1)}
iconLeft={<ArrowLeft />}
/>
<Text variant='headline' weight='bold'>
Prototype
</Text>
</Box>
{success && (
<Alert
color='success'
text='Prototype updated successfully'
/>
)}
{error && <Alert color='error' text={error} />}
</Box>
{template.features && (
<>
<Box
display='flex'
flexDirection='column'
marginBottom='30px'
>
<Box marginBottom='10px'>
<Text variant='headline' gutterBottom>
Frontend Features
</Text>
</Box>
</Wrapper>
) : (
<Wrapper color={role}>
<Box
width='100%'
height='100vh'
display='grid'
alignItems='center'
background='#F9FAFA'
boxShadow='1px 1px 10px rgba(50, 59, 105, 0.25)'
borderRadius='10px'
width='100%'
height='400px'
ref={diagramParentRef}
>
<Box
width={
diagramParentRef.current
? `${
getComputedStyle(diagramParentRef.current)
?.width
}}px`
: '100%'
}
height='auto'
>
<ReactFlow
fitView
nodes={nodes}
edges={edges}
nodeTypes={nodeTypes}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
>
{role === 'developer' && (
<>
<MiniMap />
<Controls
showInteractive={false}
showFitView
>
<ControlButton onClick={handleEditPrototype}>
{!editing ? <Edit /> : <CheckCircle />}
</ControlButton>
</Controls>
</>
)}
</ReactFlow>
</Box>
</Box>
</Box>
<Box
display='flex'
flexDirection='column'
marginBottom='30px'
>
<Box marginBottom='10px'>
<Text variant='headline' gutterBottom>
Backend Features
</Text>
</Box>
<Box
display='grid'
gridTemplateColumns='repeat(3, 1fr)'
gap='20px'
alignItems='stretch'
justifyContent='center'
>
<Box>
<Empty />
</Box>
{template.features.map((feature) => {
if (
feature.featureType === 'backend' ||
feature.featureType === 'fullstack'
) {
return (
<BackendFeatureCard
feature={feature}
key={feature.id}
/>
);
}
return null;
})}
</Box>
</Wrapper>
)}
</>
) : (
<Spinner fullScreen color={role || 'client'} />
)}
</>
) : (
<>{role === 'admin' && <Navigate to='/clients' />}</>
</Box>
</>
)}
</Box>
</Wrapper>
);
};
src/pages/SupportMessaging/index.tsx → src/pages/Support/index.tsx
+3 -5
View File
@@ -31,7 +31,7 @@ import {
import { theme } from '../../themes';
import { clientSupport } from '../..';
const SupportMessaging = () => {
const Support = () => {
const { project, id } = useParams<{ id: string; project: string }>();
const role = useReactiveVar(roleVar);
const currentUser = useReactiveVar(userVar);
@@ -97,8 +97,6 @@ const SupportMessaging = () => {
});
}
})();
// eslint-disable-next-line
}, [id]);
const createThreadForm = useFormik({
@@ -123,7 +121,7 @@ const SupportMessaging = () => {
},
});
navigate(
`/support-messaging/${project}/${createdThread.data?.createThread}`
`/support/${project}/${createdThread.data?.createThread}`
);
},
});
@@ -338,4 +336,4 @@ const SupportMessaging = () => {
);
};
export default SupportMessaging;
export default Support;
src/pages/SupportMessaging/styles.ts → src/pages/Support/styles.ts
View File
src/pages/Template/index.tsx
+170 -194
View File
@@ -22,11 +22,8 @@ import {
GetAllTemplatesQueryVariables,
GetCategoryByIdQuery,
GetCategoryByIdQueryVariables,
GetPrototypeByIdQuery,
GetPrototypeByIdQueryVariables,
GetTemplateByIdQuery,
GetTemplateByIdQueryVariables,
ProtoTypeOutput,
TemplateOutput,
} from '../../graphql/types';
import {
@@ -34,7 +31,6 @@ import {
GET_TEMPLATE_BY_ID,
} from '../../graphql/template.api';
import { GET_CATEGORY_BY_ID } from '../../graphql/category.api';
import { GET_PROTOTYPE_BY_ID } from '../../graphql/prototype.api';
const Template = () => {
const role = useReactiveVar(roleVar);
@@ -43,234 +39,214 @@ const Template = () => {
const { id } = useParams<{ id: string }>();
const [template, setTemplate] = useState<TemplateOutput>();
const [category, setCategory] = useState<CategoryOutput>();
const [prototype, setPrototype] = useState<Array<ProtoTypeOutput>>();
const [getCategory, { loading: categoryLoading }] = useLazyQuery<
const [getCategory, { loading: categoryLoading, error: categoryError }] = useLazyQuery<
GetCategoryByIdQuery,
GetCategoryByIdQueryVariables
>(GET_CATEGORY_BY_ID, {
onCompleted({ getCategoryById }) {
setCategory(getCategoryById);
},
fetchPolicy: 'network-only',
}
});
const [getTemplates, { loading: templatesLoading }] = useLazyQuery<
const [getTemplates, { loading: templatesLoading, error: templatesError }] = useLazyQuery<
GetAllTemplatesQuery,
GetAllTemplatesQueryVariables
>(GET_ALL_TEMPLATES, {
onCompleted({ getAllTemplates }) {
if (getAllTemplates.length > 0)
navigate(`/template/${getAllTemplates[0].id}`);
},
fetchPolicy: 'network-only',
if (getAllTemplates.length > 0) {
setTemplate(getAllTemplates[0]);
getCategory({ variables: { id: getAllTemplates[0]?.category! } });
}
}
});
const [getTemplate, { loading: templateLoading }] = useLazyQuery<
const [getTemplate, { loading: templateLoading, error: templateError }] = useLazyQuery<
GetTemplateByIdQuery,
GetTemplateByIdQueryVariables
>(GET_TEMPLATE_BY_ID, {
onCompleted({ getTemplateById }) {
setTemplate(getTemplateById);
getCategory({ variables: { id: template?.category! } });
},
fetchPolicy: 'network-only',
});
const [getPrototype, { loading: prototypeLoading }] = useLazyQuery<
GetPrototypeByIdQuery,
GetPrototypeByIdQueryVariables
>(GET_PROTOTYPE_BY_ID, {
onCompleted({ getPrototypeById }) {
if (getPrototypeById) setPrototype(getPrototypeById.prototype);
},
fetchPolicy: 'network-only',
});
const handlePrint = useReactToPrint({
content: () => printRef.current,
getCategory({ variables: { id: getTemplateById?.category! } });
}
});
useEffect(() => {
if (id) {
getTemplate({ variables: { id } });
getPrototype({ variables: { id } });
} else {
getTemplates();
}
return () => {
setTemplate(undefined);
setPrototype(undefined);
setCategory(undefined);
};
// eslint-disable-next-line
}, [id]);
return role === 'productOwner' || role === 'developer' ? (
<>
{!templatesLoading &&
!templateLoading &&
!categoryLoading &&
!prototypeLoading ? (
<>
{template ? (
<Wrapper>
<Box padding='35px 45px 0px 120px'>
<Box
display='flex'
flexDirection='row'
alignItems='center'
marginBottom='20px'
>
<Box
flexGrow='1'
display='flex'
flexDirection='row'
alignItems='center'
>
<Text variant='headline' weight='bold'>
{template.name}
</Text>
{category && (
<Box marginLeft='20px'>
<Chip text={category.name} color={role} />
</Box>
)}
</Box>
<Box
marginRight={role === 'productOwner' ? '20px' : undefined}
>
<Button
color={role || 'client'}
variant='primary-action'
text='Prototype'
iconLeft={<Design />}
disabled={
prototype === undefined && role === 'productOwner'
}
onClick={() =>
navigate(`/prototype/${id || template.id}`)
}
/>
</Box>
{role === 'productOwner' && (
<Box>
<Button
color={role || 'client'}
variant='primary-action'
text='Settings'
iconLeft={<Settings />}
onClick={() =>
navigate(`/template-settings/${id || template.id}`)
}
/>
</Box>
)}
</Box>
<Box marginBottom='30px'>
<Text variant='headline' gutterBottom>
Description
</Text>
<Text>{template.description}</Text>
</Box>
{template.features && (
<Box
display='flex'
flexDirection='column'
marginBottom='30px'
>
<Box marginBottom='10px'>
<Text variant='headline' gutterBottom>
Features
</Text>
</Box>
<Box
display='grid'
gridTemplateColumns='repeat(3, 1fr)'
columnGap='40px'
rowGap='45px'
alignItems='stretch'
>
{template.features.map((feature) => (
<FeatureCard feature={feature} key={feature.id} />
))}
</Box>
</Box>
)}
{template.specification && (
<Box
display='flex'
flexDirection='column'
marginBottom='30px'
>
<Box marginBottom='10px'>
<Text variant='headline' gutterBottom>
Deliverables
</Text>
</Box>
<Box
display='flex'
flexDirection='row'
alignItems='center'
justifyContent='space-between'
padding='35px 20px'
boxShadow='1px 1px 10px rgba(50, 59, 105, 0.25)'
borderRadius='10px'
>
<Box
display='flex'
flexDirection='row'
alignItems='center'
>
<Box marginRight='10px'>
<Specification />
</Box>
<Text variant='title'>Specification</Text>
</Box>
<Link href='#' color={role} onClick={handlePrint}>
Download
</Link>
</Box>
</Box>
)}
{template.specification && template.features && (
<Box display='none'>
<SpecificationPrint
ref={printRef}
specification={template.specification}
features={template.features}
/>
</Box>
)}
</Box>
</Wrapper>
) : (
<Wrapper color={role}>
<Box
width='100%'
height='100vh'
display='grid'
alignItems='center'
justifyContent='center'
>
<Box>
<Empty />
</Box>
</Box>
</Wrapper>
)}
</>
) : (
<Spinner fullScreen color={role || 'client'} />
)}
</>
) : (
const handlePrint = useReactToPrint({
content: () => printRef.current,
});
if (role !== 'productOwner' && role !== 'developer') return (
<>
{role === 'admin' && <Navigate to='/clients' />}
{role === 'client' && <Navigate to='/project' />}
</>
);
if (templatesLoading || templateLoading || categoryLoading) return (
<Spinner fullScreen color={role || 'client'} />
);
if (templatesError || templateError || categoryError || !template) return (
<Wrapper color={role}>
<Box
width='100%'
height='100vh'
display='grid'
alignItems='center'
justifyContent='center'
>
<Box>
<Empty />
</Box>
</Box>
</Wrapper>
);
return (
<Wrapper>
<Box padding='35px 45px 0px 120px'>
<Box
display='flex'
flexDirection='row'
alignItems='center'
marginBottom='20px'
>
<Box
flexGrow='1'
display='flex'
flexDirection='row'
alignItems='center'
>
<Text variant='headline' weight='bold'>
{template.name}
</Text>
{category && (
<Box marginLeft='20px'>
<Chip text={category.name} color={role} />
</Box>
)}
</Box>
<Box
marginRight={role === 'productOwner' ? '20px' : undefined}
>
<Button
color={role || 'client'}
variant='primary-action'
text='Prototype'
iconLeft={<Design />}
disabled={
role === 'productOwner'
}
onClick={() =>
navigate(`/prototype/${id || template.id}`)
}
/>
</Box>
{role === 'productOwner' && (
<Box>
<Button
color={role || 'client'}
variant='primary-action'
text='Settings'
iconLeft={<Settings />}
onClick={() =>
navigate(`/template-settings/${id || template.id}`)
}
/>
</Box>
)}
</Box>
<Box marginBottom='30px'>
<Text variant='headline' gutterBottom>
Description
</Text>
<Text>{template.description}</Text>
</Box>
{template.features && (
<Box
display='flex'
flexDirection='column'
marginBottom='30px'
>
<Box marginBottom='10px'>
<Text variant='headline' gutterBottom>
Features
</Text>
</Box>
<Box
display='grid'
gridTemplateColumns='repeat(3, 1fr)'
columnGap='40px'
rowGap='45px'
alignItems='stretch'
>
{template.features.map((feature) => (
<FeatureCard feature={feature} key={feature.id} />
))}
</Box>
</Box>
)}
{template.specification && (
<Box
display='flex'
flexDirection='column'
marginBottom='30px'
>
<Box marginBottom='10px'>
<Text variant='headline' gutterBottom>
Deliverables
</Text>
</Box>
<Box
display='flex'
flexDirection='row'
alignItems='center'
justifyContent='space-between'
padding='35px 20px'
boxShadow='1px 1px 10px rgba(50, 59, 105, 0.25)'
borderRadius='10px'
>
<Box
display='flex'
flexDirection='row'
alignItems='center'
>
<Box marginRight='10px'>
<Specification />
</Box>
<Text variant='title'>Specification</Text>
</Box>
<Link href='#' color={role} onClick={handlePrint}>
Download
</Link>
</Box>
</Box>
)}
{template.specification && template.features && (
<Box display='none'>
<SpecificationPrint
ref={printRef}
specification={template.specification}
features={template.features}
/>
</Box>
)}
</Box>
</Wrapper>
);
};
export default Template;
src/pages/UpdateProject/index.tsx
+24 -9
View File
@@ -14,7 +14,7 @@ import {
UpdateProjectMutationVariables,
} from '../../graphql/types';
import { GET_PROJECT_BY_ID, UPDATE_PROJECT } from '../../graphql/project.api';
import { ArrowLeft } from '../../assets';
import { ArrowLeft, Empty } from '../../assets';
import { theme } from '../../themes';
const UpdateProject = () => {
@@ -24,14 +24,13 @@ const UpdateProject = () => {
const [project, setProject] = useState<ProjectOutput>();
const { id } = useParams<{ id: string }>();
const [getProject, { loading: projectLoading }] = useLazyQuery<
const [getProject, { loading: projectLoading, error: projectError }] = useLazyQuery<
GetProjectByIdQuery,
GetProjectByIdQueryVariables
>(GET_PROJECT_BY_ID, {
onCompleted({ getProjectById }) {
setProject(getProjectById);
},
fetchPolicy: 'network-only',
}
});
const [updateProject, { loading: updateProjectLoading }] = useMutation<
@@ -51,8 +50,6 @@ const UpdateProject = () => {
if (id) {
getProject({ variables: { id } });
}
// eslint-disable-next-line
}, [id]);
const basicInfoForm = useFormik({
@@ -78,7 +75,27 @@ const UpdateProject = () => {
enableReinitialize: true,
});
return !projectLoading ? (
if (projectLoading) return (
<Spinner fullScreen color={role || 'client'} />
);
if (projectError || !project) return (
<Wrapper color={role}>
<Box
width='100%'
height='100vh'
display='grid'
alignItems='center'
justifyContent='center'
>
<Box>
<Empty />
</Box>
</Box>
</Wrapper>
);
return (
<Wrapper>
<Box padding='35px 45px 30px 120px'>
<Box
@@ -210,8 +227,6 @@ const UpdateProject = () => {
</Box>
</Box>
</Wrapper>
) : (
<Spinner fullScreen color={role || 'client'} />
);
};
src/pages/UserSettings/index.tsx
+29 -11
View File
@@ -15,7 +15,7 @@ import {
Spinner,
} from '../../components';
import { Wrapper } from './styles';
import { ArrowLeft, Profile, Security } from '../../assets';
import { ArrowLeft, Empty, Profile, Security } from '../../assets';
import {
UpdateUserInfoMutation,
UpdateUserPasswordMutation,
@@ -39,11 +39,17 @@ const UserSettings = () => {
const role = useReactiveVar(roleVar);
const [userToEdit, setUserToEdit] = useState<UserOutput>();
const { id } = useParams<{ id: string }>();
const [selectedSection, setSelectedSection] = useState<
'general' | 'security'
>('general');
const [error, setError] = useState<string>('');
const [success, setSuccess] = useState<boolean>(false);
const { data: countryCodes, loading: countryCodesLoading } = useQuery<
GetCountryCodesQuery,
GetCountryCodesQueryVariables
>(GET_COUNTRY_CODES);
const { loading: userInfoLoading } = useQuery<
const { loading: userInfoLoading, error: userInforError } = useQuery<
GetUserByIdQuery,
GetUserByIdQueryVariables
>(GET_USER_BY_ID, {
@@ -55,12 +61,6 @@ const UserSettings = () => {
},
});
const [selectedSection, setSelectedSection] = useState<
'general' | 'security'
>('general');
const [error, setError] = useState<string>('');
const [success, setSuccess] = useState<boolean>(false);
const [updateUserInfo, { loading: generalLoading }] = useMutation<
UpdateUserInfoMutation,
UpdateUserInfoMutationVariables
@@ -182,7 +182,27 @@ const UserSettings = () => {
}),
});
return role === 'admin' ? (
if (role !== 'admin') return (
<Navigate to='/' />
)
if (userInforError || !userToEdit) return (
<Wrapper color={role}>
<Box
width='100%'
height='100vh'
display='grid'
alignItems='center'
justifyContent='center'
>
<Box>
<Empty />
</Box>
</Box>
</Wrapper>
);
return (
<Wrapper>
<Box>
<Button
@@ -480,8 +500,6 @@ const UserSettings = () => {
</Box>
</Box>
</Wrapper>
) : (
<Navigate to='/' />
);
};
src/pages/Users/index.tsx
+205 -191
View File
@@ -12,7 +12,7 @@ import {
Text,
Modal,
Input,
Alert,
Alert
} from '../../components';
import { Wrapper } from './styles';
import {
@@ -34,7 +34,7 @@ const Users = () => {
const [error, setError] = useState<string>('');
const [deleteAccountModal, setDeleteAccountModal] = useState<boolean>(false);
const [getUsers, { loading }] = useLazyQuery<
const [getUsers, { loading, error: usersError }] = useLazyQuery<
GetAllUsersQuery,
GetAllUsersQueryVariables
>(GET_ALL_USERS, {
@@ -52,8 +52,6 @@ const Users = () => {
useEffect(() => {
getUsers();
// eslint-disable-next-line
}, [location.pathname]);
const [deleteUser] = useMutation<
@@ -90,83 +88,128 @@ const Users = () => {
},
});
return role === 'admin' ? (
if (role !== 'admin') return (
<Navigate to='/' />
)
if (loading) return (
<Spinner fullScreen color={role || 'client'} />
);
if (usersError || !users) return (
<Wrapper color={role}>
<Box
width='100%'
height='100vh'
display='grid'
alignItems='center'
justifyContent='center'
>
<Box>
<Empty />
</Box>
</Box>
</Wrapper>
);
return (
<>
{!loading ? (
<>
{deleteAccountModal && (
<Modal
color={role || 'client'}
title='Delete Account'
description='Enter password to confirm account deletion.
If you delete your account you cannot recover any of your projects.'
onClose={() => setDeleteAccountModal(false)}
onConfirm={deleteAccountForm.handleSubmit}
{deleteAccountModal && (
<Modal
color={role || 'client'}
title='Delete Account'
description='Enter password to confirm account deletion.
If you delete your account you cannot recover any of your projects.'
onClose={() => setDeleteAccountModal(false)}
onConfirm={deleteAccountForm.handleSubmit}
>
<Input
type='password'
placeholder='Password'
name='password'
value={deleteAccountForm.values.password}
onChange={deleteAccountForm.handleChange}
onBlur={deleteAccountForm.handleBlur}
color={role || 'client'}
error={
deleteAccountForm.touched.password &&
!!deleteAccountForm.errors.password
}
errorMessage={deleteAccountForm.errors.password}
/>
</Modal>
)}
{users && users.length > 0 ? (
<Wrapper color={role} empty={false}>
<Box width='100%' height='100vh' alignItems='center'>
<Box
display='flex'
flexDirection='row'
alignItems='center'
marginBottom='20px'
>
<Input
type='password'
placeholder='Password'
name='password'
value={deleteAccountForm.values.password}
onChange={deleteAccountForm.handleChange}
onBlur={deleteAccountForm.handleBlur}
<Box flexGrow={!error ? '1' : undefined}>
<Text variant='headline' weight='bold'>
{location.pathname === '/clients'
? 'Clients'
: location.pathname === '/product-owners'
? 'Product Owners'
: 'Developers'}
</Text>
</Box>
{error && (
<Box flexGrow='1' marginLeft='55px' marginRight='55px'>
<Alert color='error' text={error} />
</Box>
)}
<Button
color={role || 'client'}
error={
deleteAccountForm.touched.password &&
!!deleteAccountForm.errors.password
}
errorMessage={deleteAccountForm.errors.password}
/>
</Modal>
)}
{users && users.length > 0 ? (
<Wrapper color={role} empty={false}>
<Box width='100%' height='100vh' alignItems='center'>
<Box
display='flex'
flexDirection='row'
alignItems='center'
marginBottom='20px'
>
<Box flexGrow={!error ? '1' : undefined}>
<Text variant='headline' weight='bold'>
{location.pathname === '/clients'
? 'Clients'
: location.pathname === '/product-owners'
? 'Product Owners'
: 'Developers'}
</Text>
</Box>
{error && (
<Box flexGrow='1' marginLeft='55px' marginRight='55px'>
<Alert color='error' text={error} />
</Box>
)}
<Button
color={role || 'client'}
variant='primary-action'
text={`New ${
variant='primary-action'
text={`New ${
location.pathname === '/clients'
? 'Client'
: location.pathname === '/product-owners'
? 'Product Owner'
: 'Developer'
}`}
iconLeft={<Add />}
onClick={() =>
navigate(
`/create-user/${
location.pathname === '/clients'
? 'Client'
: location.pathname === '/product-owners'
? 'Product Owner'
? 'ProductOwner'
: 'Developer'
}`}
iconLeft={<Add />}
onClick={() =>
navigate(
`/create-user/${
location.pathname === '/clients'
? 'Client'
: location.pathname === '/product-owners'
? 'ProductOwner'
: 'Developer'
}`
)
}
/>
</Box>
}`
)
}
/>
</Box>
<Box
padding='15px 20px'
borderRadius='10px'
boxShadow='1px 1px 10px 0px rgba(50, 59, 105, 0.25)'
display='grid'
gridTemplateColumns='repeat(5, 1fr)'
alignItems='center'
justifyContent='flex-start'
className='table-head'
marginBottom='20px'
columnGap='3rem'
>
<Text variant='title'>First Name</Text>
<Text variant='title'>Last Name</Text>
<Text variant='title'>Email </Text>
<Text variant='title'>Phone </Text>
<Box justifySelf='flex-end'>
<Text variant='title'>Actions</Text>
</Box>
</Box>
<Box padding='10px 0px'>
{users.map((user) => (
<Box
key={user.id}
padding='15px 20px'
borderRadius='10px'
boxShadow='1px 1px 10px 0px rgba(50, 59, 105, 0.25)'
@@ -174,135 +217,106 @@ const Users = () => {
gridTemplateColumns='repeat(5, 1fr)'
alignItems='center'
justifyContent='flex-start'
className='table-head'
marginBottom='20px'
columnGap='3rem'
>
<Text variant='title'>First Name</Text>
<Text variant='title'>Last Name</Text>
<Text variant='title'>Email </Text>
<Text variant='title'>Phone </Text>
<Box justifySelf='flex-end'>
<Text variant='title'>Actions</Text>
<Text variant='headline' weight='bold'>
{user.firstName}
</Text>
<Text variant='headline' weight='bold'>
{user.lastName}
</Text>
<Text variant='headline' weight='bold'>
{user.email}
</Text>
<Text variant='headline' weight='bold'>
+{user.phone.prefix}
{user.phone.number}
</Text>
<Box
display='flex'
flexDirection='row'
alignItems='center'
justifySelf='flex-end'
>
<Box
onClick={() => navigate(`/user-settings/${user.id}`)}
marginRight='15px'
cursor='pointer'
>
<Edit />
</Box>
<Box
onClick={() => {
setUserToDelete(user);
setDeleteAccountModal(true);
}}
cursor='pointer'
>
<Delete />
</Box>
</Box>
</Box>
<Box padding='10px 0px'>
{users.map((user) => (
<Box
key={user.id}
padding='15px 20px'
borderRadius='10px'
boxShadow='1px 1px 10px 0px rgba(50, 59, 105, 0.25)'
display='grid'
gridTemplateColumns='repeat(5, 1fr)'
alignItems='center'
justifyContent='flex-start'
marginBottom='20px'
columnGap='3rem'
>
<Text variant='headline' weight='bold'>
{user.firstName}
</Text>
<Text variant='headline' weight='bold'>
{user.lastName}
</Text>
<Text variant='headline' weight='bold'>
{user.email}
</Text>
<Text variant='headline' weight='bold'>
+{user.phone.prefix}
{user.phone.number}
</Text>
<Box
display='flex'
flexDirection='row'
alignItems='center'
justifySelf='flex-end'
>
<Box
onClick={() => navigate(`/user-settings/${user.id}`)}
marginRight='15px'
cursor='pointer'
>
<Edit />
</Box>
<Box
onClick={() => {
setUserToDelete(user);
setDeleteAccountModal(true);
}}
cursor='pointer'
>
<Delete />
</Box>
</Box>
</Box>
))}
</Box>
</Box>
</Wrapper>
) : (
<Wrapper color={role} empty>
<Box
display='flex'
flexDirection='row'
alignItems='center'
marginBottom='20px'
padding='35px 45px 0px 120px'
>
<Box flexGrow='1'>
<Text variant='headline' weight='bold'>
{location.pathname === '/clients'
? 'Clients'
: location.pathname === '/product-owners'
? 'Product Owners'
: 'Developers'}
</Text>
</Box>
<Button
color={role || 'client'}
variant='primary-action'
text={`New ${
))}
</Box>
</Box>
</Wrapper>
) : (
<Wrapper color={role} empty>
<Box
display='flex'
flexDirection='row'
alignItems='center'
marginBottom='20px'
padding='35px 45px 0px 120px'
>
<Box flexGrow='1'>
<Text variant='headline' weight='bold'>
{location.pathname === '/clients'
? 'Clients'
: location.pathname === '/product-owners'
? 'Product Owners'
: 'Developers'}
</Text>
</Box>
<Button
color={role || 'client'}
variant='primary-action'
text={`New ${
location.pathname === '/clients'
? 'Client'
: location.pathname === '/product-owners'
? 'Product Owner'
: 'Developer'
}`}
iconLeft={<Add />}
onClick={() =>
navigate(
`/create-user/${
location.pathname === '/clients'
? 'Client'
: location.pathname === '/product-owners'
? 'Product Owner'
? 'ProductOwner'
: 'Developer'
}`}
iconLeft={<Add />}
onClick={() =>
navigate(
`/create-user/${
location.pathname === '/clients'
? 'Client'
: location.pathname === '/product-owners'
? 'ProductOwner'
: 'Developer'
}`
)
}
/>
</Box>
<Box
width='100%'
height='100vh'
display='grid'
alignItems='center'
justifyContent='center'
>
<Box>
<Empty />
</Box>
</Box>
</Wrapper>
)}
</>
) : (
<Spinner fullScreen color={role || 'client'} />
}`
)
}
/>
</Box>
<Box
width='100%'
height='100vh'
display='grid'
alignItems='center'
justifyContent='center'
>
<Box>
<Empty />
</Box>
</Box>
</Wrapper>
)}
</>
) : (
<Navigate to='/clients' />
);
};
src/pages/Users/styles.ts
+2 -1
View File
@@ -2,7 +2,7 @@ import styled from 'styled-components';
type WrapperProps = {
color?: 'client' | 'productOwner' | 'developer' | 'admin';
empty: boolean;
empty?: boolean;
};
export const Wrapper = styled.div<WrapperProps>`
@@ -11,6 +11,7 @@ export const Wrapper = styled.div<WrapperProps>`
.table-head {
p {
background: ${({ theme }) => theme.colors.gray.dark};
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
src/pages/index.tsx
+2 -2
View File
@@ -21,7 +21,7 @@ import TemplateSettings from './TemplateSettings';
import AddProject from './AddProject';
import UpdateProject from './UpdateProject';
import Payments from './Payments';
import SupportMessaging from './SupportMessaging';
import Support from './Support';
export {
Login,
@@ -47,5 +47,5 @@ export {
AddProject,
UpdateProject,
Payments,
SupportMessaging,
Support,
};