Skip to content
Snippets Groups Projects
Commit 471ab19b authored by raghosh's avatar raghosh
Browse files

#78: changed color scheme in updateItem actions page too.

parent 56bd6b0a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
web/src/views/UpdateItem.vue
+ 92
− 120
View file @ 471ab19b
<template>
<div>
<base-toaster
:open="toasterIsOpen"
@close="hideDialog"
>
<base-toaster :open="toasterIsOpen" @close="hideDialog">
<div class="flex justify-between items-center">
<font-awesome-icon
class="ml-3"
......@@ -12,22 +9,13 @@
/>
<h4>Request updated successfully!</h4>
<button
class="btn btn-outline"
@click="hideDialog"
>
<font-awesome-icon
icon="fa-regular fa-circle-xmark"
size="2x"
/>
<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"
>
<h3 v-show="error && !jwt" class="text-2xl text-red-500">
{{ errorMsg }}
</h3>
<div
......@@ -49,10 +37,7 @@
>
{{ item === "new" ? "Create new Update Item" : item }}
</h1>
<form
class="w-full md:w-auto"
@submit.prevent="updateReview"
>
<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
......@@ -78,12 +63,7 @@
focus:bg-gray-200 focus:border-blue-700
"
>
<option
disabled
value=""
>
Please select one
</option>
<option disabled value="">Please select one</option>
<option>protein</option>
<option>condensate</option>
<option>condensate_protein</option>
......@@ -118,7 +98,7 @@
"
type="text"
placeholder="UNE6"
>
/>
</div>
</div>
......@@ -148,12 +128,7 @@
focus:bg-gray-200 focus:border-blue-700
"
>
<option
disabled
value=""
>
Please select one
</option>
<option disabled value="">Please select one</option>
<option>add</option>
<option>remove</option>
<option>update</option>
......@@ -188,7 +163,7 @@
"
type="text"
placeholder="functional_type"
>
/>
</div>
</div>
......@@ -219,7 +194,7 @@
"
type="text"
placeholder="driver"
>
/>
</div>
</div>
......@@ -273,7 +248,7 @@
(userRole === 'Contributor' ||
userRole === 'Maintainer' ||
userRole === 'Administrator') &&
itemId !== 'new'
itemId !== 'new'
"
:class="colorChange"
class="
......@@ -357,7 +332,7 @@
</div>
<div class="md:w-2/3">
<p
v-if="!syncResponse"
v-if="!syncedAt && status !== 'synced' && status !== 'failed'"
class="
mt-3
px-4
......@@ -372,10 +347,8 @@
>
Yet to be synced.
</p>
<p
v-else
class="mt-3"
>
<p v-else class="mt-3">
{{ syncResponse }}
</p>
</div>
......@@ -394,7 +367,7 @@
</div>
<div class="md:w-2/3">
<p
v-if="!syncedAt"
v-if="!syncedAt && status !== 'synced' && status !== 'failed'"
class="
mt-3
px-4
......@@ -409,36 +382,22 @@
>
Yet to be synced.
</p>
<p
v-else
class="mt-3"
>
{{ syncedAt }}
</p>
<p v-else class="mt-3">{{ syncedAt }}</p>
</div>
</div>
<div
v-if="
userRole === 'Maintainer' &&
item !== 'new' &&
status != 'synced'
"
class="mt-10"
>
<div v-if="showReviewerSection" 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>
<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>
<h3 class="mb-6">Reviewer Action</h3>
<div class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
......@@ -546,11 +505,7 @@
</div>
<div class="flex space-x-4">
<button
v-if="
userRole === 'Maintainer' &&
item !== 'new' &&
status != 'synced'
"
v-if="showReviewerSection"
type="submit"
:disabled="entityId.length < 3"
class="
......@@ -596,68 +551,85 @@
</div>
</template>
<script>
import BaseSpinner from '../components/UI/BaseSpinner.vue';
import BaseToaster from '../components/UI/BaseToaster.vue';
let host = require('@/components/js/const').apiHost;
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',
name: "UpdateItem",
components: { BaseSpinner, BaseToaster },
props: ['itemId'],
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[]
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)
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: '',
statusErrMsg: "",
reviewerCmtErrMsg: "",
isLoading: false,
toasterIsOpen: false,
actionErrMsg: '',
isDev: process.env.NODE_ENV === 'development',
reqActions: ['Choose an action', 'accepted', 'rejected'],
actionErrMsg: "",
isDev: process.env.NODE_ENV === "development",
reqActions: ["Choose an action", "accepted", "rejected"],
};
},
computed: {
jwt: function () {
return this.$store.getters['User/jwt'];
return this.$store.getters["User/jwt"];
},
userData: function () {
return this.$store.getters['User/userData'];
return this.$store.getters["User/userData"];
},
userRole: function () {
return this.$store.getters['User/userRole'];
return this.$store.getters["User/userRole"];
},
colorChange() {
if (this.status === 'rejected') {
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') {
} else if (this.status === "requested") {
return `bg-pink-500`;
} else if (this.status === "synced") {
return `bg-blue-500`;
} else if (this.status === "accepted") {
return `bg-green-500`;
} else if (this.status === "failed") {
return `bg-gray-500`;
}
return '';
return "";
},
showReviewerSection() {
if (
this.userRole === "Maintainer" &&
this.status !== "failed" &&
this.status !== "synced"
) {
return true;
}
// else if (this.userRole === "Maintainer" && this.status !== "failed") {
// console.log("in failed check");
// return true;
// }
return false;
},
},
mounted: async function () {
......@@ -665,9 +637,9 @@ export default {
const jwt = vm.jwt;
if (jwt === null) {
vm.$router.push('/login');
vm.$router.push("/login");
} else {
if (vm.item !== 'new') {
if (vm.item !== "new") {
vm.load(vm.item);
}
}
......@@ -681,11 +653,11 @@ export default {
},
validateReviewerCmt() {
this.error = false;
this.reviewerCmtErrMsg = '';
this.reviewerCmtErrMsg = "";
},
validateStatusChange() {
this.error = false;
this.statusErrMsg = '';
this.statusErrMsg = "";
},
async update(e) {
e.preventDefault();
......@@ -693,7 +665,7 @@ export default {
const vm = this;
if (vm.isDev) {
host = require('@/components/js/const').devApiHost;
host = require("@/components/js/const").devApiHost;
}
const jwt = vm.jwt;
......@@ -710,7 +682,7 @@ export default {
Value: this.attributeValue,
ChangeOperation: this.changeOperation,
SubmissionComments: this.submissionComments,
Status: vm.userRole === 'Maintainer' ? 'accepted' : this.status,
Status: vm.userRole === "Maintainer" ? "accepted" : this.status,
// ReviewedBy:
// ReviewedAt:
// ReviewComment:
......@@ -719,7 +691,7 @@ export default {
};
try {
if (vm.item !== 'new') {
if (vm.item !== "new") {
const res = await this.axios.put(
`${host}/api/update-items/` + vm.item,
{
......@@ -747,7 +719,7 @@ export default {
// console.log(res)
vm.$router.push('/profile');
vm.$router.push("/profile");
} catch (error) {
// console.log(error.response.data.error.message)
// console.log(error.response)
......@@ -759,7 +731,7 @@ export default {
const vm = this;
if (vm.isDev) {
host = require('@/components/js/const').devApiHost;
host = require("@/components/js/const").devApiHost;
}
const jwt = vm.jwt;
......@@ -804,7 +776,7 @@ export default {
} catch (error) {
// console.error(error)
this.error = true;
this.errorMsg = 'You are not authorized to access this item.';
this.errorMsg = "You are not authorized to access this item.";
vm.isLoading = false;
setTimeout(() => vm.$router.go(-1), 2000);
}
......@@ -813,7 +785,7 @@ export default {
const vm = this;
if (vm.isDev) {
host = require('@/components/js/const').devApiHost;
host = require("@/components/js/const").devApiHost;
}
const jwt = vm.jwt;
......@@ -821,20 +793,20 @@ export default {
vm.loaded = false;
return;
}
if (!this.reviewerStatus || this.reviewerStatus === 'Choose an action') {
console.log('in update review true');
if (!this.reviewerStatus || this.reviewerStatus === "Choose an action") {
console.log("in update review true");
this.error = true;
this.statusErrMsg = 'Please select an action.';
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.';
"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!';
this.reviewerCmtErrMsg = "Comment should not be empty!";
return;
}
// console.log(vm.userData)
......@@ -858,7 +830,7 @@ export default {
);
// console.log(res)
this.reviewComments = '';
this.reviewComments = "";
this.isLoading = false;
this.toasterIsOpen = true;
setTimeout(() => {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment