Files
a.montask/resources/views/tasks/create.blade.php
T

247 lines
13 KiB
PHP
Executable File

<?php
use App\Models\App;
use App\Models\User;
use App\Models\Tasks;
$users = User::get();
$apps = App::get();
if (isset($task)) {
$selectedAssignees = [];
if ($task && $task->assignees) {
$decoded = json_decode($task->assignees, true);
$selectedAssignees = is_array($decoded) ? $decoded : [];
}
}
?>
@extends('app')
@section('content')
<div class="w-full mt-[70px] justify-center container flex ">
<div class="bg-white w-[350px] rounded-xl ">
<h1 class="w-[350px] bg-cyan-500 rounded-t-xl text-center p-1.5 font-bold text-slate-50">{{isset($task) ? "ویرایش وظیفه" : "ایجاد وظیفه جدید"}}
</h1>
<form action="{{isset($task) ? Route('task.edit') : Route('task.create')}}" method="POST" class=" p-6 grid-cols-2 gap-4 items-center">
@csrf
@if(isset($task))
<input type="hidden" id="id" name="id" value="{{$task->id}}">
@endif
<label for="title" class="font-medium text-sm"><span class="text-red-500">*</span>عنوان:</label>
<input class="rounded-lg border border-gray-300 p-2 w-full" value="{{$task->title ?? null}}" type="text"
id="title" name="title" required>
<label for="description" class="font-medium text-sm">توضیحات:</label>
<textarea id="description" name="description"
class="rounded-lg border border-gray-300 p-2 w-full">{{$task->description ?? null}}</textarea>
<label for="priority" class="font-medium text-sm">اولویت:</label>
<select id="priority" name="priority" class="rounded-lg border border-gray-300 p-2 w-full">
<option value="none" {{ old('priority', $task->priority ?? '') == 'none' ? 'selected' : '' }}>ندارد</option>
<option value="low" {{ old('priority', $task->priority ?? '') == 'low' ? 'selected' : '' }}>کم</option>
<option value="medium" {{ old('priority', $task->priority ?? '') == 'medium' ? 'selected' : '' }}>عادی</option>
<option value="urgent" {{ old('priority', $task->priority ?? '') == 'urgent' ? 'selected' : '' }}>فوری</option>
<option value="high" {{ old('priority', $task->priority ?? '') == 'high' ? 'selected' : '' }}>زیاد</option>
</select>
<!-- تاریخ شروع -->
<div class="p-2">
<label for="start_date" class="font-medium text-sm">تاریخ شروع <span
class="text-red-500">*</span></label>
<input type="text" id="start_date" name="start_date_display"
class="rounded-lg border border-gray-300 p-2 " value="{{$task->start_date ?? null}}"
placeholder="تاریخ شروع" autocomplete="off" readonly required>
<input type="hidden" name="start_date" id="start_date_gregorian">
<!-- تاریخ هدف -->
<label for="target_date" class="font-medium text-sm">تاریخ هدف</label>
{{-- <div class="relative">--}}
<input type="text" id="target_date" name="target_date_display"
class="rounded-lg border border-gray-300 p-2 pwt-datepicker-input-element mt-2"
value="{{$task->target_date ?? null}}"
placeholder="تاریخ هدف" autocomplete="off" readonly>
<button type="button" id="clear_target_date"
class="absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-red-500">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
{{-- </div>--}}
<input type="hidden" name="target_date" id="target_date_gregorian">
</div>
<!-- وضعیت -->
<label for="state" class="font-medium text-sm"><span class="text-red-500">*</span>وضعیت:</label>
<select id="state" name="state" class="rounded-lg border border-gray-300 p-2 w-full" required>
<option value="1" {{ old('state', $task->state ?? '') == 1 ? 'selected' : '' }}>در انتظار</option>
<option value="2" {{ old('state', $task->state ?? '') == 2 ? 'selected' : '' }}>در صف انجام</option>
<option value="3" {{ old('state', $task->state ?? '') == 3 ? 'selected' : '' }}>درحال انجام</option>
<option value="4" {{ old('state', $task->state ?? '') == 4 ? 'selected' : '' }}>انجام‌شده</option>
</select>
<!-- کاربران مسئول -->
<label for="assignees" class="font-medium text-sm">انتصاب
کاربران:</label>
<div class="relative" id="dropdown-container">
{{-- دکمه --}}
<button type="button" id="dropdown-btn"
class="w-full bg-white border border-gray-300 rounded-lg px-4 py-2 text-right flex justify-between items-center">
<span id="selected-count">انتخاب کاربران</span>
<svg class="w-4 h-4 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div id="dropdown-list"
class="hidden absolute z-20 w-full bg-white border border-gray-300 rounded-lg shadow-lg">
<div class="p-2 border-b">
<input type="text" id="search-input"
class="w-full px-3 py-1 border border-gray-200 rounded-lg text-sm"
placeholder="جستجوی کاربر...">
</div>
{{-- لیست کاربران --}}
<div id="users-list" class="max-h-48 overflow-y-auto space-y-1 ">
@foreach($users as $user)
<label class="user-item flex items-center gap-2 p-1 hover:bg-gray-50 rounded cursor-pointer"
data-name="{{ $user->name }}">
<input type="checkbox"
name="assignees[]"
value="{{ $user->id }}"
class="user-checkbox rounded text-cyan-600"
{{ isset($task) && (in_array($user->id, $selectedAssignees)) ? 'checked' : '' }}>
<span>{{ $user->name }}</span>
</label>
@endforeach
</div>
</div>
</div>
{{-- <!-- برچسب‌ها -->--}}
{{-- <label for="labels" class="font-medium text-sm">برچسب‌ها:</label>--}}
{{-- <input class="rounded-lg border border-gray-300 p-2 w-full"--}}
{{-- type="text" id="labels" name="labels[]" placeholder="UUID1, UUID2">--}}
<!-- اپ -->
<label for="app" class="font-medium text-sm">نام اپ:</label>
<select id="app" name="app" class="rounded-lg z-20 border border-gray-300 p-2 w-full">
<option value="">-- انتخاب اپ --</option>
@if(!empty($apps) && count($apps) > 0)
@foreach($apps as $app)
<option value="{{ $app->id }}" {{ old('app', $task->app ?? '') == $app->id ? 'selected' : '' }}>
{{ $app->name_fa }} {{ $app->type_fa }}
</option>
@endforeach
@endif
</select>
<div class="inline-block flex pt-3 justify-center">
<button type="submit"
class="bg-cyan-600 text-white py-2 px-4 rounded-lg hover:bg-cyan-700 transition <!--mr-24 mt-2.5-->">
{{isset($task) ? "ویرایش" : "ایجاد وظیفه جدید"}}</button>
</div>
</form>
</div>
</div>
<script>
const dropdownBtn = document.getElementById('dropdown-btn');
const dropdownList = document.getElementById('dropdown-list');
const searchInput = document.getElementById('search-input');
const usersList = document.getElementById('users-list');
const selectedCountSpan = document.getElementById('selected-count');
// باز و بسته کردن
dropdownBtn.addEventListener('click', (e) => {
e.stopPropagation();
dropdownList.classList.toggle('hidden');
if (!dropdownList.classList.contains('hidden')) {
searchInput.focus();
}
});
// بستن با کلیک بیرون
document.addEventListener('click', (e) => {
if (!dropdownBtn.contains(e.target) && !dropdownList.contains(e.target)) {
dropdownList.classList.add('hidden');
}
});
// قابلیت جستجو
searchInput.addEventListener('input', function () {
const searchText = this.value.toLowerCase();
const items = usersList.querySelectorAll('.user-item');
items.forEach(item => {
const name = item.getAttribute('data-name').toLowerCase();
if (name.includes(searchText)) {
item.style.display = 'flex';
} else {
item.style.display = 'none';
}
});
});
// آپدیت تعداد
function updateSelectedCount() {
const selected = document.querySelectorAll('.user-checkbox:checked');
const count = selected.length;
selectedCountSpan.textContent = count === 0 ? 'انتخاب کاربران' : count + ' کاربر انتخاب شده';
}
document.querySelectorAll('.user-checkbox').forEach(checkbox => {
checkbox.addEventListener('change', updateSelectedCount);
});
updateSelectedCount();
$(document).ready(function () {
// تاریخ شروع با ساعت جاری
$('#start_date').persianDatepicker({
format: 'YYYY/MM/DD',
autoClose: true,
toolbox: {
calendarSwitch: {enabled: false},
todayButton: {enabled: true, text: {fa: 'امروز'}}
},
onSelect: function (unix) {
// تبدیل به میلادی
let gregorian = new persianDate(unix).toCalendar('gregorian').toLocale('en');
let dateStr = gregorian.format('YYYY-MM-DD');
$('#start_date_gregorian').val(dateStr);
console.log('Start Gregorian:', dateStr);
}
});
// تاریخ هدف
$('#target_date').persianDatepicker({
format: 'YYYY/MM/DD',
autoClose: true,
toolbox: {
calendarSwitch: {enabled: false},
todayButton: {enabled: true, text: {fa: 'امروز'}}
},
onSelect: function (unix) {
let gregorianDate = new persianDate(unix).toCalendar('gregorian').toLocale('en');
let dateStrTarget = gregorianDate.format('YYYY-MM-DD');
// let dateTimeStr = `${dateStr} 23:59:59`;
$('#target_date_gregorian').val(dateStrTarget);
console.log('Target DateTime (Gregorian):', dateStrTarget);
}
});
// دکمه پاک کردن تاریخ هدف
$('#clear_target_date').on('click', function () {
$('#target_date').val('');
$('#target_date_gregorian').val('');
});
});
</script>
@endsection