From b326cff7d63f195be57d19abdaaf3908ee7d147a Mon Sep 17 00:00:00 2001
From: David Sevilla Martin <6401250+dsevillamartin@users.noreply.github.com>
Date: Fri, 21 Jul 2023 17:06:00 -0400
Subject: [PATCH] Allow voting for multiple options without change perm (#78)

* Make help text sticky
* Add 'vote' button for multiple votes at once w/o vote change perm
* Add poll option to prevent users from changing their vote
---
 js/src/forum/components/CreatePollModal.js |  15 +++
 js/src/forum/components/EditPollModal.js   |   2 +
 js/src/forum/components/PostPoll.js        | 144 ++++++++++++++++-----
 js/src/forum/models/Poll.js                |   1 +
 resources/less/forum.less                  |  28 +++-
 resources/locale/en.yml                    |   5 +
 src/Access/PollPolicy.php                  |   2 +-
 src/Api/Serializers/PollSerializer.php     |  11 +-
 src/Commands/CreatePollHandler.php         |   4 +-
 src/Commands/EditPollHandler.php           |   2 +-
 src/Poll.php                               |  10 +-
 11 files changed, 185 insertions(+), 39 deletions(-)

diff --git a/js/src/forum/components/CreatePollModal.js b/js/src/forum/components/CreatePollModal.js
index 57fb258c..6eace313 100755
--- a/js/src/forum/components/CreatePollModal.js
+++ b/js/src/forum/components/CreatePollModal.js
@@ -20,6 +20,7 @@ export default class CreatePollModal extends Modal {
 
     this.publicPoll = Stream(false);
     this.hideVotes = Stream(false);
+    this.allowChangeVote = Stream(true);
     this.allowMultipleVotes = Stream(false);
     this.maxVotes = Stream(0);
 
@@ -39,6 +40,7 @@ export default class CreatePollModal extends Modal {
       this.question(poll.question);
       this.publicPoll(poll.publicPoll);
       this.hideVotes(poll.hideVotes);
+      this.allowChangeVote(poll.allowChangeVote);
       this.allowMultipleVotes(poll.allowMultipleVotes);
       this.maxVotes(poll.maxVotes || 0);
 
@@ -156,6 +158,16 @@ export default class CreatePollModal extends Modal {
       20
     );
 
+    items.add(
+      'allow-change-vote',
+      <div className="Form-group">
+        <Switch state={this.allowChangeVote()} onchange={this.allowChangeVote}>
+          {app.translator.trans('fof-polls.forum.modal.allow_change_vote_label')}
+        </Switch>
+      </div>,
+      20
+    );
+
     items.add(
       'allow-multiple-votes',
       <div className="Form-group">
@@ -256,6 +268,8 @@ export default class CreatePollModal extends Modal {
       question: this.question(),
       endDate: this.dateToTimestamp(this.endDate()),
       publicPoll: this.publicPoll(),
+      hideVotes: this.hideVotes(),
+      allowChangeVote: this.allowChangeVote(),
       allowMultipleVotes: this.allowMultipleVotes(),
       maxVotes: this.maxVotes(),
       options: [],
@@ -301,6 +315,7 @@ export default class CreatePollModal extends Modal {
 
       promise.then(this.hide.bind(this), (err) => {
         console.error(err);
+        this.onerror(err);
         this.loaded();
       });
     } else {
diff --git a/js/src/forum/components/EditPollModal.js b/js/src/forum/components/EditPollModal.js
index 0fc47669..23203a35 100755
--- a/js/src/forum/components/EditPollModal.js
+++ b/js/src/forum/components/EditPollModal.js
@@ -19,6 +19,7 @@ export default class EditPollModal extends CreatePollModal {
     this.publicPoll = Stream(this.poll.publicPoll());
     this.allowMultipleVotes = Stream(this.poll.allowMultipleVotes());
     this.hideVotes = Stream(this.poll.hideVotes());
+    this.allowChangeVote = Stream(this.poll.allowChangeVote());
     this.maxVotes = Stream(this.poll.maxVotes() || 0);
 
     if (this.endDate() && dayjs(this.poll.endDate()).isAfter(dayjs())) {
@@ -97,6 +98,7 @@ export default class EditPollModal extends CreatePollModal {
       endDate: this.dateToTimestamp(this.endDate()),
       publicPoll: this.publicPoll(),
       hideVotes: this.hideVotes(),
+      allowChangeVote: this.allowChangeVote(),
       allowMultipleVotes: this.allowMultipleVotes(),
       maxVotes: this.maxVotes(),
       options,
diff --git a/js/src/forum/components/PostPoll.js b/js/src/forum/components/PostPoll.js
index 83dc2d1f..1ed159ce 100644
--- a/js/src/forum/components/PostPoll.js
+++ b/js/src/forum/components/PostPoll.js
@@ -5,6 +5,7 @@ import Button from 'flarum/common/components/Button';
 import LogInModal from 'flarum/forum/components/LogInModal';
 import ListVotersModal from './ListVotersModal';
 import classList from 'flarum/common/utils/classList';
+import ItemList from 'flarum/common/utils/ItemList';
 import Tooltip from 'flarum/common/components/Tooltip';
 import EditPollModal from './EditPollModal';
 
@@ -13,6 +14,23 @@ export default class PostPoll extends Component {
     super.oninit(vnode);
 
     this.loadingOptions = false;
+
+    this.useSubmitUI = !this.attrs.poll?.canChangeVote() && this.attrs.poll?.allowMultipleVotes();
+    this.pendingSubmit = false;
+    this.pendingOptions = null;
+  }
+
+  oncreate(vnode) {
+    super.oncreate(vnode);
+
+    this.preventClose = this.preventClose.bind(this);
+    window.addEventListener('beforeunload', this.preventClose);
+  }
+
+  onremove(vnode) {
+    super.onremove(vnode);
+
+    window.removeEventListener('beforeunload', this.preventClose);
   }
 
   view() {
@@ -22,6 +40,8 @@ export default class PostPoll extends Component {
 
     if (maxVotes === 0) maxVotes = options.length;
 
+    const infoItems = this.infoItems(maxVotes);
+
     return (
       <div className="Post-poll" data-id={poll.id()}>
         <div className="PollHeading">
@@ -45,41 +65,79 @@ export default class PostPoll extends Component {
           )}
         </div>
 
-        <div className="PollOptions">{options.map(this.viewOption.bind(this))}</div>
+        <div>
+          <div className="PollOptions">{options.map(this.viewOption.bind(this))}</div>
 
-        <div className="helpText PollInfoText">
-          {app.session.user && !poll.canVote() && !poll.hasEnded() && (
-            <span>
-              <i className="icon fas fa-times-circle" />
-              {app.translator.trans('fof-polls.forum.no_permission')}
-            </span>
-          )}
-          {poll.endDate() && (
-            <span>
-              <i class="icon fas fa-clock" />
-              {poll.hasEnded()
-                ? app.translator.trans('fof-polls.forum.poll_ended')
-                : app.translator.trans('fof-polls.forum.days_remaining', { time: dayjs(poll.endDate()).fromNow() })}
-            </span>
-          )}
+          <div className="Poll-sticky">
+            {!infoItems.isEmpty() && <div className="helpText PollInfoText">{infoItems.toArray()}</div>}
 
-          {poll.canVote() && (
-            <span>
-              <i className="icon fas fa-poll" />
-              {app.translator.trans('fof-polls.forum.max_votes_allowed', { max: maxVotes })}
-            </span>
-          )}
+            {this.useSubmitUI && this.pendingSubmit && (
+              <Button className="Button Button--primary Poll-submit" loading={this.loadingOptions} onclick={this.onsubmit.bind(this)}>
+                {app.translator.trans('fof-polls.forum.poll.submit_button')}
+              </Button>
+            )}
+          </div>
         </div>
       </div>
     );
   }
 
+  infoItems(maxVotes) {
+    const items = new ItemList();
+    const poll = this.attrs.poll;
+    const hasVoted = poll.myVotes()?.length > 0;
+
+    if (app.session.user && !poll.canVote() && !poll.hasEnded()) {
+      items.add(
+        'no-permission',
+        <span>
+          <i className="icon fas fa-times-circle fa-fw" />
+          {app.translator.trans('fof-polls.forum.no_permission')}
+        </span>
+      );
+    }
+
+    if (poll.endDate()) {
+      items.add(
+        'end-date',
+        <span>
+          <i class="icon fas fa-clock fa-fw" />
+          {poll.hasEnded()
+            ? app.translator.trans('fof-polls.forum.poll_ended')
+            : app.translator.trans('fof-polls.forum.days_remaining', { time: dayjs(poll.endDate()).fromNow() })}
+        </span>
+      );
+    }
+
+    if (poll.canVote()) {
+      items.add(
+        'max-votes',
+        <span>
+          <i className="icon fas fa-poll fa-fw" />
+          {app.translator.trans('fof-polls.forum.max_votes_allowed', { max: maxVotes })}
+        </span>
+      );
+
+      if (!poll.canChangeVote()) {
+        items.add(
+          'cannot-change-vote',
+          <span>
+            <i className={`icon fas fa-${hasVoted ? 'times' : 'exclamation'}-circle fa-fw`} />
+            {app.translator.trans('fof-polls.forum.poll.cannot_change_vote')}
+          </span>
+        );
+      }
+    }
+
+    return items;
+  }
+
   viewOption(opt) {
     const poll = this.attrs.poll;
     const hasVoted = poll.myVotes()?.length > 0;
     const totalVotes = poll.voteCount();
 
-    const voted = poll.myVotes()?.some?.((vote) => vote.option() === opt);
+    const voted = this.pendingOptions ? this.pendingOptions.has(opt.id()) : poll.myVotes()?.some?.((vote) => vote.option() === opt);
     const votes = opt.voteCount();
     const percent = totalVotes > 0 ? Math.round((votes / totalVotes) * 100) : 0;
 
@@ -88,9 +146,11 @@ export default class PostPoll extends Component {
     const isDisabled = this.loadingOptions || (hasVoted && !poll.canChangeVote());
     const width = canSeeVoteCount ? percent : (Number(voted) / (poll.myVotes()?.length || 1)) * 100;
 
+    const showCheckmark = !app.session.user || (!poll.hasEnded() && poll.canVote() && (!hasVoted || poll.canChangeVote()));
+
     const bar = (
       <div className="PollBar" data-selected={voted}>
-        {((!poll.hasEnded() && poll.canVote()) || !app.session.user) && (
+        {showCheckmark && (
           <label className="checkbox">
             <input onchange={this.changeVote.bind(this, opt)} type="checkbox" checked={voted} disabled={isDisabled} />
             <span className="checkmark" />
@@ -133,7 +193,7 @@ export default class PostPoll extends Component {
       return;
     }
 
-    const optionIds = new Set(this.attrs.poll.myVotes().map?.((v) => v.option().id()));
+    const optionIds = this.pendingOptions || new Set(this.attrs.poll.myVotes().map?.((v) => v.option().id()));
     const isUnvoting = optionIds.delete(option.id());
     const allowsMultiple = this.attrs.poll.allowMultipleVotes();
 
@@ -145,6 +205,23 @@ export default class PostPoll extends Component {
       optionIds.add(option.id());
     }
 
+    if (this.useSubmitUI) {
+      this.pendingOptions = optionIds.size ? optionIds : null;
+      this.pendingSubmit = !!this.pendingOptions;
+      return;
+    }
+
+    return this.submit(optionIds, null, () => (evt.target.checked = isUnvoting));
+  }
+
+  onsubmit() {
+    return this.submit(this.pendingOptions, () => {
+      this.pendingOptions = null;
+      this.pendingSubmit = false;
+    });
+  }
+
+  submit(optionIds, cb, onerror) {
     this.loadingOptions = true;
     m.redraw();
 
@@ -160,11 +237,10 @@ export default class PostPoll extends Component {
       })
       .then((res) => {
         app.store.pushPayload(res);
-
-        // m.redraw();
+        cb?.();
       })
-      .catch(() => {
-        evt.target.checked = isUnvoting;
+      .catch((err) => {
+        onerror?.(err);
       })
       .finally(() => {
         this.loadingOptions = false;
@@ -198,4 +274,14 @@ export default class PostPoll extends Component {
     vnode.attrs.tooltipVisible = false;
     vnode.state.updateVisibility();
   }
+
+  /**
+   * Alert before navigating away using browser's 'beforeunload' event
+   */
+  preventClose(e) {
+    if (this.pendingOptions) {
+      e.preventDefault();
+      return true;
+    }
+  }
 }
diff --git a/js/src/forum/models/Poll.js b/js/src/forum/models/Poll.js
index ef02a6c3..0f4da4c5 100755
--- a/js/src/forum/models/Poll.js
+++ b/js/src/forum/models/Poll.js
@@ -7,6 +7,7 @@ export default class Poll extends Model {
 
   publicPoll = Model.attribute('publicPoll');
   hideVotes = Model.attribute('hideVotes');
+  allowChangeVote = Model.attribute('allowChangeVote');
   allowMultipleVotes = Model.attribute('allowMultipleVotes');
   maxVotes = Model.attribute('maxVotes');
 
diff --git a/resources/less/forum.less b/resources/less/forum.less
index 826f9ea0..6b81a7fa 100755
--- a/resources/less/forum.less
+++ b/resources/less/forum.less
@@ -112,6 +112,29 @@
     align-items: start;
   }
 
+  .Poll-sticky {
+    position: sticky;
+    bottom: 0;
+    padding: 10px 0;
+    margin-left: 15px;
+    margin-top: 10px;
+    display: flex;
+    align-items: flex-start;
+    column-gap: 15px;
+    z-index: 999;
+    background-color: var(--body-bg);
+    .box-shadow(inset 0px 2px 0px 0px fade(@text-color, 20%));
+
+    &:empty {
+      display: none;
+    }
+
+    .PollInfoText {
+      flex-grow: 1;
+      margin-bottom: 0;
+    }
+  }
+
   & + & {
     margin-top: 2em;
   }
@@ -318,15 +341,12 @@
 }
 
 .PollInfoText {
-  margin-left: 15px;
-  margin-top: 20px;
-
   span {
     display: block;
   }
 
   .icon {
-    width: 15px;
+    margin-right: 2.5px;
   }
 }
 
diff --git a/resources/locale/en.yml b/resources/locale/en.yml
index 9561c2f6..d1c1ceb9 100755
--- a/resources/locale/en.yml
+++ b/resources/locale/en.yml
@@ -19,6 +19,10 @@ fof-polls:
     public_poll: View voters
     max_votes_allowed: "Poll allows voting for {max, plural, one {# option} other {# options}}."
 
+    poll:
+      cannot_change_vote: You cannot change your vote after voting.
+      submit_button: Vote
+
     composer_discussion:
       add_poll: => fof-polls.forum.moderation.add
       edit_poll: => fof-polls.forum.moderation.edit
@@ -41,6 +45,7 @@ fof-polls:
       max_votes_label: Max votes per user
       max_votes_help: Set to 0 to allow users to vote for all options.
       hide_votes_label: Hide votes until poll ends
+      allow_change_vote_label: Allow users to change their vote
       question_placeholder: Question
       submit: Submit
 
diff --git a/src/Access/PollPolicy.php b/src/Access/PollPolicy.php
index ca1ee05e..942f416a 100644
--- a/src/Access/PollPolicy.php
+++ b/src/Access/PollPolicy.php
@@ -55,7 +55,7 @@ public function vote(User $actor, Poll $poll)
 
     public function changeVote(User $actor, Poll $poll)
     {
-        if ($actor->hasPermission('polls.changeVote')) {
+        if ($poll->allow_change_vote && $actor->hasPermission('polls.changeVote')) {
             return $this->allow();
         }
     }
diff --git a/src/Api/Serializers/PollSerializer.php b/src/Api/Serializers/PollSerializer.php
index b5b1268c..9e99b72e 100755
--- a/src/Api/Serializers/PollSerializer.php
+++ b/src/Api/Serializers/PollSerializer.php
@@ -30,17 +30,18 @@ class PollSerializer extends AbstractSerializer
      */
     protected function getDefaultAttributes($poll)
     {
+        $canEdit = $this->actor->can('edit', $poll);
+
         $attributes = [
             'question'           => $poll->question,
             'hasEnded'           => $poll->hasEnded(),
-            'publicPoll'         => $poll->public_poll,
             'allowMultipleVotes' => $poll->allow_multiple_votes,
             'maxVotes'           => $poll->max_votes,
             'endDate'            => $this->formatDate($poll->end_date),
             'createdAt'          => $this->formatDate($poll->created_at),
             'updatedAt'          => $this->formatDate($poll->updated_at),
             'canVote'            => $this->actor->can('vote', $poll),
-            'canEdit'            => $this->actor->can('edit', $poll),
+            'canEdit'            => $canEdit,
             'canDelete'          => $this->actor->can('delete', $poll),
             'canSeeVoters'       => $this->actor->can('seeVoters', $poll),
             'canChangeVote'      => $this->actor->can('changeVote', $poll),
@@ -50,6 +51,12 @@ protected function getDefaultAttributes($poll)
             $attributes['voteCount'] = (int) $poll->vote_count;
         }
 
+        if ($canEdit) {
+            $attributes['publicPoll'] = $poll->public_poll;
+            $attributes['hideVotes'] = $poll->hide_votes;
+            $attributes['allowChangeVote'] = $poll->allow_change_vote;
+        }
+
         return $attributes;
     }
 
diff --git a/src/Commands/CreatePollHandler.php b/src/Commands/CreatePollHandler.php
index 9f4a51f5..56c15f67 100644
--- a/src/Commands/CreatePollHandler.php
+++ b/src/Commands/CreatePollHandler.php
@@ -103,7 +103,9 @@ public function handle(CreatePoll $command)
                 $carbonDate != null ? $carbonDate->utc() : null,
                 Arr::get($attributes, 'publicPoll'),
                 Arr::get($attributes, 'allowMultipleVotes'),
-                Arr::get($attributes, 'maxVotes')
+                Arr::get($attributes, 'maxVotes'),
+                Arr::get($attributes, 'hideVotes'),
+                Arr::get($attributes, 'allowChangeVote'),
             );
 
             $this->events->dispatch(new SavingPollAttributes($command->actor, $poll, $attributes, $attributes));
diff --git a/src/Commands/EditPollHandler.php b/src/Commands/EditPollHandler.php
index 112525e3..a31da2ce 100755
--- a/src/Commands/EditPollHandler.php
+++ b/src/Commands/EditPollHandler.php
@@ -72,7 +72,7 @@ public function handle(EditPoll $command)
             $poll->question = $attributes['question'];
         }
 
-        foreach (['publicPoll', 'allowMultipleVotes', 'hideVotes'] as $key) {
+        foreach (['publicPoll', 'allowMultipleVotes', 'hideVotes', 'allowChangeVote'] as $key) {
             if (isset($attributes[$key])) {
                 $poll->settings[Str::snake($key)] = (bool) $attributes[$key];
             }
diff --git a/src/Poll.php b/src/Poll.php
index 57af71ab..fcf85ef9 100755
--- a/src/Poll.php
+++ b/src/Poll.php
@@ -26,6 +26,7 @@
  * @property-read bool             $allow_multiple_votes
  * @property-read int              $max_votes
  * @property-read bool             $hide_votes
+ * @property-read bool             $allow_change_vote
  * @property int                   $vote_count
  * @property Post                  $post
  * @property User                  $user
@@ -70,7 +71,7 @@ class Poll extends AbstractModel
      *
      * @return static
      */
-    public static function build($question, $postId, $actorId, $endDate, $publicPoll, $allowMultipleVotes = false, $maxVotes = 0)
+    public static function build($question, $postId, $actorId, $endDate, $publicPoll, $allowMultipleVotes = false, $maxVotes = 0, $hideVotes = false, $allowChangeVote = true)
     {
         $poll = new static();
 
@@ -82,6 +83,8 @@ public static function build($question, $postId, $actorId, $endDate, $publicPoll
             'public_poll'          => $publicPoll,
             'allow_multiple_votes' => $allowMultipleVotes,
             'max_votes'            => min(0, (int) $maxVotes),
+            'hide_votes'           => $hideVotes,
+            'allow_change_vote'    => $allowChangeVote,
         ];
 
         return $poll;
@@ -167,4 +170,9 @@ protected function getHideVotesAttribute(): bool
     {
         return (bool) Arr::get($this->settings, 'hide_votes');
     }
+
+    protected function getAllowChangeVoteAttribute(): bool
+    {
+        return (bool) Arr::get($this->settings, 'allow_change_vote', true);
+    }
 }