Issue with pdf-viewer-interface url generation

contributors.yml

@@ -6,3 +6,4 @@
 - timio23
 - Dominic-Marcelino
 - ukmadlz
+- carlosgonzalezpdn

packages/pdf-viewer-interface/src/index.ts

@@ -6,7 +6,7 @@ export default defineInterface({
     id: "directus-labs-pdf-viewer-interface",
     name: "PDF Viewer",
     icon: "picture_as_pdf",
-    description: "View PDF files from within the item editor",
+    description: "View PDF files from within the item editor modified by prodanet",
     component: InterfaceComponent,
     types: ["alias"],
     localTypes: ["presentation"],
@@ -21,23 +21,23 @@ export default defineInterface({
                 type: "string",
                 name: "PDF Field",
                 meta: {
-                    width: "half",
+                    width: "full",
                     interface: "system-field",
                     options: {
                         collectionName: collection,
                         typeAllowList: ["uuid"],
-                    },
+                    }
                 },
             },
             {
                 field: "button_label",
                 name: "Button Label",
                 meta: {
-                    width: "half",
+                    width: "full",
                     interface: "system-input-translated-string",
                     options: { placeholder: defaultButtonLabel },
                 },
-            },
+            }
         ];
     },
 });

packages/pdf-viewer-interface/src/interface.vue

@@ -1,21 +1,21 @@
 <template>
-    <v-button @click="activeDialog = true" :disabled="!fileIsValid">{{ t(button_label) }}</v-button>
-
-    <v-dialog v-model="activeDialog" @esc="activeDialog = false">
-        <pdf-viewer :url="fileURL">
-            <template #nav>
-                <v-button v-tooltip.left="t('cancel')" icon rounded secondary @click="activeDialog = false">
-                    <v-icon name="close" />
-                </v-button>
-            </template>
-        </pdf-viewer>
-    </v-dialog>
-</template>
-
+    <div class="pdf-viewer-interface mb-4">
+        <v-button class="full-width"  @click="activeDialog = true" :disabled="!fileIsValid">{{ t(button_label) }}</v-button>
 
+        <v-dialog v-model="activeDialog" @esc="activeDialog = false">
+            <pdf-viewer :url="fileURL">
+                <template #nav>
+                    <v-button v-tooltip.left="t('cancel')" icon rounded secondary @click="activeDialog = false">
+                        <v-icon name="close" />
+                    </v-button>
+                </template>
+            </pdf-viewer>
+        </v-dialog>
+    </div>
+</template>
 
 <script setup lang="ts">
-    import { inject, ref, computed } from 'vue';
+    import { inject, ref, computed, onMounted } from 'vue';
     import { useI18n } from 'vue-i18n';
     import { defaultButtonLabel } from './default-button-label';
     import PdfViewer from './pdf-viewer.vue'
@@ -24,6 +24,7 @@
         file_field?: string;
         button_label?: string;
     }>(), {
+
         button_label: defaultButtonLabel
     });
 
@@ -40,11 +41,32 @@
             return fieldValues.value[props.file_field] ?? null;
         });
         const fileURL = computed(() => {
-            if (!fileID.value) return null;
-            return `/assets/${fileID.value}`;
+            if (!fileID.value || !fileID.value.id) return null;
+            return `/assets/${fileID.value.id}`;
         });
         const fileIsValid = computed(() => !!fileID.value);
 
         return { fileURL, fileIsValid };
     }
-</script>
+
+    onMounted(() => {
+        const pdfContent = document.querySelector('.pdf-viewer-interface');
+        const parent = pdfContent?.closest('.drawer-item-order');
+        const htmlContent = pdfContent?.closest('.interface')?.closest('.field');
+
+        if (!parent || !htmlContent || !pdfContent) { return; }
+
+        pdfContent.classList.add('pb-32');
+        pdfContent.querySelector('button')?.classList.add('full-width');
+        parent?.insertBefore(htmlContent, parent.firstChild);
+    });
+</script>
+
+<style scoped>
+.full-width {
+    width: 100%;
+}
+.pb-32 {
+    padding-bottom: 32px;
+}
+</style>