KRBL/WhiteNightsAdminPanel
7
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Refactor old code with delete modal and icons for buttons

Browse Source
This commit is contained in:
Илья Куприец
2025-06-04 20:19:06 +03:00
parent 078f051e8a
commit 89488d9921
27 changed files with 2070 additions and 476 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/widgets/SightTabs/LeftWidgetTab/index.tsx
View File

@@ -8,6 +8,7 @@ import {
editSightStore,
SelectArticleModal,
UploadMediaDialog,
Language,
} from "@shared";
import {
LanguageSwitcher,
@@ -15,8 +16,16 @@ import {
ReactMarkdownEditor,
MediaArea,
MediaViewer,
DeleteModal,
} from "@widgets";
import { Trash2, ImagePlus } from "lucide-react";
import {
Trash2,
ImagePlus,
Unlink,
Plus,
MousePointer,
Save,
} from "lucide-react";
import { useState, useCallback } from "react";
import { observer } from "mobx-react-lite";
import { toast } from "react-toastify";
@@ -40,12 +49,18 @@ export const LeftWidgetTab = observer(
const { language } = languageStore;
const data = sight[language];
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [isSelectMediaDialogOpen, setIsSelectMediaDialogOpen] =
useState(false);
const [isSelectArticleDialogOpen, setIsSelectArticleDialogOpen] =
useState(false);
const handleDeleteLeftArticle = useCallback(() => {
deleteLeftArticle(sight.common.left_article);
setIsDeleteModalOpen(false);
}, [deleteLeftArticle, sight.common.left_article]);
const handleMediaSelected = useCallback(
async (media: {
id: string;
@@ -130,6 +145,7 @@ export const LeftWidgetTab = observer(
color="primary"
size="small"
style={{ transition: "0" }}
startIcon={<Unlink size={18} />}
onClick={() => {
unlinkLeftArticle();
toast.success("Статья откреплена");
@@ -144,8 +160,7 @@ export const LeftWidgetTab = observer(
startIcon={<Trash2 size={18} />}
size="small"
onClick={() => {
deleteLeftArticle(sight.common.left_article);
toast.success("Статья откреплена");
setIsDeleteModalOpen(true);
}}
>
Удалить
@@ -157,6 +172,7 @@ export const LeftWidgetTab = observer(
variant="contained"
color="primary"
size="small"
startIcon={<MousePointer color="white" size={18} />}
onClick={() => setIsSelectArticleDialogOpen(true)}
>
Выбрать статью
@@ -166,6 +182,7 @@ export const LeftWidgetTab = observer(
color="primary"
size="small"
style={{ transition: "0" }}
startIcon={<Plus color="white" size={18} />}
onClick={() => {
createLeftArticle();
toast.success("Статья создана");
@@ -234,7 +251,8 @@ export const LeftWidgetTab = observer(
flex: 1,
display: "flex",
flexDirection: "column",
gap: 1.5,
maxWidth: "320px",
gap: 0.5,
}}
>
<Paper
@@ -242,10 +260,9 @@ export const LeftWidgetTab = observer(
sx={{
width: "100%",
minWidth: 320,
maxWidth: 400,
height: "auto",
minHeight: 500,
backgroundColor: "#877361",
background:
"#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
overflowY: "auto",
padding: 0,
display: "flex",
@@ -255,11 +272,10 @@ export const LeftWidgetTab = observer(
<Box
sx={{
width: "100%",
height: 200,
backgroundColor: "grey.300",
height: 175,
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "3px",
}}
>
{data.left.media.length > 0 ? (
@@ -277,24 +293,50 @@ export const LeftWidgetTab = observer(
<Box
sx={{
backgroundColor: "#877361",
background:
"#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
color: "white",
padding: 1.5,
margin: "5px 0px 5px 0px",
display: "flex",
flexDirection: "column",
gap: 1,
padding: 1,
}}
>
<Typography
variant="h5"
component="h2"
sx={{ wordBreak: "break-word" }}
sx={{
wordBreak: "break-word",
fontSize: "24px",
fontWeight: 700,
lineHeight: "120%",
}}
>
{data?.left?.heading || "Название информации"}
</Typography>
<Typography
variant="h6"
component="h2"
sx={{
wordBreak: "break-word",
fontSize: "18px",
lineHeight: "120%",
}}
>
{sight[language as Language].address}
</Typography>
</Box>
{data?.left?.body && (
<Box
sx={{
padding: 2,
padding: 1,
maxHeight: "300px",
overflowY: "scroll",
background:
"#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
flexGrow: 1,
}}
>
@@ -310,6 +352,7 @@ export const LeftWidgetTab = observer(
<Button
variant="contained"
color="success"
startIcon={<Save color="white" size={18} />}
onClick={async () => {
await updateSight();
toast.success("Достопримечательность сохранена");
@@ -339,6 +382,11 @@ export const LeftWidgetTab = observer(
onClose={handleCloseArticleDialog}
onSelectArticle={handleSelectArticle}
/>
<DeleteModal
open={isDeleteModalOpen}
onDelete={handleDeleteLeftArticle}
onCancel={() => setIsDeleteModalOpen(false)}
/>
</>
);
}