User Story 12: Packing List ADD

[AnnaD91]

Value proposition

As a travel enthusiast I want to add items to the packing list so that I can efficiently plan my trip more in detail and i know what to pack for my trip.

Description

Acceptance criteria

• [ ] On the details page is a button that opens the packing list page
  • [ ] if there is no item in the list, the following message will be displayed in the center of the display "Add your first item!" with a button beneath
  • [ ] if there are already items planned, the button will be found in the center on the bottom of the display
• [ ] If the user clicks on the button
  • [ ] A styled input field appears beneath the last item on the display where the user can type in a new item in form of a text
• [ ] If there aren't any items, the input field appears at the very top
• [ ] The right hand side of the input fields contains two buttons, one with a cancel icon and one with a save icon
• [ ] If the user wants to add the item they click on the save button and the entry will be added to the end of the items list
• [ ] If the user clicks on the cancel button the action will be aborted and the item field disappears without adding the item
• [ ] The user can't submit an empty form, if the user tries to submit an empty form, he receives the default message of the form element that this field is required

Tasks

• [ ] Create a feature branch 'feat/create-packing-list'
• [ ] Create new Schema and new collection at MongoDB that contains all packing list Items
• [ ] Create the 'PackingList' page pages/PackingList/index.js that renders multiple components - ItemCards, ItemList, button addItem, FormAddItemForm and contains the state [isAddItemMode, setIsAddItemMode] = useState(false)
• [ ] Create ItemCard component that renders the item and a checkbox to check and uncheck, a delete button
• [ ] Create ItemList component that maps over all items in the packing list collection and renders the ItemCardsaccordingly
• [ ] Create a 'AddItem' component that sets the isAddItemMode to true if it's clicked
• [ ] Create AddItemForm component that contains
  • [ ] input field: type="text" required maxlength="50" minlength="2"
  • [ ] submit button with a save icon, if clicked sets isAddItemMode to false
  • [ ] cancel button with a cancel icon, if clicked sets isAddItemMode to false
• [ ] If isAddItemMode is true show the AddItemForm component, if it's false set it to hidden
• [ ] If the user clicks on the submit button, a new Item is created and will be rendered in the list
• [ ] If the user clicks on the cancel button, the form hides and the item will not be created
• [ ] Define a POST API route in a new page api/items/index.js
• [ ] Connect a handler function which uses this API route

MongoDB Schema

import mongoose from "mongoose";

const { Schema } = mongoose;

const itemSchema = new Schema({
  item: { type: String, required: true },
});

const Item = mongoose.models?.Item || mongoose.model("Item", itemSchema);

export default Item;

[miriam-ertl]

Excellent, everything is clear VP, AC and Tasks.★★★★★