Fix fossasia#48 created standard button component and replace some bu…

…ttons (fossasia#54) * 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 * changed prop name * removed activated classes --------- Co-authored-by: cweitat <[email protected]> Co-authored-by: lizardon <[email protected]>
PiyushThapaa · Jul 19, 2023 · 18d05cf · 18d05cf
1 parent 2ba7eb6
commit 18d05cf
Show file tree

Hide file tree

Showing 11 changed files with 98 additions and 73 deletions.
diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useLoadingStore } from '@/stores/loading'
 import { useAuthStore } from '@/stores/auth'
+import StandardButton from '@/components/Shared/StandardButton.vue'
 
 // form fields
 const email = ref('')
@@ -86,12 +87,11 @@ async function submitLogin() {
  </div>
 
  <div>
- <button
+ <StandardButton
  type="submit"
- class="flex w-full justify-center rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
- >
- Login
- </button>
+ text="Login"
+ class="w-full justify-center bg-blue-600 text-white hover:bg-blue-500"
+ />
  </div>
 
  <div v-if="showError">

diff --git a/src/components/Modals/PasswordModal.vue b/src/components/Modals/PasswordModal.vue
@@ -2,6 +2,7 @@
 import { ref, watch } 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'
 
 const props = defineProps({
  showNotification: Boolean
@@ -95,13 +96,11 @@ const checkPassword = (value) => {
  </div>
  </div>
  <div class="mt-5 sm:mt-6">
- <button
- type="button"
- class="inline-flex w-full justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+ <StandardButton
+ text="Sign Out"
  @click="checkPassword(passwordField)"
- >
- Sign Out
- </button>
+ class="bg-blue-600 text-white hover:bg-blue-500 w-full justify-center"
+ />
  </div>
  </DialogPanel>
  </TransitionChild>

diff --git a/src/components/Modals/PrintModal.vue b/src/components/Modals/PrintModal.vue
@@ -3,6 +3,7 @@ import { onMounted, ref, watch } from 'vue'
 import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
 import { PrinterIcon } from '@heroicons/vue/24/outline'
 import { ExclamationCircleIcon } from '@heroicons/vue/24/outline'
+import StandardButton from '@/components/Shared/StandardButton.vue'
 
 const props = defineProps({
  showNotification: Boolean,
@@ -264,15 +265,15 @@ watch(
  </div>
  </div>
  <div class="mt-6 sm:mt-5 mx-6 sm:mx-0">
- <button
- type="button"
+ <StandardButton
+ :text="notificationContent.buttonText"
  :disabled="disableButton"
- :class="disableButton ? 'cursor-not-allowed opacity-20' : ''"
- class="inline-flex w-full justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
  @click="print"
- >
- {{ notificationContent.buttonText }}
- </button>
+ :class="[
+ disableButton && 'cursor-not-allowed opacity-20',
+ 'bg-blue-600 text-white hover:bg-blue-500 w-full justify-center'
+ ]"
+ />
  </div>
  </DialogPanel>
  </TransitionChild>

diff --git a/src/components/QRScanner/ScannerCamera.vue b/src/components/QRScanner/ScannerCamera.vue
@@ -2,7 +2,8 @@
 import { QrcodeStream } from 'vue-qrcode-reader'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { ArrowsRightLeftIcon } from '@heroicons/vue/24/outline'
+import { ArrowsRightLeftIcon } from '@heroicons/vue/20/solid'
+import StandardButton from '@/components/Shared/StandardButton.vue'
 
 // get scanner type from vue router params
 const route = useRoute()
@@ -89,14 +90,12 @@ async function logErrors(promise) {
  @decode="decode"
  >
  </qrcode-stream>
- <button
- type="button"
- class="mt-4 inline-flex items-center gap-x-2 rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+ <StandardButton
  @click="switchCamera"
- >
- <ArrowsRightLeftIcon class="-ml-0.5 h-5 w-5" aria-hidden="true" />
- Switch Camera
- </button>
+  text="Switch Camera"
+ :icon="ArrowsRightLeftIcon"
+ class="bg-blue-600 text-white hover:bg-blue-500 mt-4"
+ />
  </div>
  </div>
  <div class="text-green-500 font-bold mt-5 text-lg text-center" v-if="QRCodeValue != ''">

diff --git a/src/components/Registration/Kiosk/ScannerCamera.vue b/src/components/Registration/Kiosk/ScannerCamera.vue
@@ -2,9 +2,10 @@
 import { QrcodeStream } from 'vue-qrcode-reader'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { ArrowsRightLeftIcon } from '@heroicons/vue/24/outline'
+import { ArrowsRightLeftIcon } from '@heroicons/vue/20/solid'
 
 import PrintModal from '@/components/Modals/PrintModal.vue'
+import StandardButton from '@/components/Shared/StandardButton.vue'
 
 // get scanner type from vue router params
 const route = useRoute()
@@ -97,14 +98,12 @@ async function logErrors(promise) {
  @decode="decode"
  >
  </qrcode-stream>
- <button
- type="button"
- class="mt-4 inline-flex items-center gap-x-2 rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+ <StandardButton
  @click="switchCamera"
- >
- <ArrowsRightLeftIcon class="-ml-0.5 h-5 w-5" aria-hidden="true" />
- Switch Camera
- </button>
+  text="Switch Camera"
+ :icon="ArrowsRightLeftIcon"
+ class="bg-blue-600 text-white hover:bg-blue-500 mt-4"
+ />
  </div>
  <div class="w-full flex-auto text-center grid-cols-1">
  <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">

diff --git a/src/components/Registration/Manual/ScanSearch.vue b/src/components/Registration/Manual/ScanSearch.vue
@@ -2,10 +2,11 @@
 import { QrcodeStream } from 'vue-qrcode-reader'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { ArrowsRightLeftIcon } from '@heroicons/vue/24/outline'
+import { ArrowsRightLeftIcon } from '@heroicons/vue/20/solid'
 
 import PrintModal from '@/components/Modals/PrintModal.vue'
 import SearchAttendee from '@/components/Registration/Manual/SearchAttendee.vue'
+import StandardButton from '@/components/Shared/StandardButton.vue'
 
 // get scanner type from vue router params
 const route = useRoute()
@@ -94,19 +95,15 @@ async function logErrors(promise) {
  :camera="camera"
  @decode="decode"
  />
- <button
- type="button"
- class="mt-4 inline-flex items-center gap-x-2 rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+ <StandardButton
  @click="switchCamera"
- >
- <ArrowsRightLeftIcon class="-ml-0.5 h-5 w-5" aria-hidden="true" />
- Switch Camera
- </button>
+  text="Switch Camera"
+ :icon="ArrowsRightLeftIcon"
+ class="bg-blue-600 text-white hover:bg-blue-500 mt-4"
+ />
  </div>
  </div>
- <div class="w-full">
-
- </div>
+ <div class="w-full"></div>
  </div>
  <div class="grow">
  <SearchAttendee />

diff --git a/src/components/Registration/Manual/SearchAttendee.vue b/src/components/Registration/Manual/SearchAttendee.vue
@@ -3,6 +3,8 @@ import { ref } from 'vue'
 import { XCircleIcon, PrinterIcon, MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
 import { FunnelIcon } from '@heroicons/vue/24/outline'
 
+import StandardButton from '@/components/Shared/StandardButton.vue'
+
 // INITIALISE TEMPLATE REFS
 const searchBar = ref(null)
 
@@ -53,7 +55,7 @@ const items = [
  memberType: 'Organiser',
  organisation: 'SUSS AI-IG'
  }
- },
+ }
 ]
 
 const filterOptions = [
@@ -118,7 +120,11 @@ const filterOptions = [
  'relative -ml-px inline-flex items-center gap-x-1.5 rounded-r-md px-3 py-1.5 text-sm font-semibold text-gray-900 border border-gray-300 hover:bg-gray-50 group-focus:border-l-blue-600'
  ]"
  >
- <FunnelIcon v-if="!filterOptions.some((obj) => obj.show.value)" class="-ml-0.5 h-5 w-5 text-gray-400" aria-hidden="true" />
+ <FunnelIcon
+ v-if="!filterOptions.some((obj) => obj.show.value)"
+ class="-ml-0.5 h-5 w-5 text-gray-400"
+ aria-hidden="true"
+ />
  <svg
  v-else
  xmlns="http:https://www.w3.org/2000/svg"
@@ -208,32 +214,29 @@ const filterOptions = [
  </div>
 
  <div class="flex items-center gap-2 flex-none">
- <button
- type="button"
+ <StandardButton
  @click="item.checkedIn.value = true"
+ :text="item.checkedIn.value ? 'Checked-in' : 'Check-in'"
  :class="[
- 'rounded-md px-2.5 py-2 text-sm font-medium shadow-sm transition',
  item.checkedIn.value
  ? 'bg-blue-600/20 text-blue-700/70'
  : 'bg-blue-600 text-white hover:bg-blue-500'
  ]"
- >
- <span v-if="!item.checkedIn.value" class="transition-all">Check In</span>
- <span v-else class="transition-all">Checked-in</span>
- </button>
- <button
- type="button"
- class="inline-flex items-center rounded-md bg-yellow-300 px-2.5 py-2 text-sm font-medium text-gray-900 hover:bg-yellow-200"
- >
- <PrinterIcon class="w-5 mr-1" />
- <span>Print</span>
- </button>
+ />
+ <StandardButton
+ text="Print"
+ :icon="PrinterIcon"
+ class="bg-yellow-300 text-gray-900 hover:bg-yellow-200"
+ />
  </div>
  </div>
  </li>
  </ul>
  </div>
- <div v-else class="mt-5 h-96 rounded-lg bg-gray-50 border border-gray-300 flex items-center justify-center">
+ <div
+ v-else
+ class="mt-5 h-96 rounded-lg bg-gray-50 border border-gray-300 flex items-center justify-center"
+ >
  <div class="flex flex-col items-center gap-4">
  <MagnifyingGlassIcon class="h-12 text-gray-300" />
  <span class="text-2xl font-bold text-gray-300">No Search Results</span>

diff --git a/src/components/Shared/StandardButton.vue b/src/components/Shared/StandardButton.vue
@@ -0,0 +1,22 @@
+<script setup>
+const props = defineProps({
+ type: {
+ type: String,
+ default: 'button'
+ },
+ text: String,
+ icon: Function,
+ disabled: Boolean
+})
+</script>
+
+<template>
+ <button
+ :type="props.type"
+ :disabled="props.disabled"
+ class="inline-flex items-center rounded-md px-2.5 py-2 text-sm font-medium transition-all"
+ >
+ <component v-if="props.icon" :is="props.icon" class="h-5 mr-1" />
+ <span>{{ props.text }}</span>
+ </button>
+</template>
diff --git a/src/components/TypeSelector.vue b/src/components/TypeSelector.vue
@@ -14,6 +14,7 @@ import {
  ListboxOption,
  ListboxOptions
 } from '@headlessui/vue'
+import StandardButton from '@/components/Shared/StandardButton.vue'
 
 const eventNames = [
  { id: 1, name: 'Leslie Alexander' }
@@ -221,13 +222,14 @@ const selectedStation = ref(availableStations[1])
  </div>
 
  <div>
- <RouterLink :to="{ name: 'stationSelector', params: { scannerType: 'check-in' } }">
- <button
+ <RouterLink
+ :to="{ name: 'registration', params: { registrationType: 'scan', eventId: '1' } }"
+ >
+ <StandardButton
  type="submit"
- class="flex w-full justify-center rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
- >
- Go
- </button>
+ text="Go"
+ class="bg-blue-600 text-white hover:bg-blue-500 w-full justify-center"
+ />
  </RouterLink>
  </div>
  </form>

diff --git a/src/router/index.js b/src/router/index.js
@@ -50,7 +50,7 @@ const router = createRouter({
  path: ':eventId/scanner/:scannerType',
  name: 'scanner',
  component: QRScannerCamera
- },
+ }
  ]
  },
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }

diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
@@ -1,13 +1,16 @@
 <template>
  <div class="flex min-h-full min-w-full flex-col bg-white pb-12 pt-16">
  <main class="mx-auto flex w-full max-w-7xl flex-grow flex-col justify-center px-6 lg:px-8">
- <div class="flex flex-shrink-0 justify-center">
- </div>
+ <div class="flex flex-shrink-0 justify-center"></div>
  <div class="py-16">
  <div class="text-center">
  <p class="text-base font-semibold text-indigo-600">404</p>
- <h1 class="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">Page not found.</h1>
- <p class="mt-2 text-base text-gray-500">Sorry, we couldn’t find the page you’re looking for.</p>
+ <h1 class="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+ Page not found.
+ </h1>
+ <p class="mt-2 text-base text-gray-500">
+ Sorry, we couldn’t find the page you’re looking for.
+ </p>
  </div>
  </div>
  </main>