Update media select in EditSightPage and CreateSightPage

2025-06-03 14:32:42 +03:00
parent f0e03c3a1d
commit 078f051e8a
14 changed files with 1361 additions and 1175 deletions
--- a/src/widgets/ImageUploadCard/index.tsx
+++ b/src/widgets/ImageUploadCard/index.tsx
@@ -0,0 +1,182 @@
+import React, { useRef, useState, DragEvent, useEffect } from "react";
+import { Paper, Box, Typography, Button, Tooltip } from "@mui/material";
+import { X, Info } from "lucide-react"; // Assuming lucide-react for icons
+import { editSightStore } from "@shared";
+
+interface ImageUploadCardProps {
+  title: string;
+  imageKey?: "thumbnail" | "watermark_lu" | "watermark_rd";
+  imageUrl: string | null | undefined;
+  onImageClick: () => void;
+  onDeleteImageClick: () => void;
+  onSelectFileClick: () => void;
+  setUploadMediaOpen: (open: boolean) => void;
+  tooltipText?: string;
+}
+
+export const ImageUploadCard: React.FC<ImageUploadCardProps> = ({
+  title,
+
+  imageUrl,
+  onImageClick,
+  onDeleteImageClick,
+  onSelectFileClick,
+  setUploadMediaOpen,
+  tooltipText,
+}) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const { setFileToUpload } = editSightStore;
+
+  useEffect(() => {
+    if (isDragOver) {
+      console.log("isDragOver");
+    }
+  }, [isDragOver]);
+  // --- Click to select file ---
+  const handleZoneClick = () => {
+    // Trigger the hidden file input click
+    fileInputRef.current?.click();
+  };
+
+  const handleFileInputChange = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      setFileToUpload(file);
+      setUploadMediaOpen(true);
+    }
+    // Reset the input value so selecting the same file again triggers change
+    event.target.value = "";
+  };
+
+  const token = localStorage.getItem("token");
+  // --- Drag and Drop Handlers ---
+  const handleDragOver = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault(); // Crucial to allow a drop
+    event.stopPropagation();
+    setIsDragOver(true);
+  };
+
+  const handleDragLeave = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDragOver(false);
+  };
+
+  const handleDrop = async (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault(); // Crucial to allow a drop
+    event.stopPropagation();
+    setIsDragOver(false);
+
+    const files = event.dataTransfer.files;
+    if (files && files.length > 0) {
+      const file = files[0];
+      setFileToUpload(file);
+      setUploadMediaOpen(true);
+    }
+  };
+
+  return (
+    <Paper
+      elevation={2}
+      sx={{
+        padding: 2,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 1,
+        flex: 1,
+        minWidth: 150,
+      }}
+    >
+      <Box sx={{ display: "flex", alignItems: "center" }}>
+        <Typography variant="subtitle2" gutterBottom sx={{ mb: 0, mr: 0.5 }}>
+          {title}
+        </Typography>
+        {tooltipText && (
+          <Tooltip title={tooltipText}>
+            <Info size={16} color="gray" style={{ cursor: "pointer" }} />
+          </Tooltip>
+        )}
+      </Box>
+      <Box
+        sx={{
+          position: "relative",
+          width: "200px",
+          height: "200px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: 1,
+          mb: 1,
+          cursor: imageUrl ? "pointer" : "default",
+        }}
+        onClick={onImageClick}
+        // Removed onClick on the main Box to avoid conflicts
+      >
+        {imageUrl && (
+          <button
+            className="absolute top-2 right-2"
+            onClick={(e) => {
+              e.stopPropagation();
+              onDeleteImageClick();
+            }}
+          >
+            <X color="red" />
+          </button>
+        )}
+        {imageUrl ? (
+          <img
+            src={`${
+              import.meta.env.VITE_KRBL_MEDIA
+            }${imageUrl}/download?token=${token}`}
+            alt={title}
+            style={{ maxWidth: "100%", maxHeight: "100%" }}
+            onClick={onImageClick}
+          />
+        ) : (
+          <div
+            className={`w-full flex flex-col items-center justify-center gap-3 `}
+          >
+            <div
+              className="flex flex-col p-5 items-center justify-center gap-3"
+              style={{
+                border: "2px dashed #ccc",
+                borderRadius: 1,
+                cursor: "pointer",
+              }}
+              onClick={handleZoneClick} // Click handler for the zone
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
+            >
+              <p>Перетащите файл</p>
+            </div>
+
+            <p>или</p>
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={(e) => {
+                e.stopPropagation(); // Prevent `handleZoneClick` from firing
+                onSelectFileClick(); // This button might trigger a different modal
+              }}
+            >
+              Выбрать файл
+            </Button>
+            {/* Hidden file input */}
+            <input
+              type="file"
+              ref={fileInputRef}
+              onChange={handleFileInputChange}
+              style={{ display: "none" }}
+              accept="image/*" // Accept only image files
+            />
+          </div>
+        )}
+      </Box>
+    </Paper>
+  );
+};