NewClaim.vue

<template>
  <div>
    <div style="height:120px; background-color:#4682B4; position:relative; top:-60px; text-align:justify">
      <img src="../assets/guardme_logo.png" alt="" height="100px" width="200px">
    </div>

    <div class="container mt-5">
      <button @click="goBack" class="btn btn-secondary mt-3">
        Back to Home
      </button>
      <form @submit.prevent="submitForm">
        <div class="mb-3 text-start">
          <label for="first_name" class="form-label">First Name</label>
          <input type="text" class="form-control" id="first_name" v-model="formData.first_name"
            placeholder="Enter the Insured First Name" required>
        </div>
        <div class="mb-3 text-start">
          <label for="last_name" class="form-label">Last Name</label>
          <input type="text" class="form-control" id="last_name" v-model="formData.last_name"
            placeholder="Enter the  Insured Last Name" required>
        </div>
        <div class="mb-3 text-start">
          <label for="case_id" class="form-label">Customer ID</label>
          <input type="text" class="form-control" id="case_id" v-model="formData.case_id"
            placeholder="Enter the Customer ID" required>
        </div>
        <div class="mb-3 text-start">
          <label for="service_date" class="form-label">Service Date</label>
          <input type="date" class="form-control" id="service_date" v-model="formData.service_date"
            placeholder="Enter the Service Date" required>
        </div>
        <div class="mb-3 text-start">
          <label for="diagnosis" class="form-label">Diagnosis</label>
          <input type="text" class="form-control" id="diagnosis" v-model="formData.diagnosis"
            placeholder="Enter thee Diagnosis" required>
        </div>
        <div class="mb-3 text-start">
          <label for="claim_line_notes" class="form-label">Claim Line Notes</label>
          <input type="text" class="form-control" id="claim_line_notes" v-model="formData.claim_line_notes"
            placeholder="Enter the Claim Line Notes" required>
        </div>

        <!-- Submit Button -->
        <button type="submit" class="btn btn-primary" :disabled="loading">Submit</button>

        <!-- Loading Indicator -->
        <div v-if="loading" class="text-center mt-3">
          <div class="spinner-border" role="status">
          </div>
          <br>
          <span>Loading...</span>
        </div>
      </form>

      <!-- Display TableData component only when tableData is not empty -->
      <TableData v-if="Object.keys(tableData).length > 0" :data="tableData" />
    </div>
  </div>
</template>
  
<script>
import axios from 'axios';
import TableData from "./TableData.vue"

export default {
  components: {
    TableData
  },
  data() {
    return {
      formData: {
        first_name: '',
        last_name: '',
        case_id: '',
        service_date: '',
        diagnosis: '',
        claim_line_notes: '',
      },
      tableData: {}, // Store fetched data
      loading: false
    };
  },
  methods: {
    async submitForm() {
      this.loading = true; // Set loading to true when starting the request
      try {
        const response = await axios.post(`${process.env.VUE_APP_ASSIGN_CASE_ID}/assign-case-id`, this.formData);
        console.log(response.data);
        this.tableData = response.data;
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        this.loading = false; // Set loading to false after the request is complete
      }
    },
    goBack() {
      this.$router.push({ name: 'Home' });
    },
  }
};
</script>
  
<style scoped>
.container {
  max-width: 500px;
}
</style>