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="Employee ID" />
        <v-text-field v-model="formData.name" label="Employee 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" />
        <v-text-field v-model="formData.section_id" label="Section ID" />
        <v-text-field v-model="formData.team_id" label="Team ID" />
        <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 class="mr-3" :color="changeColor" @click="CRUDFunction">
          {{ userAction }}
        </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 :items="tableData" :headers="tableHeaders" :loading="isLoading" class="pa-5">
        <template v-slot:item.actions="{ item }">
          <v-icon color="success" icon="mdi-pencil" @click="selectData(item, 'update')"></v-icon>
          <v-icon color="warning" icon="mdi-delete" @click="selectData(item, 'delete')" v-if="!item.deleted_at"></v-icon>
          <v-icon color="info" icon="mdi-autorenew" @click="selectData(item, 'restore')" v-else></v-icon>
        </template>
      </v-data-table>
    </v-sheet>


    <v-dialog v-model="showDialog" max-width="400">
      <v-card>
        <v-card-title class="text-h6">
          Confirm {{ dialogAction === 'delete' ? 'Deletion' : 'Restoration' }}
        </v-card-title>
        <v-card-text >
          Are you sure you want to {{ dialogAction }} this employee?
        </v-card-text>
        <v-card-actions>

          <v-btn color="primary" @click="confirmAction">Yes</v-btn>
          <v-btn color="grey" @click="showDialog = false">No</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>
<script setup>
import axios from 'axios';
import { ref, computed, 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 userAction = ref('insert');

const showDialog = ref(false);
const dialogAction = ref(null);

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

const tableHeaders = ref([
  { title: 'Employee ID', value: 'id', width: '10%' },
  { title: 'Name', value: 'name', width: '15%' },
  { title: 'Age', value: 'age', width: '10%' },
  { title: 'Department ID', value: 'department_id', width: '10%' },
  { title: 'Section ID', value: 'section_id', width: '10%' },
  { title: 'Team ID', value: 'team_id', width: '10%' },
  { title: 'Created Date', value: 'created_at', width: '10%' },
  { title: 'Updated Date', value: 'updated_at', width: '10%' },
  { title: 'Deleted Date', value: 'deleted_at', width: '10%' },
  { title: 'Actions', value: 'actions', width: '5%' },
]);

function clear() {
  myForm.value.reset();
  userAction.value = 'insert';
}

function CRUDFunction() {
  const isValid = myForm.value.validate();
  if (!isValid) return;

  if (userAction.value === 'delete' || userAction.value === 'restore') {
    dialogAction.value = userAction.value;
    showDialog.value = true;
  } else {
    executeAction();
  }
}

function confirmAction() {
  showDialog.value = false;
  executeAction();
}

function executeAction() {
  isLoading.value = true;
  axios
    .put(`api/employee/${userAction.value}`, formData.value)
    .then(() => {
      fetchData();
      clear();
    })
    .catch((err) => {
      console.error(`Error in ${userAction.value}:`, err);
      isLoading.value = false;
    });
}

function fetchData() {
  isLoading.value = true;
  axios
    .get('api/employee/fetch')
    .then((response) => {
      tableData.value = response.data.data || [];
      setTimeout(() => {
        isLoading.value = false;
      }, 500);
    })
    .catch((error) => {
      console.error('Error in fetchData():', error);
      isLoading.value = false;
    });
}

function selectData(data, action) {
  formData.value = { ...data };
  userAction.value = action;
}

const changeColor = computed(() => {
  if (userAction.value === 'update') return 'success';
  else if (userAction.value === 'delete') return 'warning';
  else if (userAction.value === 'restore') return 'info';
  return 'primary';
});

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