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: 4223 - comparison page for 3 random products on dev mode #4444

Merged
merged 11 commits into from
Aug 27, 2023

Conversation

monsieurtanuki
Copy link
Contributor

What

  • Added an item in dev mode that compares 3 random products.
  • That's a start and there are many things to improve. Any comment is welcome.

Screenshot

dev mode top bottom
Screenshot_2023-08-04-15-47-05 Screenshot_2023-08-04-15-57-52 Screenshot_2023-08-04-15-57-59

Part of

Files

New file:

  • compare_products3_page.dart: Test page about comparing 3 products. Work in progress.

Impacted files:

  • attributes_card_helper.dart: refactored introducing two new reusable methods
  • nutrition_container.dart: refactored introducing one reusable getter
  • product_cards_helper.dart: refactored introducing one new reusable method
  • user_preferences_dev_mode.dart: added an item computing 3 random products and showing the product comparison page

New file:
* `compare_products3_page.dart`: Test page about comparing 3 products. Work in progress.

Impacted files:
* `attributes_card_helper.dart`: refactored introducing two new reusable methods
* `nutrition_container.dart`: refactored introducing one reusable getter
* `product_cards_helper.dart`: refactored introducing one new reusable method
* `user_preferences_dev_mode.dart`: added an item computing 3 random products and showing the product comparison page
@codecov-commenter
Copy link

codecov-commenter commented Aug 4, 2023

Codecov Report

Merging #4444 (354c1e1) into develop (b84cd3c) will decrease coverage by 0.10%.
The diff coverage is 0.00%.

@@             Coverage Diff             @@
##           develop    #4444      +/-   ##
===========================================
- Coverage    10.31%   10.21%   -0.10%     
===========================================
  Files          296      297       +1     
  Lines        15431    15578     +147     
===========================================
  Hits          1591     1591              
- Misses       13840    13987     +147     
Files Changed Coverage Δ
...smooth_app/lib/helpers/attributes_card_helper.dart 0.00% <0.00%> (ø)
...s/smooth_app/lib/helpers/product_cards_helper.dart 0.00% <0.00%> (ø)
...b/pages/preferences/user_preferences_dev_mode.dart 0.00% <0.00%> (ø)
...pp/lib/pages/product/common/product_list_page.dart 0.00% <0.00%> (ø)
..._app/lib/pages/product/compare_products3_page.dart 0.00% <0.00%> (ø)
...oth_app/lib/pages/product/nutrition_container.dart 0.00% <0.00%> (ø)

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

@github-actions
Copy link
Contributor

github-actions bot commented Aug 4, 2023

You can test this PR on: Android

@teolemon
Copy link
Member

teolemon commented Aug 6, 2023

error • Target of URI doesn't exist: 'package:smooth_app/data_models/user_preferences.dart' • packages/smooth_app/lib/pages/preferences/user_preferences_dev_mode.dart:13:8 • uri_does_not_exist
error • Target of URI doesn't exist: 'package:smooth_app/data_models/user_preferences.dart' • packages/smooth_app/test/pages/generic_lib/widgets/smooth_error_card_test.dart:6:8 • uri_does_not_exist
error • Undefined class 'UserPreferences' • packages/smooth_app/test/pages/generic_lib/widgets/smooth_error_card_test.dart:54:11 • undefined_class
info • Method invocation or property access on a 'dynamic' target • packages/smooth_app/test/pages/generic_lib/widgets/smooth_error_card_test.dart:54:41 • avoid_dynamic_calls
error • Undefined name 'UserPreferences' • packages/smooth_app/test/pages/generic_lib/widgets/smooth_error_card_test.dart:54:41 • undefined_identifier

@monsieurtanuki
Copy link
Contributor Author

error • Target of URI doesn't exist: 'package:smooth_app/data_models/user_preferences.dart' • packages/smooth_app/lib/pages/preferences/user_preferences_dev_mode.dart:13:8 • uri_does_not_exist

@teolemon Let's blame it on @g123k, just in case ;)
I've just updated the branch, should be OK now.

@monsieurtanuki
Copy link
Contributor Author

Dammit, now I'm out of sync with the develop branch. My only solution is to blowtorch my computer and restart from scratch...

@monsieurtanuki
Copy link
Contributor Author

Probable confusion between #4423 and #4223.

@g123k
Copy link
Collaborator

g123k commented Aug 15, 2023

Thanks a lot @monsieurtanuki for this POC and we would like to ship to full feature in the next release.
As you know me, I have some ideas about the UI/UX, but we can do that later 😉.

However, what would be interesting here, is to have the ability to create this comparison, by selecting products.
Would that be possible to integrate it in this POC?

