d1c844d533
GET /items (paginated, search across code/name/description/bin, lowstock filter) and GET /items/<id> with recent transactions, both open reads. printedpartsApi client, router file repointed at the renamed views, PrintedItemsList with image thumbs and a red/green quantity badge against the per-item threshold. Nav entry '3D Parts' with a new 'box' Lucide icon mapping (the sidebar renders nothing for unknown icon names - lab gotcha).
142 lines
3.8 KiB
Vue
142 lines
3.8 KiB
Vue
<template>
|
|
<div>
|
|
<div class="page-header">
|
|
<h2>3D Printed Parts</h2>
|
|
<router-link to="/printedparts/new" class="btn btn-primary">Add Part</router-link>
|
|
</div>
|
|
|
|
<div class="filters">
|
|
<input
|
|
v-model="search"
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Search code, name, description, bin..."
|
|
@input="debouncedSearch"
|
|
/>
|
|
<label class="lowstock-filter">
|
|
<input v-model="lowstockOnly" type="checkbox" @change="loadItems" />
|
|
Low stock only
|
|
</label>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div v-if="loading" class="loading">Loading...</div>
|
|
|
|
<template v-else>
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>Code</th>
|
|
<th>Name</th>
|
|
<th>Quantity</th>
|
|
<th>Bin</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="item in items"
|
|
:key="item.printeditemid"
|
|
class="clickable-row"
|
|
@click="$router.push(`/printedparts/${item.printeditemid}`)"
|
|
>
|
|
<td class="thumb-cell">
|
|
<img
|
|
v-if="item.imageurl"
|
|
:src="withBase(item.imageurl)"
|
|
:alt="item.itemname"
|
|
class="item-thumb"
|
|
/>
|
|
</td>
|
|
<td>{{ item.itemcode || '-' }}</td>
|
|
<td>{{ item.itemname }}</td>
|
|
<td>
|
|
<span :class="['badge', item.islowstock ? 'badge-danger' : 'badge-success']">
|
|
{{ item.quantityonhand }}
|
|
</span>
|
|
</td>
|
|
<td>{{ item.binlocation || '-' }}</td>
|
|
<td class="truncate-cell">{{ item.itemdescription || '-' }}</td>
|
|
</tr>
|
|
<tr v-if="items.length === 0">
|
|
<td colspan="6" class="empty-state">No printed parts found</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<PaginationBar
|
|
:page="page"
|
|
:total-pages="totalPages"
|
|
@change="setPage"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { printedpartsApi } from '../../api'
|
|
import PaginationBar from '../../components/PaginationBar.vue'
|
|
import { useListQuery } from '@/composables/listQuery'
|
|
import { withBase } from '../../utils/basePath'
|
|
|
|
const items = ref([])
|
|
const loading = ref(true)
|
|
const lowstockOnly = ref(false)
|
|
const { page, search, setPage, setSearch } = useListQuery({ onChange: loadItems })
|
|
const totalPages = ref(1)
|
|
const perPage = ref(20)
|
|
|
|
let searchTimeout = null
|
|
|
|
onMounted(loadItems)
|
|
|
|
async function loadItems() {
|
|
loading.value = true
|
|
try {
|
|
const params = { page: page.value, perpage: perPage.value }
|
|
if (search.value) params.search = search.value
|
|
if (lowstockOnly.value) params.lowstock = 'true'
|
|
const response = await printedpartsApi.list(params)
|
|
items.value = response.data.data || []
|
|
totalPages.value = response.data.meta?.pagination?.totalpages || 1
|
|
} catch (error) {
|
|
console.error('Error loading printed parts:', error)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function debouncedSearch() {
|
|
clearTimeout(searchTimeout)
|
|
searchTimeout = setTimeout(() => setSearch(search.value), 300)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.item-thumb {
|
|
width: 2.2rem;
|
|
height: 2.2rem;
|
|
object-fit: cover;
|
|
border-radius: 0.25rem;
|
|
}
|
|
.thumb-cell { width: 3rem; }
|
|
.truncate-cell {
|
|
max-width: 20rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.lowstock-filter {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
color: var(--text-light);
|
|
cursor: pointer;
|
|
}
|
|
</style>
|