initial commit

resources/js/Components/Admin/MenuItemList.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { Link } from "@inertiajs/vue3"
+import BaseButton from "@/Components/BaseButton.vue"
+import BaseButtons from "@/Components/BaseButtons.vue"
+import {
+    mdiSquareEditOutline,
+    mdiTrashCan,
+} from "@mdi/js"
+
+const props = defineProps({
+    item: {
+        type: Object,
+        default: () => ({}),
+    },
+    menu: {
+        type: Object,
+        default: () => ({}),
+    },
+    can: {
+        type: Object,
+        default: () => ({}),
+    },
+    level: {
+        type: Number,
+        default: 0
+    },
+})
+</script>
+
+<template>
+    <tr :key="item.id">
+        <td data-label="Name">
+            <div :style="{ 'margin-left': level * 20 + 'px' }">{{ item.name }}</div>
+        </td>
+        <td data-label="Description">
+            {{ item.description }}
+        </td>
+        <td data-label="Enabled">
+            {{ item.enabled }}
+        </td>
+        <td v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap">
+            <BaseButtons type="justify-start lg:justify-end" no-wrap>
+                <BaseButton v-if="can.edit" :route-name="route('menu.item.edit', { menu: menu.id, item: item.id })"
+                    color="info" :icon="mdiSquareEditOutline" small />
+                <BaseButton v-if="can.delete" color="danger" :icon="mdiTrashCan" small @click="destroy(item.id)" />
+            </BaseButtons>
+        </td>
+    </tr>
+    <template v-for="item in item.children">
+        <MenuItemList :item="item" :menu="menu" :can="can" :level="level + 1" />
+    </template>
+</template>