добавляю скрипты для работы компонента: контекст для универсального доступа к компоненту, сам tsx компонент и css стили

2026-03-22 18:36:01 +03:00
parent a0dad6e138
commit 9b4c68022d
3 changed files with 338 additions and 0 deletions
@@ -0,0 +1,97 @@
+import React, { createContext, useState, useContext } from "react";
+import EntityHistory, { EntityHistoryProps } from "../components/entityHistory/EntityHistory";
+import api from "../api";
+import { PreloaderContext } from "./PreloaderContext";
+
+//Тип с пропсами для взаимодействия с контекстом
+interface HistoryContextType {
+  visible: boolean,   //Пропс видимости компонента
+  historyDataFields: HistoryDataFields,  //Объект с названиями полей, по которым было совершено изменение. В БД они будут храниться, скорее всего, на латинице, на фронте их надо расшифровать
+  hideHistory: () => void,    //Колбек для сокрытия блока с историей 
+  content: Record<string, string> | null,   //Контент для отображения истории
+  headerText: string,   //Текст в заголовке окна с историей
+  entityId: number,   //Уникальный идентификатор сущности, по которой показываем историю (заявки, запрос и т.д.)
+  showHistory: (entityId: number, content: EntityHistoryProps[], windowHeader?: string) => void,   //Колбек для вызова окна с историей
+  getHistoryFromMagic: (appname: string, subjectId: string | number, historyDataFields: HistoryDataFields, windowHeader?: string) => void //Метод получения истории из приложения Magic
+}
+
+type HistoryDataFields = Record<string, string>;
+
+export const HistoryContext = createContext<HistoryContextType | null>(null);
+
+export const HistoryProvider = ( {children} ) => {
+  const [historyVisible, setHistoryVisible] = useState<boolean>(false);
+  const [historyContent, setHistoryContent] = useState<EntityHistoryProps[] | []>( [] );
+  const [historyWindowHeader, setHistoryWindowHeader] = useState<string>('');
+  const [historyEntityId, setHistoryEntityId] = useState<number>();
+  const [historyDataFields, setHistoryDataFields] = useState<HistoryDataFields | null>( null );
+
+  /**
+   * Сокрытие окна с историей
+   */
+  function hideHistoryBlock() {
+    setHistoryVisible(false);
+    setHistoryWindowHeader('');
+    setHistoryContent( [] );
+    setHistoryEntityId(0);
+  }
+
+  const preloaderContext = useContext(PreloaderContext);
+
+  //ГАВРИЛОВ. ПРАВИЛЬНО ЛИ В КОНТЕКСТЕ РЕАЛИЗОВЫВАТЬ ЛОГИКУ ФУНКЦИОНАЛА? ИЛИ ПРАВИЛЬНЕЕ ЕЕ РАЗМЕСТИТЬ В ФАЙЛЕ КОМПОНЕНТА?
+  async function getHistoryFromMagic(appName: string, subjectId: number | string, historyDataFields: HistoryDataFields, windowHeader?: string){
+    preloaderContext.setPreloaderVisible(true)
+    const appHistory = await api.get(`${appName}/history/${subjectId}`).then(history => history.data.data);
+
+    // console.log(appHistory)
+
+    if (appHistory) {
+      appHistory.forEach( changeData => {
+        changeData.changeDetails = JSON.parse(changeData.changeDetails)
+      });
+      //appHistory.changeDetails = JSON.parse(appHistory.changeDetails)
+    }
+    //ГАВРИЛОВ
+    //ПРОВЕРКА НА НАЛИЧИЕ НУЖНЫХ СВОЙСТВ. ЧТОБЫ ОБЪЕКТ СООТВЕТСТВОВАЛ ТИПУ
+    //УБРАТЬ CHANGE. ПРОСТО AUTHOR,DETAILS и так далее
+    
+    // console.log(appHistory)
+
+    showHistoryBlock(subjectId, appHistory, historyDataFields, windowHeader)
+    
+    // return appHistory;
+  }
+
+  /**
+   * Показываем историю
+   * @param entityId идентификатор бизнес-сущности
+   * @param content контент для отображения
+   * @param windowHeader заголовок для окна с историей
+   */
+  //ГАВРИЛОВ. сделать пропс historyDataFields необязательным (пустой объект по умолчанию), так как details могут не передаваться, тогда и словарь не нужен (В ТОМ ЧИСЛЕ И В МЕТОДЕ getHistoryFromMagic). сделай интерфейс для аргументов идентичным
+  function showHistoryBlock(subjectId: number | string, content: EntityHistoryProps[], historyDataFields: HistoryDataFields, windowHeader?: string){
+    preloaderContext.setPreloaderVisible(true)
+    setHistoryVisible(true);
+    setHistoryEntityId(subjectId);
+    setHistoryContent(content);
+    windowHeader ? setHistoryWindowHeader(windowHeader) : true;
+    historyDataFields ? setHistoryDataFields(historyDataFields) : true;
+    preloaderContext.setPreloaderVisible(false)
+  }
+
+  const value = {
+    getHistoryFromMagic: getHistoryFromMagic,
+    showHistory: showHistoryBlock,
+    hideHistory: hideHistoryBlock,
+    visible: historyVisible,
+    content: historyContent,
+    headerText: historyWindowHeader,
+    entityId: historyEntityId,
+    dataFields: historyDataFields
+  };
+
+  return <HistoryContext.Provider value={value}> 
+    {children}
+    <EntityHistory/>
+  </HistoryContext.Provider>
+}