shopdb-flask/frontend/src/views/pcs/PCForm.vue

<template>
  <div>
    <div class="page-header">
      <h2>{{ isEdit ? 'Edit PC' : 'New PC' }}</h2>
    </div>

    <div class="card">
      <div v-if="loading" class="loading">Loading...</div>

      <form v-else @submit.prevent="savePC">
        <div class="form-row">
          <div class="form-group">
            <label for="machinenumber">PC Number *</label>
            <input
              id="machinenumber"
              v-model="form.machinenumber"
              type="text"
              class="form-control"
              required
            />
          </div>

          <div class="form-group">
            <label for="alias">Alias</label>
            <input
              id="alias"
              v-model="form.alias"
              type="text"
              class="form-control"
            />
          </div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label for="hostname">Hostname</label>
            <input
              id="hostname"
              v-model="form.hostname"
              type="text"
              class="form-control"
            />
          </div>

          <div class="form-group">
            <label for="serialnumber">Serial Number</label>
            <input
              id="serialnumber"
              v-model="form.serialnumber"
              type="text"
              class="form-control"
            />
          </div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label for="machinetypeid">PC Type *</label>
            <select
              id="machinetypeid"
              v-model="form.machinetypeid"
              class="form-control"
              required
              @change="form.modelnumberid = ''"
            >
              <option value="">Select type...</option>
              <option
                v-for="pt in pcTypes"
                :key="pt.machinetypeid"
                :value="pt.machinetypeid"
              >
                {{ pt.machinetype }}
              </option>
            </select>
          </div>

          <div class="form-group">
            <label for="osid">Operating System</label>
            <select
              id="osid"
              v-model="form.osid"
              class="form-control"
            >
              <option value="">Select OS...</option>
              <option
                v-for="os in operatingsystems"
                :key="os.osid"
                :value="os.osid"
              >
                {{ os.osname }}
              </option>
            </select>
          </div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label for="statusid">Status</label>
            <select
              id="statusid"
              v-model="form.statusid"
              class="form-control"
            >
              <option value="">Select status...</option>
              <option
                v-for="s in statuses"
                :key="s.statusid"
                :value="s.statusid"
              >
                {{ s.status }}
              </option>
            </select>
          </div>

          <div class="form-group">
            <label for="locationid">Location</label>
            <select
              id="locationid"
              v-model="form.locationid"
              class="form-control"
            >
              <option value="">Select location...</option>
              <option
                v-for="l in locations"
                :key="l.locationid"
                :value="l.locationid"
              >
                {{ l.location }}
              </option>
            </select>
          </div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label for="vendorid">Vendor</label>
            <select
              id="vendorid"
              v-model="form.vendorid"
              class="form-control"
              @change="form.modelnumberid = ''"
            >
              <option value="">Select vendor...</option>
              <option
                v-for="v in vendors"
                :key="v.vendorid"
                :value="v.vendorid"
              >
                {{ v.vendor }}
              </option>
            </select>
          </div>

          <div class="form-group">
            <label for="modelnumberid">Model</label>
            <select
              id="modelnumberid"
              v-model="form.modelnumberid"
              class="form-control"
            >
              <option value="">Select model...</option>
              <option
                v-for="m in filteredModels"
                :key="m.modelnumberid"
                :value="m.modelnumberid"
              >
                {{ m.modelnumber }}
              </option>
            </select>
            <small v-if="!form.vendorid && !form.machinetypeid" class="form-hint">
              Select vendor or PC type to filter models
            </small>
          </div>
        </div>

        <!-- PC-specific fields -->
        <h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Network Settings</h4>

        <div class="form-row">
          <div class="form-group">
            <label for="ipaddress">IP Address</label>
            <input
              id="ipaddress"
              v-model="form.ipaddress"
              type="text"
              class="form-control"
              placeholder="e.g., 192.168.1.100"
            />
          </div>

          <div class="form-group">
            <label for="loggedinuser">Logged In User</label>
            <input
              id="loggedinuser"
              v-model="form.loggedinuser"
              type="text"
              class="form-control"
            />
          </div>
        </div>

        <div class="form-row">
          <div class="form-group" style="display: flex; align-items: flex-end; gap: 1.5rem;">
            <label style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
              <input type="checkbox" v-model="form.isvnc" />
              VNC Enabled
            </label>
            <label style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
              <input type="checkbox" v-model="form.iswinrm" />
              WinRM Enabled
            </label>
          </div>
        </div>

        <div class="form-group">
          <label for="notes">Notes</label>
          <textarea
            id="notes"
            v-model="form.notes"
            class="form-control"
            rows="3"
          ></textarea>
        </div>

        <!-- Map Location Picker -->
        <div class="form-group">
          <label>Map Location</label>
          <div class="map-location-control">
            <div v-if="form.mapleft !== null && form.maptop !== null" class="current-position">
              Position: {{ form.mapleft }}, {{ form.maptop }}
              <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>

        <!-- Map Picker Modal -->
        <Modal v-model="showMapPicker" title="Select Location on Map" size="fullscreen">
          <div class="map-modal-content">
            <ShopFloorMap
              :pickerMode="true"
              :initialPosition="form.mapleft !== null ? { left: form.mapleft, top: form.maptop } : 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>

        <div v-if="error" class="error-message">{{ error }}</div>

        <div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
          <button type="submit" class="btn btn-primary" :disabled="saving">
            {{ saving ? 'Saving...' : 'Save PC' }}
          </button>
          <router-link to="/pcs" class="btn btn-secondary">Cancel</router-link>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { machinesApi, machinetypesApi, statusesApi, vendorsApi, locationsApi, modelsApi, operatingsystemsApi } from '../../api'
