Skip to content

Commit

Permalink
edit users and campaign UX improvements (#1030)
Browse files Browse the repository at this point in the history
* extended campaign description to 40K symbols to allow html expansion

* mproved campaign creation by opening create beneficiary/company in new tabs

* added: users grid and edit form for user changes

Co-authored-by: quantum-grit <[email protected]>
  • Loading branch information
quantum-grit and quantum-grit authored Sep 20, 2022
1 parent c90fa7a commit 58696af
Show file tree
Hide file tree
Showing 27 changed files with 401 additions and 31 deletions.
2 changes: 1 addition & 1 deletion public/locales/bg/countries.json
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,6 @@
"edit": "Редактирай",
"delete": "Изтрий"
},
"country-label": "Държава",
"country": "Държава",
"select-country": "Изберете държава"
}
15 changes: 12 additions & 3 deletions public/locales/bg/person.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,24 @@
"confirmedEmail": "Потвърден имейл"
},
"admin": {
"headings": {
"info": "Потребители",
"all": "Всички потребители",
"create": "Създаване на потребител",
"edit": "Промяна на потребител"
},
"fields": {
"create-heading": "Създаване на потребител",
"actions": "Действия",
"name": "Име",
"first-name": "Име",
"last-name": "Фамилия",
"email": "Имейл",
"phone": "Телефон"
"phone": "Телефон",
"createdAt": "Създаден на"
},
"cta": {
"create": "Създай"
"create": "Създай",
"edit": "Запиши"
}
}
}
11 changes: 10 additions & 1 deletion public/locales/en/person.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,24 @@
"confirmedEmail": "Confirmed email"
},
"admin": {
"headings": {
"info": "Users",
"all": "All users",
"create": "Create new user",
"edit": "Edit user"
},
"fields": {
"actions": "Actions",
"name": "Name",
"create-heading": "Create a new person",
"first-name": "First name",
"last-name": "Last name",
"email": "Email",
"phone": "phone"
},
"cta": {
"create": "Create"
"create": "Create",
"edit": "Save"
}
}
}
8 changes: 8 additions & 0 deletions src/common/hooks/person.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,11 @@ export const usePersonList = (options?: UseQueryOptions<PersonResponse[]>) => {
options,
)
}

