fix: solve modal problem

Author: giovaz94

frontend/src/components/ElectionComponent.vue

@@ -53,7 +53,7 @@ const props = defineProps<{
 }>()
 
 defineEmits<{
-  openModal: [electionId: number, electionName: string]
+  openModal: [electionId: string, electionName: string]
 }>();
 
 const now = ref(props.time);

frontend/src/components/vote/RequestCodeModal.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, onBeforeMount } from 'vue'
-import { useAuthStore } from '@/stores/auth'
 import axios from 'axios'
 import { apiEndpoints } from "@/commons/globals";
 
@@ -14,18 +13,11 @@ const requestError = ref(false)
 const codeRequest = ref(false)
 const submit = ref(false)
 const code = ref("")
-let userInfo: any = {}
 
-onBeforeMount(async () => {
-  userInfo = await useAuthStore().getUserInfo();
-});
-
-function sendCodeRequest() {
+function sendCodeRequest(id: string) {
   submit.value = true
-  axios.post(`${apiEndpoints.API_SERVER}/code/generate`, {
-    userId: userInfo.id,
-    electionId: electionId
-  }).then((response) => {
+  axios.post(`${apiEndpoints.API_SERVER}/code/generate`, { electionId: id })
+  .then((response) => {
     code.value = response.data.data
     codeRequest.value = true
     requestError.value = false
@@ -39,7 +31,6 @@ function sendCodeRequest() {
   });
 }
 
-
 </script>
 
 <template>
@@ -63,7 +54,7 @@ function sendCodeRequest() {
               <p>Already have a code? <a href="#toElectionPage">Vote now</a></p>
             </div>
             <div class="row mb-2">
-              <form @submit.prevent="sendCodeRequest">
+              <form @submit.prevent="sendCodeRequest(electionId)">
                 <div class="input-group mb-3 has-validation">
                   <input type="text" class="form-control" aria-label="Code output" v-model="code" readonly>
                   <div class="input-group-append">

frontend/src/views/ElectionsView.vue

@@ -18,6 +18,7 @@ const modalId = ref("modal_vote_view")
 const modal = ref()
 const electionName = ref("")
 const electionId = ref("")
+const refKey = ref(0)
 
 onMounted(async () => {
   await getVotings();
@@ -26,9 +27,9 @@ onMounted(async () => {
   modal.value = new bootstrap.Modal(`#${modalId.value}`, {});
 })
 
-function openModal(id: number, name: string) {
+function openModal(id: string, name: string) {
   electionName.value = name
-  electionId.value = String(id)
+  electionId.value = id
   if (modal.value) {
     modal.value.show()
   }
@@ -163,13 +164,11 @@ function resetPage() {
   <div class="container-sm col-12 col-md-8 text-center">
     <div v-if="displayedElections.length > 0">
       <div v-for="election in displayedElections" :key="String(election.id)" class="row election">
-        <ElectionComponent :election="election"
-                            :time="now"
-                            @openModal="(id: number, name: string) => openModal(id, name)"
+        <ElectionComponent :election="election" :time="now"  @openModal="(id: string, name: string) => openModal(id, name)"
         />
-        <RequestCodeModal :electionName="electionName" :electionId="electionId" :id="modalId" />
+        <RequestCodeModal :electionName="electionName" :electionId="electionId" :id="modalId"/>
       </div>
-      <div class="pagination-buttons" v-if="totalPages>2">
+      <div class="pagination-buttons" v-if="totalPages>1">
         <button @click="prevPage" class="btn btn-primary" :disabled="currentPage === 1">&lt;</button>
         <button @click="nextPage" class="btn btn-primary" :disabled="currentPage === totalPages">&gt;</button>
         <br/>