show disabled checkbox tooltip

podkrepi-bg · Sep 20, 2023 · db63725 · db63725
1 parent f4dc18c
commit db63725
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 24 deletions.
diff --git a/public/locales/bg/person.json b/public/locales/bg/person.json
@@ -44,7 +44,8 @@
       "organizerRelation": "Отношения с организатор",
       "countryCode": "Държава",
       "city": "Град",
-      "description": "Описание"
+      "description": "Описание",
+      "disabled-tooltip": "Ролята не може да бъде премахната, потребителя е {{role}} в {{campaigns}} кампании"
     },
     "cta": {
       "create": "Създай",

diff --git a/public/locales/en/person.json b/public/locales/en/person.json
@@ -45,7 +45,8 @@
       "organizerRelation": "Organizer relation",
       "countryCode": "Country code",
       "city": "City",
-      "description": "Description"
+      "description": "Description",
+      "disabled-tooltip": "Cannot remove role because the user is {{role}} in {{campaigns}} campaigns"
     },
     "cta": {
       "create": "Create",

diff --git a/src/components/common/form/CheckboxField.tsx b/src/components/common/form/CheckboxField.tsx
@@ -2,7 +2,7 @@ import { ChangeEvent } from 'react'
 
 import { useField } from 'formik'
 import { useTranslation } from 'next-i18next'
-import { Checkbox, FormControl, FormControlLabel, FormHelperText } from '@mui/material'
+import { Checkbox, FormControl, FormControlLabel, FormHelperText, Tooltip } from '@mui/material'
 
 import { TranslatableField, translateError } from 'common/form/validation'
 
@@ -11,34 +11,38 @@ export type CheckboxFieldProps = {
   disabled?: boolean
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void
   label: string | number | React.ReactElement
+  disabledTooltip?: string
 }
 
 export default function CheckboxField({
   name,
   disabled,
   onChange: handleChange,
   label,
+  disabledTooltip,
 }: CheckboxFieldProps) {
   const { t } = useTranslation()
   const [field, meta] = useField(name)
   const helperText = meta.touched ? translateError(meta.error as TranslatableField, t) : ''
   return (
     <FormControl required component="fieldset" error={Boolean(meta.error) && Boolean(meta.touched)}>
-      <FormControlLabel
-        label={typeof label === 'string' ? `${t(label)}` : label}
-        control={
-          <Checkbox
-            color="primary"
-            checked={Boolean(field.value)}
-            disabled={disabled}
-            {...field}
-            onChange={(e) => {
-              field.onChange(e)
-              if (handleChange) handleChange(e)
-            }}
-          />
-        }
-      />
+      <Tooltip title={disabled && disabledTooltip} arrow>
+        <FormControlLabel
+          label={typeof label === 'string' ? `${t(label)}` : label}
+          control={
+            <Checkbox
+              color="primary"
+              checked={Boolean(field.value)}
+              disabled={disabled}
+              {...field}
+              onChange={(e) => {
+                field.onChange(e)
+                if (handleChange) handleChange(e)
+              }}
+            />
+          }
+        />
+      </Tooltip>
       {Boolean(meta.error) && <FormHelperText error>{helperText}</FormHelperText>}
     </FormControl>
   )

diff --git a/src/components/common/person/grid/EditForm.tsx b/src/components/common/person/grid/EditForm.tsx
@@ -74,13 +74,13 @@ export default function EditForm() {
     phone: data?.phone ?? '',
     isCoordinator: !!data?.coordinators,
     coordinatorId: data?.coordinators?.id,
-    activeCoordinator: !!data?.coordinators?._count?.campaigns,
+    coordinatorCampaigns: data?.coordinators?._count?.campaigns,
     isOrganizer: !!data?.organizer,
     organizerId: data?.organizer?.id,
-    activeOrganizer: !!data?.organizer?._count?.campaigns,
+    organizerCampaigns: data?.organizer?._count?.campaigns,
     isBeneficiary: !!data?.beneficiaries?.length,
     beneficiaryId: beneficiary?.id,
-    activeBeneficiary: !!beneficiary?._count?.campaigns,
+    beneficiaryCampaigns: beneficiary?._count?.campaigns,
     countryCode: beneficiary?.countryCode ?? 'BG',
     cityId: beneficiary?.cityId ?? '',
     description: beneficiary?.description ?? '',
@@ -219,21 +219,33 @@ export default function EditForm() {
           <Grid item xs={4}>
             <CheckboxField
               name="isOrganizer"
-              disabled={initialValues.activeOrganizer}
+              disabled={!!initialValues.organizerCampaigns}
+              disabledTooltip={t('person:admin.fields.disabled-tooltip', {
+                role: t('person:admin.fields.organizer'),
+                campaigns: initialValues.organizerCampaigns,
+              })}
               label="person:admin.fields.organizer"
             />
           </Grid>
           <Grid item xs={4}>
             <CheckboxField
               name="isCoordinator"
-              disabled={initialValues.activeCoordinator}
+              disabled={!!initialValues.coordinatorCampaigns}
+              disabledTooltip={t('person:admin.fields.disabled-tooltip', {
+                role: t('person:admin.fields.coordinator'),
+                campaigns: initialValues.coordinatorCampaigns,
+              })}
               label="person:admin.fields.coordinator"
             />
           </Grid>
           <Grid item xs={4}>
             <CheckboxField
               name="isBeneficiary"
-              disabled={initialValues.activeBeneficiary}
+              disabled={!!initialValues.beneficiaryCampaigns}
+              disabledTooltip={t('person:admin.fields.disabled-tooltip', {
+                role: t('person:admin.fields.beneficiary'),
+                campaigns: initialValues.beneficiaryCampaigns,
+              })}
               label="person:admin.fields.beneficiary"
               onChange={(e) => {
                 setShowBenefactor(e.target.checked)