# Frontend and CRUD Interactions

**Quick Summary:** Connect the backend to a user interface to display, create, update, and delete books using a store system and reusable components.

---

## 1. Main Page Structure

### Create the frontend page
1. Create a new page for the interface
2. Design: book list on the left, interactions on the right

### Configure the main container
1. Create a container block with styles:
   - **Display**: flex
   - **Gap**: random value (e.g., 12px)
   - **Align-items**: flex-start (top alignment)
   - **Width**: 100%
   - **Padding**: 12px

### Create the list container (booklist)
1. Add a block named **booklist** inside the container
2. Configure styles:
   - **Display**: grid
   - **Gap**: 2px
   - **Grid-template-columns**: 2 columns
   - **Width**: 50% (half the space)
   - **Height**: 100vh

## 2. BookInfo Component

### Create the base component
1. Create a new component named **book-info**
2. Define styles:
   - **Width**: 100%
   - **Height**: 80px
   - **Background**: use a token (e.g., background-lightest)
   - **Padding**: 12px
   - **Border-radius**: 8px

> If the component isn't visible, change preview mode from "Compact" to "Stretch"

### Add dynamic properties
1. Create two **custom text** elements in the component
2. First text: write `{title}`
   - Curly braces create a dynamic property (turns blue)
3. Second text: write `{author}`

### Configure component properties
1. Click on the **book-info** component
2. Define input properties:
   - **title** (string)
   - **author** (string)
   - **id** (string) - add for future interactions
3. Set default values for testing

### Link properties to texts
1. Click on the first custom text
2. Click the **lightning** icon (⚡)
3. Select the **title** property from the component
4. Repeat for **author**

### Style the title
1. Select the title's custom text
2. Modify styles:
   - **Font-size**: 24px
   - **Color**: content-deepest (for more contrast)

## 3. Store - Data Management

### Create the store
1. Create a new store named **book-store**
2. The store holds frontend data
3. Advantage: single database query, then data reuse

### Define the store schema
Create the following structure:
```
books (array of objects)
  ├─ id (string)
  ├─ author (string)
  └─ title (string)
```

## 4. Load Data on Mount

### Loading logic
1. Go to the page's **Logic** tab
2. Use the **onMounted** trigger (when page loads)

### Fetch the data
1. Pull an execution wire from onMounted
2. Call the **getbooks** route (created in previous episode)
3. The route returns a **response** with all data

### Update the store
1. Create a **get** node to retrieve **bookstore**
2. Create a **setproperty** node
3. Connect bookstore to **target**
4. Select the **books** property
5. Connect the **response** from getbooks to the books field
6. Connect the execution wire

> Test with Execute and Ctrl+Space: db-books data appears in the store

## 5. Display Books with Template

### Create the loop
1. In the page, delete test book-info components
2. Add a book-info component
3. Right-click on book-info → **Wrap a component**
4. Select **Template**
5. Change from **if** to **for** (to iterate)
6. Select **books** from the store

### Link dynamic data
1. Click on the book-info component in the template
2. Define properties:
   - **title**: click lightning → select **title** from template
   - **author**: click lightning → select **author** from template
   - **id**: click lightning → select **id** from template

> In Builder mode, set template to "All" to see all elements (instead of "Once")

## 6. Creation Pop-up

### Create the pop-up structure
1. Click **+** or type "pop-up" in search
2. Add a **block** in the pop-up containing:
   - Two **text input** elements
   - One **button**

### Style the pop-up
1. To visualize in development mode, force display in properties
2. Configure the block:
   - **Width**: 200px
   - **Display**: flex
   - **Flex-direction**: column
   - **Gap**: 12px
3. Configure the button:
   - **Width**: 100%
   - **Text**: "Create"

### Configure inputs
1. First input:
   - **Placeholder**: "book title"
2. Second input:
   - **Placeholder**: "author"

### Create page variables
1. In the page, add two variables:
   - **title** (string)
   - **author** (string)

### Link inputs to variables
1. First text input: select **model** → choose **title**
2. Second text input: select **model** → choose **author**

> Model creates a two-way binding between input and variable

## 7. Creation Logic

### Test value retrieval
1. On the Create button, add an **onClick** event
2. Create a **get title** and display in console
3. Test in preview: write in input → click Create → see value

### Call the creation route
1. Delete the console test
2. Pull a wire from onClick
3. Call the **createbooks** route
4. For the **body**:
   - Pull a wire → automatically create a **create object**
   - Connect **get title** to title field
   - Connect **get author** to author field

### Update the store
1. Create a **get bookstore**
2. Create a **setproperty**
3. Select **books**
4. Connect the **response** from createbooks

> The book is now added to the list!

## 8. Managing Pop-up Display

### Create the control variable
1. Add a **createBook** variable (boolean) in the page
2. On the pop-up, set the **model**: **createBook**
   - If createBook = true → pop-up visible
   - If createBook = false → pop-up hidden

