UpdateItem.vue

<template>
  <div>
    <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 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 && !jwt" class="text-2xl text-red-500">
        {{ errorMsg }}
      </h3>
      <div
        v-if="item === 'new' || loaded"
        class="md:flex w-3/5 border border-gray-300 rounded-lg 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 class="w-full md:w-auto" @submit.prevent="updateReview">
            <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
                  id="inline-entity-type"
                  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
                  "
                >
                  <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
                  id="inline-entity-id"
                  v-model="entityId"
                  disabled
                  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
                  "
                  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
                  id="inline-change-operation"
                  v-model="changeOperation"
                  disabled
                  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
                  "
                >
                  <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
                  id="inline-attribute-name"
                  v-model="attribute"
                  disabled
                  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
                  "
                  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
                  id="inline-attribute-value"
                  v-model="attributeValue"
                  disabled
                  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
                  "
                  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
                  id="inline-comment"
                  v-model="submissionComments"
                  disabled
                  rows="5"
                  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
                  "
                  type="text"
                  placeholder="your comments here"
                />
              </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="colorChange"
                  class="
                    rounded-full
                    font-bold
                    capitalize
                    mt-3
                    px-4
                    mr-2
                    w-40
                    text-white
                    p-2
                    rounded
                    flex
                    items-center
                    justify-center
                  "
                >
                  <!-- <div class="rounded-full px-4 mr-2 bg-gray-500 text-white p-2 rounded flex items-center justify-center">${sData}</div> -->
                  {{ 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="status != 'rejected'"
              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
                  v-if="!syncResponse"
                  class="
                    mt-3
                    px-4
                    mr-2
                    w-full
                    bg-gray-300
                    p-2
                    flex
                    items-center
                    justify-center
                  "
                >
                  Yet to be synced.
                </p>
                <p v-else class="mt-3">
                  {{ syncResponse }}
                </p>
              </div>
            </div>
            <div
              v-if="status != 'rejected'"
              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"
                >
                  Synced At
                </label>
              </div>
              <div class="md:w-2/3">
                <p
                  v-if="!syncedAt"
                  class="
                    mt-3
                    px-4
                    mr-2
                    w-full
                    bg-gray-300
                    p-2
                    flex
                    items-center
                    justify-center
                  "
                >
                  Yet to be synced.
                </p>
                <p v-else class="mt-3">
                  {{ syncedAt }}
                </p>
              </div>
            </div>

            <div
              v-if="
                userRole === 'Maintainer' &&
                item !== 'new' &&
                status != 'synced'
              "
              class="mt-10"
            >
              <div class="relative flex py-5 items-center">
                <div class="flex-grow border-t border-gray-400" />
                <span class="flex-shrink mx-4 text-gray-400"
                  >Reviewer Section</span
                >
                <div class="flex-grow border-t border-gray-400" />
              </div>
              <div v-if="isLoading">
                <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
                      id="inline-status"
                      v-model="reviewerStatus"
                      class="
                        w-full
                        rounded-lg
                        py-2
                        text-gray-700
                        border
                        bg-transparent
                        border-gray-500
                        hover:border-gray-700
                        focus:bg-gray-200 focus:border-gray-700
                      "
                      @change="validateStatusChange"
                    >
                      <!-- <option value="Select" selected disabled>Select</option>
                      <option>accepted</option>
                      <option>rejected</option> -->

                      <option
                        v-for="action in reqActions"
                        :key="action"
                        :value="action"
                      >
                        {{ action }}
                      </option>
                    </select>

                    <p
                      v-if="error && statusErrMsg"
                      class="text-2xl p-2 text-red-500"
                    >
                      {{ statusErrMsg }}
                    </p>
                  </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
                      id="inline-reviewer-comment"
                      v-model.trim="reviewComments"
                      rows="5"
                      class="
                        bg-white
                        w-full
                        py-2
                        px-2
                        rounded-lg
                        text-gray-700
                        border
                        bg-transparent
                        border-gray-500
                        hover:border-gray-700
                      "
                      type="text"
                      placeholder="Reviewer comments here"
                      @keyup="validateReviewerCmt"
                    />
                  </div>
                  <p
                    v-if="error && reviewerCmtErrMsg"
                    class="text-2xl text-red-500"
                  >
                    {{ reviewerCmtErrMsg }}
                  </p>
                </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' &&
                  status != 'synced'
                "
                type="submit"
                :disabled="entityId.length < 3"
                class="
                  text-white
                  bg-blue-500
                  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
                "
              >
                {{ "Update Review" }}
              </button>
              <div class="group">
                <button
                  type="button"
                  class="
                    bg-gray
                    group-hover:bg-gray-400 group-hover:text-white
                    focus:ring-2 focus:ring-gray-300
                    rounded-lg
                    border border-gray-300
                    px-5
                    py-3
                    hover:text-gray-900
                    font-bold
                  "
                  @click="$router.go(-1)"
                >
                  Back
                </button>
              </div>
            </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 {
  name: "UpdateItem",
  components: { BaseSpinner, BaseToaster },
  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: "Choose an action",
      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,
      actionErrMsg: "",
      isDev: process.env.NODE_ENV === "development",
      reqActions: ["Choose an action", "accepted", "rejected"],
    };
  },
  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"];
    },
    colorChange() {
      if (this.status === "rejected") {
        return `bg-red-500`;
      } else if (this.status === "requested") {
        return `bg-yellow-500`;
      } else if (this.status === "synced") {
        return `bg-gray-500`;
      } else if (this.status === "accepted") {
        return `bg-green-500`;
      }
      return "";
    },
  },
  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);
      }
    }
  },
  methods: {
    showDialog() {
      this.toasterIsOpen = true;
    },
    hideDialog() {
      this.toasterIsOpen = false;
    },
    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:
          vm.syncedAt = d.SyncedAt;
          vm.syncResponse = d.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 === "Choose an action") {
        console.log("in update review true");
        this.error = true;
        this.statusErrMsg = "Please select an action.";

        return;
      } else if (this.reviewerStatus === this.status) {
        this.error = true;
        this.statusErrMsg =
          "The new change status is same as previous. Please select another value.";
        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;
        setTimeout(() => {
          this.toasterIsOpen = false;
          this.load(this.item);
        }, 2000);
      } catch (error) {
        // console.log(error.response.data.error.message)
        // console.log(error.response)
        this.error = true;
        this.errorMsg = error;
        vm.isLoading = false;
      }
    },
  },
};
</script>
<style scoped>
@import url("~@/assets/bootstrap.css");

a {
  color: #ef0087 !important;
}
</style>