shopdb-flask/frontend/src/views/printers/PrinterDetail.vue

<template>
  <div class="detail-page">
    <div class="page-header">
      <h2>Printer Details</h2>
      <div class="header-actions">
        <router-link :to="`/print/printer-qr/${$route.params.id}`" class="btn btn-secondary" target="_blank">
          Print QR
        </router-link>
        <router-link :to="`/printers/${$route.params.id}/edit`" class="btn btn-primary">Edit</router-link>
        <router-link to="/printers" class="btn btn-secondary">Back to List</router-link>
      </div>
    </div>

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

    <template v-else-if="printer">
      <!-- Hero Section -->
      <div class="hero-card">
        <div class="hero-content">
          <div class="hero-title">
            <h1>{{ printer.name || printer.assetnumber }}</h1>
          </div>
          <div class="hero-meta">
            <span class="badge badge-lg badge-printer">Printer</span>
            <span v-if="printer.printer?.iscsf" class="badge badge-lg badge-info">CSF</span>
            <span v-if="printer.printer?.iscolor" class="badge badge-lg badge-success">Color</span>
            <span v-if="printer.printer?.isnetwork" class="badge badge-lg badge-secondary">Network</span>
          </div>
          <div class="hero-details">
            <div class="hero-detail" v-if="printer.printer?.vendorname">
              <span class="hero-detail-label">Vendor</span>
              <span class="hero-detail-value">{{ printer.printer.vendorname }}</span>
            </div>
            <div class="hero-detail" v-if="printer.printer?.modelname">
              <span class="hero-detail-label">Model</span>
              <span class="hero-detail-value">{{ printer.printer.modelname }}</span>
            </div>
            <div class="hero-detail" v-if="printer.serialnumber">
              <span class="hero-detail-label">Serial Number</span>
              <span class="hero-detail-value mono">{{ printer.serialnumber }}</span>
            </div>
            <div class="hero-detail" v-if="ipAddress">
              <span class="hero-detail-label">IP Address</span>
              <span class="hero-detail-value mono">{{ ipAddress }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Main Content Grid -->
      <div class="content-grid">
        <!-- Left Column -->
        <div class="content-column">
          <!-- Identity Section -->
          <div class="section-card">
            <h3 class="section-title">Identity</h3>
            <div class="info-list">
              <div class="info-row">
                <span class="info-label">Asset Number</span>
                <span class="info-value mono">{{ printer.assetnumber }}</span>
              </div>
              <div class="info-row" v-if="printer.printer?.windowsname">
                <span class="info-label">Windows Name</span>
                <span class="info-value mono">{{ printer.printer.windowsname }}</span>
              </div>
              <div class="info-row" v-if="printer.printer?.hostname">
                <span class="info-label">Hostname / FQDN</span>
                <span class="info-value mono">{{ printer.printer.hostname }}</span>
              </div>
              <div class="info-row" v-if="printer.printer?.sharename">
                <span class="info-label">CSF Share Name</span>
                <span class="info-value mono">{{ printer.printer.sharename }}</span>
              </div>
              <div class="info-row" v-if="printer.serialnumber">
                <span class="info-label">Serial Number</span>
                <span class="info-value mono">{{ printer.serialnumber }}</span>
              </div>
            </div>
          </div>

          <!-- Printer Settings -->
          <div class="section-card">
            <h3 class="section-title">Printer Settings</h3>
            <div class="info-list">
              <div class="info-row" v-if="printer.printer?.installpath">
                <span class="info-label">Install Path</span>
                <span class="info-value mono">{{ printer.printer.installpath }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">Color</span>
                <span class="info-value">{{ printer.printer?.iscolor ? 'Yes' : 'No' }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">Duplex</span>
                <span class="info-value">{{ printer.printer?.isduplex ? 'Yes' : 'No' }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">Network Printer</span>
                <span class="info-value">{{ printer.printer?.isnetwork ? 'Yes' : 'No' }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">CSF Printer</span>
                <span class="info-value">{{ printer.printer?.iscsf ? 'Yes' : 'No' }}</span>
              </div>
              <div class="info-row" v-if="printer.printer?.pin">
                <span class="info-label">PIN</span>
                <span class="info-value mono">{{ printer.printer.pin }}</span>
              </div>
            </div>
          </div>

          <!-- Notes -->
          <div class="section-card" v-if="printer.notes">
            <h3 class="section-title">Notes</h3>
            <p class="notes-text">{{ printer.notes }}</p>
          </div>
        </div>

        <!-- Right Column -->
        <div class="content-column">
          <!-- Location -->
          <div class="section-card">
            <h3 class="section-title">Location</h3>
            <div class="info-list">
              <div class="info-row">
                <span class="info-label">Map Location</span>
                <span class="info-value">
                  <LocationMapTooltip
                    v-if="printer.mapleft != null && printer.maptop != null"
                    :left="printer.mapleft"
                    :top="printer.maptop"
                    :machineName="printer.name || printer.assetnumber"
                  >
                    <span class="location-link">View on Map</span>
                  </LocationMapTooltip>
                  <span v-else>Not mapped</span>
                </span>
              </div>
              <div class="info-row" v-if="printer.businessunitname">
                <span class="info-label">Business Unit</span>
                <span class="info-value">{{ printer.businessunitname }}</span>
              </div>
            </div>
          </div>

          <!-- Network -->
          <div class="section-card" v-if="printer.communications?.length">
            <h3 class="section-title">Network</h3>
            <div class="network-list">
              <div v-for="comm in printer.communications" :key="comm.communicationid" class="network-item">
                <div class="network-primary">
                  <span class="ip-address">{{ comm.ipaddress || comm.address || '-' }}</span>
                  <span v-if="comm.isprimary" class="primary-badge">Primary</span>
                </div>
                <div class="network-secondary" v-if="comm.macaddress">
                  <span class="mac-address">{{ comm.macaddress }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Supplies Card -->
      <div class="card">
        <div class="card-header">
          <h3>Supplies</h3>
        </div>

        <div v-if="supplies.length === 0" class="empty-state">
          No supply information available
        </div>

        <div v-else class="supplies-grid">
          <div v-for="supply in supplies" :key="supply.supplyid" class="supply-item">
            <div class="supply-header">
              <span class="supply-name">{{ supply.supplyname }}</span>
              <span class="supply-level" :class="getSupplyLevelClass(supply.currentlevel)">
                {{ supply.currentlevel !== null ? `${supply.currentlevel}%` : 'N/A' }}
              </span>
            </div>
            <div class="supply-bar">
              <div
                class="supply-bar-fill"
                :class="getSupplyLevelClass(supply.currentlevel)"
                :style="{ width: `${supply.currentlevel || 0}%` }"
              ></div>
            </div>
            <div class="supply-meta">
              <span>{{ supply.supplytypename }}</span>
              <span v-if="supply.partnumber">Part: {{ supply.partnumber }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Drivers Card -->
      <div class="card">
        <div class="card-header">
          <h3>Assigned Drivers</h3>
        </div>

        <div v-if="drivers.length === 0" class="empty-state">
          No drivers assigned
        </div>

        <div v-else class="table-container">
          <table>
            <thead>
              <tr>
                <th>Driver Name</th>
                <th>OS Type</th>
                <th>Version</th>
                <th>Universal</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="driver in drivers" :key="driver.driverid">
                <td>{{ driver.drivername }}</td>
                <td>{{ driver.ostype }}</td>
                <td>{{ driver.version || '-' }}</td>
                <td>{{ driver.isuniversal ? 'Yes' : 'No' }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </template>

    <div v-else class="card">
      <p style="text-align: center; color: var(--text-light);">Printer not found</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { printersApi } from '../../api'
import LocationMapTooltip from '../../components/LocationMapTooltip.vue'

const route = useRoute()

const loading = ref(true)
const printer = ref(null)
const supplies = ref([])
const drivers = ref([])

// Get IP address from communications
const ipAddress = computed(() => {
  if (!printer.value?.communications) return null
  const primaryComm = printer.value.communications.find(c => c.isprimary) || printer.value.communications[0]
  return primaryComm?.ipaddress || null
})

onMounted(async () => {
  try {
    const [printerRes, suppliesRes, driversRes] = await Promise.all([
      printersApi.get(route.params.id),
      printersApi.getSupplies(route.params.id).catch(() => ({ data: { data: [] } })),
      printersApi.getDrivers(route.params.id).catch(() => ({ data: { data: [] } }))
    ])

    printer.value = printerRes.data.data
    supplies.value = suppliesRes.data.data || []
    drivers.value = driversRes.data.data || []
  } catch (error) {
    console.error('Error loading printer:', error)
  } finally {
    loading.value = false
  }
})

function getStatusClass(status) {
  if (!status) return 'badge-info'
  const s = status.toLowerCase()
  if (s === 'in use' || s === 'active' || s === 'online') return 'badge-success'
  if (s === 'in repair' || s === 'offline') return 'badge-warning'
  if (s === 'retired' || s === 'error') return 'badge-danger'
  return 'badge-info'
}

function getSupplyLevelClass(level) {
  if (level === null || level === undefined) return ''
  if (level <= 10) return 'critical'
  if (level <= 25) return 'low'
  return 'ok'
}

function formatDate(dateStr) {
  if (!dateStr) return '-'
  return new Date(dateStr).toLocaleString()
}
</script>

<style scoped>
/* Printer-specific styles - shared styles are in global style.css */

.empty-state {
  text-align: center;
  color: var(--text-light);
  padding: 2.5rem;
  font-size: 1.125rem;
}

/* Supplies */
.supplies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.supply-item {
  background: var(--bg);
  padding: 1.25rem;
  border-radius: 8px;
}

.supply-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.supply-name {
  font-weight: 500;
  font-size: 1.125rem;
}

.supply-level {
  font-weight: 600;
  font-size: 1.125rem;
}

.supply-level.ok { color: var(--success); }
.supply-level.low { color: var(--warning); }
.supply-level.critical { color: var(--danger); }

.supply-bar {
  height: 10px;
  background: var(--border);
  border-radius: 5px;
  overflow: hidden;
}

.supply-bar-fill {
  height: 100%;
  transition: width 0.3s ease;
  background: var(--success);
}

.supply-bar-fill.low { background: var(--warning); }
.supply-bar-fill.critical { background: var(--danger); }

.supply-meta {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  color: var(--text-light);
  margin-top: 0.625rem;
}
</style>