radislaw / vue-bootstrap-editable-table

A Vue Bootstrap component for editable tables

Разработка расширенного конструктора таблицы

Тестовое задание для фронт-енд разработчика в 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 дней с оговоренного начала выполнения задания
• Согласие на лицензию

Build Setup (уже готовой части проекта)

# 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.