конфиги для работы всплывающих окон - типы всплывающих окон для отображения

app/Enums/LogBusinessEvents.php

@@ -1,36 +0,0 @@
-<?php
-
-namespace App\Enums;
-
-/**
- * Бизнес действия, доступные для логирования через activity_log
- * @author dgavrilov
- */
-
-
-#Гаврилов
-//ПОЛУЧИТСЯ ЛИ ПЕРЕДАТЬ НА ФРОНТ ЭТОТ ENUM
-//ГАВРИЛОВ
-//ИДЕНТИЧНЫЙ СПРАВОЧНИК УКАЗАН НА СТОРОНЕ react в компоненте ENTITYHISTORY. ЕСТЬ ВОЗМОЖНОСТЬ ОБЪЕДИНИТЬ ИХ?
-enum LogBusinessEvents: string
-{
-  case Create = 'create';
-  case Edit = 'edit';
-  case Archive = 'archive';
-  case Restore = 'restore';
-  case Delete = 'delete';
-  case Cancel = 'cancel';
-
-  public function title(): string
-  {
-    return match($this)
-    {
-      self::Create => 'создание',
-      self::Edit => 'редактирование',
-      self::Archive => 'архивация',
-      self::Restore => 'восстановление',
-      self::Delete => 'удаление',
-      self::Cancel => 'отмена',
-    };
-  }
-}

app/Traits/LogsActivity_custom.php

