FrontEnd vote action UI/implementation #15

antopalidi · 2023-10-13T10:13:28Z

Fixes Green-Party-of-Canada-Members/gpc-decidim#114

codecov · 2023-10-13T10:25:52Z

Codecov Report

All modified and coverable lines are covered by tests ✅

❗ No coverage uploaded for pull request base (graded_proposal_voting@e822308). Click here to learn what that means.

Additional details and impacted files

@@                    Coverage Diff                    @@
##             graded_proposal_voting      #15   +/-   ##
=========================================================
  Coverage                          ?   96.41%           
=========================================================
  Files                             ?      120           
  Lines                             ?     3346           
  Branches                          ?        0           
=========================================================
  Hits                              ?     3226           
  Misses                            ?      120           
  Partials                          ?        0

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

microstudi

Thanks Anna,
I've made you a pre-review so you can fix some thinks before you go further away!

See the comments but main thinks:

we need to isolate the specific implementation of the voting (in this case ThreeFlags)
If we can, better not to use channels and websockets (this adds requirements to the server). I really think it is not necessary as the dynamic rendering of the votes results is already implemented in javascript by decidim.
If we use CSS, we need to namespace it too

microstudi · 2023-10-16T08:29:59Z

app/packs/stylesheets/decidim/decidim_awesome/vote/vote.scss

@@ -0,0 +1,93 @@
+$rectangle-width: 7rem;


Suggested change

$rectangle-width: 7rem;

