Система «ЗадаЧат»: Как это работает простыми словами.

1. Страница «Проекты»

1.1. Общий вид

Страница разделена на две области. Слева или сверху — список проектов. Справа или снизу — задачи выбранного проекта. В адресной строке могут быть параметры: ссылка на конкретную задачу или ссылка на проект с подсветкой.

1.2. Список проектов

Пользователь видит только те проекты, куда ему разрешён доступ. Каждый проект показан карточкой: название, дата создания, количество задач. Клик по карточке открывает задачи этого проекта. При клике система также загружает список участников проекта — он нужен для фильтрации задач по исполнителям.

Кнопка «Создать проект» доступна администраторам и тем, кому выдано специальное право на создание проектов. При нажатии открывается окно с полями «Название» и «Описание».

1.3. Редактирование и удаление проекта

Кнопка «Редактировать» есть у создателя проекта и у администратора. При удалении проекта система стирает все задачи, все сообщения, все прикреплённые файлы (если они не используются в других проектах) и все настройки прав доступа к этому проекту. Для подтверждения удаления нужно ввести слово DELETE.

1.4. Область задач выбранного проекта

1.4.1. Фильтры и сортировка

Над списком задач есть строка поиска — по названию и описанию. Два фильтра: по статусу задачи (активные / выполненные) и по исполнителю (один или несколько человек из списка участников проекта). Сортировка возможна по дате последней активности, по названию, по статусу или по плановому сроку. Можно выбрать, сколько задач показывать на одной странице: от 5 до 1000.

1.4.2. Загрузка списка задач

Когда пользователь выбирает проект, система отправляет запрос на получение задач. Если фильтры не включены — загружаются только корневые задачи (те, у которых нет родителя). Если фильтры включены — система сначала находит все задачи, подходящие под условия (включая подзадачи), затем определяет их родителей и показывает только родительские задачи. Это сделано для того, чтобы при фильтрации не терялась иерархия.

1.4.3. Отображение задачи

Каждая задача в списке содержит:

  • Квадратик для отметки «выполнено» — при клике статус задачи переключается.
  • Название задачи — при клике на него копируется ссылка на задачу.
  • Описание — если оно длинное, текст сворачивается, появляется кнопка «Развернуть». Состояние (свёрнуто/развёрнуто) запоминается для каждой задачи.
  • Строка с метками: исполнитель, дата начала (если указана), плановая дата окончания (просроченные задачи выделяются цветом), количество сообщений в чате, количество прикреплённых файлов, количество подзадач.
  • Кнопки действий: редактировать задачу, создать подзадачу, копировать ссылку на задачу, подписаться или отписаться от уведомлений, перейти в чат задачи, перейти к списку файлов задачи.

1.4.4. Подзадачи

Рядом с количеством подзадач есть кнопка, которая раскрывает или сворачивает список подзадач. При первом раскрытии система загружает подзадачи отдельным запросом (по 20 штук за раз). Внизу появляется кнопка «Загрузить ещё», если подзадач больше. Подзадачи визуально сдвинуты вправо, чтобы была видна вложенность.

1.4.5. Переход к задаче по прямой ссылке

Если пользователь переходит по ссылке вида projects.php?task=UUID (например, из уведомления), система делает несколько шагов:

  1. Определяет, в каком проекте находится задача.
  2. Вычисляет, на какой странице списка задач она находится (с учётом текущих фильтров и сортировки).
  3. Загружает список задач, открывая нужную страницу.
  4. Раскрывает всех родителей задачи, если задача — подзадача.
  5. Подсвечивает найденную задачу цветом (подсветка гаснет через 30 секунд).

1.5. Модальные окна

1.5.1. Создание и редактирование проекта

В окне два поля: название и описание. Для администраторов внизу есть отдельная опасная зона с полем для ввода DELETE и кнопкой удаления проекта.

1.5.2. Создание и редактирование задачи

В окне можно указать:

  • Проект (выпадающий список из доступных проектов)
  • Название
  • Описание
  • Исполнителя
  • Родительскую задачу (чтобы сделать эту задачу подзадачей)
  • Дату начала и плановую дату окончания (в часовом поясе пользователя)

Если при редактировании сменить проект, система предупредит, что задача переместится со всеми подзадачами и сообщениями. Список родительских задач обновится в соответствии с новым проектом.

В этом же окне отображаются уже прикреплённые файлы, их можно удалить. Кнопка «Загрузить файл» позволяет добавить новый файл к задаче.

При сохранении новой задачи автор и исполнитель автоматически подписываются на уведомления об изменениях. При смене исполнителя новый исполнитель тоже автоматически подписывается.

