fixed fossasia#49 fossasia#46 ported everything to stores (fossasia#58)

* Add Home, Room Check-in * fixed codacy * clear netlify build * Update SearchAttendee.vue * Update ScanSearch * Fixed navabr * Update BaseTemplate.vue * Removed bottom navbar and updated dropdown menu * Minor fixes * Added checklist to printModal and simplified router * Name changes * Fixed passwordModal and removed password requirement for stats * Switched to template refs * minor fixes * Rearranged and renamed * Fix codacy issues * Changed casing * Fix fossasia#31 Added dropdown list that allows user to choose which details to show on search * Fixed format * Fix codacy * Minor fixes and renaming * Minor fixes and moved some code to inline * Fix fossasia#41 and codacy * fix codacy * Simplified code * fix fossasia#48 created standard button component and replaced some buttons * fix format * Converted all buttons to standard component * fixed format * fix codacy * Fix fossasia#40 standardised all p-6 except pages with scanners, optimised search function for mobile * changed prop name * removed activated classes * Minor UI fixes * fix fossasia#52 clicking print on search attendee now opens the print modal and logs name of card * fix fossasia#51 new layout for print modal * changed to margin * removed grow flex * minor fixes * fix fossasia#50 created success notification that shows on print * removed redundant code * fix margin of print modal * changed naming * switched to camel case, moved some functions to inline * minor changes * changed some refs to computed * fix fossasia#49 fossasia#46 ported everything to stores * fix codacy --------- Co-authored-by: cweitat <[email protected]> Co-authored-by: lizardon <[email protected]>
PiyushThapaa · Jul 26, 2023 · 49b0dd5 · 49b0dd5
1 parent f9ff2ea
commit 49b0dd5
Show file tree

Hide file tree

Showing 13 changed files with 298 additions and 264 deletions.
diff --git a/src/components/Modals/PasswordModal.vue b/src/components/Modals/PasswordModal.vue
@@ -1,32 +1,26 @@
 <script setup>
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
 import { EllipsisHorizontalIcon } from '@heroicons/vue/24/outline'
 import StandardButton from '@/components/Shared/StandardButton.vue'
+import { usePasswordModalStore } from '@/stores/passwordModal'
+
+const passwordModalStore = usePasswordModalStore()
 
 const props = defineProps({
- showNotification: Boolean
+ showPasswordModal: Boolean
 })
 
