Untitled

<template>
  <div class="d-flex pa-5 ga-5">

    <v-sheet class="border-sm rounded-lg elevation-3" width="30%">
      <v-toolbar density="compact" title="Employee Form"></v-toolbar>

      <v-form ref="myForm" class="pa-5">
        <v-text-field v-model="formData.id" label="ID" />

        <v-text-field
          v-model="formData.name"
          label="Name"
          :rules="[rules.required]"
        />

        <v-text-field
          v-model="formData.age"
          label="Age"
          :rules="[rules.required]"
        />

        <v-text-field
          v-model="formData.department_id"
          label="Department ID"
          :rules="[rules.required]"
        />

        <v-text-field
          v-model="formData.section_id"
          label="Section ID"
          :rules="[rules.required]"
        />

        <v-text-field
          v-model="formData.team_id"
          label="Team ID"
          :rules="[rules.required]"
        />

        <v-text-field v-model="formData.created_at" label="Created Date" />
        <v-text-field v-model="formData.updated_at" label="Updated Date" />
        <v-text-field v-model="formData.deleted_at" label="Deleted Date" />

        <v-btn color="primary" class="mr-3" @click="insertData">
          Confirm
        </v-btn>
        <v-btn color="warning" variant="outlined" @click="clear">
          Cancel
        </v-btn>
      </v-form>
    </v-sheet>


    <v-sheet class="border-sm rounded-lg elevation-3" width="70%">
      <v-toolbar density="compact" title="Employee List">
        <v-btn icon="mdi-autorenew" @click="fetchData"></v-btn>
      </v-toolbar>

      <v-data-table
        :headers="headers"
        :items="tableData"
        :loading="isLoading"
        class="pa-5"
      />
    </v-sheet>
  </div>
</template>

<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue';

const formData = ref({
  id: null,
  name: null,
  age: null,
  department_id: null,
  section_id: null,
  team_id: null,
  created_at: null,
  updated_at: null,
  deleted_at: null,
});

const tableData = ref([]);
const isLoading = ref(true);
const myForm = ref(null);

const rules = {
  required: (val) => !!val || 'Required (empty not allowed)',
};

const headers = ref([
  { text: 'ID', value: 'id' },
  { text: 'Name', value: 'name' },
  { text: 'Age', value: 'age' },
  { text: 'Department ID', value: 'department_id' },
  { text: 'Section ID', value: 'section_id' },
  { text: 'Team ID', value: 'team_id' },
  { text: 'Created At', value: 'created_at' },
  { text: 'Updated At', value: 'updated_at' },
  { text: 'Deleted At', value: 'deleted_at' },
]);

function clear() {
  myForm.value.reset();
}

function insertData() {
  const isComplete = myForm.value.validate();
  if (!isComplete) return;

  isLoading.value = true;
  axios
    .put('api/training/insert', formData.value)
    .then(() => {
      fetchData();
    })
    .catch((err) => {
      console.error('Error in insertData():', err);
      isLoading.value = false;
    });
}

function fetchData() {
  isLoading.value = true;
  axios
    .get('api/training/fetch')
    .then((response) => {

      tableData.value = response.data.data || response.data || [];
      isLoading.value = false;
    })
    .catch((error) => {
      console.error('Error in fetchData():', error);
      isLoading.value = false;
    });
}

onMounted(() => {
  fetchData();
});
</script>