Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Analytics updates #2326

Merged
merged 2 commits into from
Dec 11, 2024
Merged

Analytics updates #2326

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e084472
fix organization select
OchiengPaul442 Dec 11, 2024
9dc5f19
Merge remote-tracking branch 'upstream/staging' into analytics-updates
OchiengPaul442 Dec 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 51 additions & 20 deletions platform/src/common/components/Modal/dataDownload/components/CustomFields.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,26 @@ import CheckIcon from '@/icons/tickIcon';
import CustomDropdown from '../../../Dropdowns/CustomDropdown';
import DatePicker from '../../../Calendar/DatePicker';

const capitalize = (name) => {
if (typeof name !== 'string' || !name) return name;
return name.charAt(0).toUpperCase() + name.slice(1);
};

/**
* Formats the name based on the specified text format.
* Replaces underscores and hyphens with spaces.
* @param {string} name - The string to format.
* @param {string} textFormat - The desired text format ('uppercase' or 'lowercase').
* @returns {string} - The formatted string.
*/
const formatName = (name, textFormat = 'lowercase') => {
if (typeof name !== 'string' || !name) return name;
return typeof name === 'string'
? textFormat === 'uppercase'
? name.toUpperCase().replace(/_/g, ' ').replace(/-/g, ' ')
: name.replace(/_/g, ' ').replace(/-/g, ' ')
: capitalize(name);
const formatted = name.replace(/[_-]/g, ' '); // Replace underscores and hyphens with spaces
return textFormat === 'uppercase' ? formatted.toUpperCase() : formatted;
};

/**
* CustomFields Component
* Renders different types of input fields based on props.
*
* @param {object} props - Component properties.
* @returns {JSX.Element} - Rendered component.
*/
const CustomFields = ({
field = false,
title,
Expand All @@ -35,47 +41,64 @@ const CustomFields = ({
defaultOption || options[0],
);

/**
* Handles the selection of an option.
* Conditionally formats the name based on the field's ID.
*
* @param {object} option - The selected option object.
*/
const handleSelect = useCallback(
(option) => {
// Determine if formatting should be applied
const shouldFormat = id !== 'organization';
const formattedOption = {
...option,
name: formatName(option.name),
name: shouldFormat ? formatName(option.name, textFormat) : option.name,
};
setSelectedOption(formattedOption);
handleOptionSelect(id, formattedOption);
},
[id, handleOptionSelect],
[id, handleOptionSelect, textFormat],
);

return (
<div className="w-full h-auto flex flex-col gap-2 justify-start">
<label className="w-[280px] h-auto p-0 m-0 text-[#7A7F87]">{title}</label>

{field ? (
// Render a text input field
<input
className="bg-transparent text-[16px] font-medium leading-6 p-0 m-0 w-full h-auto border-none"
value={formatName(selectedOption.name)}
value={
id === 'organization'
? selectedOption.name
: formatName(selectedOption.name, textFormat)
}
Comment on lines +72 to +76
Copy link

@coderabbitai coderabbitai bot Dec 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Extract repeated formatting logic to avoid duplication

The formatting condition is duplicated across the component. Let's make it DRY.

Consider extracting the formatting logic:

+ const formatFieldValue = (value, fieldId) => {
+   return fieldId === 'organization' ? value : formatName(value, textFormat);
+ };

  // Then use it like:
  value={formatFieldValue(selectedOption.name, id)}

Committable suggestion skipped: line range outside the PR's diff.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @OchiengPaul442

  • please take note of this review comment.
  • But also please ensure that you maintain our earlier UPPER CASE only organisation name implementation. Please do NOT change it.
    cc: @Codebmk

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Upper casing is still maintained @Baalmart

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will push a commit on this comment

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @OchiengPaul442

onChange={(e) => handleSelect({ name: e.target.value })}
type="text"
name={id}
disabled={!edit}
/>
) : useCalendar ? (
// Render a date picker
<DatePicker
customPopperStyle={{ left: '-7px' }}
onChange={(date) => {
handleSelect({ name: date });
}}
/>
) : (
// Render a custom dropdown
<CustomDropdown
tabID={id}
isField={false}
tabStyle="w-full bg-white px-3 py-2"
dropdown
tabIcon={icon}
btnText={
formatName(btnText, textFormat) ||
formatName(selectedOption.name, textFormat)
btnText
? formatName(btnText, textFormat)
: formatName(selectedOption.name, textFormat)
}
customPopperStyle={{ left: '-7px' }}
dropDownClass="w-full"
Expand Down Expand Up @@ -105,15 +128,23 @@ const CustomFields = ({

CustomFields.propTypes = {
field: PropTypes.bool,
title: PropTypes.string,
options: PropTypes.array,
id: PropTypes.string,
title: PropTypes.string.isRequired,
options: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
}),
),
id: PropTypes.string.isRequired,
icon: PropTypes.node,
btnText: PropTypes.string,
edit: PropTypes.bool,
useCalendar: PropTypes.bool,
handleOptionSelect: PropTypes.func,
defaultOption: PropTypes.object,
handleOptionSelect: PropTypes.func.isRequired,
defaultOption: PropTypes.shape({
id: PropTypes.string,
name: PropTypes.string,
}),
textFormat: PropTypes.oneOf(['uppercase', 'lowercase']),
};

Expand Down
Loading