Тестовое задание для фронт-енд разработчика в Conjoint.ly
Результатом данного задания должен быть vue-компонент (с сетью вложенных компонентов) в виде конструктора таблицы, который принимает на вход данные и отрисовывает конструктор-таблицу. Часть задания уже выполнена.
Name | Text | Image | Number | [Add column] |
---|---|---|---|---|
Name 1 | Raw description text | 42 | ||
Name 2 | Raw description text 2 | 21 | ||
Total | 63 [Sum] | |||
[Add row] |
- Убрать адаптивную верстку (сейчас, при ресайзинге таблица растягивается или сжимается)
- Первая колонка имеет название Name, она не может быть удалена и значения в ней должны быть уникальными
- Каждая колонка имеет один из типов данных:
- текст
- ссылка на картинку (url)
- число (double)
- дата
- процент
- JSON
- Формат отображения числа:
1,234,567.89
- Формат даты:
3 July 2020
. Для выбора какой-нибудь компонент date picker (из тех, что есть в свободном доступе) - Формат отображения JSON в самой таблице - просто кусочек красивого кода. Но при нажатии показывается модалка, где есть крaсиво раскрываемый объект с возможностью редактироования (типа https://github.com/yourtion/vue-json-ui-editor)
- При клике на ячейку в колонке, ячейка переходит в режим редактирования и пользователь может поменять ее значение. При потере фокуса происходит валидация значения по типу данных, если все ок, то режим редактирования отключается, иначе показывает ошибка
- В заголовке таблицы справа есть кнопка [Add column] - это кнопка-дропдаун с выбором типа значений колонки для добавления, выбрав тип, в конец таблицы добавляется новая колонка с пустыми ячейками.
- В первой колонке, в последней строчке, находится кнопка [Add row], которая добавляет новую строчку
- Предпоследняя строка таблицы идет Total, которая пока будет использоваться для колонки с числовым типом.
- [Sum] - это кнопка-дропдаун (sum по-умолчанию), который производит подсчеты значений в колонке с типом Число. Пока нужно реализовать следующие алгоритмы:
sum
(нужна мягкая валидация: сумма процентов не должна быть больше 100)mean
median
min
max
count
- Перетаскивание строк и столбцов
- Изменение ширины столбцов путём перетаскивания
- Add column заменить на иконочку аккуратную (см. https://fontawesome.com/icons)
- Надо сделать колл-беки для:
- Чтения данных из сервера или базы данных (при перезагрузке страницы данные берутся из БД)
- Записи данных яйчейки (чтобы каждое изменение таблицы на "горячую" сохранялось в БД)
- Изменение свойств, добавление или удаление строк и столбцов
- Описать как работать с колл-беками в
API.md
- Если не настроены колл-беки, сделать дефолтные, которые просто обращаются к БД (Vuex + localstorage)
- Подготовить для npm, чтобы можно было вставлять в разные проекты (см. как тут).
bootstrap-vue/nuxt
должно остаться в dependencies - Проверить работоспособность в Chrome на десктопе (но не обязательно пока в IE, Edge, Firefox, Safari и на мобильниках и на таблетках)
- Фреймворк Vue.js (https://vuejs.org/)
- CSS-фреймворк Bootstrap4 (https://bootstrap-vue.org/)
- Оплата за выполненое задание в размере 7 тыс. руб.
- Срок: максимум 7 дней с оговоренного начала выполнения задания
- Согласие на лицензию
# install dependencies
$ npm install # Or yarn install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm start
# generate static project
$ npm run generate
For detailed explanation on how things work, checkout the Nuxt.js docs.