havart / learn-angular Goto Github PK

вот проблема:

Сделать чтоб сайдбар открывался/закрывался по кнопке меню. Когда сайдбар открыт, меняем кнопку меню на кнопку крестик.

Создать страницу на которой есть кнопка получить задание, доступ к странице тольк если пользователь залогинен.

Нажимаем на кнопку получить задание, отправляем GET запрос

http://5bfff0a00296210013dc7e82.mockapi.io/test/user-info/:id
пусть запрос шлется с рандомным ИД от 1 до 20. Тут всего 12 клиентов, потому в некоторых ситуация мы поймаем ошибку. Ее нужно корректно обработать пока мы ее выводим в консоль.

Вот пример ответа:

{
  "id": "1",
  "createdAt": "2019-04-23T21:52:28.837Z",
  "firstName": "Dayna",
  "lastName": "Lynch",
  "age": "2018-11-24T03:29:45.019Z",
  "address": "651 Muller Isle",
  "city": "Rhodabury",
  "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/travishines/128.jpg",
  "session": 10662,
  "customerId": "c8f21626-0d2b-4754-a04c-1fa01ce9d865"
}

Если мы получили клиента, делаем переход на основную страницу.

4 часа

При логине нет возможности получить задание.

Как должно работать.
Логин после получаем задание далее страница operator.
Добавить название Верификация в тулбаре возле кнопки меню. По нажатию на название редирект на получить задание.
Любой роут редиректит на page not found

Наш Guard Auth если не авторизован редиректит на логин.

В табе трудовой деятельности под формой. Нужно отобразить список предыдущих мест работы.
Заголовок "Список работ"
API для получения списка работ
GET БАЗОВЫЙ_ПУТЬ/labor-activity

Примерный вид для списка и заголовка.
Отображаем поля:
position
workPhone
income
startDate

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

Важно!!!
Изменился контракт от ручки /steps - вам нужно поправить интерфейсы для комментов и шагов.
Добавилось 2 новых поля:
description
showDescription
Вот при мер ответа:

[
  {
    "id": "1",
    "createdAt": "2019-08-12T05:33:10.105Z",
    "name": "Practical Wooden Chips",
    "comment": "Director Global",
    "viewType": "viewType 1",
    "isComment": false,
    "description": "Illinois Generic",
    "showDescription": false
  },
]

Если у шага есть description и поле showDescription = true, нужно его отобразить под комментарием в раскрывающемся списке.

Делаем так:
Сейчас мы показываем коммент
Comment
под ним небольшими буквами пишем подробнее
при нажатии на подробнее, раскрывается информация с описанием из поля description
Повторное нажатие скрывает описание.

Нужно сделать чтоб тулбар при скролле оставался в верху.

Вот пример того как должно быть.

При наведении или клике по данным о нашем пользователе выводить меню в котором кнопка выйти

НУжно создать компонент в котором будет отображаться информация по текущему клиенту. Для начала отобразим то что выделено синим.
Получение данных:
GET http://5bfff0a00296210013dc7e82.mockapi.io/test/user-info/:id
id используйте от 1 до 10

Пример ответа:

{
    "id": "1",
    "createdAt": "2019-04-23T21:52:28.837Z",
    "firstName": "Dayna",
    "lastName": "Lynch",
    "age": "2018-11-24T03:29:45.019Z",
    "address": "651 Muller Isle",
    "city": "Rhodabury",
    "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/travishines/128.jpg",
    "session": 10662,
    "customerId": "c8f21626-0d2b-4754-a04c-1fa01ce9d865"
  }

8 часов.

Мы добавили в проект прекоммит хуки теперь когда разработчики работая над задачей упускают подсказки линтера, при попытке закомитить изменения код будет проанализирован и если будут найдены ошибки линтера коммит прервется и разработчик увидит какие ошибки были допущены.

Что нужно сделать сейчас...
Создаем ветку от develop-2, в этой ветке нужно исправить то что накопилось с начала разработки.
просто запускаем команду ng lint и исправляем все ошибки которые нам покажет линтер.

Вот примерный список проблем )

На закладке трудовой деятельности нужно добавить форму для редактирования трудовой деятельности.
Вот примерная форма:

API для получения текущей трудовой деятельности:
GET БАЗОВЫЙ_ПУТЬ/labor-activity/:id

Пример ответа:

{
  "id": "1",
  "createdAt": "2019-05-04T03:43:29.680Z",
  "type": "type 1",
  "organizationAddress": "6402 Waters Light",
  "address": "08580 Lina Keys",
  "position": "Global Solutions Supervisor",
  "occupation": "Facilitator",
  "startDate": "2018-05-16T04:40:37.278Z",
  "income": "291.69",
  "workPhone": "70088",
  "site": "https://geo.com"
}

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