1.6. Копирование ссылки на задачу

При клике на строку задачи (не на кнопки, не на текст описания, а именно на пустое место строки) в буфер копируется ссылка на задачу. Система проверяет, не выделен ли в данный момент текст мышью — если выделен, ссылка не копируется, чтобы не мешать обычному копированию текста.

2. Страница «Сообщения» (чат)

2.1. Внешний вид в зависимости от устройства

На компьютере (ширина экрана больше 768 пикселей) слева отображается список проектов и задач, справа — чат. На телефоне список задач скрыт за выдвижной шторкой, в углу экрана появляется кнопка-гамбургер.

2.2. Ссылки на страницу

Можно перейти на страницу сообщений с двумя типами ссылок:

  • messages.php?task=UUID — сразу открывает чат указанной задачи.
  • messages.php?message=UUID — открывает чат задачи, в которой находится это сообщение, и прокручивает экран к этому сообщению (подсвечивает его).

2.3. Список задач в боковой панели

Сначала загружаются все доступные пользователю проекты. Для каждого проекта — список задач. Задачи отсортированы глобально: сверху те задачи, в которых недавно писали сообщения, затем задачи без сообщений (по дате создания). Активная задача (та, чей чат открыт) подсвечена.

На телефоне при выборе задачи из шторки шторка автоматически закрывается.

2.4. Чат

2.4.1. Как загружаются сообщения

Сообщения загружаются не все сразу, а страницами (окнами). Пользователь видит текущую страницу, а предыдущая и следующая подгружаются незаметно в фоне. При скролле вверх загружаются более старые сообщения, при скролле вниз — более новые. Загруженные страницы хранятся в памяти, чтобы при повторном скролле не обращаться к серверу.

2.4.2. Как выглядит сообщение

У каждого сообщения есть автор, дата и время (с указанием часового пояса пользователя), текст. Свои сообщения отличаются внешне от чужих. Непрочитанные сообщения выделены — это помогает быстро понять, где появилось новое.

2.4.3. Обработка текста внутри сообщения

Система автоматически превращает специальные метки в ссылки. Например, если написать [msg:UUID] или [task:UUID] или [file:UUID], система заменит это на кликабельную ссылку «сообщение», «задача» или «файл». Кроме того, система распознаёт обычные ссылки в интернет (http, https, tg, telegram, mailto и другие) и делает их кликабельными.

Цитаты оформляются особым образом: если строка начинается с символов >, > или »,, система оборачивает её в блок цитаты. По клику на такую цитату происходит переход к исходному сообщению.

2.4.4. Отправка нового сообщения

Пользователь пишет текст в поле внизу, может прикрепить файлы (один или несколько). Нажатие Enter (без Shift) отправляет сообщение, Shift+Enter — перевод строки.

Если в тексте встречается символ @ и следом логин (например, @ivan), система предлагает выбрать пользователя из списка. При отправке упомянутые пользователи автоматически подписываются на задачу (ещё не были подписаны) и получают уведомление.

После отправки форма очищается, сообщение появляется в чате (без перезагрузки страницы). Если у пользователя включены звуки, проигрывается короткий сигнал (но не чаще, чем раз в заданный интервал).

2.4.5. Редактирование сообщения

Своё сообщение можно изменить. При нажатии на кнопку «Редактировать» открывается модальное окно с текстом сообщения. После сохранения текст в чате обновляется, и рядом с датой появляется значок «✎» (отредактировано).

2.4.6. Ответ на сообщение

На любое сообщение можно ответить. При нажатии «Ответить» над полем ввода появляется панель с цитатой исходного сообщения. Отправленное сообщение будет помечено как ответ, и цитата будет показана под ним.


2.4.7. Удаление сообщения

Своё сообщение можно удалить. Администратор может удалить любое сообщение. При удалении сообщение плавно исчезает, если в чате не осталось сообщений — показывается надпись «Нет сообщений». Счётчик непрочитанных обновляется.

2.4.8. Файлы в сообщениях

К сообщению можно прикрепить файлы. Изображения показываются в виде миниатюр, при клике открывается просмотрщик с возможностью увеличения и поворота. Документы (PDF, Word, Excel, архивы, текстовые файлы) открываются во встроенном просмотрщике — для Word и Excel нужна дополнительная загрузка библиотек, система подгружает их при первом открытии.

2.4.9. Прокрутка к сообщению

Если перейти по ссылке с параметром ?message=UUID, система находит это сообщение. Если оно уже загружено в текущей странице — просто прокручивает к нему и подсвечивает. Если не загружено — определяет, на какой странице оно находится, загружает эту страницу и затем прокручивает.

