Окно редактирования подписки
Последнее обновление May 23rd, 2019 | История страницы | Улучшить эту страницу | Сообщить о проблеме
Support the team building MODX with a monthly donation.
The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.
Backers
Budget
$287 per month—let's make that $500!
Learn moreНа прошлом занятии мы сделали таблицу подписок и окно создания.
Теперь нам нужно добавить окно изменения подписки, и сложность здесь в управлении подписчиками — нам нужно окно с вкладками. На первой те же поля, что и при создании, а на второй — добавление и удаление пользователей.
Для работы с пользователями, нужно написать свои процессоры: выборка, поиск и добавление\удаление к подписке.
Окно в вкладками¶
Как вы уже знаете, в ExtJS можно вкладывать одни компоненты внутрь других. Мы это видели на примере простого окна, где внутри была форма с кнопочками.
Теперь нам нужно эту же самую форму обернуть в табы. Мы работаем с Sendex.window.UpdateNewsletter и нам нужно указать xtype: 'modx-tabs'
в параметре fields
:
И получаем работающее окошко с двумя вкладками.
Нужно добавить в процессор newsletter/update те же проверки, что и в create, но с одним изменением:
Уникальность имени нужно проверять с учетом id, иначе процессор будет ругаться на постоянные дубликат.
Редактирование подписки работает. Переходим к таблице пользователей.
Таблица пользователей¶
Здесь работаем по тем же правилам, что и в таблице подписок: нужно создать новый xtype и добавить для него процессоры.
Обратите внимание на
Процессоры подписчиков будут располагаться внутри директории с процессорами подписок — так логичнее. А вот параметр newsletter_id нам нужно отправить, чтобы процессор знал, от какой именно подписки показывать пользователей.
Как же мы узнаем id подписки во всплывающем окне? Следите за руками:
- Таблица подписок загружает все подписки
- При клике на редактирование в контекстонм меню запускается метод
updateNewsletter
- Он отправляет запрос на сервер и получает маасив с ключом
object
, в котором есть ключid
. - Дальше он вызывает окошко и передаёт в него параметр
record
с ответом от сервера, где есть ключobject
- При запуске окна, все переданные параметры находятся в переменной
config
- Значит, все свойства объекта у нас находятся в переменной
config.record.object
- Поэтому, при вызове таблицы внутри окна, нужно передать ей эту переменную
То есть, мы объявили новый xtype и вызвали его во второй вкладке окна редактирования. При вызове указали параметр record, куда передали массив со свойствами подписки.
Ну а таблица подписчиков отправит на сервер id подписки, чтобы получить только нужные записи. Добавляем записи в лексикон, чистим кэш и обновляем страницу.
Таблица появилась, нужно написать процессор выборки.
Выборка подписчиков¶
Первым делом нам нужен процессор getlist
, который будет выдавать подписанных юзеров.
Создаём директорию subscriber внутри /processors/newsletter/
и добавляем туда файл getlist.class.php
:
Ну вот, таблица больше не ругается, что «процессор не найден». Правда, выводить новому процессору еще нечего. Нужно написать добавление пользователей.
Добавление подписчиков¶
Обычно такие вещи делают через всплывающие окна, но я придумал более простой и симпатичный вариант — комбобокс с пользователями вверху таблицы. Там будет поиск, и выбор при клике.
Это уже продвинутый уровень написания компонентов: там есть работа с шаблонами и событиями.
Редактируем /assets/components/sendex/js/mgr/misc/sendex.combo.js
:
Добавляем оформление для этого комбобокса в файл /assets/components/sendex/css/mgr/main.css
Если вы забыли — он подключается у нас в контроллере index.class.php
и может задавать стиль всему компоненту.
Ну а теперь самое интеерсное — добавляем новый xtype а таблицу подписчиков. Она нам нужна в tbar
:
Расширяем таблицу подписчиков — нужно добавить метод обработки выбора комбобокса:
Последний штрих — добавляем процессор создания подписчика /core/components/sendex/processors/mgr/newsletter/subscriber/create.class.php
Удаление подписчика¶
Подписчика можно добавить, но нельзя удалить. Для этого добавляем в таблицу контекстное меню:
Добавляем запись в лексикон, чистим кэш и проверяем:
Обратите внимание, что в методе удаления подписчика используется MODx.msg.confirm
— это окошко, которое выводит подтверждение и 2 кнопки: да или нет. Вот документация по таким окошкам.
Добавляем в лексиконы запись sendex_subscriber_remove_confirm
и проверяем:
Если нажать «Нет» — окно просто закроется, а если «Да», то пойдёт запрос на процессор mgr/newsletter/subscriber/remove
, нужно его написать:
Ну вот и всё: пользователи добавляются и удаляются. Коммит со всеми изменениями.
Заключение¶
Возможно, все эти действия выглдят немного сложно, но на самом деле это всего 4 пункта:
- Создаём эелемент и навешиваем на него обработчик (контекстное меню, или кнопка)
- Обработчик принимает данные и передаёт их процессору через ajax
- Процессор что-то делает и возвращает ответ (успех или ошибка)
- Обработчик выводит ответ от процессора: показывает ошибку или обновляет таблицу (или что-то другое)
Еще хочу енмного добавить про наш комбобокс Sendex.combo.User
— у него есть один недостаток в работе с подписками — он не прячет уже подписанных пользователей. Это потому, что мы используем стандартный процессор MODX, который знать ничего не знает о подписках.
В принципе, можно было бы потратить еще немного времени, и написать свой процессор для выборки юзеров с цетом подписок, но мне кажется, что в рамках обучения это лишнее. Просто имейте в виду, что вы можете написать компонент ExtJS с любой функциональностью.
На следующем уроке мы займёмся созданием и отправкой писем. Может, даже нарисуем таблицу с очередью сообщений.
Обновление¶
После публикации урока, в комментариях подсказали ошибку: окно изменения подписки рендерится только один раз, поэтому при открытии нескольких окон у них всегда одна и та же таблица с подписчиками.
Поэтому я изменил регистрацию окна так, чтобы существующее окошко уничтожалось, и каждый раз рендерилось новое.
Вот код:
А вот коммит.
Узнать больше¶
- Настройка рабочего места: MODXCloud + PhpStorm
- Разбор структуры компонента, зачем нужны assets, core и остальные?
- Основы Git и первый коммит заготовки компонента на Github
- Логика работы, схему и модель таблицы в БД
- Сборка и установка первой версии пакета
- Пишем интерфейс: виджеты ExtJS и процессоры
- Пишем интерфейс: таблица подписок и окошко создания
- Сниппет Sendex и формы подписки\отписки
- Самостоятельная подписка\отписка пользователя
- Рассылка по расписанию
Support the team building MODX with a monthly donation.
The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.
Backers
Budget
$287 per month—let's make that $500!
Learn more