createdjob.blade.php

@extends('layouts.app')

@section('content')

<div class="content-wrapper">

    <!-- Page length options -->
    <div class="panel panel-flat">
        <div class="panel-heading">
            <h5 class="panel-title">{{ __("Manage Jobs") }} <a class="heading-elements-toggle"><i class="icon-more"></i></a></h5>
            <div class="heading-elements">
                <ul class="icons-list">
                    <li><a data-toggle="modal" data-target="#createJob"><i class="fa fa-plus"></i></a></li>
                </ul>
            </div>
        </div>

        <div class="panel-body">
            {{ __('Here you can manage your created jobs. You can edit job, activate jobs or delete jobs.') }}
            @include("partials.flash")
        </div>

        <table class="table datatable-show-all" id="all-jobs">
            <thead>
                <tr>
                    <th>{{ __('Job Name') }}</th>
                    <th>{{ __('Job Description') }}</th>
                    <th>{{ __('Job Status') }}</th>
                    <th>{{ __('Job Applications') }}</th>
                    <th>{{ __('Manage') }}</th>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="non_searchable"></td>
                    <td class="non_searchable"></td>
                </tr>
            </thead>
        </table>
    </div>

    <div id="app">
        <div id="editJob" class="modal fade in" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content" id="edit-job">
                    <edit-job :id="id"></edit-job>
                </div>
            </div>
        </div>

        <div id="createJob" class="modal fade in" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <create-job></create-job>
                </div>
            </div>
        </div>
    </div>

@stop

@push('scripts')
<script>

    var getID = function(id){
        app.id = id
    }

    var deleteJob = function(id){
        axios.get('/jobs/delete/' + id)
        .then(response => {
            if(response.data.status === true){
                getJobTable();
            }else{
                formError = response.data.message;
            }
        })
        .catch(error => this.errors.record(error.data))
    }

    var getJobTable = function(){
        $('#all-jobs').DataTable({
            bDestroy: true,
            bProcessing: false,
            processing: true,
            serverSide: true,
            autoWidth: false,
            columnDefs: [{
                orderable: false,
                width: '100px',
            }],
            dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
            language: {
                search: '<span>Filter:</span> _INPUT_',
                searchPlaceholder: 'Type to filter...',
                lengthMenu: '<span>Show:</span> _MENU_',
                paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
            },
            ajax: '{!! route('job.datatable.usersjobs') !!}',
            columns: [
                { data: 'name', name: 'name' },
                { data: 'summary', name: 'summary' },
                { data: 'status', name: 'status' },
                { data: 'applications', name: 'applications' },
                { data: 'action', name: 'action' },
            ],
            initComplete: function () {
                this.api().columns().every(function () {
                    var column = this;
                    var columnClass = column.header().className;
                    if(columnClass != 'non_searchable sorting' && columnClass != 'non_searchable sorting_asc'){
                        var input = document.createElement("input");
                        $(input).appendTo($(column.header()).empty())
                        .on('keyup', function () {
                            column.search($(this).val(), false, false, true).draw();
                        });
                    }
                });
            }
        });
    }
    $(function() {
        getJobTable();
    });

</script>
@endpush