fix: fixed conflict

frontend/src/components/CarouselComponent.vue

@@ -1,7 +1,8 @@
 <template>
   <Carousel v-bind="settings" :breakpoints="breakpoints">
     <Slide v-for="election in elections" :key="String(election.id)">
-      <ElectionCard :election="election" :time="time"/>
+      <ElectionCard :election="election" :time="time"
+                    @openModal="(id: number, name: string) => $emit('modalRaised', id, name)"/>
     </Slide>
     <template #pagination="{ pagesCount, currentPage, setCurrentPage }">
       <div class="pagination">
@@ -32,6 +33,10 @@ defineProps<{
   time: number,
 }>()
 
+defineEmits<{
+  modalRaised: [electionId: number, electionName: string]
+}>()
+
 const settings = {
   itemsToShow: 1,
   snapAlign: 'center',

frontend/src/components/ElectionCardComponent.vue

@@ -13,7 +13,8 @@
       </ul>
       <div class="d-flex flex-column links">
         <a :href="`/elections/${election.id}`">See details</a>
-        <a :href="`/vote/${election.id}`">Cast a vote</a>
+        <a v-if="isOpen(election) && authStore.userRole !== Role.Admin" :href="`/vote/${election.id}`">Cast a vote</a>
+        <a v-if="isOpen(election) && authStore.userRole !== Role.Admin" href="#" @click="$emit('openModal', election.id, election.goal)">Get code</a>
       </div>
     </div>
   </div>
@@ -22,14 +23,21 @@
 <script setup lang="ts">
 
 import type {Voting} from "@/stores/voting";
-import {ref} from "vue";
-import {formatDate, formatTime, getStatus} from "@/commons/utils";
+import {ref, defineEmits} from "vue";
+import {formatDate, formatTime, getStatus, Role} from "@/commons/utils";
+import {useAuthStore} from "@/stores/auth";
 
 const props = defineProps<{
   election: Voting,
   time: number,
 }>()
 
+defineEmits<{
+  openModal: [electionId: number, electionName: string]
+}>();
+
+const authStore = useAuthStore();
+
 const now = ref(props.time);
 
 function isOpen(election: Voting): boolean {

frontend/src/components/ElectionComponent.vue

@@ -6,15 +6,15 @@
       </div>
       <div class="d-flex justify-content-center flex-wrap">
         <a :href="`/elections/${election.id}`" class="useful-link">Details</a>
-        <a :href="`/vote/${election.id}`" class="useful-link" v-if="isOpen(election)">Vote</a>
+        <a :href="`/vote/${election.id}`" class="useful-link" v-if="isOpen(election) && authStore.userRole !== Role.Admin">Vote</a>
+        <a class="useful-link" v-if="isOpen(election) && authStore.userRole !== Role.Admin" @click="$emit('openModal', election.id, election.goal)" href="#">Get code</a>
       </div>
     </div>
     <div class="col date my-auto" aria-label="start date">
       <span class="first">
         <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-hourglass-top" viewBox="0 0 16 16">
           <path d="M2 14.5a.5.5 0 0 0 .5.5h11a.5.5 0 1 0 0-1h-1v-1a4.5 4.5 0 0 0-2.557-4.06c-.29-.139-.443-.377-.443-.59v-.7c0-.213.154-.451.443-.59A4.5 4.5 0 0 0 12.5 3V2h1a.5.5 0 0 0 0-1h-11a.5.5 0 0 0 0 1h1v1a4.5 4.5 0 0 0 2.557 4.06c.29.139.443.377.443.59v.7c0 .213-.154.451-.443.59A4.5 4.5 0 0 0 3.5 13v1h-1a.5.5 0 0 0-.5.5m2.5-.5v-1a3.5 3.5 0 0 1 1.989-3.158c.533-.256 1.011-.79 1.011-1.491v-.702s.18.101.5.101.5-.1.5-.1v.7c0 .701.478 1.236 1.011 1.492A3.5 3.5 0 0 1 11.5 13v1z"/>
-        </svg> 
-        {{formatDate(election.start).substring(0, 2)}}
+        </svg> {{formatDate(election.start).substring(0, 2)}}
       </span>
       <br/>
       <span>{{capitalizeFirstLetter(formatDate(election.start, 'numeric').substring(3, 11))}}</span>
@@ -25,7 +25,7 @@
       <span class="first date">
         <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-hourglass-bottom" viewBox="0 0 16 16">
           <path d="M2 1.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1-.5-.5m2.5.5v1a3.5 3.5 0 0 0 1.989 3.158c.533.256 1.011.791 1.011 1.491v.702s.18.149.5.149.5-.15.5-.15v-.7c0-.701.478-1.236 1.011-1.492A3.5 3.5 0 0 0 11.5 3V2z"/>
-        </svg> {{ ("0" + election.end.getUTCDate()).slice(-2) }}
+        </svg> {{formatDate(election.end).substring(0, 2)}}
       </span>
       <br/>
       <span>{{capitalizeFirstLetter(formatDate(election.end, 'numeric').substring(3, 11))}}</span>
@@ -37,17 +37,25 @@
 
 <script setup lang="ts">
 import type {Voting} from "@/stores/voting";
-import {capitalizeFirstLetter, formatDate, formatTime, getStatus} from "@/commons/utils";
-import {ref} from "vue";
+import {capitalizeFirstLetter, formatDate, formatTime, getStatus, Role} from "@/commons/utils";
+import {defineEmits, ref} from "vue";
+import {useAuthStore} from "@/stores/auth";
+
+const authStore = useAuthStore();
 
 function isOpen(election: Voting): boolean {
   return getStatus(election, now.value) === 'open';
 }
+
 const props = defineProps<{
   election: Voting,
   time: number,
 }>()
 
+defineEmits<{
+  openModal: [electionId: number, electionName: string]
+}>();
+
 const now = ref(props.time);
 </script>
 

frontend/src/router/index.ts

@@ -67,7 +67,6 @@ const router = createRouter({
     {
       path: '/elections',
       name: 'elections',
-      props: route => ({ qualifier: route.query.qualifier }),
       component: ElectionsView,
       meta: {
         allowed: [Role.User, Role.Admin]

frontend/src/views/DashboardView.vue

@@ -5,27 +5,48 @@
     <h2><a :href="`/elections?qualifier=${qualifier}`" class="election-link">{{ capitalizeFirstLetter(qualifier) }} Elections</a></h2>
     <hr v-if="getData(qualifier).length > 0"/>
     <Carousel :elections="sortElectionsByDate(getData(qualifier))"
-              :time="now"/>
+              :time="now"
+              @modalRaised="(id: number, name: string) => openModal(id, name)"
+    />
+    <RequestCodeModal :electionName="electionName" :electionId="electionId" :id="modalId" />
   </div>
 </template>
 
 <script setup lang="ts">
 import Carousel from "@/components/CarouselComponent.vue";
 import PageTitle from "@/components/PageTitleComponent.vue";
 import Breadcrumb from "@/components/BreadcrumbComponent.vue";
-import {computed, onMounted, reactive, ref, type Ref} from "vue";
+import {computed, nextTick, onMounted, reactive, ref, type Ref} from "vue";
 import router from "@/router";
 import {useVotingStore, type Voting} from "@/stores/voting";
 import {capitalizeFirstLetter, getStatus} from "@/commons/utils";
+import * as bootstrap from "bootstrap";
+import RequestCodeModal from "@/components/vote/RequestCodeModal.vue";
 
 const votingStore = useVotingStore();
 const data: Ref<Voting[] | null> = ref(null);
 
+const modalId = ref("modal_vote")
+const modal = ref()
+const electionName = ref("")
+const electionId = ref("")
+
 onMounted(async () => {
   await getVotings();
   scheduleUpdateNow();
+  await nextTick();
+  modal.value = new bootstrap.Modal(`#${modalId.value}`, {})
 });
 
+function openModal(id: number, name: string) {
+  electionName.value = name
+  electionId.value = String(id)
+  console.log(modal.value)
+  if (modal.value) {
+    modal.value.show()
+  }
+}
+
 const now = ref(new Date().getTime());
 
 function scheduleUpdateNow() {

frontend/src/views/ElectionsView.vue

@@ -3,20 +3,37 @@
 import Breadcrumb from '@/components/BreadcrumbComponent.vue'
 import PageTitle from '@/components/PageTitleComponent.vue'
 import {useRoute} from "vue-router";
-import {computed, onMounted, reactive, type Ref, ref} from 'vue'
+import {computed, nextTick, onMounted, reactive, type Ref, ref} from 'vue'
 import ElectionComponent from "@/components/ElectionComponent.vue";
 import {useVotingStore, type Voting} from "@/stores/voting";
 import router from "@/router";
 import {capitalizeFirstLetter, getStatus} from "@/commons/utils";
+import * as bootstrap from "bootstrap";
+import RequestCodeModal from "@/components/vote/RequestCodeModal.vue";
 
 const votingStore = useVotingStore();
 const data: Ref<Voting[] | null> = ref(null);
 
+const modalId = ref("modal_vote_view")
+const modal = ref()
+const electionName = ref("")
+const electionId = ref("")
+
 onMounted(async () => {
   await getVotings();
   scheduleUpdateNow();
+  await nextTick();
+  modal.value = new bootstrap.Modal(`#${modalId.value}`, {});
 })
 
+function openModal(id: number, name: string) {
+  electionName.value = name
+  electionId.value = String(id)
+  if (modal.value) {
+    modal.value.show()
+  }
+}
+
 const now = ref(new Date().getTime());
 
 function scheduleUpdateNow() {
@@ -38,11 +55,10 @@ async function getVotings() {
 }
 // read meta parameters from the router
 const route = useRoute();
-const qualifier: string = route.query.qualifier as string;
 const picked = ref('all');
 
-if (qualifier && ['all', 'open', 'closed', 'soon'].includes(qualifier)) {
-  picked.value = qualifier;
+if (route.query.qualifier && ['all', 'open', 'closed', 'soon'].includes(route.query.qualifier as string)) {
+  picked.value = route.query.qualifier as string;
 }
 
 function sortElectionsByDate(elections: Voting[], prop: keyof Voting = 'start'): Voting[] {
@@ -148,7 +164,10 @@ function resetPage() {
     <div v-if="displayedElections.length > 0">
       <div v-for="election in displayedElections" :key="String(election.id)" class="row election">
         <ElectionComponent :election="election"
-                            :time="now"/>
+                            :time="now"
+                            @openModal="(id: number, name: string) => openModal(id, name)"
+        />
+        <RequestCodeModal :electionName="electionName" :electionId="electionId" :id="modalId" />
       </div>
       <div class="pagination-buttons" v-if="totalPages>2">
         <button @click="prevPage" class="btn btn-primary" :disabled="currentPage === 1">&lt;</button>