bokhonglo
e273df1ee2
All checks were successful
Build and Release / release (push) Successful in 29s
399 lines
14 KiB
TypeScript
399 lines
14 KiB
TypeScript
"use client";
|
|
import { useState, useEffect } from "react";
|
|
import Lightbox from "yet-another-react-lightbox";
|
|
import Zoom from "yet-another-react-lightbox/plugins/zoom";
|
|
import Captions from "yet-another-react-lightbox/plugins/captions";
|
|
import "yet-another-react-lightbox/styles.css";
|
|
import "yet-another-react-lightbox/plugins/captions.css";
|
|
import Swal from "sweetalert2";
|
|
import { MediaDto } from "@/interface/media";
|
|
import { URL_MEDIA } from "../../../api";
|
|
|
|
import { deleteMedia } from "@/service/mediaService";
|
|
import { INITIAL_LIMIT } from "../../../constant";
|
|
|
|
export default function MediaLibrary({
|
|
data,
|
|
onRefresh,
|
|
}: {
|
|
data: MediaDto;
|
|
onRefresh?: () => void;
|
|
}) {
|
|
const [index, setIndex] = useState(-1);
|
|
|
|
const [showAllImages, setShowAllImages] = useState(false);
|
|
const [showAllDocs, setShowAllDocs] = useState(false);
|
|
|
|
const [localMedia, setLocalMedia] = useState(data?.data || []);
|
|
const [isSelectionMode, setIsSelectionMode] = useState(false);
|
|
const [selectedIds, setSelectedIds] = useState<string[]>([]);
|
|
|
|
useEffect(() => {
|
|
setLocalMedia(data?.data || []);
|
|
}, [data]);
|
|
|
|
const isImageFile = (file: any) => {
|
|
const isImageMime = file.mime_type?.startsWith("image/");
|
|
const isImageExt = /\.(jpg|jpeg|png|webp|gif)$/i.test(file.storage_key);
|
|
return isImageMime || isImageExt;
|
|
};
|
|
|
|
const imageFiles = localMedia.filter(isImageFile);
|
|
const documentFiles = localMedia.filter((file) => !isImageFile(file));
|
|
|
|
const displayedImages = showAllImages
|
|
? imageFiles
|
|
: imageFiles.slice(0, INITIAL_LIMIT);
|
|
const displayedDocs = showAllDocs
|
|
? documentFiles
|
|
: documentFiles.slice(0, INITIAL_LIMIT);
|
|
|
|
const imageSlides = imageFiles.map((item) => ({
|
|
src: `${URL_MEDIA}${item.storage_key}`,
|
|
title: item.original_name,
|
|
description: `Kích thước: ${(item.size / 1024).toFixed(2)} KB - Loại: ${item.mime_type}`,
|
|
}));
|
|
|
|
const toggleSelectionMode = () => {
|
|
setIsSelectionMode(!isSelectionMode);
|
|
if (isSelectionMode) {
|
|
setSelectedIds([]);
|
|
}
|
|
};
|
|
|
|
const toggleItemSelection = (id: string, e?: React.MouseEvent) => {
|
|
if (e) e.stopPropagation();
|
|
|
|
if (!isSelectionMode) {
|
|
setIsSelectionMode(true);
|
|
setSelectedIds([id]);
|
|
return;
|
|
}
|
|
|
|
if (selectedIds.includes(id)) {
|
|
setSelectedIds(selectedIds.filter((selectedId) => selectedId !== id));
|
|
} else {
|
|
setSelectedIds([...selectedIds, id]);
|
|
}
|
|
};
|
|
|
|
const handleItemClick = (item: any, idx: number, isImage: boolean) => {
|
|
if (isSelectionMode) {
|
|
toggleItemSelection(item.id);
|
|
} else {
|
|
if (isImage) {
|
|
setIndex(idx);
|
|
} else {
|
|
const fileUrl = `${URL_MEDIA}${item.storage_key}`;
|
|
const googleDocsUrl = `https://docs.google.com/viewer?url=${encodeURIComponent(fileUrl)}&embedded=true`;
|
|
window.open(googleDocsUrl, "_blank");
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleDeleteSelected = async () => {
|
|
const result = await Swal.fire({
|
|
title: "Xóa tệp đính kèm?",
|
|
text: `Bạn chuẩn bị xóa ${selectedIds.length} tệp. Hành động này không thể hoàn tác!`,
|
|
icon: "warning",
|
|
showCancelButton: true,
|
|
confirmButtonColor: "#ef4444",
|
|
cancelButtonColor: "#6b7280",
|
|
confirmButtonText: "Xóa vĩnh viễn",
|
|
cancelButtonText: "Hủy",
|
|
});
|
|
|
|
if (result.isConfirmed) {
|
|
try {
|
|
await deleteMedia(selectedIds);
|
|
setLocalMedia((prev) =>
|
|
prev.filter((item) => !selectedIds.includes(item.id)),
|
|
);
|
|
setIsSelectionMode(false);
|
|
setSelectedIds([]);
|
|
Swal.fire("Thành công!", "Các tệp đã được xóa.", "success");
|
|
if (onRefresh) onRefresh();
|
|
} catch (error) {
|
|
Swal.fire("Lỗi!", "Không thể xóa tệp, vui lòng thử lại.", "error");
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleDeleteFromLightbox = async () => {
|
|
const currentImage = imageFiles[index];
|
|
if (!currentImage) return;
|
|
|
|
const result = await Swal.fire({
|
|
title: "Xóa ảnh này?",
|
|
text: "Bạn có chắc chắn muốn xóa ảnh này không?",
|
|
icon: "warning",
|
|
showCancelButton: true,
|
|
confirmButtonColor: "#ef4444",
|
|
cancelButtonColor: "#6b7280",
|
|
confirmButtonText: "Xóa",
|
|
cancelButtonText: "Hủy",
|
|
// customClass: { container: 'z-99999999999999999999999' }
|
|
});
|
|
|
|
if (result.isConfirmed) {
|
|
try {
|
|
await deleteMedia([currentImage.id]);
|
|
setLocalMedia((prev) =>
|
|
prev.filter((item) => item.id !== currentImage.id),
|
|
);
|
|
|
|
if (imageFiles.length === 1) {
|
|
setIndex(-1);
|
|
} else if (index >= imageFiles.length - 1) {
|
|
setIndex(index - 1);
|
|
}
|
|
|
|
Swal.fire({
|
|
title: "Thành công!",
|
|
text: "Ảnh đã được xóa.",
|
|
icon: "success",
|
|
customClass: { container: "z-[9999999999]" },
|
|
});
|
|
if (onRefresh) onRefresh();
|
|
} catch (error) {
|
|
Swal.fire({
|
|
title: "Lỗi!",
|
|
text: "Không thể xóa ảnh.",
|
|
icon: "error",
|
|
customClass: { container: "z-[9999999999]" },
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
const renderItemCard = (item: any, isImage: boolean, idx: number) => {
|
|
const isSelected = selectedIds.includes(item.id);
|
|
|
|
return (
|
|
<div
|
|
key={item.id}
|
|
onClick={() => handleItemClick(item, idx, isImage)}
|
|
className={`group relative aspect-square cursor-pointer overflow-hidden rounded-xl border-2 transition-all ${
|
|
isSelected
|
|
? "border-blue-500 ring-2 ring-blue-500/30"
|
|
: "border-gray-200 hover:ring-2 hover:ring-blue-500 hover:ring-offset-2 dark:border-zinc-700 dark:hover:ring-offset-zinc-900"
|
|
} ${isImage ? "bg-gray-100 dark:bg-zinc-800" : "bg-gray-50 dark:bg-zinc-800"}`}
|
|
>
|
|
<div
|
|
onClick={(e) => toggleItemSelection(item.id, e)}
|
|
className={`absolute right-2 top-2 z-30 flex h-6 w-6 items-center justify-center rounded-full border-2 transition-all duration-200 ${
|
|
isSelected
|
|
? "border-blue-500 bg-blue-500"
|
|
: "border-white bg-black/40 opacity-0 group-hover:opacity-100"
|
|
} ${isSelectionMode && !isSelected ? "opacity-100" : ""}`}
|
|
>
|
|
{isSelected && (
|
|
<svg
|
|
className="h-3.5 w-3.5 text-white"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth={3}
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M5 13l4 4L19 7"
|
|
/>
|
|
</svg>
|
|
)}
|
|
</div>
|
|
|
|
{isImage ? (
|
|
<>
|
|
<img
|
|
src={`${URL_MEDIA}${item.storage_key}`}
|
|
alt={item.original_name}
|
|
className={`h-full w-full object-cover transition-transform duration-500 ${isSelected ? "scale-105 opacity-80" : "group-hover:scale-110"}`}
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100">
|
|
<div className="absolute bottom-0 w-full p-3 text-white">
|
|
<p className="truncate text-sm font-medium ">
|
|
{item.original_name}
|
|
</p>
|
|
<p className="text-xs text-gray-300">
|
|
{(item.size / 1024).toFixed(0)} KB
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{!isSelectionMode && (
|
|
<div className="absolute inset-0 z-10 flex items-center justify-center bg-black/40 opacity-0 transition-opacity group-hover:opacity-100">
|
|
<span className="rounded-full border border-white/30 bg-white/20 px-3 py-1 text-xs font-bold text-white backdrop-blur-md">
|
|
Xem ảnh
|
|
</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
<div
|
|
className={`flex h-full w-full flex-col items-center justify-center p-3 text-center transition-opacity ${isSelected ? "opacity-80" : ""}`}
|
|
>
|
|
<div className="mb-3 flex h-12 w-12 items-center justify-center rounded-lg bg-white text-2xl dark:bg-zinc-700">
|
|
📄
|
|
</div>
|
|
<span className="line-clamp-2 px-2 text-xs font-medium text-gray-600 dark:text-gray-300">
|
|
{item.original_name}
|
|
</span>
|
|
</div>
|
|
{!isSelectionMode && (
|
|
<div className="absolute inset-0 z-10 flex items-center justify-center bg-black/40 opacity-0 transition-opacity group-hover:opacity-100">
|
|
<span className="rounded-full border border-white/30 bg-white/20 px-3 py-1 text-xs font-bold text-white backdrop-blur-md">
|
|
Xem file
|
|
</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="rounded-2xl border border-gray-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900/50">
|
|
<div className="mb-6 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
|
|
<h3 className="text-xl font-bold text-gray-800 dark:text-white/90">
|
|
Media Assets
|
|
<span className="ml-2 text-sm font-normal text-gray-500">
|
|
({localMedia.length} tệp)
|
|
</span>
|
|
</h3>
|
|
|
|
<div className="flex items-center gap-3">
|
|
{selectedIds.length > 0 && (
|
|
<button
|
|
onClick={handleDeleteSelected}
|
|
className="flex items-center gap-1 rounded-lg bg-red-50 px-4 py-2 text-sm font-medium text-red-600 transition-colors hover:bg-red-100 dark:bg-red-500/10 dark:hover:bg-red-500/20"
|
|
>
|
|
<svg
|
|
className="h-4 w-4"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={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>
|
|
Xóa ({selectedIds.length})
|
|
</button>
|
|
)}
|
|
|
|
<button
|
|
onClick={toggleSelectionMode}
|
|
className={`rounded-lg px-4 py-2 text-sm font-medium transition-all w-17.5 h-10 ${
|
|
isSelectionMode
|
|
? "bg-blue-500 text-white shadow-md hover:bg-blue-600"
|
|
: "border border-gray-200 bg-gray-50 text-gray-700 hover:bg-gray-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-gray-200 dark:hover:bg-zinc-700"
|
|
}`}
|
|
>
|
|
{isSelectionMode ? "Hủy" : "Chọn"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-10">
|
|
{imageFiles.length > 0 && (
|
|
<div>
|
|
<h4 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gray-500">
|
|
Hình ảnh ({imageFiles.length})
|
|
</h4>
|
|
<div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8">
|
|
{" "}
|
|
{displayedImages.map((item, idx) =>
|
|
renderItemCard(item, true, idx),
|
|
)}
|
|
</div>
|
|
{imageFiles.length > INITIAL_LIMIT && (
|
|
<div className="mt-6 flex justify-center">
|
|
<button
|
|
onClick={() => setShowAllImages(!showAllImages)}
|
|
className="rounded-lg border border-gray-200 bg-gray-50 px-5 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-gray-300"
|
|
>
|
|
{showAllImages
|
|
? "Thu gọn"
|
|
: `Xem thêm ${imageFiles.length - INITIAL_LIMIT} hình ảnh`}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{documentFiles.length > 0 && (
|
|
<div>
|
|
<h4 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gray-500">
|
|
Tài liệu ({documentFiles.length})
|
|
</h4>
|
|
<div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8">
|
|
|
|
{displayedDocs.map((item, idx) =>
|
|
renderItemCard(item, false, idx),
|
|
)}
|
|
</div>
|
|
{documentFiles.length > INITIAL_LIMIT && (
|
|
<div className="mt-6 flex justify-center">
|
|
<button
|
|
onClick={() => setShowAllDocs(!showAllDocs)}
|
|
className="rounded-lg border border-gray-200 bg-gray-50 px-5 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-gray-300"
|
|
>
|
|
{showAllDocs
|
|
? "Thu gọn"
|
|
: `Xem thêm ${documentFiles.length - INITIAL_LIMIT} tài liệu`}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<Lightbox
|
|
index={index}
|
|
open={index >= 0}
|
|
close={() => setIndex(-1)}
|
|
slides={imageSlides}
|
|
plugins={[Zoom, Captions]}
|
|
toolbar={{
|
|
buttons: [
|
|
<button
|
|
key="delete"
|
|
type="button"
|
|
className="yarl__button text-red-500"
|
|
title="Xóa ảnh này"
|
|
onClick={handleDeleteFromLightbox}
|
|
>
|
|
<svg
|
|
className="w-6 h-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={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>,
|
|
"zoom",
|
|
"close",
|
|
],
|
|
}}
|
|
zoom={{ maxZoomPixelRatio: 3 }}
|
|
animation={{ zoom: 200 }}
|
|
styles={{
|
|
root: { zIndex: 99, "--yarl__color_backdrop": "rgba(0, 0, 0, 0.9)" },
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|