From cb9ede497df050804e9697283d7fc49ae4c1cd98 Mon Sep 17 00:00:00 2001
From: Cam Proudlock <cam.proudlock@gmail.com>
Date: Mon, 20 Jul 2026 11:14:20 -0400
Subject: [PATCH] Kiosk entry input, gage lab tag column, model image subpath
 fix

---
 frontend/src/views/print/AssetLabel.vue       |   3 +-
 frontend/src/views/print/MachineBadge.vue     |   2 +-
 frontend/src/views/settings/ModelsList.vue    |   3 +-
 plugins/computers/frontend/views/PCDetail.vue |   3 +-
 .../machines/frontend/views/MachineDetail.vue |   3 +-
 .../frontend/views/NetworkDeviceDetail.vue    |   3 +-
 .../frontend/views/PartsKiosk.vue             | 104 +++++++-----------
 .../printers/frontend/views/PrinterDetail.vue |   3 +-
 8 files changed, 52 insertions(+), 72 deletions(-)

diff --git a/frontend/src/views/print/AssetLabel.vue b/frontend/src/views/print/AssetLabel.vue
index 53760d4e..14604f9d 100644
--- a/frontend/src/views/print/AssetLabel.vue
+++ b/frontend/src/views/print/AssetLabel.vue
@@ -131,6 +131,7 @@ import { useRoute } from 'vue-router'
 import JsBarcode from 'jsbarcode'
 import { renderQrDataUrl } from './qrLogo'
 import { getSetting } from '@/utils/siteSettings'