@monsieurtanuki
Copy link
Contributor Author

However, what would be interesting here, is to have the ability to create this comparison, by selecting products. Would that be possible to integrate it in this POC?

I think I would have to impact the multi-select mode then. Not adding the (un)select all feature, but giving more possible actions (in this case, one additional "boosted compare" action).

Impacted files:
* `product_list_page.dart`: slightly refactored the app bar text in selection mode, in order to have several possible actions; replaced the FAB with an explicit (?) "multi-select" button; added a "boosted comparison" icon button when 2 or 3 products are selected; added a "ranking" icon button
* `user_preferences_dev_mode.dart`: added a dev mode flag for "boosted comparison" (sic)
@monsieurtanuki
Copy link
Contributor Author

@g123k Latest changes - access to boosted comparison from list page via dev mode

Impacted files:

  • product_list_page.dart: slightly refactored the app bar text in selection mode, in order to have several possible actions; replaced the FAB with an explicit (?) "multi-select" button; added a "boosted comparison" icon button when 2 or 3 products are selected; added a "ranking" icon button
  • user_preferences_dev_mode.dart: added a dev mode flag for "boosted comparison" (sic)

Screenshots:

New switch in dev mode product list page - multi-select FAB
Screenshot_2023-08-15-17-09-45 Screenshot_2023-08-15-17-07-08
multi-select: 0 multi-select: 1
Screenshot_2023-08-15-17-07-14 Screenshot_2023-08-15-17-07-20
multi-select: 2 - with boosted comparison boosted comparison
Screenshot_2023-08-15-17-07-26 Screenshot_2023-08-15-17-07-57

Obviously the choice of a half-star is not relevant for the boosted comparison. The "normal comparison" being more a ranking, the boosted comparison could use the "comparison arrows" and the "normal comparison" could use the sport cup instead.
Screenshot_2023-08-15-17-07-48

@teolemon
Copy link
Member

How about something simpler, especially for the "Add to comparison"
image

@g123k
Copy link
Collaborator

g123k commented Aug 16, 2023

How about something simpler, especially for the "Add to comparison" image

The mockup is interesting, but I'm not convinced the "in line" comparison is interesting.
It would indeed be better to just have a kind of horizontal scroll with maybe a maximum of products (eg: 10)
But I think we're out of scope for this PR.

@monsieurtanuki
Copy link
Contributor Author

The mockup is interesting, but I'm not convinced the "in line" comparison is interesting.

@g123k You may be right but that was the purpose of the issue.

It would indeed be better to just have a kind of horizontal scroll with maybe a maximum of products (eg: 10)

That would mean horizontal and vertical scrolling, which is a bit acrobatic, UX-wise.

But I think we're out of scope for this PR.

Indeed we are.
I think we should consider this PR as a first step towards a different way of comparing products. Of course that will evolve, in the next PRs. And we may even drop the idea if in the end that's not useful.

@monsieurtanuki
Copy link
Contributor Author

@teolemon @g123k So what's the next step here?
We would have better ideas about possible improvements with this PR merged. The side-by-side comparison mode is only available after turning it on in the dev mode.

@teolemon
Copy link
Member

Does the comparison thing appear when this mode is not enabled ? It's not usable yet, and having it by default would seem like a regression.
image

@monsieurtanuki
Copy link
Contributor Author

Does the comparison thing appear when this mode is not enabled ? It's not usable yet, and having it by default would seem like a regression.

image

@teolemon

  • If the side by side comparison mode is not enabled in the dev mode (default=not enabled), the ugly half star will not be displayed.
  • If your prefer actions ("normal compare", "side by side compare", "delete") to be put in a "more..." button as popup menu items rather than with not very explicit icons, I'll have no problem doing it

@teolemon
Copy link
Member

If your prefer actions ("normal compare", "side by side compare", "delete") to be put in a "more..." button as popup menu items rather than with not very explicit icons, I'll have no problem doing it

Yes, that would be great

New file:
* `product_list_item_popup_items.dart`: Popup menu items for the product list page, for selected items.

Impacted files:
* `product_list_page.dart`: now displays item actions in a "more..." menu
* `product_list_popup_items.dart`: minor refactoring
@monsieurtanuki
Copy link
Contributor Author

@teolemon More like this (latest push)?

1 item selected ... and menu
Screenshot_2023-08-24-17-36-59 Screenshot_2023-08-24-17-36-42
3 items selected ... and menu
Screenshot_2023-08-24-17-37-16 Screenshot_2023-08-24-17-37-23
Compare side by side Ranking
Screenshot_2023-08-24-17-37-53 Screenshot_2023-08-24-17-37-45

@teolemon
Copy link
Member

Let's merge and refine

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants