Ticket material

src/components/materials/MaterialTable.vue

@@ -0,0 +1,99 @@
+<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>