feature: keep sidebar and add service layer
This commit is contained in:
antv
@@ -0,0 +1,443 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Notification Showcase')
|
||||
|
||||
@section('content')
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6 h-[calc(100vh-8rem)]">
|
||||
<!-- Left Panel: Case Selection (lg:col-span-4) -->
|
||||
<div class="lg:col-span-4 bg-white rounded-2xl border border-slate-200 shadow-sm flex flex-col min-h-0 overflow-hidden">
|
||||
<div class="p-5 border-b border-slate-100 bg-slate-50/50">
|
||||
<h2 class="text-lg font-bold text-slate-800">Review Cases (15 cases)</h2>
|
||||
<p class="text-xs text-slate-500 mt-1">Select a case to trigger its notification. Used for QA & BA approval.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto p-4 space-y-2" id="cases-list">
|
||||
<!-- Case 1 -->
|
||||
<button onclick="triggerCase(1)" id="case-btn-1" class="case-btn w-full text-left p-3.5 rounded-xl border border-slate-100 hover:border-slate-300 hover:bg-slate-50 transition-all duration-200 flex flex-col gap-1 cursor-pointer">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-bold text-slate-400">Case 01</span>
|
||||
<span class="px-2 py-0.5 text-[10px] font-bold bg-amber-50 text-amber-600 rounded-full border border-amber-100 uppercase">Toast (Error)</span>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-slate-700">Login failed</span>
|
||||
</button>
|
||||
|
||||
<!-- Case 2 -->
|
||||
<button onclick="triggerCase(2)" id="case-btn-2" class="case-btn w-full text-left p-3.5 rounded-xl border border-slate-100 hover:border-slate-300 hover:bg-slate-50 transition-all duration-200 flex flex-col gap-1 cursor-pointer">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-bold text-slate-400">Case 02</span>
|
||||
<span class="px-2 py-0.5 text-[10px] font-bold bg-red-50 text-red-600 rounded-full border border-red-100 uppercase">Error Dialog</span>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-slate-700">Access denied</span>
|
||||
</button>
|
||||
|
||||
<!-- Case 3 -->
|
||||
<button onclick="triggerCase(3)" id="case-btn-3" class="case-btn w-full text-left p-3.5 rounded-xl border border-slate-100 hover:border-slate-300 hover:bg-slate-50 transition-all duration-200 flex flex-col gap-1 cursor-pointer">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-bold text-slate-400">Case 03</span>
|
||||
<span class="px-2 py-0.5 text-[10px] font-bold bg-blue-50 text-blue-600 rounded-full border border-blue-100 uppercase">Info Dialog</span>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-slate-700">First login (change password)</span>
|
||||
</button>
|
||||
|
||||
<!-- Case 4 -->
|
||||
<button onclick="triggerCase(4)" id="case-btn-4" class="case-btn w-full text-left p-3.5 rounded-xl border border-slate-100 hover:border-slate-300 hover:bg-slate-50 transition-all duration-200 flex flex-col gap-1 cursor-pointer">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-bold text-slate-400">Case 04</span>
|
||||
<span class="px-2 py-0.5 text-[10px] font-bold bg-purple-50 text-purple-600 rounded-full border border-purple-100 uppercase">Confirm Dialog</span>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-slate-700">Delete user confirmation</span>
|
||||
</button>
|
||||
|
||||
<!-- Case 5 -->
|
||||
<button onclick="triggerCase(5)" id="case-btn-5" class="case-btn w-full text-left p-3.5 rounded-xl border border-slate-100 hover:border-slate-300 hover:bg-slate-50 transition-all duration-200 flex flex-col gap-1 cursor-pointer">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-bold text-slate-400">Case 05</span>
|
||||
<span class="px-2 py-0.5 text-[10px] font-bold bg-emerald-50 text-emerald-600 rounded-full border border-emerald-100 uppercase">Success Dialog</span>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-slate-700">Create user success</span>
|
||||
</button>
|
||||
|
||||
<!-- Case 6 -->
|
||||
<button onclick="triggerCase(6)" id="case-btn-6" class="case-btn w-full text-left p-3.5 rounded-xl border border-slate-100 hover:border-slate-300 hover:bg-slate-50 transition-all duration-200 flex flex-col gap-1 cursor-pointer">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-bold text-slate-400">Case 06</span>
|
||||
<span class="px-2 py-0.5 text-[10px] font-bold bg-red-50 text-red-600 rounded-full border border-red-100 uppercase">Error Dialog</span>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-slate-700">Email already exists</span>
|
||||
</button>
|
||||
|
||||
<!-- Case 7 -->
|
||||
<button onclick="triggerCase(7)" id="case-btn-7" class="case-btn w-full text-left p-3.5 rounded-xl border border-slate-100 hover:border-slate-300 hover:bg-slate-50 transition-all duration-200 flex flex-col gap-1 cursor-pointer">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-bold text-slate-400">Case 07</span>
|
||||
<span class="px-2 py-0.5 text-[10px] font-bold bg-red-50 text-red-600 rounded-full border border-red-100 uppercase">Error Dialog</span>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-slate-700">Employee ID already exists</span>
|
||||
</button>
|
||||
|
||||
<!-- Case 8 -->
|
||||
<button onclick="triggerCase(8)" id="case-btn-8" class="case-btn w-full text-left p-3.5 rounded-xl border border-slate-100 hover:border-slate-300 hover:bg-slate-50 transition-all duration-200 flex flex-col gap-1 cursor-pointer">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-bold text-slate-400">Case 08</span>
|
||||
<span class="px-2 py-0.5 text-[10px] font-bold bg-slate-50 text-slate-600 rounded-full border border-slate-200 uppercase">Empty State</span>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-slate-700">No data found</span>
|
||||
</button>
|
||||
|
||||
<!-- Case 9 -->
|
||||
<button onclick="triggerCase(9)" id="case-btn-9" class="case-btn w-full text-left p-3.5 rounded-xl border border-slate-100 hover:border-slate-300 hover:bg-slate-50 transition-all duration-200 flex flex-col gap-1 cursor-pointer">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-bold text-slate-400">Case 09</span>
|
||||
<span class="px-2 py-0.5 text-[10px] font-bold bg-amber-50 text-amber-600 rounded-full border border-amber-100 uppercase">Warning Dialog</span>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-slate-700">Not enough thankcards</span>
|
||||
</button>
|
||||
|
||||
<!-- Case 10 -->
|
||||
<button onclick="triggerCase(10)" id="case-btn-10" class="case-btn w-full text-left p-3.5 rounded-xl border border-slate-100 hover:border-slate-300 hover:bg-slate-50 transition-all duration-200 flex flex-col gap-1 cursor-pointer">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-bold text-slate-400">Case 10</span>
|
||||
<span class="px-2 py-0.5 text-[10px] font-bold bg-amber-50 text-amber-600 rounded-full border border-amber-100 uppercase">Warning Dialog</span>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-slate-700">Max 5 thankcards/month</span>
|
||||
</button>
|
||||
|
||||
<!-- Case 11 -->
|
||||
<button onclick="triggerCase(11)" id="case-btn-11" class="case-btn w-full text-left p-3.5 rounded-xl border border-slate-100 hover:border-slate-300 hover:bg-slate-50 transition-all duration-200 flex flex-col gap-1 cursor-pointer">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-bold text-slate-400">Case 11</span>
|
||||
<span class="px-2 py-0.5 text-[10px] font-bold bg-purple-50 text-purple-600 rounded-full border border-purple-100 uppercase">Confirm Dialog</span>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-slate-700">Send thankcards confirmation</span>
|
||||
</button>
|
||||
|
||||
<!-- Case 12 -->
|
||||
<button onclick="triggerCase(12)" id="case-btn-12" class="case-btn w-full text-left p-3.5 rounded-xl border border-slate-100 hover:border-slate-300 hover:bg-slate-50 transition-all duration-200 flex flex-col gap-1 cursor-pointer">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-bold text-slate-400">Case 12</span>
|
||||
<span class="px-2 py-0.5 text-[10px] font-bold bg-emerald-50 text-emerald-600 rounded-full border border-emerald-100 uppercase">Success Dialog</span>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-slate-700">Send thankcards success</span>
|
||||
</button>
|
||||
|
||||
<!-- Case 13 -->
|
||||
<button onclick="triggerCase(13)" id="case-btn-13" class="case-btn w-full text-left p-3.5 rounded-xl border border-slate-100 hover:border-slate-300 hover:bg-slate-50 transition-all duration-200 flex flex-col gap-1 cursor-pointer">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-bold text-slate-400">Case 13</span>
|
||||
<span class="px-2 py-0.5 text-[10px] font-bold bg-red-50 text-red-600 rounded-full border border-red-100 uppercase">Error Dialog</span>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-slate-700">Password confirmation mismatch</span>
|
||||
</button>
|
||||
|
||||
<!-- Case 14 -->
|
||||
<button onclick="triggerCase(14)" id="case-btn-14" class="case-btn w-full text-left p-3.5 rounded-xl border border-slate-100 hover:border-slate-300 hover:bg-slate-50 transition-all duration-200 flex flex-col gap-1 cursor-pointer">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-bold text-slate-400">Case 14</span>
|
||||
<span class="px-2 py-0.5 text-[10px] font-bold bg-emerald-50 text-emerald-600 rounded-full border border-emerald-100 uppercase">Success Dialog</span>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-slate-700">Change password success</span>
|
||||
</button>
|
||||
|
||||
<!-- Case 15 -->
|
||||
<button onclick="triggerCase(15)" id="case-btn-15" class="case-btn w-full text-left p-3.5 rounded-xl border border-slate-100 hover:border-slate-300 hover:bg-slate-50 transition-all duration-200 flex flex-col gap-1 cursor-pointer">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-bold text-slate-400">Case 15</span>
|
||||
<span class="px-2 py-0.5 text-[10px] font-bold bg-red-50 text-red-600 rounded-full border border-red-100 uppercase">Error Dialog</span>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-slate-700">Generic system error</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Panel: Live Browser Preview (lg:col-span-8) -->
|
||||
<div class="lg:col-span-8 bg-slate-100 rounded-2xl border border-slate-200 overflow-hidden flex flex-col relative" id="preview-container">
|
||||
<!-- Mock Top Bar -->
|
||||
<div class="bg-white border-b border-slate-200 px-6 py-4 flex items-center justify-between z-10">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex gap-1.5">
|
||||
<span class="w-3.5 h-3.5 rounded-full bg-red-400 block"></span>
|
||||
<span class="w-3.5 h-3.5 rounded-full bg-amber-400 block"></span>
|
||||
<span class="w-3.5 h-3.5 rounded-full bg-emerald-400 block"></span>
|
||||
</div>
|
||||
<span class="text-slate-400 text-xs font-medium ml-4">Browser Mockup - Preview Viewport</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4 text-xs font-bold text-slate-700" id="current-case-label">
|
||||
Active Case: None selected
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mock Workspace Page (this acts as the realistic background when modals appear) -->
|
||||
<div class="flex-1 p-6 relative overflow-y-auto flex flex-col" id="mock-workspace">
|
||||
|
||||
<!-- Standard User Table Mockup -->
|
||||
<div id="mock-table-view" class="bg-white rounded-xl shadow-sm border border-slate-200 flex-1 flex flex-col overflow-hidden">
|
||||
<div class="p-5 border-b border-slate-100 flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="font-bold text-slate-800 text-base">Danh sách nhân viên (Mock User Table)</h3>
|
||||
<p class="text-xs text-slate-500 mt-0.5">Hiển thị danh sách nhân viên trong hệ thống Thankcard.</p>
|
||||
</div>
|
||||
<button class="btn-primary py-1.5 px-4 text-xs font-semibold rounded-lg shadow-sm">Thêm nhân viên</button>
|
||||
</div>
|
||||
<div class="overflow-x-auto flex-1">
|
||||
<table class="w-full text-left text-sm text-slate-600 border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-slate-50 text-slate-500 font-semibold border-b border-slate-100">
|
||||
<th class="p-4">MSNV</th>
|
||||
<th class="p-4">Họ và tên</th>
|
||||
<th class="p-4">Email</th>
|
||||
<th class="p-4">Trạng thái</th>
|
||||
<th class="p-4 text-right">Thao tác</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-slate-100 hover:bg-slate-50/50">
|
||||
<td class="p-4 font-bold text-slate-700">NV0001</td>
|
||||
<td class="p-4 font-semibold text-slate-800">Nguyễn Văn A</td>
|
||||
<td class="p-4">nguyenvana@runsystem.net</td>
|
||||
<td class="p-4">
|
||||
<span class="inline-flex px-2 py-0.5 text-xs font-semibold rounded-full bg-emerald-50 text-emerald-600 border border-emerald-100">Hoạt động</span>
|
||||
</td>
|
||||
<td class="p-4 text-right flex justify-end gap-2">
|
||||
<button class="p-1 text-slate-400 hover:text-primary transition-colors cursor-pointer">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
|
||||
</button>
|
||||
<button class="p-1 text-slate-400 hover:text-red-500 transition-colors cursor-pointer">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b border-slate-100 hover:bg-slate-50/50">
|
||||
<td class="p-4 font-bold text-slate-700">NV0002</td>
|
||||
<td class="p-4 font-semibold text-slate-800">Trần Thị B</td>
|
||||
<td class="p-4">tranthib@runsystem.net</td>
|
||||
<td class="p-4">
|
||||
<span class="inline-flex px-2 py-0.5 text-xs font-semibold rounded-full bg-emerald-50 text-emerald-600 border border-emerald-100">Hoạt động</span>
|
||||
</td>
|
||||
<td class="p-4 text-right flex justify-end gap-2">
|
||||
<button class="p-1 text-slate-400 hover:text-primary transition-colors cursor-pointer">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
|
||||
</button>
|
||||
<button class="p-1 text-slate-400 hover:text-red-500 transition-colors cursor-pointer">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50/50">
|
||||
<td class="p-4 font-bold text-slate-700">NV0003</td>
|
||||
<td class="p-4 font-semibold text-slate-800">Lê Văn C</td>
|
||||
<td class="p-4">levanc@runsystem.net</td>
|
||||
<td class="p-4">
|
||||
<span class="inline-flex px-2 py-0.5 text-xs font-semibold rounded-full bg-slate-100 text-slate-600 border border-slate-200">Khóa</span>
|
||||
</td>
|
||||
<td class="p-4 text-right flex justify-end gap-2">
|
||||
<button class="p-1 text-slate-400 hover:text-primary transition-colors cursor-pointer">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
|
||||
</button>
|
||||
<button class="p-1 text-slate-400 hover:text-red-500 transition-colors cursor-pointer">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State Case container (visible only when case 8 is active) -->
|
||||
<div id="mock-empty-state-view" class="hidden flex-1 items-center justify-center">
|
||||
<x-empty-state
|
||||
title="Không tìm thấy dữ liệu"
|
||||
message="Không tìm thấy người dùng hoặc giao dịch nào phù hợp với bộ lọc tìm kiếm hiện tại của bạn. Vui lòng thử lại với từ khóa khác."
|
||||
actionText="Tải lại dữ liệu"
|
||||
actionId="reload-table-btn"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- All Case Modals/Toasts rendered as Reusable components -->
|
||||
|
||||
<!-- Case 1: Login failed -->
|
||||
<x-toast id="toast-case-1" type="error" message="Đăng nhập thất bại. Vui lòng kiểm tra lại Email hoặc Mật khẩu." />
|
||||
|
||||
<!-- Case 2: Access denied -->
|
||||
<x-error-dialog id="modal-case-2" title="Truy cập bị từ chối" message="Tài khoản của bạn không có quyền truy cập vào trang quản trị này. Vui lòng liên hệ với quản trị viên nếu đây là một sự nhầm lẫn." buttonText="Đồng ý" />
|
||||
|
||||
<!-- Case 3: First login (change password required) -->
|
||||
<x-info-dialog id="modal-case-3" title="Yêu cầu đổi mật khẩu" message="Chào mừng bạn đến với hệ thống Thankcard! Đây là lần đầu tiên bạn đăng nhập, vui lòng đổi mật khẩu mới để tiếp tục sử dụng hệ thống." buttonText="Đổi mật khẩu ngay" />
|
||||
|
||||
<!-- Case 4: Delete user confirmation -->
|
||||
<x-confirm-dialog id="modal-case-4" title="Xóa người dùng" message="Bạn có chắc chắn muốn xóa tài khoản của nhân viên Nguyễn Văn A (MSNV: NV0001)? Hành động này không thể hoàn tác và tất cả dữ liệu liên quan sẽ bị xóa." confirmText="Xóa vĩnh viễn" cancelText="Hủy bỏ" type="danger" />
|
||||
|
||||
<!-- Case 5: Create user success -->
|
||||
<x-success-dialog id="modal-case-5" title="Tạo tài khoản thành công" message="Tài khoản nhân viên mới đã được tạo thành công trong hệ thống. Email kích hoạt đã được gửi tới người dùng." buttonText="Hoàn tất" />
|
||||
|
||||
<!-- Case 6: Email already exists -->
|
||||
<x-error-dialog id="modal-case-6" title="Email đã tồn tại" message="Địa chỉ email 'nguyenvana@runsystem.net' đã được đăng ký bởi một nhân viên khác. Vui lòng sử dụng địa chỉ email khác." buttonText="Nhập lại" />
|
||||
|
||||
<!-- Case 7: Employee ID already exists -->
|
||||
<x-error-dialog id="modal-case-7" title="Mã nhân viên đã tồn tại" message="Mã nhân viên (MSNV) 'NV0001' đã được gán cho một tài khoản khác trong hệ thống. Vui lòng kiểm tra lại." buttonText="Nhập lại" />
|
||||
|
||||
<!-- Case 9: Not enough thankcards -->
|
||||
<x-warning-dialog id="modal-case-9" title="Không đủ lượt gửi" message="Số dư Thankcard hiện tại của bạn là 0. Bạn không thể gửi thêm thẻ cho đến khi số dư được đặt lại vào đầu tháng tới." buttonText="Đóng" />
|
||||
|
||||
<!-- Case 10: Maximum 5 thankcards per user/month -->
|
||||
<x-warning-dialog id="modal-case-10" title="Giới hạn gửi thẻ" message="Bạn đã đạt đến hạn mức gửi tối đa 5 Thankcard trong tháng này. Vui lòng đợi đến tháng sau để tiếp tục gửi lời cảm ơn." buttonText="Đã hiểu" />
|
||||
|
||||
<!-- Case 11: Send thankcards confirmation -->
|
||||
<x-confirm-dialog id="modal-case-11" title="Xác nhận gửi Thankcard" message="Bạn đang thực hiện gửi 1 Thankcard tới Trần Thị B với lời nhắn: 'Cảm ơn bạn đã hỗ trợ dự án'. Bạn có chắc chắn muốn gửi?" confirmText="Gửi ngay" cancelText="Xem lại" type="primary" />
|
||||
|
||||
<!-- Case 12: Send thankcards success -->
|
||||
<x-success-dialog id="modal-case-12" title="Gửi thẻ thành công" message="Thankcard của bạn đã được gửi thành công đến Trần Thị B. Lượt gửi còn lại trong tháng của bạn: 4/5." buttonText="Tuyệt vời" />
|
||||
|
||||
<!-- Case 13: Password confirmation mismatch -->
|
||||
<x-error-dialog id="modal-case-13" title="Mật khẩu không khớp" message="Mật khẩu xác nhận nhập lại không khớp với mật khẩu mới. Vui lòng nhập lại chính xác cả hai trường." buttonText="Thử lại" />
|
||||
|
||||
<!-- Case 14: Change password success -->
|
||||
<x-success-dialog id="modal-case-14" title="Đổi mật khẩu thành công" message="Mật khẩu của bạn đã được cập nhật thành công. Vui lòng sử dụng mật khẩu mới cho các lần đăng nhập tiếp theo." buttonText="Đăng nhập lại" />
|
||||
|
||||
<!-- Case 15: Generic system error -->
|
||||
<x-error-dialog id="modal-case-15" title="Lỗi hệ thống" message="Đã xảy ra sự cố kết nối với máy chủ (Mã lỗi: 500 - Internal Server Error). Vui lòng thử lại sau hoặc báo cáo cho đội ngũ kỹ thuật." buttonText="Đóng" />
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
const casesMetadata = {
|
||||
1: { name: "Case 1: Login failed", type: "toast", targetId: "toast-case-1" },
|
||||
2: { name: "Case 2: Access denied", type: "modal", targetId: "modal-case-2" },
|
||||
3: { name: "Case 3: First login (change password)", type: "modal", targetId: "modal-case-3" },
|
||||
4: { name: "Case 4: Delete user confirmation", type: "modal", targetId: "modal-case-4" },
|
||||
5: { name: "Case 5: Create user success", type: "modal", targetId: "modal-case-5" },
|
||||
6: { name: "Case 6: Email already exists", type: "modal", targetId: "modal-case-6" },
|
||||
7: { name: "Case 7: Employee ID already exists", type: "modal", targetId: "modal-case-7" },
|
||||
8: { name: "Case 8: No data found", type: "empty-state", targetId: "mock-empty-state-view" },
|
||||
9: { name: "Case 9: Not enough thankcards", type: "modal", targetId: "modal-case-9" },
|
||||
10: { name: "Case 10: Maximum 5 thankcards per user/month", type: "modal", targetId: "modal-case-10" },
|
||||
11: { name: "Case 11: Send thankcards confirmation", type: "modal", targetId: "modal-case-11" },
|
||||
12: { name: "Case 12: Send thankcards success", type: "modal", targetId: "modal-case-12" },
|
||||
13: { name: "Case 13: Password confirmation mismatch", type: "modal", targetId: "modal-case-13" },
|
||||
14: { name: "Case 14: Change password success", type: "modal", targetId: "modal-case-14" },
|
||||
15: { name: "Case 15: Generic system error", type: "modal", targetId: "modal-case-15" }
|
||||
};
|
||||
|
||||
let activeCaseId = null;
|
||||
|
||||
window.showToast = function(id) {
|
||||
document.querySelectorAll('[role="alert"]').forEach(el => {
|
||||
el.classList.add('hidden');
|
||||
el.classList.remove('flex', 'opacity-100', 'translate-y-0');
|
||||
el.classList.add('opacity-0', 'translate-y-[-10px]');
|
||||
});
|
||||
|
||||
const toast = document.getElementById(id);
|
||||
if (!toast) return;
|
||||
|
||||
toast.classList.remove('hidden');
|
||||
toast.classList.add('flex');
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
toast.classList.remove('opacity-0', 'translate-y-[-10px]');
|
||||
toast.classList.add('opacity-100', 'translate-y-0');
|
||||
});
|
||||
};
|
||||
|
||||
window.closeToast = function(id) {
|
||||
const toast = document.getElementById(id);
|
||||
if (!toast) return;
|
||||
|
||||
toast.classList.remove('opacity-100', 'translate-y-0');
|
||||
toast.classList.add('opacity-0', 'translate-y-[-10px]');
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.add('hidden');
|
||||
toast.classList.remove('flex');
|
||||
}, 300);
|
||||
};
|
||||
|
||||
let _isTransitioning = false;
|
||||
|
||||
function resetAllViews() {
|
||||
let hadOpenItem = false;
|
||||
|
||||
Object.keys(casesMetadata).forEach(id => {
|
||||
const meta = casesMetadata[id];
|
||||
const el = document.getElementById(meta.targetId);
|
||||
if (el && !el.classList.contains('hidden')) {
|
||||
hadOpenItem = true;
|
||||
if (meta.type === 'modal') {
|
||||
closeModal(meta.targetId);
|
||||
} else if (meta.type === 'toast') {
|
||||
closeToast(meta.targetId);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('mock-table-view').classList.remove('hidden');
|
||||
document.getElementById('mock-empty-state-view').classList.add('hidden');
|
||||
document.getElementById('mock-empty-state-view').classList.remove('flex');
|
||||
|
||||
document.querySelectorAll('.case-btn').forEach(btn => {
|
||||
btn.classList.remove('border-primary', 'bg-primary-light/35', 'ring-2', 'ring-primary/20');
|
||||
btn.classList.add('border-slate-100');
|
||||
});
|
||||
|
||||
return new Promise(resolve => setTimeout(resolve, hadOpenItem ? 310 : 0));
|
||||
}
|
||||
|
||||
window.triggerCase = async function(caseId) {
|
||||
if (_isTransitioning) return;
|
||||
_isTransitioning = true;
|
||||
|
||||
await resetAllViews();
|
||||
|
||||
const meta = casesMetadata[caseId];
|
||||
if (!meta) { _isTransitioning = false; return; }
|
||||
|
||||
activeCaseId = caseId;
|
||||
|
||||
const btn = document.getElementById(`case-btn-${caseId}`);
|
||||
if (btn) {
|
||||
btn.classList.remove('border-slate-100');
|
||||
btn.classList.add('border-primary', 'bg-primary-light/35', 'ring-2', 'ring-primary/20');
|
||||
btn.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}
|
||||
|
||||
document.getElementById('current-case-label').innerText = `Active Case: ${meta.name}`;
|
||||
|
||||
if (meta.type === 'modal') {
|
||||
openModal(meta.targetId);
|
||||
} else if (meta.type === 'toast') {
|
||||
showToast(meta.targetId);
|
||||
} else if (meta.type === 'empty-state') {
|
||||
document.getElementById('mock-table-view').classList.add('hidden');
|
||||
document.getElementById('mock-empty-state-view').classList.remove('hidden');
|
||||
document.getElementById('mock-empty-state-view').classList.add('flex');
|
||||
}
|
||||
|
||||
setTimeout(() => { _isTransitioning = false; }, 350);
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const firstBtn = document.getElementById('case-btn-1');
|
||||
if (firstBtn) {
|
||||
firstBtn.classList.remove('border-slate-100');
|
||||
firstBtn.classList.add('border-primary', 'bg-primary-light/35', 'ring-2', 'ring-primary/20');
|
||||
}
|
||||
document.getElementById('current-case-label').innerText =
|
||||
`Active Case: ${casesMetadata[1].name}`;
|
||||
|
||||
setTimeout(() => { triggerCase(1); }, 400);
|
||||
|
||||
const reloadBtn = document.getElementById('reload-table-btn');
|
||||
if (reloadBtn) {
|
||||
reloadBtn.addEventListener('click', async () => {
|
||||
await resetAllViews();
|
||||
document.getElementById('current-case-label').innerText = `Active Case: Mock Table Reloaded`;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user