Use Case for Sidebar Tree Data Table

<!-- TreeGroupEditor.vue -->
<template>
    <ul class="tree-group-list">
        <li v-for="node in nodes" :key="node.id">
            <div class="tree-node" :class="{ 'selected': node.id === selectedNodeId }" >
                <div class="node-content" @click="selectNode(node)">
                    <!-- Icon combination for expander and node type -->
                    <span class="node-icon-wrapper">
                        <!-- Expander Chevron (rotates) -->
                        <i v-if="hasChildren(node)"
                           class="las la-angle-right expand-icon"
                           :class="{ 'rotated': node.isOpen }"
                        ></i>
                        <!-- Placeholder for alignment -->
                        <span v-else class="expand-placeholder"></span>

                        <!-- Folder/Item Icon -->
                        <i class="node-icon" :class="getNodeIcon(node)"></i>
                    </span>

                    <!-- Name -->
                    <span class="node-name ellipsis">{{ node.name }}</span>
                </div>

                <div class="actions d-flex align-items-center">
                    <button class="btn btn-sm btn-link text-success p-0 me-1" title="Add Child" @click.stop="$emit('add-child-node', node)">
                        <i class="las la-plus-circle"></i>
                    </button>
                    <b-dropdown size="sm" variant="link" toggle-class="text-decoration-none" no-caret right @click.stop>
                        <template #button-content>
                            <i class="las la-ellipsis-v text-secondary"></i>
                        </template>
                        <b-dropdown-item @click="$emit('edit-node', node)">
                            <i class="las la-edit me-2"></i>Edit
                        </b-dropdown-item>
                        <b-dropdown-divider></b-dropdown-divider>
                        <b-dropdown-item variant="danger" @click="$emit('delete-node', node)">
                            <i class="las la-trash me-2"></i>Delete
                        </b-dropdown-item>
                    </b-dropdown>
                </div>
            </div>

            <!-- Recursive Rendering -->
            <TreeGroupEditor
                v-if="hasChildren(node) && node.isOpen"
                :nodes="node.children"
                :selected-node-id="selectedNodeId"
                @node-selected="bubbleSelect"
                @edit-node="bubbleEdit"
                @add-child-node="bubbleAddChild"
                @delete-node="bubbleDelete"
            />
        </li>
    </ul>
</template>

<script>
export default {
    name: 'TreeGroupEditor',
    props: {
        nodes: { type: Array, required: true },
        selectedNodeId: { type: [String, Number], default: null },
    },
    methods: {
        hasChildren(node) {
            return node.children && node.children.length > 0;
        },
        selectNode(node) {
            this.$emit('node-selected', node);
            if (this.hasChildren(node)) {
                this.toggle(node);
            }
        },
        toggle(node) {
            this.$set(node, 'isOpen', !node.isOpen);
        },
        getNodeIcon(node) {
            if (this.hasChildren(node)) {
                return node.isOpen ? 'las la-folder-open' : 'las la-folder';
            }
            // Use _type from backend for more specific icons if available
            return node._type === 'category' ? 'lar la-bookmark' : 'lar la-circle';
        },
        // --- Event Bubbling Methods ---
        bubbleSelect(node) { this.$emit('node-selected', node); },
        bubbleEdit(node) { this.$emit('edit-node', node); },
        bubbleAddChild(node) { this.$emit('add-child-node', node); },
        bubbleDelete(node) { this.$emit('delete-node', node); },
    }
};
</script>

