Compare commits

..

3 Commits

6 changed files with 399 additions and 26 deletions
+53 -26
View File
@@ -1,32 +1,59 @@
# Magic 2.0 <p align="center"><a href="https://laravel.com" target="_blank"><img src="https://raw.githubusercontent.com/laravel/art/master/logo-lockup/5%20SVG/2%20CMYK/1%20Full%20Color/laravel-logolockup-cmyk-red.svg" width="400" alt="Laravel Logo"></a></p>
Попытка ретроспективно описать этапы разработки проекта Magic 2.0.
Изначально проект реализовывался сумбурно, без структурированной фиксации каждой доработки в расчете описать всю историю перед релизом.
## Ход работ: <p align="center">
Есть текущая версия Laravel со <u>всеми</u> реализованными фичами (а также с комментариями, тестовыми настройками и прочим мусором). Была развернута голая Laravel, созданы ветки и в них добавлялись скрипты из текущей версии Laravel по принципу реализованных функциональностей. Версии Laravel отличаются, поэтому некоторые конфиги из коробки могут отличаться от конфигов из текущей версии (впрочем, вроде не критично). Также я приложил excel файл (new_magic в ветку master) к репозиторию, в котором перечислил по каким веткам я разбросал файлы, а к некоторым файлам оставил комментарии <a href="https://github.com/laravel/framework/actions"><img src="https://github.com/laravel/framework/workflows/tests/badge.svg" alt="Build Status"></a>
<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/dt/laravel/framework" alt="Total Downloads"></a>
<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/v/laravel/framework" alt="Latest Stable Version"></a>
<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/l/laravel/framework" alt="License"></a>
</p>
Я знаю, что это не лучший способ фиксировать историчность разработки, но выбор был между отсутствием истории и такой историей. Даже если вы не будете использовать мои разработки как основу для Magic 2.0, по крайней мере пробегитесь глазами по архитектуре и почитайте комментарии. Некоторые фичи полность готовы и могут быть перенесены, другие могут сэкономить время хотя бы за счет готового описания ## About Laravel
Не забывайте, что в Confulence тоже кое-что из реализованного уже описано Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. Laravel takes the pain out of development by easing common tasks used in many web projects, such as:
_Заранее извиняюсь за сумбурность и неработоспособность чего-то - можете лишить меня годовой премии_ - [Simple, fast routing engine](https://laravel.com/docs/routing).
- [Powerful dependency injection container](https://laravel.com/docs/container).
- Multiple back-ends for [session](https://laravel.com/docs/session) and [cache](https://laravel.com/docs/cache) storage.
- Expressive, intuitive [database ORM](https://laravel.com/docs/eloquent).
- Database agnostic [schema migrations](https://laravel.com/docs/migrations).
- [Robust background job processing](https://laravel.com/docs/queues).
- [Real-time event broadcasting](https://laravel.com/docs/broadcasting).
## Ветки Laravel is accessible, powerful, and provides tools required for large, robust applications.
Ниже описание некоторых веток. В основном, они называются очевидным образом, но некоторые требуют пояснения
+ all_changes - по сути это текущая версия Magic 2.0 со всеми изменениям
+ master - голая версия Laravel, от которой наследовались все фичевые ветки
+ doubtfull - сомнительная ветка. Не уверен, что скрипты из нее нужны для запуска проекта. Возможно, конфиги, которые в новой версии Laravel не требуются для запуска
+ trash - мусорная ветка. Скрипты отсюда почти наверняка не нужны для работы проекта. Например, тестовые скрипты или пустые скрипты архитектурных сущностей, которыми мы не пользовались (вроде сидеры к ним относятся). В новых версиях ларавель они создаются не из коробки, а при вызове команды на создание сущностей
+ db_tables - набор конфигов sql таблиц и дампов с имеющимися на текущий момент записями
+ ветки, начинающиеся на **front_** или **react_** - предполагаю, что их должен проанализировать фронтендер
+ laravel_core - основные конфиги для запуска проекта
## Сборка ## Learning Laravel
Ниже опишу как бы я смотрел все эти изменения
1. Начать с версии из ветки all_changes - там вся имеющаяся функциональность Laravel has the most extensive and thorough [documentation](https://laravel.com/docs) and video tutorial library of all modern web application frameworks, making it a breeze to get started with the framework. You can also check out [Laravel Learn](https://laravel.com/learn), where you will be guided through building a modern Laravel application.
2. Все таблицы из db_tables экспортировать в свою локальную бд
3. Просмотрел бы верхнеуровнево все core ветки, начиная от конфигов и core функций типа logging If you don't feel like reading, [Laracasts](https://laracasts.com) can help. Laracasts contains thousands of video tutorials on a range of topics including Laravel, modern PHP, unit testing, and JavaScript. Boost your skills by digging into our comprehensive video library.
4. На голую версия накинул бы ветку laravel_core и doubtfull
5. Начал бы накидывать постепенно изменения из веток и смотреть как работает платформа. Я постарался в ветках хранить только ту информацию, которая нужна для работы конкреной функциональности, чтобы вы могли изолированно их посмотреть и даже запустить для тестов перед мержем с master. К сожалению у меня не было времени тестить каждую ветку отдельно ## Laravel Sponsors
6. В последнюю очередь накинул бы изменения из веток с реализацией страниц: magic_app_menu и taxi-app
7. Опциально: можно начать удалять скрипты из ветки doubtfull и смотреть работает ли все как надо, чтобы облегчить платформу от ненужных скриптов We would like to extend our thanks to the following sponsors for funding Laravel development. If you are interested in becoming a sponsor, please visit the [Laravel Partners program](https://partners.laravel.com).
### Premium Partners
- **[Vehikl](https://vehikl.com)**
- **[Tighten Co.](https://tighten.co)**
- **[Kirschbaum Development Group](https://kirschbaumdevelopment.com)**
- **[64 Robots](https://64robots.com)**
- **[Curotec](https://www.curotec.com/services/technologies/laravel)**
- **[DevSquad](https://devsquad.com/hire-laravel-developers)**
- **[Redberry](https://redberry.international/laravel-development)**
- **[Active Logic](https://activelogic.com)**
## Contributing
Thank you for considering contributing to the Laravel framework! The contribution guide can be found in the [Laravel documentation](https://laravel.com/docs/contributions).
## Code of Conduct
In order to ensure that the Laravel community is welcoming to all, please review and abide by the [Code of Conduct](https://laravel.com/docs/contributions#code-of-conduct).
## Security Vulnerabilities
If you discover a security vulnerability within Laravel, please send an e-mail to Taylor Otwell via [taylor@laravel.com](mailto:taylor@laravel.com). All security vulnerabilities will be promptly addressed.
## License
The Laravel framework is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).
BIN
View File
Binary file not shown.
+121
View File
@@ -0,0 +1,121 @@
@import url('./../variables.css');
/* #modal-window__background{
position: fixed;
display: block;
width: 100%;
height: 100%;
background: #6a6a6ab5;
top: 0;
z-index: 99;
} */
.entity-hist-container{
position: fixed;
width: 50%;
top: 10%;
left: 25%;
z-index: 100;
background: white;
border-radius: 10px;
box-shadow: 0px 0px 15px 1px #9b9999;
&>.hist__header-block{
display: flex;
align-items: center;
justify-content: space-between;
background: var(--color_graphite_main);
min-height: 7%;
height: auto;
border-radius: 10px;
color: white;
padding: 10px;
&>.hist__header__buttons{
&>.header__buttons__close{
transform: rotate(45deg);
font-size: 2rem;
color: var(--color_ruby_main);
cursor: pointer;
}
}
}
&>.hist__content-block{
overflow-y: scroll;
padding: 10px;
max-height: 500px;
&>.hist-container__date-block{
display: flex;
&>.date-block__date{
flex-basis: 15%;
&>div{
position: sticky;
top: 0px;
padding: 3px;
background: var(--color_purple_main);
border-radius: 5px 0 0 5px;
color: white;
}
}
&>.date-block__changes{
flex-basis: 85%;
border-left: 2px solid black;
padding: 0 10px;
&>.changes__action-block{
& .action-block__action-name{
padding: 3px;
border-radius: 3px;
font-size: 1.2rem;
/* border-bottom: 3px solid var(--color_purple_main); */
background: color-mix(in srgb, var(--color_purple_main) 20%, transparent);
box-shadow: 0px 2px 3px 0px #c0bdd3;
}
&:last-child{
margin-bottom: 30px;
}
&>.changes__date-time-block{
display: flex;
justify-content: space-between;
margin: 5px 0px 10px 0px;
color: rgb(173 173 173);
}
&>.changes__details{
margin-bottom: 15px;
& .changes__details__el{
display: flex;
justify-content: space-between;
margin-bottom: 10px;
&>.changes__details__el__prop-name{
flex-basis: 30%;
font-weight: 500;
}
&>.changes__details__el__prop-val{
flex-basis: 70%;
background: #91919121;
border-radius: 5px;
padding: 5px;
}
}
}
}
}
}
}
}
@@ -0,0 +1,120 @@
import React, { useEffect, useMemo, useState, useContext } from "react";
import { createPortal } from "react-dom";
import './../../../css/components/entityHistory.css';
import { HistoryContext } from "../../contexts/HistoryContext";
//Тип с параметрами сущности, история по которой будет выводиться
export type EntityHistoryProps = {
changeAction: string, //Совершенное действие: создание, удаление, редактирование, архивирование и т.д.
changeAuthor: string, //Автор изменения: логин, сервисная УЗ
changeDate: Date //Объект даты изменения. В объекте будет либо время (тогда показываем), либо время будет отсутствовать (тогда не показываем) //что будем передавать? объект new Date или библиотечный объект для работы с датами?
changeTime?: string //Время изменений. Передавать не нужно, на этабе сборки компонента будет формироваться на основе пропса changeDate
// changeDetails?: HistoryEntityElDetails[] //Массив объектов с деталями изменений формата: изменяемое свойство(поле, например) - значение изменяемого свойства
changeDetails?: Record<string, string> //Массив объектов с деталями изменений формата: изменяемое свойство(поле, например) - значение изменяемого свойства
};
//Тип с деталями изменений
// type HistoryEntityElDetails = {
// propName: string, //Имя измененного свойства
// propValue: string //Значение измененного свойства
// }
//Компонент отображения истории изменений сущности
export default function EntityHistory ()
{
//ГАВРИЛОВ
//ИДЕНТИЧНЫЙ СПРАВОЧНИК УКАЗАН НА СТОРОНЕ ЛАРАВЕЛЬ APP/ENUMS/LOGBUSINESSEVENTS. ЕСТЬ ВОЗМОЖНОСТЬ ОБЪЕДИНИТЬ ИХ?
const HistoryActions = {
create: 'создание',
edit: 'редактирование',
archive: 'архивация',
restore: 'восстановление',
delete: 'удаление',
cancel: 'отмена',
}
const historyContext = useContext(HistoryContext);
//Перестраиваем объект с изменениями, группируя их по датам
const groupDataByDate = useMemo( () => {
let changesByDate = {},
historyContent = historyContext.content.length ? historyContext.content : []
//Сортируем все изменения от большего к меньшему по дате и времени
//ГАВРИЛОВ. или нужно отсортировать от меньшего к большему? мы хотим сверху самые актуальные данные а ниже менее актуальные или наоборот?
//ПРОВЕРИТЬ СОРТИРУЕТСЯ ЛИ ПО ДАТАМ
historyContent.sort( (a, b) => {return b.changeDate - a.changeDate} )
//console.log(historyContext)
historyContent.forEach( (changeEl: EntityHistoryProps) => {
let dateToString = changeEl.changeDate.toLocaleString('ru-RU').split(',')[0];
if ( !(dateToString in changesByDate) ) {
changesByDate[dateToString] = [];
}
changesByDate[dateToString].push(changeEl);
});
return changesByDate;
}, [historyContext.content]);
//Сокрытие блока показа истории
function hideHistoryBlock(){
historyContext.hideHistory()
}
return (
historyContext.content && historyContext.visible ?
createPortal(
<div>
<div className="entity-hist-container">
<div className="hist__header-block">
<div className="hist__header__title">
<h3>{ historyContext.headerText.length ? historyContext.headerText : `История изменений запроса ${historyContext.entityId}` }</h3>
</div>
<div className="hist__header__buttons" onClick={hideHistoryBlock}>
<i className="fa fa-plus header__buttons__close"></i>
</div>
</div>
<div className="hist__content-block">
{Object.entries(groupDataByDate).map( (dateChanges, dateIndex) =>
<div key={dateIndex} className="hist-container__date-block">
<div className="date-block__date">
<div>{ dateChanges[0] }</div>
</div>
<div className="date-block__changes">
{ dateChanges[1].map( (changeEl: EntityHistoryProps, elIndex: number) =>
<div className="changes__action-block" key={ elIndex }>
<div className="action-block__action-name">
{ HistoryActions[changeEl.changeAction] }
</div>
<div className="changes__date-time-block">
<div>
{ changeEl.changeAuthor }
</div>
<div>
{ changeEl.changeTime }
</div>
</div>
<div className="changes__details">
{Object.entries(changeEl.changeDetails).map( (detail, detailIndex) =>
<div className="changes__details__el" key={ detailIndex }>
<div className="changes__details__el__prop-name">
{ (historyContext.dataFields && historyContext.dataFields[detail[0]]) ? historyContext.dataFields[detail[0]] : detail[0] }
</div>
<div className="changes__details__el__prop-val">
{ detail[1] }
</div>
</div>
)}
</div>
</div>
)}
</div>
</div>
)}
</div>
</div>
</div>,
document.body
)
: ''
)
}
+97
View File
@@ -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>
}
+8
View File
@@ -0,0 +1,8 @@
<?php
use Illuminate\Support\Facades\Route;
use \App\Http\Controllers;
//Получение истории по сущности приложения
Route::get('{app_name}/history/{subject_id}', [Controllers\AppHistoryController::class, 'getAppHistory']);