-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #66 from katherineqian/nebula
Add functionality to create a poll.
- Loading branch information
Showing
14 changed files
with
252 additions
and
98 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| <template> | ||
| <p class="text-gray-600 mb-4"> | ||
| Submit responses and vote on them anonymously. When a response gets enough votes, voters for that response reveal their | ||
| names. | ||
| </p> | ||
| <div class="mb-4"> | ||
| <span class="font-semibold">Poll title:</span> | ||
| <div> | ||
| <input v-model="title" class="border rounded border-gray-500 w-full h-12 px-3" type="text" /> | ||
| </div> | ||
| </div> | ||
| <div class="mb-4"> | ||
| <span class="font-semibold">Description:</span> | ||
| <div> | ||
| <textarea v-model="description" rows="2" class="h-full border rounded border-gray-500 w-full p-3" type="text"> | ||
| </textarea> | ||
| </div> | ||
| </div> | ||
| <div class="mb-4"> | ||
| <p class="font-semibold">End date:</p> | ||
|
|
||
| <!-- Date picker --> | ||
| <div class="flex max-w-sm border rounded border-gray-500 w-full"> | ||
| <input v-model="expirationDate" class="rounded w-full p-3" type="date" :min="today" /> | ||
| </div> | ||
| </div> | ||
| <!-- Error message --> | ||
| <div class="text-harvard-red mt-2">{{ message }}</div> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { ref } from '@vue/reactivity' | ||
| import useStore from '../../composables/global/useStore' | ||
| import { useRoute } from 'vue-router' | ||
| const { createPoll } = useStore | ||
| const title = ref('') | ||
| const description = ref('') | ||
| const message = ref('') | ||
| const route = useRoute() | ||
| const today = new Date().toISOString().split('T')[0] | ||
| const date = new Date() | ||
| date.setDate(date.getDate() + 5) | ||
| const defaultDate = date.toISOString().split('T')[0] | ||
| const expirationDate = ref(defaultDate) | ||
| defineExpose({ | ||
| processCreate | ||
| }) | ||
| const emit = defineEmits(['createSuccess']) | ||
| function processCreate() { | ||
| if (!hasTitle()) { | ||
| message.value = 'A title is required.' | ||
| return | ||
| } | ||
| const expirationDateValue = new Date(expirationDate.value) | ||
| createPoll({ | ||
| title: title.value, | ||
| description: description.value, | ||
| expirationDate: expirationDateValue, | ||
| topicId: route.params.channelId | ||
| }) | ||
| .then((x) => emit('createSuccess')) | ||
| .catch((err) => (message.value = err.response.data.message)) | ||
| } | ||
| function hasTitle() { | ||
| return title.value.trim().length > 0 | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| <template> | ||
| <button | ||
| v-if="show" | ||
| class="flex gap-2 justify-start items-center bg-harvard-red text-white p-2 rounded-md shadow-md" | ||
| @click="openModal" | ||
| > | ||
| <PlusCircleIcon class="w-5 h-5" /> new space | ||
| </button> | ||
| <ThemedModal :is-open="isModalOpen" @close-modal="closeModal"> | ||
| <template #title>New space</template> | ||
| <!-- Space type tabs --> | ||
| <ul class="flex flex-wrap text-center text-gray-500 border-b border-gray-200"> | ||
| <li> | ||
| <button | ||
| class="flex gap-1 px-4 py-2 rounded-t-lg" | ||
| :class="tab === 1 ? 'text-harvard-red bg-gray-100 font-bold' : ''" | ||
| @click="openTab(1)" | ||
| > | ||
| <HashtagIcon class="w-5 h-5" /> | ||
| Thread | ||
| </button> | ||
| </li> | ||
| <li> | ||
| <button | ||
| class="flex gap-1 px-4 py-2 rounded-t-lg" | ||
| :class="tab === 2 ? 'text-harvard-red bg-gray-100 font-bold' : ''" | ||
| @click="openTab(2)" | ||
| > | ||
| <UserGroupIcon class="w-5 h-5" /> | ||
| Threshold Poll | ||
| </button> | ||
| </li> | ||
| </ul> | ||
| <!-- Tab content --> | ||
| <div v-show="tab === 1" class="py-3 mb-5"> | ||
| <CreateThread ref="createThreadRef" @create-success="closeModal" /> | ||
| </div> | ||
| <div v-show="tab === 2" class="py-3 mb-5"> | ||
| <CreatePoll ref="createPollRef" @create-success="closeModal" /> | ||
| </div> | ||
| <!-- Action buttons --> | ||
| <template #actions> | ||
| <button | ||
| class="rounded bg-gray-300 px-2 py-2 font-semibold shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600" | ||
| @click="closeModal" | ||
| > | ||
| Cancel | ||
| </button> | ||
| <button | ||
| class="rounded bg-gray-600 px-2 py-2 font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600" | ||
| @click="onSubmit" | ||
| > | ||
| Create | ||
| </button> | ||
| </template> | ||
| </ThemedModal> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { ref } from '@vue/reactivity' | ||
| import ThemedModal from './ThemedModal.vue' | ||
| import CreateThread from '../Threads/CreateThread.vue' | ||
| import CreatePoll from '../Polls/CreatePoll.vue' | ||
| import { PlusCircleIcon, HashtagIcon, UserGroupIcon } from '@heroicons/vue/outline' | ||
| defineProps({ | ||
| show: { | ||
| type: Boolean, | ||
| required: true | ||
| } | ||
| }) | ||
| const isModalOpen = ref(false) | ||
| const tab = ref(1) | ||
| const createThreadRef = ref(null) | ||
| const createPollRef = ref(null) | ||
| function closeModal() { | ||
| document.querySelector('body').classList.remove('modal-open') | ||
| isModalOpen.value = false | ||
| } | ||
| function openModal() { | ||
| window.scrollTo({ top: 0, left: 0 }) | ||
| isModalOpen.value = true | ||
| document.querySelector('body').classList.add('modal-open') | ||
| } | ||
| function openTab(tabNumber) { | ||
| tab.value = tabNumber | ||
| } | ||
| function onSubmit() { | ||
| if (tab.value === 1) { | ||
| createThreadRef.value.processCreate() | ||
| } else if (tab.value === 2) { | ||
| createPollRef.value.processCreate() | ||
| } | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.