Home.vue

<template>
  <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="client-notes-table container">
    <div class="row">
      <div class="col-md-6">
        <h4 style="text-align:justify"> <strong>CLIENT NOTES :: LIST</strong> </h4>
      </div>
      <div class="col-md-6">

      </div>
    </div>
    <form @submit.prevent="submitForm">
      <div class="list">
        <br>
        <div class="row">


          <div class="col-md-2" style="padding-left:24px">
            <select id="inputState" class="form-select">
              <option selected>Claim ID</option>
              <option>...</option>
            </select>
          </div>
          <div class="col-md-4">
            <input type="search" v-model="form.name" class="form-control">
          </div>

          <div class="col-md-2">
            <span v-if="!claimFound">Claim Not found !</span>
          </div>

          <div class="col-md-2">
            <button @click="goToNewClaim" class="btn "
              style="width:150px; background-color:#4682B4;color:white; border-radius:5px"
              type="submit">New Claim</button>
          </div>
          <div class="col-md-2">
            <button class="btn "
              style="width:150px; background-color:#4682B4;color:white;margin-left:6px; border-radius:5px"
              type="submit">Search</button>
          </div>
        </div>
        <hr>
        <div class="row ">
          <div class="col" style="padding-left:24px">

            <select id="inputState" class="form-select">
              <option selected>Note Dates</option>
              <option>...</option>
            </select>
          </div>
          <div class="col">

            <select id="inputState" class="form-select" disabled>
              <option selected>From Year</option>
              <option>...</option>
            </select>
          </div>
          <div class="col">

            <select id="inputState" class="form-select" disabled>
              <option selected>Month</option>
              <option>...</option>
            </select>
          </div>
          <div class="col">

            <select id="inputState" class="form-select" disabled>
              <option selected>Day</option>
              <option>...</option>
            </select>
          </div>
          <div class="col">

            <select id="inputState" class="form-select" disabled>
              <option selected>To Year</option>
              <option>...</option>
            </select>
          </div>
          <div class="col">

            <select id="inputState" class="form-select" disabled>
              <option selected>Month</option>
              <option>...</option>
            </select>
          </div>
          <div class="col">

            <select id="inputState" class="form-select" disabled>
              <option selected>Day</option>
              <option>...</option>
            </select>
          </div>
        </div>
        <hr>

        <div class="row">

          <label class="col-md-2" for=""><strong>Organization:</strong></label>
          <div class="col-md-6">
            <select id="inputState" class="form-select">
              <option selected>Select</option>
              <option>...</option>
            </select>
          </div>
          <div class="col-md-3">

            <input type="text" class="form-control" id="inputAddress2" placeholder="* Search Organization">
          </div>
        </div>
        <hr>

        <div class="row">

          <label class="col-md-2" for=""><strong>Department:</strong></label>
          <div class="col-md-6">
            <select id="inputState" class="form-select">
              <option selected>Select</option>
              <option>...</option>
            </select>
          </div>
          <div class="col-md-3">

            <input type="text" class="form-control" id="inputAddress2" placeholder="* Search Department">
          </div>
        </div>
        <hr>
        <div class="row">

          <div class="col-md-2">
            <label for=""><strong>Claim Notes (Investigator):</strong></label>
          </div>
          <div class="col-md-9">
            <input class="form-control" type="text" v-model="query" @input="fetchSuggestions"
              placeholder="Type to search..." />
            <ul v-if="suggestions.length" class="suggestions-list">
              <li v-for="(suggestion, index) in suggestions" :key="index" @click="selectSuggestion(suggestion)"
                @mouseover="highlight(index)" @mouseleave="unhighlight()" :class="{ 'selected': index === selectedIdx }"
                class="suggestion-item">
                {{ suggestion }}
              </li>
            </ul>
          </div>
        </div>
        <hr>
        <div class="row">

          <div class="col-md-2">
            <label for=""><strong>Claim Notes (Insured):</strong></label>
          </div>
          <div class="col-md-3">
            <input type="text" class="form-control" id="inputAddress2" placeholder="* Type insured claim note">
          </div>
        </div>
        <hr>


        <br>
      </div>
    </form>

    <br>
    <div class="row">
      <div class="col-md-12">
        <ul class="pagination ">
          <li class="page-item"><a class="page-link" href="#">View All</a></li>
          <li class="page-item"><a class="page-link" href="#">A</a></li>
          <li class="page-item"><a class="page-link" href="#">B</a></li>
          <li class="page-item"><a class="page-link" href="#">C</a></li>
          <li class="page-item"><a class="page-link" href="#">D</a></li>
          <li class="page-item"><a class="page-link" href="#">E</a></li>
          <li class="page-item"><a class="page-link" href="#">F</a></li>
          <li class="page-item"><a class="page-link" href="#">G</a></li>
          <li class="page-item"><a class="page-link" href="#">H</a></li>
          <li class="page-item"><a class="page-link" href="#">I</a></li>
          <li class="page-item"><a class="page-link" href="#">J</a></li>
          <li class="page-item"><a class="page-link" href="#">K</a></li>
          <li class="page-item"><a class="page-link" href="#">L</a></li>
          <li class="page-item"><a class="page-link" href="#">M</a></li>
          <li class="page-item"><a class="page-link" href="#">N</a></li>
          <li class="page-item"><a class="page-link" href="#">O</a></li>
          <li class="page-item"><a class="page-link" href="#">P</a></li>
          <li class="page-item"><a class="page-link" href="#">Q</a></li>
          <li class="page-item"><a class="page-link" href="#">R</a></li>
          <li class="page-item"><a class="page-link" href="#">S</a></li>
          <li class="page-item"><a class="page-link" href="#">T</a></li>
          <li class="page-item"><a class="page-link" href="#">U</a></li>
          <li class="page-item"><a class="page-link" href="#">V</a></li>
          <li class="page-item"><a class="page-link" href="#">W</a></li>
          <li class="page-item"><a class="page-link" href="#">X</a></li>
          <li class="page-item"><a class="page-link" href="#">Y</a></li>
          <li class="page-item"><a class="page-link" href="#">Z</a></li>
        </ul>
      </div>

    </div>


    <br><br>
    <div>
      <div v-if="claimFound" style="float: right;padding:10px">
      <button class="btn " style="width:150px; background-color:#4682B4;color:white; border-radius:5px; "
        @click="getSimiliarClaims">Show Similar Claims</button>
    </div>
    <div v-if="claimFound" style="float: right;padding:10px">
      <button class="btn " style="width:150px; height: 65px; background-color:#4682B4;color:white; border-radius:5px; "
        @click="getCaseID">Get Case ID</button>
    </div>
    </div>
   

    <table class="table"> <!--<table class="table table-striped"> -->
      <thead class="head">
        <tr class="tablehead">
          <th>ID</th>
          <th>Status</th>
          <th style="width:150px">Policy Number</th>
          <th style="width:150px">Date Decv</th>
          <th style="width:150px">Case ID</th>
          <th>Claim Notes</th>
          <th>AI Suggested Summary <button type="button" class="btn btn-secondary inf" data-bs-toggle="tooltip"
              data-bs-placement="top"
              title="More information More information here More information here More information here here">
              ℹ
              <!-- add more info -->
            </button></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(note, index) in clientNotes" :key="index" class="hover">
          <td>{{ note.id }}</td>
          <td>{{ note.status }}</td>
          <td>{{ note.policy_number }}</td>
          <td>{{ note.date }}</td>
          <td>{{ caseID }}</td>
          <td>
            <div :class="{ 'expandable-content': !expandedStates[index], 'expanded-content': expandedStates[index] }"
              style="width:400px">
              {{ note.summary }}
            </div>
            <span class="show-more" @click="toggleExpanded(index)">
              {{ expandedStates[index] ? 'Show Less' : 'Show More' }}
            </span>
          </td>
          <td style="background-color:rosybrown;color:white">
            <!--  -->
            <div :class="{ 'expandable-content': !expandedStates[index], 'expanded-content': expandedStates[index] }"
              style="width:400px">
              {{ note.suggested_summary }}
            </div>
            <span class="show-more" @click="toggleExpanded(index)">
              {{ expandedStates[index] ? 'Show Less' : 'Show More' }}
            </span>
          </td>
        </tr>
      </tbody>
    </table>
    <div v-if="loading">Loading...</div>
    <div v-if="error" class="error-message">{{ error }}</div>
  </div>
