update vote system

src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <div v-if="isAppInitialized" class="app__container">
     <app-navbar class="app__navbar" />
+
     <router-view v-slot="{ Component, route }">
       <transition
         :name="route.meta.transition as string || 'fade'"

src/common/VoteCard.vue

@@ -1,11 +1,19 @@
 <template>
   <div class="vote-item">
     <div v-for="field in payload" class="vote-card__payload" :key="field.lbl">
-      <p>{{ field.lbl }}</p>
-      <p>{{ field.value }}</p>
+      <p class="vote-item__lbl">
+        {{ field.lbl }}
+      </p>
+      <p class="vote-item__value">
+        {{ field.value }}
+      </p>
     </div>
 
-    <app-button :text="$t('vote-card.select-btn-txt')" @click="select" />
+    <app-button
+      class="vote-card__btn"
+      :text="$t('vote-card.select-btn-txt')"
+      @click="select"
+    />
   </div>
 </template>
 
@@ -49,10 +57,23 @@ const select = () => {
 .vote-item {
   padding: toRem(16);
   display: grid;
-  border-radius: solid toRem(1) var(--background-primary-main);
+  border-radius: toRem(16);
+  border: solid toRem(3) var(--background-primary-dark);
 }
 
 .vote-card__payload {
   display: grid;
 }
+
+.vote-card__btn {
+  margin: toRem(16) auto;
+}
+
+.vote-item__lbl {
+  color: var(--text-primary-light);
+}
+
+.vote-item__value {
+  color: var(--text-secondary-invert-dark);
+}
 </style>

src/common/modals/QrAuthModal.vue

@@ -14,16 +14,27 @@ import { ref } from 'vue'
 const props = defineProps<{
   isShown: boolean
   nonce: string
+  options: { votingOption: number; rank: number }[]
+  votingId: string
 }>()
 
 const qr = ref('')
-const genQr = async (text: string) => {
-  return QRCode.toDataURL(text)
-}
+const genQr = async (text: string) =>
+  QRCode.toDataURL(text, {
+    color: {
+      dark: '#B388EB',
+      light: '#FFD2F9',
+    },
+  })
 
 const init = async () => {
-  console.log(props.nonce)
-  qr.value = await genQr(JSON.stringify({ nonce: props.nonce, url: '' }))
+  qr.value = await genQr(
+    JSON.stringify({
+      session_uuid: props.nonce,
+      voting_id: props.votingId,
+      options: props.options,
+    }),
+  )
 }
 
 init()
@@ -36,10 +47,8 @@ init()
   height: 100%;
   max-width: toRem(500);
   max-height: toRem(500);
-  background: var(--background-primary-main);
+  background: var(--background-primary-dark);
   border-radius: toRem(24);
-
-  // padding: 3%; for mobile
 }
 
 .qr-auth-modal__img {

src/helpers/vote.helpers.ts

@@ -1,5 +1,5 @@
 import { api } from '@/api'
-import { VotePayload, VotingListResponse, VotingResponse } from '@/types'
+import { VotingListResponse, VotingResponse } from '@/types'
 import { JsonApiBodyBuilder } from '@distributedlab/jac'
 
 export const getVotingList = async () =>
@@ -16,7 +16,7 @@ export const postVote = async (
     .setData({
       type: 'revoke-admin',
       attributes: {
-        data: vote,
+        votes: vote.map(i => ({ voting_option: i.votingOption })),
       },
     })
     .build()

src/localization/resources/en.json

@@ -30,6 +30,12 @@
   "vote-card": {
     "name-lbl": "Name",
     "created-at-lbl": "Created at",
-    "active-until-lbl": "Active until"
+    "active-until-lbl": "Active until",
+    "first-place": "First choice",
+    "second-place": "Second choice",
+    "third-place": "Third choice"
+  },
+  "home": {
+    "title": "Voting platform"
   }
 }

src/pages/Home.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="home-page">
-    <template v-if="votings.length">
+    <h1 class="home-page__title">
+      {{ $t('home.title') }}
+    </h1>
+
+    <div class="home-page__list" v-if="votings.length">
       <vote-card-list :payload="votings" @select="select" />
-    </template>
+    </div>
   </div>
 </template>
 
@@ -17,7 +21,6 @@ import { ROUTE_NAMES } from '@/enums'
 const votings = ref<Voting[]>([])
 
 const select = (vote: Voting) => {
-  console.log(vote)
   router.push({
     name: ROUTE_NAMES.vote,
     params: { id: vote.id },
@@ -28,10 +31,22 @@ const init = async () => {
   const { data } = await getVotingList()
 
   votings.value = data
-  console.log(votings.value)
 }
 
 init()
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.home-page {
+  margin: 0 auto;
+}
+
+.home-page__title {
+  text-align: center;
+  margin-bottom: toRem(16);
+}
+
+.home-page__list {
+  margin: auto;
+}
+</style>

src/pages/Vote.vue

@@ -12,14 +12,24 @@
         </div>
       </div>
 
-      <div class="vote__list">
-        <template v-for="option in selectedList" :key="option.id">
-          <optionitem
-            class="vote__option"
-            :item="option"
-            @toggle-state="toggleItem"
-          />
-        </template>
+      <div class="vote__list--wrp">
+        <div class="vote__list--selected">
+          <template v-for="place in laybels" :key="place">
+            <p class="vote__selected-item">
+              {{ place }}
+            </p>
+          </template>
+        </div>
+
+        <div class="vote__list--selected">
+          <template v-for="option in selectedList" :key="option.id">
+            <optionitem
+              class="vote__option vote__selected-item"
+              :item="option"
+              @toggle-state="toggleItem"
+            />
+          </template>
+        </div>
       </div>
     </div>
 
@@ -46,16 +56,20 @@
       @click="vote"
     />
 
-    <qr-auth-modal v-model:is-shown="isModalShown" :nonce="nonce" />
+    <qr-auth-modal
+      v-model:is-shown="isModalShown"
+      :nonce="nonce"
+      :voting-id="votingInfo?.options[0]?.attributes.votingId ?? ''"
+      :options="voteOptions"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { VoteOptions, Voting } from '@/types'
 import { AppButton, Optionitem, QrAuthModal } from '@/common'
-import { auth, ErrorHandler, getVotingById, postVote, sleep } from '@/helpers'
-import { poseidon } from '@big-whale-labs/poseidon'
+import { auth, ErrorHandler, getVotingById, sleep } from '@/helpers'
 import { useI18n } from 'vue-i18n'
 import { v4 as uuidv4 } from 'uuid'
 
@@ -66,17 +80,18 @@ const props = defineProps<{
 const { t } = useI18n()
 
 const votingInfo = ref<Voting | null>(null)
+
 const items = ref<
   {
     item: VoteOptions
     isSelected: boolean
   }[]
 >([])
 
+const voteOptions = ref<{ votingOption: number; rank: number }[]>([])
 const isModalShown = ref(false)
 const selectedList = ref<VoteOptions[]>([])
-const nonce = ref('2a7dc999-5967-415e-ab49-50e32ec6ec15')
-
+const nonce = ref('')
 const payload = computed(() => [
   {
     lbl: t('vote-card.name-lbl'),
@@ -92,6 +107,12 @@ const payload = computed(() => [
   },
 ])
 
+const laybels = computed(() => [
+  t('vote-card.first-place'),
+  t('vote-card.second-place'),
+  t('vote-card.third-place'),
+])
+
 const isSelectedAll = computed(
   () => items.value.length === selectedList.value.length,
 )
@@ -115,19 +136,12 @@ const vote = async () => {
   isModalShown.value = true
 
   try {
-    const data = selectedList.value.map(vote => ({
-      votingOption: vote.attributes.name,
+    voteOptions.value = selectedList.value.map((vote, id) => ({
+      votingOption: vote.attributes.id,
+      rank: id + 1,
     }))
 
-    const ids = selectedList.value.map(item => item.attributes.id)
-
-    const hash = poseidon(ids)
-    const authResp = await validate()
-
-    await postVote(
-      data,
-      'Bearer ' + authResp?.data?.accessToken?.token ?? 'test',
-    )
+    await validate()
   } catch (error) {
     ErrorHandler.process(error)
   }
@@ -151,7 +165,7 @@ const init = async () => {
     isSelected: false,
   }))
 
-  // nonce.value = uuidv4()
+  nonce.value = uuidv4()
 
   items.value = list
 }
@@ -160,6 +174,10 @@ init()
 </script>
 
 <style scoped lang="scss">
+.vote {
+  min-width: toRem(1280);
+}
+
 .vote__list {
   display: grid;
   grid-template-columns: repeat(4, minmax(toRem(100), 1fr));
@@ -168,6 +186,26 @@ init()
   background: var(--background-primary-dark);
   padding: toRem(32);
   border-radius: toRem(16);
+
+  &--selected {
+    margin: toRem(25) 0;
+    background: var(--background-primary-dark);
+    padding: toRem(32);
+    border-radius: toRem(16);
+    display: grid;
+    grid-template-rows: repeat(3, 1fr);
+    gap: toRem(30);
+  }
+}
+
+.vote__selected-item {
+  min-height: toRem(50);
+}
+
+.vote__list--wrp {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  gap: toRem(50);
 }
 
 .vote__option {

src/styles/_app-colors.scss

@@ -58,8 +58,8 @@ $text-primary-invert-main: #fbfcff;
 $text-primary-invert-dark: #fbfbff;
 
 $text-secondary-invert-light: rgba(#fffbfe, 0.5);
-$text-secondary-invert-main: rgba(#fffbfe, 0.5);
-$text-secondary-invert-dark: rgba(#fffbfe, 0.5);
+$text-secondary-invert-main: rgba(#A587DA, 0.5);
+$text-secondary-invert-dark: rgba(#A56FFF, 0.5);
 
 /* border colors */
 

src/styles/global.scss

@@ -97,23 +97,23 @@ h5 {
 }
 
 h1 {
-  font-size: toRem(24);
+  font-size: toRem(40);
 }
 
 h2 {
-  font-size: toRem(24);
+  font-size: toRem(36);
 }
 
 h3 {
-  font-size: toRem(18);
+  font-size: toRem(30);
 }
 
 h4 {
-  font-size: toRem(16);
+  font-size: toRem(24);
 }
 
 h5 {
-  font-size: toRem(14);
+  font-size: toRem(18);
 }
 
 a {

src/styles/variables.scss

@@ -75,7 +75,7 @@
 
   /* App variables */
   --app-txt: #{$text-primary-main};
-  --app-font-family: 'Roboto', 'Arial', sans-serif;
+  --app-font-family: 'Tauri';
   --app-padding-right: #{toRem(64)};
   --app-padding-left: #{toRem(64)};
 

src/types/api.types.ts

@@ -1,5 +1,4 @@
-import { VoteOptions, Voting } from '@/types'
-import { JsonApiRecord } from '@distributedlab/jac'
+import { Voting } from '@/types'
 
 export type JsonApiRelationship = Record<string, unknown>
 export type Uuid = string