Vue column view

[hazadus]

ToDos:

• Lazy load TaskListTable, OptionsPanel.
• Попробовать vue-toast-notification.
• 7 Awesome Vue.js 3 Plugins and Libraries to know in 2023
• Tooltip Plugin
• Редактирование задач и комментариев админом.
• Комментарий выделить в отдельный компонент (done!)
• • удаление ("архивация") комментариев
• • редактирование комментариев
• • предпросмотр при редактировании (в табе)
• переделать API task_acquaint_api на метод POST
• редактирование текста задачи с markdown preview (tabs)
• редактирование заголовка задачи inline
• фильтр задач "только новые"
• Backend: передавать через API не весь список задач, а по фильтру отображения в Vue
• "save" opened task in localStorage
• Рассмотреть: колоночная верстка при помощи grid (refactor).

Вывод Vue для всех пользователей - доработать:

• Добавить краткую справку по Markdown в редакторе комментов (со ссылками на более полную инфу).
• Добавить справочную информацию к настройкам фильтрации.

Done:

• Добавить вывод бейджа с количеством "новых" задач (суммарно) напротив названия раздела.
• Слева над списком - общее количество задач с разбивкой (активные, завершенные, избранные)
• add comments (via DRF API)
• ознакомление (via DRF API)
• • API endpoint
• • button in column view
• В sidebar назвать раздел "Колонки" (с соотв. значком), добавить оранжевый бейдж "бета".
• В Vue поставить по умолчанию режим отображения "Колонки".
• Кнопку "Колонки"/"Таблица" в Vue переименовать (например, "Показать / скрыть содержание задачи", как-то так). Цвет сменить на синий.
• comments textbox height = number of lines in text (computed)
• comment markdown render preview
• DRF API endpoint for logged in user info

  90 :

• qty of comments in column task list
• component: star button
• • DRF API endpoint to toggle favorite status

Maybe:

• adjust font size with buttons

References

• Памятка markdown
• Adding Marked.js as global mixin to App
• Previous issue

[hazadus]

1-Line Layouts code

 <div class="parent">
    <header class="pink section">Header</header>
    <div class="left-side blue section" contenteditable>Left Sidebar</div>
    <main class="section coral" contenteditable> Main Content</main>
    <div class="right-side yellow section" contenteditable>Right Sidebar</div>
    <footer class="green section">Footer</footer>
</div>

.ex5 .parent {
    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto;
  }

  .ex5 header {
    padding: 2rem;
    grid-column: 1 / 4;
  }

  .ex5 .left-side {
    grid-column: 1 / 2;
  }

  .ex5 main {
    grid-column: 2 / 3;
  }

  .ex5 .right-side {
    grid-column: 3 / 4;
  }

  .ex5 footer {
    grid-column: 1 / 4;
  }