Untitled

<script setup>
import { reactive, onBeforeMount } from "vue";
import api from "../api.js";

const courses = reactive({ data: [] });

onBeforeMount(async () => {
  const { data } = await api.get("/courses");
  courses.data = data;
});

function handleEdit(courseId) {
  console.log(courseId);
}

function handleArchive(courseId) {
  console.log(courseId);
}
</script>

<template>
  <div class="container my-5">
    <h1 class="text-center text-primary mb-4">Admin View</h1>

    <div class="table-responsive">
      <table class="table table-striped table-bordered align-middle">
        <thead class="table-light">
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Description</th>
            <th>Price</th>
            <th>Availability</th>
            <th colspan="2" class="text-center">Actions</th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="course in courses.data" :key="course._id">
            <td>{{ course._id }}</td>
            <td>{{ course.name }}</td>
            <td>{{ course.description }}</td>
            <td>PHP {{ course.price }}</td>

            <td>
              <span v-if="course.isActive" class="text-success">Available</span>
              <span v-else class="text-danger">Unavailable</span>
            </td>

            <td class="text-center">
              <button class="btn btn-primary btn-sm" @click="handleEdit(course._id)">
                Edit
              </button>
            </td>

            <td class="text-center">
              <button class="btn btn-danger btn-sm" @click="handleArchive(course._id)">
                Archive
              </button>
            </td>
          </tr>

          <tr v-if="courses.data.length === 0">
            <td colspan="7" class="text-center">No courses found</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>