From f317351cfea27af087875db08d963125cbbebc77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96zt=C3=BCrk?= <sedat.ozturk@sozsoft.com>
Date: Sat, 16 Aug 2025 19:16:55 +0300
Subject: [PATCH] =?UTF-8?q?Menu=20Manager=20ekran=C4=B1ndaki=20PermissionL?=
 =?UTF-8?q?ist=20=C3=A7a=C4=9Fr=C4=B1s=C4=B1=20d=C3=BCzeltildi.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/views/menu/MenuItemComponent.tsx | 25 +++++--------------------
 ui/src/views/menu/SortableMenuTree.tsx  | 25 +++++++++++++++++++++++--
 2 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/ui/src/views/menu/MenuItemComponent.tsx b/ui/src/views/menu/MenuItemComponent.tsx
index 1b62c640..0105133f 100644
--- a/ui/src/views/menu/MenuItemComponent.tsx
+++ b/ui/src/views/menu/MenuItemComponent.tsx
@@ -19,11 +19,11 @@ import {
 } from '@/components/ui'
 import { Field, FieldProps, Form, Formik } from 'formik'
 import { SelectBoxOption } from '@/shared/types'
-import { getPermissionsList } from '@/services/identity.service'
 import { PermissionDefinitionRecord } from '@/proxy/admin/models'
 import * as Yup from 'yup'
 import { ExternalLink, FileText, Plus, Trash2 } from 'lucide-react'
 import { MenuDto } from '@/proxy/menus/models'
+import { getPermissionsList } from '@/services/identity.service'
 
 interface MenuItemComponentProps {
   item: MenuItem
@@ -32,6 +32,7 @@ interface MenuItemComponentProps {
   children?: React.ReactNode
   isDragOverlay?: boolean
   refetch: () => void
+  permissions: SelectBoxOption[]
 }
 
 export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
@@ -41,8 +42,8 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
   children,
   isDragOverlay = false,
   refetch,
+  permissions,
 }) => {
-  const [permissions, setPermissions] = useState<SelectBoxOption[]>([])
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: item.id || '',
     data: {
@@ -72,6 +73,8 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
     opacity: isDragging ? 0.5 : 1,
   }
 
+  console.log('Style', style)
+
   const [isExpanded, setIsExpanded] = useState(true)
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [formData, setFormData] = useState<Partial<MenuDto>>({
@@ -107,24 +110,6 @@ export const MenuItemComponent: React.FC<MenuItemComponentProps> = ({
     refetch()
   }
 
-  const getPermissionList = async () => {
-    const response = await getPermissionsList()
-    if (response.data) {
-      setPermissions(
-        response.data.map((permission: PermissionDefinitionRecord) => ({
-          value: permission.name,
-          label: permission.name,
-        })),
-      )
-    }
-  }
-
-  useEffect(() => {
-    if (permissions) {
-      getPermissionList()
-    }
-  }, [permissions])
-
   return (
     <div className="select-none">
       <div
diff --git a/ui/src/views/menu/SortableMenuTree.tsx b/ui/src/views/menu/SortableMenuTree.tsx
index 58f401e9..d444df6e 100644
--- a/ui/src/views/menu/SortableMenuTree.tsx
+++ b/ui/src/views/menu/SortableMenuTree.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import {
   DndContext,
   DragOverlay,
@@ -17,6 +17,9 @@ import {
 } from '@dnd-kit/sortable'
 import { MenuItemComponent } from './MenuItemComponent'
 import { MenuItem } from '@/@types/menu'
+import { getPermissionsList } from '@/services/identity.service'
+import { PermissionDefinitionRecord } from '@/proxy/admin/models'
+import { SelectBoxOption } from '@/shared/types'
 
 interface SortableMenuTreeProps {
   items: MenuItem[]
@@ -31,6 +34,7 @@ export const SortableMenuTree: React.FC<SortableMenuTreeProps> = ({
   isDesignMode,
   refetch,
 }) => {
+  const [permissions, setPermissions] = useState<SelectBoxOption[]>([])
   const [activeItem, setActiveItem] = React.useState<MenuItem | null>(null)
 
   const sensors = useSensors(
@@ -170,10 +174,26 @@ export const SortableMenuTree: React.FC<SortableMenuTreeProps> = ({
     onItemsChange(finalItems)
   }
 
+  useEffect(() => {
+    const fetchPermissions = async () => {
+      const response = await getPermissionsList()
+      if (response.data) {
+        setPermissions(
+          response.data.map((p: PermissionDefinitionRecord) => ({
+            value: p.name,
+            label: p.name,
+          })),
+        )
+      }
+    }
+
+    fetchPermissions()
+  }, [])
+
   const renderMenuItem = (item: MenuItem, depth: number = 0): React.ReactNode => {
     return (
       <div key={item.id}>
-        <MenuItemComponent item={item} isDesignMode={isDesignMode} depth={depth} refetch={refetch}>
+        <MenuItemComponent item={item} isDesignMode={isDesignMode} depth={depth} refetch={refetch} permissions={permissions}>
           {Array.isArray(item.children) && item.children.length > 0 && (
             <SortableContext
               items={item.children
@@ -208,6 +228,7 @@ export const SortableMenuTree: React.FC<SortableMenuTreeProps> = ({
             depth={0}
             isDragOverlay={true}
             refetch={refetch}
+            permissions={permissions}
           />
         ) : null}
       </DragOverlay>