This commit introduces two key improvements to the items table. A sticky header and max-height are added for better
usability on long lists. The global search is enhanced to allow filtering by brand and tags. This is achieved by adding
a hidden column for the brand and using an accessorFn to convert the tags array into a searchable string.
This commit introduces an optional 'brand' field to the item model, allowing for better organization and
differentiation.
- The Add/Edit modal now includes a form field to select or create a brand.
- The item list on the main page now displays the brand next to the item name.
- Name uniqueness validation is now brand-aware. An item name must be unique within the context of its brand.
- The `addItem` logic is centralized in the `useItemsStore` to handle ID and timestamp generation.
The UTable component was not reliably updating when items were added, edited, or removed due to a reactivity issue. This commit resolves the problem by forcing the table to re-render when its data source
changes.
- A `watch` with `{ deep: true }` is now used to monitor the `items` array for any changes.
- A `tableKey` is incremented on each change and passed as a `:key` to `UTable`, triggering a re-mount.
Additionally, data handling has been made more robust:
- The localStorage serializer now gracefully handles parsing errors and ensures data integrity for dates and tags.
- Added null-safe access for tags in the table template to prevent rendering errors.
This commit introduces the capability to edit existing items. The `ItemEditModal` has been refactored to support both creation and editing modes.
- The modal UI (title, buttons) and submission logic now adapt based on whether an item is being added or edited.
- A new `editItem` function is added to the `useItemsStore` to handle the update logic.
- Form validation for the item name is enhanced to correctly check for uniqueness during edits.
- The table's row action menu now opens the modal in edit mode, pre-populating the form.
- The `latestId` generation logic is improved for robustness.
- Additionally, this commit adds row selection checkboxes to the items table.
This commit introduces the ability to delete items. A new `ItemDeleteModal` component provides a confirmation step
before removal.
- Adds a 'Delete' option to the action menu in the items table.
- Refactors the `useItems` composable to ensure reactivity with `useLocalStorage` by creating new array references on
add/remove operations.
- Renames `AddModal` to `EditModal` to better align with its future role in both adding and editing items.
This commit introduces the foundational structure and core features for the item management application.
Key features implemented:
- **Item Listing:** A main page displaying all items in a searchable UTable.
- **Item Creation:** An "Add Item" modal with a UForm for input and validation using Zod.
- **State Management:** A `useItemsStore` composable built with `@vueuse/core`'s `useLocalStorage` to persist item data
in the browser.
- **UI Framework:** Integrated Nuxt UI for components like tables, modals, forms, and the overall layout.
- **Application Shell:** Established a default layout with a header, navigation menu, and placeholders for Export and
History pages.
- **Project Setup:** Configured pnpm workspace, Tailwind CSS, and VSCode editor settings for an improved development
experience.
This commit introduces the initial prototype for an item database and build list tool. It establishes the foundational
structure and core features of the application.
Key components included:
- **Documentation:** Initial design, interaction, and project structure documents (`design.md`, `interaction.md`,
`outline.md`).
- **Core Pages:**
- `index.html`: Item management with CRUD operations.
- `export.html`: CSV export configuration with drag-and-drop sorting.
- `history.html`: Price history visualization with ECharts.
- **Logic:** `main.js` and page-specific scripts handle client-side logic, including data management with
`localStorage`, UI interactions, and animations.
- **Features:** Implements core functionalities such as item creation, editing, deletion, data backup/restore, and
sample data loading.
