ultimatepos/Modules/ProfessionalProject/Resources/views/task/index.blade.php

@extends('layouts.app')
@section('title', __('professionalproject::lang.tasks'))

@section('content')
@include('professionalproject::layouts.nav')
<section class="content-header">
    <h1>@lang('professionalproject::lang.tasks')</h1>
</section>
<section class="content pp-modern">
    <div class="pp-hero">
        <h3>@lang('professionalproject::lang.tasks')</h3>
        <p>نمای کانبان و لیست برای مدیریت سریع و هوشمند وظایف پروژه‌ها.</p>
    </div>
    <div class="box box-solid">
        <div class="box-header with-border">
            <h3 class="box-title">@lang('professionalproject::lang.tasks')</h3>
            <div class="box-tools pull-right">
                <div class="btn-group">
                    <label class="btn btn-info btn-sm @if($view == 'kanban') active @endif">
                        <input type="radio" name="task_view" value="kanban" class="task_view_toggle" checked> @lang('professionalproject::lang.kanban_board')
                    </label>
                    <label class="btn btn-info btn-sm @if($view == 'list') active @endif">
                        <input type="radio" name="task_view" value="list" class="task_view_toggle"> @lang('professionalproject::lang.list_view')
                    </label>
                </div>
                @can('professionalproject.create_task')
                <a href="{{ action([\Modules\ProfessionalProject\Http\Controllers\TaskController::class, 'create']) }}" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i> @lang('professionalproject::lang.create_task')</a>
                @endcan
            </div>
        </div>
        <div class="box-body">
            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        {!! Form::label('project_filter', __('professionalproject::lang.projects') . ':') !!}
                        {!! Form::select('project_filter', $projects, $project_id, ['class' => 'form-control select2', 'placeholder' => __('messages.all')]) !!}
                    </div>
                </div>
            </div>
            <div id="pp_tasks_container"></div>
            <div id="pp_tasks_list" style="display:none;">
                <table class="table table-bordered table-striped" id="pp_task_datatable" style="width:100%">
                    <thead>
                        <tr>
                            <th>@lang('messages.name')</th>
                            <th>@lang('professionalproject::lang.projects')</th>
                            <th>@lang('sale.status')</th>
                            <th>@lang('professionalproject::lang.priority_low')</th>
                            <th>@lang('messages.action')</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</section>
@endsection

@section('css')
@include('professionalproject::layouts.professional_style')
@endsection

@section('javascript')
<script>
$(document).ready(function() {
    var currentView = '{{ $view }}';

    function loadKanban() {
        $.ajax({
            url: '{{ action([\Modules\ProfessionalProject\Http\Controllers\TaskController::class, "index"]) }}',
            data: { view: 'kanban', project_id: $('#project_filter').val() },
            success: function(html) {
                $('#pp_tasks_container').html(html).show();
                $('#pp_tasks_list').hide();
                initKanbanDrag();
            }
        });
    }

    function loadList() {
        $('#pp_tasks_container').hide();
        $('#pp_tasks_list').show();
        if ($.fn.DataTable.isDataTable('#pp_task_datatable')) {
            $('#pp_task_datatable').DataTable().ajax.reload();
        } else {
            $('#pp_task_datatable').DataTable({
                processing: true, serverSide: true,
                ajax: { url: '{{ action([\Modules\ProfessionalProject\Http\Controllers\TaskController::class, "index"]) }}', data: function(d) { d.view = 'list'; d.project_id = $('#project_filter').val(); } },
                columns: [
                    { data: 'title', name: 'title' },
                    { data: 'project.name', name: 'project.name', defaultContent: '' },
                    { data: 'status_id', name: 'status_id' },
                    { data: 'priority', name: 'priority' },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ]
            });
        }
    }

    function initKanbanDrag() {
        $('.pp-kanban-task').draggable({
            revert: 'invalid', helper: 'clone', zIndex: 1000,
            start: function() { $(this).addClass('dragging'); },
            stop: function() { $(this).removeClass('dragging'); }
        });
        $('.pp-kanban-column-body').droppable({
            accept: '.pp-kanban-task',
            drop: function(e, ui) {
                var taskId = ui.draggable.data('task-id');
                var statusId = $(this).data('status-id');
                var position = $(this).find('.pp-kanban-task').length * 16384;
                $.post('{{ action([\Modules\ProfessionalProject\Http\Controllers\TaskController::class, "updateKanbanPosition"]) }}', {
                    _token: '{{ csrf_token() }}', task_id: taskId, status_id: statusId, position: position
                }, function(r) { if (r.success) loadKanban(); else toastr.error(r.msg); });
            }
        });
    }

    if (currentView === 'list') loadList(); else loadKanban();
    $('#project_filter').change(function() { currentView === 'list' ? loadList() : loadKanban(); });
    $('.task_view_toggle').change(function() {
        currentView = $(this).val();
        currentView === 'list' ? loadList() : loadKanban();
    });
    $(document).on('click', '.delete_task', function(e) {
        e.preventDefault();
        var url = $(this).data('href');
        swal({ title: LANG.sure, icon: 'warning', buttons: true, dangerMode: true }).then(function(ok) {
            if (ok) $.ajax({ method: 'DELETE', url: url, data: { _token: '{{ csrf_token() }}' }, success: function(r) {
                if (r.success) { toastr.success(r.msg); currentView === 'list' ? loadList() : loadKanban(); } else toastr.error(r.msg);
            }});
        });
    });
});
</script>
@endsection