onOffice-Web-Org / oo-wp-plugin

onOffice for WP-Websites
https://wp-plugin.onoffice.com
GNU General Public License v3.0
9 stars 9 forks source link

Thousand separator in form inputs #721

Open fredericalpers opened 6 months ago

fredericalpers commented 6 months ago

Initiative

Improve numeric form inputs in the onOffice for WP-Websites Plugin for a better user experience.

Epic

Implement thousand separators in frontend display for numeric form inputs.

User story

As a real estate agent utilizing the onOffice for WP-Websites plugin, I find that form inputs containing numerical values, such as buying prices or plot sizes, lack thousand separators on the frontend. To enhance the readability of these values and therefore a better experience using the propery search and other forms for my customers, I require the implementation of thousands separators in the frontend display. However, it's crucial that the transmitted XML-file retains values wthou separators to ensure seamless handling on onOffice enterprise.

Numeric values, particularly those related to financial aspects such as buying price or property size, play a significant role in conveying information to potential customers. The current absence of thousand separators in the frontend display makes it challenging for customers to quickly comprehend, compare, input and search these values.

Tasks

E.g. German buying price: 1.000 or 10.000 or 1.000.000 instead of 1000 or 10000 or 1000000.

By implementing thousand separators in the frontend display, the onOffice for WP-Websites Plugin can significantly enhance the readability of numeric values for real estate agents and their customers, providing a more user-friendly and informative experience.

Example JavaScript:

dai-eastgate commented 5 months ago

@fredericalpers: After investigating: This is the solution I plan to implement: In Backend: UI in onoffice-settings menu : image

=> Do you agree with this UI?

In Frontend: I will implement this for the following positions:

https://github.com/onOffice-Web-Org/oo-wp-plugin/assets/106214469/e02b86f0-dba9-4b51-a0a8-a877a32f97f9

  1. For "price fields" (Ex: purchase price, lease,....) My solution works fine.

  2. For others fields which is "numeric form inputs" (property size(ex Living area,..)) Feasibility: some fields will need to be implemented but some fields should not be applied. Because: There are fields that when searched on the frontend enter values as "numeric form inputs", but their display format does not apply "a thousand separators".

https://github.com/onOffice-Web-Org/oo-wp-plugin/assets/106214469/6f2b2b88-c246-4599-af86-c6cc301f1b43

ex: Correct Format: Latitude: 48.19691 Wrong Format: Latitude: 4.819.691

=> We cannot use the only condition "type = number" will apply "thousand separators".

=> Please, provide the "exact list fields" Which has "numeric form inputs" that need to be applied "thousand separators".

Purpose: to avoid applying "thousand separators" to unnecessary fields when applying "thousand separators" simultaneously for all "numeric form inputs" fields.

dai-eastgate commented 5 months ago

@fredericalpers Please take a look at my above comment (https://github.com/onOffice-Web-Org/oo-wp-plugin/issues/721#issuecomment-1931596462) and let me know your opinions. Thanks!

fredericalpers commented 5 months ago

@dai-eastgate you are right, we can not use this for every numeric field. 😅

Please implement this for all price and area/size related fields, e.g. buying price (kaufpreis) or living area (wohnflaeche).

Where are the differents between German, German (austria) and Italian? Please only implement a selection if there is an actual difference. We would prefer not to mention the countries and just showcase the difference in the numbers.

dai-eastgate commented 5 months ago

@fredericalpers

Please implement this for all price and area/size related fields, e.g. buying price (kaufpreis) or living area (wohnflaeche).

Yes. I will need more time to list the fields related to price and area/size for you to confirm.

Where are the differents between German, German (austria) and Italian? Please only implement a selection if there is an actual difference. We would prefer not to mention the countries and just showcase the difference in the numbers.

OK. I got it.

dai-eastgate commented 4 months ago

@fredericalpers

Yes. I will need more time to list the fields related to price and area/size for you to confirm.

This is all fields which I will apply "thousand separators" feature:

We would prefer not to mention the countries and just showcase the difference in the numbers.

I will implement UI in the office settings as image below. image Do you agree with this UI?

fredericalpers commented 4 months ago

@dai-eastgate we would like you to remove the option for "Space (ex. 123 456,78)" and "No space". The current no space option should be the standard option. Only if chosen "Dot" and "Comma" should be used.

Please go ahead and implement it for the input fields related to price and area as mentioned in the list.

dai-eastgate commented 4 months ago

@dai-eastgate we would like you to remove the option for "Space (ex. 123 456,78)" and "No space". The current no space option should be the standard option. Only if chosen "Dot" and "Comma" should be used.

Please go ahead and implement it for the input fields related to price and area as mentioned in the list.

Ok, I got it.Thanks!

dai-eastgate commented 4 months ago

I have implemented "thousand separators" feature in the Estate List, All Forms (owner form, interest form, applicant search form...) This demo video: https://files.fm/u/h4ub2p9b3h

Note: During testing, I found an issue: On branch master, we cannot submit a decimal number (ex: 123,456.32) in the "Search Form" feature in Estate List: https://files.fm/u/fkjfub52n4

=> I only implement the "Thousands Separator" feature and can not implement the "Decimal Separator" feature