.voting-three-flag {

$rectangle-width: 7rem;

we need to namespace all classes here, we need to take into account that this is only one implementation of the possibles.

microstudi · 2023-10-16T08:30:45Z

app/packs/stylesheets/decidim/decidim_awesome/awesome_application.scss

@@ -2,6 +2,7 @@
 @import "stylesheets/decidim/decidim_awesome/editors/markdown_editor";
 @import "stylesheets/decidim/decidim_awesome/editors/quill_editor";
 @import "stylesheets/decidim/decidim_awesome/forms/autosave";
+@import "stylesheets/decidim/decidim_awesome/vote/vote";


Suggested change

@import "stylesheets/decidim/decidim_awesome/vote/vote";

@import "stylesheets/decidim/decidim_awesome/voting/three_flags";

Better be more specific, in case we add more systems

microstudi · 2023-10-16T08:32:47Z

app/cells/decidim/proposals/vote_proposal_cell.rb

+module Decidim
+  module Proposals
+    class VoteProposalCell < Decidim::ViewModel


Suggested change

module Decidim

module Proposals

class VoteProposalCell < Decidim::ViewModel

module Decidim

module DecidimAwesome

module Voting

class ThreeFlagsProposalCell < Decidim::ViewModel

We need to isolate this voting method system. In case we add others (that we will)

microstudi · 2023-10-16T08:33:40Z

app/cells/decidim/proposals/vote_proposal_modal_cell.rb

+module Decidim
+  module Proposals
+    class VoteProposalModalCell < Decidim::ViewModel


Suggested change

module Decidim

module Proposals

class VoteProposalModalCell < Decidim::ViewModel

module Decidim

module DecidimAwesome

module Voting

class ThreeFlagsProposalModalCell < Decidim::ViewModel

Here the same

microstudi · 2023-10-16T08:34:15Z

app/cells/decidim/proposals/votes_counter_cell.rb

+module Decidim
+  module Proposals
+    class VotesCounterCell < Decidim::ViewModel
+      include Decidim::IconHelper


Suggested change

module Decidim

module Proposals

class VotesCounterCell < Decidim::ViewModel

include Decidim::IconHelper

module Decidim

module DecidimAwesome

module Voting

class ThreeFlagsCounterCell < Decidim::ViewModel

include Decidim::IconHelper

microstudi · 2023-10-16T08:37:20Z

app/channels/decidim/decidim_awesome/proposal_vote_channel.rb

+  module DecidimAwesome
+    # ProposalVoteChannel handles the WebSocket connections for proposal votes.
+    # It streams from a channel specific to a proposal, identified by its ID.
+    class ProposalVoteChannel < ApplicationCable::Channel


I think we don't to use channels here.
Decidim is not using them and I would prefer not to introduce here unless is really necessary.

If you take a look at the file that is rendered by the VoteProposalController (update_buttons_and_counters.js.erb) it will replace the views automatically. I think it is best to not over-complicate it.

* Setup migrations and models (#13) * add migrations * change grade to weight * totals name * hooks (wip) * add total weight cache * graded voting/set defaults (#14) * initial defaults * add deface * add views to manifest * add cells view hacker * set weight validator for voting manifest * test fixing * add basic weight voting * add specs * manifest spec * add controller spec * add readme * fix awesome spec * rubocop * fix system checker spec * set openstreet map * used mocked openstreet maps * modernize actions * Prevent changin voting manifest if votes exist (#16) * update codecov report * Export weights (#17) * add label generation for the manifest * tweak exported * add weights to the exporter * fix tests * add graphql entry * Order proposals by my votes (#18) * override filters * add specs * FrontEnd vote action UI/implementation (#15) * add vote button, add modal, change votes counter view * change frontend * add voting to modal * add action cable, updating results * refactoring * isolate the specific implementation of the voting * add abstain setting * change modal, change voting * add abstain to voting * refactoring * change weight colors * add tests * add cells specs * fix lint * fix stylelint * normalize locale * change controller * fix proposal_vote_path * fix locale * fix locale --------- Co-authored-by: Ivan Vergés <[email protected]> * Minor fixes and improvements for frontend voting (#19) * change basic copies * namespace css * add link "change my vote" * change opacity method * add tests * add check settings for abstain * fix cell test --------- Co-authored-by: Anna Topalidi <[email protected]> * Add modal window with instructions (#20) * change basic copies * namespace css * introduce modal pre-voting * handle localstorage * refactor namespaces for copies * fix copy * copies * add finger * add svg icons * add margin * fix margins in modal * abstain style * fix tests * prevent voting abstain if not allowed * fix footer * normalize i18n * add additional specs * add conf var for sorting * fix cache proposal_m * proposal conf fixes * Rename manifest and minor fixes (#22) * rename voting_cards manifest * mend * abstain color * fix modal title * fix test * fix counter colors * fix xss * style fix --------- Co-authored-by: Anna Topalidi <[email protected]> Co-authored-by: Anna Topalidi <[email protected]>

add vote button, add modal, change votes counter view

326d68f

antopalidi added 4 commits October 13, 2023 13:41

change frontend

122d5d1

add voting to modal

c25c7a7

add action cable, updating results

e80226a

refactoring

b90a54a

microstudi requested changes Oct 16, 2023

View reviewed changes

antopalidi and others added 18 commits October 17, 2023 12:06

isolate the specific implementation of the voting

1b15ec9

Merge branch 'graded_proposal_voting' into frontend-vote-action

051abe1

add abstain setting

4a85cd9

change modal, change voting

25646e3

add abstain to voting

4f4b505

refactoring

f08d404

change weight colors

b8e3d15

add tests

861affa

add cells specs

20bcdf4

merge graded_proposal_voting

0d5b1ef

fix lint

792c6f1

fix stylelint

d31a2f2

normalize locale

7c6a037

change controller

20f90dc

fix proposal_vote_path

5c2fb2f

fix locale

3c97d39

fix locale

18fc9e2

Merge branch 'graded_proposal_voting' into frontend-vote-action

6077494

microstudi merged commit fd679a0 into graded_proposal_voting Oct 27, 2023
10 of 11 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FrontEnd vote action UI/implementation #15

FrontEnd vote action UI/implementation #15

antopalidi commented Oct 13, 2023

codecov bot commented Oct 13, 2023 •

edited

Loading

microstudi left a comment

microstudi Oct 16, 2023

microstudi Oct 16, 2023

microstudi Oct 16, 2023 •

edited

Loading

microstudi Oct 16, 2023 •

edited

Loading

microstudi Oct 16, 2023 •

edited

Loading

microstudi Oct 16, 2023

	$rectangle-width: 7rem;
	.voting-three-flag {
	$rectangle-width: 7rem;

	@import "stylesheets/decidim/decidim_awesome/vote/vote";
	@import "stylesheets/decidim/decidim_awesome/voting/three_flags";

FrontEnd vote action UI/implementation #15

FrontEnd vote action UI/implementation #15

Conversation

antopalidi commented Oct 13, 2023

codecov bot commented Oct 13, 2023 • edited Loading

Codecov Report

microstudi left a comment

Choose a reason for hiding this comment

microstudi Oct 16, 2023

Choose a reason for hiding this comment

microstudi Oct 16, 2023

Choose a reason for hiding this comment

microstudi Oct 16, 2023 • edited Loading

Choose a reason for hiding this comment

microstudi Oct 16, 2023 • edited Loading

Choose a reason for hiding this comment

microstudi Oct 16, 2023 • edited Loading

Choose a reason for hiding this comment

microstudi Oct 16, 2023

Choose a reason for hiding this comment

codecov bot commented Oct 13, 2023 •

edited

Loading

microstudi Oct 16, 2023 •

edited

Loading

microstudi Oct 16, 2023 •

edited

Loading

microstudi Oct 16, 2023 •

edited

Loading