Fix #31 Added dropdown list to allow user to choose which details to …

…show on search (#32)

* 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 #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 #41 and codacy

* fix codacy

* Simplified code

---------

Co-authored-by: cweitat <[email protected]>
Co-authored-by: lizardon <[email protected]>

src/components/NavBar.vue

@@ -42,7 +42,7 @@ const showPasswordNotification = ref(false)
  :showNotification="showPasswordNotification"
  @update-show-modal="showPasswordNotification = $event"
  />
- <Disclosure as="header" class="bg-white shadow sticky top-0" v-slot="{ open }">
+ <Disclosure as="header" class="bg-white shadow sticky top-0 z-10" 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">

src/components/Registration/Manual/ScanSearch.vue

@@ -77,35 +77,39 @@ async function logErrors(promise) {
 </script>
 
 <template>
- <div class="mx-auto max-w-7xl sm:px-6 lg:px-8 grow">
- <div
- class="mx-auto flex h-full max-w-2xl flex-col gap-16 bg-white/5 px-6 py-16 ring-1 ring-white/10 sm:rounded-3xl sm:p-8 lg:mx-0 lg:max-w-none lg:flex-row lg:items-center lg:py-20 xl:gap-x-20 xl:px-20"
- >
- <div>
+ <div class="mx-auto grid grid-cols-1 xl:flex items-center gap-16 w-3/4 h-full py-16">
+ <div class="xl:flex-none xl:w-96 flex flex-col items-start">
+ <div class="w-full flex justify-center">
  <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-2xl">
  Scan QR on Ticket
  </h2>
- <qrcode-stream
- :key="componentKey"
- class="!aspect-square !h-auto max-w-lg grid-cols-1 align-middle justify-center items-center"
- :track="selected.value"
- @init="logErrors"
- :camera="camera"
- @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"
- @click="switchCamera"
- >
- <ArrowsRightLeftIcon class="-ml-0.5 h-5 w-5" aria-hidden="true" />
- Switch Camera
- </button>
  </div>
- <div class="w-full flex-auto overflow-visible">
- <SearchAttendee />
+ <div class="w-full">
+ <div class="mx-auto w-fit">
+ <qrcode-stream
+ :key="componentKey"
+ class="!aspect-square !h-auto max-w-lg grid-cols-1 align-middle justify-center items-center mt-2"
+ :track="selected.value"
+ @init="logErrors"
+ :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"
+ @click="switchCamera"
+ >
+ <ArrowsRightLeftIcon class="-ml-0.5 h-5 w-5" aria-hidden="true" />
+ Switch Camera
+ </button>
+ </div>
  </div>
+ <div class="w-full">
+
+ </div>
+ </div>
+ <div class="grow">
+ <SearchAttendee />
  </div>
  </div>
 </template>