Add correct edit right widget

2025-06-03 12:31:47 +03:00
parent 5814e65953
commit f0e03c3a1d
10 changed files with 806 additions and 233 deletions
--- a/src/shared/api/index.tsx
+++ b/src/shared/api/index.tsx
@@ -6,7 +6,6 @@ const authInstance = axios.create({
 });

 authInstance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
-  console.log(config);
  config.headers.Authorization = `Bearer ${localStorage.getItem("token")}`;
  config.headers["X-Language"] = languageStore.language ?? "ru";
  return config;
--- a/src/shared/modals/SelectMediaDialog/index.tsx
+++ b/src/shared/modals/SelectMediaDialog/index.tsx
@@ -21,12 +21,13 @@ import { MediaViewer } from "@widgets";
 interface SelectMediaDialogProps {
  open: boolean; // Corrected prop name
  onClose: () => void;
-  onSelectMedia: (media: {
+  onSelectMedia?: (media: {
    id: string;
    filename: string;
    media_name?: string;
    media_type: number;
  }) => void; // Renamed from onSelectArticle
+  onSelectForSightMedia?: (mediaId: string) => void;
  linkedMediaIds?: string[]; // Renamed from linkedArticleIds, assuming it refers to media already in use
 }

@@ -35,6 +36,7 @@ export const SelectMediaDialog = observer(
    open, // Corrected prop name
    onClose,
    onSelectMedia, // Renamed prop
+    onSelectForSightMedia,
    linkedMediaIds = [], // Default to empty array if not provided, renamed
  }: SelectMediaDialogProps) => {
    const { media, getMedia } = mediaStore;
@@ -55,7 +57,11 @@ export const SelectMediaDialog = observer(
          if (hoveredMediaId) {
            const mediaItem = media.find((m) => m.id === hoveredMediaId);
            if (mediaItem) {
-              onSelectMedia(mediaItem);
+              if (onSelectForSightMedia) {
+                onSelectForSightMedia(mediaItem.id);
+              } else if (onSelectMedia) {
+                onSelectMedia(mediaItem);
+              }
            }
            onClose();
          }
@@ -114,7 +120,11 @@ export const SelectMediaDialog = observer(
                      key={mediaItem.id}
                      onClick={() => setHoveredMediaId(mediaItem.id)} // Call onSelectMedia
                      onDoubleClick={() => {
-                        onSelectMedia(mediaItem);
+                        if (onSelectForSightMedia) {
+                          onSelectForSightMedia(mediaItem.id);
+                        } else if (onSelectMedia) {
+                          onSelectMedia(mediaItem);
+                        }
                        onClose();
                      }}
                      sx={{
--- a/src/shared/modals/UploadMediaDialog/index.tsx
+++ b/src/shared/modals/UploadMediaDialog/index.tsx
@@ -24,16 +24,22 @@ import { ModelViewer3D } from "@widgets";
 interface UploadMediaDialogProps {
  open: boolean;
  onClose: () => void;
-  afterUpload: (media: {
+  afterUpload?: (media: {
    id: string;
    filename: string;
    media_name?: string;
    media_type: number;
  }) => void;
+  afterUploadSight?: (id: string) => void;
 }

 export const UploadMediaDialog = observer(
-  ({ open, onClose, afterUpload }: UploadMediaDialogProps) => {
+  ({
+    open,
+    onClose,
+    afterUpload,
+    afterUploadSight,
+  }: UploadMediaDialogProps) => {
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [success, setSuccess] = useState(false);
@@ -103,7 +109,11 @@ export const UploadMediaDialog = observer(
          mediaName
        );
        if (media) {
-          await afterUpload(media);
+          if (afterUploadSight) {
+            await afterUploadSight(media.id);
+          } else if (afterUpload) {
+            await afterUpload(media);
+          }
        }
        setSuccess(true);
      } catch (err) {
--- a/src/shared/store/CreateSightStore/index.tsx
+++ b/src/shared/store/CreateSightStore/index.tsx
@@ -22,7 +22,7 @@ type SightLanguageInfo = {
      media_type: number;
    }[];
  };
-  right: { heading: string; body: string }[];
+  right: { id: number; heading: string; body: string; media: [] }[];
 };

 type SightCommonInfo = {
@@ -90,19 +90,43 @@ class CreateSightStore {
    makeAutoObservable(this);
  }

-  createNewRightArticle = () => {
-    this.sight.ru.right.push({
+  createNewRightArticle = async () => {
+    const articleId = await languageInstance("ru").post("/article", {
      heading: "Введите русский заголовок",
      body: "Введите русский текст",
    });
-    this.sight.en.right.push({
+    const { id } = articleId.data;
+    await languageInstance("en").patch(`/article/${id}`, {
      heading: "Enter the English heading",
      body: "Enter the English text",
    });
-    this.sight.zh.right.push({
+    await languageInstance("zh").patch(`/article/${id}`, {
      heading: "Введите китайский заголовок",
      body: "Введите китайский текст",
    });
+    await authInstance.post(`/sight/${this.sight.id}/article`, {
+      article_id: id,
+      page_num: this.sight.ru.right.length + 1,
+    });
+
+    this.sight.ru.right.push({
+      id: id,
+      heading: "Введите русский заголовок",
+      body: "Введите русский текст",
+      media: [],
+    });
+    this.sight.en.right.push({
+      id: id,
+      heading: "Enter the English heading",
+      body: "Enter the English text",
+      media: [],
+    });
+    this.sight.zh.right.push({
+      id: id,
+      heading: "Введите китайский заголовок",
+      body: "Введите китайский текст",
+      media: [],
+    });
  };

  updateLeftInfo = (language: Language, heading: string, body: string) => {
@@ -444,6 +468,32 @@ class CreateSightStore {
      filename: media.filename,
    });
  };
+
+  unlinkRightAritcle = async (id: number) => {
+    this.sight.ru.right = this.sight.ru.right.filter(
+      (article) => article.id !== id
+    );
+    this.sight.en.right = this.sight.en.right.filter(
+      (article) => article.id !== id
+    );
+    this.sight.zh.right = this.sight.zh.right.filter(
+      (article) => article.id !== id
+    );
+  };
+
+  deleteRightArticle = async (id: number) => {
+    await authInstance.delete(`/article/${id}`);
+
+    this.sight.ru.right = this.sight.ru.right.filter(
+      (article) => article.id !== id
+    );
+    this.sight.en.right = this.sight.en.right.filter(
+      (article) => article.id !== id
+    );
+    this.sight.zh.right = this.sight.zh.right.filter(
+      (article) => article.id !== id
+    );
+  };
 }

 export const createSightStore = new CreateSightStore();
--- a/src/shared/store/EditSightStore/index.tsx
+++ b/src/shared/store/EditSightStore/index.tsx
@@ -11,7 +11,12 @@ export type SightLanguageInfo = {
    body: string;
    media: { id: string; media_type: number; filename: string }[];
  };
-  right: { heading: string; body: string }[];
+  right: {
+    id: number;
+    heading: string;
+    body: string;
+    media: { id: string; media_type: number; filename: string }[];
+  }[];
 };

 export type SightCommonInfo = {
@@ -111,21 +116,42 @@ class EditSightStore {
  };

  getRightArticles = async (id: number) => {
-    const responseRu = await languageInstance("ru").get(`/sight/${id}/article`);
-    const responseEn = await languageInstance("en").get(`/sight/${id}/article`);
-    const responseZh = await languageInstance("zh").get(`/sight/${id}/article`);
+    let responseRu = await languageInstance("ru").get(`/sight/${id}/article`);
+    let responseEn = await languageInstance("en").get(`/sight/${id}/article`);
+    let responseZh = await languageInstance("zh").get(`/sight/${id}/article`);
+
+    // Function to fetch media for a given set of articles
+    const fetchMediaForArticles = async (articles: any[]) => {
+      const articlesWithMedia = [];
+      for (const article of articles) {
+        const responseMedia = await authInstance.get(
+          `/article/${article.id}/media`
+        );
+        articlesWithMedia.push({
+          ...article,
+          media: responseMedia.data,
+        });
+      }
+      return articlesWithMedia;
+    };
+
+    // Fetch media for articles in each language
+    const ruArticlesWithMedia = await fetchMediaForArticles(responseRu.data);
+    const enArticlesWithMedia = await fetchMediaForArticles(responseEn.data);
+    const zhArticlesWithMedia = await fetchMediaForArticles(responseZh.data);

    const data = {
      ru: {
-        right: responseRu.data,
+        right: ruArticlesWithMedia,
      },
      en: {
-        right: responseEn.data,
+        right: enArticlesWithMedia,
      },
      zh: {
-        right: responseZh.data,
+        right: zhArticlesWithMedia,
      },
    };
+
    runInAction(() => {
      this.sight = {
        ...this.sight,
@@ -137,7 +163,6 @@ class EditSightStore {
          ...this.sight.en,
          right: data.en.right,
        },
-
        zh: {
          ...this.sight.zh,
          right: data.zh.right,
@@ -279,8 +304,13 @@ class EditSightStore {
      left_article: createdLeftArticleId,
    });

-    if (this.sight.common.left_article == 0) {
-      return;
+    for (const language of ["ru", "en", "zh"] as Language[]) {
+      for (const article of this.sight[language].right) {
+        await languageInstance(language).patch(`/article/${article.id}`, {
+          heading: article.heading,
+          body: article.body,
+        });
+      }
    }

    // await languageInstance("ru").patch(
@@ -375,6 +405,38 @@ class EditSightStore {
    );
  };

+  unlinkRightArticle = async (article_id: number) => {
+    await authInstance.delete(`/sight/${this.sight.common.id}/article`, {
+      data: {
+        article_id: article_id,
+      },
+    });
+
+    this.sight.ru.right = this.sight.ru.right.filter(
+      (article) => article.id !== article_id
+    );
+    this.sight.en.right = this.sight.en.right.filter(
+      (article) => article.id !== article_id
+    );
+    this.sight.zh.right = this.sight.zh.right.filter(
+      (article) => article.id !== article_id
+    );
+  };
+
+  deleteRightArticle = async (article_id: number) => {
+    this.sight.ru.right = this.sight.ru.right.filter(
+      (article) => article.id !== article_id
+    );
+    this.sight.en.right = this.sight.en.right.filter(
+      (article) => article.id !== article_id
+    );
+    this.sight.zh.right = this.sight.zh.right.filter(
+      (article) => article.id !== article_id
+    );
+
+    await authInstance.delete(`/article/${article_id}`);
+  };
+
  uploadMediaOpen = false;
  setUploadMediaOpen = (open: boolean) => {
    this.uploadMediaOpen = open;
@@ -442,6 +504,168 @@ class EditSightStore {
      filename: media.filename,
    });
  };
+
+  unlinkPreviewMedia = async () => {
+    this.sight.common.preview_media = null;
+  };
+
+  linkPreviewMedia = async (mediaId: string) => {
+    this.sight.common.preview_media = mediaId;
+  };
+
+  linkArticle = async (article_id: number) => {
+    const response = await languageInstance("ru").get(`/article/${article_id}`);
+    const responseEn = await languageInstance("en").get(
+      `/article/${article_id}`
+    );
+    const responseZh = await languageInstance("zh").get(
+      `/article/${article_id}`
+    );
+    const mediaIds = await authInstance.get(`/article/${article_id}/media`);
+    runInAction(() => {
+      this.sight.ru.right.push({
+        id: article_id,
+        heading: response.data.heading,
+        body: response.data.body,
+        media: mediaIds.data,
+      });
+      this.sight.en.right.push({
+        id: article_id,
+        heading: responseEn.data.heading,
+        body: responseEn.data.body,
+        media: mediaIds.data,
+      });
+      this.sight.zh.right.push({
+        id: article_id,
+        heading: responseZh.data.heading,
+        body: responseZh.data.body,
+        media: mediaIds.data,
+      });
+    });
+  };
+
+  deleteRightArticleMedia = async (article_id: number, media_id: string) => {
+    await authInstance.delete(`/article/${article_id}/media`, {
+      data: {
+        media_id: media_id,
+      },
+    });
+
+    this.sight.ru.right = this.sight.ru.right.map((article) => {
+      if (article.id === article_id) {
+        article.media = article.media.filter((media) => media.id !== media_id);
+      }
+      return article;
+    });
+
+    this.sight.en.right = this.sight.en.right.map((article) => {
+      if (article.id === article_id) {
+        article.media = article.media.filter((media) => media.id !== media_id);
+      }
+      return article;
+    });
+
+    this.sight.zh.right = this.sight.zh.right.map((article) => {
+      if (article.id === article_id) {
+        article.media = article.media.filter((media) => media.id !== media_id);
+      }
+      return article;
+    });
+  };
+
+  createNewRightArticle = async () => {
+    const articleId = await languageInstance("ru").post("/article", {
+      heading: "Введите русский заголовок",
+      body: "Введите русский текст",
+    });
+    const { id } = articleId.data;
+    await languageInstance("en").patch(`/article/${id}`, {
+      heading: "Enter the English heading",
+      body: "Enter the English text",
+    });
+    await languageInstance("zh").patch(`/article/${id}`, {
+      heading: "Введите китайский заголовок",
+      body: "Введите китайский текст",
+    });
+    await authInstance.post(`/sight/${this.sight.common.id}/article`, {
+      article_id: id,
+      page_num: this.sight.ru.right.length + 1,
+    });
+
+    this.sight.ru.right.push({
+      id: id,
+      heading: "Введите русский заголовок",
+      body: "Введите русский текст",
+      media: [],
+    });
+    this.sight.en.right.push({
+      id: id,
+      heading: "Enter the English heading",
+      body: "Enter the English text",
+      media: [],
+    });
+    this.sight.zh.right.push({
+      id: id,
+      heading: "Введите китайский заголовок",
+      body: "Введите китайский текст",
+      media: [],
+    });
+  };
+
+  createLinkWithRightArticle = async (
+    media: {
+      id: string;
+      filename: string;
+      media_name?: string;
+      media_type: number;
+    },
+    article_id: number
+  ) => {
+    await authInstance.post(`/article/${article_id}/media`, {
+      media_id: media.id,
+      media_order: 1,
+    });
+    this.sight.ru.right = this.sight.ru.right.map((article) => {
+      if (article.id === article_id) {
+        article.media.unshift({
+          id: media.id,
+          media_type: media.media_type,
+          filename: media.filename,
+        });
+      }
+      return article;
+    });
+    this.sight.en.right = this.sight.en.right.map((article) => {
+      if (article.id === article_id) {
+        article.media.unshift({
+          id: media.id,
+          media_type: media.media_type,
+          filename: media.filename,
+        });
+      }
+      return article;
+    });
+    this.sight.zh.right = this.sight.zh.right.map((article) => {
+      if (article.id === article_id) {
+        article.media.unshift({
+          id: media.id,
+          media_type: media.media_type,
+          filename: media.filename,
+        });
+      }
+      return article;
+    });
+  };
+
+  updateRightArticleInfo = (
+    index: number,
+    language: Language,
+    heading: string,
+    body: string
+  ) => {
+    this.sight[language].right[index].heading = heading;
+    this.sight[language].right[index].body = body;
+  };
 }

 export const editSightStore = new EditSightStore();