fixed some bugs with dialog and viewing docx works again

resources/js/Components/DocumentsTable/DocumentViewerDialog.vue

@@ -9,6 +9,8 @@ import {
 } from "@/Components/ui/dialog";
 import { Button } from "@/Components/ui/button";
 import { Badge } from "../ui/badge";
+import { Loader2 } from "lucide-vue-next";
+import axios from "axios";
 
 const props = defineProps({
   show: { type: Boolean, default: false },
@@ -21,6 +23,8 @@ const emit = defineEmits(["close"]);
 
 const textContent = ref("");
 const loading = ref(false);
+const previewGenerating = ref(false);
+const previewError = ref("");
 
 const fileExtension = computed(() => {
   if (props.filename) {
@@ -34,6 +38,9 @@ const viewerType = computed(() => {
   const mime = props.mimeType.toLowerCase();
 
   if (ext === "pdf" || mime === "application/pdf") return "pdf";
+  // DOCX/DOC files are converted to PDF by backend - treat as PDF viewer
+  if (["doc", "docx"].includes(ext) || mime.includes("word") || mime.includes("msword"))
+    return "docx";
   if (["jpg", "jpeg", "png", "gif", "webp"].includes(ext) || mime.startsWith("image/"))
     return "image";
   if (["txt", "csv", "xml"].includes(ext) || mime.startsWith("text/")) return "text";
@@ -45,8 +52,8 @@ const loadTextContent = async () => {
   if (!props.src || viewerType.value !== "text") return;
   loading.value = true;
   try {
-    const response = await fetch(props.src);
-    textContent.value = await response.text();
+    const response = await axios.get(props.src);
+    textContent.value = response.data;
   } catch (e) {
     textContent.value = "Napaka pri nalaganju vsebine.";
   } finally {
@@ -54,12 +61,64 @@ const loadTextContent = async () => {
   }
 };
 
+// For DOCX files, the backend converts to PDF. If the preview isn't ready yet (202 status),
+// we poll until it's available.
+const docxPreviewUrl = ref("");
+const loadDocxPreview = async () => {
+  if (!props.src || viewerType.value !== "docx") return;
+
+  previewGenerating.value = true;
+  previewError.value = "";
+  docxPreviewUrl.value = "";
+
+  const maxRetries = 15;
+  const retryDelay = 2000; // 2 seconds between retries
+
+  for (let attempt = 0; attempt < maxRetries; attempt++) {
+    try {
+      const response = await axios.head(props.src, { validateStatus: () => true });
+
+      if (response.status >= 200 && response.status < 300) {
+        // Preview is ready
+        docxPreviewUrl.value = props.src;
+        previewGenerating.value = false;
+        return;
+      } else if (response.status === 202) {
+        // Preview is being generated, wait and retry
+        await new Promise((resolve) => setTimeout(resolve, retryDelay));
+      } else {
+        // Other error
+        previewError.value = "Napaka pri nalaganju predogleda.";
+        previewGenerating.value = false;
+        return;
+      }
+    } catch (e) {
+      previewError.value = "Napaka pri nalaganju predogleda.";
+      previewGenerating.value = false;
+      return;
+    }
+  }
+
+  // Max retries reached
+  previewError.value = "Predogled ni na voljo. Prosimo poskusite znova kasneje.";
+  previewGenerating.value = false;
+};
+
 watch(
   () => [props.show, props.src],
   ([show]) => {
     if (show && viewerType.value === "text") {
       loadTextContent();
     }
+    if (show && viewerType.value === "docx") {
+      loadDocxPreview();
+    }
+    // Reset states when dialog closes
+    if (!show) {
+      previewGenerating.value = false;
+      previewError.value = "";
+      docxPreviewUrl.value = "";
+    }
   },
   { immediate: true }
 );
@@ -89,6 +148,35 @@ watch(
           />
         </template>
 
+        <!-- DOCX Viewer (converted to PDF by backend) -->
+        <template v-else-if="viewerType === 'docx'">
+          <!-- Loading/generating state -->
+          <div
+            v-if="previewGenerating"
+            class="flex flex-col items-center justify-center h-full gap-4"
+          >
+            <Loader2 class="h-8 w-8 animate-spin text-indigo-600" />
+            <span class="text-gray-500">Priprava predogleda dokumenta...</span>
+          </div>
+          <!-- Error state -->
+          <div
+            v-else-if="previewError"
+            class="flex flex-col items-center justify-center h-full gap-4 text-gray-500"
+          >
+            <span>{{ previewError }}</span>
+            <Button as="a" :href="props.src" target="_blank" variant="outline">
+              Prenesi datoteko
+            </Button>
+          </div>
+          <!-- Preview ready -->
+          <iframe
+            v-else-if="docxPreviewUrl"
+            :src="docxPreviewUrl"
+            class="w-full h-full rounded border"
+            type="application/pdf"
+          />
+        </template>
+
         <!-- Image Viewer -->
         <template v-else-if="viewerType === 'image' && props.src">
           <img