### Open pop-up with + button
1. Create a **button** in the page
2. Configure the button:
   - **Icon**: plus
   - **Size**: large
   - **Shape**: round
3. Style with position:
   - **Position**: absolute
   - **Bottom**: 16px
   - **Right**: 16px
4. Add an **onClick** event
5. Create a **set createBook** → check (set to true)

### Close pop-up after creation
1. In the Create button logic
2. Add a **set createBook** → uncheck (set to false)
3. Place after store update

> Clicking outside the pop-up automatically closes it

## 9. Selected Book Display

### Add to store schema
Create a new object in **book-store**:
```
selectedBook (object)
  ├─ id (string)
  ├─ author (string)
  └─ title (string)
```

### Create the information container
1. Add a **bookinfo** block (different from component)
2. Place at top for clarity
3. Configure:
   - **Width**: 50%
4. Add:
   - One **custom text** for the title
   - One **block** with two icons

### Add action icons
1. First icon:
   - **Icon**: trash (delete)
   - **Size**: larger
   - **Color**: distinct color
   - **Cursor**: pointer
2. Second icon:
   - **Icon**: pencil (edit)
   - **Color**: different color
   - **Cursor**: pointer

### Selection logic in component
1. In the **book-info** component, add an **onClick** event on the container
2. Create a **get bookstore**
3. Create a **setproperty** → select **selectedBook**
4. Automatically create a **create object**
5. Connect properties:
   - **get id** → id
   - **get author** → author
   - **get title** → title

### Display selected title
1. In the bookinfo container's custom text
2. Write `{selectedTitle}` to create the property
3. Define **selectedTitle** = `bookstore.selectedBook.title`

> Clicking a book automatically updates the display

## 10. Deleting a Book

### Deletion logic
1. On the trash icon, add an **onClick** event
2. Call the **deletebook** route
3. Create a **create object** for the body:
   - **id**: retrieve with **get bookstore** → property **selectedBook.id**

### Update the store
1. Create a **setproperty** for **books**
2. Connect the **response**

### Reset selection
1. Create another **setproperty** for **selectedBook**
2. Don't connect anything (leave empty)
3. Reason: book no longer exists, clear selection

### Improvement with condition
1. Wrap the bookinfo container in a **template**
2. Use **if** logic
3. Condition: `bookstore.selectedBook.id` exists (not empty)
4. Uncheck to invert: display only if id exists

> After deletion, icons automatically disappear

## 11. Modifying a Book

### Create the modification pop-up
1. Copy the creation pop-up
2. Rename to "Modify" (and the other to "Create" to differentiate)
3. Change button text to "Modify"

### Create control variable
1. Add a **modifyBook** variable (boolean)
2. On the Modify pop-up, set the **model**: **modifyBook**

### Open pop-up and pre-fill
1. On the pencil icon, add an **onClick** event
2. Create a **set modifyBook** → true
3. Pre-fill inputs:
   - Create a **get bookstore**
   - Retrieve **selectedBook**
   - Create a **spread** to destructure
   - **set title** → connect title from spread
   - **set author** → connect author from spread

### Modification logic
1. On the Modify button, add an **onClick** event
2. Call the **updatebooks** route
3. Create the **body**:
   - **id**: retrieve from bookstore.selectedBook.id
   - **title**: **get title** (from variable)
   - **author**: **get author** (from variable)

### Update the store
1. **setproperty** for **books** → connect response
2. **setproperty** for **selectedBook** → connect body (to display new values)
3. **set modifyBook** → false (close pop-up)

## Summary of Key Concepts

| Concept | Usage |
|---------|-------|
| **Store** | Centralized frontend data storage |
| **Template (for)** | Iterate over an array to display multiple elements |
| **Template (if)** | Conditionally display elements |
| **Model** | Two-way binding between input and variable |
| **Get property** | Extract a property from an object |
| **Set property** | Modify a property of an object or store |
| **Spread** | Destructure all properties of an object |
| **Page variables** | Store temporary values (inputs, states) |
| **onMounted** | Execute code when page loads |

## Data Architecture

```
Page Variables
├─ title (string) - temporary input
├─ author (string) - temporary input
├─ createBook (boolean) - creation pop-up control
└─ modifyBook (boolean) - modification pop-up control

Book Store
├─ books (array) - complete list
└─ selectedBook (object) - currently selected book
```

## Practical Tips

- **Always name clearly** variables and components
- Use **"All" mode** in templates to see all elements in development
- **Test with Ctrl+Space** to visualize data at each step
- **Pop-ups automatically close** when clicking outside
- Use store **tokens** to access nested data
- **Reset selectedBook** after deletion to avoid errors
- **Model** creates two-way binding (input change = variable change)
- Remember to **close pop-ups** after actions (create/modify)
- Use **spread** to easily destructure complex objects

---