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.

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

feat: Spacing between numbers in modal #246

Merged

Conversation

Amirthananth
Copy link

Description

Add a space between numbers for every 3 digits and also support decimal values.

What type of PR is this? (check all applicable)

  • 💡 Feature
  • 🐛 Bug Fix
  • 📝 Documentation Update
  • 🎨 Style
  • 🧑‍💻 Code Refactor
  • 🔥 Performance Improvements
  • ✅ Test
  • 🤖 Build
  • 🔁 CI
  • 📦 Chore (Release)
  • ⏩ Revert

Related Tickets & Documents

Fixes #244

Mobile & Desktop Screenshots/Recordings

2024-05-15.22-37-00.mp4

Steps to QA

  1. Go to /dashboard
  2. Click on Add Asset
  3. Click on "Account" / "Asset"

Added to documentation?

  • 📜 README.md
  • 🙅 no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

Copy link

vercel bot commented May 15, 2024

@Amirthananth is attempting to deploy a commit to the Salgsmaskin Team on Vercel.

A member of the Team first needs to authorize it.

@Amirthananth
Copy link
Author

@Codehagen @ousszizou I've added the support for spaces between numbers, but I couldn't test it with the database as I still have some issues with setting up the DB locally. But anyway I tried to output it in the console and check the values and same is available in the recording.

Let me know if there are any changes required.

Thanks,
Amirth

@ousszizou
Copy link

Thanks @Amirthananth for working on this feature! I have a suggestion (I know we should have mentioned this before in the issue):
I propose we implement this functionality to allow for future locale-based formatting (e.g., French, US, Japanese). This way, users can see numbers in a way that's comfortable and common for them.

So I suggest to go with implementation like this:

DemoCreatorSnap_2024-05-18 21-16-46

Also I spotted a function duplicated formatNumberWithSpaces in the two files account-fields.tsx & investment-fields.tsx. To avoid future headaches, what if we make it reusable by throwing it in a utils file?

@Amirthananth
Copy link
Author

@ousszizou , I was thinking about the same thing and in fact I commented in the issue about it.

But since the input box has to be a string in order to show the localized number format, we need to first know the local format right ? or are we going to keep a specific format as default (i.e, fr-FR).

If we are going to keep localized format in the input box, then we need to sanitize the input based on that format only. i.e, if the format is "fr-FR", then we should allow numbers and comma. If the format is "en-US", then we should allow numbers and dot.

I kinda feel this is not the right way to do it in the input box atleast. Maybe we can show a text below or above the input box in the desired format. What do you say ? (refer the screenshot attached below)

result

@Codehagen @ousszizou

@ousszizou
Copy link

If we are going to keep localized format in the input box, then we need to sanitize the input based on that format only. i.e, if the format is "fr-FR", then we should allow numbers and comma. If the format is "en-US", then we should allow numbers and dot.

You're right, we can simplify the process by not showing the localized format in the input. Instead, we can use a consistent format, like always using dots for decimal points, regardless of the locale (as the input works right now, it just accepts numbers & dot). This approach avoids the complexity of handling different input formats.

So we can go w/ ur suggestion "showing the format in somewhere else instead in the input itself", something like this:

DemoCreatorSnap_2024-05-20 15-43-03

DemoCreatorSnap_2024-05-20 15-42-44

@ousszizou
Copy link

@Codehagen Also I think it's better to change this label "Current Value" to something else like "Amount Value" / "Initial Amount value".

@Amirthananth
Copy link
Author

Thanks for the confirmation @ousszizou . Current input type is number and it accepts dots to distinguish decimal values. So I think we can stick to it. I will just add the code to display the current value like in the screenshot you have attached.

@Codehagen if you confirm on changing the label text, I will make that modification as well.

@Codehagen
Copy link
Owner

Sounds good to me 👍

@Amirthananth Amirthananth force-pushed the pr/GH-244/amount-number-spacing-modal branch from fdaa735 to 9adaddd Compare May 20, 2024 20:12
@Amirthananth
Copy link
Author

@ousszizou / @Codehagen I've added the commit based on the discussion above. The below attached video is recording of the same.

attachment_1.mp4

Copy link

vercel bot commented May 21, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
badget ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 21, 2024 4:47am

Copy link
Owner

@Codehagen Codehagen left a comment

Choose a reason for hiding this comment

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

Looks good to me! ✨

@Codehagen Codehagen merged commit bc59b64 into Codehagen:main May 21, 2024
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Feature: Spacing between numbers in modal
3 participants