Added call later, option to limit auto mail so for a client person email you can limit which decision activity will be send to that specific email and moved SMS packages from admin panel to default app view

2026-03-08 21:42:39 +01:00
parent c16dd51199
commit b0d2aa93ab
32 changed files with 1103 additions and 174 deletions
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, watch } from "vue";
+import { ref, computed, watch, onUnmounted } from "vue";
 import {
  Dialog,
  DialogContent,
@@ -9,7 +9,7 @@ import {
 } from "@/Components/ui/dialog";
 import { Button } from "@/Components/ui/button";
 import { Badge } from "../ui/badge";
-import { Loader2 } from "lucide-vue-next";
+import { Loader2, RotateCcwIcon } from "lucide-vue-next";
 import axios from "axios";

 const props = defineProps({
@@ -26,6 +26,157 @@ const loading = ref(false);
 const previewGenerating = ref(false);
 const previewError = ref("");

+// Image viewer – zoom & pan state
+const containerRef = ref(null);
+const imageRef = ref(null);
+const imageScale = ref(1);
+const translateX = ref(0);
+const translateY = ref(0);
+const fitScale = ref(1);
+const isDragging = ref(false);
+const hasMoved = ref(false);
+const dragStartX = ref(0);
+const dragStartY = ref(0);
+const dragStartTX = ref(0);
+const dragStartTY = ref(0);
+
+const MAX_SCALE = 8;
+const ZOOM_FACTOR = 2;
+
+const imageCursorClass = computed(() => {
+  if (isDragging.value && hasMoved.value) return "cursor-grabbing";
+  if (imageScale.value > fitScale.value + 0.01) return "cursor-grab";
+  return "cursor-zoom-in";
+});
+
+const initImageView = () => {
+  const container = containerRef.value;
+  const img = imageRef.value;
+  if (!container || !img) return;
+  const cW = container.clientWidth;
+  const cH = container.clientHeight;
+  const iW = img.naturalWidth || cW;
+  const iH = img.naturalHeight || cH;
+  const fs = Math.min(cW / iW, cH / iH);
+  fitScale.value = fs;
+  imageScale.value = fs;
+  translateX.value = (cW - iW * fs) / 2;
+  translateY.value = (cH - iH * fs) / 2;
+};
+
+const resetImageView = () => {
+  initImageView();
+};
+
+const clampTranslate = (tx, ty, scale) => {
+  const container = containerRef.value;
+  const img = imageRef.value;
+  if (!container || !img) return { tx, ty };
+  const cW = container.clientWidth;
+  const cH = container.clientHeight;
+  const iW = img.naturalWidth * scale;
+  const iH = img.naturalHeight * scale;
+  // When image fills the container: clamp so image edges stay within container.
+  // When image is smaller than container: keep it centered.
+  const minX = iW >= cW ? cW - iW : (cW - iW) / 2;
+  const maxX = iW >= cW ? 0 : (cW - iW) / 2;
+  const minY = iH >= cH ? cH - iH : (cH - iH) / 2;
+  const maxY = iH >= cH ? 0 : (cH - iH) / 2;
+  return {
+    tx: Math.min(maxX, Math.max(minX, tx)),
+    ty: Math.min(maxY, Math.max(minY, ty)),
+  };
+};
+
+const zoomAt = (mx, my, factor) => {
+  const img = imageRef.value;
+  const iW = img?.naturalWidth ?? 1;
+  const iH = img?.naturalHeight ?? 1;
+  const raw = imageScale.value * factor;
+  const newScale = Math.min(MAX_SCALE, Math.max(fitScale.value, raw));
+  if (newScale === imageScale.value) return;
+  let tx = mx - ((mx - translateX.value) / imageScale.value) * newScale;
+  let ty = my - ((my - translateY.value) / imageScale.value) * newScale;
+  const clamped = clampTranslate(tx, ty, newScale);
+  translateX.value = clamped.tx;
+  translateY.value = clamped.ty;
+  imageScale.value = newScale;
+};
+
+const mousePos = (e) => {
+  const rect = containerRef.value.getBoundingClientRect();
+  return { mx: e.clientX - rect.left, my: e.clientY - rect.top };
+};
+
+const handleImageLoad = () => {
+  initImageView();
+};
+
+const handleClick = (e) => {
+  if (hasMoved.value) return;
+  const { mx, my } = mousePos(e);
+  zoomAt(mx, my, ZOOM_FACTOR);
+};
+
+const handleContextMenu = (e) => {
+  e.preventDefault();
+  if (hasMoved.value) return;
+  if (imageScale.value <= fitScale.value + 0.01) return;
+  const { mx, my } = mousePos(e);
+  zoomAt(mx, my, 1 / ZOOM_FACTOR);
+};
+
+const handleWheel = (e) => {
+  e.preventDefault();
+  const { mx, my } = mousePos(e);
+  zoomAt(mx, my, e.deltaY < 0 ? 1.2 : 1 / 1.2);
+};
+
+const onMouseMove = (e) => {
+  if (!isDragging.value) return;
+  const dx = e.clientX - dragStartX.value;
+  const dy = e.clientY - dragStartY.value;
+  if (!hasMoved.value && (Math.abs(dx) > 3 || Math.abs(dy) > 3)) {
+    hasMoved.value = true;
+  }
+  if (hasMoved.value) {
+    const clamped = clampTranslate(
+      dragStartTX.value + dx,
+      dragStartTY.value + dy,
+      imageScale.value
+    );
+    translateX.value = clamped.tx;
+    translateY.value = clamped.ty;
+  }
+};
+
+const onMouseUp = () => {
+  isDragging.value = false;
+  // Delay reset so the click/contextmenu handler that fires after mouseup can still read hasMoved
+  setTimeout(() => {
+    hasMoved.value = false;
+  }, 0);
+  window.removeEventListener("mousemove", onMouseMove);
+  window.removeEventListener("mouseup", onMouseUp);
+};
+
+const handleMouseDown = (e) => {
+  if (e.button !== 0) return;
+  isDragging.value = true;
+  hasMoved.value = false;
+  dragStartX.value = e.clientX;
+  dragStartY.value = e.clientY;
+  dragStartTX.value = translateX.value;
+  dragStartTY.value = translateY.value;
+  window.addEventListener("mousemove", onMouseMove);
+  window.addEventListener("mouseup", onMouseUp);
+};
+
+onUnmounted(() => {
+  window.removeEventListener("mousemove", onMouseMove);
+  window.removeEventListener("mouseup", onMouseUp);
+});
+
 const fileExtension = computed(() => {
  if (props.filename) {
    return props.filename.split(".").pop()?.toLowerCase() || "";
@@ -118,6 +269,10 @@ watch(
      previewGenerating.value = false;
      previewError.value = "";
      docxPreviewUrl.value = "";
+      imageScale.value = 1;
+      translateX.value = 0;
+      translateY.value = 0;
+      fitScale.value = 1;
    }
  },
  { immediate: true }
@@ -179,11 +334,52 @@ watch(

        <!-- Image Viewer -->
        <template v-else-if="viewerType === 'image' && props.src">
-          <img
-            :src="props.src"
-            :alt="props.title"
-            class="max-w-full max-h-full mx-auto object-contain"
-          />
+          <div
+            ref="containerRef"
+            class="relative h-full overflow-hidden select-none"
+            :class="imageCursorClass"
+            @click="handleClick"
+            @contextmenu="handleContextMenu"
+            @mousedown="handleMouseDown"
+            @wheel.prevent="handleWheel"
+          >
+            <img
+              ref="imageRef"
+              :src="props.src"
+              :alt="props.title"
+              class="absolute top-0 left-0 max-w-none pointer-events-none"
+              :style="{
+                transformOrigin: '0 0',
+                transform: `translate(${translateX}px, ${translateY}px) scale(${imageScale})`,
+                transition: isDragging ? 'none' : 'transform 0.12s ease',
+              }"
+              @load="handleImageLoad"
+            />
+            <!-- Zoom level badge -->
+            <div
+              class="absolute bottom-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded pointer-events-none"
+            >
+              {{ Math.round(imageScale * 100) }}%
+            </div>
+            <!-- Reset button -->
+            <Button
+              v-if="imageScale > fitScale + 0.01"
+              size="icon-sm"
+              variant="secondary"
+              class="absolute top-2 right-2 opacity-70 hover:opacity-100"
+              title="Ponastavi pogled"
+              @click.stop="resetImageView"
+            >
+              <RotateCcwIcon class="h-3 w-3" />
+            </Button>
+            <!-- Hint -->
+            <div
+              v-if="imageScale <= fitScale + 0.01"
+              class="absolute bottom-2 left-1/2 -translate-x-1/2 bg-black/40 text-white text-xs px-2 py-1 rounded pointer-events-none select-none"
+            >
+              Klik za povečavo · Desni klik / kolesce za pomanjšavo · Povleči za premik
+            </div>
+          </div>
        </template>

        <!-- Text/CSV/XML Viewer -->