Code Monkey home page Code Monkey logo

react-kanban-desk's Introduction

Kanban-доска

Интерфейс приложения

Imgur

На начальной странице находится два блока.

Первый блок, находится слева, в него помещено имя пользователя (in future: аватарка, настройки профиля)

Второй блок, расположен в правой части страницы, в нем находятся все, созданные пользователем доски.
В правом верхнем углу, на одном уровне с надписью находится кнопка «Создать»

Imgur

При нажатии на кнопку, открывается модальное окно, в котором находится форма создания новой доски.
Она состоит из следующих полей:

  • Название доски
  • Сокращенное название (обязательно в верхнем регистре)
  • Описание доски
  • [in future] доступ к доске
  • [in future] права доступа

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

Imgur Imgur

Внутри доска состоит из хедера и основного поля. В хедере находится кнопка «Назад», название доски и кнопка «Настройки»

Imgur

По нажатию на кнопку «Настройки», открывается страница настроек доски. Она содержит следующие пункты:

  • Название доски
  • Сокращенное название (Нельзя изменить)
  • Описание доски
  • Статусы для задач
  • [in future] Права доступа
  • [in future] Пригласить пользователя (ссылкой или по логину)

В основной части, находится кнопка «Создать колонку», по нажатию на которую будет создана колонка, где сверху можно вписать её название. В колонке появится кнопка «Создать задачу», при нажатии откроется модальное окно с формой создания задачи.

Imgur

Она состоит из следующих полей:

  • Название задачи
  • Описание задачи
  • [in future] Исполнитель задачи
  • [in future] Связывание нескольких задач

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

Imgur

В нем находится название и описание задачи. А так же:

  • Кнопка «Удалить задачу»
  • Селектор «Статус задачи» (Статусы добавляются в настройках доски)
  • Кнопки «Сохранить» и «Отмена» (Появляются при внесении изменений)
  • [in future] Создатель задачи
  • [in future] Исполнитель задачи
  • [in future] Комментарии к задаче

Поля «Название задачи» и «Описание» можно изменить по двойному клику на текст.

Список страниц:

[GET] / - (страница авторизации)
[GET] /tables/ - (главная страница, со списком таблиц)
[GET] /tables/:id/ - (страница с таблицей)
[GET] /tables/:id/settings/ - (страница настроек таблицы)
[in future][GET] /tables/:id/:task_id/ - (отдельная страница с задачей)

Модели данных в БД

type TaskStatus = {
    _id: string;
    title: string; // мб переделать на то, чтобы статусы выдавались автоматически. Имя колонки === Статус задачи. Но имя статуса можно было изменить и/или добавить/удалить статус.
}

type Task = {
    _id: string;
    table_id: string;
    title: string;
    description?: string;
    status: TaskStatus; // auto set by the column name
}

type Column = {
    _id: string;
    table_id: string;
    title: string;
}

type Table = {
    _id: string;
    user_id: string;
    title: string;
    shortName: string; // [A-Z]
    description?: string;
    taskStatuses?: TaskStatus[];
}

type User = {
    _id: string;
    name: string;
    email?: email;
}

Поля в БД

interface DBStructure {
    users: User[];
    tables: Table[];
    columns: Column[];
    tasks: Task[];
}

API

Основная ветка

[MAIN] /api/ - все данные из БД <DBStructure>

Ветка [users]

[POST] /api/users/ добавить нового пользователя <User>

[GET] /api/users/:user_id/ - пользователь по ID <User>
[PATCH] /api/users/:user_id/ - изменение параметров пользователя
[DELETE] /api/users/:user_id/ - удалить пользователя

Ветка [tables]

[POST] /api/tables/ - добавить новую таблицу <Table>

[PATCH] /api/tables/:table_id/ - изменение параметров таблицы
[DELETE] /api/tables/:table_id/ - удалить таблицу
[GET] /api/tables/?user_id= - таблицы по user ID Array<Table>

Ветка [columns]

[POST] /api/columns/ - добавить новую колонку <Column>

[PATCH] /api/columns/:column_id/ - изменение параметров колонки
[DELETE] /api/columns/:column_id/ - удалить колонку
[GET] /api/columns/?table_id= -  таблица по user ID Array<Column>

Ветка [tasks]

[POST] /api/tasks/ - добавить нувую задачу <Task>

[PATCH] /api/tasks/:task_id/ - изменение параметров задачи
[DELETE] /api/tasks/:task_id/ - удаленить задачу
[GET] /api/tasks/?table_id= - задачи по table ID Array<Task>

react-kanban-desk's People

Contributors

ryadik avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.