export function usePerson(id: string) {
const { data: session } = useSession()
return useQuery<PersonResponse>(
endpoints.person.viewPerson(id).url,
authQueryFnFactory<PersonResponse>(session?.accessToken),
)
}
3 changes: 3 additions & 0 deletions src/common/routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,10 @@ export const routes = {
view: (id: string) => `/admin/organizers/${id}`,
},
person: {
index: '/admin/persons',
create: '/admin/persons/create',
view: (id: string) => `/admin/persons/${id}`,
edit: (id: string) => `/admin/persons/${id}/edit`,
},
company: {
create: '/admin/companies/create',
Expand Down
4 changes: 2 additions & 2 deletions src/components/admin/navigation/adminMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const menuPeople = [
{ label: 'Бенефактори', icon: BeneficiaryIcon, href: routes.admin.benefactor.index },
{ label: 'Бенефициенти', icon: BeneficiaryIcon, href: routes.admin.beneficiary.index },
{ label: 'Координатори', icon: People, href: routes.admin.coordinators.index },
{ label: 'Потребители', icon: Group, href: routes.admin.person.create },
{ label: 'Потребители', icon: Group, href: routes.admin.person.index },
{ label: 'ЮЛНЦ', icon: Group, href: routes.admin.company.create },
{ label: 'Доброволци', icon: People, href: routes.admin.supporters },
{ label: 'Организатори', icon: Group, href: routes.admin.organizers.index },
Expand Down Expand Up @@ -83,7 +83,7 @@ export const adminCards = [
},
{ label: 'Доброволци', icon: People, href: routes.admin.supporters },
{ label: 'Контакти', icon: ContactPhone, href: routes.admin.infoRequests },
{ label: 'Потребители', icon: Group, href: routes.admin.person.create },
{ label: 'Потребители', icon: Group, href: routes.admin.person.index },
{ label: 'Документи', icon: FolderShared, href: routes.admin.documents.index },
{ label: 'Бенефактори', icon: BeneficiaryIcon, href: routes.admin.benefactor.index },
{ label: 'Типове кампании', icon: Class, href: routes.admin.campaignTypes.index },
Expand Down
4 changes: 2 additions & 2 deletions src/components/beneficiary/CreateForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export default function CreateForm() {
<Grid item xs={12}>
<Typography paddingLeft={'inherit'} marginBottom={2}>
{t('beneficiary:forms.labels.person-select')}{' '}
<Link href={routes.admin.person.create}>
<Link href={routes.admin.person.create} target="_blank">
{t('beneficiary:forms.labels.create-new')}
</Link>
</Typography>
Expand All @@ -148,7 +148,7 @@ export default function CreateForm() {
<Grid item xs={12}>
<Typography paddingLeft={'inherit'} marginBottom={2}>
{t('beneficiary:forms.labels.company-select')}{' '}
<Link href={routes.admin.company.create}>
<Link href={routes.admin.company.create} target="_blank">
{t('beneficiary:forms.labels.create-new')}
</Link>
</Typography>
Expand Down
4 changes: 2 additions & 2 deletions src/components/campaigns/CampaignForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,8 @@ const validationSchema: yup.SchemaOf<CampaignCreateFormData> = yup
.object()
.defined()
.shape({
title: yup.string().trim().min(10).max(100).required(),
description: yup.string().trim().min(50).max(20000).required(),
title: yup.string().trim().min(10).max(200).required(),
description: yup.string().trim().min(50).max(40000).required(),
targetAmount: yup.number().required(),
allowDonationOnComplete: yup.bool().optional(),
campaignTypeId: yup.string().uuid().required(),
Expand Down
4 changes: 2 additions & 2 deletions src/components/campaigns/grid/CreateForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ const validationSchema: yup.SchemaOf<CampaignAdminCreateFormData> = yup
.object()
.defined()
.shape({
title: yup.string().trim().min(10).max(100).required(),
description: yup.string().trim().min(50).max(20000).required(),
title: yup.string().trim().min(10).max(200).required(),
description: yup.string().trim().min(50).max(40000).required(),
targetAmount: yup.number().integer().positive().required(),
allowDonationOnComplete: yup.bool().optional(),
campaignTypeId: yup.string().uuid().required(),
Expand Down
4 changes: 2 additions & 2 deletions src/components/campaigns/grid/EditForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@ const validationSchema: yup.SchemaOf<Omit<CampaignEditFormData, 'campaignFiles'>
.object()
.defined()
.shape({
title: yup.string().trim().min(10).max(100).required(),
description: yup.string().trim().min(50).max(20000).required(),
title: yup.string().trim().min(10).max(200).required(),
description: yup.string().trim().min(50).max(40000).required(),
targetAmount: yup.number().integer().positive().required(),
allowDonationOnComplete: yup.bool().optional(),
campaignTypeId: yup.string().uuid().required(),
Expand Down
4 changes: 2 additions & 2 deletions src/components/cities/CreateForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,12 +67,12 @@ export default function EditForm() {
</Typography>
<Grid container spacing={2} sx={{ width: 600, margin: '0 auto' }}>
<Grid item xs={12}>
<FormTextField type="text" label="Cities: Име" name="name" autoComplete="name" />
<FormTextField type="text" label={t('cities:name')} name="name" autoComplete="name" />
</Grid>
<Grid item xs={12}>
<FormTextField
type="string"
label="Cities:Пощенски код"
label={t('cities:postalCode')}
name="postalCode"
autoComplete="postal-code"
/>
Expand Down
6 changes: 4 additions & 2 deletions src/components/companies/grid/CreateForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export default function CreateForm() {
<Grid item xs={6}>
<p>
{t('companies:admin.cta.select-country')}{' '}
<Link href={routes.admin.countries.create}>
<Link href={routes.admin.countries.create} target="_blank">
{t('companies:admin.cta.create-new')}
</Link>
</p>
Expand All @@ -109,7 +109,9 @@ export default function CreateForm() {
<Grid item xs={6}>
<p>
{t('companies:admin.cta.select-city')}{' '}
<Link href={routes.admin.cities.create}>{t('companies:admin.cta.create-new')}</Link>
<Link href={routes.admin.cities.create} target="_blank">
{t('companies:admin.cta.create-new')}
</Link>
</p>
<CitySelect name="cityId" />
</Grid>
Expand Down
6 changes: 3 additions & 3 deletions src/components/countries/CountrySelect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { TranslatableField, translateError } from 'common/form/validation'
import { useCountriesList } from 'common/hooks/countries'
import { useField } from 'formik'
import { CountryResponse } from 'gql/countries'
import { useTranslation } from 'react-i18next'
import { useTranslation } from 'next-i18next'

type Props = {
formField?: string
Expand All @@ -29,8 +29,8 @@ export default function CountrySelect({
size="small"
variant="outlined"
error={Boolean(meta.error) && Boolean(meta.touched)}>
<InputLabel>{t('countries:country-label')}</InputLabel>
<Select fullWidth defaultValue="" label={t('countries:country-label')} {...field}>
<InputLabel>{t('countries:country')}</InputLabel>
<Select fullWidth defaultValue="" label={t('countries:country')} {...field}>
<MenuItem value="" disabled>
{t('countries:select-country')}
</MenuItem>
Expand Down
6 changes: 6 additions & 0 deletions src/components/person/PersonForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,12 @@ export default function PersonForm({ onSubmit, initialValues = defaults }: Perso
autoComplete="family-name"
/>
</Grid>
<Grid item xs={12}>
{/* TODO <CheckboxField
name="skipRegistration"
label="Бенефициента ще бъде представляван от организатора"
/> */}
</Grid>
<Grid item xs={12}>
<FormTextField
inputMode="email"
Expand Down
23 changes: 23 additions & 0 deletions src/components/person/PersonGrid.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { useTranslation } from 'next-i18next'

import AdminContainer from 'components/admin/navigation/AdminContainer'
import AdminLayout from 'components/admin/navigation/AdminLayout'
import { ModalStoreImpl } from 'stores/dashboard/ModalStore'

import Grid from './grid/Grid'
import GridAppbar from './grid/GridAppbar'

export const ModalStore = new ModalStoreImpl()

export default function PersonGrid() {
const { t } = useTranslation('person')

return (
<AdminLayout>
<AdminContainer title={t('admin.headings.info')}>
<GridAppbar />
<Grid />
</AdminContainer>
</AdminLayout>
)
}
6 changes: 3 additions & 3 deletions src/components/person/grid/CreatePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@ import { Container } from '@mui/material'

import AdminLayout from 'components/admin/navigation/AdminLayout'
import AdminContainer from 'components/admin/navigation/AdminContainer'
import CreateForm from './CreateForm'
import PersonForm from './PersonForm'

export default function CreatePage() {
const { t } = useTranslation()

return (
<AdminLayout>
<AdminContainer title={t('person:admin.fields.create-heading')}>
<AdminContainer title={t('person:admin.headings.create')}>
<Container maxWidth="md" sx={{ py: 5 }}>
<CreateForm />
<PersonForm />
</Container>
</AdminContainer>
</AdminLayout>
Expand Down
38 changes: 38 additions & 0 deletions src/components/person/grid/DeleteModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { useMutation } from 'react-query'
import { observer } from 'mobx-react'
import { AxiosError, AxiosResponse } from 'axios'
import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next'

import { PersonResponse } from 'gql/person'
import { ApiErrors } from 'service/apiErrors'
import { useDeletePerson } from 'service/person'
import { AlertStore } from 'stores/AlertStore'
import { routes } from 'common/routes'
import DeleteDialog from 'components/admin/DeleteDialog'

import { ModalStore } from '../PersonGrid'

export default observer(function DeleteModal() {
const router = useRouter()
const { hideDelete, selectedRecord } = ModalStore
const { t } = useTranslation('person')

const mutationFn = useDeletePerson(selectedRecord.id)

const deleteMutation = useMutation<AxiosResponse<PersonResponse>, AxiosError<ApiErrors>, string>({
mutationFn,
onError: () => AlertStore.show(t('alerts.error'), 'error'),
onSuccess: () => {
hideDelete()
AlertStore.show(t('alerts.delete'), 'success')
router.push(routes.admin.person.index)
},
})

function deleteHandler() {
deleteMutation.mutate(selectedRecord.id)
}

return <DeleteDialog modalStore={ModalStore} deleteHandler={deleteHandler} />
})
26 changes: 26 additions & 0 deletions src/components/person/grid/DetailsModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from 'react'
import { UseQueryResult } from 'react-query'
import { observer } from 'mobx-react'
import { useTranslation } from 'next-i18next'

import DetailsDialog from 'components/admin/DetailsDialog'

import { ModalStore } from '../PersonGrid'
import { usePerson } from 'common/hooks/person'
import { PersonResponse } from 'gql/person'

export default observer(function DetailsModal() {
const { selectedRecord } = ModalStore
const { data }: UseQueryResult<PersonResponse> = usePerson(selectedRecord.id)
const { t } = useTranslation('person')

const dataConverted = [
{ name: 'ID', value: `${data?.id}` },
{ name: t('admin.fields.name'), value: `${data?.firstName} + ' ' + ${data?.lastName}` },
{ name: t('admin.fields.email'), value: `${data?.email}` },
{ name: t('admin.fields.createdAt'), value: `${data?.createdAt}` },
//{ name: t('updatedAt'), value: `${data?.updatedAt}` },
]

return <DetailsDialog modalStore={ModalStore} data={dataConverted} />
})
21 changes: 21 additions & 0 deletions src/components/person/grid/EditPage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { useTranslation } from 'next-i18next'

import { Container } from '@mui/material'

import AdminLayout from 'components/admin/navigation/AdminLayout'
import AdminContainer from 'components/admin/navigation/AdminContainer'
import PersonForm from './PersonForm'

export default function CreatePage() {
const { t } = useTranslation()

return (
<AdminLayout>
<AdminContainer title={t('person:admin.headings.edit')}>
<Container maxWidth="md" sx={{ py: 5 }}>
<PersonForm />
</Container>
</AdminContainer>
</AdminLayout>
)
}
Loading

0 comments on commit 58696af

Please sign in to comment.