<style scoped>
.tree-group-list { list-style-type: none; padding-left: 1rem; }
.tree-node { padding: 0.4rem 0.5rem; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: background-color 0.15s ease-in-out; }
.tree-node:hover { background-color: #f0f3f5; }
.tree-node.selected { background-color: #e0e9f5; font-weight: bold; }
.node-content { display: flex; align-items: center; min-width: 0; flex-grow: 1; }
.node-icon-wrapper { display: flex; align-items: center; margin-right: 5px; }
.expand-icon { transition: transform 0.2s; font-size: 0.8rem; }
.expand-icon.rotated { transform: rotate(90deg); }
.expand-placeholder { width: 0.8rem; /* Match width of expand-icon */ }
.node-icon { font-size: 1.1rem; color: #6c757d; margin-left: 2px; }
.node-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actions { visibility: hidden; opacity: 0; transition: opacity 0.15s ease-in-out; }
.tree-node:hover .actions { visibility: visible; opacity: 1; }
.actions .btn i { font-size: 1.2rem; }
::v-deep .b-dropdown .btn { padding: 0 0.25rem; }
::v-deep .b-dropdown .dropdown-toggle::after { display: none; }
.dropdown-item { display: flex; align-items: center; font-size: 0.9rem; }
.dropdown-item i { font-size: 1.1rem; }
</style>

<!-- ArticleManager.vue -->
<template>
  <div>
    <SidebarTreeTable
      sidebar-title="Article Categories"
      content-title="Articles in Category:"
      :columns="articleColumns"
      :nodes-url="'/api/category/get-option-tree'"
      :loader="loadArticles"
      :rows="articles"
      :total-rows="totalArticles"
      :is-loading="isLoadingArticles"
      @add-node="openCategoryModal"
      @edit-node="openCategoryModal"
      @delete-node="deleteCategory"
      @node-selected="logSelectedCategory"
    />

    <!-- MODAL for Adding/Editing Categories -->
    <b-modal id="category-modal" :title="modalTitle" @ok="saveCategory">
      <!-- Your form for category details -->
      <form ref="categoryForm">
        <input v-model="currentCategory.name" class="form-control" />
        <!-- Hidden input for parentId -->
        <input type="hidden" v-model="currentCategory.parentId" />
      </form>
    </b-modal>
  </div>
</template>

// In ArticleManager.vue <script>
export default {
    data() {
        return {
            articleColumns: [ /* ... column definitions for articles ... */ ],
            articles: [],
            totalArticles: 0,
            isLoadingArticles: false,

            // For the category modal
            currentCategory: {},
            modalTitle: '',
        };
    },
    methods: {
        async loadArticles(params) {
            this.isLoadingArticles = true;
            try {
                // The 'params' object contains { pagination, sort, filters, etc. }
                // The categoryId is automatically added to params.filters by SidebarTreeTable
                const response = await axios.post('/api/article/index', params);
                this.articles = response.data.data;
                this.totalArticles = response.data.total;
            } catch (error) {
                console.error("Failed to load articles:", error);
            } finally {
                this.isLoadingArticles = false;
            }
        },
        // ... other methods
    }
}

// In ArticleManager.vue methods
methods: {
    // ... loadArticles method from above ...

    openCategoryModal(payload) {
        if (payload.parentId !== undefined) { // This is an "add" event
            this.modalTitle = payload.parentNode ? `Add Child to "${payload.parentNode.name}"` : 'Add Root Category';
            this.currentCategory = { parentId: payload.parentId, name: '' };
        } else { // This is an "edit" event
            this.modalTitle = `Edit "${payload.name}"`;
            this.currentCategory = { ...payload }; // Copy the node data to the form model
        }
        this.$bvModal.show('category-modal');
    },

    async saveCategory() {
        try {
            if (this.currentCategory.id) { // Editing existing category
                await axios.put(`/api/category/${this.currentCategory.id}`, this.currentCategory);
            } else { // Creating new category
                await axios.post('/api/category', this.currentCategory);
            }
            // After saving, refresh the tree by calling a method on the child component
            // Note: This requires adding a `ref` to the SidebarTreeTable component
            this.$refs.sidebarTree.fetchTree();
        } catch (error) {
            console.error("Failed to save category:", error);
            // Show an error toast
        }
    },

    async deleteCategory(node) {
        try {
            await axios.delete(`/api/category/${node.id}`);
            // Refresh the tree to show the change
            this.$refs.sidebarTree.fetchTree();
        } catch (error) {
            console.error("Failed to delete category:", error);
        }
    },

    logSelectedCategory(node) {
        console.log('User selected category:', node.name);
    }
}

<!-- ArticleManager.vue -->
<template>
    <div>
        <SidebarTreeTable
            sidebar-title="Kategori Artikel"
            content-title="Artikel dalam Kategori:"
        :columns="articleColumns"
        :nodes-url="'/api/category/get-option-tree'"
        :loader="loadArticles"
        :rows="articles"
        :total-rows="totalArticles"
        :is-loading="isLoadingArticles"
        @add-node="openCategoryModal"
        @edit-node="openCategoryModal"
        @delete-node="deleteCategory"
        />

        <!-- MODAL untuk Tambah/Edit Kategori -->
        <b-modal id="category-modal" :title="modalTitle" @ok="saveCategory">
        <form ref="categoryForm">
            <input v-model="currentCategory.name" class="form-control" />
            <input type="hidden" v-model="currentCategory.parentId" />
        </form>
    </b-modal>
</div>
</template>

// Di dalam <script> ArticleManager.vue
export default {
    data() {
        return {
            articleColumns: [ /* ... definisi kolom untuk artikel ... */ ],
            articles: [],
            totalArticles: 0,
            isLoadingArticles: false,
            currentCategory: {},
            modalTitle: '',
        };
    },
    methods: {
        async loadArticles(params) {
            this.isLoadingArticles = true;
            try {
                // Objek 'params' berisi { pagination, sort, filters, dll. }
                // filter categoryId secara otomatis ditambahkan ke params.filters oleh SidebarTreeTable
                const response = await axios.post('/api/article/index', params);
                this.articles = response.data.data;
                this.totalArticles = response.data.total;
            } catch (error) { console.error("Gagal memuat artikel:", error); }
            finally { this.isLoadingArticles = false; }
        },
        // ... metode lainnya
    }
}

// Di dalam methods ArticleManager.vue
methods: {
    // ... metode loadArticles dari atas ...

    openCategoryModal(payload) {
        if (payload.parentId !== undefined) { // Ini adalah event "tambah"
            this.modalTitle = payload.parentNode ? `Tambah Anak di "${payload.parentNode.name}"` : 'Tambah Kategori Akar';
            this.currentCategory = { parentId: payload.parentId, name: '' };
        } else { // Ini adalah event "edit"
            this.modalTitle = `Edit "${payload.name}"`;
            this.currentCategory = { ...payload };
        }
        this.$bvModal.show('category-modal');
    },

    async saveCategory() {
        try {
            if (this.currentCategory.id) { // Edit
                await axios.put(`/api/category/${this.currentCategory.id}`, this.currentCategory);
            } else { // Buat baru
                await axios.post('/api/category', this.currentCategory);
            }
            // Setelah menyimpan, perbarui pohon dengan memanggil metode di komponen anak
            // Catatan: Ini memerlukan penambahan `ref` pada komponen SidebarTreeTable
            this.$refs.sidebarTree.fetchTree();
        } catch (error) { console.error("Gagal menyimpan kategori:", error); }
    },

    async deleteCategory(node) {
        try {
            await axios.delete(`/api/category/${node.id}`);
            this.$refs.sidebarTree.fetchTree();
        } catch (error) { console.error("Gagal menghapus kategori:", error); }
    },
}