2.5. Уведомления о новых сообщениях

Система работает по правилу:

  • Если чат этой задачи открыт на экране и пользователь активен — новые сообщения появляются без звука и без всплывающих окон.
  • Если открыт чат другой задачи — приходит всплывающее уведомление и звук (если включён).
  • Если страница свёрнута или браузер не в фокусе — приходит системное уведомление (как от приложения).

Звук не повторяется чаще, чем раз в заданный пользователем интервал (от 6 секунд до 16 часов).

2.6. Обновление счётчиков в боковой панели

После отправки нового сообщения система обновляет список задач в боковой панели: у задачи, в которую отправлено сообщение, увеличивается счётчик сообщений, и задача перемещается вверх списка (если сортировка по активности).

3. Страница «Файлы»

3.1. Режимы просмотра

На странице файлов есть два режима:

  • Список (по умолчанию) — каждый файл показан строкой таблицы.
  • Превью (можно включить чекбоксом) — для изображений показывается миниатюра вместо иконки.

Режим запоминается для пользователя (сохраняется в сессии).

3.2. Ссылки на страницу

Можно перейти со ссылкой ?task=UUID — тогда покажутся только файлы, прикреплённые к указанной задаче (и к её сообщениям). Можно перейти со ссылкой ?message=UUID — тогда покажутся только файлы из указанного сообщения. Параметр message имеет приоритет над task.

3.3. Список файлов

Таблица с колонками:

  • Превью (иконка или миниатюра)
  • Имя файла (кликабельно — открывает просмотрщик)
  • Размер
  • Дата загрузки
  • Кто загрузил
  • Где используется (ссылки на задачи и сообщения, где этот файл прикреплён)
  • Кнопки действий: просмотр, скачать, скопировать ссылку, удалить (только для своих файлов или для администратора)

3.4. Фильтры и сортировка

Сверху — статистика по типам файлов: все файлы, изображения, PDF, документы, таблицы, архивы, аудио, видео. Клик по статистике фильтрует список. Также есть строка поиска по имени файла. Сортировка возможна по имени, по дате, по размеру.

Количество файлов на странице можно выбрать (от 10 до 200), настройка сохраняется в сессии.

3.5. Удаление файла

Администратор или автор файла может его удалить. Удаление стирает запись из базы данных и физический файл с диска, а также удаляет связи этого файла со всеми задачами и сообщениями.

4. Страница «Поиск»

Сквозной поиск по всем типам контента: проекты, задачи, сообщения, файлы.

4.1. Ввод запроса

Пользователь вводит слово или фразу. Система автоматически генерирует варианты поиска: например, если ввели «проект-123», она также ищет «проект 123» и «проект123». Это помогает находить задачи, где название написано слитно или через дефис.

4.2. Результаты

Результаты сгруппированы по вкладкам: Все, Проекты, Задачи, Сообщения, Файлы. Каждый результат показывает:

  • тип (иконка и название)
  • краткую информацию (проект, автора, дату)
  • название (кликабельно)
  • отрывок текста с подсветкой найденного слова

4.3. Сортировка и пагинация

Результаты можно сортировать по дате, по названию или по релевантности. Настройки количества результатов на странице (от 10 до 100) запоминаются для пользователя.

5. Страница администратора

5.1. Личные данные (доступно всем)

Пользователь может изменить свои данные: логин, имя, почту, телефон. Здесь же настраиваются параметры уведомлений:

  • Интервал между email-уведомлениями (в минутах)
  • Дни недели для уведомлений
  • Включение/отключение звука в браузере
  • Интервал между звуками

Также здесь можно сменить пароль. Есть блок диагностики уведомлений — кнопка, которая проверяет, поддерживает ли браузер уведомления, и показывает статус разрешения.

5.2. Пользователи (только для администратора)

5.2.1. Список пользователей

Таблица со всеми пользователями: логин, имя, email, телефон, роль, статус (активен/заблокирован), дата создания. Для каждого — кнопки действий.

5.2.2. Создание пользователя

Администратор вводит логин, имя, email, телефон, выбирает роль. Система генерирует временный пароль, создаёт запись в базе и отправляет уведомление на email пользователя. Пользователь при первом входе должен будет сменить пароль.

5.2.3. Редактирование пользователя

Можно изменить логин, имя, email, телефон. Изменение роли и статуса (активен/заблокирован) доступно только через специальную форму, чтобы случайно не изменить через основную.

5.2.4. Сброс пароля

Администратор может сгенерировать новый временный пароль. При сбросе в лог аудита записывается, кто и когда это сделал.

5.2.5. Удаление пользователя