Кнопка сохранить должна сохранить изменения.
PUT /labor-activity/:id

Кнопка отмена убирает изменения, отображаются данные которые были до изменений.

Кнопка добавить.

• Очищает форму
• Генерирует новый ID
  поведение остальных кнопок сохраняется.

Все изменения должны обновиться в зависимых компонентах, например в шапке где отображается информация о кастомере.

Добавить стратегию onPush в компонент.
Проверить функционал приложения, пофиксить возникшие баги.

Нужно добавить отображение информации о трудовой деятельности клиента.
Сразу под информацией о клиенте, как показано на скрине.

API для получения текущей трудовой деятельности:
GET БАЗОВЫЙ_ПУТЬ/labor-activity/:id

Пример ответа:

{
  "id": "1",
  "createdAt": "2019-05-04T03:43:29.680Z",
  "type": "type 1",
  "organizationAddress": "6402 Waters Light",
  "address": "08580 Lina Keys",
  "position": "Global Solutions Supervisor",
  "occupation": "Facilitator",
  "startDate": "2018-05-16T04:40:37.278Z",
  "income": "291.69",
  "workPhone": "70088",
  "site": "https://geo.com"
}

Нужно отобразить поля:
Одна секция
position,
occupation,

вторая:
income,
site

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

Иконки:
<mat-icon>call</mat-icon>

<mat-icon>call_end</mat-icon>

Звонок на номер УКАЗАТЬ НОМЕР

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

Метод для создания комментария:
**PUT** БАЗОВЫЙ_ПУТЬ/steps/:id

Request body:

{
    "id": сгенерировать id,
    "createdAt": дата создания,
    "name": имя текущего пользователя,
    "comment": комментарий,
    "viewType": "viewType 1",
    "isComment": всегда true для комментариев
}

Ориентировочная картинка:

Сейчас у нас в приложении никак не обрабатывается вариант если на ответ сервера мы получаем ошибку, это нужно исправить.

Вариант решения:
Создаем сервис нотификации который будет выводить сообщение через MatSnackBar, или можете сделать свой динамический компонент.

В каждом сервисе нужно добавить обработку ошибки. Проверить работу можете допуская ошибку в URL.
Изучите как устроен интерфейс Direction, выровнять сообщение или в центре сверху или сверху справа.

3 SP

Убрать кнопку отправить, ее у нас не будет и поле комментарий, ширина формы 600px.
Отобразить весь список контактов с соответствующими данными.
вот пример

НУжно создать компонент в котором будет отображаться информация по текущему клиенту. Для начала отобразим то что выделено синим.
Получение данных:
GET http://5bfff0a00296210013dc7e82.mockapi.io/test/user-info/:id
id используйте от 1 до 10

Пример ответа:

{
"id": "1",
"createdAt": "2019-04-23T21:52:28.837Z",
"firstName": "Dayna",
"lastName": "Lynch",
"age": "2018-11-24T03:29:45.019Z",
"address": "651 Muller Isle",
"city": "Rhodabury",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/travishines/128.jpg",
"session": 10662,
"customerId": "c8f21626-0d2b-4754-a04c-1fa01ce9d865"
}

Используемые поля:
customerId
session
firstName
lastName
age
address
city оборачиваем в бейдж

8 часов.

Добавить таб в котором есть форма для редактирования трудовой деятельности.
Вот примерный вид.

API для получения текущей трудовой деятельности:
GET БАЗОВЫЙ_ПУТЬ/labor-activity/:id

Пример ответа:

{
  "id": "1",
  "createdAt": "2019-05-04T03:43:29.680Z",
  "type": "type 1",
  "organizationAddress": "6402 Waters Light",
  "address": "08580 Lina Keys",
  "position": "Global Solutions Supervisor",
  "occupation": "Facilitator",
  "startDate": "2018-05-16T04:40:37.278Z",
  "income": "291.69",
  "workPhone": "70088",
  "site": "https://geo.com"
}

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

"type": "type 1",
  "organizationAddress": "6402 Waters Light",
  "address": "08580 Lina Keys",
  "position": "Global Solutions Supervisor",
  "occupation": "Facilitator",
  "startDate": "2018-05-16T04:40:37.278Z",
  "income": "291.69",
  "workPhone": "70088",
  "site": "https://geo.com"

Кнопка сохранить должна сохранить изменения.
PUT /labor-activity/:id

Кнопка отмена убирает изменения, отображаются данные которые были до изменений.

Кнопка добавить.

Очищает форму
Генерирует новый ID
поведение остальных кнопок сохраняется.
Все изменения должны обновиться в зависимых компонентах, например в шапке где отображается информация о кастомере.

Добавить роутер, сконфигурировать его, далее создаем компонент для главного экрана.

Кейс следующий, у нас есть логин пейдж который проводит авторизацию, далее редиректит нас на страницу СтартПейдж.

