17 часов видео «Простая CRM на Nuxt.js»

17 часов записей прямых трансляций, которые я делал с 10 июня по 12 июля про создание простой CRM на основе Nuxt.js. Советую смотреть на скорости 2х. Контент может быть полезен начинающим программистам, которым интересны: Nuxt, Vue, MongoDB, Express, Mongoose.

Важно! Я не самый опытный программист, поэтому относитесь к информации с большой долей скептицизма и всё перепроверяйте. Это всего лишь мой опыт, а не уроки или инструкция по созданию приложения.

Плейлист из 10 серий трансляций: https://www.youtube.com/playlist?list=ploicx-WjKEZdYjMaIt_7qte5u_g4FOuKp

00:00 Введение
01:37 Полный список функциональности будущей CRM
03:15 Пользователь
04:13 Напоминания для пользователей
05:58 Ночной разлогин)
07:05 Клиент
08:55 Статусы, отрасли, регионы, услуги
10:31 Даты внесения и следующего контакта
11:43 Контактные лица, комментарий и прочие поля клиентов
13:41 Страница Настройки
14:30 Ограничения прав
16:07 Возможности администраторов
16:53 Основной экран программы
22:23 Статистика с графиками
23:31 Лог (запись действий пользователей)
26:47 Структура приложения
28:20 Отличия CRM от обычного сайта
30:07 Буду пробовать SCSS
34:22 Мои впечатления о первом сезоне трансляций про создание сайта на Nuxt.js
37:08 Я не программист, проверяйте всё, что я говорю
37:53 Оказывается мои старые трансляции репостили
39:45 Установка Nuxt.js
45:25 Отличия режима SPA от Universal(SSR)
47:15 Nuxt.config.js
50:00 Обратная связь — это важно!

00:00 Введение
02:15 Вход в программу по логину и паролю с ошибкой о неправильных данных
03:35 Отличия в авторизации на сайте и CRM
05:15 Что сохраняем в момент авторизации на сайте
08:44 bcrypt — шифрование(хеширование) паролей
11:30 Процесс авторизации пользователя
15:40 Расшифровка токена на бэкенде
18:50 Создаю нового пользователя с правами менеджера
20:47 Скрытие смены прав пользователей без прав администратора
22:47 Как можно было обойти смену прав через Postman (не совсем получилось показать)
32:18 Скрытие элементов меню от пользователей без прав администратора
36:04 Смена пароля пользователей для администраторов
41:07 Запрет смены прав пользователей без прав администратора
50:48 Удаление пользователей
52:20 Попробовал SCSS
58:45 Запрет для получения списка всех менеджеров не для администраторов
01:02:22 Добавление свободного текстового поля для менеджеров TinyMCE
01:09:24 Убираю захешированный пароль из ответа сервера при обновлении данных пользователя (спасибо TheLetslook)
01:21:17 Загрузка картинок внутри TinyMCE (ответ на вопрос Web VPF)
01:30:00 Конец

00:00 Подписывайтесь на канал — это важно!
02:36 Менеджеры могут заходить только в свой профиль, администраторы могут заходить в любые
08:37 Настройка списков статусов, отраслей, регионов и услуг
13:16 Корректная работа связки label и input
17:01 Модель Клиент
17:45 Получение списка менеджеров и выделение текущего
20:59 Немного переделал авторизацию
21:43 Продолжение про модель Клиент
28:30 Отправка данных в базу при внесении Клиента на сайте
39:30 Установка плагина для браузера Vue-devtools
45:22 Приём данных Клиента на бэкенде
50:23 Какие данные Клиента в итоге получились
51:58 Создание страницы и маршрута для получения информации об одном клиенте
58:55 Проблема с форматом даты и времени следующего контакта (решил после стрима)
01:19:00 Проблема с отображением менеджера в multiselect (решил после стрима)

00:00 Начало
01:10 Вывод клиентов внутри таблицы
03:37 Звонит перекуп по авто
06:01 Менеджер может заходить только в своих клиентов
07:48 Логаут по 403 ответу сервера
10:03 Комментарии у менеджеров — теория
17:30 Реализация отправки комментариев у менеджеров (АД)
02:18:40 Решил проблему с файлом (нужен не req.body.file, а req.file)
02:26:10 Вывод данных клиента через id и populate