Администратор может удалить пользователя. Себя удалить нельзя. Перед удалением отправляется уведомление пользователю.

5.3. Права доступа (только для администратора)

5.3.1. Список прав

Таблица, показывающая для каждой пары «пользователь — проект» какие права выданы: просмотр, создание проектов, редактирование своих проектов, редактирование задач, написание сообщений, загрузка файлов. Также видно, кто выдал права и когда.

5.3.2. Добавление и редактирование прав

Администратор выбирает пользователя и проект, затем ставит галочки напротив нужных прав. Можно выдать право «создание проектов» — оно глобальное, не привязано к конкретному проекту. Право «редактирование своих проектов» позволяет пользователю изменять только те проекты, создателем которых он является.

5.3.3. Удаление прав

Администратор может полностью отозвать все права пользователя на проект. При отзыве пользователь теряет доступ к проекту.

5.4. Подписчики задач (только для администратора)

Администратор может принудительно подписать любого пользователя на уведомления по задаче. В таблице показаны все подписки: задача, пользователь, дата подписки, кто подписал, статус (активна/отписан). Можно добавить новую подписку, изменить статус или удалить.

5.5. Очистка файлов (только для администратора)

Утилита для обслуживания дискового пространства. Есть два режима:

  • Анализ — показывает, какие файлы есть на диске, но не привязаны ни к какой задаче или сообщению (сиротские записи), а также какие импортированные файлы (начинаются с asana_ или msg_).
  • Удаление — физически стирает сиротские файлы и записи о них из базы, а также по желанию — все импортированные файлы.

6. Как работают уведомления

6.1. Email-уведомления

Раз в несколько минут запускается фоновый скрипт. Он проверяет для каждого пользователя:

  • Наступило ли время отправки (с учётом последнего уведомления и заданного интервала)
  • Разрешено ли сегодня отправлять (с учётом выбранных дней недели)
  • Есть ли новые события: задачи, сообщения, файлы, просроченные задачи

Если всё совпало — скрипт собирает до 10 последних событий в одно письмо и отправляет. Письмо содержит список событий, каждый с кратким описанием и ссылкой. После отправки обновляется время последнего уведомления.

6.2. Браузерные уведомления (Push)

Когда пользователь не активен (страница свёрнута или не в фокусе), система может отправить уведомление через браузер. Для этого нужно, чтобы браузер поддерживал Push-уведомления и пользователь дал разрешение. Уведомление приходит даже если сайт закрыт, но браузер запущен.

6.3. Звук

Звук воспроизводится только если:

  • пользователь включил звук в настройках
  • прошло достаточно времени с последнего звука (заданный интервал)
  • страница активна или уведомление пришло через Push

7. Фоновая очистка данных

Регулярно (при каждом запуске cron-скрипта или в фоне) выполняются:

  • Удаление старых прочитанных уведомлений (старше 7 дней)
  • Удаление старых записей о попытках входа (старше 30 дней)
  • Удаление обработанных событий из очереди уведомлений (старше 7 дней, но не менее 5000 последних записей)

8. Просмотрщик файлов

При клике на файл открывается модальное окно. В зависимости от типа файла:

  • Изображения — показываются с возможностью масштабирования колёсиком мыши, перетаскивания при увеличении, поворота (кнопка ⟳).
  • PDF — открывается во встроенном просмотрщике (iframe).
  • Word (docx) — подгружается библиотека, которая конвертирует документ в HTML и показывает его с сохранением форматирования. Старые .doc файлы не конвертируются — предлагается скачать.
  • Excel (xlsx, xls) — подгружается библиотека, которая читает файл и показывает таблицу с переключением листов.
  • ZIP — показывается список файлов внутри архива (имя, размер, дата).
  • Аудио и видео — встроенный плеер.
  • Текстовые файлы — показывается содержимое (первые 500 КБ).
  • Неизвестные бинарные файлы — показывается HEX-дамп первых 1024 байт.

HTML-файлы открываются в безопасном режиме (iframe с ограничениями), чтобы скрипты не могли взаимодействовать с основным сайтом.

9. Настройки пользователя, которые сохраняются

  • Количество задач на странице в проектах
  • Количество файлов на странице
  • Количество результатов поиска на странице
  • Фильтры и сортировка в проектах (статусы, исполнители, поиск, сортировка)
  • Свёрнутость/развёрнутость длинных описаний задач
  • Режим показа файлов (список или превью)
  • Звуковые настройки (включён/выключен, интервал)
  • Часовой пояс (определяется автоматически по браузеру, сохраняется на сервере)

Видео-плейлист системы: https://vkvideo.ru/playlist/-236232859_1