@@ -1,148 +0,0 @@
-<?php
-
-namespace app\Traits;
-
-use PHPUnit\Event\Code\Throwable;
-use Spatie\Activitylog\LogOptions;
-use Spatie\Activitylog\Traits\LogsActivity;
-use Spatie\Activitylog\Contracts\Activity;
-use App\Enums\LogBusinessEvents; 
-
-trait LogsActivity_custom
-{
-  //"наследуем" готовый трейт из пакета логирования, чтобы расширить его
-  use LogsActivity;
-
-  /**
-   *
-   * @param string имя журнала логирования (название приложения). Нужно переопределять в модели в зависимости от используемого приложения (модуля)
-   */
-  protected $logActivity_custom__name;
-  /**
-   * @param array Массив с кастомными значениями, которые хотим логировать независимо от модели, событие в которой логируется
-   */
-  // protected $activityCustomProperties = [
-  //   'custom__user_login' => session()->get('_auth_login'),
-  // ];
-  protected $activityCustomProperties = [];
-  /**
-   * @var array массив с кастомными значениями, которые относятся к самому действию логирования, а не к изменениям в результате логируемого действия (properties). Например, название совершенного действия: архивация, отмена, восстановление и т.д.
-   */
-  protected $activityCustomDescription = [];
-  /**
-   * @var string название совершенного бизнес-действия (не события из поля event, там могут быть только eloquent события: create, udate и т.д.). По умолчанию действие - изменение.
-   * 
-   * Свойство статическое, потому что при использовании нестатического свойства, его значение после присваения "сбрасывается" до значения по умолчанию из за специфики работы с моделью. Каждое создание экземпляра модели может привести к сбросу свойства до значения по умолчанию. Если свойство статическое, его можно менять в любой момент и во всех экземплярах этой модели оно будет изменено
-   */
-  protected static $businessEvent = LogBusinessEvents::Edit;
-
-  /**
-   * Единые опции логирования любых события в моделях, где указано использование данного трейта
-   *
-   * @return LogOptions
-   */
-  public function getActivitylogOptions(): LogOptions
-  {
-    return LogOptions::defaults()
-      ->logAll()        //Логируем все поля
-      ->logOnlyDirty()  //Логируем только изменившиеся по сравнению с текущим состоянием значения
-      ->useLogName($this->logActivity_custom__name ? $this->logActivity_custom__name : 'default') //Имя журнала (имя приложения) события которого логируются
-      ->logExcept(['created_at', 'updated_at']);  //Поля, значения которых не логируются
-  }
-
-
-  /**
-   * Тут прописываем дополнительные свойства, которые будут добавляться к каждой записи логирования изменения моделей
-   *
-   * @return array
-   */
-  protected function getActivityLogDefaultProp (): array 
-  {
-    //Добавляем логин пользователя к записи с логированием события. Если изменение произошло через web роут, то берется логин из объекта ldap (свойство samaccountname), если было обращение через api ендпоинт, берется логин из таблицы users, где делается запись при аутентификации пользователя. Это связано со спецификой аутентификации при вызове web роута и api ендпоинта
-    //UPD: решил отказаться от логирования пользователя через расширение properties, но для примера пока оставил
-    //return ['custom__user_login' => auth()->user()->login ?? auth()->user()->samaccountname[0]];
-    return [];
-  }
-
-  // public function getActivitylogOptions(): LogOptions
-  // {
-  //   //CauserResolver::setCauser('dgavrilov');
-  //   return LogOptions::defaults()
-  //     ->logAll() // Перечисляем логируемые поля. В данном случае, логируем все поля
-  //     ->logExcept(['created_at', 'updated_at']) // Поля, которые не будут логироваться не при каких условиях
-  //     ->logOnlyDirty() // Логируются только поля, данные в которых были изменены
-  //     //->useLogName($this->getLogName());
-  //     ->useLogName($this->logActivity_custom__name ? $this->logActivity_custom__name : 'default'); //Имя журнала логирования. Либо переопределеяется в модели, который использует данный трейт, либо по умолчанию ставится default
-  //     // ->tapActivity(function (Activity $activity) {
-  //     //   // Указываем пользователя из сессии/кук
-  //     //   //$activity->causer_id = auth()->id(); // или явно: 1
-  //     //   $activity->causer_id = 'dgavrilov'; // или явно: 1
-  //     //   //$activity->causer_type = \App\Models\User::class;
-  //     // });
-  // }
-
-  /**
-   * Метод позволяет "вмешаться" в процесс логирования в "последний момент" перед записью в модель activity_log. В данном случае, значения в поле properties обогащаются доп значениями, которые мы описали в свойстве $this->activityCustomProperties
-   *
-   * @param Activity $activity
-   * @param string $eventName
-   * @return void
-   */
-  public function tapActivity(Activity $activity, string $eventName)
-  {
-    $this->activityCustomProperties = array_merge($this->activityCustomProperties, $this->getActivityLogDefaultProp());
-    // $this->activityCustomDescription = $this->setLogDescription();
-    $activity->properties = $activity->properties->merge(['custom_props' => $this->activityCustomProperties]); 
-    //переопределение поле  description модели activityLog
-    // $activity->description = json_encode($this->activityCustomDescription);
-    $activity->business_event = self::$businessEvent; 
-  } 
-
-  #Гаврилов
-  //ЛУЧШЕ СДЕЛАТЬ ЕДИНЫЙ МЕТОД, ПРИНИМАЮЩИЙ НАЗВАНИЕ ACTION, СРАВНИВАЯ ЕГО СО СВОЙСТВОМ ТЕКУЩЕГО КЛАССА businessAction И ВОЗВРАЩАЮЩИЙ ОШИБКУ, ЕСЛИ ТАКОГО СВОЙСТВА НЕТ 
-
-
-  
-  /**
-   * Метод инициации логирования бизнес-действия: создание, редактирование, архивация. В поле event по умолчанию логируются только Eloquent события: create, update и тд
-   *
-   * @param string $action логируемое бизнес-действие
-   * @return void
-   */
-  public function logBusinessEvent(LogBusinessEvents $event)
-  { 
-    self::$businessEvent = $event;
-  }
-
-
-  /**
-   * @return array формирование дополнительного описания с информацией для логируемого действия
-   */
-  // public function setLogDescription()
-  // {
-  //   $activityDescription = array_merge(
-  //     $this->activityCustomDescription,
-  //   );
-
-  //   return $activityDescription;
-  // }
-
-
-
-  /**
-   * Метод добавления кастомных значений для логирования
-   * 
-   * Поля, переданные в метод из модели, где подключен этот трейт
-   *
-   * @param array $properties
-   * @return void 
-   */
-  public function addCustomLogProperties(array $properties): void
-  {
-    $this->activityCustomProperties = array_merge(
-      $this->activityCustomProperties ?? [],
-      $properties
-    );
-  }
-
-}

config/activitylog.php

@@ -1,53 +0,0 @@
-<?php
-
-return [
-
-    /*
-     * If set to false, no activities will be saved to the database.
-     */
-    'enabled' => env('ACTIVITY_LOGGER_ENABLED', true),
-
-    /*
-     * When the clean-command is executed, all recording activities older than
-     * the number of days specified here will be deleted.
-     */
-    //'delete_records_older_than_days' => 365,
-
-    /*
-     * If no log name is passed to the activity() helper
-     * we use this default log name.
-     */
-    'default_log_name' => 'default',
-
-    /*
-     * You can specify an auth driver here that gets user models.
-     * If this is null we'll use the current Laravel auth driver.
-     */
-    'default_auth_driver' => null,
-
-    /*
-     * If set to true, the subject returns soft deleted models.
-     */
-    'subject_returns_soft_deleted_models' => false,
-
-    /*
-     * This model will be used to log activity.
-     * It should implement the Spatie\Activitylog\Contracts\Activity interface
-     * and extend Illuminate\Database\Eloquent\Model.
-     */
-    'activity_model' => \Spatie\Activitylog\Models\Activity::class,
-
-    /*
-     * This is the name of the table that will be created by the migration and
-     * used by the Activity model shipped with this package.
-     */
-    'table_name' => env('ACTIVITY_LOGGER_TABLE_NAME', 'activity_log'),
-
-    /*
-     * This is the database connection that will be used by the migration and
-     * the Activity model shipped with this package. In case it's not set
-     * Laravel's database.default will be used instead.
-     */
-    'database_connection' => env('ACTIVITY_LOGGER_DB_CONNECTION'),
-
-];

