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