Нужно использовать гвард для проверки авторизации на всех страницах кроме логин пейджа.

Добавить метод проверки авторизации в сервис авторизации

Если на странице СтартПейдж в очистить localstorage и обновить страницу, нас должно редиректнуть на страницу логин.

Для путей роутера использовать enums

3-4 часа.

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

5sp

В проект нужно добавить стейт менеджмент.

Добавить в него
customerInfo
laborActivity
steps
comments

Нужно также установить расширение redux devtools

Добавить роутер, сконфигурировать его, далее создаем компонент для главного экрана. Для начала приложение будет на этот компонент.
Добавить в него material layout.

3-4 часа.

Эту таску выполнить после #94

В шаги добавились новые поля, нужно обновить интерфейсы:
поля:
showPhone
phone

Привер ответа:

[
  {
    "id": "1",
    "createdAt": "2019-08-11T23:16:22.530Z",
    "name": "software",
    "comment": "Administrator portals",
    "viewType": "viewType 1",
    "isComment": true,
    "description": "Use the haptic JBOD protocol, then you can index the haptic system!",
    "showDescription": true,
    "showPhone": true,
    "phone": 33562
  },
]

Сгруппировать шаги в левом сайдбаре по флагу showPhone, если showPhone истина то мы группируем шаги сверху а группу описываем как Шаги с телефоном.
Ниже в группе без названия остальные шаги.

Сейчас приложение очень простое:

• есть массив строк.

• поле для ввода нового текста и кнопка добавить.

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

• добавляться должны только не пустые строки.

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

Добавить в проект ngRx для начала добавляем в стор значение задания которое мы получаем по кнопке получить задание.
Используйте ключ client для полученного задания. Можно хранить entities структуру или произвольную.
Понадобится установить расширение для хрома redux dev tools

8SP

Сделать чтоб страница была на всю высоту экрана по умолчанию, даже если в ней не хватает контента

На скрине видно проблему, не видно все комментарии

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

Звонок на номер УКАЗАТЬ НОМЕР

На главный экран в sidebare нужно добавить шаги.

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

Шаги берем отсюда и фильтруем isComment = false:
GET http://5bfff0a00296210013dc7e82.mockapi.io/test/steps

Пример ответа:

[
{
"id": "1",
"createdAt": "2019-08-21T10:43:46.833Z",
"name": "ФЫ",
"comment": "счсячсяс",
"viewType": 1,
"isComment": true,
"description": "Use the haptic JBOD protocol, then you can index the haptic system!",
"showDescription": true,
"showPhone": true,
"phone": 33562
},
]

выводим поле name
4-6 часа

Добавить стратегию onPush в компонент.
Проверить функционал приложения, пофиксить возникшие баги.

Добавить хелпер для генерирования рандомных чисел в рамках разрабатываемого приложения для удобства использования в разных частях кода. Генерирует число от 0 - 20

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

4-5 часов.

Вот скрин лога с проблемой

Реализовать компонент который будет отображать комментарии как показано на скрине (обведено синим). Секция всегда будет находиться справа как на скрине в проекте.

Комментарии берем отсюда и фильтруем isComment = true:
GET http://5bfff0a00296210013dc7e82.mockapi.io/test/steps

Пример ответа:

[
{
"id": "1",
"createdAt": "2019-08-21T10:43:46.833Z",
"name": "ФЫ",
"comment": "счсячсяс",
"viewType": 1,
"isComment": true,
"description": "Use the haptic JBOD protocol, then you can index the haptic system!",
"showDescription": true,
"showPhone": true,
"phone": 33562
}
]

Используем поля:
createdAt
name
comment

5-6 часов

На странице должно быть 2 поля типа логина и пароля.
Все поля обязательны к заполнению.
Нужно создать сервис авторизации который будет имитировать авторизацию.
Любой пользователь и пароль нам будет подходить, информацию об авторизации сервис должен добавить в localstorage в формате {uathData: {userName: 'Имя пользователя который зарегистрировался'}}

После авторизации редирект на страницу start-page
6 часов

Добавить на главный экран и экран получения задания toolbar.
На картинке это горизонтальная темно серая полоса в верху.
у него должно быть 2 секции, слева лого или название проекта, справа информация об авторизированом пользователе.

Используем иконку face-woman
контент центрирован по вертикали.

4 часа

Нужно добавить отображение информации о трудовой деятельности клиента.
Сразу под информацией о клиенте, как показано на скрине.

API для получения текущей трудовой деятельности:
GET БАЗОВЫЙ_ПУТЬ/labor-activity/:id

Пример ответа:

