Working with Data

Creating a Note Management Application

In this article, we will discuss the creation of a simple note management application using @app/heap and UI components from the @app/ui library. The application allows users to create, view, toggle the status, and delete notes.

Key Steps

Importing Necessary Modules

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

At the beginning of the code, we import the necessary modules. Heap is used for database operations, while refresh, showTextDialog, and showContextMenu are UI components.

Creating the Notes Model

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

We create a Notes table with two fields: title: 'string' and completed: 'boolean'. This table will be used to store all notes.

Defining Routes

• Route for displaying the list of notes:

  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>
    )
  })
  

  This route is responsible for displaying notes in a list sorted by title in alphabetical order. Each note is a list item with an icon that depends on the note's status. Clicking on a note triggers toggleRoute, while right-clicking triggers menuRoute. In the footer of the screen, there is a button to create a new note, which opens a text input dialog.

• Route for creating a new note

  const createRoute = app.apiCall('/create', async(ctx,req) => {
    await Notes.create(ctx, {
      title: req.body.value,
      completed: false,
    })
    return refresh();
  });
  

  This route creates a new note with a title and a completion status of false. After creation, the screen is refreshed.

• Route for toggling the note's status

  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(); 
  })
  

  This route toggles the completion status of a note (true/false) and refreshes the screen.

• Route for displaying the context menu

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

  This route displays a context menu with an option to delete the note.

• Route for deleting a note

  const deleteRoute = app.apiCall('/delete/:id/submit', async(ctx,req) => {
    await Notes.delete(ctx,req.params.id)
    return refresh();
  })
  

  This route deletes a note and refreshes the screen.

Conclusion

We have discussed the creation of a simple note management application that includes basic CRUD (Create, Read, Update, Delete) operations. Using the @app/heap framework and UI components from the @app/ui library, we created an interactive interface for managing notes and hope this example helps in building your own applications.

Final Code