AdvancedRepeaterForm

# In your form definition YAML file
-
    label: "Journal Entry Detail"
    name: entryDetail
    type: advancedrepeaterform
    model: entryDetail

    # ACL properties - These should be set by your backend based on user permissions.
    # For example, in PHP: 'canAdd' => $user->can('create-journal-entry'),
    canAdd: true
    canEdit: true
    canDelete: true
    canUpload: false # Example: Disabling upload for this user role

    # Event handlers and validator function names
    on_form_change: handleFormChange # Binds to @onformchange
    on_item_change: detailCalc       # Binds to @onitemchange
    validator: validateEntryDetailForm # Binds to :validator

    # Blade template for the form injected into the #form slot
    form_template: fas.gl.journalentry._entry_detail_form

    # UI/UX settings
    inline_edit: true
    reorderable: true
    ordered: true

data() {
    return {
        // Corresponds to `model: entryDetail` in YAML. Bound with :items.sync
        entryDetail: [],

        // Used for :object-default. This is the template for a new item.
        entryDetailObjDef: {
            accountCode: null,
            entryType: 'DR',
            currency: 'IDR',
            amount: 0,
            idrEquiv: 0,
            description: ''
            // ... other fields initialized to their default values
        },

        // Data for business logic (e.g., exchange rates)
        exchangeRates: { 'IDR': 1, 'USD': 15500, 'EUR': 16800 },

        // Data for summary calculations
        amountDebit: 0,
        amountCredit: 0,
        balance: 'Balance'
    };
},

methods: {
    /**
     * Validator Function (name from `validator` in YAML)
     * Connects the repeater's "Save" button to your form's VeeValidate observer.
     */
    validateEntryDetailForm() {
        return this.$refs.journalEntryDetailsFormObserver.validate();
    },

    /**
     * Dependent Field Calculation (triggered from the slot template)
     */
    calculateIdrEquiv(formObject) {
        const rate = this.exchangeRates[formObject.currency] || 1;
        const amount = formObject.amount || 0;
        formObject.idrEquiv = amount * rate;
    },

    /**
     * Handler for `onitemchange` (name from `on_item_change` in YAML)
     * Ideal for recalculating totals for the entire list.
     */
    detailCalc(items) {
        // ... calculation logic from your example ...
        this.amountDebit = totalD;
        this.amountCredit = totalK;
        // ...
    },

    /**
     * Handler for `onformchange` (name from `on_form_change` in YAML)
     */
    handleFormChange(formObject) {
        console.log('Form data is changing:', formObject);
    }
}

<!-- The ref MUST match the one used in your validator method (e.g., journalEntryDetailsFormObserver) -->
<validation-observer ref="journalEntryDetailsFormObserver">
    <div id="journalEntryDetails">
        <!-- ... form fields ... -->
        <currency-input
            v-model="formObject.amount"
            @input="calculateIdrEquiv(formObject)"
            ...
        />
        <currency-input
            v-model="formObject.idrEquiv"
            :disabled="true"
            ...
        />
        <!-- ... other form fields ... -->
    </div>
</validation-observer>

# Di dalam file definisi form YAML Anda
-
    label: "Journal Entry Detail"
    name: entryDetail
    type: advancedrepeaterform
    model: entryDetail

    # Properti ACL - Ini harus diatur oleh backend Anda berdasarkan izin pengguna.
    # Contoh di PHP: 'canAdd' => $user->can('create-journal-entry'),
    canAdd: true
    canEdit: true
    canDelete: true
    canUpload: false # Contoh: Menonaktifkan upload untuk peran pengguna ini

    # Nama handler event dan fungsi validator
    on_form_change: handleFormChange # Terhubung ke @onformchange
    on_item_change: detailCalc       # Terhubung ke @onitemchange
    validator: validateEntryDetailForm # Terhubung ke :validator

    # Template Blade untuk formulir yang diinjeksi ke slot #form
    form_template: fas.gl.journalentry._entry_detail_form

    # Pengaturan UI/UX
    inline_edit: true
    reorderable: true
    ordered: true

data() {
    return {
        // Sesuai dengan `model: entryDetail` di YAML. Terhubung dengan :items.sync
        entryDetail: [],

        // Digunakan untuk :object-default. Ini adalah template untuk item baru.
        entryDetailObjDef: {
            accountCode: null,
            entryType: 'DR',
            currency: 'IDR',
            amount: 0,
            idrEquiv: 0,
            description: ''
            // ... field lain diinisialisasi dengan nilai defaultnya
        },

        // Data untuk logika bisnis (misal: kurs mata uang)
        exchangeRates: { 'IDR': 1, 'USD': 15500, 'EUR': 16800 },

        // Data untuk kalkulasi ringkasan
        amountDebit: 0,
        amountCredit: 0,
        balance: 'Balance'
    };
},

methods: {
    /**
     * Fungsi Validator (nama dari `validator` di YAML)
     * Menghubungkan tombol "Save" repeater ke observer VeeValidate di formulir Anda.
     */
    validateEntryDetailForm() {
        return this.$refs.journalEntryDetailsFormObserver.validate();
    },

    /**
     * Kalkulasi Bidang Terkait (dipicu dari template slot)
     */
    calculateIdrEquiv(formObject) {
        const rate = this.exchangeRates[formObject.currency] || 1;
        const amount = formObject.amount || 0;
        formObject.idrEquiv = amount * rate;
    },

    /**
     * Handler untuk `onitemchange` (nama dari `on_item_change` di YAML)
     * Ideal untuk menghitung ulang total untuk seluruh daftar.
     */
    detailCalc(items) {
        // ... logika kalkulasi dari contoh Anda ...
        this.amountDebit = totalD;
        this.amountCredit = totalK;
        // ...
    },

    /**
     * Handler untuk `onformchange` (nama dari `on_form_change` di YAML)
     */
    handleFormChange(formObject) {
        console.log('Data form sedang berubah:', formObject);
    }
}

<!-- Ref ini WAJIB cocok dengan yang digunakan di method validator Anda -->
<validation-observer ref="journalEntryDetailsFormObserver">
    <div id="journalEntryDetails">
        <!-- ... field formulir ... -->
        <currency-input
            v-model="formObject.amount"
            @input="calculateIdrEquiv(formObject)"
            ...
        />
        <currency-input
            v-model="formObject.idrEquiv"
            :disabled="true"
            ...
        />
        <!-- ... field formulir lainnya ... -->
    </div>
</validation-observer>