开源软件名称：

开源软件地址：

开源编程语言：

开源软件介绍：

Тестовое задание WG Forge Platform Front-End

Это стартовый проект для выполнения тестового задания программы WG Forge Platform Front-End, на основе которого вам нужно выполнять задание.

Подготовка

• ⚠️ Убедитесь, что в вашей системе установлен node.js последней стабильной версии - https://nodejs.org/en/
• Сделайте fork проекта; подробную информацию можно получить здесь: https://help.github.com/articles/about-forks/
• Склонируйте репозиторий своего форка:

git clone https://github.com/<username>/wg_forge_frontend.git

• Перейдите в корневую директорию проекта и установите зависимости командой (подробно об npm и зависимостях можно узнать на сайте: https://docs.npmjs.com/):

npm install

• Для запуска проекта выполните команду:

npm start

Задача:

Необходимо реализовать вывод в табличное представление данных o заказах, которые хранятся в файле orders.json, а также связаной информации о пользователе, которая хранится в файлах users.json и companies.json в директории data данного репозитория.

orders.json

В файле orders.json хранится сериализованный в JSON массив заказов, каждый из которых соответствует следующей схеме:

{
    "id": 11,   // порядковый номер записи
    "transaction_id": "8292e007-4682-idkfa-a404-eed9662fa5cc", // уникальный номер заказа
    "created_at": "1513808027", // временнáя метка создания заказа в формате unix
    "user_id": 15,  // идентификатор пользователя
    "total": "453.47", // общая сумма заказа в базовой валюте (USD)
    "card_type": "diners-club-carte-blanche", // тип карты оплаты
    "card_number": "30526651224733", // номер карты оплаты
    "order_country": "IS",  // страна, из которой сделан заказ
    "order_ip": "211.145.96.59" // IP-адрес пользователя, с которого сделан заказ
}

users.json

В файле user.json содержится сериализованный в JSON массив пользователей. Вот описание:

{
    "id": 15,
    "first_name": "Ivan",
    "last_name": "Ivanivanskiy",
    "gender": "Male",
    "birthday": "665366400",
    "avatar": "https://robohash.org/quibusdamminusea.bmp?size=100x100&set=set1",
    "company_id": 6
}

companies.json

И наконец, файл companies.json хранит сериализованный в JSON массив зарегистрированных компаний. Имеется следующая информация:

{
    "id": 6,
    "title": "Bumbershoot Corp.",
    "industry": "Apparel",
    "market_cap": "$36.6M",
    "sector": "Consumer Services",
    "url": "http://awesome.website"
}

⚠️ Обратите внимание, что некоторые поля у объектов user и company могут принимать значение null. ⚠️

Задание 1

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

<table>
    <thead>
        <tr>
            <th>Transaction ID</th>
            <th>User Info</th>
            <th>Order Date</th>
            <th>Order Amount</th>
            <th>Card Number</th>
            <th>Card Type</th>
            <th>Location</th>
        </tr>
    </thead>
    <tbody>
       ...тут будут данные о заказах...
    </tbody>
</table>

Для каждого заказа необходимо поместить соответствющие данные в строку в таблице. Каждый <tr> в html-таблице должен иметь id в заданном формате: order_%id_записи%. В ячейке User пока выводим только идентификатор пользователя. Дата создания заказа должна отображаться в формате DD/MM/YYYY hh:mm:ss. Номер карты необходимо экранировать так, чтобы на странице отображались только первые две и последние четыре цифры номера. Номер заказа и тип карты выводим как есть. Сумма заказа должна отображаться в денежном формате, валюта USD. В ячейке Location информация должна быть предоставлена в следующем формате: %order_country% (%order_ip%). Например:

<tr id="order_11">
    <td>8292e007-4682-idkfa-a404-eed9662fa5cc</td>
    <td class="user_data">15</td>
    <td>21/12/2017, 1:13:47 AM</td>
    <td>$453.47</td>
    <td>30********4733</td>
    <td>diners-club-carte-blanche</td>
    <td>IS (211.145.96.59)<td>
</tr>

Задание 2

Заполняем ячейку User Info. Для этого нам потребуется загрузить список пользователей из файла users.json и найти пользователя c id соответствующего order.user_id. Далее, необходимо сфомировать строку с обращением (Mr. если Male в поле Gender, иначе Ms.), именем и фамилией. Эта строка должна быть обернута в тег <a href="#">. Полученный результат помещаем в ячейку таблицы:

<tr id="order_11">
    ...
    <td class="user-data">
        <a href="#">Mr. Ivan Ivanivanskiy</a>
    </td>
    ...
</tr>

Задание 3

Дополним и немного оживим нашу таблицу. Добавим блок <div class="user-details">, в который поместим дополнительную информацию о пользователе и связаной с ним компании (если соответствующая информации имеется):

• Birthday: 01/02/1991
• элемент img с картинкой шириной не более 100px
• Company: Bumbershoot Corp.
• Industry: Apparel / Consumer Services

Для нашего примера это будет выглядеть так:

<tr id="order_11">
    ...
    <td class="user-data">
        <a href="#">Mr. Ivan Ivanivanskiy</a>

        <div class="user-details">
            <p>Birthday: 01/02/1991</p>
            <p><img src="" width="100px"></p>
            <p>Company: <a href="http://awesome.website">Bumbershoot Corp.</a></p>
            <p>Industry: Apparel / Consumer Services</p>
        </div>

    </td>
    ...
</tr>

Теперь необходимо добавить обработчик события "click", который будет показывать/скрывать блок div.user-details при нажатии на ссылку. Перехода по ссылке происходить не должно. Состояние по-умолчанию: блок с информацией должен быть скрыт.

• Если в данных представлена ссылка на изображение, то в таблице должна выводиться миниатюра изображения, а не сама ссылка (поле данных avatar).
• Для url полей данных должна выводится ссылка, по которой пользователь может совершить переход из таблицы.
• ⚠️ Любые ссылки на внешние ресурсы в нашем приложении должны открываться в новой вкладке или новом окне! ⚠️

Задание 4

Давайте добавим возможность сортировки таблицы. Помните заголовок thead нашей таблицы? Необходимо, чтобы при клике на ячейку заголовка (например, <thead>Order Amount</thead>) данные в таблице сортировались по соответствующему полю в порядке возрастания (для численных данных) или алфавитном (для текстовых данных). Стоит учесть, что некоторые столбцы отображают данные из нескольких полей объекта order и связаных с ним объектов user и company. В таком случае, при сортировке следуюет рукодствоваться следующими правилами:

Если таблица отсортирована по какому-либо столбцу, к соответствующей ячейке заголовка необходимо добавить тэг с символом, информирующем пользователя о текущем состоянии:

<span>&#8595;</span>

Например, в случае сортировки по Order Amount заголовок таблицы должен иметь следующую разметку:

<thead>
    <tr>
        <th>#</th>
        <th>User Info</th>
        <th>Order Date</th>
        <th>Order Amount <span>&#8595;</span></th>
        <th>Card Number</th>
        <th>Card Type</th>
        <th>Location</th>
    </tr>
</thead>

Кликабельные элементы заголовка таблицы при наведении на них должны менять тип курсора на указатель типа pointer (вроде этого,