shopdb-flask/frontend/src/views/machines/MachinesList.vue

<template>
  <div>
    <div class="page-header">
      <h2>Equipment</h2>
      <router-link to="/machines/new" class="btn btn-primary">Add Equipment</router-link>
    </div>

    <!-- Filters -->
    <div class="filters">
      <input
        v-model="search"
        type="text"
        class="form-control"
        placeholder="Search equipment..."
        @input="debouncedSearch"
      />
    </div>

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

      <template v-else>
        <div class="table-container">
          <table>
            <thead>
              <tr>
                <th>Machine #</th>
                <th>Alias</th>
                <th>Hostname</th>
                <th>Type</th>
                <th>Status</th>
                <th>Location</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="machine in machines" :key="machine.machineid">
                <td>{{ machine.machinenumber }}</td>
                <td>{{ machine.alias || '-' }}</td>
                <td>{{ machine.hostname || '-' }}</td>
                <td>{{ machine.machinetype }}</td>
                <td>
                  <span class="badge" :class="getStatusClass(machine.status)">
                    {{ machine.status || 'Unknown' }}
                  </span>
                </td>
                <td>{{ machine.location || '-' }}</td>
                <td class="actions">
                  <router-link
                    :to="`/machines/${machine.machineid}`"
                    class="btn btn-secondary btn-sm"
                  >
                    View
                  </router-link>
                </td>
              </tr>
              <tr v-if="machines.length === 0">
                <td colspan="7" style="text-align: center; color: var(--text-light);">
                  No equipment found
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- Pagination -->
        <div class="pagination" v-if="totalPages > 1">
          <button
            v-for="p in totalPages"
            :key="p"
            :class="{ active: p === page }"
            @click="goToPage(p)"
          >
            {{ p }}
          </button>
        </div>
      </template>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { machinesApi } from '../../api'

const machines = ref([])
const loading = ref(true)
const search = ref('')
const page = ref(1)
const totalPages = ref(1)

let searchTimeout = null

onMounted(() => {
  loadMachines()
})

async function loadMachines() {
  loading.value = true
  try {
    const params = {
      page: page.value,
      perpage: 20,
      category: 'Equipment'
    }
    if (search.value) params.search = search.value

    const response = await machinesApi.list(params)
    machines.value = response.data.data || []
    totalPages.value = response.data.meta?.pagination?.total_pages || 1
  } catch (error) {
    console.error('Error loading equipment:', error)
  } finally {
    loading.value = false
  }
}

function debouncedSearch() {
  clearTimeout(searchTimeout)
  searchTimeout = setTimeout(() => {
    page.value = 1
    loadMachines()
  }, 300)
}

function goToPage(p) {
  page.value = p
  loadMachines()
}

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