Feat: add doc preview in Resume List

app/components/content/resume/list.vue

@@ -18,6 +18,7 @@ import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 import type { ExposedForm } from '~/types/form'
 import { VerificationSchema } from '~/schemas/verification.schema'
+import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
 
 // #endregion
 
@@ -41,6 +42,7 @@ const refSearchNav: RefSearchNav = {
 
 const verificationInputForm = ref<ExposedForm<any> | null>(null)
 const isVerifyDialogOpen = ref(false)
+const isDocPreviewDialogOpen = ref(false)
 const isRecordConfirmationOpen = ref(false)
 const summaryLoading = ref(false)
 
@@ -152,7 +154,7 @@ watch([recId, recAction], () => {
       isRecordConfirmationOpen.value = true
       break
     case ActionEvents.showPrint:
-      navigateTo('https://google.com', {external: true,open: { target: "_blank" },});
+      isDocPreviewDialogOpen.value = true
       break
   }
 })
@@ -180,6 +182,10 @@ watch([recId, recAction], () => {
     </div>
   </Dialog>
 
+  <Dialog v-model:open="isDocPreviewDialogOpen" title="Preview Dokumen" size="2xl">
+    <DocPreviewDialog :link="`https://www.antennahouse.com/hubfs/xsl-fo-sample/pdf/basic-link-1.pdf`" />
+  </Dialog>
+  
   <Confirmation
     v-model:open="isRecordConfirmationOpen"
     title="Validasi Data"

app/components/pub/my-ui/modal/doc-preview-dialog.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  link: string
+}>()
+
+const emit = defineEmits<{
+  // submit: [values: InstallationFormData, resetForm: () => void]
+  // cancel: [resetForm: () => void]
+}>()
+
+// Form cancel handler
+// function onCancelForm({ resetForm }: { resetForm: () => void }) {
+//   emit('cancel', resetForm)
+// }
+function onExternalLink() {
+  navigateTo(props.link, {external: true,open: { target: "_blank" },});
+}
+</script>
+
+<template>
+  <Button variant="link" class="absolute top-4 right-16" @click="onExternalLink">
+    Open in Browser
+    <Icon name="i-lucide-external-link" class="h-4 w-4" />
+  </Button>
+  <div class="border border-gray-400 rounded-lg w-full h-[80vh] overflow-hidden">
+    <embed style="width: 100%; height: 100%" :src="props.link" />
+  </div>
+</template>