feat: 4223 - comparison page for 3 random products on dev mode #4444

monsieurtanuki · 2023-08-04T14:17:04Z

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

Part of

Create a side by side compare mode (to be hidden away in dev mode for the moment) #4223

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 · 2023-08-04T14:22:44Z

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 · 2023-08-04T14:45:50Z

You can test this PR on: Android

teolemon · 2023-08-06T13:45:45Z

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 · 2023-08-06T13:49:34Z

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 · 2023-08-06T14:13:10Z

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

monsieurtanuki · 2023-08-06T14:20:38Z

Probable confusion between #4423 and #4223.

g123k · 2023-08-15T06:28:07Z

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 · 2023-08-15T13:07:26Z

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 · 2023-08-15T15:23:32Z

@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

multi-select: 0	multi-select: 1

multi-select: 2 - with boosted comparison	boosted comparison

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.

teolemon · 2023-08-16T11:12:13Z

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

g123k · 2023-08-16T11:25:21Z

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

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 · 2023-08-16T17:57:07Z

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 · 2023-08-24T07:07:51Z

@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 · 2023-08-24T07:18:34Z

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.

monsieurtanuki · 2023-08-24T11:45:38Z

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.

@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 · 2023-08-24T12:19:41Z

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 · 2023-08-24T15:54:01Z

@teolemon More like this (latest push)?

1 item selected	... and menu

3 items selected	... and menu

Compare side by side	Ranking

teolemon · 2023-08-27T07:55:59Z

Let's merge and refine

monsieurtanuki requested a review from a team as a code owner August 4, 2023 14:17

monsieurtanuki requested a review from teolemon August 4, 2023 14:17

github-actions bot assigned monsieurtanuki Aug 4, 2023

github-actions bot added the 🥫 Product page label Aug 4, 2023

teolemon added compare mode side by side compare mode labels Aug 4, 2023

github-actions bot added the PR: needs rebase label Aug 5, 2023

Merge branch 'develop' into feat/4223

6e1a42c

github-actions bot removed the PR: needs rebase label Aug 5, 2023

Merge branch 'develop' into feat/4223

188b46d

feat: 4223 - stupid lint check part 4

1a5ff1d

teolemon mentioned this pull request Aug 11, 2023

🎯 What can I work on ? #525

Open

g123k mentioned this pull request Aug 14, 2023

🚀 Next release: 4.11.0 (August 2023) #4523

Open

Merge branch 'openfoodfacts:develop' into feat/4223

9fbc8f3

github-actions bot added the User lists label Aug 15, 2023

feat: 4223 - minor warning fix

af01c30

Merge branch 'develop' into feat/4223

9aa02dc

Merge branch 'develop' into feat/4223

354c1e1

teolemon mentioned this pull request Aug 24, 2023

Beautify the "Add to comparison" screen #4593

Open

monsieurtanuki added 2 commits August 24, 2023 14:33

Merge branch 'develop' into feat/4223

ed0451e

teolemon merged commit d4bdca2 into openfoodfacts:develop Aug 27, 2023
6 checks passed

github-actions bot mentioned this pull request Aug 27, 2023

chore(develop): 🚀 Open Food Facts Mobile app - Release 4.11.0. #4522

Merged

monsieurtanuki mentioned this pull request Nov 20, 2023

The "Multi-select" feature is a regression and really needs some UX work #4827

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 4223 - comparison page for 3 random products on dev mode #4444

feat: 4223 - comparison page for 3 random products on dev mode #4444

monsieurtanuki commented Aug 4, 2023

codecov-commenter commented Aug 4, 2023 •

edited

github-actions bot commented Aug 4, 2023

teolemon commented Aug 6, 2023

monsieurtanuki commented Aug 6, 2023

monsieurtanuki commented Aug 6, 2023

monsieurtanuki commented Aug 6, 2023

g123k commented Aug 15, 2023

monsieurtanuki commented Aug 15, 2023

monsieurtanuki commented Aug 15, 2023

teolemon commented Aug 16, 2023

g123k commented Aug 16, 2023

monsieurtanuki commented Aug 16, 2023

monsieurtanuki commented Aug 24, 2023

teolemon commented Aug 24, 2023

monsieurtanuki commented Aug 24, 2023

teolemon commented Aug 24, 2023

monsieurtanuki commented Aug 24, 2023

teolemon commented Aug 27, 2023

feat: 4223 - comparison page for 3 random products on dev mode #4444

feat: 4223 - comparison page for 3 random products on dev mode #4444

Conversation

monsieurtanuki commented Aug 4, 2023

What

Screenshot

Part of

Files

codecov-commenter commented Aug 4, 2023 • edited

Codecov Report

github-actions bot commented Aug 4, 2023

teolemon commented Aug 6, 2023

monsieurtanuki commented Aug 6, 2023

monsieurtanuki commented Aug 6, 2023

monsieurtanuki commented Aug 6, 2023

g123k commented Aug 15, 2023

monsieurtanuki commented Aug 15, 2023

monsieurtanuki commented Aug 15, 2023

teolemon commented Aug 16, 2023

g123k commented Aug 16, 2023

monsieurtanuki commented Aug 16, 2023

monsieurtanuki commented Aug 24, 2023

teolemon commented Aug 24, 2023

monsieurtanuki commented Aug 24, 2023

teolemon commented Aug 24, 2023

monsieurtanuki commented Aug 24, 2023

teolemon commented Aug 27, 2023

codecov-commenter commented Aug 4, 2023 •

edited