fixed bug in permission edit where checked groups were not checked and remove left and right click image zooming

resources/js/Components/DocumentsTable/DocumentViewerDialog.vue

@@ -41,12 +41,11 @@ 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";
+  return "cursor-default";
 });
 
 const initImageView = () => {
@@ -112,20 +111,6 @@ 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);
@@ -152,7 +137,6 @@ const onMouseMove = (e) => {
 
 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);
@@ -338,8 +322,6 @@ watch(
             ref="containerRef"
             class="relative h-full overflow-hidden select-none"
             :class="imageCursorClass"
-            @click="handleClick"
-            @contextmenu="handleContextMenu"
             @mousedown="handleMouseDown"
             @wheel.prevent="handleWheel"
           >
@@ -377,7 +359,7 @@ watch(
               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
+              Kolesce za povečavo / pomanjšavo · Povleči za premik
             </div>
           </div>
         </template>

resources/js/Pages/Admin/Permissions/Edit.vue

@@ -2,7 +2,13 @@
 import AdminLayout from "@/Layouts/AdminLayout.vue";
 import { useForm, Link } from "@inertiajs/vue3";
 import { KeyRoundIcon, ArrowLeftIcon, SaveIcon } from "lucide-vue-next";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/Components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/Components/ui/card";
 import { Button } from "@/Components/ui/button";
 import { Input } from "@/Components/ui/input";
 import { Label } from "@/Components/ui/label";
@@ -36,12 +42,16 @@ function submit() {
         <CardHeader>
           <div class="flex items-start justify-between">
             <div class="flex items-start gap-3">
-              <div class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 text-primary">
+              <div
+                class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 text-primary"
+              >
                 <KeyRoundIcon class="h-5 w-5" />
               </div>
               <div>
                 <CardTitle>Uredi dovoljenje</CardTitle>
-                <CardDescription>Posodobi sistemsko dovoljenje in pripete vloge.</CardDescription>
+                <CardDescription
+                  >Posodobi sistemsko dovoljenje in pripete vloge.</CardDescription
+                >
               </div>
             </div>
             <Button variant="ghost" size="sm" as-child>
@@ -53,7 +63,6 @@ function submit() {
           </div>
         </CardHeader>
         <CardContent>
-
           <form @submit.prevent="submit" class="space-y-6">
             <div class="grid sm:grid-cols-2 gap-6">
               <div class="space-y-2">
@@ -86,16 +95,19 @@ function submit() {
                     class="flex items-center gap-2 text-sm cursor-pointer"
                   >
                     <Checkbox
-                      :value="r.id"
+                      :default-value="form.roles.includes(r.id)"
-                      :checked="form.roles.includes(r.id)"
+                      @update:model-value="
-                      @update:checked="(checked) => {
+                        (checked) => {
-                        if (checked) form.roles.push(r.id)
+                          if (checked) form.roles.push(r.id);
-                        else form.roles = form.roles.filter(id => id !== r.id)
+                          else form.roles = form.roles.filter((id) => id !== r.id);
-                      }"
+                        }
+                      "
                     />
                     <span
                       ><span class="font-medium">{{ r.name }}</span>
-                      <span class="text-xs text-muted-foreground">({{ r.slug }})</span></span
+                      <span class="text-xs text-muted-foreground"
+                        >({{ r.slug }})</span
+                      ></span
                     >
                   </label>
                 </div>