import ShopFloorMap from '../../components/ShopFloorMap.vue'
import Modal from '../../components/Modal.vue'
import { currentTheme } from '../../stores/theme'

const route = useRoute()
const router = useRouter()

const isEdit = computed(() => !!route.params.id)

const loading = ref(true)
const saving = ref(false)
const error = ref('')
const showMapPicker = ref(false)
const tempMapPosition = ref(null)

const form = ref({
  machinenumber: '',
  alias: '',
  hostname: '',
  serialnumber: '',
  machinetypeid: '',
  statusid: '',
  vendorid: '',
  modelnumberid: '',
  locationid: '',
  osid: '',
  loggedinuser: '',
  isvnc: false,
  iswinrm: false,
  notes: '',
  mapleft: null,
  maptop: null,
  ipaddress: ''
})

const pcTypes = ref([])
const statuses = ref([])
const vendors = ref([])
const models = ref([])
const locations = ref([])
const operatingsystems = ref([])

// Filter models by selected vendor and PC type
const filteredModels = computed(() => {
  return models.value.filter(m => {
    if (form.value.vendorid && m.vendorid !== form.value.vendorid) {
      return false
    }
    if (form.value.machinetypeid && m.machinetypeid !== form.value.machinetypeid) {
      return false
    }
    return true
  })
})

onMounted(async () => {
  try {
    // Load reference data
    const [ptRes, statusRes, vendorRes, modelsRes, locRes, osRes] = await Promise.all([
      machinetypesApi.list({ category: 'PC' }),
      statusesApi.list(),
      vendorsApi.list(),
      modelsApi.list(),
      locationsApi.list(),
      operatingsystemsApi.list()
    ])

    pcTypes.value = ptRes.data.data || []
    statuses.value = statusRes.data.data || []
    vendors.value = vendorRes.data.data || []
    models.value = modelsRes.data.data || []
    locations.value = locRes.data.data || []
    operatingsystems.value = osRes.data.data || []

    // Load PC if editing
    if (isEdit.value) {
      const response = await machinesApi.get(route.params.id)
      const pc = response.data.data

      // Get IP from communications
      const primaryComm = pc.communications?.find(c => c.isprimary) || pc.communications?.[0]

      form.value = {
        machinenumber: pc.machinenumber || '',
        alias: pc.alias || '',
        hostname: pc.hostname || '',
        serialnumber: pc.serialnumber || '',
        machinetypeid: pc.machinetype?.machinetypeid || '',
        statusid: pc.status?.statusid || '',
        vendorid: pc.vendor?.vendorid || '',
        modelnumberid: pc.model?.modelnumberid || '',
        locationid: pc.location?.locationid || '',
        osid: pc.operatingsystem?.osid || '',
        loggedinuser: pc.loggedinuser || '',
        isvnc: pc.isvnc || false,
        iswinrm: pc.iswinrm || false,
        notes: pc.notes || '',
        mapleft: pc.mapleft ?? null,
        maptop: pc.maptop ?? null,
        ipaddress: primaryComm?.ipaddress || ''
      }
    }
  } catch (err) {
    console.error('Error loading data:', err)
    error.value = 'Failed to load data'
  } finally {
    loading.value = false
  }
})

function handlePositionPicked(position) {
  tempMapPosition.value = position
}

function confirmMapPosition() {
  if (tempMapPosition.value) {
    form.value.mapleft = tempMapPosition.value.left
    form.value.maptop = tempMapPosition.value.top
  }
  showMapPicker.value = false
}

function clearMapPosition() {
  form.value.mapleft = null
  form.value.maptop = null
  tempMapPosition.value = null
}

async function savePC() {
  error.value = ''
  saving.value = true

  try {
    const machineData = {
      machinenumber: form.value.machinenumber,
      alias: form.value.alias,
      hostname: form.value.hostname,
      serialnumber: form.value.serialnumber,
      machinetypeid: form.value.machinetypeid || null,
      statusid: form.value.statusid || null,
      vendorid: form.value.vendorid || null,
      modelnumberid: form.value.modelnumberid || null,
      locationid: form.value.locationid || null,
      osid: form.value.osid || null,
      loggedinuser: form.value.loggedinuser,
      isvnc: form.value.isvnc,
      iswinrm: form.value.iswinrm,
      notes: form.value.notes,
      mapleft: form.value.mapleft,
      maptop: form.value.maptop
    }

    let machineId
    if (isEdit.value) {
      await machinesApi.update(route.params.id, machineData)
      machineId = route.params.id
    } else {
      const response = await machinesApi.create(machineData)
      machineId = response.data.data.machineid
    }

    // Handle IP address - update communication record
    if (form.value.ipaddress) {
      await machinesApi.updateCommunication(machineId, {
        ipaddress: form.value.ipaddress,
        isprimary: true
      })
    }

    router.push('/pcs')
  } catch (err) {
    console.error('Error saving PC:', err)
    error.value = err.response?.data?.message || 'Failed to save PC'
  } finally {
    saving.value = false
  }
}
</script>

<style scoped>
.map-location-control {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.current-position {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: monospace;
  color: var(--text);
}

.map-modal-content {
  height: calc(90vh - 140px);
}

.map-modal-content :deep(.shopfloor-map) {
  height: 100%;
}

.map-modal-content :deep(.map-container) {
  height: calc(100% - 50px);
}

.form-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--text-light, #666);
}
</style>