sean
bd77e1a4e7
NPM Installation / build (16.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (16.x, windows-latest) (push) Has been cancelled
NPM Installation / build (17.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (17.x, windows-latest) (push) Has been cancelled
NPM Installation / build (18.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (18.x, windows-latest) (push) Has been cancelled
100 lines
3.3 KiB
Vue
100 lines
3.3 KiB
Vue
<template>
|
|
<div v-if="loading" class="text-center py-5">
|
|
<CSpinner color="primary" class="mb-3" />
|
|
<p class="text-body-secondary">Memuat data material...</p>
|
|
</div>
|
|
|
|
<div v-else-if="data.length === 0" class="text-center py-5">
|
|
<h6 class="text-body-secondary">Tidak ada data material</h6>
|
|
<p class="text-body-secondary small">Belum ada material yang terdaftar.</p>
|
|
</div>
|
|
|
|
<template v-else>
|
|
<CTable>
|
|
<CTableHead>
|
|
<CTableRow>
|
|
<CTableHeaderCell scope="col" style="width: 50px">No</CTableHeaderCell>
|
|
<CTableHeaderCell>Barcode</CTableHeaderCell>
|
|
<CTableHeaderCell>Material</CTableHeaderCell>
|
|
<CTableHeaderCell>Type</CTableHeaderCell>
|
|
<CTableHeaderCell class="text-center">Aksi</CTableHeaderCell>
|
|
</CTableRow>
|
|
</CTableHead>
|
|
|
|
<CTableBody>
|
|
<CTableRow v-for="(item, index) in data" :key="item.barcode_id">
|
|
<CTableHeaderCell scope="row">{{
|
|
(currentPage - 1) * perPage + index + 1
|
|
}}</CTableHeaderCell>
|
|
<CTableDataCell>{{ item.barcode_id }}</CTableDataCell>
|
|
<CTableDataCell>{{ item.material_name }}</CTableDataCell>
|
|
<CTableDataCell>
|
|
<CBadge :color="item.type === 'serialized' ? 'success' : 'primary'">
|
|
{{ item.type }}
|
|
</CBadge>
|
|
</CTableDataCell>
|
|
<CTableDataCell class="text-center">
|
|
<CButton size="sm" color="info" class="me-1" @click="$emit('detail', item)"
|
|
>Detail</CButton
|
|
>
|
|
<CButton size="sm" color="warning" class="me-1" @click="$emit('transfer', item)"
|
|
>Transfer</CButton
|
|
>
|
|
<CButton size="sm" color="danger" @click="$emit('return', item)">Return</CButton>
|
|
</CTableDataCell>
|
|
</CTableRow>
|
|
</CTableBody>
|
|
</CTable>
|
|
|
|
<div class="d-flex justify-content-between align-items-center mt-3">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<span>Tampil</span>
|
|
<CFormSelect
|
|
style="width: auto"
|
|
:value="perPage"
|
|
@change="$emit('update:perPage', Number($event.target.value))"
|
|
>
|
|
<option :value="15">15</option>
|
|
<option :value="25">25</option>
|
|
<option :value="50">50</option>
|
|
<option :value="100">100</option>
|
|
</CFormSelect>
|
|
<span> dari {{ totalItems }} data </span>
|
|
</div>
|
|
<CPagination class="mb-0" v-if="totalPages > 1">
|
|
<CPaginationItem :disabled="currentPage == 1" @click="$emit('page', currentPage - 1)">
|
|
Previous
|
|
</CPaginationItem>
|
|
|
|
<CPaginationItem
|
|
v-for="page in totalPages"
|
|
:key="page"
|
|
:active="page == currentPage"
|
|
@click="$emit('page', page)"
|
|
>
|
|
{{ page }}
|
|
</CPaginationItem>
|
|
|
|
<CPaginationItem
|
|
:disabled="currentPage == totalPages"
|
|
@click="$emit('page', currentPage + 1)"
|
|
>
|
|
Next
|
|
</CPaginationItem>
|
|
</CPagination>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
data: Array,
|
|
totalPages: Number,
|
|
currentPage: Number,
|
|
perPage: Number,
|
|
totalItems: Number,
|
|
loading: Boolean,
|
|
})
|
|
defineEmits(['detail', 'transfer', 'return', 'page', 'update:perPage'])
|
|
</script>
|