jurnal-riwayat.vue

<template>
  <div class="riwayat-container">
    <h2>Riwayat Pengisian Catatan Jurnal PKL</h2>
    <table border="1">
      <thead>
        <tr>
          <th>No</th>
          <!-- <th>Siswa</th> -->
          <th>Hari/Tanggal</th>
          <th>Uraian Kegiatan</th>
          <th>Verifikasi Guru</th>
          <th>Catatan Instruktur</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="riwayat.length < 1">belum ada jurnal</tr>
        <tr v-for="(entry, index) in riwayat" :key="index">
          <td>{{ index + 1 }}</td>
          <!-- <td>{{ entry.user_id }}</td> -->
          <td>{{ entry.Tanggal }}</td>
          <td>{{ entry.Uraian_Kegiatan }}</td>
          <td>
            <span v-if="role == 'guru'">
              <span v-if="entry.Verifikasi_Guru">Selesai</span>
              <span v-else><button class="btn btn-dark" @click="verifikasi(entry.id)">Verifikasi</button></span>
            </span>
            <span v-else>
              <span v-if="entry.Verifikasi_Guru">Selesai</span>
              <span v-else>Belum diverifikasi</span>
            </span>
          </td>
          <td>{{ entry.Catatan_Instruktur }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="printTable" class="print-button">Print</button>
  </div>
</template>

<script setup>
definePageMeta({
  middleware: 'auth'
})
const pb = usePocketBaseClient();
const user = usePocketBaseUser();
const nama = user.user.value.name;
const role = user.user.value.role;
const current_id_user = user.user.value.id;
const riwayat = ref([]);

async function getRiwayat() {
  pb.autoCancellation(false) // auto cancellation
  if(role == 'siswa') {
    const record = await pb.collection('catatan_jurnal').getList(1, 50, {
      expand: 'user_id',
      filter: 'user_id = "' + current_id_user + '"',
    });
    if(record) {
      riwayat.value = record.items;
      console.log(record.items)
    }
  } else {
    const record = await pb.collection('catatan_jurnal').getList(1,50, {
      sort: 'Verifikasi_Guru',
    });
    if(record) {
      riwayat.value = record.items;
      console.log(record.items)
    }
  }
}

async function verifikasi(id) {
  console.log(id)
  const data = ref({
    "Verifikasi_Guru": true,
  });
  const record = await pb.collection('catatan_jurnal').update(id, data.value);
  if(record) console.log('verifikasi berhasil');
}

onMounted(() => {
  getRiwayat()
  pb.collection('catatan_jurnal').subscribe('*', function (e) {
    if(e.action == 'update') getRiwayat()
  }, {});
})

</script>

<style scoped>
.riwayat-container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  max-width: 1000px;
  margin: 20px auto;
}

h2 {
  margin-bottom: 20px;
}

.detail-container {
  margin-bottom: 20px;
  background: #fff;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 30px;
}

th, td {
  padding: 12px;
  text-align: left;
  border: 1px solid #ddd;
}

.print-button {
  margin-top: 20px;
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.print-button:hover {
  background-color: #0056b3;
}
</style>