Работа с данными

Создание приложения для управления заметками

В этой статье рассмотрим создание простого приложения для управления заметками с использованием @app/heap и компонентов UI из библиотеки @app/ui. Приложение позволяет пользователю создавать, просматривать, переключать состояние и удалять заметки.

Основные шаги

Импорт необходимых модулей

import {Heap} from '@app/heap'
import {refresh, showTextDialog, showContextMenu} from '@app/ui'

В начале кода мы импортируем необходимые модули. Heap используется для работы с базой данных, а refresh, showTextDialog и showContextMenu — это компоненты UI.

Создание модели заметок

const Notes = Heap.Table('note', {
  title: Heap.String(),
  completed: Heap.Boolean()
})

Создадим таблицу Notes с двумя полями: title: 'string' и completed: 'boolean'. Эта таблица будет использоваться для хранения всех заметок.

Определение маршрутов

Маршрут для отображения списка заметок:
```
app.screen('/', async (ctx, req) => {
  let notes = await Notes.findAll(ctx, { order: { title: 'asc'} });
  return (
    <screen title="Notes">
      {notes.map( note => 
        <list-item
          icon={{name: note.completed ? ['far','check-square'] : ['far','square']}}
          content={{title:note.title}}
          onClick={toggleRoute({id:note.id}).apiCall()}
          onContext={menuRoute({id:note.id}).apiCall()}
        />
      )}  
      <footer>
        <button 
          class={["section","primary"]}
          onClick={showTextDialog({
            title: "Enter note",
            submitUrl: createRoute.url()
          })}
        >
            Create note
          </button>
      </footer>
    </<screen>
  )
})
```
Этот маршрут отвечает за отображение заметок в списке, отсортированных по названию в алфавитном порядке. Каждая заметка является элементом списка с иконкой, которая зависит от статуса заметки. При клике на заметку вызывается toggleRoute, а при правом клике — menuRoute. В футере экрана находится кнопка для создания новой заметки, которая вызывает диалоговое окно ввода текста.
Маршрут для создания новой заметки
```
const createRoute = app.apiCall('/create', async(ctx,req) => {
  await Notes.create(ctx, {
    title: req.body.value,
    completed: false,
  })
  return refresh();
});
```
Этот маршрут создает новую заметку с заголовком и состоянием завершенности false. После создания происходит обновление экрана.

Маршрут для переключения состояния заметки

const toggleRoute = app.apiCall('/toggle/:id', async(ctx,req) => {
  let note = await Notes.getById(ctx,req.params.id)
  let newValue = ! note.completed;
  await Notes.update(ctx,{id: note.id, completed: newValue})
  return refresh(); 
})

Этот маршрут переключает состояние завершенности заметки (true/false) и обновляет экран.

Маршрут для отображения контекстного меню

const menuRoute = app.apiCall('/menu/:id', async(ctx,req) => {
  return showContextMenu([{
    title: 'Delete',
    onClick: deleteRoute({id: req.params.id}).apiCall({}, {confirm: 'Are you sure?'})
  }])
})

Этот маршрут отображает контекстное меню с опцией удаления заметки.

Маршрут для удаления заметки
```
const deleteRoute = app.apiCall('/delete/:id/submit', async(ctx,req) => {
  await Notes.delete(ctx,req.params.id)
  return refresh();
})
```
Этот маршрут удаляет заметку и обновляет экран.

Заключение

Мы рассмотрели создание простого приложения для управления заметками, которое включает основные операции CRUD (создание, чтение, обновление и удаление). Используя фреймворк @app/heap и компоненты UI из библиотеки @app/ui, создали интерактивный интерфейс для работы с заметками и надеемся, что данный пример поможет в создании собственных приложений.

Итоговый код

Предложить изменения