UpdateItem.vue

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

        <h4>Request updated 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 class="flex items-center justify-center">
      <h3 v-show="error" class="text-2xl text-red-500">{{ errorMsg }}</h3>
      <div v-if="item === 'new' || loaded" class="md:flex w-3/5 card p-2 mt-5">
        <div
          class="p-5 mx-auto text-left font-raleway container max-w-screen-md"
        >
          <h1
            class="
              font-bold
              text-left
              font-montserrat
              text-3xl
              sm:text-5xl
              mb-7
            "
          >
            {{ item === "new" ? "Create new Update Item" : item }}
          </h1>
          <form @submit.prevent="updateReview" class="w-full md:w-auto">
            <div class="md:flex md:items-center mx-3 mb-6">
              <div class="md:w-1/3">
                <label
                  class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4"
                  for="inline-entity-type"
                >
                  Entity Type
                </label>
              </div>
              <div class="md:w-2/3">
                <select
                  v-model="entity"
                  disabled
                  class="
                    bg-white
                    w-full
                    py-2
                    text-gray-700
                    bg-transparent
                    border-b
                    hover:border-gray-700
                    focus:bg-gray-200 focus:border-blue-700
                  "
                  id="inline-entity-type"
                >
                  <option disabled value="">Please select one</option>
                  <option>protein</option>
                  <option>condensate</option>
                  <option>condensate_protein</option>
                </select>
              </div>
            </div>

            <div class="md:flex md:items-center mx-3 mb-6">
              <div class="md:w-1/3">
                <label
                  class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4"
                  for="inline-entity-id"
                >
                  Entity ID
                </label>
              </div>
              <div class="md:w-2/3">
                <input
                  disabled
                  v-model="entityId"
                  class="
                    bg-white
                    w-full
                    py-2
                    text-gray-700
                    outline-none
                    bg-transparent
                    border-b
                    hover:border-gray-700
                    focus:bg-gray-200 focus:border-blue-700
                  "
                  id="inline-entity-id"
                  type="text"
                  placeholder="UNE6"
                />
              </div>
            </div>

            <div class="md:flex md:items-center mx-3 mb-6">
              <div class="md:w-1/3">
                <label
                  class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4"
                  for="inline-change-operation"
                >
                  Change Operation
                </label>
              </div>
              <div class="md:w-2/3">
                <select
                  disabled
                  v-model="changeOperation"
                  class="
                    bg-white
                    w-full
                    py-2
                    text-gray-700
                    outline-none
                    bg-transparent
                    border-b
                    hover:border-gray-700
                    focus:bg-gray-200 focus:border-blue-700
                  "
                  id="inline-change-operation"
                >
                  <option disabled value="">Please select one</option>
                  <option>add</option>
                  <option>remove</option>
                  <option>update</option>
                </select>
              </div>
            </div>

            <div class="md:flex md:items-center mx-3 mb-6">
              <div class="md:w-1/3">
                <label
                  class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4"
                  for="inline-attribute-name"
                >
                  Attribute Name
                </label>
              </div>
              <div class="md:w-2/3">
                <input
                  disabled
                  v-model="attribute"
                  class="
                    bg-white
                    w-full
                    py-2
                    text-gray-700
                    outline-none
                    bg-transparent
                    border-b
                    hover:border-gray-700
                    focus:bg-gray-200 focus:border-blue-700
                  "
                  id="inline-attribute-name"
                  type="text"
                  placeholder="functional_type"
                />
              </div>
            </div>

            <div class="md:flex md:items-center mx-3 mb-6">
              <div class="md:w-1/3">
                <label
                  class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4"
                  for="inline-attribute-value"
                >
                  Attribute Value
                </label>
              </div>
              <div class="md:w-2/3">
                <input
                  disabled
                  v-model="attributeValue"
                  class="
                    bg-white
                    w-full
                    py-2
                    text-gray-700
                    outline-none
                    bg-transparent
                    border-b
                    hover:border-gray-700
                    focus:bg-gray-200 focus:border-blue-700
                  "
                  id="inline-attribute-value"
                  type="text"
                  placeholder="driver"
                />
              </div>
            </div>

            <div class="md:flex md:items-center mx-3 mb-6">
              <div class="md:w-1/3">
                <label
                  class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4"
                  for="inline-comment"
                >
                  Comments
                </label>
              </div>
              <div class="md:w-2/3">
                <textarea
                  disabled
                  rows="5"
                  v-model="submissionComments"
                  class="
                    bg-white
                    w-full
                    py-2
                    text-gray-700
                    outline-none
                    bg-transparent
                    border-b
                    hover:border-gray-700
                    focus:bg-gray-200 focus:border-blue-700
                  "
                  id="inline-comment"
                  type="text"
                  placeholder="your comments here"
                ></textarea>
              </div>
            </div>

            <div
              v-if="item !== 'new'"
              class="md:flex md:items-center mx-3 mb-6"
            >
              <div class="md:w-1/3">
                <label
                  class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4"
                  for="inline-status"
                >
                  Status
                </label>
              </div>
              <div class="md:w-2/3">
                <p
                  v-if="
                    (userRole === 'Contributor' ||
                      userRole === 'Maintainer' ||
                      userRole === 'Administrator') &&
                    itemId !== 'new'
                  "
                  class="mt-3"
                >
                  {{ status }}
                </p>
              </div>
            </div>
            <div
              v-if="item !== 'new' && reviewedBy.data"
              class="md:flex md:items-center mx-3 mb-6"
            >
              <div class="md:w-1/3">
                <label
                  class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4"
                  for="inline-status"
                >
                  Reviewer
                </label>
              </div>
              <div class="md:w-2/3">
                <p class="mt-3">
                  {{ reviewedBy.data.attributes.full_name }}
                </p>
              </div>
            </div>
            <div
              v-if="item !== 'new' && reviewedBy.data"
              class="md:flex md:items-center mx-3 mb-6"
            >
              <div class="md:w-1/3">
                <label
                  class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4"
                  for="inline-status"
                >
                  Reviewer Comments
                </label>
              </div>
              <div class="md:w-2/3">
                <p class="mt-3">
                  {{ reviewerComments }}
                </p>
              </div>
              
            </div>
            

             

            <!-- <button
              v-if="item !== 'new' && userRole !== 'Maintainer'"
              type="submit"
              :disabled="entityId.length < 3"
              class="bg-green-400 p-5 text-white"
            >
              {{ item === "new" ? "Submit" : "Update" }}
              <span class="fa fa-arrow-right" />
            </button> -->

            <div
              v-if="
                userRole === 'Maintainer' &&
                item !== 'new'
              "
              class="mt-10"
            >
              <div class="relative flex py-5 items-center">
                <div class="flex-grow border-t border-gray-400"></div>
                <span class="flex-shrink mx-4 text-gray-400"
                  >Reviewer Section</span
                >
                <div class="flex-grow border-t border-gray-400"></div>
              </div>
              <div v-if="isLoading">
                <base-spinner></base-spinner>
              </div>
              <h3 class="mb-6">Reviewer Action</h3>

              <div class="md:flex md:items-center mx-3 mb-6">
                <div class="md:w-1/3">
                  <label
                    class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4"
                    for="inline-status"
                  >
                    Change Status to
                  </label>
                </div>
                <div class="md:w-2/3">
                  <div>
                    <select
                      
                      @change="validateStatusChange"
                      v-model="reviewerStatus"
                      class="
                        w-full
                        py-2
                        text-gray-700
                        outline-none
                        bg-transparent
                        border-b
                        hover:border-gray-700
                        focus:bg-gray-200 focus:border-gray-700
                      "
                      id="inline-status"
                    >
                      <option value="Select" selected disabled>Select</option>
                      <option>accepted</option>
                      <option>rejected</option>
                    </select>

                    <h3
                      v-if="error && statusErrMsg"
                      class="text-2xl text-red-500"
                    >
                      {{ statusErrMsg }}
                    </h3>
                  </div>
                </div>
              </div>

              <div class="md:flex md:items-center mx-3 mb-6">
                <div class="md:w-1/3">
                  <label
                    class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4"
                    for="inline-reviewer-comment"
                  >
                    Reviewer Comment
                  </label>
                </div>
                <div class="md:w-2/3">
                  <div>
                    <textarea
                      rows="5"
                      v-model.trim="reviewComments"
                      @keyup="validateReviewerCmt"
                      class="
                        bg-white
                        w-full
                        py-2
                        text-gray-700
                        outline-none
                        bg-transparent
                        border-b
                        hover:border-gray-700
                        focus:bg-gray-200 focus:border-gray-700
                      "
                      id="inline-reviewer-comment"
                      type="text"
                      placeholder="reviewer comments here"
                    ></textarea>
                  </div>
                  <h3
                    v-if="error && reviewerCmtErrMsg"
                    class="text-2xl text-red-500"
                  >
                    {{ reviewerCmtErrMsg }}
                  </h3>
                </div>
              </div>

              <!-- <div class="md:flex md:items-center mx-3 mb-6">
                <div class="md:w-1/3">
                  <label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-reviewer-comment">
                    Sync Response
                  </label>
                </div>
                <div class="md:w-2/3">
                  <p class="mt-3">
                    {{syncResponse}}
                  </p>
                </div>
              </div> -->

              
            </div>
            <div class="flex space-x-4">
            <button
            v-if=" userRole === 'Maintainer' &&
                item !== 'new'"
                type="submit"
                :disabled="entityId.length < 3"
                class="bg-green-400 font-bold rounded-lg p-5 text-white"
               
              >
                {{ "Update Review" }} <font-awesome-icon icon="fa-solid fa-pen-to-square" />
              </button>
              <button
            
                type="button"
               class="
               
              text-white
              font-bold
              rounded-lg
              bg-blue-600
              hover:bg-blue-800
              focus:ring-4 focus:ring-blue-300
              rounded-lg
              items-center
              px-5
              py-4
              text-center
              mr-2
            "
            @click="$router.go(-1)"
               
              >
                 <span class="fa fa-arrow-left" /> Back
              </button>
            </div>
            

          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BaseSpinner from "../components/UI/BaseSpinner.vue";
