whoami7 - Manager
:
/
home
/
kckglobal
/
www
/
portal
/
resources
/
views
/
taskboard
/
Upload File:
files >> /home/kckglobal/www/portal/resources/views/taskboard/index.blade.php
@extends('layouts.app') @push('styles') <!-- Drag and Drop CSS --> <link rel='stylesheet' href="{{ asset('vendor/css/dragula.css') }}" type='text/css' /> <link rel='stylesheet' href="{{ asset('vendor/css/drag.css') }}" type='text/css' /> <link rel="stylesheet" href="{{ asset('vendor/css/bootstrap-colorpicker.css') }}" /> <style> #colorpicker .form-group { width: 87%; } .b-p-tasks { min-height: 90%; } </style> @endpush @php $addTaskPermission = user()->permission('add_tasks'); $viewUnassignedTasksPermission = user()->permission('view_unassigned_tasks'); @endphp @section('filter-section') <x-filters.filter-box> <!-- DATE START --> <div class="select-box d-flex pr-2 border-right-grey border-right-grey-sm-0"> <p class="mb-0 pr-2 f-14 text-dark-grey d-flex align-items-center">@lang('app.duration')</p> <div class="input-group input-daterange"> <input type="text" class="position-relative text-dark date-range-field form-control border-0 p-0 text-left f-14 f-w-500" id="start-date" placeholder="@lang('app.startDate')"> <div class="input-group-addon datePickerInput d-flex align-items-center pr-3">@lang('app.to')</div> <input type="text" class="date-range-field1 text-dark form-control border-0 p-0 text-left f-14 f-w-500" id="end-date" placeholder="@lang('app.endDate')"> </div> </div> <!-- DATE END --> <!-- SEARCH BY TASK START --> <div class="task-search d-flex py-1 px-lg-3 px-0 border-right-grey align-items-center"> <form class="w-100 mr-1 mr-lg-0 mr-md-1 ml-md-1 ml-0 ml-lg-0"> <div class="input-group bg-grey rounded"> <div class="input-group-prepend"> <span class="input-group-text border-0 bg-additional-grey"> <i class="fa fa-search f-13 text-dark-grey"></i> </span> </div> <input type="text" class="form-control f-14 p-1 border-additional-grey" id="search-text-field" placeholder="@lang('app.startTyping')"> </div> </form> </div> <!-- SEARCH BY TASK END --> <!-- RESET START --> <div class="select-box d-flex py-1 px-lg-2 px-md-2 px-0"> <x-forms.button-secondary class="btn-xs d-none" id="reset-filters" icon="times-circle"> @lang('app.clearFilters') </x-forms.button-secondary> </div> <!-- RESET END --> <!-- MORE FILTERS START --> <x-filters.more-filter-box> <div class="more-filter-items"> <label class="f-14 text-dark-grey mb-12 " for="usr">@lang('app.dateFilterOn')</label> <div class="select-filter mb-4"> <select class="form-control select-picker" name="date_filter_on" id="date_filter_on"> <option value="start_date">@lang('app.startDate')</option> <option value="due_date">@lang('app.dueDate')</option> <option value="completed_on">@lang('app.dateCompleted')</option> </select> </div> </div> <div class="more-filter-items"> <label class="f-14 text-dark-grey mb-12 " for="usr">@lang('app.project')</label> <div class="select-filter mb-4"> <div class="select-others"> <select class="form-control select-picker" name="project_id" id="project_id" data-live-search="true" data-container="body" data-size="8"> <option value="all">@lang('app.all')</option> @foreach ($projects as $project) <option value="{{ $project->id }}">{{ $project->project_name }}</option> @endforeach </select> </div> </div> </div> <div class="more-filter-items"> <label class="f-14 text-dark-grey mb-12 " for="usr">@lang('app.client')</label> <div class="select-filter mb-4"> <div class="select-others"> <select class="form-control select-picker" id="clientID" data-live-search="true" data-container="body" data-size="8"> <option value="all">@lang('app.all')</option> @foreach ($clients as $client) <x-user-option :user="$client"></x-user-option> @endforeach </select> </div> </div> </div> <div class="more-filter-items"> <label class="f-14 text-dark-grey mb-12 " for="usr">@lang('modules.tasks.assignTo')</label> <div class="select-filter mb-4"> <div class="select-others"> <select class="form-control select-picker" id="assignedTo" data-live-search="true" data-container="body" data-size="8"> <option value="all">@lang('app.all')</option> @foreach ($employees as $employee) <x-user-option :user="$employee"></x-user-option> @endforeach @if ($viewUnassignedTasksPermission == 'all') <option value="unassigned">@lang('modules.tasks.unassigned')</option> @endif </select> </div> </div> </div> <div class="more-filter-items"> <label class="f-14 text-dark-grey mb-12 " for="usr">@lang('modules.tasks.assignBy')</label> <div class="select-filter mb-4"> <div class="select-others"> <select class="form-control select-picker" id="assignedBY" data-live-search="true" data-container="body" data-size="8"> <option value="all">@lang('app.all')</option> @foreach ($employees as $employee) <x-user-option :user="$employee" /> @endforeach </select> </div> </div> </div> <div class="more-filter-items"> <label class="f-14 text-dark-grey mb-12 " for="usr">@lang('app.label')</label> <div class="select-filter mb-4"> <div class="select-others"> <select class="form-control select-picker" id="label" data-live-search="true" data-container="body" data-size="8"> <option value="all">@lang('app.all')</option> @foreach ($taskLabels as $label) <option data-content="<span class='badge b-all' style='background:{{ $label->label_color }};'>{{ $label->label_name }}</span> " value="{{ $label->id }}">{{ $label->label_name }}</option> @endforeach </select> </div> </div> </div> <div class="more-filter-items"> <label class="f-14 text-dark-grey mb-12 " for="usr">@lang('modules.tasks.priority')</label> <div class="select-filter mb-4"> <div class="select-others"> <select class="form-control select-picker" id="priority" data-live-search="true" data-container="body" data-size="8"> <option value="all">@lang('app.all')</option> <option data-content="<i class='fa fa-circle mr-2' style='color: #dd0000'></i> @lang('modules.tasks.high')" value="high">@lang('modules.tasks.high')</option> <option value="medium" data-content="<i class='fa fa-circle mr-2' style='color: #ffc202'></i> @lang('modules.tasks.medium')" >@lang('modules.tasks.medium')</option> <option data-content="<i class='fa fa-circle mr-2' style='color: #0a8a1f'></i> @lang('modules.tasks.low')" value="low">@lang('modules.tasks.low')</option> </select> </div> </div> </div> <div class="more-filter-items"> <label class="f-14 text-dark-grey mb-12 " for="usr">@lang('modules.taskCategory.taskCategory')</label> <div class="select-filter mb-4"> <div class="select-others"> <select class="form-control select-picker" id="category_id" data-live-search="true" data-container="body" data-size="8"> <option value="all">@lang('app.all')</option> @foreach ($taskCategories as $categ) <option value="{{ $categ->id }}">{{ $categ->category_name }}</option> @endforeach </select> </div> </div> </div> <div class="more-filter-items"> <label class="f-14 text-dark-grey mb-12 " for="usr">@lang('app.billableTask')</label> <div class="select-filter mb-4"> <div class="select-others"> <select class="form-control select-picker" id="billable_task" data-live-search="true" data-container="body" data-size="8"> <option value="all">@lang('app.all')</option> <option value="1">@lang('app.yes')</option> <option value="0">@lang('app.no')</option> </select> </div> </div> </div> <div class="more-filter-items"> <label class="f-14 text-dark-grey mb-12 " for="usr">@lang('modules.projects.milestones')</label> <div class="select-filter mb-4"> <div class="select-others"> <select class="form-control select-picker" id="milestone_id" data-live-search="true" data-container="body" data-size="8"> <option value="all">@lang('app.all')</option> @foreach ($milestones as $milestone) <option value="{{ $milestone->id }}">{{ $milestone->milestone_title . ($milestone->project->project_short_code ? ' (' . $milestone->project->project_short_code . ')' : '') }}</option> @endforeach </select> </div> </div> </div> </x-filters.more-filter-box> <!-- MORE FILTERS END --> </x-filters.filter-box> @endsection @php $addTaskPermission = user()->permission('add_tasks'); @endphp @section('content') <!-- CONTENT WRAPPER START --> <div class="w-task-board-box px-4 py-2 bg-white"> <!-- Add Task Export Buttons Start --> <div class="d-grid d-lg-flex d-md-flex action-bar my-3"> <x-alert type="warning" icon="info" class="d-lg-none">@lang('messages.dragDropScreenInfo')</x-alert> <div id="table-actions" class="flex-grow-1 align-items-center mb-2 mb-lg-0 mb-md-0"> @if ($addTaskPermission == 'all' || $addTaskPermission == 'added') <x-forms.link-primary :link="route('tasks.create')" class="mr-lg-3 mr-1 openRightModal float-left" icon="plus" data-redirect-url="{{ url()->full() }}"> @lang('app.add') @lang('app.task') </x-forms.link-primary> @endif @if (user()->permission('add_status') == 'all') <x-forms.button-secondary icon="plus" class="mr-lg-3 mr-1 float-left" id="add-column"> @lang('modules.tasks.addBoardColumn') </x-forms.button-secondary> @endif @if (!in_array('client', user_roles())) <x-forms.button-secondary id="filter-my-task" icon="user"> @lang('modules.tasks.myTask') </x-forms.button-primary> @endif </div> <div class="btn-group mt-2 mt-lg-0 mt-md-0 ml-0 ml-lg-3 ml-md-3" role="group"> <a href="{{ route('tasks.index') }}" class="btn btn-secondary f-14" data-toggle="tooltip" data-original-title="@lang('app.menu.tasks')"><i class="side-icon bi bi-list-ul"></i></a> <a href="{{ route('taskboards.index') }}" class="btn btn-secondary f-14 btn-active" data-toggle="tooltip" data-original-title="@lang('modules.tasks.taskBoard')"><i class="side-icon bi bi-kanban"></i></a> <a href="{{ route('task-calendar.index') }}" class="btn btn-secondary f-14" data-toggle="tooltip" data-original-title="@lang('app.menu.calendar')"><i class="side-icon bi bi-calendar"></i></a> @if(in_array('admin', user_roles()) || in_array('employee', user_roles())) <a href="{{ route('tasks.waiting-approval') }}" class="btn btn-secondary f-14 show-waiting-approval-task" data-toggle="tooltip" data-original-title="@lang('app.menu.waiting-approval')"> <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#000000" width="18" height="18"> <g id="SVGRepo_bgCarrier" stroke-width="0"></g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g> <g id="SVGRepo_iconCarrier"> <path d="m 7 0 c -0.554688 0 -1 0.445312 -1 1 h -2 c -1.644531 0 -3 1.355469 -3 3 v 9 c 0 1.644531 1.355469 3 3 3 h 2 c 0.550781 0 1 -0.449219 1 -1 s -0.449219 -1 -1 -1 h -2 c -0.570312 0 -1 -0.429688 -1 -1 v -9 c 0 -0.570312 0.429688 -1 1 -1 h 1 v 1 c 0 0.554688 0.445312 1 1 1 h 4 c 0.554688 0 1 -0.445312 1 -1 v -1 h 1 c 0.570312 0 1 0.429688 1 1 v 2 c 0 0.550781 0.449219 1 1 1 s 1 -0.449219 1 -1 v -2 c 0 -1.644531 -1.355469 -3 -3 -3 h -2 c 0 -0.554688 -0.445312 -1 -1 -1 z m 0 0" fill="#2e3436"></path> <path d="m 8.875 8 c -0.492188 0 -0.875 0.382812 -0.875 0.875 v 6.25 c 0 0.492188 0.382812 0.875 0.875 0.875 h 6.25 c 0.492188 0 0.875 -0.382812 0.875 -0.875 v -6.25 c 0 -0.492188 -0.382812 -0.875 -0.875 -0.875 z m 2.125 1 h 2 v 2.5 s 0 0.5 -0.5 0.5 h -1 c -0.5 0 -0.5 -0.5 -0.5 -0.5 z m 0.5 4 h 1 c 0.277344 0 0.5 0.222656 0.5 0.5 v 1 c 0 0.277344 -0.222656 0.5 -0.5 0.5 h -1 c -0.277344 0 -0.5 -0.222656 -0.5 -0.5 v -1 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 z m 0 0" class="warning" fill="#ff7800"></path> </g> </svg> @if($waitingApprovalCount > 0)<span class="badge badge-pill badge-danger position-absolute">{{ $waitingApprovalCount }}</span>@endif </a> @endif </div> </div> <x-alert type="warning"> <div><b>Note:</b>@lang('modules.tasks.taskboardNote') <a href="{{ route('tasks.index') }}">@lang('app.tasks')</a> @lang('modules.tasks.menu') </div> </x-alert> <div class="w-task-board-panel d-flex" id="taskboard-columns"> </div> </div> <!-- CONTENT WRAPPER END --> @endsection @push('scripts') <script src="{{ asset('vendor/jquery/dragula.js') }}"></script> <script> const dp1 = datepicker('.date-range-field', { position: 'bl', onSelect: (instance, date) => { $('#reset-filters').removeClass('d-none'); dp2.setMin(date); loadData(); }, ...datepickerConfig }); const dp2 = datepicker('.date-range-field1', { position: 'bl', onSelect: (instance, date) => { $('#reset-filters').removeClass('d-none'); dp1.setMax(date); loadData(); }, ...datepickerConfig }); $('#billable_task, #status, #clientID, #category_id, #assignedBY, #assignedTo, #label, #project_id, #milestone_id, #category_id, #priority, #date_filter_on') .on('change keyup', function() { if ($('#status').val() != "not finished") { $('#reset-filters').removeClass('d-none'); loadData(); } else if ($('#project_id').val() != "all") { $('#reset-filters').removeClass('d-none'); loadData(); } else if ($('#clientID').val() != "all") { $('#reset-filters').removeClass('d-none'); loadData(); } else if ($('#category_id').val() != "all") { $('#reset-filters').removeClass('d-none'); loadData(); } else if ($('#assignedBY').val() != "all") { $('#reset-filters').removeClass('d-none'); loadData(); } else if ($('#assignedTo').val() != "all") { $('#reset-filters').removeClass('d-none'); loadData(); } else if ($('#label').val() != "all") { $('#reset-filters').removeClass('d-none'); loadData(); } else if ($('#billable_task').val() != "all") { $('#reset-filters').removeClass('d-none'); loadData(); } else if ($('#milestone_id').val() != "all") { $('#reset-filters').removeClass('d-none'); loadData(); } else if ($('#category_id').val() != "all") { $('#reset-filters').removeClass('d-none'); loadData(); } else if ($('#priority').val() != "all") { $('#reset-filters').removeClass('d-none'); loadData(); } else if ($('#date_filter_on').val() != "start_date") { $('#reset-filters').removeClass('d-none'); showTable(); } else { $('#reset-filters').addClass('d-none'); loadData(); } }); $('#search-text-field').on('keyup', function() { if ($('#search-text-field').val() != "") { $('#reset-filters').removeClass('d-none'); loadData(); } }); $('#reset-filters,#reset-filters-2').click(function() { $('#filter-form')[0].reset(); document.getElementById('filter-my-task').style.setProperty('background-color', '#ffff', 'important'); document.getElementById('filter-my-task').style.setProperty('color', '#616e80', 'important'); document.getElementById('filter-my-task').style.setProperty('border', '1px solid #616e80', 'important'); $('.filter-box #status').val('not finished'); $('.filter-box .select-picker').selectpicker("refresh"); $('#reset-filters').addClass('d-none'); loadData(); }); function loadData() { var startDate = $('#start-date').val(); if (startDate == '') { startDate = null; } var endDate = $('#end-date').val(); if (endDate == '') { endDate = null; } var projectID = $('#project_id').val(); var clientID = $('#clientID').val(); var assignedBY = $('#assignedBY').val(); var assignedTo = $('#assignedTo').val(); var categoryId = $('#category_id').val(); var labelId = $('#label').val(); var searchText = $('#search-text-field').val(); var billable = $('#billable_task').val(); var milestone_id = $('#milestone_id').val(); var priority = $('#priority').val(); var date_filter_on = $('#date_filter_on').val(); var url = "{{ route('taskboards.index') }}?startDate=" + encodeURIComponent(startDate) + '&endDate=' + encodeURIComponent(endDate) + '&clientID=' + clientID + '&assignedBY=' + assignedBY + '&assignedTo=' + assignedTo + '&projectID=' + projectID + '&category_id=' + categoryId + '&label_id=' + labelId + '&searchText=' + searchText + '&billable=' + billable + '&milestone_id=' + milestone_id + '&priority=' + priority + '&date_filter_on=' + date_filter_on; $.easyAjax({ url: url, container: '#taskboard-columns', type: "GET", success: function(response) { $('#taskboard-columns').html(response.view); $("body").tooltip({ selector: '[data-toggle="tooltip"]' }); } }); } $('body').on('click', '.load-more-tasks', function() { var columnId = $(this).data('column-id'); var totalTasks = $(this).data('total-tasks'); var currentTotalTasks = $('#drag-container-' + columnId + ' .task-card').length; var startDate = $('#start-date').val(); if (startDate == '') { startDate = null; } var endDate = $('#end-date').val(); if (endDate == '') { endDate = null; } var projectID = $('#project_id').val(); var clientID = $('#clientID').val(); var assignedBY = $('#assignedBY').val(); var assignedTo = $('#assignedTo').val(); var categoryId = $('#category_id').val(); var labelId = $('#label').val(); var searchText = $('#search-text-field').val(); var url = "{{ route('taskboards.load_more') }}?startDate=" + encodeURIComponent(startDate) + '&endDate=' + encodeURIComponent(endDate) + '&clientID=' + clientID + '&assignedBY=' + assignedBY + '&assignedTo=' + assignedTo + '&projectID=' + projectID + '&category_id=' + categoryId + '&label_id=' + labelId + '&searchText=' + searchText + '&columnId=' + columnId + '¤tTotalTasks=' + currentTotalTasks + '&totalTasks=' + totalTasks; $.easyAjax({ url: url, container: '#drag-container-' + columnId, blockUI: true, type: "GET", success: function(response) { $('#drag-container-' + columnId).append(response.view); if (response.load_more == 'show') { $('#drag-container-' + columnId).closest('.b-p-body').find('.load-more-tasks'); } else { $('#drag-container-' + columnId).closest('.b-p-body').find('.load-more-tasks') .remove(); } $("body").tooltip({ selector: '[data-toggle="tooltip"]' }); } }); }); var elem = document.getElementById("fullscreen"); function openFullscreen() { if (elem.requestFullscreen) { elem.requestFullscreen(); elem.classList.add("full"); } else if (elem.mozRequestFullScreen) { /* Firefox */ elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE/Edge */ elem.msRequestFullscreen(); } } $('#add-column').click(function() { const url = "{{ route('taskboards.create') }}"; $(MODAL_LG + ' ' + MODAL_HEADING).html('...'); $.ajaxModal(MODAL_LG, url); }); $('body').on('click', '.edit-column', function() { var id = $(this).data('column-id'); var url = "{{ route('taskboards.edit', ':id') }}"; url = url.replace(':id', id); $(MODAL_LG + ' ' + MODAL_HEADING).html('...'); $.ajaxModal(MODAL_LG, url); }); $('body').on('click', '.delete-column', function() { var id = $(this).data('column-id'); var url = "{{ route('taskboards.destroy', ':id') }}"; url = url.replace(':id', id); Swal.fire({ title: "@lang('messages.sweetAlertTitle')", text: "@lang('messages.recoverRecord')", icon: 'warning', showCancelButton: true, focusConfirm: false, confirmButtonText: "@lang('messages.confirmDelete')", cancelButtonText: "@lang('app.cancel')", customClass: { confirmButton: 'btn btn-primary mr-3', cancelButton: 'btn btn-secondary' }, showClass: { popup: 'swal2-noanimation', backdrop: 'swal2-noanimation' }, buttonsStyling: false }).then((result) => { if (result.isConfirmed) { $.easyAjax({ url: url, type: 'POST', data: { '_token': '{{ csrf_token() }}', '_method': 'DELETE' }, success: function(response) { if (response.status == 'success') { window.location.reload(); } } }); } }); }); $('#filter-my-task').click(function () { document.getElementById('filter-my-task').style.setProperty('background-color', '#5a645a', 'important'); document.getElementById('filter-my-task').style.setProperty('color', 'white', 'important'); $('.filter-box #assignedTo').val('{{ user()->id }}'); $('.filter-box .select-picker').selectpicker("refresh"); $('#reset-filters').removeClass('d-none'); loadData(); }); $('body').on('click', '.collapse-column', function() { var boardColumnId = $(this).data('column-id'); var type = $(this).data('type'); $.easyAjax({ url: "{{ route('taskboards.collapse_column') }}", type: 'POST', container: '#taskboard-columns', blockUI: true, data: { boardColumnId: boardColumnId, type: type, '_token': '{{ csrf_token() }}' }, success: function(response) { if (response.status == 'success') { loadData(); } } }); }); //pusher if ((pusher_setting.status === 1 && pusher_setting.taskboard === 1) || (pusher_setting.status == "1" && pusher_setting.taskboard == "1")) { var channel = pusher.subscribe('task-updated-channel'); channel.bind('task-updated', function (data) { loadData() }); } loadData(); </script> @endpush
Copyright ©2021 || Defacer Indonesia