now menu drag and drop is autosaved

resources/js/Pages/Superuser/Menu/Index.vue

@@ -107,8 +107,14 @@ const destroy = async menu => {
 
 const submit = () => form.id ? update() : store()
 
+const timeout = ref(null)
 const save = () => {
-  return useForm({ menus: menus.value }).patch(route('superuser.menu.save'))
+  timeout.value && clearTimeout(timeout.value)
+  timeout.value = setTimeout(() => {
+    return useForm({ menus: menus.value }).patch(route('superuser.menu.save'), {
+      onFinish: () => clearTimeout(timeout.value)
+    }, 100)
+  })
 }
 
 const esc = e => e.key === 'Escape' && close()
@@ -143,18 +149,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
 
       <template #body>
         <div class="flex flex-col space-y-1 p-2 max-h-96 overflow-auto">
-          <Nested :menus="menus" :edit="edit" :destroy="destroy" />
-        </div>
-      </template>
-
-      <template #footer>
-        <div class="flex items-center space-x-1 dark:bg-gray-800 p-2">
-          <button @click.prevent="save" class="bg-green-600 hover:bg-green-700 rounded-md px-3 py-1 text-sm text-white transition-all">
-            <div class="flex items-center space-x-1">
-              <Icon name="save" />
-              <p class="uppercase font-semibold">save</p>
-            </div>
-          </button>
+          <Nested :menus="menus" :edit="edit" :destroy="destroy" :save="save" />
         </div>
       </template>
     </Card>

resources/js/Pages/Superuser/Menu/Nested.vue

@@ -4,8 +4,9 @@ import Dragable from 'vuedraggable'
 import Icon from '@/Components/Icon.vue'
 
 const self = getCurrentInstance()
-const { menus, edit, destroy } = defineProps({
+const { menus, edit, destroy, save } = defineProps({
   menus: Array,
+  save: Function,
   edit: Function,
   destroy: Function,
 })
@@ -16,7 +17,8 @@ const { menus, edit, destroy } = defineProps({
     tag="ul"
     :list="menus"
     :group="{ name: 'g1' }"
-    item-key="name">
+    item-key="id"
+    @change="save">
     <template #item="{ element }">
       <div class="flex flex-col space-y-1">
         <div class="flex items-center space-x-2 bg-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-900 rounded-md px-4 py-2 transition-all">
@@ -31,7 +33,7 @@ const { menus, edit, destroy } = defineProps({
           </div>
         </div>
 
-        <Nested :menus="element.childs" :edit="edit" :destroy="destroy" class="ml-8" />
+        <Nested :menus="element.childs" :edit="edit" :destroy="destroy" :save="save" class="ml-8" />
       </div>
     </template>
   </Dragable>