|
Server IP : 217.21.85.138 / Your IP : 216.73.216.103 Web Server : LiteSpeed System : Linux in-mum-web906.main-hosting.eu 4.18.0-553.37.1.lve.el8.x86_64 #1 SMP Mon Feb 10 22:45:17 UTC 2025 x86_64 User : u915722082 ( 915722082) PHP Version : 7.4.33 Disable Function : system, exec, shell_exec, passthru, mysql_list_dbs, ini_alter, dl, symlink, link, chgrp, leak, popen, apache_child_terminate, virtual, mb_send_mail MySQL : OFF | cURL : ON | WGET : ON | Perl : OFF | Python : OFF Directory (0755) : /home/u915722082/public_html/apitodshut/../projects/admin/ |
| [ Home ] | [ C0mmand ] | [ Upload File ] |
|---|
<?php
session_start();
if (!isset($_SESSION['admin_id'])) {
header("Location: login.php");
exit;
}
// ADMIN/MANAGER ONLY ACCESS
if ($_SESSION['role'] === 'Employee') {
header("Location: employee.php");
exit;
}
require_once '../config/config.php';
require_once '../config/db.php';
$current_user_role = $_SESSION['role'] ?? 'Manager';
$current_user_id = $_SESSION['admin_id'];
$current_user_name = $_SESSION['user_name'] ?? 'Admin';
// Only CEO and Manager can assign designer tasks
if ($current_user_role !== 'CEO' && $current_user_role !== 'Manager') {
header("Location: dashboard.php");
exit;
}
// Get all designers/employees for assignment
$designers_query = "SELECT uid, fname, email, role FROM tbl_user WHERE status = 'active' ORDER BY fname ASC";
$designers_result = mysqli_query($con, $designers_query);
// Get all designer tasks
$tasks_query = "SELECT dt.*,
u.fname as designer_name,
u.email as designer_email,
a.fname as assigned_by_name,
DATEDIFF(dt.end_date, CURDATE()) as days_remaining
FROM tbl_designer_tasks dt
LEFT JOIN tbl_user u ON dt.user_id = u.uid
LEFT JOIN tbl_user a ON dt.assigned_by = a.uid
ORDER BY dt.priority DESC, dt.end_date ASC, dt.created_at DESC";
$tasks_result = mysqli_query($con, $tasks_query);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="../" />
<title>Designer Tasks - TDS Admin Hub</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700" />
<link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
</head>
<body id="kt_app_body" data-kt-app-layout="dark-sidebar" data-kt-app-header-fixed="true"
data-kt-app-sidebar-enabled="true" data-kt-app-sidebar-fixed="true"
data-kt-app-sidebar-hoverable="true" data-kt-app-sidebar-push-header="true"
data-kt-app-sidebar-push-toolbar="true" data-kt-app-sidebar-push-footer="true"
data-kt-app-toolbar-enabled="true" class="app-default">
<script>
var defaultThemeMode = "light";
var themeMode;
if (document.documentElement) {
if (document.documentElement.hasAttribute("data-bs-theme-mode")) {
themeMode = document.documentElement.getAttribute("data-bs-theme-mode");
} else {
if (localStorage.getItem("data-bs-theme") !== null) {
themeMode = localStorage.getItem("data-bs-theme");
} else {
themeMode = defaultThemeMode;
}
}
if (themeMode === "system") {
themeMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
document.documentElement.setAttribute("data-bs-theme", themeMode);
}
</script>
<div class="d-flex flex-column flex-root app-root" id="kt_app_root">
<div class="app-page flex-column flex-column-fluid" id="kt_app_page">
<?php include 'includes/header-designer.php'; ?>
<div class="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">
<?php include 'includes/sidebar.php'; ?>
<div class="app-main flex-column flex-row-fluid" id="kt_app_main">
<div class="d-flex flex-column flex-column-fluid">
<div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
<div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
<h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column my-0">
🎨 Designer Tasks
</h1>
<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
<li class="breadcrumb-item text-muted">
<a href="admin/dashboard.php" class="text-muted text-hover-primary">Home</a>
</li>
<li class="breadcrumb-item">
<span class="bullet bg-gray-500 w-5px h-2px"></span>
</li>
<li class="breadcrumb-item text-muted">Designer Tasks</li>
</ul>
</div>
<!-- Add Calendar View Button -->
<div class="d-flex align-items-center gap-2 gap-lg-3">
<a href="admin/designer_calendar.php" class="btn btn-sm btn-light-primary">
<i class="ki-duotone ki-calendar fs-3">
<span class="path1"></span>
<span class="path2"></span>
</i>
Overall Calendar View
</a>
</div>
</div>
</div>
<div id="kt_app_content" class="app-content flex-column-fluid">
<div id="kt_app_content_container" class="app-container container-xxl">
<!-- Status Filter Cards -->
<div class="row g-5 g-xl-8 mb-5">
<div class="col-xl-2">
<div class="card card-flush h-100 filter-card" data-status="all" style="cursor: pointer;">
<div class="card-body d-flex flex-column justify-content-between">
<div class="d-flex align-items-center mb-2">
<span class="fs-2hx fw-bold text-gray-800 me-2 lh-1">
<?php
mysqli_data_seek($tasks_result, 0);
echo mysqli_num_rows($tasks_result);
?>
</span>
</div>
<span class="text-gray-600 fw-semibold fs-6">All Tasks</span>
</div>
</div>
</div>
<?php
$status_colors = [
'PLANNED' => 'info',
'ON HOLD' => 'warning',
'ASSIGNED' => 'primary',
'IN PROGRESS' => 'success',
'READY' => 'dark',
'PUBLISHED' => 'success'
];
foreach ($status_colors as $status => $color) {
mysqli_data_seek($tasks_result, 0);
$count = 0;
while ($task = mysqli_fetch_assoc($tasks_result)) {
if ($task['status'] === $status) $count++;
}
?>
<div class="col-xl-2">
<div class="card card-flush h-100 filter-card" data-status="<?php echo $status; ?>" style="cursor: pointer;">
<div class="card-body d-flex flex-column justify-content-between">
<div class="d-flex align-items-center mb-2">
<span class="fs-2hx fw-bold text-<?php echo $color; ?> me-2 lh-1"><?php echo $count; ?></span>
</div>
<span class="text-gray-600 fw-semibold fs-6"><?php echo $status; ?></span>
</div>
</div>
</div>
<?php } ?>
</div>
<div class="card">
<div class="card-header border-0 pt-6">
<div class="card-title">
<div class="d-flex align-items-center position-relative my-1 me-3">
<i class="ki-duotone ki-magnifier fs-3 position-absolute ms-5">
<span class="path1"></span>
<span class="path2"></span>
</i>
<input type="text" id="searchTask"
class="form-control form-control-solid w-250px ps-13"
placeholder="Search designer tasks..." />
</div>
<!-- ✅ NEW: Designer Filter Dropdown -->
<div class="d-flex align-items-center position-relative my-1">
<select class="form-select form-select-solid w-200px"
id="designerFilter"
data-control="select2"
data-placeholder="Filter by Designer"
data-allow-clear="true">
<option value="">All Designers</option>
<?php
mysqli_data_seek($designers_result, 0);
while ($designer = mysqli_fetch_assoc($designers_result)):
?>
<option value="<?php echo $designer['uid']; ?>">
<?php echo htmlspecialchars($designer['fname']); ?>
</option>
<?php endwhile; ?>
</select>
</div>
</div>
<div class="card-toolbar">
<!-- View Toggle -->
<div class="btn-group me-3" role="group">
<button type="button" class="btn btn-sm btn-light-primary active" id="tableViewBtn" onclick="switchView('table')">
<i class="ki-duotone ki-row-horizontal fs-3">
<span class="path1"></span>
<span class="path2"></span>
</i>
</button>
<button type="button" class="btn btn-sm btn-light-primary" id="gridViewBtn" onclick="switchView('grid')">
<i class="ki-duotone ki-element-11 fs-3">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
<span class="path4"></span>
</i>
</button>
</div>
<button type="button" class="btn btn-sm btn-primary"
data-bs-toggle="modal" data-bs-target="#designerTaskModal"
onclick="openAddModal()">
<i class="ki-duotone ki-plus fs-2"></i>
Assign Designer Task
</button>
</div>
</div>
<div class="card-body py-4">
<!-- Grid View -->
<div id="gridViewContainer" class="row g-6 g-xl-9" style="display: none;">
<?php
mysqli_data_seek($tasks_result, 0);
while ($task = mysqli_fetch_assoc($tasks_result)):
$is_delayed = ($task['days_remaining'] < 0 && $task['status'] !== 'PUBLISHED');
?>
<div class="col-md-6 col-xl-4 task-card" data-status="<?php echo htmlspecialchars($task['status']); ?>">
<div class="card h-100 <?php echo $is_delayed ? 'border border-danger' : ''; ?>">
<div class="card-header border-0 pt-9">
<div class="card-title m-0">
<div class="symbol symbol-50px w-50px bg-light">
<div class="symbol-label fs-2 fw-semibold text-primary">
<?php echo strtoupper(substr($task['designer_name'], 0, 1)); ?>
</div>
</div>
</div>
<div class="card-toolbar">
<span class="badge badge-light-<?php
echo $task['priority'] === 'Urgent' ? 'danger' :
($task['priority'] === 'High' ? 'warning' :
($task['priority'] === 'Medium' ? 'info' : 'secondary'));
?>">
<?php echo htmlspecialchars($task['priority']); ?>
</span>
</div>
</div>
<div class="card-body p-9">
<div class="fs-3 fw-bold text-gray-900 mb-3">
<?php echo htmlspecialchars($task['title']); ?>
</div>
<p class="text-gray-600 fw-semibold fs-6 mb-4">
<?php echo htmlspecialchars(substr($task['short_description'], 0, 80)) . '...'; ?>
</p>
<div class="d-flex flex-wrap mb-5">
<div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-7 mb-3">
<div class="fs-6 text-gray-800 fw-bold" data-user-id="<?php echo $task['user_id']; ?>">
<?php echo htmlspecialchars($task['designer_name']); ?>
</div>
<div class="fw-semibold text-gray-500">Designer</div>
</div>
<div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 mb-3">
<div class="fs-6 text-gray-800 fw-bold">
<?php echo $task['end_date'] ? date('M d, Y', strtotime($task['end_date'])) : '-'; ?>
</div>
<div class="fw-semibold text-gray-500">End Date</div>
</div>
</div>
<?php if ($is_delayed): ?>
<span class="badge badge-danger mb-4">Delayed</span>
<?php else: ?>
<span class="badge badge-light-<?php
echo $task['status'] === 'PUBLISHED' ? 'success' :
($task['status'] === 'IN PROGRESS' ? 'primary' :
($task['status'] === 'ON HOLD' ? 'warning' :
($task['status'] === 'READY' ? 'dark' : 'info')));
?> mb-4">
<?php echo htmlspecialchars($task['status']); ?>
</span>
<?php endif; ?>
<div class="d-flex justify-content-between align-items-center">
<?php if ($task['link']): ?>
<a href="<?php echo htmlspecialchars($task['link']); ?>" target="_blank"
class="btn btn-sm btn-light-primary">
<i class="ki-duotone ki-link fs-3"></i> Link
</a>
<?php else: ?>
<span></span>
<?php endif; ?>
<div class="d-flex">
<a href="admin/designer_calendar_view.php?designer_id=<?php echo $task['user_id']; ?>"
class="btn btn-icon btn-light btn-sm me-2">
<i class="ki-duotone ki-calendar fs-3">
<span class="path1"></span>
<span class="path2"></span>
</i>
</a>
<button class="btn btn-icon btn-light btn-sm me-2"
onclick='editTask(<?php echo json_encode($task); ?>)'>
<i class="ki-duotone ki-pencil fs-3">
<span class="path1"></span>
<span class="path2"></span>
</i>
</button>
<button class="btn btn-icon btn-light btn-sm"
onclick="deleteTask(<?php echo $task['id']; ?>, '<?php echo htmlspecialchars($task['title']); ?>')">
<i class="ki-duotone ki-trash fs-3">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
<span class="path4"></span>
<span class="path5"></span>
</i>
</button>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<!-- Table View -->
<div id="tableViewContainer" class="table-responsive">
<table class="table align-middle table-row-dashed fs-6 gy-5" id="designerTasksTable">
<thead>
<tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
<th class="min-w-125px">Designer</th>
<th class="min-w-200px">Title</th>
<th class="min-w-100px">Priority</th>
<th class="min-w-100px">Status</th>
<th class="min-w-100px">Draft Date</th>
<th class="min-w-100px">End Date</th>
<th class="min-w-100px">Publish Date</th>
<th class="min-w-150px">Link</th>
<th class="text-end min-w-100px">Actions</th>
</tr>
</thead>
<tbody class="text-gray-600 fw-semibold">
<?php
mysqli_data_seek($tasks_result, 0);
while ($task = mysqli_fetch_assoc($tasks_result)):
$is_delayed = ($task['days_remaining'] < 0 && $task['status'] !== 'PUBLISHED');
?>
<tr data-status="<?php echo htmlspecialchars($task['status']); ?>" class="<?php echo $is_delayed ? 'bg-light-danger' : ''; ?>">
<td>
<div class="d-flex align-items-center">
<div class="symbol symbol-circle symbol-40px overflow-hidden me-3">
<div class="symbol-label fs-3 bg-light-primary text-primary">
<?php echo strtoupper(substr($task['designer_name'], 0, 1)); ?>
</div>
</div>
<div class="d-flex flex-column">
<span class="text-gray-800 mb-1" data-user-id="<?php echo $task['user_id']; ?>">
<?php echo htmlspecialchars($task['designer_name']); ?>
</span>
</div>
</div>
</td>
<td>
<div class="d-flex flex-column">
<span class="text-gray-800 fw-bold">
<?php echo htmlspecialchars($task['title']); ?>
</span>
<?php if ($task['short_description']): ?>
<span class="text-muted fs-7">
<?php echo htmlspecialchars(substr($task['short_description'], 0, 50)) . (strlen($task['short_description']) > 50 ? '...' : ''); ?>
</span>
<?php endif; ?>
</div>
</td>
<td>
<span class="badge badge-light-<?php
echo $task['priority'] === 'Urgent' ? 'danger' :
($task['priority'] === 'High' ? 'warning' :
($task['priority'] === 'Medium' ? 'info' : 'secondary'));
?>">
<?php echo htmlspecialchars($task['priority']); ?>
</span>
</td>
<td>
<?php if ($is_delayed): ?>
<span class="badge badge-danger">Delayed</span>
<?php else: ?>
<span class="badge badge-light-<?php
echo $task['status'] === 'PUBLISHED' ? 'success' :
($task['status'] === 'IN PROGRESS' ? 'primary' :
($task['status'] === 'ON HOLD' ? 'warning' :
($task['status'] === 'READY' ? 'dark' : 'info')));
?>">
<?php echo htmlspecialchars($task['status']); ?>
</span>
<?php endif; ?>
</td>
<td>
<?php echo $task['draft_date'] ? date('M d, Y', strtotime($task['draft_date'])) : '-'; ?>
</td>
<td>
<?php echo $task['end_date'] ? date('M d, Y', strtotime($task['end_date'])) : '-'; ?>
</td>
<td>
<?php echo $task['publish_date'] ? date('M d, Y', strtotime($task['publish_date'])) : '-'; ?>
</td>
<td>
<?php if ($task['link']): ?>
<a href="<?php echo htmlspecialchars($task['link']); ?>" target="_blank" class="btn btn-sm btn-light-primary">
<i class="ki-duotone ki-link fs-3"></i> View
</a>
<?php else: ?>
<span class="text-muted">-</span>
<?php endif; ?>
</td>
<td class="text-end">
<!-- Calendar Icon Button -->
<a href="admin/designer_calendar_view.php?designer_id=<?php echo $task['user_id']; ?>"
class="btn btn-icon btn-light btn-active-light-info btn-sm me-1"
title="View <?php echo htmlspecialchars($task['designer_name']); ?>'s Calendar">
<i class="ki-duotone ki-calendar fs-3">
<span class="path1"></span>
<span class="path2"></span>
</i>
</a><button class="btn btn-icon btn-light btn-active-light-primary btn-sm me-1"
onclick='editTask(<?php echo json_encode($task); ?>)'>
<i class="ki-duotone ki-pencil fs-3">
<span class="path1"></span>
<span class="path2"></span>
</i>
</button>
<button class="btn btn-icon btn-light btn-active-light-danger btn-sm"
onclick="deleteTask(<?php echo $task['id']; ?>, '<?php echo htmlspecialchars($task['title']); ?>')">
<i class="ki-duotone ki-trash fs-3">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
<span class="path4"></span>
<span class="path5"></span>
</i>
</button>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<?php include 'includes/footer.php'; ?>
</div>
</div>
</div>
</div>
<!-- Add/Edit Designer Task Modal -->
<div class="modal fade" id="designerTaskModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered mw-900px modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h2 class="fw-bolder" id="modalTitle">Assign Designer Task</h2>
<div class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal">
<i class="ki-duotone ki-cross fs-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
</div>
</div>
<form id="designerTaskForm" method="POST">
<div class="modal-body py-10 px-lg-17" style="max-height: 70vh; overflow-y: auto;">
<input type="hidden" name="action" id="action" value="add">
<input type="hidden" name="task_id" id="task_id" value="">
<div id="alertBox"></div>
<div class="row">
<!-- Designer Selection -->
<div class="col-md-6 fv-row mb-7">
<label class="required fs-6 fw-semibold mb-2">Assign To</label>
<select class="form-select form-select-solid"
name="user_id"
id="user_id"
data-control="select2"
data-placeholder="Select designer"
data-dropdown-parent="#designerTaskModal"
required>
<option value="">Select Designer</option>
<?php
mysqli_data_seek($designers_result, 0);
while ($designer = mysqli_fetch_assoc($designers_result)):
?>
<option value="<?php echo $designer['uid']; ?>">
<?php echo htmlspecialchars($designer['fname']) . ' (' . $designer['role'] . ')'; ?>
</option>
<?php endwhile; ?>
</select>
</div>
<!-- Priority -->
<div class="col-md-6 fv-row mb-7">
<label class="required fs-6 fw-semibold mb-2">Priority</label>
<select class="form-select form-select-solid"
name="priority"
id="priority"
data-control="select2"
data-placeholder="Select priority"
data-dropdown-parent="#designerTaskModal"
data-hide-search="true"
required>
<option value="">Select Priority</option>
<option value="Low">Low</option>
<option value="Medium" selected>Medium</option>
<option value="High">High</option>
<option value="Urgent">Urgent</option>
</select>
</div>
</div>
<!-- Title -->
<div class="fv-row mb-7">
<label class="required fs-6 fw-semibold mb-2">Title</label>
<input type="text" class="form-control form-control-solid"
name="title" id="title"
placeholder="Enter task title" required />
</div>
<!-- Short Description -->
<div class="fv-row mb-7">
<label class="required fs-6 fw-semibold mb-2">Short Description</label>
<textarea class="form-control form-control-solid"
name="short_description" id="short_description"
rows="3" placeholder="Brief description of the task" required></textarea>
</div>
<div class="row">
<!-- Draft Date -->
<div class="col-md-4 fv-row mb-7">
<label class="fs-6 fw-semibold mb-2">Draft Date</label>
<input type="text" class="form-control form-control-solid"
name="draft_date" id="draft_date"
placeholder="Select draft date"
readonly />
</div>
<!-- End Date -->
<div class="col-md-4 fv-row mb-7">
<label class="required fs-6 fw-semibold mb-2">End Date</label>
<input type="text" class="form-control form-control-solid"
name="end_date" id="end_date"
placeholder="Select end date"
readonly
required />
</div>
<!-- Publish Date -->
<div class="col-md-4 fv-row mb-7">
<label class="fs-6 fw-semibold mb-2">Publish Date</label>
<input type="text" class="form-control form-control-solid"
name="publish_date" id="publish_date"
placeholder="Select publish date"
readonly />
</div>
</div>
<!-- Link -->
<div class="fv-row mb-7">
<label class="fs-6 fw-semibold mb-2">Link (Optional)</label>
<input type="url" class="form-control form-control-solid"
name="link" id="link"
placeholder="https://example.com" />
</div>
<!-- Status (Only in Edit Mode) -->
<div class="fv-row mb-7" id="statusField" style="display: none;">
<label class="required fs-6 fw-semibold mb-2">Status</label>
<select class="form-select form-select-solid"
name="status"
id="status"
data-control="select2"
data-placeholder="Select status"
data-dropdown-parent="#designerTaskModal"
data-hide-search="true">
<option value="PLANNED">PLANNED</option>
<option value="ON HOLD">ON HOLD</option>
<option value="ASSIGNED">ASSIGNED</option>
<option value="IN PROGRESS">IN PROGRESS</option>
<option value="READY">READY</option>
<option value="PUBLISHED">PUBLISHED</option>
</select>
</div>
</div>
<div class="modal-footer flex-center">
<button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" id="submitBtn">
<span class="indicator-label">Assign Task</span>
<span class="indicator-progress">Please wait...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span>
</span>
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="assets/plugins/global/plugins.bundle.js"></script>
<script src="assets/js/scripts.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="admin/js/designer_tasks.js?v=<?php echo time(); ?>"></script>
<script>
function switchView(view) {
const tableView = document.getElementById('tableViewContainer');
const gridView = document.getElementById('gridViewContainer');
const tableBtn = document.getElementById('tableViewBtn');
const gridBtn = document.getElementById('gridViewBtn');
if (view === 'grid') {
tableView.style.display = 'none';
gridView.style.display = 'flex';
tableBtn.classList.remove('active');
gridBtn.classList.add('active');
localStorage.setItem('designerTasksView', 'grid');
} else {
tableView.style.display = 'block';
gridView.style.display = 'none';
gridBtn.classList.remove('active');
tableBtn.classList.add('active');
localStorage.setItem('designerTasksView', 'table');
}
}
// Restore view on page load
document.addEventListener('DOMContentLoaded', function() {
const savedView = localStorage.getItem('designerTasksView') || 'table';
switchView(savedView);
});
</script>
<script>
// Global variables to track current filters
let currentDesignerFilter = '';
let currentStatusFilter = 'all';
let currentSearchTerm = '';
// Designer Filter - Initialize Select2 and handle change
$(document).ready(function() {
// Initialize Select2
$('#designerFilter').select2({
placeholder: "Filter by Designer",
allowClear: true
});
// Handle Select2 change event
$('#designerFilter').on('select2:select select2:clear', function(e) {
currentDesignerFilter = $(this).val() || '';
console.log('Designer filter changed:', currentDesignerFilter); // Debug log
applyAllFilters();
});
});
// Search functionality
document.getElementById('searchTask')?.addEventListener('keyup', function() {
currentSearchTerm = this.value.toLowerCase().trim();
applyAllFilters();
});
// Status filter cards
document.querySelectorAll('.filter-card').forEach(card => {
card.addEventListener('click', function() {
currentStatusFilter = this.getAttribute('data-status');
// Update visual state
document.querySelectorAll('.filter-card').forEach(c => c.classList.remove('border', 'border-primary'));
this.classList.add('border', 'border-primary');
applyAllFilters();
});
});
// Main filter function that applies all active filters
function applyAllFilters() {
const tableRows = document.querySelectorAll('#designerTasksTable tbody tr');
const gridCards = document.querySelectorAll('#gridViewContainer .task-card');
let visibleCount = 0;
// Filter table rows
tableRows.forEach(row => {
if (shouldShowItem(row, 'table')) {
row.style.display = '';
visibleCount++;
} else {
row.style.display = 'none';
}
});
// Filter grid cards
let gridVisibleCount = 0;
gridCards.forEach(card => {
if (shouldShowItem(card, 'grid')) {
card.style.display = '';
gridVisibleCount++;
} else {
card.style.display = 'none';
}
});
// Show/hide "no records" message
showNoRecordsMessage(visibleCount, gridVisibleCount);
// Update status counts
updateStatusCounts();
}
// Check if an item should be shown based on all active filters
function shouldShowItem(item, viewType) {
let matchesSearch = true;
let matchesDesigner = true;
let matchesStatus = true;
// Get item data based on view type
const itemData = getItemData(item, viewType);
// Debug logging (remove after testing)
if (currentDesignerFilter) {
console.log('Checking item:', {
itemDesignerId: itemData.designerId,
itemDesignerIdType: typeof itemData.designerId,
currentFilter: currentDesignerFilter,
currentFilterType: typeof currentDesignerFilter,
matches: String(itemData.designerId) === String(currentDesignerFilter)
});
}
// Check search filter
if (currentSearchTerm) {
matchesSearch = itemData.title.includes(currentSearchTerm) ||
itemData.designer.includes(currentSearchTerm) ||
itemData.description.includes(currentSearchTerm);
}
// Check designer filter (convert both to string for comparison)
if (currentDesignerFilter) {
matchesDesigner = String(itemData.designerId) === String(currentDesignerFilter);
}
// Check status filter
if (currentStatusFilter !== 'all') {
matchesStatus = itemData.status === currentStatusFilter;
}
return matchesSearch && matchesDesigner && matchesStatus;
}
// Extract data from table row or grid card
function getItemData(item, viewType) {
if (viewType === 'table') {
const designerElement = item.querySelector('td:first-child .text-gray-800[data-user-id]') ||
item.querySelector('td:first-child [data-user-id]') ||
item.querySelector('td:first-child .text-gray-800');
return {
title: (item.querySelector('td:nth-child(2) .text-gray-800')?.textContent || '').toLowerCase(),
designer: (item.querySelector('td:first-child .text-gray-800')?.textContent || '').toLowerCase().trim(),
description: (item.querySelector('td:nth-child(2) .text-muted')?.textContent || '').toLowerCase(),
designerId: designerElement?.getAttribute('data-user-id') || '',
status: item.getAttribute('data-status') || ''
};
} else {
const designerElement = item.querySelector('.border .fs-6[data-user-id]') ||
item.querySelector('[data-user-id]');
return {
title: (item.querySelector('.fs-3')?.textContent || '').toLowerCase(),
designer: (item.querySelector('.border .fs-6')?.textContent || '').toLowerCase().trim(),
description: (item.querySelector('.text-gray-600')?.textContent || '').toLowerCase(),
designerId: designerElement?.getAttribute('data-user-id') || '',
status: item.getAttribute('data-status') || ''
};
}
}
// Show/hide "no records found" message
function showNoRecordsMessage(tableCount, gridCount) {
// Remove existing messages
document.querySelectorAll('.no-records-message').forEach(msg => msg.remove());
const tableContainer = document.getElementById('tableViewContainer');
const gridContainer = document.getElementById('gridViewContainer');
// Add message to table view if needed
if (tableCount === 0 && tableContainer.style.display !== 'none') {
const noRecordsDiv = document.createElement('div');
noRecordsDiv.className = 'no-records-message text-center py-10';
noRecordsDiv.innerHTML = `
<div class="mb-5">
<i class="ki-duotone ki-information-5 fs-5x text-gray-400">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
</i>
</div>
<h3 class="text-gray-600 fw-semibold">No Tasks Found</h3>
<p class="text-gray-500">No tasks match your current filters.</p>
`;
tableContainer.querySelector('table').parentElement.appendChild(noRecordsDiv);
}
// Add message to grid view if needed
if (gridCount === 0 && gridContainer.style.display !== 'none') {
const noRecordsDiv = document.createElement('div');
noRecordsDiv.className = 'no-records-message text-center py-10 col-12';
noRecordsDiv.innerHTML = `
<div class="mb-5">
<i class="ki-duotone ki-information-5 fs-5x text-gray-400">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
</i>
</div>
<h3 class="text-gray-600 fw-semibold">No Tasks Found</h3>
<p class="text-gray-500">No tasks match your current filters.</p>
`;
gridContainer.appendChild(noRecordsDiv);
}
}
// Update status filter card counts
function updateStatusCounts() {
const allRows = document.querySelectorAll('#designerTasksTable tbody tr');
const allCards = document.querySelectorAll('#gridViewContainer .task-card');
const statusCounts = {
'all': 0,
'PLANNED': 0,
'ON HOLD': 0,
'ASSIGNED': 0,
'IN PROGRESS': 0,
'READY': 0,
'PUBLISHED': 0
};
// Count from all items that match current designer and search filters
allRows.forEach(row => {
const itemData = getItemData(row, 'table');
let matchesDesigner = true;
let matchesSearch = true;
if (currentDesignerFilter) {
matchesDesigner = String(itemData.designerId) === String(currentDesignerFilter);
}
if (currentSearchTerm) {
matchesSearch = itemData.title.includes(currentSearchTerm) ||
itemData.designer.includes(currentSearchTerm) ||
itemData.description.includes(currentSearchTerm);
}
if (matchesDesigner && matchesSearch) {
const status = row.getAttribute('data-status');
if (status && statusCounts.hasOwnProperty(status)) {
statusCounts[status]++;
}
statusCounts['all']++;
}
});
// Update filter cards
document.querySelectorAll('.filter-card').forEach(card => {
const status = card.getAttribute('data-status');
const countElement = card.querySelector('.fs-2hx');
if (countElement && status && statusCounts.hasOwnProperty(status)) {
countElement.textContent = statusCounts[status];
}
});
}
// View switching
function switchView(view) {
const tableView = document.getElementById('tableViewContainer');
const gridView = document.getElementById('gridViewContainer');
const tableBtn = document.getElementById('tableViewBtn');
const gridBtn = document.getElementById('gridViewBtn');
if (view === 'grid') {
tableView.style.display = 'none';
gridView.style.display = 'flex';
tableBtn.classList.remove('active');
gridBtn.classList.add('active');
localStorage.setItem('designerTasksView', 'grid');
} else {
tableView.style.display = 'block';
gridView.style.display = 'none';
gridBtn.classList.remove('active');
tableBtn.classList.add('active');
localStorage.setItem('designerTasksView', 'table');
}
// Reapply filters after view switch
applyAllFilters();
}
// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
const savedView = localStorage.getItem('designerTasksView') || 'table';
switchView(savedView);
// Highlight "All Tasks" filter by default
document.querySelector('.filter-card[data-status="all"]')?.classList.add('border', 'border-primary');
});
</script>
<?php include 'includes/chat_widget.php'; ?>
</body>
</html>