evidenceStarRating.vue

<template>
  <section>
    <base-toaster
      :open="toasterIsOpen"
      @close="hideDialog"
    >
      <div class="flex justify-between items-center">
        <font-awesome-icon
          class="ml-3"
          icon="fa-solid fa-thumbs-up "
          size="lg"
        />

        <h4>Request submitted successfully!</h4>
        <button
          class="btn btn-outline"
          @click="hideDialog"
        >
          <font-awesome-icon
            icon="fa-regular fa-circle-xmark"
            size="2x"
          />
        </button>
      </div>
    </base-toaster>
    <div>
      <div class="flex flex-col px-8">
        <div v-if="isLoading">
          <base-spinner />
        </div>
       
        <star-rating
          v-model="currentRating"
          :show-rating="false"
          :star-size="30"
          @rating-selected="validateRating"
        />
        
        <h4 class="border border-solid px-3 py-2 w-24 border-slate-300 rounded-md">
          {{ currentRating }} / 5
        </h4>
       
        
        <textarea
          id="funComment"
          v-model.trim="comment"
          class="
            form-control
            block
            px-3
            py-1.5
            text-base
            font-normal
            text-gray-700
            bg-white bg-clip-padding
            border border-solid border-gray-300
            rounded
            transition
            ease-in-out
            m-0
            focus:text-gray-700
            focus:bg-white
            focus:border-blue-600
            focus:outline-none
          "
          rows="5"
          :placeholder="
            role === 'Maintainer' ? 'Reason is optional' : 'Reason is mandatoy'
          "
          @keyup="validateComment"
        />
        <p
          v-if="message"
          :class="error ? 'text-danger font-bold' : 'text-success font-bold'"
        >
          {{ message }}
        </p>
        <div>
          <button
            class="
              text-white
              bg-blue-600
              hover:bg-blue-700
              focus:ring-2 focus:ring-blue-300
              rounded-lg
              inline-flex
              items-center
              px-5
              py-2.5
              text-center
              font-bold
              mr-2
            "
            @click="updateEvidenceStar"
          >
            Update
          </button>
          <button
            class="
              bg-white
              hover:bg-gray-200
              focus:ring-2 focus:ring-gray-300
              rounded-lg
              border border-gray-300
              px-5
              py-2.5
              hover:text-gray-900
              font-bold
            "
            @click="close"
          >
            Cancel
          </button>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
const _ = require('lodash');
let host = require('../js/const').apiHost;

import StarRating from 'vue-star-rating';
import BaseToaster from '../UI/BaseToaster.vue';
export default {
  components: { StarRating, BaseToaster },
  props: ['rating', 'uniprot', 'canonicalId'],
  data() {
    return {
      currentRating: this.rating,
      message: '',
      comment: '',
      error: false,
      valid: false,
      isLoading: false,
      toasterIsOpen: false,
      isDev: process.env.NODE_ENV === 'development',
    };
  },
  computed: {
    jwt: function () {
      return this.$store.getters['User/jwt'];
    },
    role: function () {
      return this.$store.getters['User/userRole'];
    },
  },
  mounted() {
    console.log('rating is', this.canonicalId, this.uniprot);
  },
  methods: {
    showDialog() {
      this.toasterIsOpen = true;
    },
    hideDialog() {
      this.toasterIsOpen = false;
    },
    close() {
      this.$emit('close');
    },
    validateComment() {
      this.error = false;
      this.message = '';
    },
    validateRating() {
      this.error = false;
      this.message = '';
    },
    async updateEvidenceStar() {
      const vm = this;

      // console.log(host)

      if (vm.isDev) {
        host = require('../js/const').devApiHost;
      }

      let url = `${host}/api/update-items`;
      if (vm.currentRating === vm.rating) {
        this.error = true;
        vm.message = `The confidence score is already ${vm.rating}. Change the rating. `;
        return;
      }

      console.log('true');
      this.error = false;
      vm.message = '';
      let data;
      let entityId = `${vm.canonicalId}==${vm.uniprot}`;
      if (this.role === 'Maintainer') {
        data = {
          Entity: 'condensate_protein',
          EntityId: entityId,
          ChangeOperation: 'update',
          Attribute: 'confidence_score',
          Value: this.currentRating.toString(),
          SubmissionComments:
            'Maintainer do not required to give reason at the moment.',
          Status: 'accepted',
        };
      } else {
        if (vm.comment === '' || this.comment.length < 50) {
          this.error = true;
          vm.message = `The reason field should not be empty or less than 50 characters!`;
          return;
        }
        data = {
          Entity: 'condensate_protein',
          EntityId: entityId,
          ChangeOperation: 'update',
          Attribute: 'confidence_score',
          Value: this.currentRating.toString(),
          SubmissionComments: this.comment,
          Status: 'requested',
        };
      }

      console.log('evidance data', data);
      this.isLoading = true;
      try {
        await this.axios.post(
          url,
          { data: data },
          {
            headers: {
              Authorization: `Bearer ${this.jwt}`,
            },
          }
        );
        this.isLoading = false;
        this.toasterIsOpen = true;
        this.comment = '';
        this.currentRating = this.rating;
        this.$emit('update-key')
        setTimeout(() => {
          this.toasterIsOpen =false;
        }, 2000);
      } catch (e) {
        console.error(e);
        this.isLoading= false;
        this.error = true;
        this.message =
          e.message || 'Something went wrong, please try again later!';
        this.currentRating = this.rating;
      }
    },
  },
};
</script>

<style>
.custom-text {
  font-weight: bold;
  font-size: 1.9em;
  border: 1px solid #cfcfcf;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px;
  color: #999;
  background: #fff;
}
</style>