fixed QR generation moved export to composition api improved qr quality

Author: Saksham-Sirohi

webapp/src/views/schedule/export-select.vue

@@ -29,7 +29,7 @@
         >
         <transition name="fade">
           <div
-            v-if="hoveredOption === option"
+            v-if="hoveredOption === option.id"
             class="qr-popup"
           >
             <img
@@ -43,82 +43,91 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, watch, onMounted, onBeforeUnmount } from 'vue'
 import QRCode from 'qrcode'
 import config from 'config'
 
-export default {
-	props: {
-		options: {
-			type: Array,
-			required: true
-    },
-    modelValue: {
-      type: Object,
-      default: null
-		}
-	},
-  emits: ['input', 'update:modelValue'],
-	data() {
-		return {
-			isOpen: false,
-      selectedOption: this.modelValue ? this.modelValue.label : null,
-			hoveredOption: null,
-			qrCodes: {}
-		}
-	},
-  watch: {
-    modelValue(newVal) {
-      this.selectedOption = newVal ? newVal.label : null;
-		}
-	},
-	mounted() {
-		document.addEventListener('click', this.outsideClick)
-	},
-  beforeUnmount() {
-		document.removeEventListener('click', this.outsideClick)
-	},
-	created() {
-		this.options.forEach(option => {
-			this.generateQRCode(option)
-		})
-	},
-	methods: {
-		selectOption(option) {
-			this.selectedOption = option.label
-			this.isOpen = false
-      this.$emit('update:modelValue', option)
-			this.$emit('input', option)
-		},
-		outsideClick(event) {
-			const dropdown = this.$refs.dropdown
-			if (!dropdown.contains(event.target)) {
-				this.isOpen = false
-			}
-		},
-		generateQRCode(option) {
-			if (!['ics', 'xml', 'myics', 'myxml'].includes(option.id)) {
-				return
-			}
-			const url = config.api.base + 'export-talk?export_type=' + option.id
-			QRCode.toDataURL(url, { scale: 1 }, (err, url) => {
-				if (!err) this.qrCodes[option.id] = url
-			})
-		},
-		setHoveredOption(option) {
-			if (['ics', 'xml', 'myics', 'myxml'].includes(option.id)) {
-				this.hoveredOption = option
-			} else {
-				this.hoveredOption = null
-			}
-		},
-		clearHoveredOption(option) {
-			if (this.hoveredOption === option) {
-				this.hoveredOption = null
-			}
-		},
-	}
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true
+  },
+  modelValue: {
+    type: Object,
+    default: null
+  }
+})
+
+const emit = defineEmits(['input', 'update:modelValue'])
+
+const dropdown = ref(null)
+const isOpen = ref(false)
+const selectedOption = ref(props.modelValue ? props.modelValue.label : null)
+const hoveredOption = ref(null)
+const qrCodes = reactive({})
+
+watch(() => props.modelValue, (newVal) => {
+  selectedOption.value = newVal ? newVal.label : null
+})
+
+watch(() => props.options, (newOpts) => {
+  // regenerate QR codes when options change
+  for (const k in qrCodes) delete qrCodes[k]
+  if (Array.isArray(newOpts)) {
+    newOpts.forEach(option => generateQRCode(option))
+  }
+}, { immediate: true, deep: true })
+
+function selectOption(option) {
+  selectedOption.value = option.label
+  isOpen.value = false
+  emit('update:modelValue', option)
+  emit('input', option)
 }
+
+function outsideClick(event) {
+  const dd = dropdown.value
+  if (dd && !dd.contains(event.target)) {
+    isOpen.value = false
+  }
+}
+
+async function generateQRCode(option) {
+  if (!['ics', 'xml', 'myics', 'myxml'].includes(option.id)) return
+  const url = config.api.base + 'export-talk?export_type=' + option.id
+  // generate a larger image to avoid pixelation when scaled down
+  const popupSize = 150 // CSS popup size in px
+  const ratio = (typeof window !== 'undefined' && window.devicePixelRatio) ? window.devicePixelRatio : 1
+  const targetWidth = Math.ceil(popupSize * Math.max(1, ratio))
+  try {
+    const dataUrl = await QRCode.toDataURL(url, { width: targetWidth, margin: 1, errorCorrectionLevel: 'H' })
+    qrCodes[option.id] = dataUrl
+  } catch (err) {
+    // Keep behavior silent on error (same as previous implementation).
+    // Optional: console.error('QR generation failed', err)
+  }
+}
+
+function setHoveredOption(option) {
+  if (['ics', 'xml', 'myics', 'myxml'].includes(option.id)) {
+    hoveredOption.value = option.id
+  } else {
+    hoveredOption.value = null
+  }
+}
+
+function clearHoveredOption(option) {
+  if (hoveredOption.value === option.id) hoveredOption.value = null
+}
+
+onMounted(() => {
+  document.addEventListener('click', outsideClick)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', outsideClick)
+})
 </script>
 
 <style>
@@ -194,4 +203,14 @@ export default {
   height: 20px; /* Adjust as needed */
   align-self: flex-end;
 }
+
+/* Ensure QR images keep sharp edges and are not blurry when displayed */
+.dropdown-options img.default-image,
+.qr-popup img {
+  display: block;
+  object-fit: contain;
+  image-rendering: -webkit-optimize-contrast; /* Safari */
+  image-rendering: crisp-edges;
+  image-rendering: pixelated; /* fallback */
+}
 </style>

webapp/src/views/schedule/index.vue

@@ -20,15 +20,13 @@
 				bunt-select.timezone-item(name="timezone", :options="[{id: schedule.timezone, label: schedule.timezone}, {id: userTimezone, label: userTimezone}]", v-model="currentTimezone", @blur="saveTimezone")
 			template(v-else)
 				div.timezone-label.timezone-item.bunt-tab-header-item {{ schedule.timezone }}
-
 			.export.dropdown
 				bunt-progress-circular.export-spinner(v-if="isExporting", size="small")
 				custom-dropdown(name="calendar-add1"
 					:modelValue="selectedExporter"
 					@update:modelValue="selectedExporter = $event; makeExport()"
 					:options="exportType"
 					label="Add to Calendar")
-
 		bunt-tabs.days(v-if="days && days.length > 1", :active-tab="currentDay.toISOString()", ref="tabs", v-scrollbar.x="")
 			bunt-tab(v-for="day in days", :key="day.toISOString()", :id="day.toISOString()", :header="moment(day).format('dddd DD. MMMM')", @selected="changeDay(day)")
 		.scroll-parent(ref="scrollParent", v-scrollbar.x.y="")