Pick a network device's map position, and stop hardcoding one site's label prefix

Two things a second site ran into.

The network device form asked for the map position as two raw numbers, so
placing a device meant reading coordinates off another screen and typing them
in. Machines, PCs and printers have had a "Set Location on Map" picker all
along, and the network API already accepted mapx and mapy - only the form was
missing. Same picker, same modal.

The 3D parts kiosk hardcoded 'WJ' as the prefix shown before the number box,
with a comment inviting whoever needed something else to edit the source. That
is West Jefferson's gage-lab tag format and nobody else's, so another site's
operators were told to expect letters that are not on their labels.

It is now printedparts_label_prefix, set in Settings, defaulting to EMPTY - a
site that has not set one sees no prefix rather than inheriting another site's
convention. West Jefferson sets it to WJ once. The kiosk hides the prefix
entirely when unset and falls back to no prefix if the setting cannot be read,
because a cosmetic hint must never stop a kiosk working.

Not to be confused with printedparts_code_prefix, which mints item codes like
3DP0042 and was already configurable. That is the code we generate; this is the
tag already printed on the label.

plugins/network/frontend/views/NetworkDeviceForm.vue

@@ -205,30 +205,41 @@
         <!-- Map Position (optional) -->
         <fieldset>
           <legend>Map Position (Optional)</legend>
-          <div class="form-row">
-            <div class="form-group">
-              <label for="mapx">Map X Position</label>
-              <input
-                id="mapx"
-                v-model.number="form.mapx"
-                type="number"
-                class="form-control"
-                min="0"
-              />
-            </div>
-            <div class="form-group">
-              <label for="mapy">Map Y Position</label>
-              <input
-                id="mapy"
-                v-model.number="form.mapy"
-                type="number"
-                class="form-control"
-                min="0"
-              />
+          <!--
+            Picked on the floor plan, the same way machines, PCs and printers do
+            it. This form used to ask for the X and Y as raw numbers, which meant
+            reading coordinates off another screen and typing them in.
+          -->
+          <div class="form-group">
+            <label>Map Location</label>
+            <div class="map-location-control">
+              <div v-if="form.mapx !== null && form.mapy !== null" class="current-position">
+                Position: {{ form.mapx }}, {{ form.mapy }}
+                <button type="button" class="btn btn-sm btn-secondary" @click="clearMapPosition">Clear</button>
+              </div>
+              <button type="button" class="btn btn-secondary" @click="showMapPicker = true">
+                Set Location on Map
+              </button>
             </div>
           </div>
         </fieldset>
 
+        <!-- Map Picker Modal -->
+        <Modal v-model="showMapPicker" title="Select Location on Map" size="fullscreen">
+          <div class="map-modal-content">
+            <ShopFloorMap
+              :pickerMode="true"
+              :initialPosition="form.mapx !== null ? { left: form.mapx, top: form.mapy } : null"
+              :theme="currentTheme"
+              @positionPicked="handlePositionPicked"
+            />
+          </div>
+          <template #footer>
+            <button class="btn btn-secondary" @click="showMapPicker = false">Cancel</button>
+            <button class="btn btn-primary" @click="confirmMapPosition">Confirm Location</button>
+          </template>
+        </Modal>
+
         <!-- Notes -->
         <fieldset>
           <legend>Notes</legend>
@@ -274,11 +285,16 @@ import {
   businessunitsApi
 } from '@/api'
 import CustomFieldsInputs from '@/components/CustomFieldsInputs.vue'
+import ShopFloorMap from '@/components/ShopFloorMap.vue'
+import Modal from '@/components/Modal.vue'
+import { currentTheme } from '@/stores/theme'
 import { useIdentifierFlags } from '@/composables/identifierSettings'
 import { apiError } from '@/utils/apiError'
 
 const { isEnabled } = useIdentifierFlags()
 
+const showMapPicker = ref(false)
+const tempMapPosition = ref(null)
 const route = useRoute()
 const router = useRouter()
 
@@ -483,6 +499,24 @@ function cancel() {
     router.push('/network')
   }
 }
+function handlePositionPicked(position) {
+  tempMapPosition.value = position
+}
+
+function confirmMapPosition() {
+  if (tempMapPosition.value) {
+    form.value.mapx = tempMapPosition.value.left
+    form.value.mapy = tempMapPosition.value.top
+  }
+  showMapPicker.value = false
+}
+
+function clearMapPosition() {
+  form.value.mapx = null
+  form.value.mapy = null
+  tempMapPosition.value = null
+}
+
 </script>
 
 <style scoped>