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>
let host = require('@/components/js/const').apiHost;

export default {
  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
      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',
    }
  },
  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) {
      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)

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

        // 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 {
        await this.axios.put(`${host}/api/update-item/review/` + vm.item, {
          data: dat,
        }, {
          headers: {
            Authorization: `Bearer ${jwt}`
          }
        });

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