config/app.php

@@ -123,4 +123,11 @@ return [
         'store' => env('APP_MAINTENANCE_STORE', 'database'),
     ],
 
+    //Типы всплывающих уведомлений, использующихся на фронте. От типа зависит внешний вид уведомления и некоторые другие параметры. Прописаны в resources/js/components/MagicPopup.tsx
+    'FRONT_notification_types' => [
+        'info',
+        'success',
+        'error',
+        'attention'
+    ]
 ];

resources/css/components/MagicPopupContainer.css

@@ -0,0 +1,8 @@
+#popup-parent-container{
+  padding: 10px;
+  top: 150px;
+  z-index: 901;
+  position: fixed;
+  left: 50%;
+  transform: translate(-50%, -50px);
+}

resources/css/components/magicPopup.css

@@ -0,0 +1,104 @@
+@import url('./../variables.css');
+@import '@fortawesome/fontawesome-free/css/all.css';
+
+/* Анимация таймера popup, по истечению которого он скроется */
+@keyframes popupTimer {
+  from{
+    width: 100%;
+  }
+  to {
+    width: 0;
+  }
+}
+
+.magic-popup-container{
+  padding: 5px;
+  margin-bottom: 15px;
+  border-radius: 5px;
+  display: flex;
+  box-shadow: 0px 3px 4px 1px #918787;
+  background: var(--color_graphite_main);
+  width: 500px;
+  transition: 0.3s;
+  opacity: 0;
+  transform: translateY(-10px);
+
+  &.hide{
+    opacity: 0;
+  }
+
+  &.show{
+    opacity: 1;
+    transform: translateY(0px);
+  }
+
+  &.hidePopup{
+    transform: translateY(10px);
+    opacity: 0;
+  }
+
+  &>.popup__icon-block{
+    flex-basis: 10%;
+    align-self: center;
+
+    &>i{
+      font-size: 4rem;
+      color: var(--color_purple_main);
+
+      &.fa-circle-check{
+        color: var(--color_emerald_main);
+      }
+      &.fa-circle-xmark{
+        color: var(--color_ruby_main);
+      }
+      &.fa-circle-exclamation{
+        color: orange;
+      }
+    }
+  }
+
+  &>.popup__content-block{
+    flex-basis: 90%;
+    border-left: 2px solid white;
+
+    &>.popup__content__text-block{
+      color: white;
+      padding: 5px;
+      text-align: center;
+      font-size: 1.2rem;
+    }
+
+    &>.popup__button-block{
+      margin: 10px 0;
+
+      &>button{
+        font-size: 1rem;
+        margin: auto;
+        opacity: 0.5;
+        background: var(--color_purple_main);
+        transition: 0.3s;
+
+        &:hover{
+          opacity: 1;
+        }
+      }
+    }
+
+    .popup__timer-block__timer{
+
+      &.popup__timer-block__timer {
+        height: 5px;
+        margin: 0 5px;
+        border-radius: 10px;
+
+        &.timerProgress{
+          background: #63707a;
+          animation: popupTimer;
+          animation-duration: 3s;
+          animation-fill-mode: forwards;
+          animation-timing-function: linear;
+        }
+      }
+    }
+  }
+}

