refactoring for existing files

src/components/Modals/PasswordModal.vue

@@ -77,10 +77,10 @@ const checkPassword = (value) => {
  >
  <div class="mt-5 sm:mt-6">
  <input
+ id="password"
  v-model="passwordField"
  type="password"
  name="password"
- id="password"
  autocomplete="password"
  class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
  />
@@ -96,8 +96,8 @@ const checkPassword = (value) => {
  <div class="mt-5 sm:mt-6">
  <StandardButton
  text="Sign Out"
- @click="checkPassword(passwordField)"
  class="bg-blue-600 text-white hover:bg-blue-500 w-full justify-center"
+ @click="checkPassword(passwordField)"
  />
  </div>
  </DialogPanel>

src/components/Modals/PrintModal.vue

@@ -105,13 +105,13 @@ const print = () => {
  >
  <div class="flex h-6 items-center">
  <input
- @click="printModalStore.selectOption(printOption)"
- :disabled="printOption.disabled"
  :id="printOption.id"
+ :disabled="printOption.disabled"
  :name="printOption.name"
  :checked="printOption.checked"
  type="checkbox"
  class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-600"
+ @click="printModalStore.selectOption(printOption)"
  />
  </div>
  <div class="ml-3 text-sm leading-6 text-start">
@@ -122,7 +122,6 @@ const print = () => {
  </div>
  <!--Select all button-->
  <StandardButton
- @click="printModalStore.selectOrDeselectAll"
  :disabled="disableButton"
  :text="printModalStore.selectedOptions.length === 5 ? 'Deselect All' : 'Select All'"
  :class="[
@@ -131,6 +130,7 @@ const print = () => {
  : 'hover:bg-blue-500 hover:border-blue-500 hover:text-white',
  'text-blue-600 border border-blue-600 ml-6'
  ]"
+ @click="printModalStore.selectOrDeselectAll"
  />
  </div>
 
@@ -153,11 +153,11 @@ const print = () => {
  <StandardButton
  :text="props.validQRCode ? 'Print' : 'Try Again'"
  :disabled="disableButton"
- @click="print"
  :class="[
  disableButton && 'cursor-not-allowed opacity-20',
  'bg-blue-600 text-white hover:bg-blue-500 w-full justify-center'
  ]"
+ @click="print"
  />
  </div>
  </div>

src/components/NavBar.vue

@@ -39,10 +39,10 @@ const showPasswordModal = ref(false)
 
 <template>
  <PasswordModal
- :showPasswordModal="showPasswordModal"
+ :show-password-modal="showPasswordModal"
  @hidePasswordModal="showPasswordModal = $event"
  />
- <Disclosure as="header" class="bg-white shadow sticky top-0 z-20" v-slot="{ open }">
+ <Disclosure v-slot="{ open }" as="header" class="bg-white shadow sticky top-0 z-20">
  <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">
@@ -88,13 +88,13 @@ const showPasswordModal = ref(false)
  >
  <MenuItem v-for="item in userNavigation" :key="item.name">
  <button
- @click="item.action"
  :class="[
  item.name == 'Sign out'
  ? 'text-red-600 hover:bg-red-100 font-semibold'
  : 'text-gray-700 hover:bg-gray-100',
  'w-full text-left px-4 py-2 text-sm'
  ]"
+ @click="item.action"
  >
  <component
  :is="item.icon"

src/components/QRScanner/ScannerCamera.vue

@@ -85,20 +85,20 @@ async function logErrors(promise) {
  :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"
+ @init="logErrors"
  @decode="decode"
  >
  </qrcode-stream>
  <StandardButton
- @click="switchCamera"
  text="Switch Camera"
  :icon="ArrowsRightLeftIcon"
  class="bg-blue-600 text-white hover:bg-blue-500 mt-4"
+ @click="switchCamera"
  />
  </div>
  </div>
- <div class="text-green-500 font-bold mt-5 text-lg text-center" v-if="QRCodeValue != ''">
+ <div v-if="QRCodeValue != ''" class="text-green-500 font-bold mt-5 text-lg text-center">
  { user name } has been checked into { room name }
  </div>
  </div>

src/components/Registration/Kiosk/ScannerCamera.vue

@@ -41,15 +41,15 @@ async function logErrors(promise) {
 
 <template>
  <SuccessNotification
- :showPrintedNotification="showPrintedNotification"
- :validQRCode="validQRCode"
+ :show-printed-notification="showPrintedNotification"
+ :valid-q-r-code="validQRCode"
  @hidePrintedNotification="showPrintedNotification = false"
  />
  <div class="h-full mx-auto max-w-7xl flex">
  <PrintModal
  :key="componentKey"
- :showPrintModal="showPrintModal"
- :validQRCode="validQRCode"
+ :show-print-modal="showPrintModal"
+ :valid-q-r-code="validQRCode"
  @hideModal="showPrintModal = false"
  @print="
  () => {
@@ -67,16 +67,16 @@ async function logErrors(promise) {
  <qrcode-stream
  class="!aspect-square !h-auto max-w-lg grid-cols-1 align-middle justify-center items-center"
  :track="scannerStore.selected.value"
- @init="logErrors"
  :camera="camera"
+ @init="logErrors"
  @decode="decode"
  >
  </qrcode-stream>
  <StandardButton
- @click="camera = camera === 'front' ? 'rear' : 'front'"
  text="Switch Camera"
  :icon="ArrowsRightLeftIcon"
  class="bg-blue-600 text-white hover:bg-blue-500 mt-4"
+ @click="camera = camera === 'front' ? 'rear' : 'front'"
  />
  </div>
  <div class="w-full flex-auto text-center grid-cols-1">

src/components/Registration/Manual/ScanSearch.vue

@@ -42,15 +42,15 @@ async function logErrors(promise) {
 
 <template>
  <SuccessNotification
- :showPrintedNotification="showPrintedNotification"
- :validQRCode="validQRCode"
+ :show-printed-notification="showPrintedNotification"
+ :valid-q-r-code="validQRCode"
  @hidePrintedNotification="showPrintedNotification = false"
  />
  <div class="mx-auto grid grid-cols-1 xl:flex items-center gap-16 lg:w-3/4 h-full py-16">
  <PrintModal
  :key="componentKey"
- :showPrintModal="showPrintModal"
- :validQRCode="validQRCode"
+ :show-print-modal="showPrintModal"
+ :valid-q-r-code="validQRCode"
  @hideModal="showPrintModal = false"
  @print="
  () => {
@@ -72,15 +72,15 @@ async function logErrors(promise) {
  <qrcode-stream
  class="!aspect-square !h-auto max-w-lg grid-cols-1 align-middle justify-center items-center mt-2"
  :track="scannerStore.selected.value"
- @init="logErrors"
  :camera="camera"
+ @init="logErrors"
  @decode="decode"
  />
  <StandardButton
- @click="camera = camera === 'front' ? 'rear' : 'front'"
  text="Switch Camera"
  :icon="ArrowsRightLeftIcon"
  class="bg-blue-600 text-white hover:bg-blue-500 mt-4"
+ @click="camera = camera === 'front' ? 'rear' : 'front'"
  />
  </div>
  </div>

src/components/Registration/Manual/SearchAttendee.vue

@@ -15,7 +15,7 @@ const query = ref('')
 </script>
 
 <template>
- <div v-if="menuOpen" @click="menuOpen = !menuOpen" class="fixed top-0 left-0 w-full h-full" />
+ <div v-if="menuOpen" class="fixed top-0 left-0 w-full h-full" @click="menuOpen = !menuOpen" />
  <div class="mx-auto w-full overflow-visible">
  <div>
  <div class="flex justify-center">
@@ -29,17 +29,17 @@ const query = ref('')
  <div class="flex flex-1 rounded-md shadow-sm">
  <div class="relative h-9 flex flex-grow items-stretch focus-within:z-10">
  <input
+ id="search"
  v-model="query"
  type="text"
  name="search"
- id="search"
  class="group block w-full rounded-none rounded-l-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
  />
  <button
- type="button"
- @click="query = ''"
  v-if="query !== ''"
+ type="button"
  class="group absolute inset-y-0 right-0 flex items-center pr-3 z-0"
+ @click="query = ''"
  >
  <XCircleIcon
  class="h-6 text-gray-400 group-hover:text-gray-400/70"
@@ -51,11 +51,11 @@ const query = ref('')
 
  <button
  type="button"
- @click="menuOpen = !menuOpen"
  :class="[
  menuOpen && 'bg-gray-50',
  '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'
  ]"
+ @click="menuOpen = !menuOpen"
  >
  <FunnelIcon
  v-if="!searchAttendeeStore.filterOptions.some((option) => option.show)"
@@ -99,11 +99,11 @@ const query = ref('')
  class="flex items-center"
  >
  <input
- @click="option.show = !option.show"
- type="checkbox"
  :id="option.id"
+ type="checkbox"
  class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-600"
  :checked="option.show"
+ @click="option.show = !option.show"
  />
  <label :for="option.id" class="ml-3 text-sm leading-6 font-medium text-gray-900">{{
  option.name
@@ -152,19 +152,19 @@ const query = ref('')
 
  <div class="flex items-center justify-end gap-2">
  <StandardButton
- @click="person.checkedIn = true"
  :text="person.checkedIn ? 'Checked-in' : 'Check-in'"
  :class="[
  person.checkedIn
  ? 'bg-blue-600/20 text-blue-700/70 w-1/2 sm:w-auto justify-center min-w-fit'
  : 'bg-blue-600 text-white hover:bg-blue-500 w-1/2 sm:w-auto justify-center'
  ]"
+ @click="person.checkedIn = true"
  />
  <StandardButton
- @click="emit('print', person.name)"
  text="Print"
  :icon="PrinterIcon"
  class="bg-yellow-300 text-gray-900 hover:bg-yellow-200 w-1/2 sm:w-auto justify-center"
+ @click="emit('print', person.name)"
  />
  </div>
  </div>

src/components/Shared/StandardButton.vue

@@ -16,7 +16,7 @@ const props = defineProps({
  :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" />
+ <component :is="props.icon" v-if="props.icon" class="h-5 mr-1" />
  <span>{{ props.text }}</span>
  </button>
 </template>

src/components/Shared/SuccessNotification.vue

@@ -49,8 +49,8 @@ watch(
  <div class="ml-4 flex flex-shrink-0">
  <button
  type="button"
- @click="emit('hidePrintedNotification', false)"
  class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+ @click="emit('hidePrintedNotification', false)"
  >
  <span class="sr-only">Close</span>
  <XMarkIcon class="h-5 w-5" aria-hidden="true" />

src/components/TypeSelector.vue

@@ -43,15 +43,15 @@ const selectedStation = ref(availableStations[1])
  Select Event
  </h2>
  <form class="space-y-6 mt-10" action="#" method="POST">
- <Combobox as="div" v-model="selectedEvent">
+ <Combobox v-model="selectedEvent" as="div">
  <ComboboxLabel class="block text-sm font-medium leading-6 text-gray-900"
  >Event Name</ComboboxLabel
  >
  <div class="relative mt-2">
  <ComboboxInput
  class="w-full rounded-md border-0 bg-white py-1.5 pl-3 pr-10 text-gray-900 shadow-sm ring-1 ring-gray-300 focus:ring-1 focus:ring-blue-600 sm:text-sm sm:leading-6"
- @change="query = $event.target.value"
  :display-value="(person) => event?.name"
+ @change="query = $event.target.value"
  />
  <ComboboxButton
  class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none"
@@ -66,9 +66,9 @@ const selectedStation = ref(availableStations[1])
  <ComboboxOption
  v-for="event in filteredEvents"
  :key="event.id"
+ v-slot="{ selected }"
  :value="event"
  as="template"
- v-slot="{ selected }"
  >
  <li :class="['relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900']">
  <span :class="['block truncate', selected && 'font-semibold']">
@@ -89,7 +89,7 @@ const selectedStation = ref(availableStations[1])
 
  <!-- select booth type -->
 
- <Listbox as="div" v-model="selectedType">
+ <Listbox v-model="selectedType" as="div">
  <ListboxLabel class="block text-sm font-medium leading-6 text-gray-900"
  >Type</ListboxLabel
  >
@@ -106,11 +106,11 @@ const selectedStation = ref(availableStations[1])
  class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
  >
  <ListboxOption
- as="template"
  v-for="stationType in stationTypes"
  :key="stationType.id"
- :value="stationType"
  v-slot="{ active, stationTypes }"
+ as="template"
+ :value="stationType"
  >
  <li
  :class="[
@@ -140,7 +140,7 @@ const selectedStation = ref(availableStations[1])
 
  <!-- allow user to select booth or give a new field to store booth -->
  <!-- for session checkin and checkout, only retrieve locations from api and not able to create new -->
- <Listbox as="div" v-model="selectedStation">
+ <Listbox v-model="selectedStation" as="div">
  <ListboxLabel class="block text-sm font-medium leading-6 text-gray-900"
  >Selected Station</ListboxLabel
  >
@@ -157,11 +157,11 @@ const selectedStation = ref(availableStations[1])
  class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
  >
  <ListboxOption
- as="template"
  v-for="station in availableStations"
  :key="station.id"
- :value="station"
  v-slot="{ active, availableStations }"
+ as="template"
+ :value="station"
  >
  <li
  :class="[