import BaseToaster from "../components/UI/BaseToaster.vue";
let host = require("@/components/js/const").apiHost;

export default {
  components: { BaseSpinner, BaseToaster },
  name: "UpdateItem",
  props: ["itemId"],
  data() {
    return {
      item: this.$route.params.item ? this.$route.params.item : this.itemId,
      entity: "protein", // [protein, condensate, condensate_protein]
      entityId: "", // protein: <uniprot_id>, condensate: <canonical_id>, condensate_protein: <uniprot_id>==<canonical_id>
      changeOperation: "add", // add/remove/update/update_add/update_remove
      attribute: "", // protein: functional_type[driver/client/regulator], pubmed_ids[]
      // condensate: description, proteins
      // condensate_protein: confidence_score, pubmed_ids
      attributeValue: "", // the value of the attribute to be updated. Could be "null" for add/remove operations. The data type is dynamic
      status: "requested", // 1. requested, 2. accepted, 3. rejected, 4. synced
      reviewerStatus: "",
      submittedBy: "",
      submittedAt: "", // datetime
      submissionComments: "",
      reviewedBy: "",
      reviewedAt: "", // datetime
      reviewComments: "",
      reviewerComments: "",
      syncedAt: "", // datetime
      syncResponse: "", // response from the sync process (errors if any)
      loaded: false,
      error: false,
      errorMsg: `An error occurred, please try again`,
      statusErrMsg: "",
      reviewerCmtErrMsg: "",
      isLoading: false,
      toasterIsOpen: false,
      isDev: process.env.NODE_ENV === "development",
    };
  },
  computed: {
    jwt: function () {
      return this.$store.getters["User/jwt"];
    },
    userData: function () {
      return this.$store.getters["User/userData"];
    },
    userRole: function () {
      return this.$store.getters["User/userRole"];
    },
  },
  methods: {
    showDialog() {
      this.toasterIsOpen = true;
    },
    hideDialog() {
      this.toasterIsOpen = false;
      this.$router.go(-1)
      
    },
    validateReviewerCmt() {
      this.error = false;
      this.reviewerCmtErrMsg = "";
    },
    validateStatusChange() {
      this.error = false;
      this.statusErrMsg = "";
    },
    async update(e) {
      e.preventDefault();

      const vm = this;

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

      const jwt = vm.jwt;
      if (jwt === null) {
        vm.loaded = false;
        return;
      }

      // console.log(vm.userData)
      let dat = {
        Entity: this.entity,
        EntityId: this.entityId,
        Attribute: this.attribute,
        Value: this.attributeValue,
        ChangeOperation: this.changeOperation,
        SubmissionComments: this.submissionComments,
        Status: vm.userRole === "Maintainer" ? "accepted" : this.status,
        // ReviewedBy:
        // ReviewedAt:
        // ReviewComment:
        // SyncedAt:
        // SyncResponse:
      };

      try {
        if (vm.item !== "new") {
          const res = await this.axios.put(
            `${host}/api/update-items/` + vm.item,
            {
              data: dat,
            },
            {
              headers: {
                Authorization: `Bearer ${jwt}`,
              },
            }
          );
        } else {
          const res = await this.axios.post(
            `${host}/api/update-items`,
            {
              data: dat,
            },
            {
              headers: {
                Authorization: `Bearer ${jwt}`,
              },
            }
          );
        }

        // console.log(res)

        vm.$router.push("/profile");
      } catch (error) {
        // console.log(error.response.data.error.message)
        // console.log(error.response)
        this.error = true;
        this.errorMsg = error;
      }
    },
    async load(id) {
      const vm = this;

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

      const jwt = vm.jwt;
      if (jwt === null) {
        vm.loaded = false;
        return;
      }

      // console.log(vm.userData)
vm.isLoading= true;
      try {
        const res = await this.axios.get(`${host}/api/update-items/` + id, {
          headers: {
            Authorization: `Bearer ${jwt}`,
          },
        });

        console.log(res.data.data)

        if (res.data.data) {
          const d = res.data.data.attributes;
          vm.item = res.data.data.id;
          vm.entity = d.Entity;
          vm.entityId = d.EntityId;
          vm.attribute = d.Attribute;
          vm.attributeValue = d.Value;
          vm.changeOperation = d.ChangeOperation;
          vm.status = d.Status;
          vm.submissionComments = d.SubmissionComments;
          vm.reviewerComments = d.ReviewComments;
          vm.reviewedBy = d.reviewedBy;
          vm.reviewedAt = d.ReviewedAt;
          // ReviewedBy:
          // ReviewedAt:
          // ReviewComment:
          // SyncedAt:
          // SyncResponse:
        }
vm.isLoading=false;
        vm.loaded = true;
      } catch (error) {
        // console.error(error)
        this.error = true;
        this.errorMsg = "You are not authorized to access this item.";
        vm.isLoading=false;
        setTimeout(() => vm.$router.go(-1), 2000);
      }
    },
    async updateReview() {
      const vm = this;

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

      const jwt = vm.jwt;
      if (jwt === null) {
        vm.loaded = false;
        return;
      }
      if (!this.reviewerStatus || this.reviewerStatus === "Select") {
        console.log("in update review true");
        this.error = true;
        this.statusErrMsg =
          "Please change the status to either ACCEPTED or REJECTED!";

        return;
      } else if (!this.reviewComments) {
        this.error = true;
        this.reviewerCmtErrMsg = "Comment should not be empty!";
        return;
      }
      // console.log(vm.userData)
      let dat = {
        Status: this.reviewerStatus,
        ReviewComments: this.reviewComments,
        ReviewedAt: this.reviewedAt,
      };
      this.isLoading = true;
      try {
        await this.axios.put(
          `${host}/api/update-item/review/` + vm.item,
          {
            data: dat,
          },
          {
            headers: {
              Authorization: `Bearer ${jwt}`,
            },
          }
        );

        // console.log(res)
        this.reviewComments = "";
        this.isLoading = false;
        this.toasterIsOpen = true;
      } catch (error) {
        // console.log(error.response.data.error.message)
        // console.log(error.response)
        this.error = true;
        this.errorMsg = error;
        vm.isLoading=false;
      }
    },
  },
  mounted: async function () {
    const vm = this;

    const jwt = vm.jwt;
    if (jwt === null) {
      vm.$router.push("/login");
    } else {
      if (vm.item !== "new") {
        vm.load(vm.item);
        
      }
    }
  },
};
</script>
<style>
@import url("~@/assets/bootstrap.css");

a {
  color: #42b983;
}
</style>