Changed Toolbar in PDFViewer

components/PDFViewer.vue

@@ -34,11 +34,151 @@ onMounted(() => loadPdf(props.fileId))
 watch(() => props.fileId, (newPath) => {
   if (newPath) loadPdf(newPath)
 })
+
+const vpvRef = ref(null);
+
+//Zoom Control
+const zoomControl = computed(() => vpvRef.value?.zoomControl)
+
+const currentScale = computed(() => {
+  return zoomControl.value?.scale
+})
+
+const handleZoomTool = (type) => {
+  const zoomCtrl = unref(zoomControl)
+  if (!zoomCtrl) return
+
+  const scale = unref(currentScale)
+  if (type === "in") {
+    scale && zoomCtrl.zoom(scale + 0.25)
+  } else if (type === "out") {
+    scale && zoomCtrl.zoom(scale - 0.25)
+  } else {
+    zoomCtrl.zoom(type)
+  }
+}
+
+//Page Control
+const pageControl = computed(() => vpvRef.value?.pageControl)
+const currentPageInput = computed(() => pageControl.value?.currentPage)
+const searchControl = computed(() => vpvRef.value?.searchControl)
+const totalMatches = computed(() => searchControl.value?.searchMatches?.totalMatches)
+
+const isNextPageButtonDisable = computed(() =>
+    pageControl.value?.currentPage === pageControl.value?.totalPages
+)
+
+const isPreviousPageButtonDisable = computed(() =>
+    pageControl.value?.currentPage === 1
+)
+
+const prevPage = () => {
+  const isFirstPage = pageControl.value?.currentPage === 1
+  if (isFirstPage) return
+  pageControl.value?.goToPage(pageControl.value?.currentPage - 1)
+}
+
+const nextPage = () => {
+  const isLastPage = pageControl.value?.currentPage === pageControl.value?.totalPages
+  if (isLastPage) return
+  pageControl.value?.goToPage(pageControl.value?.currentPage + 1)
+}
+
+const handleKeyPress = (event) => {
+  if (event.key === "Enter") {
+    handlePageInput(event)
+  }
+}
+
+//Handle Download
+const downloadControl = computed(() => vpvRef.value?.downloadControl)
+
+const handleDownloadFile = () => {
+  const downloadCtrl = unref(downloadControl)
+  if (!downloadCtrl) return
+  downloadCtrl.download()
+}
+
+watch(downloadControl, (downloadCtrl) => {
+  if (!downloadCtrl) return
+
+  downloadCtrl.onError = (error) => {
+    console.log("Download error", error)
+  }
+
+  downloadCtrl.onComplete = () => {
+    console.log("Download completed")
+  }
+})
+
 </script>
 
 <template>
+  <div class="flex flex-col gap-4 justify-self-center">
+    <div class="flex items-center gap-4 text-[#7862FF] bg-pale-blue border-[#D7D1FB] rounded-lg p-2 justify-center">
+
+      <!-- Zoom out button -->
+      <UButton
+          @click="() => handleZoomTool('pageWidth')"
+          icon="i-heroicons-document-text"
+          variant="outline"
+      ></UButton>
+
+      <UButton
+          @click="() => handleZoomTool('out')"
+          icon="i-heroicons-magnifying-glass-minus"
+          variant="outline"
+      ></UButton>
+
+      <!-- Zoom in button -->
+      <UButton
+          @click="() => handleZoomTool('in')"
+          icon="i-heroicons-magnifying-glass-plus"
+          variant="outline"
+      ></UButton>
+      <UButton
+          @click="prevPage"
+          :disabled="isPreviousPageButtonDisable"
+          icon="i-heroicons-chevron-up"
+          variant="outline"
+      ></UButton>
+
+      <UButton
+        @click="handleDownloadFile"
+        variant="outline"
+        icon="i-heroicons-arrow-down-on-square"
+      />
+
+      <!-- Page number input and total pages display -->
+      <div class="flex items-center text-sm font-normal">
+        <UInput
+            v-model="currentPageInput"
+            class="w-24 h-8 rounded-sm focus:outline-none"
+            @change="handleKeyPress"
+        >
+          <template #trailing>
+            / {{ pageControl?.totalPages }}
+          </template>
+        </UInput>
+      </div>
+
+      <!-- Next page button -->
+      <UButton
+          @click="nextPage"
+          :disabled="isNextPageButtonDisable"
+          icon="i-heroicons-chevron-down"
+          variant="outline"
+      ></UButton>
+    </div>
+  </div>
   <div class="pdf-container">
-    <VPdfViewer v-if="pdfSrc" :src="pdfSrc" style="height: 80vh; width: 100%;" />
+    <VPdfViewer
+        v-if="pdfSrc"
+        :src="pdfSrc"
+        style="height: 78vh; width: 100%;"
+        :toolbar-options="false"
+        ref="vpvRef"
+    />
     <div v-else>Lade PDF…</div>
   </div></template>