Skip to content

Instantly share code, notes, and snippets.

@AndreiTelteu
Last active October 6, 2023 10:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AndreiTelteu/061d5069daed4a35d01df6e4387874af to your computer and use it in GitHub Desktop.
Save AndreiTelteu/061d5069daed4a35d01df6e4387874af to your computer and use it in GitHub Desktop.

demo gif

/resources/views/vendor/backpack/crud/fields/dependent_text.blade.php

{{-- dependent text input --}}
@php
    $field['wrapper'] = $field['wrapper'] ?? $field['wrapperAttributes'] ?? [];
    $field['wrapper']['data-field-name'] = $field['wrapper']['data-field-name'] ?? $field['name'];
    $field['wrapper']['data-depends-on'] = json_encode($field['depends_on'] ?? []);
    $field['wrapper']['data-init-function'] = $field['wrapper']['data-init-function'] ?? 'bpFieldInitDependentTestElement';
@endphp


@include('crud::fields.inc.wrapper_start')
    <label>{!! $field['label'] !!}</label>
    @include('crud::fields.inc.translatable_icon')

    @if(isset($field['prefix']) || isset($field['suffix'])) <div class="input-group"> @endif
        @if(isset($field['prefix'])) <div class="input-group-prepend"><span class="input-group-text">{!! $field['prefix'] !!}</span></div> @endif
        <input
            type="text"
            name="{{ $field['name'] }}"
            value="{{ old_empty_or_null($field['name'], '') ??  $field['value'] ?? $field['default'] ?? '' }}"
            @include('crud::fields.inc.attributes')
        >
        @if(isset($field['suffix'])) <div class="input-group-append"><span class="input-group-text">{!! $field['suffix'] !!}</span></div> @endif
    @if(isset($field['prefix']) || isset($field['suffix'])) </div> @endif

    {{-- HINT --}}
    @if (isset($field['hint']))
        <p class="help-block">{!! $field['hint'] !!}</p>
    @endif
    
    {{-- DEPENDENTCY --}}
    @if (isset($field['depends_on']))
    @endif
@include('crud::fields.inc.wrapper_end')


@push('crud_fields_scripts')
    @loadOnce('bpFieldInitDependentTestElement')
        <script>
            function bpFieldInitDependentTestElement(element) {
                var fieldData = element.data();
                if (fieldData && fieldData.dependsOn && Object.keys(fieldData.dependsOn).length) {
                    var depends_on_key = Object.keys(fieldData.dependsOn)[0];
                    var depends_on_value = Object.values(fieldData.dependsOn)[0];
                    var depends_on_selector = `[bp-field-name="${depends_on_key}"] input[name="${depends_on_key}"]`;
                    function show_hide_field(input, element) {
                        if (jQuery(input).val() == depends_on_value) {
                            element.show();
                        } else {
                            element.hide();
                        }
                    }
                    jQuery(document).on('change', depends_on_selector, function () {
                        show_hide_field(this, element);
                    });
                    show_hide_field(depends_on_selector, element);
                }
            }
        </script>
    @endLoadOnce
@endpush

In any crud controller, a simple example:

CRUD::field('has_contract')
    ->label('Contract')
    ->type('radio')
    ->options([ 0 => 'Without contract', 1 => 'With a contract' ]);
CRUD::field('contract_limit')
    ->label('Contract limit (USD)')
    ->type('dependent_text')
    ->depends_on(['has_contract' => 1]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment