Add Create Item button on location page

[mesab0ogie]

What type of PR is this?

• Feature

Which issue(s) this PR fixes

• Fixes: N/A

Summary

• Add a “Create Item” action on the location detail page
• Opens the existing Create Item modal and auto-selects the current location

Why

Creating an item from a location currently requires creating it elsewhere and assigning the location afterward. This adds a direct, intuitive entry point when viewing a location.

Testing

• Not run (UI change only)

Screenshots

Summary by CodeRabbit

• New Features
  • Added a header action to create new items from the location view: a plus icon with a localized title that opens the Create Item dialog.
  • The new button appears alongside existing header controls and includes a small layout adjustment for consistent alignment.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Added an MdiPlus icon import, introduced openCreateItem() to open the CreateItem dialog, and added a Create Item action button in the location header that invokes this function and shows a localized plus-icon label.

Changes

Cohort / File(s)	Summary
Location Header Create Button frontend/pages/location/[id].vue	Imported MdiPlus; added openCreateItem() to open the CreateItem dialog; inserted a Create Item action button in the location header (plus icon, localized title); minor layout adjustment to place the button near existing controls.

Estimated Code Review Effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• Add Create Item button on location page #1189 — Appears to modify the same file and introduce the same MdiPlus import, openCreateItem() function, and Create Item button (likely the same change).

Security Recommendations

• Authorization Validation: Ensure the CreateItem dialog and backend endpoint enforce permission checks for creating items in the given location.
• Input Sanitization: Validate and sanitize all form inputs from the CreateItem dialog to prevent XSS and injection vulnerabilities.
• CSRF Protection: Confirm form submissions include valid CSRF tokens and server-side validation.
• Rate Limiting: Apply rate limits or abuse controls on item creation endpoints to mitigate automated or excessive submissions.
• Client-side UI Visibility: Verify the UI control is shown/hidden based on the user's authorized capabilities to avoid misleading affordances.

Poem

A tiny plus with promise bright,
Appears upon the header's light,
One click and dialogs open wide,
New items start their hopeful ride — ✨🚀

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and clearly describes the main change—adding a Create Item button to the location page.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The PR description covers the type (Feature), identifies it as N/A for issue fixes, provides clear summary and motivation, includes testing notes, and adds visual context with screenshots.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

frontend/pages/location/[id].vue (1)

227-230: LGTM!

The button implementation follows the existing patterns in the codebase. The translation key is properly used, and the UI integration looks clean.

Note: The name attribute on the icon component (line 228) is consistent with other buttons but likely redundant for unplugin-icons components. This is purely a nitpick and matches the existing code style.

📜 Review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e4aa38b and d245375.

📒 Files selected for processing (1)

• frontend/pages/location/[id].vue

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,vue}

⚙️ CodeRabbit configuration file

**/*.{ts,vue}: Check for hardcoded strings in UI components that should be translatable.
Look for:

• String literals in Vue components (e.g. Click me)
• Alert messages, error messages, and user-facing text
• Placeholder text and labels

Files:

• frontend/pages/location/[id].vue

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)

• GitHub Check: build (linux/amd64, ubuntu-latest)
• GitHub Check: build (linux/arm64, ubuntu-24.04-arm)
• GitHub Check: End-to-End Playwright Tests / E2E Playwright Testing 4/4
• GitHub Check: End-to-End Playwright Tests / E2E Playwright Testing 2/4
• GitHub Check: build (linux/arm64, ubuntu-24.04-arm)
• GitHub Check: build (linux/amd64, ubuntu-latest)
• GitHub Check: build (linux/arm64, ubuntu-24.04-arm)
• GitHub Check: build (linux/amd64, ubuntu-latest)

🔇 Additional comments (2)

frontend/pages/location/[id].vue (2)

8-8: LGTM!

The icon import follows the established pattern and is properly used in the template below.

---

101-103: The location is correctly auto-selected via route context.

The CreateItem dialog doesn't need location passed as a parameter. Instead, it reads the locationId from the route params (line 335-340) and the LocationSelector component (line 43) automatically selects the current location based on this value. When a user opens this dialog from /location/[id], the modal correctly auto-selects that location.

Verify that location selection respects user authorization at the API level when the item is created.

[tonyaellie]

Sorry for the delay in getting to this.

This looks good to me, I just think the buttons, create item, edit and delete should collapse to be just icons on mobile, similar to the items page.