From 2968bcf3f825ac930712d367ba1fa95d4626bca5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Pocrnji=C4=8D?= <simon.pocrnjic@lume-solutions.si>
Date: Thu, 29 Jan 2026 19:14:35 +0100
Subject: [PATCH] fixed some bugs with dialog and viewing docx works again

---
 .../js/Components/Dialogs/CreateDialog.vue    |   2 +-
 .../js/Components/Dialogs/DeleteDialog.vue    |  58 ++--
 .../js/Components/Dialogs/UpdateDialog.vue    |   2 +-
 .../DocumentsTable/DocumentViewerDialog.vue   |  92 +++++-
 .../Pages/Cases/Partials/ActivityDrawer.vue   | 301 ++++++++++--------
 5 files changed, 285 insertions(+), 170 deletions(-)

diff --git a/resources/js/Components/Dialogs/CreateDialog.vue b/resources/js/Components/Dialogs/CreateDialog.vue
index a0e84f4..8978477 100644
--- a/resources/js/Components/Dialogs/CreateDialog.vue
+++ b/resources/js/Components/Dialogs/CreateDialog.vue
@@ -69,7 +69,7 @@ const maxWidthClass = computed(() => {
 
 <template>
   <Dialog v-model:open="open">
-    <DialogContent :class="maxWidthClass">
+    <DialogContent class="overflow-auto max-h-3/4" :class="maxWidthClass">
       <DialogHeader>
         <DialogTitle>
           <div class="flex items-center gap-2">
diff --git a/resources/js/Components/Dialogs/DeleteDialog.vue b/resources/js/Components/Dialogs/DeleteDialog.vue
index 1ba869b..c3bee98 100644
--- a/resources/js/Components/Dialogs/DeleteDialog.vue
+++ b/resources/js/Components/Dialogs/DeleteDialog.vue
@@ -6,34 +6,40 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@/Components/ui/dialog';
-import { Button } from '@/Components/ui/button';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { faTrashCan, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
-import { ref, watch } from 'vue';
+} from "@/Components/ui/dialog";
+import { Button } from "@/Components/ui/button";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { faTrashCan, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { ref, watch } from "vue";
 
 const props = defineProps({
   show: { type: Boolean, default: false },
-  title: { type: String, default: 'Izbriši' },
-  message: { type: String, default: 'Ali ste prepričani, da želite izbrisati ta element?' },
-  confirmText: { type: String, default: 'Izbriši' },
-  cancelText: { type: String, default: 'Prekliči' },
+  title: { type: String, default: "Izbriši" },
+  message: {
+    type: String,
+    default: "Ali ste prepričani, da želite izbrisati ta element?",
+  },
+  confirmText: { type: String, default: "Izbriši" },
+  cancelText: { type: String, default: "Prekliči" },
   processing: { type: Boolean, default: false },
   itemName: { type: String, default: null }, // Optional name to show in confirmation
 });
 
-const emit = defineEmits(['update:show', 'close', 'confirm']);
+const emit = defineEmits(["update:show", "close", "confirm"]);
 
 const open = ref(props.show);
 
-watch(() => props.show, (newVal) => {
-  open.value = newVal;
-});
+watch(
+  () => props.show,
+  (newVal) => {
+    open.value = newVal;
+  }
+);
 
 watch(open, (newVal) => {
-  emit('update:show', newVal);
+  emit("update:show", newVal);
   if (!newVal) {
-    emit('close');
+    emit("close");
   }
 });
 
@@ -42,7 +48,7 @@ const onClose = () => {
 };
 
 const onConfirm = () => {
-  emit('confirm');
+  emit("confirm");
 };
 </script>
 
@@ -59,8 +65,13 @@ const onConfirm = () => {
         <DialogDescription>
           <div class="flex items-start gap-4 pt-4">
             <div class="flex-shrink-0">
-              <div class="flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
-                <FontAwesomeIcon :icon="faTriangleExclamation" class="h-6 w-6 text-red-600" />
+              <div
+                class="flex items-center justify-center h-12 w-12 rounded-full bg-red-100"
+              >
+                <FontAwesomeIcon
+                  :icon="faTriangleExclamation"
+                  class="h-6 w-6 text-red-600"
+                />
               </div>
             </div>
             <div class="flex-1 space-y-2">
@@ -70,9 +81,7 @@ const onConfirm = () => {
               <p v-if="itemName" class="text-sm font-medium text-gray-900">
                 {{ itemName }}
               </p>
-              <p class="text-sm text-gray-500">
-                Ta dejanje ni mogoče razveljaviti.
-              </p>
+              <p class="text-sm text-gray-500">Ta dejanje ni mogoče razveljaviti.</p>
             </div>
           </div>
         </DialogDescription>
@@ -82,15 +91,10 @@ const onConfirm = () => {
         <Button variant="outline" @click="onClose" :disabled="processing">
           {{ cancelText }}
         </Button>
-        <Button
-          variant="destructive"
-          @click="onConfirm"
-          :disabled="processing"
-        >
+        <Button variant="destructive" @click="onConfirm" :disabled="processing">
           {{ confirmText }}
         </Button>
       </DialogFooter>
     </DialogContent>
   </Dialog>
 </template>
-
diff --git a/resources/js/Components/Dialogs/UpdateDialog.vue b/resources/js/Components/Dialogs/UpdateDialog.vue
index 5f119e4..cdf18ca 100644
--- a/resources/js/Components/Dialogs/UpdateDialog.vue
+++ b/resources/js/Components/Dialogs/UpdateDialog.vue
@@ -69,7 +69,7 @@ const maxWidthClass = computed(() => {
 
 <template>
   <Dialog v-model:open="open">
-    <DialogContent :class="maxWidthClass">
+    <DialogContent class="overflow-auto max-h-3/4" :class="maxWidthClass">
       <DialogHeader>
         <DialogTitle>
           <div class="flex items-center gap-2">
diff --git a/resources/js/Components/DocumentsTable/DocumentViewerDialog.vue b/resources/js/Components/DocumentsTable/DocumentViewerDialog.vue
index 18c0b16..423a4df 100644
--- a/resources/js/Components/DocumentsTable/DocumentViewerDialog.vue
+++ b/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
diff --git a/resources/js/Pages/Cases/Partials/ActivityDrawer.vue b/resources/js/Pages/Cases/Partials/ActivityDrawer.vue
index 7efa33c..1213ea8 100644
--- a/resources/js/Pages/Cases/Partials/ActivityDrawer.vue
+++ b/resources/js/Pages/Cases/Partials/ActivityDrawer.vue
@@ -120,10 +120,11 @@ const store = async () => {
     return `${y}-${m}-${day}`;
   };
 
-  const contractUuids = Array.isArray(form.contract_uuids) && form.contract_uuids.length > 0
-    ? form.contract_uuids
-    : null;
-  
+  const contractUuids =
+    Array.isArray(form.contract_uuids) && form.contract_uuids.length > 0
+      ? form.contract_uuids
+      : null;
+
   const isMultipleContracts = contractUuids && contractUuids.length > 1;
 
   form
@@ -175,37 +176,43 @@ const autoMailRequiresContract = computed(() => {
 });
 
 const contractItems = computed(() => {
-  return pageContracts.value.map(c => ({
+  return pageContracts.value.map((c) => ({
     value: c.uuid,
-    label: `${c.reference}${c.name ? ` - ${c.name}` : ''}`
+    label: `${c.reference}${c.name ? ` - ${c.name}` : ""}`,
   }));
 });
 
 const autoMailDisabled = computed(() => {
   if (!showSendAutoMail()) return false;
-  
+
   // Disable if multiple contracts selected
   if (form.contract_uuids && form.contract_uuids.length > 1) return true;
-  
+
   // Disable if template requires contract but none selected
-  if (autoMailRequiresContract.value && (!form.contract_uuids || form.contract_uuids.length === 0)) {
+  if (
+    autoMailRequiresContract.value &&
+    (!form.contract_uuids || form.contract_uuids.length === 0)
+  ) {
     return true;
   }
-  
+
   return false;
 });
 
 const autoMailDisabledHint = computed(() => {
   if (!showSendAutoMail()) return "";
-  
+
   if (form.contract_uuids && form.contract_uuids.length > 1) {
     return "Avtomatska e-pošta ni na voljo pri več pogodbah.";
   }
-  
-  if (autoMailRequiresContract.value && (!form.contract_uuids || form.contract_uuids.length === 0)) {
+
+  if (
+    autoMailRequiresContract.value &&
+    (!form.contract_uuids || form.contract_uuids.length === 0)
+  ) {
     return "Ta e-poštna predloga zahteva pogodbo. Najprej izberite pogodbo.";
   }
-  
+
   return "";
 });
 watch(
@@ -333,133 +340,148 @@ watch(
     @confirm="store"
   >
     <form @submit.prevent="store">
-        <div class="space-y-4">
-          <div class="space-y-2">
-            <Label>Akcija</Label>
-            <Select v-model="form.action_id" :disabled="!actions || !actions.length">
-              <SelectTrigger>
-                <SelectValue placeholder="Izberi akcijo" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem v-for="a in actions" :key="a.id" :value="a.id">
-                  {{ a.name }}
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+      <div class="space-y-4">
+        <div class="space-y-2">
+          <Label>Akcija</Label>
+          <Select v-model="form.action_id" :disabled="!actions || !actions.length">
+            <SelectTrigger>
+              <SelectValue placeholder="Izberi akcijo" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem v-for="a in actions" :key="a.id" :value="a.id">
+                {{ a.name }}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
 
-          <div class="space-y-2">
-            <Label>Odločitev</Label>
-            <Select v-model="form.decision_id" :disabled="!decisions || !decisions.length">
-              <SelectTrigger>
-                <SelectValue placeholder="Izberi odločitev" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem v-for="d in decisions" :key="d.id" :value="d.id">
-                  {{ d.name }}
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+        <div class="space-y-2">
+          <Label>Odločitev</Label>
+          <Select v-model="form.decision_id" :disabled="!decisions || !decisions.length">
+            <SelectTrigger>
+              <SelectValue placeholder="Izberi odločitev" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem v-for="d in decisions" :key="d.id" :value="d.id">
+                {{ d.name }}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
 
-          <div class="space-y-2">
-            <Label>Pogodbe</Label>
-            <AppMultiSelect
-              v-model="form.contract_uuids"
-              :items="contractItems"
-              placeholder="Izberi pogodbe (neobvezno)"
-              search-placeholder="Išči pogodbo..."
-              empty-text="Ni pogodb."
-              :clearable="true"
-              :show-selected-chips="true"
-            />
-            <p v-if="form.contract_uuids && form.contract_uuids.length > 1" class="text-xs text-muted-foreground">
-              Bo ustvarjenih {{ form.contract_uuids.length }} aktivnosti (ena za vsako pogodbo).
-            </p>
-          </div>
+        <div class="space-y-2">
+          <Label>Pogodbe</Label>
+          <AppMultiSelect
+            v-model="form.contract_uuids"
+            :items="contractItems"
+            placeholder="Izberi pogodbe (neobvezno)"
+            search-placeholder="Išči pogodbo..."
+            empty-text="Ni pogodb."
+            :clearable="true"
+            :show-selected-chips="true"
+          />
+          <p
+            v-if="form.contract_uuids && form.contract_uuids.length > 1"
+            class="text-xs text-muted-foreground"
+          >
+            Bo ustvarjenih {{ form.contract_uuids.length }} aktivnosti (ena za vsako
+            pogodbo).
+          </p>
+        </div>
 
-          <div class="space-y-2">
-            <Label for="activityNote">Opomba</Label>
-            <Textarea
-              id="activityNote"
-              v-model="form.note"
-              class="block w-full"
-              placeholder="Opomba"
-            />
-          </div>
+        <div class="space-y-2">
+          <Label for="activityNote">Opomba</Label>
+          <Textarea
+            id="activityNote"
+            v-model="form.note"
+            class="block w-full max-h-72"
+            placeholder="Opomba"
+          />
+        </div>
 
-          <div class="space-y-2">
-            <Label for="activityDueDate">Datum zapadlosti</Label>
-            <DatePicker
-              id="activityDueDate"
-              v-model="form.due_date"
-              format="dd.MM.yyyy"
-              :error="form.errors.due_date"
-            />
-          </div>
+        <div class="space-y-2">
+          <Label for="activityDueDate">Datum zapadlosti</Label>
+          <DatePicker
+            id="activityDueDate"
+            v-model="form.due_date"
+            format="dd.MM.yyyy"
+            :error="form.errors.due_date"
+          />
+        </div>
 
-          <div class="space-y-2">
-            <Label for="activityAmount">Znesek</Label>
-            <CurrencyInput
-              id="activityAmount"
-              v-model="form.amount"
-              :precision="{ min: 0, max: 4 }"
-              placeholder="0,00"
-              class="w-full"
-            />
-          </div>
+        <div class="space-y-2">
+          <Label for="activityAmount">Znesek</Label>
+          <CurrencyInput
+            id="activityAmount"
+            v-model="form.amount"
+            :precision="{ min: 0, max: 4 }"
+            placeholder="0,00"
+            class="w-full"
+          />
+        </div>
 
-          <div v-if="showSendAutoMail()" class="space-y-2">
-            <div class="flex items-center justify-between">
-              <div class="flex items-center space-x-2">
-                <Switch
-                  v-model="form.send_auto_mail"
-                  :disabled="autoMailDisabled"
-                />
-                <Label class="cursor-pointer">Send auto email</Label>
-              </div>
+        <div v-if="showSendAutoMail()" class="space-y-2">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center space-x-2">
+              <Switch v-model="form.send_auto_mail" :disabled="autoMailDisabled" />
+              <Label class="cursor-pointer">Send auto email</Label>
             </div>
-            <p v-if="autoMailDisabled" class="text-xs text-amber-600">
-              {{ autoMailDisabledHint }}
-            </p>
+          </div>
+          <p v-if="autoMailDisabled" class="text-xs text-amber-600">
+            {{ autoMailDisabledHint }}
+          </p>
 
-            <div v-if="templateAllowsAttachments && form.contract_uuids && form.contract_uuids.length === 1" class="mt-3">
-              <label class="inline-flex items-center gap-2">
-                <Switch v-model="form.attach_documents" />
-                <span class="text-sm">Dodaj priponke iz izbrane pogodbe</span>
-              </label>
-              <div
-                v-if="form.attach_documents"
-                class="mt-2 border rounded p-2 max-h-48 overflow-auto"
-              >
-                <div class="text-xs text-gray-600 mb-2">
-                  Izberite dokumente, ki bodo poslani kot priponke:
-                </div>
-                <div class="space-y-1">
-                  <template v-for="c in pageContracts" :key="c.uuid || c.id">
-                    <div v-if="c.uuid === form.contract_uuids[0]">
-                      <div class="font-medium text-sm text-gray-700 mb-1">
-                        Pogodba {{ c.reference }}
-                      </div>
-                      <div class="space-y-1">
-                        <div
-                          v-for="doc in availableContractDocs"
-                          :key="doc.uuid || doc.id"
-                          class="flex items-center gap-2 text-sm"
-                        >
-                          <Switch
-                            :model-value="form.attachment_document_ids.includes(doc.id)"
-                            @update:model-value="(checked) => {
+          <div
+            v-if="
+              templateAllowsAttachments &&
+              form.contract_uuids &&
+              form.contract_uuids.length === 1
+            "
+            class="mt-3"
+          >
+            <label class="inline-flex items-center gap-2">
+              <Switch v-model="form.attach_documents" />
+              <span class="text-sm">Dodaj priponke iz izbrane pogodbe</span>
+            </label>
+            <div
+              v-if="form.attach_documents"
+              class="mt-2 border rounded p-2 max-h-48 overflow-auto"
+            >
+              <div class="text-xs text-gray-600 mb-2">
+                Izberite dokumente, ki bodo poslani kot priponke:
+              </div>
+              <div class="space-y-1">
+                <template v-for="c in pageContracts" :key="c.uuid || c.id">
+                  <div v-if="c.uuid === form.contract_uuids[0]">
+                    <div class="font-medium text-sm text-gray-700 mb-1">
+                      Pogodba {{ c.reference }}
+                    </div>
+                    <div class="space-y-1">
+                      <div
+                        v-for="doc in availableContractDocs"
+                        :key="doc.uuid || doc.id"
+                        class="flex items-center max-w-sm gap-2 text-sm"
+                      >
+                        <Switch
+                          :model-value="form.attachment_document_ids.includes(doc.id)"
+                          @update:model-value="
+                            (checked) => {
                               if (checked) {
                                 if (!form.attachment_document_ids.includes(doc.id)) {
                                   form.attachment_document_ids.push(doc.id);
                                 }
                               } else {
-                                form.attachment_document_ids = form.attachment_document_ids.filter(id => id !== doc.id);
+                                form.attachment_document_ids = form.attachment_document_ids.filter(
+                                  (id) => id !== doc.id
+                                );
                               }
-                            }"
-                          />
-                          <span>{{ doc.original_name || doc.name }}</span>
+                            }
+                          "
+                        />
+                        <div class="wrap-anywhere">
+                          <p>
+                            {{ doc.original_name || doc.name }}
+                          </p>
                           <span class="text-xs text-gray-400"
                             >({{ doc.extension?.toUpperCase() || "" }},
                             {{ (doc.size / 1024 / 1024).toFixed(2) }} MB)</span
@@ -467,22 +489,23 @@ watch(
                         </div>
                       </div>
                     </div>
-                  </template>
-                  <div
-                    v-if="availableContractDocs.length === 0"
-                    class="text-sm text-gray-500"
-                  >
-                    Ni dokumentov, povezanih s to pogodbo.
                   </div>
+                </template>
+                <div
+                  v-if="availableContractDocs.length === 0"
+                  class="text-sm text-gray-500"
+                >
+                  Ni dokumentov, povezanih s to pogodbo.
                 </div>
               </div>
             </div>
           </div>
-
-          <ActionMessage :on="form.recentlySuccessful" class="text-sm text-green-600">
-            Shranjuje.
-          </ActionMessage>
         </div>
-      </form>
-    </CreateDialog>
+
+        <ActionMessage :on="form.recentlySuccessful" class="text-sm text-green-600">
+          Shranjuje.
+        </ActionMessage>
+      </div>
+    </form>
+  </CreateDialog>
 </template>