00:00 Начало
02:10 Доработка панели администратора
02:46 Сами комментарии обновились
05:30 Вынес добавление комментариев и панель администратора в компоненты
11:10 Удаление комментариев у менеджеров
17:35 Добавление комментариев у менеджеров
23:53 $emit — передача данных из компонента на страницу
27:10 Компонент Панель администратора
34:40 Удаление менеджера у действующего клиента
37:34 Из чего состоят контактные лица у клиентов
40:56 Создание функциональности контактных лиц
45:50 Почему нужно всё перепроверять и чем я занимаюсь
55:45 Возвращаюсь к контактным лицам
01:00:17 Создание компонента Добавление контактных лиц
01:39:16 Передача данных из компонента на страницу через $emit
01:41:57 Удаление контактных лиц

00:00 Начало
01:40 Изменения в таблице клиентов
07:00 Звонок из Ростелекома
08:00 v-bind выделение цветом по условию
09:45 Поиск по клиентам и контактным лицам
17:55 Как localhost с nuxt’ом перевести на https
22:45 Модель Лог
29:20 Выбор периода для записей лога
32:30 Динамическое изменение количества записей
01:00:30 Корректировка пагинации
01:05:25 Фильтрация вывода лога (только входы в программу)
01:38:30 Корректировка даты на бэкенде +1 день
01:51:40 Итог

00:00 Введение
05:11 Доработал лог
06:00 Получение уникальных пользователей через distinct
07:30 Отключение кнопки: disabled по условию
09:00 Что будет дальше
11:00 Создание недостающих страниц в меню
20:20 Планирование мобильных версий (горизонтальная и вертикальная)
31:30 Вёрстка горизонтальной версии до 1080px
01:13:00 Вёрстка вертикальной версии до 730px

00:00 Введение
01:20 Про то, как я защемил нерв под лопаткой
05:25 Установка vue-chartjs
18:45 Добавляю первый график
30:35 Прикрепление нескольких услуг к Клиенту
32:40 Событие у Клиентов: сортировка
37:25 Редактирование событий, контактных лиц (субдокументов)
56:45 Фильтры в таблице клиентов
01:02:32 Попытки использовать во vue-chartjs данные из бэкенда
01:40:00 Получилось использовать динамические данные для графика

00:00 Введение
01:40 Презентовал программу клиенту, перенес на VDS
03:00 Какие графики получились
05:50 Код страницы статистика
08:28 Опции графиков chart.js
10:30 Каждый график — это компонент
12:40 Загрузка динамических данных для графиков
15:50 Формирование данных для графиков на бэкенде
24:40 Model.aggregate: match, group, sort
29:50 Unwind — разбиваем массив на строки
33:15 Как работают фильтры в графиках
35:55 График с разбивкой по месяцам
49:08 Vue-chart.js (и обычный chart.js) подтягивают moment
56:50 Проблема с дублями клиентов в старой версии CRM
57:40 Mongoose unique validator
01:00:00 Валидация по регулярному выражению в vee-validate
01:02:38 Перенос данных из старой версии CRM
01:10:10 Как переносил проект на VDS (копировал всё кроме,. nuxt, dist, node_modules)
01:15:30 Что будет дальше

00:00 Введение
01:47 Попробовал SCSS
02:14 Компоненты графиков
02:31 Компонент добавления контактных лиц у клиентов
05:00 Vue-the-mask — маска для поля номера телефона
07:35 Компонент добавления событий у клиентов
09:02 Компонент поиска клиентов
18:00 Компонент header — шапка сайта
19:55 Компонент панель администратора у менеджера
23:00 Компонент добавления комментариев у менеджеров
25:31 Шаблон layout
26:11 Страница login
27:30 Авторизация nuxt-auth
31:50 Основная страница программы — таблица с клиентами
39:52 Текущие и отказные клиенты
41:18 Статистика — графики vue-chartjs
42:28 Лог
46:40 Настройки (списки статусов, услуг, отраслей, регионов)
48:20 Страница со списком менеджеров
48:46 Страница одного менеджера
50:02 Страница создания нового менеджера
50:35 Страница создания нового клиента
51:45 Бэкенд
52:40 Модель Клиент
56:42 Модель Лог
57:28 Модель Менеджер
58:40 Модель Настройки
59:00 Маршруты Клиента
01:11:50 Формирование данных для графиков
01:18:00 Продолжение про маршруты Клиента
01:22:40 Маршруты Лога
01:28:07 Маршруты Менеджера
01:30:15 Маршруты Настроек
01:30:50 Плагин vee-validate3
01:31:01 Папка Static (про иконки Nuxt PWA)
01:32:00. env
01:32:30 Настройки prettier
01:34:32 Nuxt.config.js
01:38:32 Package.json
01:42:10 Следующий проект опен сорс — free-audit.ru