manage current user's media
This commit is contained in:
@@ -1,71 +1,396 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
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";
|
||||
|
||||
export default function MediaCard({ data }: { data: MediaDto }) {
|
||||
const [index, setIndex] = useState(-1);
|
||||
const listMedia = data?.data || [];
|
||||
import { deleteMedia } from "@/service/mediaService";
|
||||
import { INITIAL_LIMIT } from "../../../constant";
|
||||
|
||||
const slides = listMedia.map((item) => ({
|
||||
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: `Size: ${(item.size / 1024).toFixed(2)} KB - Type: ${item.mime_type}`,
|
||||
description: `Kích thước: ${(item.size / 1024).toFixed(2)} KB - Loại: ${item.mime_type}`,
|
||||
}));
|
||||
// console.log("slides", listMedia);
|
||||
return (
|
||||
<div className="p-5 border border-gray-200 rounded-2xl dark:border-gray-800 lg:p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-800 dark:text-white/90 lg:mb-6">Media Assets</h3>
|
||||
|
||||
<div className="flex flex-row gap-4 overflow-x-auto pb-4 scrollbar-hide">
|
||||
{listMedia.map((item, idx) => (
|
||||
<div
|
||||
key={item.id}
|
||||
onClick={() => setIndex(idx)}
|
||||
className="group relative min-w-[150px] h-[150px] cursor-pointer overflow-hidden rounded-lg border border-gray-200"
|
||||
>
|
||||
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-300 group-hover:scale-110"
|
||||
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 flex items-end bg-black/40 p-2 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
|
||||
<p className="w-full truncate text-xs text-white">
|
||||
{item.original_name}
|
||||
</p>
|
||||
<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={slides}
|
||||
slides={imageSlides}
|
||||
plugins={[Zoom, Captions]}
|
||||
zoom={{
|
||||
maxZoomPixelRatio: 10,
|
||||
zoomInMultiplier: 2,
|
||||
doubleTapDelay: 300,
|
||||
doubleClickDelay: 300,
|
||||
doubleClickMaxStops: 2,
|
||||
keyboardMoveDistance: 50,
|
||||
wheelZoomDistanceFactor: 100,
|
||||
pinchZoomDistanceFactor: 100,
|
||||
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: 999999999,
|
||||
"--yarl__color_backdrop": "rgba(0, 0, 0, 0.85)",
|
||||
},
|
||||
root: { zIndex: 99, "--yarl__color_backdrop": "rgba(0, 0, 0, 0.9)" },
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user