</template>


<script>

import axios from 'axios'
export default {

  name: 'ClientNotesTable',
  data() {
    return {
      clientNotes: [],
      form: {
        name: ''
      },
      similarForm: {
        name: ''
      },
      similarClaims: [],
      loading: false,
      error: null,
      expandedStates: {},
      searchQuery: '',
      claimFound: false,
      claimID: null,
      query: '',
      suggestions: [],
      caseID: ''

    };

  },



  created() {
    //this.fetchClientNotes();

    //  this.form.data = this.clientNotes;
    //this.filteredClientNotes();
  },
  methods: {
    toggleExpanded(index) {
      // Toggle the expanded state for the specific row
      this.expandedStates[index] = !this.expandedStates[index];

    },
    goToNewClaim() {
      this.$router.push({ name: 'NewClaim' }); // Programmatic navigation to the NewClaim route
    },
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
    },

    fetchClientNotes() {


      axios.get(`${process.env.VUE_APP_FETCH_CLIENT_NOTES}/get-csv`)
        .then(data => {
          console.log('Success:', data);
          this.clientNotes = data.data;


          this.clientNotes.forEach((_, index) => {
            this.expandedStates[index] = false;
          });
          this.loading = true;



        })
        // .catch(error => {
        //   this.error = 'An error occurred while fetching data.';
        //   console.error('Error fetching client notes:', error);
        // })
        // .finally(() => {
        //   this.loading = false;
        // });


        .catch((error) => {
          console.error('Error:', error);
        });
    },

    submitForm() {

      // this.form.data = this.clientNotes;
      axios.post(`${process.env.VUE_APP_SEARCH_CLIENT_NOTES}/search_notes`, this.form)
        .then(response => {
          this.clientNotes = response.data;
          if (this.clientNotes.length > 0) {
            this.claimFound = true;
            this.claimID = this.clientNotes[0].id
          }
          else {
            this.claimFound = false;
            this.clientNotes = [];
          }
          console.log(response.data);
        })
        .catch(error => {
          this.clientNotes = [];
          this.claimFound = false;
          console.error('There was an error!', error);
        });
    },
    getSimiliarClaims() {
      axios.post(`${process.env.VUE_APP_GET_SIMILARITY}/get-similarity`, { "id": this.claimID })
        .then(response => {
          if (response.data.length > 0) {
            this.claimFound = false;
            this.similarClaims = response.data
            this.clientNotes = this.clientNotes.concat(this.similarClaims);
            console.log(response.data);
          }
          this.clientNotes = this.clientNotes.concat(this.clientNotes);
        })
        .catch(error => {
          console.error('There was an error!', error);
          this.clientNotes = this.clientNotes.concat(this.clientNotes);
        });
    },
    getCaseID() {
      axios.post(`${process.env.VUE_APP_GET_CASEID}/get-case-id`, { "id": this.claimID })
        .then(response => {
          // Access response.data
          const data = response.data;

          // Check if response.data is not empty
          if (data && Object.keys(data).length > 0) {
            console.log("Response data is not empty:", data);
            this.caseID = data.case_id;
            // Handle the non-empty data case
          } else {
            console.log("Response data is empty.");
            // Handle the empty data case
          }
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    },
    //2 words or 10 characters
    async fetchSuggestions() {
      if (this.query.length > 2) {
        axios.get(`${process.env.VUE_APP_AUTO_COMPLETE}/autocomplete`, {
          params: { prompt: this.query }
        }).then(response => {
          console.log(response.data)
          if (response.data.generated_text.length > 0) {
            this.suggestions = response.data.generated_text;
          }
        })
          .catch(error => {
            console.error('There was an error!', error);
          });
      }
    },
    
    selectSuggestion(suggestion) {
      this.query = suggestion;
      this.suggestions = [];
    },
    highlight(index) {
      this.selectedIdx = index;
    },
    unhighlight() {
      this.selectedIdx = -1;
    }

  }
};
</script>
<style scoped>
.client-notes-table {
  /* Styles for your table */
}

ul {
  border: 1px solid lightgray;
}

.list {
  border: 1px solid lightgray;
}

li a {
  border-left: none;
  border-right: none;
  color: lightgray;

}

.inf {
  border-radius: 25px;
  height: 25px;
  width: 25px;
  padding: 1px;
}

.tablehead {
  background-color: #C8E0EF;
  --bs-table-bg: none;
}

table tbody tr:hover {
  background-color: #FFDDA8 !important;

}

table tbody tr:hover * {
  background-color: inherit;

}

table * {
  border: none !important;
}

table tbody td {
  text-align: left;
}

table thead th {
  text-align: left;
}

.error-message {
  color: red;
}

.table {
  width: 100%;
  border-collapse: collapse;
  border: none;
}

.table td {
  padding: 10px;
  border: 1px solid #ddd;
}

.expandable-content {
  max-height: 50px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.expanded-content {
  max-height: none;
}

.show-more {
  cursor: pointer;
  color: blue;
}

.suggestions-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  max-height: 200px;
  /* Limit the height of the suggestions box */
  overflow-y: auto;
  /* Add vertical scrolling if the content exceeds the max-height */
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.suggestion-item {
  padding: 10px;
  cursor: pointer;
  text-align: left;
}

.suggestion-item:hover,
.suggestion-item.selected {
  background-color: #f0f0f0;
}
</style>