gnx/Hotel-Booking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
Iliyan Angelov
2025-11-21 01:20:51 +02:00
parent a38ab4fa82
commit 6f85b8cf17
242 changed files with 7154 additions and 14492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
Frontend/src/pages/admin/BannerManagementPage.tsx
View File

@@ -7,8 +7,6 @@ import { ConfirmationDialog } from '../../components/common';
import bannerServiceModule from '../../services/api/bannerService';
import type { Banner } from '../../services/api/bannerService';
// Extract functions from default export - workaround for TypeScript cache issue
// All functions are properly exported in bannerService.ts
const {
getAllBanners,
createBanner,
@@ -69,7 +67,7 @@ const BannerManagementPage: React.FC = () => {
let allBanners = response.data?.banners || [];
// Filter by search if provided
if (filters.search) {
allBanners = allBanners.filter((banner: Banner) =>
banner.title.toLowerCase().includes(filters.search.toLowerCase())
@@ -89,13 +87,13 @@ const BannerManagementPage: React.FC = () => {
const file = e.target.files?.[0];
if (!file) return;
// Validate file type
if (!file.type.startsWith('image/')) {
toast.error('Please select an image file');
return;
}
// Validate file size (max 5MB)
if (file.size > 5 * 1024 * 1024) {
toast.error('Image size must be less than 5MB');
return;
@@ -103,14 +101,14 @@ const BannerManagementPage: React.FC = () => {
setImageFile(file);
// Create preview
const reader = new FileReader();
reader.onloadend = () => {
setImagePreview(reader.result as string);
};
reader.readAsDataURL(file);
// Upload image immediately
try {
setUploadingImage(true);
const response = await uploadBannerImage(file);
@@ -130,14 +128,14 @@ const BannerManagementPage: React.FC = () => {
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
// Validate image URL or file
if (!formData.image_url && !imageFile) {
toast.error('Please upload an image or provide an image URL');
return;
}
try {
// If there's a file but no URL yet, upload it first
let imageUrl = formData.image_url;
if (imageFile && !imageUrl) {
setUploadingImage(true);
@@ -179,7 +177,7 @@ const BannerManagementPage: React.FC = () => {
title: banner.title || '',
description: '',
image_url: banner.image_url || '',
link: banner.link || '',
link: banner.link_url || '',
position: banner.position || 'home',
display_order: banner.display_order || 0,
is_active: banner.is_active ?? true,
@@ -187,14 +185,14 @@ const BannerManagementPage: React.FC = () => {
end_date: banner.end_date ? banner.end_date.split('T')[0] : '',
});
setImageFile(null);
// Normalize image URL for preview (handle both relative and absolute URLs)
const previewUrl = banner.image_url
? (banner.image_url.startsWith('http')
? banner.image_url
: `${import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000'}${banner.image_url}`)
: `${import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000'}/${banner.image_url}`)
: null;
setImagePreview(previewUrl);
setUseFileUpload(false); // When editing, show URL by default
setUseFileUpload(false);
setShowModal(true);
};
@@ -264,7 +262,7 @@ const BannerManagementPage: React.FC = () => {
</button>
</div>
{/* Filters */}
{}
<div className="mb-6 bg-white p-4 rounded-lg shadow-md">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
@@ -300,7 +298,7 @@ const BannerManagementPage: React.FC = () => {
</div>
</div>
{/* Banners Table */}
{}
<div className="bg-white rounded-lg shadow-md overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full">
@@ -406,7 +404,7 @@ const BannerManagementPage: React.FC = () => {
</div>
</div>
{/* Pagination */}
{}
{totalPages > 1 && (
<div className="mt-6">
<Pagination
@@ -417,7 +415,7 @@ const BannerManagementPage: React.FC = () => {
</div>
)}
{/* Create/Edit Modal */}
{}
{showModal && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto">
@@ -448,13 +446,13 @@ const BannerManagementPage: React.FC = () => {
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#d4af37] focus:border-[#d4af37]"
/>
</div>
{/* Image Upload/URL Section */}
{}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Banner Image *
</label>
{/* Toggle between file upload and URL */}
{}
<div className="flex space-x-4 mb-3">
<button
type="button"
@@ -530,7 +528,6 @@ const BannerManagementPage: React.FC = () => {
className="hidden"
accept="image/*"
onChange={handleImageFileChange}
disabled={uploadingImage}
/>
</label>
</div>
@@ -538,28 +535,52 @@ const BannerManagementPage: React.FC = () => {
<div>
<input
type="url"
required={!imageFile}
value={formData.image_url}
onChange={(e) => {
setFormData({ ...formData, image_url: e.target.value });
setImagePreview(e.target.value || null);
}}
onChange={(e) => setFormData({ ...formData, image_url: e.target.value })}
placeholder="https://example.com/image.jpg"
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#d4af37] focus:border-[#d4af37]"
/>
{imagePreview && (
<div className="mt-3 relative">
{formData.image_url && (
<div className="mt-2">
<img
src={imagePreview}
src={formData.image_url}
alt="Preview"
className="w-full h-32 object-cover rounded-lg border border-gray-300"
onError={() => setImagePreview(null)}
className="w-full h-32 object-cover rounded-lg"
onError={(e) => {
(e.target as HTMLImageElement).style.display = 'none';
}}
/>
</div>
)}
</div>
)}
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Description
</label>
<textarea
value={formData.description}
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
rows={3}
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#d4af37] focus:border-[#d4af37]"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Link URL
</label>
<input
type="url"
value={formData.link}
onChange={(e) => setFormData({ ...formData, link: e.target.value })}
placeholder="https://example.com"
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#d4af37] focus:border-[#d4af37]"
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
@@ -587,17 +608,7 @@ const BannerManagementPage: React.FC = () => {
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Link URL
</label>
<input
type="url"
value={formData.link}
onChange={(e) => setFormData({ ...formData, link: e.target.value })}
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#d4af37] focus:border-[#d4af37]"
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
@@ -622,35 +633,37 @@ const BannerManagementPage: React.FC = () => {
/>
</div>
</div>
{editingBanner && (
<div>
<label className="flex items-center space-x-2">
<input
type="checkbox"
checked={formData.is_active}
onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
className="rounded border-gray-300 text-[#d4af37] focus:ring-[#d4af37]"
/>
<span className="text-sm font-medium text-gray-700">Active</span>
</label>
</div>
)}
<div className="flex justify-end space-x-4 pt-4">
<div className="flex items-center">
<input
type="checkbox"
id="is_active"
checked={formData.is_active}
onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
className="w-4 h-4 text-[#d4af37] border-gray-300 rounded focus:ring-[#d4af37]"
/>
<label htmlFor="is_active" className="ml-2 text-sm font-medium text-gray-700">
Active
</label>
</div>
<div className="flex justify-end space-x-3 pt-4 border-t border-gray-200">
<button
type="button"
onClick={() => {
setShowModal(false);
resetForm();
}}
className="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"
className="px-4 py-2 text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 transition-colors"
>
Cancel
</button>
<button
type="submit"
className="px-6 py-2 bg-[#d4af37] text-white rounded-lg hover:bg-[#c9a227]"
disabled={uploadingImage}
className="px-4 py-2 bg-[#d4af37] text-white rounded-lg hover:bg-[#c9a227] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{editingBanner ? 'Update' : 'Create'}
{uploadingImage ? 'Uploading...' : editingBanner ? 'Update Banner' : 'Create Banner'}
</button>
</div>
</form>
@@ -658,7 +671,6 @@ const BannerManagementPage: React.FC = () => {
</div>
)}
{/* Delete Confirmation Dialog */}
<ConfirmationDialog
isOpen={deleteConfirm.show}
onClose={() => setDeleteConfirm({ show: false, id: null })}