-const emit = defineEmits(['updateShowModal'])
-
-const open = ref(false)
-
-watch(
- () => props.showNotification,
- (value) => {
- open.value = value
- }
-)
+const emit = defineEmits(['hidePasswordModal'])
 
 const passwordField = ref('')
 const validPassword = ref(null)
 
 const checkPassword = (value) => {
  // check password here
- if (value === '1234') {
+ if (value === passwordModalStore.password) {
  validPassword.value = true
- emit('updateShowModal', false)
+ emit('hidePasswordModal', false)
  passwordField.value = ''
  // sign out
  } else {
@@ -37,8 +31,12 @@ const checkPassword = (value) => {
 </script>
 
 <template>
- <TransitionRoot as="template" :show="open" @click="$emit('updateShowModal', false)">
- <Dialog as="div" class="relative z-10">
+ <TransitionRoot
+ as="template"
+ :show="props.showPasswordModal"
+ @click="$emit('hidePasswordModal', false)"
+ >
+ <Dialog as="div" class="relative z-30">
  <TransitionChild
  as="template"
  enter="ease-out duration-300"

diff --git a/src/components/Modals/PrintModal.vue b/src/components/Modals/PrintModal.vue
@@ -4,6 +4,9 @@ import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } fro
 import { PrinterIcon } from '@heroicons/vue/24/outline'
 import { ExclamationCircleIcon } from '@heroicons/vue/24/outline'
 import StandardButton from '@/components/Shared/StandardButton.vue'
+import { usePrintModalStore } from '@/stores/printModal'
+
+const printModalStore = usePrintModalStore()
 
 const props = defineProps({
  showPrintModal: Boolean,
@@ -12,99 +15,36 @@ const props = defineProps({
 const emit = defineEmits(['hideModal', 'print'])
 
 const disableButton = ref(false)
-const selectedOptions = ref(['code', 'name', 'email', 'org', 'role'])
-
 const printingText = ref(false)
+
 const titleText = computed(() => props.validQRCode ? 'Select items to print' : 'Error!')
 const messageText = computed(() => !props.validQRCode ? 'Please scan a valid QR code' : '')
 
 const printDelay = (delayHideModal, delayPrint) => {
  setTimeout(() => emit('hideModal'), delayHideModal)
- setTimeout(() => emit('print'), delayPrint)
+ setTimeout(() => {
+ emit('print')
+ printModalStore.reset()
+ }, delayPrint)
 }
 
 const print = () => {
  if (props.validQRCode) {
- printOptions.forEach((element) => (element.disabled = true))
+ printModalStore.printOptions.forEach((element) => (element.disabled = true))
  printingText.value = true
  disableButton.value = true
- console.log(selectedOptions.value)
+ console.log(printModalStore.selectedOptions)
  printDelay(3000, 3200)
  } else {
  printDelay(0, 200)
  console.log('Rescan')
  }
 }
-
-const printOptions = [
- {
- id: 'code',
- name: 'code',
- label: 'QR Code',
- checked: ref(true),
- disabled: true
- },
- {
- id: 'name',
- name: 'name',
- label: 'Name',
- checked: ref(true),
- disabled: false
- },
- {
- id: 'email',
- name: 'email',
- label: 'Email',
- checked: ref(true),
- disabled: false
- },
- {
- id: 'org',
- name: 'org',
- label: 'Organisation',
- checked: ref(true),
- disabled: false
- },
- {
- id: 'role',
- name: 'role',
- label: 'Role',
- checked: ref(true),
- disabled: false
- }
-]
-
-const selectOption = (option) => {
- option.checked.value = !option.checked.value
- if (!option.checked.value) {
- selectedOptions.value.splice(selectedOptions.value.indexOf(option.id), 1)
- } else {
- selectedOptions.value.push(option.id)
- }
- console.log(selectedOptions.value)
-}
-
-const selectOrDeselectAll = () => {
- if (selectedOptions.value.length == 5) {
- printOptions.forEach((element) => {
- if (element.id !== 'code') {
- element.checked.value = false
- selectedOptions.value = ['code']
- }
- })
- } else {
- printOptions.forEach((element) => {
- element.checked.value = true
- selectedOptions.value = ['code', 'name', 'email', 'org', 'role']
- })
- }
- console.log(selectedOptions.value)
-}
 </script>
 
 <template>
  <TransitionRoot as="template" :show="props.showPrintModal">
- <Dialog as="div" class="relative z-10" @close="$emit('hideModal')">
+ <Dialog as="div" class="relative z-30" @close="$emit('hideModal')">
  <TransitionChild
  as="template"
  enter="ease-out duration-300"
@@ -159,17 +99,17 @@ const selectOrDeselectAll = () => {
  <fieldset v-if="props.validQRCode">
  <div class="space-y-5 mt-6 sm:mt-5 flex flex-col items-start">
  <div
- v-for="(printOption, index) in printOptions"
+ v-for="(printOption, index) in printModalStore.printOptions"
  :key="index"
  class="relative flex items-start px-12 sm:px-6 first:grayscale"
  >
  <div class="flex h-6 items-center">
  <input
- @click="selectOption(printOption)"
+ @click="printModalStore.selectOption(printOption)"
  :disabled="printOption.disabled"
  :id="printOption.id"
  :name="printOption.name"
- :checked="printOption.checked.value"
+ :checked="printOption.checked"
  type="checkbox"
  class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-600"
  />
@@ -182,9 +122,9 @@ const selectOrDeselectAll = () => {
  </div>
  <!--Select all button-->
  <StandardButton
- @click="selectOrDeselectAll"
+ @click="printModalStore.selectOrDeselectAll"
  :disabled="disableButton"
- :text="selectedOptions.length == 5 ? 'Deselect All' : 'Select All'"
+ :text="printModalStore.selectedOptions.length === 5 ? 'Deselect All' : 'Select All'"
  :class="[
  disableButton
  ? 'cursor-not-allowed opacity-20'

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -30,19 +30,19 @@ const navigation = [
 ]
 const userNavigation = [
  { name: 'Stats' },
- { name: 'Sign out', action: () => (showPasswordNotification.value = true) }
+ { name: 'Sign out', action: () => (showPasswordModal.value = true) }
 ]
 const showNavigation = ref(false)
 const eventName = ref('test event')
-const showPasswordNotification = ref(false)
+const showPasswordModal = ref(false)
 </script>
 
 <template>
  <PasswordModal
- :showNotification="showPasswordNotification"
- @update-show-modal="showPasswordNotification = $event"
+ :showPasswordModal="showPasswordModal"
+ @hidePasswordModal="showPasswordModal = $event"
  />
- <Disclosure as="header" class="bg-white shadow sticky top-0 z-10" v-slot="{ open }">
+ <Disclosure as="header" class="bg-white shadow sticky top-0 z-20" v-slot="{ open }">
  <div class="mx-auto max-w-7xl px-2 sm:px-4 lg:divide-y lg:divide-gray-200 lg:px-8">
  <div class="relative flex h-16 justify-between space-x-5">
  <div class="relative z-10 flex pl-2">
@@ -84,7 +84,7 @@ const showPasswordNotification = ref(false)
  leave-to-class="transform opacity-0 scale-95"
  >
  <MenuItems
- class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+ class="absolute right-0 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
  >
  <MenuItem v-for="item in userNavigation" :key="item.name">
  <button

diff --git a/src/components/Registration/Kiosk/ScannerCamera.vue b/src/components/Registration/Kiosk/ScannerCamera.vue
@@ -7,46 +7,25 @@ import { ArrowsRightLeftIcon } from '@heroicons/vue/20/solid'
 import PrintModal from '@/components/Modals/PrintModal.vue'
 import StandardButton from '@/components/Shared/StandardButton.vue'
 import SuccessNotification from '@/components/Shared/SuccessNotification.vue'
+import { useScannerStore } from '@/stores/scanner'
+
+const scannerStore = useScannerStore()
 
 // get scanner type from vue router params
 const route = useRoute()
 const scannerType = route.params.scannerType
 
 const camera = ref('front')
-const QRCodeValue = ref('')
 const showPrintModal = ref(false)
 const showPrintedNotification = ref(false)
 const componentKey = ref(0)
 
-const paintOutline = (detectedCodes, ctx) => {
- for (const detectedCode of detectedCodes) {
- QRCodeValue.value = detectedCode.rawValue
- const [firstPoint, ...otherPoints] = detectedCode.cornerPoints
- ctx.strokeStyle = 'red'
- ctx.strokeWidth = 5
-
- ctx.beginPath()
- ctx.moveTo(firstPoint.x, firstPoint.y)
- for (const { x, y } of otherPoints) {
- ctx.lineTo(x, y)
- }
- ctx.lineTo(firstPoint.x, firstPoint.y)
- ctx.closePath()
- ctx.stroke()
- }
-}
-
-const selected = {
- text: 'outline',
- value: paintOutline
-}
-
 const validQRCode = ref(true)
 
 const decode = () => {
  // check if QRCodeValue is valid and conforms to what is needed over here
  showPrintModal.value = true
- console.log(QRCodeValue)
+ console.log(scannerStore.QRCodeValue)
 }
 
 async function logErrors(promise) {
@@ -87,7 +66,7 @@ async function logErrors(promise) {
  <div>
  <qrcode-stream
  class="!aspect-square !h-auto max-w-lg grid-cols-1 align-middle justify-center items-center"
- :track="selected.value"
+ :track="scannerStore.selected.value"
  @init="logErrors"
  :camera="camera"
  @decode="decode"

diff --git a/src/components/Registration/Manual/ScanSearch.vue b/src/components/Registration/Manual/ScanSearch.vue
@@ -8,46 +8,25 @@ import PrintModal from '@/components/Modals/PrintModal.vue'
 import SearchAttendee from '@/components/Registration/Manual/SearchAttendee.vue'
 import StandardButton from '@/components/Shared/StandardButton.vue'
 import SuccessNotification from '@/components/Shared/SuccessNotification.vue'
+import { useScannerStore } from '@/stores/scanner'
+
+const scannerStore = useScannerStore()
 
 // get scanner type from vue router params
 const route = useRoute()
 const scannerType = route.params.scannerType
 
 const camera = ref('front')
-const QRCodeValue = ref('')
 const showPrintModal = ref(false)
 const showPrintedNotification = ref(false)
 const componentKey = ref(0)
 
-const paintOutline = (detectedCodes, ctx) => {
- for (const detectedCode of detectedCodes) {
- QRCodeValue.value = detectedCode.rawValue
- const [firstPoint, ...otherPoints] = detectedCode.cornerPoints
- ctx.strokeStyle = 'red'
- ctx.strokeWidth = 5
-
- ctx.beginPath()
- ctx.moveTo(firstPoint.x, firstPoint.y)
- for (const { x, y } of otherPoints) {
- ctx.lineTo(x, y)
- }
- ctx.lineTo(firstPoint.x, firstPoint.y)
- ctx.closePath()
- ctx.stroke()
- }
-}
-
-const selected = {
- text: 'outline',
- value: paintOutline
-}
-
 const validQRCode = ref(true)
 
 const decode = () => {
  // check if QRCodeValue is valid and conforms to what is needed over here
  showPrintModal.value = true
- console.log(QRCodeValue)
+ console.log(scannerStore.QRCodeValue)
 }
 
 async function logErrors(promise) {
@@ -92,7 +71,7 @@ async function logErrors(promise) {
  <div class="mx-auto w-fit">
  <qrcode-stream
  class="!aspect-square !h-auto max-w-lg grid-cols-1 align-middle justify-center items-center mt-2"
- :track="selected.value"
+ :track="scannerStore.selected.value"
  @init="logErrors"
  :camera="camera"
  @decode="decode"