Необходимо разработать форму CreateAccountForm и виджет AccountsWidget (файлы public/js/ui/forms/CreateAccountForm.js и public/js/ui/widgets/AccountsWidget.js).
Форма CreateAccountForm отвечает за следующие функции:
- Отправляет запрос на создание счёта через Account.create
- Закрывает окно, в котором находится форма при успешном ответе
- Сбрасывает форму и вызывает App.update() при успешном ответе
AccountsWidget отвечает за следующие функции:
- Отображает список счетов пользователя с суммами
- Позволяет создать новый счёт
- При выборе конкретного счёта отображает страницу со списком доходов и расходов по этому счёту
Этот виджет находится в боковой колонке.
Пример того, как выглядит боковая панель с несколькими заведёнными счетами:
<ul class="sidebar-menu accounts-panel" data-widget="tree">
<li class="header">
Счета
<div class="pull-right">
<span class="create-account label label-success">
<span class="fa fa-plus"></span>
Новый счёт
</span>
</div>
</li>
<li class="active account">
<a href="#">
<span>Сбербанк</span> /
<span>2,396.30 ₽</span>
</a>
</li>
<li class="account">
<a href="#">
<span>Альфа-банк</span> /
<span>740.82 ₽</span>
</a>
</li>
<li class="account">
<a href="#">
<span>QIWI</span> /
<span>20.31 ₽</span>
</a>
</li>
</ul>
Панель счетов состоит из основного контейнера:
<ul class="sidebar-menu accounts-panel" data-widget="tree">
<!-- ... -->
</ul>
и списка счетов, каждый из которых представляет вид:
<li class="account">
<a href="#">
<span>QIWI</span> /
<span>20.31 ₽</span>
</a>
</li>
Класс AccountsWidget состоит из следующих частей:
- Конструктор
- registerEvents устанавливает обработчики событий: выбор счёта, нажатие на кнопку «Создать счёт»
- update обновляет информацию о счетах пользователя
- clear очищает боковую колонку от ранее отрисованных счетов
- onSelectAccount выполняет код для отображения конкретного счёта, который был выбран в боковой колонке
- getAccountHTML на заданный объект данных возвращает HTML-код, который будет отрисован в боковой колонке
- renderItem отрисовывает элемент счёта в боковой колонке.
Важные детали:
- Если передан пустой элемент в конструктор, должна быть выброшена ошибка.
- Сохраните переданный элемент в свойство element
- Вызовите метод registerEvents()
- Вызовите метод update()
При нажатии на .create-account открывает окно #modal-new-account (с помощью App.getModal()) для создания нового счёта. При нажатии на один из существующих счетов (которые отображены в боковой колонке), вызывает AccountsWidget.onSelectAccount()
Метод доступен только для авторизованных пользователей (User.current).
- Получает список счетов пользователя через Account.list.
- Для каждого элемента в полученном массиве счетов вызывает метод render()
- Перед отрисовкой вызывает метод clear() для очистки существующих счетов
Очищает список ранее отображённых счетов. Для этого необходимо удалять все элементы .account в боковой колонке
Срабатывает в момент выбора счёта. Устанавливает текущему выбранному элементу счёта класс .active. Удаляет ранее выбранному элементу счёта класс .active. Вызывает App.showPage( 'transactions', { account_id: id_счёта });
Возвращает HTML-код счёта для последующего отображения в боковой колонке.
Для объекта вида
{
"id": 35,
"name": "Сбербанк",
"sum": 2396.30
}
возвратит строку
<li class="active account" data-id="35">
<a href="#">
<span>Сбербанк</span> /
<span>2,396.30 ₽</span>
</a>
</li>
Используя код метода getAccountHTML, отрисовывает его в контейнер (свойство element виджета)