Code Multiselect

mail@pastecode.io avatar
unknown
php_laravel_blade
3 years ago
6.3 kB
3
Indexable
<tr id="row{{$i}}" class="text-center input-row" data-row="{{$i}}">
  <td>
    <input data-date-autoclose="true" name="jobs[{{$i}}][date]" required type="text"
        class="form-control datepicker" data-date-format="yyyy-mm-dd" 
		value="{{ old('jobs.'.$i.'.date') }}"/>
  </td>

  <td>
    <input name="jobs[{{$i}}][line]" required type="text" class="form-control" 
	value="{{ old('jobs.'.$i.'.line') }}"/>
  </td>

  <td>
    <input name="jobs[{{$i}}][no_container]" required type="text"
        class="form-control number" value="{{ old('jobs.'.$i.'.no_container') }}"/>
  </td>

  <td>
    <div class="multiselect_div">
        <select name="jobs[{{$i}}][type_containers]" id="multiselect4-filter"
            class="multiselect multiselect-custom type_container{{$i}}" 
			onload="return addMultiSelect({{$i}})">

            @php
                $type_containers = \App\TypeContainer::all();
            @endphp

            @foreach ($type_containers as $type)
                <option {{ old('jobs.'.$i.'.type_containers') == $type->id ? 'selected' : '' }} 
				value="{{ $type->id }}"> {{ $type->name }} </option>
            @endforeach

        </select>
    </div>
  </td>

  <td>
    <div class="multiselect_div">
        <select name="jobs[{{$i}}][ports]" id="multiselect5-filter"
            class="multiselect multiselect-custom type_port{{$i}}" 
			onload="return addMultiSelect({{$i}})">
            @php
                $ports = \App\Port::all();
            @endphp
            @foreach ($ports as $port)
                <option {{ old('jobs.'.$i.'.type_containers') == $port->id ? 'selected' : '' }} value="{{ $port->id }}">{{ $port->name }}</option>
            @endforeach
        </select>
    </div>
  </td>
  <td>
    <div class="form-row align-items-center">
        <div class="col-md-6">
            <input name="jobs[{{$i}}][temperature]" required type="text" class="form-control" value="{{ old('jobs.'.$i.'.temperature') }}"/>
        </div>
        <div class="col-md-6">
            <select name="jobs[{{$i}}][temperatue_type]" required class="form-control" id="temperature_type">
                <option {{ old('jobs.'.$i.'.temperature_type') == 'C' ? 'selected' : '' }} value="C">Celcius</option>
                <option {{ old('jobs.'.$i.'.temperature_type') == 'K' ? 'selected' : '' }} value="K">Kelvin</option>
                <option {{ old('jobs.'.$i.'.temperature_type') == 'F' ? 'selected' : '' }} value="F">Fahrenheit</option>
            </select>
        </div>
    </div>
  </td>
  <td>
    <input name="jobs[{{$i}}][product_code]" required type="text" class="form-control" value="{{ old('jobs.'.$i.'.product_code') }}"/>
  </td>
  <td>
    <input name="jobs[{{$i}}][qty]" required type="text" class="form-control number" onkeypress="return onlyNumberKey(event)" value="{{ old('jobs.'.$i.'.qty') }}"/>
  </td>
  <td>
    <input name="jobs[{{$i}}][notes]" type="text" class="form-control" value="{{ old('jobs.'.$i.'.notes') }}"/>
  </td>

  @if ($i != 0)
    <td>
        <button class="delete-row btn btn-danger" type="button">
            <i class="fa fa-trash"></i>
        </button>
    </td>
  @endif
 </tr>

<script>
        $(document).on('keyup', '.number', function() {
            $(this).val($(this).val().replace(/[^0-9]/g, ''));
            const value = $(this).val()
            const subsstr = value.substring(0, 1)
            if (subsstr == 0) {
                $(this).val('')
            }
        })

        $('#multiselect4-filter').multiselect({
            enableFiltering: true,
            enableCaseInsensitiveFiltering: true,
            maxHeight: 200
        });
        
        $('#multiselect5-filter').multiselect({
            enableFiltering: true,
            enableCaseInsensitiveFiltering: true,
            maxHeight: 200
        });
        
        $('.datepicker').datepicker({
            startDate: '-0m',
        });


        function addMultiSelect(id) {
            $('#test-body').find(`select.type_container${id}`).multiselect({
                enableFiltering: true,
                enableCaseInsensitiveFiltering: true,
                maxHeight: 200
            });
        };

        // Remove criterion
        $(document).on("click", ".delete-row", function() {
            if (row > 1) {
                $(this).closest('tr').remove();
                row--;
            }
            return false;
        });

        // Add new row upload
        $("#add-upload-row").click(function() {
            var html = $(".clone").html();
            $(".increment").after(html);
        });

        $("body").on("click", "#delete-upload-row", function() {
            $(this).parents(".control-group").remove();
        });

        $(document).on('submit', 'form#form-excel', function(e) {
            e.preventDefault()
            const input = $('#file').val()
            if (input == '') {
                alert('please select the file first')
                return
            }
            let form_data = new FormData(this);
            $.ajax({
                type: 'post',
                url: "{{ route('import.jobs') }}",
                data: form_data,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json',
                beforeSend: function() {
                    setLoading()
                },
                success: function(res) {
                    if (res.status) {
                        hideLoading()
                        window.location.href = "{{ route('view.import.jobs') }}"

                    }
                },
                error: function(xhr) {
                    console.log(xhr);
                    //hideLoading()
                }
            })
        })

        function setLoading() {
            let loading_text = $('.btn-import-excel').data('loading-text');
            $('.btn-import-excel').html(loading_text).attr('disabled', true);
        }

        function hideLoading() {
            $('.btn-import-excel').html('Import').attr('disabled', false)
        }

    </script>