decidim-elections 0.27.8 → 0.28.0.rc4

data/app/packs/src/decidim/elections/voter/vote_questions.component.js

@@ -5,9 +5,6 @@
 export default class VoteQuestionsComponent {
   constructor($voteWrapper) {
     this.$voteWrapper = $voteWrapper;
-    this.$continueButton = this.$voteWrapper.find("a.focus__next");
-    this.$confirmButton = this.$voteWrapper.find("a.focus__next.confirm");
-    this.$continueSpan = this.$voteWrapper.find("span.disabled-continue");
     this.$currentStep = "";
     this.$currentStepMaxSelection = "";
     this.$answerCounter = 0;
@@ -23,27 +20,38 @@ export default class VoteQuestionsComponent {
   init() {
     this.setCurrentStep();
     this.toggleContinueButton();
-    this.$confirmButton.addClass("show").removeClass("hide");
-    $(".evote__counter-min").text(this.$answerCounter);
+
+    $("[data-counter-selection]").text(this.$answerCounter);
     this.answerCounter();
     this.disableCheckbox();
   }
 
   setCurrentStep() {
-    this.$currentStep = this.$voteWrapper.find(".focus__step:visible")
+    this.$currentStep = this.$voteWrapper.find('[id^="step"]:not([hidden])')
+    this.$confirmButton = this.$currentStep.find('[id^="next"]');
+
     this.setSelections();
     this.onSelectionChange();
+    this.updateWizardSteps(this.$currentStep.attr("id"));
+  }
+
+  errored() {
+    this.$currentStep.attr("hidden", true);
+    this.$currentStep = this.$voteWrapper.find("#failed").attr("hidden", false);
   }
 
   toggleContinueButton() {
+    // ignore the button if the step is not a question
+    if (!this.isQuestion(this.$currentStep.attr("id"))) {
+      return
+    }
+
     if (this.checkAnswers()) {
       // next step enabled
-      this.$continueButton.addClass("show").removeClass("hide")
-      this.$continueSpan.addClass("hide").removeClass("show")
+      this.$confirmButton.attr("disabled", false)
     } else {
       // next step disabled
-      this.$continueButton.addClass("hide").removeClass("show")
-      this.$continueSpan.addClass("show").removeClass("hide")
+      this.$confirmButton.attr("disabled", true)
     }
   }
 
@@ -57,7 +65,7 @@ export default class VoteQuestionsComponent {
 
   answerCounter() {
     let checked = $(`#${this.$currentStep.attr("id")} .answer_input:checked`).length
-    $(".evote__counter-min").text(checked);
+    $("[data-counter-selection]").text(checked);
   }
 
   // disable checkboxes if NOTA option is selected
@@ -72,26 +80,27 @@ export default class VoteQuestionsComponent {
       let checkId = $(event.target).attr("id");
       let checkStatus = event.target.checked;
 
-      this.$currentStep.find(`[data-disabled-by='#${checkId}']`).each((_index, element) => {
+      this.$currentStep.find(`[data-disabled-by='${checkId}']`).each((_index, element) => {
+        const $checkbox = $(element).find("input[type=checkbox]")
+
         if (checkStatus) {
-          $(element).addClass("is-disabled");
-          $(element).find("input[type=checkbox]").prop("checked", false);
-          $(element).find("input[type=checkbox]").attr("aria-disabled", "");
+          $checkbox.prop("disabled", true);
+          $checkbox.prop("checked", false);
+          $(element).attr("aria-disabled", true);
         } else {
-          $(element).removeClass("is-disabled");
-          $(element).find("input[type=checkbox]").removeAttr("aria-disabled");
+          $checkbox.prop("disabled", false);
+          $(element).removeAttr("aria-disabled");
         }
       });
     });
   }
 
   setSelections() {
-    this.$currentStepMaxSelection = this.$currentStep.find(".evote__options").data("max-selection")
+    this.$currentStepMaxSelection = this.$currentStep.find('[id^="question"]').data("max-selection")
   }
 
-
   onSelectionChange() {
-    let $voteOptions = this.$currentStep.find(".evote__options");
+    let $voteOptions = this.$currentStep.find('[id^="question"]');
     $voteOptions.on("change", () => {
       this.toggleContinueButton();
       this.toggleConfirmAnswers();
@@ -99,26 +108,63 @@ export default class VoteQuestionsComponent {
     });
   }
 
+  updateWizardSteps(id) {
+    const wizard = document.getElementById("wizard-steps")
+    const heading = document.getElementById("heading")
+
+    if (heading) {
+      // this step has no heading 🤷‍♀️
+      if (id === "step-encrypting") {
+        heading.hidden = true
+
+        return
+      }
+
+      heading.hidden = false
+    }
+
+    if (wizard) {
+      let selector = id
+
+      if (this.isQuestion(id)) {
+        selector = "step-election"
+      }
+
+      wizard.querySelectorAll("[data-step]").forEach((element) => {
+        if (element.dataset.step === selector) {
+          element.setAttribute("aria-current", "step")
+        } else {
+          element.removeAttribute("aria-current")
+        }
+      })
+    }
+  }
+
+  // the question ids always end with a number
+  isQuestion(id) {
+    return (/[0-9]+$/).test(id);
+  }
+
   // receive confirmed answers
   toggleConfirmAnswers() {
     $(".answer_input:checked").each((_index, element) => {
-      const confirmedAnswer = $(".evote__confirm").find(`#${element.value}`);
-      $(confirmedAnswer).removeClass("hide")
+      const confirmedAnswer = $("#step-confirm").find(`#${element.value}`);
+      $(confirmedAnswer).attr("hidden", false)
     })
 
     $(".answer_input").not(":checked").each((_index, element) => {
-      const confirmedAnswer = $(".evote__confirm").find(`#${element.value}`);
-      $(confirmedAnswer).addClass("hide")
+      const confirmedAnswer = $("#step-confirm").find(`#${element.value}`);
+      $(confirmedAnswer).attr("hidden", true)
     })
 
     $(".nota_input:checked").each((_index, element) => {
-      const confirmedAnswer = $(".evote__confirm").find(`.${element.value}`);
-      $(confirmedAnswer).removeClass("hide")
+      const confirmedAnswer = $("#step-confirm").find(`#${element.value}`);
+      $(confirmedAnswer).attr("hidden", false)
     })
 
     $(".nota_input").not(":checked").each((_index, element) => {
-      const confirmedAnswer = $(".evote__confirm").find(`.${element.value}`);
-      $(confirmedAnswer).addClass("hide")
+      const confirmedAnswer = $("#step-confirm").find(`#${element.value}`);
+      $(confirmedAnswer).attr("hidden", true)
     })
   }
 }

data/app/packs/src/decidim/votings/admin/polling_officers_picker.js

@@ -1,35 +1,20 @@
-$(() => {
-  const $content = $(".picker-content"),
-      pickerMore = $content.data("picker-more"),
-      pickerPath = $content.data("picker-path"),
-      toggleNoPollingOfficers = () => {
-        const showNoPollingOfficers = $("#polling_officers_list li:visible").length === 0
-        $("#no_polling_officers").toggle(showNoPollingOfficers)
-      }
-
-  let jqxhr = null
-
-  toggleNoPollingOfficers()
-
-  $(".data_picker-modal-content").on("change keyup", "#polling_officers_filter", (event) => {
-    const filter = event.target.value.toLowerCase()
+import TomSelect from "tom-select/dist/cjs/tom-select.popular";
 
-    if (pickerMore) {
-      if (jqxhr !== null) {
-        jqxhr.abort()
+document.addEventListener("DOMContentLoaded", () => {
+  const tagContainers = document.querySelectorAll("#polling_officers_filter");
+  tagContainers.forEach((container) => {
+    const { tmName, tmItems, tmNoResults } = container.dataset
+    const config = {
+      plugins: ["remove_button", "dropdown_input"],
+      allowEmptyOption: true,
+      items: JSON.parse(tmItems),
+      render: {
+        item: (data, escape) => `<div>${escape(data.text)}<input type="hidden" name="${tmName}[]" value="${data.value}" /></div>`,
+        // eslint-disable-next-line camelcase
+        ...(tmNoResults && { no_results: () => `<div class="no-results">${tmNoResults}</div>` })
       }
+    };
 
-      $content.html("<div class='loading-spinner'></div>")
-      jqxhr = $.get(`${pickerPath}?q=${filter}`, (data) => {
-        $content.html(data)
-        jqxhr = null
-        toggleNoPollingOfficers()
-      })
-    } else {
-      $("#polling_officers_list li").each((index, li) => {
-        $(li).toggle(li.textContent.toLowerCase().includes(filter))
-      })
-      toggleNoPollingOfficers()
-    }
+    return new TomSelect(container, config)
   })
-})
+});

data/app/packs/src/decidim/votings/admin/polling_stations_form.js

@@ -2,5 +2,8 @@ import attachGeocoding from "src/decidim/geocoding/attach_input"
 
 $(() => {
   const $form = $(".edit_polling_station, .new_polling_station");
-  attachGeocoding($form.find("#polling_station_address"));
+
+  if ($form.length > 0) {
+    attachGeocoding($form.find("#polling_station_address"));
+  }
 })

data/app/packs/src/decidim/votings/admin/{polling_officers_form.js → voting_user_role_form.js}

@@ -1,7 +1,7 @@
 import createFieldDependentInputs from "src/decidim/admin/field_dependent_inputs.component"
 
 $(() => {
-  const $participantType = $("#polling_officer_existing_user");
+  const $participantType = $("#voting_user_role_existing_user");
 
   createFieldDependentInputs({
     controllerField: $participantType,

data/app/packs/src/decidim/votings/in-person-vote.js

@@ -4,7 +4,7 @@ import "src/decidim/elections/broken_promises_handler";
 import { Client } from "@decidim/decidim-bulletin_board";
 
 $(async () => {
-  const $inPersonVoteWrapper = $(".in-person-vote-wrapper");
+  const $inPersonVoteWrapper = $("#in-person-vote-wrapper");
   if ($inPersonVoteWrapper.length > 0) {
     const bulletinBoardClient = new Client({
       apiEndpointUrl: $inPersonVoteWrapper.data("apiEndpointUrl")
@@ -16,8 +16,8 @@ $(async () => {
     $("form.update_vote_status").trigger("submit");
   }
 
-  $(".js-verify-document").on("click", () => {
-    $("#verify-document").hide();
-    $("#complete-voting").removeClass("hide");
+  $("#js-verify-document").on("click", () => {
+    $("#verify-document").attr("hidden", true);
+    $("#complete-voting").attr("hidden", false);
   });
 });

data/app/packs/src/decidim/votings/polling_officer_zone/edit-closure.js

@@ -12,11 +12,11 @@ $(() => {
     let recount = validBallotsCount + blankBallotsCount + nullBallotsCount
 
     if (recount === totalBallots) {
-      $("#submit-ballot-recount").removeClass("hide");
-      $("#btn-modal-closure-results-count-error").addClass("hide");
+      $("#submit-ballot-recount").attr("hidden", false);
+      $("#btn-modal-closure-results-count-error").attr("hidden", true);
     } else {
-      $("#submit-ballot-recount").addClass("hide");
-      $("#btn-modal-closure-results-count-error").removeClass("hide");
+      $("#submit-ballot-recount").attr("hidden", true);
+      $("#btn-modal-closure-results-count-error").attr("hidden", false);
     }
   };
 

data/app/packs/src/decidim/votings/polling_officer_zone/in-person-vote.js

@@ -1,5 +1,5 @@
 $(() => {
   $("#person_voted_checkbox").on("change", (event) => {
-    $("#submit_complete_voting").toggleClass("disabled", !$(event.target).is(":checked"));
+    $("#submit_complete_voting").attr("disabled", !$(event.target).is(":checked"));
   });
 });

data/app/packs/src/decidim/votings/polling_officer_zone/new-closure.js

@@ -8,20 +8,18 @@ $(() => {
     const totalBallotsInputValue = parseInt($totalBallotsInput.val(), 10);
     const electionVotesInputValue = parseInt($electionVotesInput.val(), 10);
 
-
     if (totalBallotsInputValue === electionVotesInputValue) {
-      $submitBtn.removeClass("disabled hide");
-      $modalBtn.addClass("hide");
+      $submitBtn.find("button").attr("disabled", false);
+      $submitBtn.attr("hidden", false);
+      $modalBtn.attr("hidden", true);
     } else {
-      $submitBtn.addClass("hide");
-      $modalBtn.removeClass("hide");
+      $submitBtn.attr("hidden", true);
+      $modalBtn.attr("hidden", false);
     }
   };
 
   $totalBallotsInput.on("blur", checkValues);
 
-  $("#submit-verify-votes").addClass("disabled");
-
   $totalBallotsInput.on("keyup", function() {
     $("#modal-total-ballots-value").html(parseInt($totalBallotsInput.val(), 10));
     $("#envelopes_result_polling_officer_notes").val("")
@@ -30,6 +28,6 @@ $(() => {
   $("#envelopes_result_polling_officer_notes").on("keyup", function() {
     let modalPollingOfficerNotes = $("#envelopes_result_polling_officer_notes").val()
 
-    $("#btn-submit-from-modal").toggleClass("disabled", !modalPollingOfficerNotes.trim());
+    $("#btn-submit-from-modal").attr("disabled", !modalPollingOfficerNotes.trim());
   });
 });

data/app/packs/stylesheets/decidim/elections/elections.scss

@@ -1,8 +1,202 @@
-@import "stylesheets/decidim/elections/focus/accordion";
-@import "stylesheets/decidim/elections/focus/evote";
-@import "stylesheets/decidim/elections/focus/focus";
+.election {
+  &__section {
+    &-title {
+      @apply flex gap-1 items-center;
 
-.card__icondata ul li:not(:first-child) strong,
-.card__block ul li:not(:first-child) strong{
-  font-size: 100%;
+      svg {
+        @apply w-6 h-6 text-tertiary fill-current;
+      }
+    }
+
+    &-desc {
+      @apply text-gray-2 my-6;
+    }
+  }
+
+  &__accordion {
+    @apply border-4 border-background rounded px-3 py-2;
+
+    &-trigger {
+      @apply flex justify-between items-center w-full font-bold text-secondary hover:underline focus:outline-none focus:underline;
+
+      > :last-child {
+        @apply flex-none;
+      }
+
+      svg {
+        @apply w-8 h-8 text-secondary fill-current first:block last:hidden;
+      }
+
+      &[role="button"][aria-expanded="true"] svg {
+        @apply first:hidden last:block;
+      }
+    }
+
+    &-panel {
+      @apply border-t border-gray-3 mt-4 pt-4 space-y-4;
+
+      ul {
+        @apply list-decimal px-4;
+      }
+    }
+  }
+
+  &__aside {
+    &-heading {
+      @apply uppercase font-semibold text-gray-2 text-sm;
+    }
+
+    &-link {
+      @apply flex items-center gap-2 text-sm;
+
+      svg {
+        @apply w-4 h-4 flex-none text-gray fill-current;
+      }
+
+      a {
+        @apply text-md text-secondary;
+      }
+    }
+  }
+}
+
+.election-log {
+  &__entry {
+    @apply flex flex-col gap-2 rounded border-4 border-background p-4 mb-8 last:mb-0 text-gray-2;
+  }
+
+  &__hash,
+  &__time {
+    @apply text-sm empty:hidden;
+  }
+
+  &__pre {
+    @apply bg-background p-2 rounded;
+  }
+}
+
+.election-question {
+  @apply block rounded p-4 border-4 border-background flex items-center text-lg text-gray-2 hover:border-tertiary focus:border-tertiary cursor-pointer;
+
+  &[aria-disabled="true"] {
+    @apply text-gray cursor-not-allowed hover:border-background focus:border-background;
+  }
+
+  &__counter {
+    @apply font-semibold text-black text-lg bg-tertiary inline-block;
+  }
+
+  /* overwrite default accordion styles */
+  [id^="step"][aria-hidden="true"] {
+    @apply hidden;
+  }
+
+  &__container {
+    @apply space-y-4 mb-8;
+  }
+
+  &__intro {
+    @apply py-8 border-t-2 border-background space-y-4;
+  }
+
+  &__description {
+    @apply text-gray-2 text-lg;
+  }
+
+  &__maxselections {
+    @apply flex items-center justify-between gap-2 text-gray-2;
+  }
+
+  &__answer {
+    @apply flex flex-col items-start gap-4 py-8 text-gray-2 border-t-2 border-background;
+
+    &-option {
+      @apply flex items-center justify-between w-full text-lg;
+    }
+  }
+
+  &__ballot {
+    @apply flex flex-col items-start gap-2 py-8 border-t-2 border-background text-lg text-gray-2;
+  }
+
+  &__modal {
+    &-explanation {
+      @apply space-y-4;
+    }
+
+    &-grid {
+      @apply grid grid-cols-2 gap-4;
+    }
+
+    img {
+      @apply aspect-video object-cover h-full w-full;
+    }
+
+    ul {
+      @apply list-disc;
+    }
+
+    li {
+      @apply ml-4;
+    }
+
+    a {
+      @apply text-secondary;
+    }
+  }
+}
+
+.election-trustee {
+  &__container {
+    @apply space-y-6 [&_p]:text-gray-2;
+  }
+
+  &__list {
+    @apply list-disc pl-4 text-gray-2;
+  }
+
+  &__table {
+    @apply text-left w-full border-2 border-background;
+
+    th,
+    td {
+      @apply px-4 py-2;
+    }
+
+    th {
+      @apply bg-background;
+    }
+
+    tr:nth-child(even) td {
+      @apply bg-gray-3;
+    }
+
+    a {
+      @apply text-secondary underline;
+    }
+
+    .step_status {
+      span {
+        @apply hidden;
+      }
+
+      &[data-step-status="pending"] .pending,
+      &[data-step-status="processing"] .processing,
+      &[data-step-status="completed"] .completed {
+        @apply block;
+      }
+    }
+  }
+
+  &__submit {
+    @apply p-4 border-4 border-background space-y-4 rounded;
+  }
+
+  &__buttons {
+    @apply flex items-center gap-4;
+
+    [hidden] {
+      @apply hidden;
+    }
+  }
 }

data/app/packs/stylesheets/decidim/votings/admin/votings/_ballot-styles.scss

@@ -1,12 +1,12 @@
-.ballot-style__question--checked{
+.ballot-style__question--checked {
   color: green;
 }
 
-.ballot-style__question--unchecked{
+.ballot-style__question--unchecked {
   color: red;
 }
 
-.ballot-style__question-header{
+.ballot-style__question-header {
   max-width: 100px;
   display: table-cell;
   overflow: hidden;

data/app/packs/stylesheets/decidim/votings/admin/votings/_monitoring-committee-polling-station-closures.scss

@@ -1,9 +1,9 @@
-.polling_station_closure_certificate_results{
+.polling_station_closure_certificate_results {
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
 
-  @media only screen and (max-width: 900px){
+  @media only screen and (max-width: 900px) {
     grid-template-columns: 1fr;
   }
 }

data/app/packs/stylesheets/decidim/votings/admin/votings/_results.scss

@@ -1,3 +1,3 @@
-.result.not_answer td:first-child{
+.result.not_answer td:first-child {
   font-style: italic;
 }

data/app/packs/stylesheets/decidim/votings/admin/votings.scss

@@ -1,3 +1,23 @@
 @import "stylesheets/decidim/votings/admin/votings/ballot-styles";
 @import "stylesheets/decidim/votings/admin/votings/monitoring-committee-polling-station-closures";
 @import "stylesheets/decidim/votings/admin/votings/results";
+@import "tom-select/dist/scss/tom-select";
+
+/* overwrite tom-select defaults */
+.ts {
+  &-control {
+    @apply border-gray text-md min-h-[40px];
+
+    input {
+      @apply font-normal text-black text-md;
+    }
+  }
+
+  &-dropdown {
+    @apply text-md text-gray-2 font-normal;
+
+    .active {
+      @apply text-white bg-secondary;
+    }
+  }
+}

data/app/packs/stylesheets/decidim/votings/votings.scss

@@ -1,2 +1,53 @@
-@import "stylesheets/decidim/votings/votings/polling-stations-cell";
-@import "stylesheets/decidim/votings/votings/voting-description-cell";
+.voting {
+  &__map {
+    @apply flex flex-col-reverse md:flex-row items-start gap-4 only:[&>*]:grow first:[&>*]:min-w-[40%];
+
+    & > :last-child:not(:only-child) {
+      @apply aspect-[4/3] w-full rounded overflow-hidden;
+    }
+
+    &-address {
+      @apply border-4 border-background rounded p-4 mt-4 first:mt-0;
+    }
+  }
+
+  &__polling-station {
+    @apply space-y-4 py-4;
+
+    & > * {
+      @apply flex items-center gap-2;
+    }
+
+    &__accordion {
+      @apply border-4 border-background rounded p-4;
+
+      &-trigger {
+        @apply flex justify-between items-center w-full text-secondary hover:underline;
+      }
+
+      &-arrow {
+        @apply w-8 h-8 text-secondary fill-current first-of-type:block last-of-type:hidden;
+      }
+
+      [role="button"][aria-expanded="true"] &-arrow {
+        @apply first-of-type:hidden last-of-type:block;
+      }
+
+      &-panel {
+        @apply border-t border-gray-3 mt-4 pt-4;
+
+        a {
+          @apply hover:underline;
+        }
+      }
+
+      & + & {
+        @apply mt-4;
+      }
+    }
+
+    & + & {
+      @apply mt-4 border-t border-background;
+    }
+  }
+}

data/app/permissions/decidim/votings/admin/permissions.rb

@@ -140,11 +140,11 @@ module Decidim
         end
 
         def user_monitoring_committee?
-          Decidim::Votings::MonitoringCommitteeMember.exists?(user: user)
+          Decidim::Votings::MonitoringCommitteeMember.exists?(user:)
         end
 
         def user_monitoring_committee_for_voting?
-          Decidim::Votings::MonitoringCommitteeMember.exists?(user: user, voting: voting)
+          Decidim::Votings::MonitoringCommitteeMember.exists?(user:, voting:)
         end
 
         def voting

data/app/presenters/decidim/elections/admin_log/election_presenter.rb

@@ -6,8 +6,8 @@ module Decidim
       # This class holds the logic to present a `Decidim::Election`
       # for the `AdminLog` log.
       #
-      # Usage should be automatic and you shouldn't need to call this class
-      # directly, but here's an example:
+      # Usage should be automatic and you should not need to call this class
+      # directly, but here is an example:
       #
       #    action_log = Decidim::ActionLog.last
       #    view_helpers # => this comes from the views