resources/js/components/MagicPopup.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useState } from "react";
+import './../../css/components/magicPopup.css';
+import { Button } from '@SharePoint/rencredit_uikit';
+
+/**
+ * Компонент всплывающего окна
+ */
+
+/**
+ * Варианты типов для всплывающих окон: info - стандартный вид, error - произошла ошибка, attention - обратить внимание, success - успешное событие
+ */
+type PopupType = 'info' | 'success' | 'error' | 'attention';
+
+//Интерфейс для передаваемых пропсов объекта всплывающего окна
+interface MagicPopupProps {
+  key: number,
+  id: number,            //Уникальный идентификатор, по котором всплывающее окно будет в том числе размонтироваться
+  message: string,        //Текст всплывающего окна
+  renderIndex: number,    //Индекс рендеринга компонента. Так как может отрисовываться сразу несколько popup, чтобы корректно их отрисовывать с анимацией с задержкой по времени, нужно передавать индекс компонента в наборе. Передавать "вручную" не нужно, он сам рассчитывается в компоненте MagicPopupContainer
+  type: PopupType,        //Тип всплывающего окна, определяющий его внешний вид
+  timeOut?: boolean,      //Если передается true, для элемента будет запущен стандартный таймер исчезновения. ВАЖНО! для всплывающих окон типа error таймер не будет активироваться, даже если передается. Пользователь должен гарантированно ознакомиться с сообщением и сам его закрыть
+  onClose?: (id: number) => void  //Колбэк для полного размонтирования компонента со страницы
+}
+
+/**
+ * Компонент всплывающих окон
+ * @param props 
+ * @returns 
+ */
+export default function MagicPopup (props: MagicPopupProps)
+{
+  //Объект с классами для иконок font-awesome в зависимости от переданного типа всплывающего окна. При изменении, необходимо поменять названия классов в magicPopup.css!
+  const iconNameObj = {
+    info: 'fa-circle-info',
+    success: 'fa-circle-check',
+    error: 'fa-circle-xmark',
+    attention: 'fa-circle-exclamation'
+  }
+  //С помощью деструктуризации указываем значение типа окна по умолчанию
+  const {message, timeOut = true, onClose} = props;
+  //Задержка исчезновения popup
+  const popupDelay = 300;
+  //Итоговая длительность таймера перед закрытием конкретного popup, учитывая его положение в наборе передаваемых попапов
+  const hideTimeOut: number = 3000 + popupDelay;
+  //Стейт для размонтирования попапа
+  const [popupVisible, setPopupVisible] = useState<boolean>(true)
+  //Стейт для плавного сокрытия popup. Класс плавного сокрытия присваивается за пол секунды до полного исчезновения через popupVisible, чтобы сначала плавно сокрыть блок из интерфейса, а затем полностью удалить его из DOM
+  const [popupHideClass, setPopupHideClass] = useState<string>('popup-visible')
+  //Стейт плавного появления popup. Каждый следующий popup в передаваемом наборе должен появляться с небольшой задержкой
+  const [popupShowClass, setPopupFadeinClass] = useState<string>('');
+  //Стейт запуска анимированного таймера исчезновения popup
+  const [popupTimer, setPopupTimer] = useState<string>('');
+  //Функция сокрытия popup. Сначала присваиваем класс, который анимированно скрывает popup, а через небольшую задержку размонтируем компонент
+  function hidePopupBlock (): void 
+  {
+    setPopupHideClass('hidePopup');
+    setTimeout ( () => {
+      setPopupVisible(false);
+    }, 300)
+    //Вызываем метод удаления экземпляра компонента из набора. Так как попапы отрисовываются на основе компонента PopupContainer с набором компонентов MagicPopup, то после их размонтирования, их необходимо и удалить из набора в PopupContainer. Без их удаления, при вызове новых попапов, весь набор с уже просмотренными попапами будет снова отрисовываться.
+    onClose && onClose(props.id)
+  };
+
+  //При рендеринге сразу же запускается таймер сокрытия popup, если аргумент timeOut = true и тип окна != error
+  useEffect( () => {
+    if (timeOut && props.type !== 'error') {
+      setTimeout( () => {
+        //Задержка для отображения таймера нужна, так как при вызове рендеринга нескольких окон, каждое последующее появляется с задержкой. Без задержки ниже, таймер будет запускаться для всех popup одновременно и когда появится последний popup, его таймер уже может закончиться
+        setPopupTimer('timerProgress')
+      }, popupDelay)
+      //Через небольшую задержку после сокрытия компонента срабатывает таймер на размонтирование компонента и удаления его из набора
+      setTimeout( () => {
+        hidePopupBlock()
+      }, hideTimeOut)
+    }
+    //Появление popup при рендеринге
+    setTimeout ( () => {
+      setPopupFadeinClass('show')
+    }, popupDelay)
+  }, [])
+
+  return (
+    popupVisible ? 
+    // <div onClick = {hidePopupBlock}>Раз</div>
+      <div className = {`magic-popup-container ${popupHideClass} ${popupShowClass}`} >
+        <div className = 'popup__icon-block'>
+          <i className = {`fa-solid ${iconNameObj[props.type]}`}></i>
+        </div>
+        <div className = "popup__content-block">
+          <div className = 'popup__content__text-block'>
+            {message}
+          </div>
+          <div className = "popup__button-block">
+            <Button
+              type = "button"
+              className = "popup__button-block__button"
+              onClick = {hidePopupBlock}
+              text = "OK"
+            />
+          </div>
+          <div className = "popup__timer-block">
+            <div className = {`popup__timer-block__timer ${popupTimer}`}></div>
+          </div>
+        </div>
+      </div>
+    : null
+  );
+};

