mirror of https://github.com/Devoalda/LaDo.git
perf(Migrated to Livewire):
Moved Dashboard modules to Livewire, including loading of todo list in the dashboard
This commit is contained in:
parent
528131d7d6
commit
1a7f0fe5ed
|
|
@ -38,17 +38,15 @@ class DashboardController extends Controller
|
|||
$incomplete_count = $data['incomplete_count'];
|
||||
// Convert all todo to Todo model
|
||||
|
||||
$projects = $this->projects();
|
||||
$project_count = $projects['project_count'];
|
||||
$ave_todo_count = $projects['ave_todo_count'];
|
||||
// $projects = $this->projects();
|
||||
// $project_count = $projects['project_count'];
|
||||
// $ave_todo_count = $projects['ave_todo_count'];
|
||||
|
||||
$todo_completed_count = $this->all_completed_todos()['completed_count'];
|
||||
|
||||
return view('dashboard.index', compact(
|
||||
'todos',
|
||||
'incomplete_count',
|
||||
'project_count',
|
||||
'ave_todo_count',
|
||||
'todo_completed_count'
|
||||
));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
<?php
|
||||
|
||||
namespace App\Http\Livewire\Dashboard;
|
||||
|
||||
use Livewire\Component;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use App\Models\{
|
||||
Todo,
|
||||
Project,
|
||||
User
|
||||
};
|
||||
|
||||
|
||||
class AveTodoPerProject extends Component
|
||||
{
|
||||
public $ave_todo_count;
|
||||
|
||||
public function mount()
|
||||
{
|
||||
$user = auth()->user();
|
||||
$projects = $user->projects;
|
||||
$project_count = $projects->count();
|
||||
|
||||
// Average number of todos per project
|
||||
$ave_todo_count = function ($projects) {
|
||||
$todo_count = 0;
|
||||
foreach ($projects as $project) {
|
||||
$todo_count += $project->todos->count();
|
||||
}
|
||||
return $todo_count / $projects->count();
|
||||
};
|
||||
|
||||
$this->ave_todo_count = $ave_todo_count($projects);
|
||||
}
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.dashboard.ave-todo-per-project');
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<?php
|
||||
|
||||
namespace App\Http\Livewire\Dashboard;
|
||||
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use Livewire\Component;
|
||||
|
||||
|
||||
class CompletedTodo extends Component
|
||||
{
|
||||
public $todo_completed_count;
|
||||
|
||||
public function mount()
|
||||
{
|
||||
$this->todo_completed_count = DB::table('todos')
|
||||
->join('project_todo', 'todos.id', '=', 'project_todo.todo_id')
|
||||
->join('project_user', 'project_todo.project_id', '=', 'project_user.project_id')
|
||||
->where('project_user.user_id', '=', Auth::user()->id)
|
||||
->whereDate('due_end', '<=', strtotime('today midnight'))
|
||||
->whereNotNull('completed_at')
|
||||
->count();
|
||||
}
|
||||
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.dashboard.completed-todo');
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<?php
|
||||
|
||||
namespace App\Http\Livewire\Dashboard;
|
||||
|
||||
use Livewire\Component;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
|
||||
class IncompleteTodo extends Component
|
||||
{
|
||||
public $incomplete_count;
|
||||
|
||||
public function mount()
|
||||
{
|
||||
$this->incomplete_count = DB::table('todos')
|
||||
->join('project_todo', 'todos.id', '=', 'project_todo.todo_id')
|
||||
->join('project_user', 'project_todo.project_id', '=', 'project_user.project_id')
|
||||
->where('project_user.user_id', '=', Auth::user()->id)
|
||||
->whereDate('due_end', '<=', strtotime('today midnight'))
|
||||
->whereNull('completed_at')
|
||||
->count();
|
||||
|
||||
}
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.dashboard.incomplete-todo');
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<?php
|
||||
|
||||
namespace App\Http\Livewire\Dashboard;
|
||||
|
||||
use Livewire\Component;
|
||||
|
||||
class ProjectCount extends Component
|
||||
{
|
||||
public $project_count;
|
||||
|
||||
public function mount()
|
||||
{
|
||||
$this->project_count = auth()->user()->projects()->count();
|
||||
}
|
||||
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.dashboard.project-count');
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<?php
|
||||
|
||||
namespace App\Http\Livewire\Dashboard;
|
||||
|
||||
use Livewire\Component;
|
||||
|
||||
class Stats extends Component
|
||||
{
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.dashboard.stats');
|
||||
}
|
||||
}
|
||||
|
|
@ -15,6 +15,13 @@ class Timer extends Component
|
|||
'endBreak' => 'endBreak',
|
||||
];
|
||||
|
||||
public function resetPomo()
|
||||
{
|
||||
$this->time = 25 * 60;
|
||||
$this->countdown = false;
|
||||
$this->break = false;
|
||||
}
|
||||
|
||||
public function endBreak($time = null)
|
||||
{
|
||||
$this->time = $time ?? $this->time;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
<?php
|
||||
|
||||
namespace App\Http\Livewire\Todo;
|
||||
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use Livewire\Component;
|
||||
use App\Models\Todo;
|
||||
|
||||
class TodaysTodo extends Component
|
||||
{
|
||||
public $perPage = 5;
|
||||
|
||||
public $listeners = [
|
||||
'load-more' => 'loadMore',
|
||||
];
|
||||
|
||||
public function loadMore()
|
||||
{
|
||||
$this->perPage += 5;
|
||||
}
|
||||
|
||||
public function render()
|
||||
{
|
||||
$todos = DB::table('todos')
|
||||
->join('project_todo', 'todos.id', '=', 'project_todo.todo_id')
|
||||
->join('project_user', 'project_todo.project_id', '=', 'project_user.project_id')
|
||||
->where('project_user.user_id', '=', auth()->user()->id)
|
||||
->whereDate('due_end', '<=', strtotime('today midnight'))
|
||||
->whereNull('completed_at')
|
||||
->orderBy('due_end', 'asc')
|
||||
->paginate($this->perPage);
|
||||
|
||||
|
||||
$todos->transform(function ($todo) {
|
||||
return Todo::find($todo->id);
|
||||
});
|
||||
|
||||
|
||||
$incomplete_count = DB::table('todos')
|
||||
->join('project_todo', 'todos.id', '=', 'project_todo.todo_id')
|
||||
->join('project_user', 'project_todo.project_id', '=', 'project_user.project_id')
|
||||
->where('project_user.user_id', '=', auth()->user()->id)
|
||||
->whereDate('due_end', '<=', strtotime('today midnight'))
|
||||
->whereNull('completed_at')
|
||||
->count();
|
||||
|
||||
return view('livewire.todo.todays-todo', [
|
||||
'todos' => $todos,
|
||||
'incomplete_count' => $incomplete_count,
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
|
@ -5,158 +5,10 @@
|
|||
</h2>
|
||||
</x-slot>
|
||||
|
||||
<!-- Display Statistics of Todo Completion -->
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 mt-4">
|
||||
<h2 class="text-2xl font-semibold mb-4 text-indigo-500 dark:text-indigo-400">
|
||||
<!-- Icon for Target board -->
|
||||
<svg class="inline-block h-6 w-6 text-indigo-500 dark:text-indigo-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 9v6m0 0v6m0-6h6m-6 0H3"/>
|
||||
</svg>
|
||||
Your Stats
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
|
||||
<h3 class="text-xl font-semibold mb-4 text-red-500 dark:text-red-400">
|
||||
<!-- SVG for Incomplete Todos -->
|
||||
<svg class="inline-block h-6 w-6 text-red-500 dark:text-red-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
Total incomplete Todos
|
||||
</h3>
|
||||
<p class="text-3xl font-bold text-gray-800 dark:text-gray-100">
|
||||
{{ $incomplete_count }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Todo Completed Count -->
|
||||
<div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
|
||||
<h3 class="text-xl font-semibold mb-4 text-green-500 dark:text-green-400">
|
||||
<!-- SVG for Completed Todos -->
|
||||
<svg class="inline-block h-6 w-6 text-green-500 dark:text-green-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
Total Completed Todos
|
||||
</h3>
|
||||
<p class="text-3xl font-bold text-gray-800 dark:text-gray-100">
|
||||
{{ $todo_completed_count }}
|
||||
</p>
|
||||
</div>
|
||||
<livewire:dashboard.stats/>
|
||||
|
||||
<!-- Average Todo Count per Project -->
|
||||
<div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
|
||||
<h3 class="text-xl font-semibold mb-4 text-yellow-500 dark:text-yellow-400">
|
||||
<!-- SVG for Average Todos -->
|
||||
<svg class="inline-block h-6 w-6 text-yellow-500 dark:text-yellow-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
|
||||
</svg>
|
||||
Average Todos per Project
|
||||
</h3>
|
||||
<p class="text-3xl font-bold text-gray-800 dark:text-gray-100">
|
||||
{{ $ave_todo_count }}
|
||||
</p>
|
||||
</div>
|
||||
<livewire:todo.todays-todo/>
|
||||
|
||||
<!-- Project Count -->
|
||||
<div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
|
||||
<h3 class="text-xl font-semibold mb-4 text-blue-500 dark:text-blue-400">
|
||||
<!-- SVG for Project Count -->
|
||||
<svg class="inline-block h-6 w-6 text-blue-500 dark:text-blue-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
|
||||
</svg>
|
||||
Total Projects
|
||||
</h3>
|
||||
<p class="text-3xl font-bold text-gray-800 dark:text-gray-100">
|
||||
{{ $project_count }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<livewire:dashboard.pomo-count/>
|
||||
|
||||
<livewire:dashboard.pomo-time/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- List out Todos and their details (time left/ago) + checkbox in form to toggle completed -->
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 mt-4 py-3">
|
||||
<h2 class="text-2xl font-semibold mb-4 text-green-500 dark:text-green-400">
|
||||
Today's Todos
|
||||
({{ $incomplete_count }})
|
||||
</h2>
|
||||
<div class="space-y-4" id="todo-container">
|
||||
@include('dashboard.load-todo')
|
||||
</div>
|
||||
<!-- Pagination with CSS -->
|
||||
<div class="invisible">
|
||||
{{ $todos->links() }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
let nextPageUrl = '{{ $todos->nextPageUrl() }}';
|
||||
|
||||
$(window).scroll(function () {
|
||||
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
|
||||
if (nextPageUrl) {
|
||||
loadMoreTodos();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function loadMoreTodos() {
|
||||
$.ajax({
|
||||
url: nextPageUrl,
|
||||
type: 'get',
|
||||
beforeSend: function () {
|
||||
nextPageUrl = '';
|
||||
},
|
||||
success: function (data) {
|
||||
nextPageUrl = data.nextPageUrl;
|
||||
$('#todo-container').append(data.view);
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
console.error("Error loading more posts:", error);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@foreach ($todos as $todo)
|
||||
<a href="{{ route('project.todo.edit', [$todo->project->id, $todo->id]) }}" class="block">
|
||||
<div class="space-y-4" id="todo-container">
|
||||
@foreach ($todos as $todo)
|
||||
<a href="{{ route('project.todo.edit', [$todo->project->id, $todo->id]) }}" class="block">
|
||||
<div
|
||||
class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
|
|
@ -57,5 +58,6 @@
|
|||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
<div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
|
||||
<h3 class="text-xl font-semibold mb-4 text-yellow-500 dark:text-yellow-400">
|
||||
<!-- SVG for Average Todos -->
|
||||
<svg class="inline-block h-6 w-6 text-yellow-500 dark:text-yellow-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
|
||||
</svg>
|
||||
Average Todos per Project
|
||||
</h3>
|
||||
<p class="text-3xl font-bold text-gray-800 dark:text-gray-100">
|
||||
{{ $ave_todo_count }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
|
||||
<h3 class="text-xl font-semibold mb-4 text-green-500 dark:text-green-400">
|
||||
<!-- SVG for Completed Todos -->
|
||||
<svg class="inline-block h-6 w-6 text-green-500 dark:text-green-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
Total Completed Todos
|
||||
</h3>
|
||||
<p class="text-3xl font-bold text-gray-800 dark:text-gray-100">
|
||||
{{ $todo_completed_count }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
|
||||
<h3 class="text-xl font-semibold mb-4 text-red-500 dark:text-red-400">
|
||||
<!-- SVG for Incomplete Todos -->
|
||||
<svg class="inline-block h-6 w-6 text-red-500 dark:text-red-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
Total incomplete Todos
|
||||
</h3>
|
||||
<p class="text-3xl font-bold text-gray-800 dark:text-gray-100">
|
||||
{{ $incomplete_count }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
|
||||
<h3 class="text-xl font-semibold mb-4 text-blue-500 dark:text-blue-400">
|
||||
<!-- SVG for Project Count -->
|
||||
<svg class="inline-block h-6 w-6 text-blue-500 dark:text-blue-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
|
||||
</svg>
|
||||
Total Projects
|
||||
</h3>
|
||||
<p class="text-3xl font-bold text-gray-800 dark:text-gray-100">
|
||||
{{ $project_count }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!-- Display Statistics of Todo Completion -->
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 mt-4">
|
||||
<h2 class="text-2xl font-semibold mb-4 text-indigo-500 dark:text-indigo-400">
|
||||
<!-- Icon for Target board -->
|
||||
<svg class="inline-block h-6 w-6 text-indigo-500 dark:text-indigo-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 9v6m0 0v6m0-6h6m-6 0H3"/>
|
||||
</svg>
|
||||
Your Stats
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
||||
|
||||
<livewire:dashboard.incomplete-todo/>
|
||||
|
||||
<livewire:dashboard.completed-todo/>
|
||||
|
||||
<!-- Average Todo Count per Project -->
|
||||
<livewire:dashboard.ave-todo-per-project/>
|
||||
|
||||
<!-- Project Count -->
|
||||
<livewire:dashboard.project-count/>
|
||||
|
||||
<livewire:dashboard.pomo-count/>
|
||||
|
||||
<livewire:dashboard.pomo-time/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -45,6 +45,12 @@
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<div wire:loading>
|
||||
<div class="text-blue-900 dark:text-gray-100 font-bold py-2 px-4 rounded flex justify-center">
|
||||
Loading...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Livewire script to trigger the load more button after user scrolls to the bottom of the page -->
|
||||
<script>
|
||||
window.onscroll = function(ev) {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,13 @@
|
|||
wire:click="stopTimer">
|
||||
Stop
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="bg-yellow-500 hover:bg-yellow-600
|
||||
text-white font-bold py-2 px-4 rounded"
|
||||
wire:click="resetPomo">
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center items-center mt-8">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 mt-4 py-3">
|
||||
<h2 class="text-2xl font-semibold mb-4 text-green-500 dark:text-green-400">
|
||||
Today's Todos
|
||||
({{ $incomplete_count }})
|
||||
</h2>
|
||||
<div class="space-y-4" id="todo-container">
|
||||
@foreach ($todos as $todo)
|
||||
|
||||
<a href="{{ route('project.todo.edit', [$todo->project->id, $todo->id]) }}" class="block">
|
||||
<div
|
||||
class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<form action="{{ route('project.todo.update', [$todo->project->id, $todo->id]) }}"
|
||||
method="POST"
|
||||
class="toggle-completed-form">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<input type="checkbox" name="completed_at" id="completed_at_{{ $todo->id }}"
|
||||
class="w-4 h-4 text-green-600 bg-gray-100 border-gray-300 rounded focus:ring-green-500 dark:focus:ring-green-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
||||
onchange="this.form.submit()" {{ $todo->completed_at ? 'checked' : ''
|
||||
}}>
|
||||
<span class="ml-2 text-sm text-gray-700"></span>
|
||||
</label>
|
||||
</form>
|
||||
<span
|
||||
class="ml-2 text-2xl font-bold text-gray-800 dark:text-gray-100">
|
||||
{{ $todo->title }}
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
@php
|
||||
if ($todo->due_start && $todo->due_end) {
|
||||
$due = \Carbon\Carbon::parse($todo->due_end);
|
||||
$now = now();
|
||||
$timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
|
||||
$due->diffForHumans($now,
|
||||
true);
|
||||
} elseif ($todo->due_start) {
|
||||
$due = \Carbon\Carbon::parse($todo->due_start);
|
||||
$now = now();
|
||||
$timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
|
||||
$due->diffForHumans($now,
|
||||
true);
|
||||
} elseif ($todo->due_end) {
|
||||
$due = \Carbon\Carbon::parse($todo->due_end);
|
||||
$now = now();
|
||||
$timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
|
||||
$due->diffForHumans($now,
|
||||
true);
|
||||
} else {
|
||||
// If there is no due_start or due_end, set $timeRemaining to null
|
||||
$timeRemaining = null;
|
||||
}
|
||||
@endphp
|
||||
|
||||
@if ($timeRemaining !== null)
|
||||
@if ($due->isFuture())
|
||||
<p class="text-sm text-green-600">{{ $timeRemaining }} remaining</p>
|
||||
@else
|
||||
<p class="text-sm text-red-600">{{ $timeRemaining }} ago</p>
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
@if($todos->hasMorePages())
|
||||
<div class="invisible">
|
||||
<button wire:click.prevent="loadMore"
|
||||
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Load more
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div wire:loading>
|
||||
<div class="text-blue-900 dark:text-gray-100 font-bold py-2 px-4 rounded flex justify-center">
|
||||
Loading...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Livewire script to trigger the load more button after user scrolls to the bottom of the page -->
|
||||
<script>
|
||||
window.onscroll = function (ev) {
|
||||
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
|
||||
Livewire.emit('load-more');
|
||||
console.log('Load more');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@else
|
||||
<!-- If there are no more pages, show this message -->
|
||||
<div class="text-blue-900 dark:text-gray-100 font-bold py-2 px-4 rounded flex justify-center">
|
||||
Congratulations! You've reached the end of the list.
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
Loading…
Reference in New Issue