Update media select in EditSightPage and CreateSightPage
This commit is contained in:
@ -3,9 +3,6 @@ import {
|
||||
TextField,
|
||||
Box,
|
||||
Autocomplete,
|
||||
Typography,
|
||||
Paper,
|
||||
Tooltip,
|
||||
MenuItem,
|
||||
Menu as MuiMenu,
|
||||
} from "@mui/material";
|
||||
@ -20,9 +17,9 @@ import {
|
||||
PreviewMediaDialog,
|
||||
SightLanguageInfo,
|
||||
SightCommonInfo,
|
||||
UploadMediaDialog,
|
||||
} from "@shared";
|
||||
import { LanguageSwitcher } from "@widgets";
|
||||
import { Info, ImagePlus } from "lucide-react";
|
||||
import { ImageUploadCard, LanguageSwitcher } from "@widgets";
|
||||
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useEffect, useState } from "react";
|
||||
@ -34,10 +31,10 @@ import { toast } from "react-toastify";
|
||||
export const InformationTab = observer(
|
||||
({ value, index }: { value: number; index: number }) => {
|
||||
const { cities } = cityStore;
|
||||
const [, setIsMediaModalOpen] = useState(false);
|
||||
|
||||
const [mediaId, setMediaId] = useState<string>("");
|
||||
const [isPreviewMediaOpen, setIsPreviewMediaOpen] = useState(false);
|
||||
|
||||
const [isUploadMediaOpen, setIsUploadMediaOpen] = useState(false);
|
||||
const { language } = languageStore;
|
||||
|
||||
const { sight, updateSightInfo, updateSight } = editSightStore;
|
||||
@ -45,8 +42,6 @@ export const InformationTab = observer(
|
||||
const [, setCity] = useState<number>(sight.common.city_id ?? 0);
|
||||
const [coordinates, setCoordinates] = useState<string>(`0 0`);
|
||||
|
||||
const token = localStorage.getItem("token");
|
||||
|
||||
// Menu state for each media button
|
||||
const [menuAnchorEl, setMenuAnchorEl] = useState<null | HTMLElement>(null);
|
||||
const [activeMenuType, setActiveMenuType] = useState<
|
||||
@ -76,12 +71,22 @@ export const InformationTab = observer(
|
||||
handleMenuClose();
|
||||
};
|
||||
|
||||
const handleMediaSelect = () => {
|
||||
const handleMediaSelect = (media: {
|
||||
id: string;
|
||||
filename: string;
|
||||
media_name?: string;
|
||||
media_type: number;
|
||||
}) => {
|
||||
if (!activeMenuType) return;
|
||||
|
||||
// Close the dialog
|
||||
setIsAddMediaOpen(false);
|
||||
handleChange(
|
||||
language as Language,
|
||||
{
|
||||
[activeMenuType ?? "thumbnail"]: media.id,
|
||||
},
|
||||
true
|
||||
);
|
||||
setActiveMenuType(null);
|
||||
setIsUploadMediaOpen(false);
|
||||
};
|
||||
|
||||
const handleChange = (
|
||||
@ -225,208 +230,87 @@ export const InformationTab = observer(
|
||||
flexDirection: { xs: "column", sm: "row" }, // Stack on extra small, side-by-side on small and up
|
||||
}}
|
||||
>
|
||||
<Paper
|
||||
elevation={2}
|
||||
sx={{
|
||||
padding: 2,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
gap: 1,
|
||||
flex: 1,
|
||||
minWidth: 150, // Ensure a minimum width
|
||||
<ImageUploadCard
|
||||
title="Логотип"
|
||||
imageKey="thumbnail"
|
||||
imageUrl={sight.common.thumbnail}
|
||||
onImageClick={() => {
|
||||
setIsPreviewMediaOpen(true);
|
||||
setMediaId(sight.common.thumbnail ?? "");
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
gutterBottom
|
||||
sx={{ mb: 0, mr: 0.5 }}
|
||||
>
|
||||
Логотип
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
width: "200px",
|
||||
height: "200px",
|
||||
backgroundColor: "grey.200",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRadius: 1,
|
||||
mb: 1,
|
||||
cursor: sight.common.thumbnail ? "pointer" : "default",
|
||||
"&:hover": {
|
||||
backgroundColor: sight.common.thumbnail
|
||||
? "red.300"
|
||||
: "grey.200",
|
||||
onDeleteImageClick={() => {
|
||||
handleChange(
|
||||
language as Language,
|
||||
{
|
||||
thumbnail: null,
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
setIsMediaModalOpen(true);
|
||||
}}
|
||||
>
|
||||
{sight.common.thumbnail ? (
|
||||
<img
|
||||
src={`${import.meta.env.VITE_KRBL_MEDIA}${
|
||||
sight.common.thumbnail
|
||||
}/download?token=${token}`}
|
||||
alt="Логотип"
|
||||
style={{ maxWidth: "100%", maxHeight: "100%" }}
|
||||
onClick={() => {
|
||||
setIsPreviewMediaOpen(true);
|
||||
setMediaId(sight.common.thumbnail ?? "");
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<ImagePlus size={24} color="grey" />
|
||||
)}
|
||||
</Box>
|
||||
</Paper>
|
||||
<Paper
|
||||
elevation={2}
|
||||
sx={{
|
||||
padding: 2,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
gap: 1,
|
||||
flex: 1,
|
||||
minWidth: 150, // Ensure a minimum width
|
||||
true
|
||||
);
|
||||
setActiveMenuType(null);
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
gutterBottom
|
||||
sx={{ mb: 0, mr: 0.5 }}
|
||||
>
|
||||
Водяной знак (л.в)
|
||||
</Typography>
|
||||
<Tooltip title={"asf"}>
|
||||
<Info
|
||||
size={16}
|
||||
color="gray"
|
||||
style={{ cursor: "pointer" }}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
width: "200px",
|
||||
height: "200px",
|
||||
backgroundColor: "grey.200",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRadius: 1,
|
||||
mb: 1,
|
||||
cursor: sight.common.watermark_lu
|
||||
? "pointer"
|
||||
: "default",
|
||||
"&:hover": {
|
||||
backgroundColor: sight.common.watermark_lu
|
||||
? "grey.300"
|
||||
: "grey.200",
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
setIsPreviewMediaOpen(true);
|
||||
setMediaId(sight.common.watermark_lu ?? "");
|
||||
}}
|
||||
>
|
||||
{sight.common.watermark_lu ? (
|
||||
<img
|
||||
src={`${import.meta.env.VITE_KRBL_MEDIA}${
|
||||
sight.common.watermark_lu
|
||||
}/download?token=${token}`}
|
||||
alt="Знак л.в"
|
||||
style={{ maxWidth: "100%", maxHeight: "100%" }}
|
||||
onClick={() => {
|
||||
setIsMediaModalOpen(true);
|
||||
setMediaId(sight.common.watermark_lu ?? "");
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<ImagePlus size={24} color="grey" />
|
||||
)}
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<Paper
|
||||
elevation={2}
|
||||
sx={{
|
||||
padding: 2,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
gap: 1,
|
||||
flex: 1,
|
||||
minWidth: 150, // Ensure a minimum width
|
||||
onSelectFileClick={() => {
|
||||
setActiveMenuType("thumbnail");
|
||||
setIsAddMediaOpen(true);
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
gutterBottom
|
||||
sx={{ mb: 0, mr: 0.5 }}
|
||||
>
|
||||
Водяной знак (п.в)
|
||||
</Typography>
|
||||
<Tooltip title={"asfaf"}>
|
||||
<Info
|
||||
size={16}
|
||||
color="gray"
|
||||
style={{ cursor: "pointer" }}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
width: "200px",
|
||||
height: "200px",
|
||||
backgroundColor: "grey.200",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRadius: 1,
|
||||
mb: 1,
|
||||
cursor: sight.common.watermark_rd
|
||||
? "pointer"
|
||||
: "default",
|
||||
"&:hover": {
|
||||
backgroundColor: sight.common.watermark_rd
|
||||
? "grey.300"
|
||||
: "grey.200",
|
||||
setUploadMediaOpen={() => {
|
||||
setIsUploadMediaOpen(true);
|
||||
setActiveMenuType("thumbnail");
|
||||
}}
|
||||
/>
|
||||
<ImageUploadCard
|
||||
title="Водяной знак (л.в)"
|
||||
imageKey="watermark_lu"
|
||||
imageUrl={sight.common.watermark_lu}
|
||||
onImageClick={() => {
|
||||
setIsPreviewMediaOpen(true);
|
||||
setMediaId(sight.common.watermark_lu ?? "");
|
||||
}}
|
||||
onDeleteImageClick={() => {
|
||||
handleChange(
|
||||
language as Language,
|
||||
{
|
||||
watermark_lu: null,
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
setIsMediaModalOpen(true);
|
||||
setMediaId(sight.common.watermark_rd ?? "");
|
||||
}}
|
||||
>
|
||||
{sight.common.watermark_rd ? (
|
||||
<img
|
||||
src={`${import.meta.env.VITE_KRBL_MEDIA}${
|
||||
sight.common.watermark_rd
|
||||
}/download?token=${token}`}
|
||||
alt="Знак п.в"
|
||||
style={{ maxWidth: "100%", maxHeight: "100%" }}
|
||||
onClick={() => {
|
||||
setIsPreviewMediaOpen(true);
|
||||
setMediaId(sight.common.watermark_rd ?? "");
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<ImagePlus size={24} color="grey" />
|
||||
)}
|
||||
</Box>
|
||||
</Paper>
|
||||
true
|
||||
);
|
||||
setActiveMenuType(null);
|
||||
}}
|
||||
onSelectFileClick={() => {
|
||||
setActiveMenuType("watermark_lu");
|
||||
setIsAddMediaOpen(true);
|
||||
}}
|
||||
setUploadMediaOpen={() => {
|
||||
setIsUploadMediaOpen(true);
|
||||
setActiveMenuType("watermark_lu");
|
||||
}}
|
||||
/>
|
||||
<ImageUploadCard
|
||||
title="Водяной знак (п.в)"
|
||||
imageKey="watermark_rd"
|
||||
imageUrl={sight.common.watermark_rd}
|
||||
onImageClick={() => {
|
||||
setIsPreviewMediaOpen(true);
|
||||
setMediaId(sight.common.watermark_rd ?? "");
|
||||
}}
|
||||
onDeleteImageClick={() => {
|
||||
handleChange(
|
||||
language as Language,
|
||||
{
|
||||
watermark_rd: null,
|
||||
},
|
||||
true
|
||||
);
|
||||
setActiveMenuType(null);
|
||||
}}
|
||||
onSelectFileClick={() => {
|
||||
setActiveMenuType("watermark_rd");
|
||||
setIsAddMediaOpen(true);
|
||||
}}
|
||||
setUploadMediaOpen={() => {
|
||||
setIsUploadMediaOpen(true);
|
||||
setActiveMenuType("watermark_rd");
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
@ -489,6 +373,21 @@ export const InformationTab = observer(
|
||||
onSelectMedia={handleMediaSelect}
|
||||
/>
|
||||
|
||||
<UploadMediaDialog
|
||||
open={isUploadMediaOpen}
|
||||
onClose={() => setIsUploadMediaOpen(false)}
|
||||
afterUpload={(media) => {
|
||||
handleChange(
|
||||
language as Language,
|
||||
{
|
||||
[activeMenuType ?? "thumbnail"]: media.id,
|
||||
},
|
||||
true
|
||||
);
|
||||
setActiveMenuType(null);
|
||||
setIsUploadMediaOpen(false);
|
||||
}}
|
||||
/>
|
||||
<PreviewMediaDialog
|
||||
open={isPreviewMediaOpen}
|
||||
onClose={() => setIsPreviewMediaOpen(false)}
|
||||
|
||||
Reference in New Issue
Block a user