64 lines
2.5 KiB
Markdown
64 lines
2.5 KiB
Markdown
---
|
||
task: Add "Open POS" button in PosAccessKeys.vue that opens the POS main page in a new tab
|
||
cycles: 5
|
||
context: true
|
||
private: false
|
||
started: 2026-05-16T08:38:57Z
|
||
finished: 2026-05-16T08:39:10Z
|
||
---
|
||
|
||
## files
|
||
- resources/js/Pages/PosAccessKeys.vue [lines 275-289] — contains the action button group (Copy Key, Copy URL, QR Code, Share) per access key row
|
||
|
||
## steps
|
||
1. In `PosAccessKeys.vue` at the button group (line ~283, after the QR code button and before the Share button), add a new `<button>` that calls `openPosInNewTab(key.access_key)`.
|
||
2. Add the `openPosInNewTab(accessKey)` method to the `<script setup>` block (after `shareKey`, around line 161). It should call `window.open(getPosUrl(accessKey), '_blank')`.
|
||
|
||
## context
|
||
|
||
Existing button group in template (lines 275–289):
|
||
```html
|
||
<div class="d-flex align-items-center gap-2">
|
||
<code class="bg-light px-2 py-1 rounded small">{{ key.access_key }}</code>
|
||
<button @click="copyToClipboard(key.access_key)" class="btn btn-sm btn-link p-0 text-muted" title="Copy Key">
|
||
<i class="far fa-copy"></i>
|
||
</button>
|
||
<button @click="copyToClipboard(getPosUrl(key.access_key))" class="btn btn-sm btn-link p-0 text-muted" title="Copy POS URL">
|
||
<i class="fas fa-link"></i>
|
||
</button>
|
||
<button @click="showQrCode(key.access_key)" class="btn btn-sm btn-link p-0 text-muted" title="View QR Code">
|
||
<i class="fas fa-qrcode"></i>
|
||
</button>
|
||
<button v-if="canShare" @click="shareKey(key.access_key, key.name)" class="btn btn-sm btn-link p-0 text-muted" title="Share via Protocol">
|
||
<i class="fas fa-share-alt"></i>
|
||
</button>
|
||
</div>
|
||
```
|
||
|
||
`getPosUrl` (line 138–141):
|
||
```js
|
||
const getPosUrl = (accessKey) => {
|
||
const baseUrl = window.location.origin;
|
||
return `${baseUrl}/pos?key=${accessKey}`;
|
||
};
|
||
```
|
||
|
||
New method to add after `shareKey` (line ~161):
|
||
```js
|
||
const openPosInNewTab = (accessKey) => {
|
||
window.open(getPosUrl(accessKey), '_blank');
|
||
};
|
||
```
|
||
|
||
New button to insert after the QR code button, before the Share button:
|
||
```html
|
||
<button @click="openPosInNewTab(key.access_key)" class="btn btn-sm btn-link p-0 text-muted" title="Open POS Terminal">
|
||
<i class="fas fa-external-link-alt"></i>
|
||
</button>
|
||
```
|
||
|
||
## notes
|
||
- dictionary: ai-docs/dictionary.md
|
||
- linters: none detected
|
||
- constraints: No backend changes needed — URL is already constructed by existing `getPosUrl` helper. Button must match the existing style (btn-sm btn-link p-0 text-muted). No new permissions required — this is a client-side navigation action.
|