Election setup wizard (Iteration 1)

[carolromero]

Ref: VOC-SEC-03

As an administrator, to create a new election I have to perform a number of actions (enter the basic information, define the questions and answers, upload the voter census) before setting it up in the Vocdoni API.

Currently to do this I have the actions separately and a dashboard that shows me the pending steps. To improve the flow of creating an election, I want to have a wizard that guides me through the whole process.

The wizard will have the following sections:

1. Basic information
   • Title
   • Description
   • Image
   • Video stream link
2. Questions
3. Census
4. Calendar and results
5. Publish

Mockups

Admin panel - Elections

Wizard

Tab #1 Basic info

Tab #2 Questions

Tab #3 Census page

Tab #4 Calendar and results

Tab #5 Publish

Dashboard

Acceptance criteria

• [ ] Given that I'm an administrator, When I start creating a new election, Then I am presented with a wizard that guides me through the following sections:

  Basic Information:

  • [ ] I can enter the title, description, image, and video stream link for the election.
  • [ ] I must provide all the required information before proceeding to the next section.

  Questions:

  • [ ] I can define the questions and answers for the election.
  • [ ] I can add multiple questions and provide answer options for each question.
  • [ ] I must provide at least one question before proceeding to the next section.

  Census:

  • [ ] I can upload the voter census for the election.
  • [ ] I have the option to upload a file or use the decidim permissions system.
  • [ ] I must upload the census or assign some permissions before proceeding to the next section.

  Calendar and Results:

  • [ ] I can set the election calendar, including the start and end dates.
  • [ ] I can specify when the results will be announced.
  • [ ] I must provide the election dates and results announcement date before proceeding to the next section.

  Publish:

  • [ ] I have the option to go back and edit any section if needed.
  • [ ] I can choose to publish the election once I'm satisfied with the information.

Additional Acceptance Criteria:

• [ ] Given that I'm an administrator, When I navigate to the dashboard, Then I see a clear indication of the progress and pending steps for each election being created.
• [ ] Given that I'm an administrator, When I edit an existing election in the wizard, Then I can modify any section and update the information accordingly.
• [ ] Given that I'm an administrator, When I cancel the creation of an election in the wizard, Then any entered information is discarded, and I am returned to the dashboard.
• [ ] Given that I'm an administrator, When I encounter any errors or missing information while progressing through the wizard, Then I receive clear and informative error messages indicating the required actions to proceed.

[carolromero]

@microstudi this is the building block for the progress-bar: https://get.foundation/building-blocks/blocks/progress-indicator.html and here's is the tweaked css in case it's useful:

css code

``` .progress-indicator { list-style: none; width: 75%; margin: 0 auto; padding: 0; display: table; table-layout: fixed; } .progress-indicator > li { position: relative; display: table-cell; text-align: center; font-size: 1.5em; } .progress-indicator > li span { position: absolute; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); font-size: 0.875rem; letter-spacing: 0.05px; } .progress-indicator > li::before { content: attr(data-step); display: block; margin: 0 auto; background: #ccc; width: .5em; height: .5em; text-align: center; margin-bottom: 0.25em; line-height: 1.5em; border-radius: 100%; position: relative; z-index: 1000; } .progress-indicator > li::after { content: ''; position: absolute; display: block; background: #ccc; width: 100%; height: 0.075em; top: 50%; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); left: 50%; margin-left: 1.5em\9; z-index: 0; } .progress-indicator > li:last-child:after { display: none; } .progress-indicator > li.is-complete::before { color: #fefefe; background: #57d685; } .progress-indicator > li.is-complete::after { color: #fefefe; background: #57d685; } ```