Skip to content

Commit

Permalink
adds tooltip on disabled field
Browse files Browse the repository at this point in the history
  • Loading branch information
aatbip committed Feb 6, 2024
1 parent 692d55c commit f3e7e65
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 29 deletions.
6 changes: 4 additions & 2 deletions src/app/manage/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,10 @@ export default async function ManagePage({ searchParams }: { searchParams: { tok
const settings = await getSettings({ token, portalId }).then((s) => s.profileLinks);
const customFieldAccess = await getCustomFieldAccess({ token, portalId });
// static for now, will be dynamic later after some API decisions are made
const clientId = 'a583a0d0-de70-4d14-8bb1-0aacf7424e2c';
const companyId = '52eb75a9-2790-4e37-aa7a-c13f7bc3aa91';
// const clientId = 'a583a0d0-de70-4d14-8bb1-0aacf7424e2c';
// const companyId = '52eb75a9-2790-4e37-aa7a-c13f7bc3aa91';
const clientId = '2b37da9b-73b9-4c28-b7ac-144cf39cb13b';
const companyId = 'db906431-e721-47e8-8649-bd11b9ed2982';
const client = await getClient(clientId, token);

return (
Expand Down
70 changes: 44 additions & 26 deletions src/app/manage/views/ManagePageContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
import { FooterSave } from '@/components/footerSave/FooterSave';
import { MultiSelect } from '@/components/multiSelect/MultiSelect';
import { StyledTextInput } from '@/components/styled/StyledTextInput';
import { Stack, Typography, styled } from '@mui/material';
import { useMemo, useState } from 'react';
import { Box, Stack, Tooltip, Typography, styled } from '@mui/material';
import { FC, ReactElement, useMemo, useState } from 'react';
import { EmptyStateFallback } from './EmptyStateFallback';

export const ManagePageContainer = ({
Expand Down Expand Up @@ -129,37 +129,44 @@ export const ManagePageContainer = ({
return (
<InputContainer key={key}>
<Typography variant="md">{field.name}</Typography>
<StyledTextInput
value={profileData && profileData[field.key]}
variant="outlined"
padding="8px 12px"
disabled={!field.permission.includes('EDIT')}
key={key}
onChange={(e) => {
setProfileData((prev: any) => {
return { ...prev, [field.key]: e.target.value };
});
}}
type="text"
/>
<ToolTipDecider show={!field.permission.includes('EDIT')}>
<StyledTextInput
value={profileData && profileData[field.key]}
variant="outlined"
padding="8px 12px"
disabled={!field.permission.includes('EDIT')}
key={key}
onChange={(e) => {
setProfileData((prev: any) => {
return { ...prev, [field.key]: e.target.value };
});
}}
type="text"
/>
</ToolTipDecider>
</InputContainer>
);
}
if (field.type === 'multiSelect') {
return (
<InputContainer key={key}>
<Typography variant="md">{field.name}</Typography>
<MultiSelect<{ label: string }>
key={key}
data={field.options}
nameField={(item) => item.label}
value={profileData && profileData[field.key]}
getSelectedValue={(value) => {
setProfileData((prev: any) => {
return { ...prev, [field.key]: value };
});
}}
/>
<ToolTipDecider show={!field.permission.includes('EDIT')}>
<Box>
<MultiSelect<{ label: string }>
key={key}
data={field.options}
nameField={(item) => item.label}
value={profileData && profileData[field.key]}
getSelectedValue={(value) => {
setProfileData((prev: any) => {
return { ...prev, [field.key]: value };
});
}}
disabled={!field.permission.includes('EDIT')}
/>
</Box>
</ToolTipDecider>
</InputContainer>
);
}
Expand All @@ -176,3 +183,14 @@ const InputContainer = styled(Stack)({
flexDirection: 'column',
rowGap: 1.33,
});

const ToolTipDecider: FC<{ children: ReactElement; show: boolean }> = ({ children, show }) => {
if (show)
return (
<Tooltip title="This field cannot be updated." placement="bottom-start">
{children}
</Tooltip>
);

return children;
};
4 changes: 3 additions & 1 deletion src/components/multiSelect/MultiSelect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@ interface IMultiSelect<T extends object> {
nameField: (item: T) => string; // Function to extract the name from the item
value: any;
getSelectedValue: (value: any) => void;
disabled: boolean;
}

export const MultiSelect = <T extends object>({ data, nameField, value, getSelectedValue }: IMultiSelect<T>) => {
export const MultiSelect = <T extends object>({ data, nameField, value, getSelectedValue, disabled }: IMultiSelect<T>) => {
return (
<Autocomplete
onChange={(event: any, newValue: any) => {
Expand All @@ -23,6 +24,7 @@ export const MultiSelect = <T extends object>({ data, nameField, value, getSelec
getOptionLabel={(option: T) => nameField(option)}
filterSelectedOptions
autoHighlight
disabled={disabled}
renderInput={(params) => <StyledTextInput {...params} />}
renderTags={(value: T[], getTagProps) =>
value.map((option: any, index: number) => (
Expand Down

0 comments on commit f3e7e65

Please sign in to comment.