Select Advanced Dialog

​

English Documentation

​

1. Vue Component: SelectAdvancedDialog.vue

​

Key Features

• Modal Dialog: Provides a large, user-friendly interface for selecting items, complete with search and pagination.
• Single & Multi-Select: Can be configured to allow selecting one or multiple items.
• Read-only vs. Editable:
• In readonly mode (default), it acts as a pure item selector. Clicking the input opens the modal.
• When readonly is false, it functions as a combo-box, allowing the user to either type a free-text value or select a structured item from the modal.
• Server-Side Data: Fetches options asynchronously from a specified API endpoint, making it suitable for large datasets.
• Tree View & Lazy Loading: Can display hierarchical data and efficiently load child nodes on demand.

​

Props

​

Events

​

Usage Example

<template>
  <div>
    <!-- Example 1: Read-only, single selection for a User -->
    <SelectAdvancedDialog
      v-model="selectedUserId"
      :selected-items.sync="selectedUserObjects"
      url="/api/users/get-options"
      display-field="name"
      mode="single"
      :readonly="true"
    />

    <!-- Example 2: Editable, multi-selection for Chart of Accounts -->
    <SelectAdvancedDialog
      v-model="accountNumbersOrText"
      :selected-items.sync="selectedAccountObjects"
      url="/api/wcp/fat2/chart-of-account/get-option-tree"
      display-field="name"
      mode="multi"
      :readonly="false"
      lazy-load
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // For Example 1
      selectedUserId: null,
      selectedUserObjects: [],

      // For Example 2
      accountNumbersOrText: '', // Can be an array of IDs or typed text
      selectedAccountObjects: []
    }
  }
}
</script>

​

2. Laravel Backend Controller

​

Relationship with SelectAdvancedDialog.vue

• The url prop in the Vue component should point to the route that executes this method (e.g., /wcp/fat2/chart-of-account/get-option-tree).
• The method handles search, pagination, and lazy-loading requests initiated by the component.

​

Key Configuration Properties in ChartOfAccountController

​

Data Endpoint Analysis (postGetOptionTree)

• Request: The endpoint expects a POST request with an optional JSON body containing:
• search (string): The search term from the modal’s input.
• page (integer): The requested page number for pagination.
• limit (integer): The number of items per page.
• parentId (string/int): The ID of the parent node when lazy-loading children.
• Response: The response is a standard Laravel paginated JSON object that the Vue component is built to understand.

{
  "current_page": 1,
  "data": [
    {
      "id": "1101",
      "name": "1101 - Cash on Hand",
      "text": "1101 - Cash on Hand",
      "parent": "",
      "node": { ...full_chart_of_account_object },
      "children": [],
      "_hasChildren": true,
      "_selectable": true
    }
  ],
  "total": 50,
  "per_page": 20,
  ...
}

​

Dokumentasi Bahasa Indonesia

​

1. Komponen Vue: SelectAdvancedDialog.vue

​

Fitur Utama

• Dialog Modal: Menyediakan antarmuka yang besar dan ramah pengguna untuk memilih item, lengkap dengan pencarian dan paginasi.
• Seleksi Tunggal & Ganda: Dapat dikonfigurasi untuk memungkinkan pemilihan satu atau beberapa item.
• Read-only vs. Editable:
• Dalam mode readonly (default), komponen ini berfungsi sebagai pemilih item murni. Mengklik input akan membuka modal.
• Ketika readonly diatur ke false, komponen ini berfungsi sebagai combo-box, memungkinkan pengguna untuk mengetik nilai teks bebas atau memilih item terstruktur dari modal.
• Data dari Server: Mengambil opsi secara asinkron dari endpoint API yang ditentukan, sehingga cocok untuk dataset yang sangat besar.
• Tampilan Pohon & Lazy Loading: Dapat menampilkan data hierarkis dan memuat child node secara efisien sesuai permintaan.

​

Props

​

Events

​

Contoh Penggunaan

<template>
  <div>
    <!-- Contoh 1: Read-only, seleksi tunggal untuk Pengguna -->
    <SelectAdvancedDialog
      v-model="selectedUserId"
      :selected-items.sync="selectedUserObjects"
      url="/api/users/get-options"
      display-field="name"
      mode="single"
      :readonly="true"
    />

    <!-- Contoh 2: Editable, seleksi ganda untuk Bagan Akun (Chart of Accounts) -->
    <SelectAdvancedDialog
      v-model="accountNumbersOrText"
      :selected-items.sync="selectedAccountObjects"
      url="/api/wcp/fat2/chart-of-account/get-option-tree"
      display-field="name"
      mode="multi"
      :readonly="false"
      lazy-load
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // Untuk Contoh 1
      selectedUserId: null,
      selectedUserObjects: [],

      // Untuk Contoh 2
      accountNumbersOrText: '', // Bisa berupa array ID atau teks yang diketik
      selectedAccountObjects: []
    }
  }
}
</script>

​

2. Controller Backend Laravel

​

Hubungan dengan SelectAdvancedDialog.vue

• Prop url di komponen Vue harus menunjuk ke route yang mengeksekusi metode ini (misalnya, /wcp/fat2/chart-of-account/get-option-tree).
• Metode ini menangani permintaan pencarian, paginasi, dan lazy-loading yang diinisiasi oleh komponen.

​

Properti Konfigurasi Utama di ChartOfAccountController

​

Analisis Endpoint Data (postGetOptionTree)

• Request: Endpoint ini mengharapkan permintaan POST dengan body JSON opsional yang berisi:
• search (string): Kata kunci pencarian dari input di modal.
• page (integer): Nomor halaman yang diminta untuk paginasi.
• limit (integer): Jumlah item per halaman.
• parentId (string/int): ID dari node induk saat melakukan lazy-loading turunan.
• Response: Respons yang diberikan adalah objek JSON terpaginasi standar dari Laravel yang sudah dirancang untuk dipahami oleh komponen Vue.

{
  "current_page": 1,
  "data": [
    {
      "id": "1101",
      "name": "1101 - Cash on Hand",
      "text": "1101 - Cash on Hand",
      "parent": "",
      "node": { ...objek_lengkap_chart_of_account... },
      "children": [],
      "_hasChildren": true,
      "_selectable": true
    }
  ],
  "total": 50,
  "per_page": 20,
  ...
}