UpdateItem.vue

<template>
  <div>
    <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 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="update" 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"
                  class="bg-white w-full py-2 text-gray-700 outline-none bg-transparent border-b hover:border-blue-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
                  v-model="entityId"
                  class="bg-white w-full py-2 text-gray-700 outline-none bg-transparent border-b hover:border-blue-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
                  v-model="changeOperation"
                  class="bg-white w-full py-2 text-gray-700 outline-none bg-transparent border-b hover:border-blue-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
                  v-model="attribute"
                  class="bg-white w-full py-2 text-gray-700 outline-none bg-transparent border-b hover:border-blue-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
                  v-model="attributeValue"
                  class="bg-white w-full py-2 text-gray-700 outline-none bg-transparent border-b hover:border-blue-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">
                <input
                  v-model="submissionComments"
                  class="bg-white w-full py-2 text-gray-700 outline-none bg-transparent border-b hover:border-blue-700 focus:bg-gray-200 focus:border-blue-700"
                  id="inline-comment"
                  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="mt-3"
                >
                  {{ status }}
                </p>
              </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-reviewer-comment"
                >
                  Reviewer Comments
                </label>
              </div>
              <div class="md:w-2/3">
                <p
                  v-if="
                    (userRole === 'Contributor' ||
                      userRole === 'Maintainer' ||
                      userRole === 'Administrator') &&
                    itemId !== 'new'
                  "
                  class="mt-3"
                >
                  {{ reviewComments }}
                </p>
              </div>
            </div>

            <button
              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' || userRole === 'Administrator') &&
                item !== 'new'
              "
              class="mt-10"
            >
              <hr />
              <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"
                  >
                    Status
                  </label>
                </div>
                <div class="md:w-2/3">
                  <select
                    v-model="status"
                    class="bg-white w-full py-2 text-gray-700 outline-none bg-transparent border-b hover:border-blue-700 focus:bg-gray-200 focus:border-blue-700"
                    id="inline-status"
                  >
                    <option disabled value="">Please select one</option>
                    <option>requested</option>
                    <option>accepted</option>
                    <option>rejected</option>
                    <option>synced</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-reviewer-comment"
                  >
                    Reviewer Comment
                  </label>
                </div>
                <div class="md:w-2/3">
                  <input
                    v-model="reviewComments"
                    class="bg-white w-full py-2 text-gray-700 outline-none bg-transparent border-b hover:border-blue-700 focus:bg-gray-200 focus:border-blue-700"
                    id="inline-reviewer-comment"
                    type="text"
                    placeholder="reviewer comments here"
                  />
                </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>

              <button
                type="button"
                :disabled="entityId.length < 3"
                class="bg-green-400 p-5 text-white"
                @click="updateReview"
              >
                {{ "Update Review" }} <span class="fa fa-arrow-right" />
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
<<<<<<< HEAD
=======
let host = require('@/components/js/const').apiHost;

>>>>>>> develop
export default {
  name: "UpdateItem",
  props: ["itemId"],
  data() {
    return {
      item: this.$route.params.item ? this.$route.params.item : this.itemId,
<<<<<<< HEAD
      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. Patially_Accepted, 5. Synced
      submittedBy: "",
      submittedAt: "", // datetime
      submissionComments: "",
      reviewedBy: "",
      reviewedAt: "", // datetime
      reviewComments: "",
      syncedAt: "", // datetime
      syncResponse: "", // response from the sync process (errors if any)
      loaded: false,
      error: false,
      errorMsg: `An error occurred, please try again`,
    };
=======
      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
      submittedBy: '',
      submittedAt: '', // datetime
      submissionComments: '',
      reviewedBy: '',
      reviewedAt: '', // datetime
      reviewComments: '',
      syncedAt: '', // datetime
      syncResponse: '', // response from the sync process (errors if any)
      loaded: false,
      error: false,
      errorMsg: `An error occurred, please try again`,
      isDev: process.env.NODE_ENV === 'development',
    }
>>>>>>> develop
  },
  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: {
    async update(e) {
<<<<<<< HEAD
      const vm = this;
      e.preventDefault();
=======
      e.preventDefault()
>>>>>>> develop

      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 {
<<<<<<< HEAD
        if (vm.item !== "new") {
          const res = await this.axios.put(
            `http://localhost:1337/api/update-items/` + vm.item,
            {
              data: dat,
            },
            {
              headers: {
                Authorization: `Bearer ${jwt}`,
              },
=======
        if(vm.item !== 'new') {
          const res = await this.axios.put(`${host}/api/update-items/` + vm.item, {
            data: dat,
          }, {
            headers: {
              Authorization: `Bearer ${jwt}`
>>>>>>> develop
            }
          );
        } else {
<<<<<<< HEAD
          console.log("in post");
          const res = await this.axios.post(
            `http://localhost:1337/api/update-items`,
            {
              data: dat,
            },
            {
              headers: {
                Authorization: `Bearer ${jwt}`,
              },
=======
          const res = await this.axios.post(`${host}/api/update-items`, {
            data: dat,
          }, {
            headers: {
              Authorization: `Bearer ${jwt}`
>>>>>>> develop
            }
          );
        }

        // 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)

      try {
<<<<<<< HEAD
        const res = await this.axios.get(
          `http://localhost:1337/api/update-items/` + id,
          {
            headers: {
              Authorization: `Bearer ${jwt}`,
            },
=======
        const res = await this.axios.get(`${host}/api/update-items/` + id, {
          headers: {
            Authorization: `Bearer ${jwt}`
>>>>>>> develop
          }
        );

        // console.log(res)

        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.reviewComments = d.ReviewComments;
          vm.reviewedBy = d.reviewedBy;
          vm.reviewedAt = d.ReviewedAt;
          // ReviewedBy:
          // ReviewedAt:
          // ReviewComment:
          // SyncedAt:
          // SyncResponse:
        }

        vm.loaded = true;
      } catch (error) {
        // console.error(error)
        this.error = true;
        this.errorMsg = "You are not authorized to access this item.";
        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;
      }

      // console.log(vm.userData)
      let dat = {
        Status: this.status,
        ReviewComments: this.reviewComments,
        ReviewedAt: this.reviewedAt,
      };

      try {
<<<<<<< HEAD
        await this.axios.put(
          `http://localhost:1337/api/update-item/review/` + vm.item,
          {
            data: dat,
          },
          {
            headers: {
              Authorization: `Bearer ${jwt}`,
            },
=======
        await this.axios.put(`${host}/api/update-item/review/` + vm.item, {
          data: dat,
        }, {
          headers: {
            Authorization: `Bearer ${jwt}`
>>>>>>> develop
          }
        );

        // console.log(res)
        vm.$router.go(-1);
      } catch (error) {
        // console.log(error.response.data.error.message)
        // console.log(error.response)
        this.error = true;
        this.errorMsg = error;
      }
    },
  },
  mounted: 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>