{
"id": "1",
"createdAt": "2019-05-04T03:43:29.680Z",
"type": "type 1",
"organizationAddress": "6402 Waters Light",
"address": "08580 Lina Keys",
"position": "Global Solutions Supervisor",
"occupation": "Facilitator",
"startDate": "2018-05-16T04:40:37.278Z",
"income": "291.69",
"workPhone": "70088",
"site": "https://geo.com"
}
Нужно отобразить поля:
Одна секция
position,
occupation,

вторая:
income,
site

На главный экран нужно добавить sidebare

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

Шаги берем отсюда и фильтруем isComment = false:
GET http://5bfff0a00296210013dc7e82.mockapi.io/test/steps

Пример ответа:

[
  {
    "id": "1",
    "createdAt": "2019-04-23T18:44:04.861Z",
    "name": "Borders",
    "comment": "dynamic Intranet",
    "viewType": "viewType 1",
    "isComment": true
  },
  {
    "id": "2",
    "createdAt": "2019-04-24T16:30:08.787Z",
    "name": "indexing",
    "comment": "Savings Account",
    "viewType": "viewType 2",
    "isComment": true
  },
]

4-6 часа

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

Нужно добавить таб контактность, который будет отображать контакты для нашего кастомера.
Типы телефонов собрать из ответа от сервера, поле phoneType
Вместо поля тип связи будем использовать поле departament лейбл Отдел

Постарайтесь сделать похожий вид как на скрине.
padding: 20px;
margin-bottom: 20px;
Примерный вид:

API: http://5bfff0a00296210013dc7e82.mockapi.io/test/contacts

Пример ответа:
[
{
"id": "1",
"createdAt": "2019-07-25T16:00:06.573Z",
"phone": "(880) 382-0246 x23499",
"phoneType": "Executive",
"description": "Fresh synergy withdrawal",
"firstName": "Dashawn",
"lastName": "Gutkowski",
"departament": "Principal Mobility Designer"
},
{
"id": "2",
"createdAt": "2019-07-25T04:24:06.464Z",
"phone": "404-369-9359 x5603",
"phoneType": "Director",
"description": "haptic niches Rubber",
"firstName": "Scottie",
"lastName": "Yost",
"departament": "Central Optimization Technician"
},
]

3sp

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

Метод для создания комментария:
POST БАЗОВЫЙ_ПУТЬ/steps

Request body:

{
"createdAt": "2019-11-08T04:55:33.320Z", - текущая дата в ISO формате
"name": "Regional Response Facilitator", - lastname и firstname текущего пользователя
"comment": "interfaces Plastic", - сам комментарий
"isComment": true, - этот параметр всегда true для комментов
},
Остальные поля не нужны при создании нового комментария
Самые свежие комментарии должны быть вверху.

Ориентировочная картинка:

При отправке данных, появляется ошибка в консоли.
Cannot set property 'username' of null

Переносим хранение сообщений в стор.

Ключ для стора: comments

{
customerId: string
comments: CommentsInterface[]
}

Сейчас приложение очень простое:

• есть массив строк.

• поле для ввода нового текста и кнопка добавить.

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

• добавляться должны только не пустые строки.

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

Environment prod

Case:
Заходим на прод : https://app-verification.herokuapp.com, логинимся любыми кредами, и получаем CORS ошибку.

Actual result (AR)
Обрываются запросы из-за протокола http

Expected result (ER)
Приложение нормально работает и отображает информацию о клиенте.

Test data

Реализовать компонент который будет отображать комментарии как показано на скрине (обведено синим). Секция всегда будет находиться справа как на скрине в проекте.

Комментарии берем отсюда и фильтруем isComment = true:
GET http://5bfff0a00296210013dc7e82.mockapi.io/test/steps

Пример ответа:

[
  {
    "id": "1",
    "createdAt": "2019-04-23T18:44:04.861Z",
    "name": "Borders",
    "comment": "dynamic Intranet",
    "viewType": "viewType 1",
    "isComment": true
  },
  {
    "id": "2",
    "createdAt": "2019-04-24T16:30:08.787Z",
    "name": "indexing",
    "comment": "Savings Account",
    "viewType": "viewType 2",
    "isComment": true
  },
]

5-6 часов

Добавить на главный экран (main-page.component.ts) toolbar.
На картинке это горизонтальная темно серая полоса в верху.
у него должно быть 2 секции, меню слева, и информация о пользователе справа.

2 час

После того как мы получаем сообщения из стора,

Мы отправляем сообщение (это уже реализовано) если все хорошо, то шлем запрос на обновление Комментариев в сторе.
У вас должен быть метод которые берет данные от сервера, и кладет их в стор.

• fetchComments$ - просто получаем данные из бэка

• fetchAndSaveComments$ - дергаем fetchComments$ и в tap кладем в стор через saveToStore

• saveToStore - кладем данные в стор через диспатч

• getComments - возвращает данные из стора, их мы показываем через async пайп.