resources/js/components/MagicPopupContainer.tsx

@@ -0,0 +1,45 @@
+import React, { useContext, ComponentProps } from "react";
+import MagicPopup from "./MagicPopup";
+import './../../css/components/magicPopupContainer.css';
+import { PopupContext } from "../contexts/PopupContext";
+
+/**
+ * Компонент контейнера для всплывающих окон, который вызывается на странице и куда передается массив всплывающих окон 
+ */
+
+//ГАВРИЛОВ. ЛОГИЧНЕЕ ЭКСПОРТИРОВАТЬ ТИП С ПРОПСАМИ КОМПОНЕНТА ИЗ САМОГО КОМПОНЕНТА MAGICPOPUP? 
+/**
+ * Дополнительный экспорт типа MagicPopup из компонента всплывающего окна для возможности его импорта, в свою очередь, из компонента, собирающего страницу, например TaxiPage TaxiPage
+ */
+export type MagicPopupType = ComponentProps<typeof MagicPopup>;
+/**
+ * Метод рендеринга контейнара для всплывающих окон
+ * @param {array} magicPopupArr массив объектов типа MagicPopup с информацией о всплывающем окне: текст, таймер и т.д.
+ * @param {callable} delHiddenPopupFunc колбэк для закрытия конкретного всплывающего окна по его уникальному идентификатору
+ * @returns ReactNode
+ */
+export default function MagicPopupContainer ()
+{
+  const popupArr = useContext(PopupContext);
+
+  return (
+    //Родительский контейнер для всех всплывающих окон
+    <div id = "popup-parent-container">
+      {/* { magicPopupArr.map( (propsObj: MagicPopupType, index: number) => ( */}
+      { popupArr.popupArrTest.map( (propsObj: MagicPopupType, index: number) => (
+        <MagicPopup
+          //Подробнее описание пропсов компонента смотри в MagicPopup.tsx
+          id = {propsObj.id}
+          key = {propsObj.id}
+          message = {propsObj.message}
+          timeOut = {propsObj.timeOut}    
+          type = {propsObj.type}          
+          renderIndex = {index}           
+          //onClose = {delHiddenPopupFunc}
+          onClose = {popupArr.delPopupTest}
+        />
+        ))
+      }
+    </div>
+  )
+}

resources/js/contexts/PopupContext.tsx

@@ -0,0 +1,41 @@
+import React, { createContext, useState } from "react";
+import { MagicPopupType } from "../components/MagicPopupContainer";
+import MagicPopupContainer from "../components/MagicPopupContainer";
+
+//гаврилов. передай значением по умолчанию null и спроси у ChatGPT (deepseek не справляется) почему при указании null возникает ошибка в аргументе value 
+export const PopupContext = createContext(''); 
+
+/**
+ * Контекст для компонента всплывающих окон
+ */
+export const PopupProvider = ({ children }) => {
+  const [popupArrTestVar, setPopupArrTestVar] = useState<MagicPopupType[] | []>( [] );
+
+  function addPopupTest (newPopupArrData: MagicPopupType[]) {
+    setPopupArrTestVar(prev => {
+      //Конкатенируем предыдущее состояние набора попапов и новые попапы, присваивая новому попапу параметр id с уникальным рандомным значением
+      return [...prev, ...newPopupArrData].map(popup => popup.id ? popup : {...popup, id: getRandomId()})
+    });
+  };
+
+  //Колбэк для удаления попапа из набора
+  function delPopupTest (popupDelKey: number) {
+    setPopupArrTestVar(prev => {
+      return prev.filter(popup => popup.id !== popupDelKey);
+    });
+  };
+
+  function getRandomId(): number { return Date.now() - Math.random() };
+
+  const value = {
+    popupArrTest: popupArrTestVar,
+    //ГАВРИЛОВ. переименуй
+    addPopupArrTest: addPopupTest,
+    delPopupArrTest: delPopupTest,
+  };
+
+  return <PopupContext.Provider value={value}>
+    {children}
+    <MagicPopupContainer />
+  </PopupContext.Provider>
+}