+import { withBase } from '@/utils/basePath'
 import {
   TYPE_CONFIG, hasLocationType, resolveDefaultEncodes,
   effectiveEncodes as effEncodes, resolveCodeText as resolveText, captionFor,
@@ -171,7 +172,7 @@ const cardTitle = computed(() => {
 
 const imageUrl = computed(() => {
   const ext = extension.value
-  return (ext && ext.imageurl) ? ext.imageurl : null
+  return (ext && ext.imageurl) ? withBase(ext.imageurl) : null
 })
 
 // Small identity table shown on the card.
diff --git a/frontend/src/views/print/MachineBadge.vue b/frontend/src/views/print/MachineBadge.vue
index ddf0f860..49b6f5d2 100644
--- a/frontend/src/views/print/MachineBadge.vue
+++ b/frontend/src/views/print/MachineBadge.vue
@@ -54,7 +54,7 @@ const modelName = computed(() => {
 const imageUrl = computed(() => {
   if (!machine.value) return null
   const img = machine.value.machine?.imageurl
-  if (img) return img.startsWith('/') ? img : `/images/models/machines/${img}`
+  if (img) return withBase(img.startsWith('/') ? img : `/images/models/machines/${img}`)
   return null
 })
 
diff --git a/frontend/src/views/settings/ModelsList.vue b/frontend/src/views/settings/ModelsList.vue
index 73120510..82e60e5c 100644
--- a/frontend/src/views/settings/ModelsList.vue
+++ b/frontend/src/views/settings/ModelsList.vue
@@ -136,7 +136,7 @@
             <div class="form-group">
               <label>Image</label>
               <div class="image-manage">
-                <img v-if="form.imageurl" :src="form.imageurl" alt="Model image" class="image-thumb" />
+                <img v-if="form.imageurl" :src="withBase(form.imageurl)" alt="Model image" class="image-thumb" />
                 <div class="image-actions">
                   <template v-if="editingModel">
                     <input
@@ -209,6 +209,7 @@ import { modelsApi, vendorsApi, modeltypesApi } from '../../api'
 import PaginationBar from '../../components/PaginationBar.vue'
 import { useToast } from '../../composables/toast'
 import { apiError } from '../../utils/apiError'
+import { withBase } from '@/utils/basePath'
 import { useListQuery } from '@/composables/listQuery'
 const toast = useToast()
 
diff --git a/plugins/computers/frontend/views/PCDetail.vue b/plugins/computers/frontend/views/PCDetail.vue
index 365b11f9..173a4dc8 100644
--- a/plugins/computers/frontend/views/PCDetail.vue
+++ b/plugins/computers/frontend/views/PCDetail.vue
@@ -15,7 +15,7 @@
       <!-- Hero Section -->
       <div class="hero-card">
         <div class="hero-image" v-if="computer.computer?.imageurl">
-          <img :src="computer.computer.imageurl" :alt="computer.computer.modelname || 'Model photo'" />
+          <img :src="withBase(computer.computer.imageurl)" :alt="computer.computer.modelname || 'Model photo'" />
         </div>
         <div class="hero-content">
           <div class="hero-title">
@@ -241,6 +241,7 @@ import { ref, onMounted } from 'vue'
 import { colorStyle } from "@/utils/colorStyle"
 import { useRoute } from 'vue-router'
 import { computersApi, applicationsApi } from '@/api'
+import { withBase } from '@/utils/basePath'
 import { useWarrantyBadge } from '@/composables/warrantyBadge'
 import LocationMapTooltip from '@/components/LocationMapTooltip.vue'
 import CustomFieldsSection from '@/components/CustomFieldsSection.vue'
diff --git a/plugins/machines/frontend/views/MachineDetail.vue b/plugins/machines/frontend/views/MachineDetail.vue
index aa3841c6..16e3e104 100644
--- a/plugins/machines/frontend/views/MachineDetail.vue
+++ b/plugins/machines/frontend/views/MachineDetail.vue
@@ -32,7 +32,7 @@
       <!-- Hero Section -->
       <div class="hero-card">
         <div class="hero-image" v-if="machine.machine?.imageurl">
-          <img :src="machine.machine.imageurl" :alt="machine.machine.modelname || 'Model photo'" />
+          <img :src="withBase(machine.machine.imageurl)" :alt="machine.machine.modelname || 'Model photo'" />
         </div>
         <div class="hero-content">
           <div class="hero-title">
@@ -235,6 +235,7 @@
 import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { machinesApi } from '@/api'
+import { withBase } from '@/utils/basePath'
 import LocationMapTooltip from '@/components/LocationMapTooltip.vue'
 import CustomFieldsSection from '@/components/CustomFieldsSection.vue'
 import PluginAssetPanels from '@/components/PluginAssetPanels.vue'
diff --git a/plugins/network/frontend/views/NetworkDeviceDetail.vue b/plugins/network/frontend/views/NetworkDeviceDetail.vue
index a81b9285..9bc774a7 100644
--- a/plugins/network/frontend/views/NetworkDeviceDetail.vue
+++ b/plugins/network/frontend/views/NetworkDeviceDetail.vue
@@ -2,7 +2,7 @@
   <div class="detail-page" v-if="device">
     <div class="hero-card">
       <div class="hero-image">
-        <img v-if="device.networkdevice?.imageurl" :src="device.networkdevice.imageurl" alt="Model photo" />
+        <img v-if="device.networkdevice?.imageurl" :src="withBase(device.networkdevice.imageurl)" alt="Model photo" />
         <div class="device-icon" v-else>
           <span class="icon"><component :is="getDeviceIcon()" :size="24" /></span>
         </div>
@@ -202,6 +202,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { Network, Router, Shield, Wifi, Camera, Server, Server as Rack, Globe } from 'lucide-vue-next'
 import { useAuthStore } from '@/stores/auth'
 import { networkApi } from '@/api'
+import { withBase } from '@/utils/basePath'
 import AssetRelationships from '@/components/AssetRelationships.vue'
 import CustomFieldsSection from '@/components/CustomFieldsSection.vue'
 import PluginAssetPanels from '@/components/PluginAssetPanels.vue'
diff --git a/plugins/printedparts/frontend/views/PartsKiosk.vue b/plugins/printedparts/frontend/views/PartsKiosk.vue
index dcf49b36..af9ebc54 100644
--- a/plugins/printedparts/frontend/views/PartsKiosk.vue
+++ b/plugins/printedparts/frontend/views/PartsKiosk.vue
@@ -1,10 +1,5 @@
 <template>
-  <div class="parts-kiosk" @click="focusWedge">
-    <!-- keyboard-wedge scanners type the code + Enter into this hidden,
-         always-focused input; whichever step is active consumes the scan -->
-    <input ref="wedgeInput" v-model="wedgeBuffer" class="wedge-input"
-           autocomplete="off" @keydown.enter.prevent="onWedgeEnter" />
-
+  <div class="parts-kiosk" @click="focusEntry">
     <header class="kiosk-header">
       <h1>3D Printed Parts</h1>
       <button v-if="step !== 'item'" class="btn btn-secondary" @click="reset">
@@ -14,24 +9,22 @@
 
     <div v-if="error" class="kiosk-error">{{ error }}</div>
 
-    <!-- step 1: scan the bin -->
+    <!-- step 1: the bin label -->
     <section v-if="step === 'item'" class="kiosk-step">
       <p class="kiosk-prompt">Scan the barcode on the bin</p>
-      <p class="kiosk-hint">
-        No scanner?
-        <a href="#" @click.prevent="manualEntry = !manualEntry">Type the number</a>
-      </p>
-      <div v-if="manualEntry" class="entry-panel">
-        <div class="entry-display" :class="{ empty: !manualCode }">
-          {{ manualCode || 'label number' }}
-        </div>
+      <!-- one visible field: keyboard-wedge scanners, a plugged-in keyboard or
+           numpad, and the on-screen keypad all type into it. -->
+      <div class="entry-panel">
+        <input ref="entryInput" v-model="manualCode" class="entry-input"
+               inputmode="none" autocomplete="off" placeholder="label number"
+               @keydown.enter.prevent="lookupItem(manualCode)" />
         <TouchKeypad @digit="manualCode += $event"
                      @clear="manualCode = ''"
                      @backspace="manualCode = manualCode.slice(0, -1)" />
         <button class="btn btn-primary take-button" :disabled="!manualCode"
                 @click="lookupItem(manualCode)">Look up</button>
-        <p class="kiosk-hint">Just the number from the label; letters are
-          added automatically.</p>
+        <p class="kiosk-hint">Scan the label, type on a keyboard, or tap it in;
+          letters are added automatically.</p>
       </div>
     </section>
 
@@ -46,9 +39,9 @@
       </div>
       <p class="kiosk-prompt">Scan your badge or tap in your SSO</p>
       <div class="entry-panel">
-        <div class="entry-display" :class="{ empty: !manualBadge }">
-          {{ manualBadge || 'SSO' }}
-        </div>
+        <input ref="entryInput" v-model="manualBadge" class="entry-input"
+               inputmode="none" autocomplete="off" placeholder="SSO"
+               @keydown.enter.prevent="acceptBadge(manualBadge)" />
         <TouchKeypad @digit="manualBadge += $event"
                      @clear="manualBadge = ''"
                      @backspace="manualBadge = manualBadge.slice(0, -1)" />
@@ -68,9 +61,9 @@
       </div>
       <p class="kiosk-prompt">How many are you taking?</p>
       <div class="entry-panel">
-        <div class="entry-display" :class="{ empty: !quantity }">
-          {{ quantity || '0' }}
-        </div>
+        <input ref="entryInput" v-model="quantity" class="entry-input"
+               inputmode="none" autocomplete="off" placeholder="0"
+               @keydown.enter.prevent="submitTake" />
         <TouchKeypad @digit="quantity += $event"
                      @clear="quantity = ''"
                      @backspace="quantity = quantity.slice(0, -1)" />
@@ -90,7 +83,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { printedpartsApi } from '@/api'
 import { withBase } from '@/utils/basePath'
 import TouchKeypad from '@/components/TouchKeypad.vue'
@@ -102,47 +95,38 @@ const quantity = ref('')
 const error = ref('')
 const doneMessage = ref('')
 const submitting = ref(false)
-const manualEntry = ref(false)
 const manualCode = ref('')
 const manualBadge = ref('')
-const wedgeInput = ref(null)
-const wedgeBuffer = ref('')
+const entryInput = ref(null)
 let resetTimer = null
 
-onMounted(focusWedge)
+onMounted(focusEntry)
 onBeforeUnmount(() => clearTimeout(resetTimer))
 
-function focusWedge(event) {
-  // Tapping a visible input/button must keep it - only reclaim focus for
-  // the wedge scanner from dead space.
+function focusEntry(event) {
+  // Keep focus on the entry input so a wedge scanner or plugged-in keyboard
+  // always types into it. Only reclaim focus from dead space - never steal it
+  // mid-tap from a button or another control.
   const tag = event?.target?.tagName
   if (tag === 'INPUT' || tag === 'SELECT' || tag === 'TEXTAREA'
       || tag === 'BUTTON' || tag === 'A') return
-  wedgeInput.value?.focus()
-}
-
-function onWedgeEnter() {
-  const scanned = wedgeBuffer.value.trim()
-  wedgeBuffer.value = ''
-  if (!scanned) return
-  if (step.value === 'item') lookupItem(scanned)
-  else if (step.value === 'badge') acceptBadge(scanned)
+  nextTick(() => entryInput.value?.focus())
 }
 
 async function lookupItem(itemcode) {
   error.value = ''
-  if (!itemcode) return
+  const code = (itemcode || '').trim()
+  if (!code) return
   try {
-    const response = await printedpartsApi.kioskItem(itemcode.trim())
+    const response = await printedpartsApi.kioskItem(code)
     item.value = response.data.data
     step.value = 'badge'
-    manualEntry.value = false
     manualCode.value = ''
   } catch (lookupError) {
     error.value = lookupError.response?.data?.data?.error?.message ||
       'No part matches that barcode'
   }
-  focusWedge()
+  focusEntry()
 }
 
 function acceptBadge(value) {
@@ -152,10 +136,11 @@ function acceptBadge(value) {
   badge.value = scanned
   manualBadge.value = ''
   step.value = 'quantity'
-  focusWedge()
+  focusEntry()
 }
 
 async function submitTake() {
+  if (!quantity.value || submitting.value) return
   submitting.value = true
   error.value = ''
   try {
@@ -173,6 +158,7 @@ async function submitTake() {
     if (takeError.response?.status === 422) {
       // badge problem: go back a step so the next scan retries cleanly
       step.value = 'badge'
+      focusEntry()
     }
   } finally {
     submitting.value = false
@@ -185,9 +171,11 @@ function reset() {
   item.value = null
   badge.value = ''
   quantity.value = ''
+  manualCode.value = ''
+  manualBadge.value = ''
   error.value = ''
   doneMessage.value = ''
-  focusWedge()
+  focusEntry()
 }
 </script>
 
@@ -209,12 +197,6 @@ function reset() {
   justify-content: space-between;
   align-items: center;
 }
-.wedge-input {
-  position: absolute;
-  opacity: 0;
-  height: 1px;
-  width: 1px;
-}
 .kiosk-step {
   display: flex;
   flex-direction: column;
@@ -258,7 +240,7 @@ function reset() {
   border-radius: 1rem;
   padding: 1.5rem 2rem;
 }
-.entry-display {
+.entry-input {
   width: 16.9rem;
   box-sizing: border-box;
   font-size: 2.4rem;
@@ -269,15 +251,14 @@ function reset() {
   border: 1px solid var(--border);
   border-radius: 0.75rem;
   background: var(--bg);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  color: var(--text);
+  outline: none;
 }
-.entry-display.empty {
+.entry-input:focus { border-color: var(--primary); }
+.entry-input::placeholder {
   color: var(--text-light);
   font-weight: 400;
   font-size: 1.4rem;
-  line-height: 2.4rem;
 }
 .take-button {
   font-size: 1.4rem;
@@ -285,11 +266,4 @@ function reset() {
   width: 16.9rem;
   border-radius: 0.75rem;
 }
-.manual-row { display: flex; gap: 0.6rem; }
-.manual-block {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-}
 </style>
diff --git a/plugins/printers/frontend/views/PrinterDetail.vue b/plugins/printers/frontend/views/PrinterDetail.vue
index 544325ce..877d224c 100644
--- a/plugins/printers/frontend/views/PrinterDetail.vue
+++ b/plugins/printers/frontend/views/PrinterDetail.vue
@@ -20,7 +20,7 @@
       <!-- Hero Section -->
       <div class="hero-card">
         <div class="hero-image" v-if="printer.printer?.imageurl">
-          <img :src="printer.printer.imageurl" :alt="printer.printer.modelname || 'Model photo'" />
+          <img :src="withBase(printer.printer.imageurl)" :alt="printer.printer.modelname || 'Model photo'" />
         </div>
         <div class="hero-content">
           <div class="hero-title">
@@ -280,6 +280,7 @@
 import { ref, onMounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { printersApi } from '@/api'
+import { withBase } from '@/utils/basePath'
 import LocationMapTooltip from '@/components/LocationMapTooltip.vue'
 import CustomFieldsSection from '@/components/CustomFieldsSection.vue'
 import PluginAssetPanels from '@/components/PluginAssetPanels.vue'