> ## Documentation Index > Fetch the complete documentation index at: https://docs.doman.id/llms.txt > Use this file to discover all available pages before exploring further. # Advanced Tree Selector Data Format ## **Documentation: Data Format for the Advanced Tree Selector** This document defines the JSON object structure for a single "node" as expected by the `SelectAdvancedDialog.vue` component and generated by the Laravel `AdminController`'s tree-related methods (`postGetOptionTree`, `postGetOptionCompoundTree`). ### **Anatomy of a Single Node** Each item in the tree, whether it's a root element or a child, is an object with a standardized set of properties. ```json theme={null} { "id": "cat-110112", "name": "110112 - Mandiri Current Account", "text": "110112 - Mandiri Current Account", "node": { "_id": "60d5ecb0ef1a00002c004f7a", "accountCode": "110112", "accountName": "Mandiri Current Account", "parentId": "cat-1101" }, "children": [], "_type": "category", "_expanded": false, "_hasChildren": false, "_selectable": true } ``` *** ### **Property Breakdown** Properties are grouped by their purpose: Core Data, Hierarchy, and UI Control. Properties starting with an underscore `_` are considered metadata to control UI behavior. #### **Core Properties** These properties contain the essential data for the node. | Property | Type | Required? | Description | | :------- | :------- | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | | `id` | `String` | **Yes** | The unique identifier for the node. For compound trees, this will be prefixed (e.g., `group-123`, `cat-456`). | | `name` | `String` | **Yes** | The primary display text shown to the user in the list. This is generated by the backend from the `option_text_fields`. | | `text` | `String` | **Yes** | An alias for `name`. Both are provided for compatibility. | | `node` | `Object` | **Yes** | The original, raw data object (the full database document or row). This is useful for accessing any other data associated with the item after selection. | #### **Hierarchy Properties** These properties define the tree structure and enable lazy loading. | Property | Type | Required? | Description | | :------------- | :------------ | :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `Array` | **Yes** | An array containing child node objects. In **eager-load** mode, this is fully populated. In **lazy-load** mode, it's initially empty and filled by the frontend after an API call. | | `_hasChildren` | `Boolean` | **Yes** | **Crucial for Lazy Loading.** A flag from the backend indicating if this node has children, even if the `children` array is currently empty. The frontend uses this to decide whether to show an expander icon. | #### **UI State & Behavior Properties** These properties are generated by the backend to directly control how the node is rendered and behaves in the user interface. | Property | Type | Required? | Description | | :------------ | :-------- | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `_selectable` | `Boolean` | **Yes** | Determines if the user can select this node. If `false`, the frontend will disable the checkbox/radio and apply a "disabled" style. | | `_type` | `String` | Optional | A string identifier for the type of node (e.g., `'group'`, `'category'`). The frontend uses this to display different icons for different types of items. Defaults to `'node'`. | | `_expanded` | `Boolean` | **Yes** | An instruction from the backend. If `true`, the frontend will render this node in an expanded state by default. This is primarily used when a search result needs to reveal the full path to a nested item. | #### **Frontend-Managed Properties** The Vue component will add these properties to the object in memory for its internal state management. **They are not sent by the backend.** | Property | Description | | :------------------- | :--------------------------------------------------------------------------------------------------------------------- | | `isOpen` | A reactive boolean that tracks if the node is *currently* open or closed in the UI. It's initialized from `_expanded`. | | `_isLoadingChildren` | A flag used during lazy loading to show a spinner while the frontend is fetching the node's children. | | `_childrenLoaded` | A flag to prevent the frontend from re-fetching children that have already been loaded in a lazy-loading scenario. | ## **Dokumentasi (Bahasa Indonesia)** ## **Format Data untuk Pemilih Pohon (Tree Selector) Lanjutan** Dokumen ini mendefinisikan struktur objek JSON untuk sebuah "node" tunggal yang digunakan oleh komponen `SelectAdvancedDialog.vue` dan dihasilkan oleh metode-metode terkait pohon data di `AdminController` Laravel (`postGetOptionTree`, `postGetOptionCompoundTree`). ### **Anatomi Sebuah Node Tunggal** Setiap item di dalam pohon, baik elemen akar maupun turunan, adalah sebuah objek dengan properti yang terstandarisasi. ```json theme={null} { "id": "cat-110112", "name": "110112 - Mandiri Current Account", "text": "110112 - Mandiri Current Account", "node": { "_id": "60d5ecb0ef1a00002c004f7a", "accountCode": "110112", "accountName": "Mandiri Current Account", "parentId": "cat-1101" }, "children": [], "_type": "category", "_expanded": false, "_hasChildren": false, "_selectable": true } ``` ### **Rincian Properti** Properti dikelompokkan berdasarkan tujuannya: Data Inti, Hirarki, dan Kontrol UI. Properti yang diawali dengan garis bawah `_` dianggap sebagai metadata untuk mengontrol perilaku UI. #### **Properti Inti (Core Properties)** Properti ini berisi data esensial untuk sebuah node. | Properti | Tipe | Wajib? | Deskripsi | | :------- | :------- | :----- | :-------------------------------------------------------------------------------------------------------------------------------------- | | `id` | `String` | **Ya** | Pengenal unik untuk node. Untuk pohon gabungan (*compound tree*), ID ini akan memiliki awalan (misal, `group-123`, `cat-456`). | | `name` | `String` | **Ya** | Teks utama yang ditampilkan kepada pengguna di dalam daftar. Dihasilkan oleh backend dari konfigurasi `option_text_fields`. | | `text` | `String` | **Ya** | Alias untuk `name`. Keduanya disediakan untuk kompatibilitas. | | `node` | `Object` | **Ya** | Objek data asli yang mentah (dokumen atau baris database lengkap). Berguna untuk mengakses data lain yang terkait setelah item dipilih. | #### **Properti Hirarki (Hierarchy Properties)** Properti ini mendefinisikan struktur pohon dan memungkinkan *lazy loading*. | Properti | Tipe | Wajib? | Deskripsi | | :------------- | :------------ | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `children` | `Array` | **Ya** | Sebuah array yang berisi objek-objek node turunan. Dalam mode **eager-load**, array ini terisi penuh. Dalam mode **lazy-load**, array ini awalnya kosong dan diisi oleh frontend setelah panggilan API. | | `_hasChildren` | `Boolean` | **Ya** | **Penting untuk Lazy Loading.** Sebuah penanda dari backend yang menunjukkan jika node ini memiliki turunan, bahkan jika array `children` saat ini kosong. Frontend menggunakan ini untuk memutuskan apakah akan menampilkan ikon ekspansi. | #### **Properti Status & Perilaku UI (UI State & Behavior Properties)** Properti ini dihasilkan oleh backend untuk mengontrol secara langsung bagaimana node ditampilkan dan berperilaku di antarmuka pengguna. | Properti | Tipe | Wajib? | Deskripsi | | :------------ | :-------- | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `_selectable` | `Boolean` | **Ya** | Menentukan apakah pengguna dapat memilih node ini. Jika `false`, frontend akan menonaktifkan *checkbox*/*radio* dan menerapkan gaya "disabled". | | `_type` | `String` | Opsional | Pengenal string untuk tipe node (misal, `'group'`, `'category'`). Frontend menggunakan ini untuk menampilkan ikon yang berbeda untuk tipe item yang berbeda. Defaultnya adalah `'node'`. | | `_expanded` | `Boolean` | **Ya** | Instruksi dari backend. Jika `true`, frontend akan me-render node ini dalam keadaan terbuka secara default. Ini terutama digunakan saat hasil pencarian perlu menampilkan jalur lengkap ke item yang bersarang. | #### **Properti yang Dikelola Frontend (Frontend-Managed Properties)** Komponen Vue akan menambahkan properti-properti ini ke dalam objek di memori untuk manajemen status internalnya. **Properti ini tidak dikirim oleh backend.** | Properti | Deskripsi | | :------------------- | :------------------------------------------------------------------------------------------------------------------------------------- | | `isOpen` | Sebuah boolean reaktif yang melacak apakah node *saat ini* terbuka atau tertutup di UI. Nilai awalnya diambil dari `_expanded`. | | `_isLoadingChildren` | Sebuah penanda yang digunakan selama *lazy loading* untuk menampilkan *spinner* saat frontend sedang mengambil data turunan dari node. | | `_childrenLoaded` | Sebuah penanda untuk mencegah frontend mengambil ulang data turunan yang sudah pernah dimuat dalam skenario *lazy-loading*. |