Skip to content

Instantly share code, notes, and snippets.

Avatar
🌍
Earth good hmm

Amenallah Hsoumi LazyFatArrow

🌍
Earth good hmm
View GitHub Profile
View CreatePollModal.vue
<template>
<div>
<b-button @click="isModalVisible = true">Create Poll</b-button>
<b-modal
v-model="isModalVisible"
@ok="$emit('createPoll', pollForm)"
title="Create a new poll"
centered
>
View Polls.vue
<template>
<-- ...html -->
</template>
<script>
import { POLLS } from '@/gql/queries/poll.queries'
import { VOTE_ON_POLL } from '@/gql/mutations/poll.mutations'
import { OPTION_VOTED } from '@/gql/subscriptions/poll.subscriptions'
import SinglePoll from '@/components/SinglePoll.vue'
View poll.subscriptions.js
import gql from 'graphql-tag'
export const OPTION_VOTED = gql`
subscription OptionVoted {
optionVoted {
id
votes
}
}
`
View SinglePoll.vue
<template>
<b-card :title="poll.title" :sub-title="poll.description">
<b-form-group>
<b-form-radio-group
@change="$emit('optionVote', $event)"
:id="`poll-options-${poll.id}`"
stacked
>
<!-- ...html -->
</template>
View Polls.vue
<template>
<!-- ... html -->
<SinglePoll
v-for="poll in polls"
@optionVote="handleOptionVote"
:key="`poll-${poll.id}`"
:poll="poll"
/>
<!-- ... more html -->
</template>
View Polls.vue
<template>
<b-container v-if="polls && polls.length" class="my-5">
<b-row>
<b-col>
<b-btn>Create Poll</b-btn>
</b-col>
</b-row>
<b-row class="mt-3">
<b-col>
<b-card-group columns>
View SinglePoll.vue
<template>
<b-card :title="poll.title" :sub-title="poll.description">
<b-form-group>
<b-form-radio-group
:id="`poll-options-${poll.id}`"
stacked
>
<b-form-radio
v-for="option in poll.options"
:key="`option-${option.id}`"
View poll.mutations.js
import gql from 'graphql-tag'
export const VOTE_ON_POLL = gql`
mutation VoteOnPoll($optionId: ID!) {
voteOnPoll(optionId: $optionId) {
id
}
}
`;
View Polls.vue
<template>
<b-container v-if="polls && polls.length" class="my-5">
<b-row>
<b-col>
<b-btn>Create Poll</b-btn>
</b-col>
</b-row>
<b-row class="mt-3">
<b-col>
<b-card-group columns>
View Polls.vue
<template>
</template>
<script>
import { POLLS } from '@/gql/queries/poll.queries'
export default {
apollo: {
polls: {
query: POLLS,
You can’t perform that action at this time.