From 465b8b5d8589b7ca4731dccb02a98edad03cbacd Mon Sep 17 00:00:00 2001
From: raghosh <raghosh@loaner-laptop-13.local>
Date: Mon, 20 Jun 2022 12:22:20 +0200
Subject: [PATCH] #84: Maintainer reason is either default text or the given
reason.
---
web/src/components/CMS/DriverCriterion.vue | 162 ++++----
.../components/CMS/ExperimentalEvidence.vue | 174 ++++-----
.../components/CMS/ProteinFunctionalType.vue | 133 +++----
web/src/components/CMS/addDeleteMarker.vue | 242 ++++++------
web/src/components/CMS/addDeletePubmed.vue | 366 ++++++++----------
web/src/components/CMS/evidenceStarRating.vue | 91 ++---
.../components/CMS/updateFunctionalType.vue | 119 +++---
web/src/components/CondensateDetailPage.vue | 330 ++++++++--------
8 files changed, 732 insertions(+), 885 deletions(-)
diff --git a/web/src/components/CMS/DriverCriterion.vue b/web/src/components/CMS/DriverCriterion.vue
index 87b7035..d1d1527 100644
--- a/web/src/components/CMS/DriverCriterion.vue
+++ b/web/src/components/CMS/DriverCriterion.vue
@@ -1,9 +1,6 @@
<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,14 +9,8 @@
/>
<h4>Request submitted 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>
@@ -68,10 +59,7 @@
</option>
</select>
- <p
- v-if="!addDriverCriterion.isValid"
- class="text-red-500 mt-2"
- >
+ <p v-if="!addDriverCriterion.isValid" class="text-red-500 mt-2">
{{ driverCriterionMsg }}
</p>
</div>
@@ -118,11 +106,11 @@
type="radio"
:value="item"
@blur="clearValidity('deleteDriverCriterion')"
- >
+ />
<div class="flex items-center">
<label :for="index">
- {{ item === 'self_ps' ? 'Self-PS' : formatValue(item) }}
+ {{ item === "self_ps" ? "Self-PS" : formatValue(item) }}
</label>
</div>
</div>
@@ -135,10 +123,7 @@
{{ driverCriterionMsg }}
</p>
</div>
- <div
- class="w-full"
- :class="{ invalid: !comment.isValid }"
- >
+ <div class="w-full" :class="{ invalid: !comment.isValid }">
<textarea
v-if="(!data && mode === 'Add') || data"
v-model.trim="comment.value"
@@ -165,16 +150,10 @@
@blur="clearValidity('comment')"
/>
- <p
- v-if="!comment.isValid"
- class="text-red-500"
- >
+ <p v-if="!comment.isValid" class="text-red-500">
Reason must not be empty or less than 50 characters.
</p>
- <p
- v-if="serverError"
- class="text-danger font-bold"
- >
+ <p v-if="serverError" class="text-danger font-bold">
{{ errMessage }}
</p>
</div>
@@ -224,56 +203,56 @@
</template>
<script>
-const _ = require('lodash');
-let host = require('../js/const').apiHost;
-import BaseSpinner from '../UI/BaseSpinner.vue';
-import BaseToaster from '../UI/BaseToaster.vue';
+const _ = require("lodash");
+let host = require("../js/const").apiHost;
+import BaseSpinner from "../UI/BaseSpinner.vue";
+import BaseToaster from "../UI/BaseToaster.vue";
export default {
components: { BaseSpinner, BaseToaster },
- props: ['data', 'uniprotId', 'canonicalId', 'mode'],
+ props: ["data", "uniprotId", "canonicalId", "mode"],
data() {
return {
isLoading: false,
toasterIsOpen: false,
formIsValid: true,
addDriverCriterion: {
- value: 'Select',
+ value: "Select",
isValid: true,
},
deleteDriverCriterion: {
- value: '',
+ value: "",
isValid: true,
},
comment: {
- value: '',
+ value: "",
isValid: true,
},
driverCriterionData: [
- { id: '1', type: 'Select', displayValue:'Select' },
- { id: '2', type: 'self_ps', displayValue:'Self-PS' },
- { id: '3', type: 'induces_assembly', displayValue:'Induces Assembly' },
- { id: '4', type: 'essential_for_integrity', displayValue: 'Essential For Integrity' },
+ { id: "1", type: "Select", displayValue: "Select" },
+ { id: "2", type: "self_ps", displayValue: "Self-PS" },
+ { id: "3", type: "induces_assembly", displayValue: "Induces Assembly" },
+ {
+ id: "4",
+ type: "essential_for_integrity",
+ displayValue: "Essential For Integrity",
+ },
],
- driverCriterionMsg: '',
+ driverCriterionMsg: "",
serverError: false,
- errMessage: '',
+ errMessage: "",
};
},
computed: {
jwt: function () {
- return this.$store.getters['User/jwt'];
+ return this.$store.getters["User/jwt"];
},
role: function () {
- return this.$store.getters['User/userRole'];
+ return this.$store.getters["User/userRole"];
},
-
},
-
-
methods: {
- formatValue(input){
-
+ formatValue(input) {
let val = _.startCase(input);
return val;
},
@@ -284,19 +263,19 @@ export default {
this.toasterIsOpen = false;
},
close() {
- this.$emit('closeProteinDriverCriterion');
+ this.$emit("closeProteinDriverCriterion");
},
clearValidity(input) {
this[input].isValid = true;
},
validateForm() {
this.formIsValid = true;
- if (this.mode === 'Add') {
+ if (this.mode === "Add") {
if (
- this.addDriverCriterion.value === '' ||
- this.addDriverCriterion.value === 'Select'
+ this.addDriverCriterion.value === "" ||
+ this.addDriverCriterion.value === "Select"
) {
- this.driverCriterionMsg = 'Please select an Driver Criterion value!';
+ this.driverCriterionMsg = "Please select an Driver Criterion value!";
this.addDriverCriterion.isValid = false;
this.formIsValid = false;
}
@@ -316,18 +295,17 @@ export default {
this.formIsValid = false;
}
} else {
- if (this.deleteDriverCriterion.value === '') {
-
+ if (this.deleteDriverCriterion.value === "") {
this.driverCriterionMsg =
- 'Please select an Experimental evidence value to remove!';
+ "Please select an Experimental evidence value to remove!";
this.deleteDriverCriterion.isValid = false;
this.formIsValid = false;
}
}
if (
- (this.comment.value === '' || this.comment.value.length < 50) &&
- this.role !== 'Maintainer'
+ (this.comment.value === "" || this.comment.value.length < 50) &&
+ this.role !== "Maintainer"
) {
this.comment.isValid = false;
this.formIsValid = false;
@@ -340,56 +318,58 @@ export default {
}
if (this.isDev) {
- host = require('../js/const').devApiHost;
+ host = require("../js/const").devApiHost;
}
let url = `${host}/api/update-items`;
let data;
let entityId = `${this.canonicalId}==${this.uniprotId}`;
- if (this.mode === 'Add') {
- if (this.role === 'Maintainer') {
+ if (this.mode === "Add") {
+ if (this.role === "Maintainer") {
data = {
- Entity: 'condensate_protein',
+ Entity: "condensate_protein",
EntityId: entityId,
- ChangeOperation: 'add',
- Attribute: 'driver_criterion',
- SubmissionComments:
- 'Maintainer do not need to provide a reason for such change at the moment!',
+ ChangeOperation: "add",
+ Attribute: "driver_criterion",
+ SubmissionComments: this.comment.value
+ ? this.comment.value
+ : "Maintainer do not need to provide a reason for such change at the moment!",
Value: this.addDriverCriterion.value,
- Status: 'accepted',
+ Status: "accepted",
};
} else {
data = {
- Entity: 'condensate_protein',
+ Entity: "condensate_protein",
EntityId: entityId,
- ChangeOperation: 'add',
- Attribute: 'driver_criterion',
+ ChangeOperation: "add",
+ Attribute: "driver_criterion",
SubmissionComments: this.comment.value,
Value: this.addDriverCriterion.value,
- Status: 'requested',
+ Status: "requested",
};
}
} else {
- if (this.role === 'Maintainer') {
+ if (this.role === "Maintainer") {
data = {
- Entity: 'condensate_protein',
+ Entity: "condensate_protein",
EntityId: entityId,
- ChangeOperation: 'remove',
- Attribute: 'driver_criterion',
- SubmissionComments:
- 'Maintainer do not need to provide a reason for such change at the moment!',
+ ChangeOperation: "remove",
+ Attribute: "driver_criterion",
+ SubmissionComments: this.comment.value
+ ? this.comment.value
+ : "Maintainer do not need to provide a reason for such change at the moment!",
Value: this.deleteDriverCriterion.value,
- Status: 'accepted',
+ Status: "accepted",
};
} else {
data = {
- Entity: 'condensate_protein',
+ Entity: "condensate_protein",
EntityId: entityId,
- ChangeOperation: 'remove',
- Attribute: 'driver_criterion',
+ ChangeOperation: "remove",
+ Attribute: "driver_criterion",
SubmissionComments: this.comment.value,
Value: this.deleteDriverCriterion.value,
- Status: 'requested',
+ Status: "requested",
};
}
}
@@ -407,12 +387,12 @@ export default {
);
this.isLoading = false;
this.toasterIsOpen = true;
- this.addDriverCriterion.value = 'Select';
- this.deleteDriverCriterion.value = '';
- this.comment.value = '';
+ this.addDriverCriterion.value = "Select";
+ this.deleteDriverCriterion.value = "";
+ this.comment.value = "";
this.serverError = false;
- this.errMessage = '';
- this.$emit('update-key');
+ this.errMessage = "";
+ this.$emit("update-key");
setTimeout(() => {
this.toasterIsOpen = false;
}, 2000);
@@ -421,7 +401,7 @@ export default {
this.isLoading = false;
this.serverError = true;
this.errMessage =
- e.message || 'Something went wrong, please try again later!';
+ e.message || "Something went wrong, please try again later!";
}
},
},
diff --git a/web/src/components/CMS/ExperimentalEvidence.vue b/web/src/components/CMS/ExperimentalEvidence.vue
index 8a4db56..6903f78 100644
--- a/web/src/components/CMS/ExperimentalEvidence.vue
+++ b/web/src/components/CMS/ExperimentalEvidence.vue
@@ -1,9 +1,6 @@
<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,14 +9,8 @@
/>
<h4>Request submitted 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>
@@ -76,14 +67,13 @@
:key="options.id"
:value="options.type"
>
- {{ options.type==='frap' ? 'FRAP' :formatValue(options.type) }}
+ {{
+ options.type === "frap" ? "FRAP" : formatValue(options.type)
+ }}
</option>
</select>
- <p
- v-if="!experimentalEvidance.isValid"
- class="text-red-500 mt-2"
- >
+ <p v-if="!experimentalEvidance.isValid" class="text-red-500 mt-2">
{{ experimentalEvidanceMsg }}
</p>
</div>
@@ -131,11 +121,11 @@
type="radio"
:value="item"
@blur="clearValidity('deleteExperimentalEvidance')"
- >
+ />
<div class="flex items-center">
<label :for="index">
- {{ item === 'frap' ? 'FRAP' : formatValue(item) }}
+ {{ item === "frap" ? "FRAP" : formatValue(item) }}
</label>
</div>
</div>
@@ -148,10 +138,7 @@
{{ experimentalEvidanceMsg }}
</p>
</div>
- <div
- class="w-full"
- :class="{ invalid: !comment.isValid }"
- >
+ <div class="w-full" :class="{ invalid: !comment.isValid }">
<textarea
v-if="(!data && mode === 'Add') || data"
v-model.trim="comment.value"
@@ -178,16 +165,10 @@
@blur="clearValidity('comment')"
/>
- <p
- v-if="!comment.isValid"
- class="text-red-500"
- >
+ <p v-if="!comment.isValid" class="text-red-500">
Reason must not be empty or less than 50 characters.
</p>
- <p
- v-if="serverError"
- class="text-danger font-bold"
- >
+ <p v-if="serverError" class="text-danger font-bold">
{{ errMessage }}
</p>
</div>
@@ -237,58 +218,60 @@
</template>
<script>
-
-let host = require('../js/const').apiHost;
-import BaseSpinner from '../UI/BaseSpinner.vue';
-import BaseToaster from '../UI/BaseToaster.vue';
-import _ from 'lodash'
+let host = require("../js/const").apiHost;
+import BaseSpinner from "../UI/BaseSpinner.vue";
+import BaseToaster from "../UI/BaseToaster.vue";
+import _ from "lodash";
export default {
components: { BaseSpinner, BaseToaster },
- props: ['data', 'uniprotId', 'canonicalId', 'mode'],
+ props: ["data", "uniprotId", "canonicalId", "mode"],
data() {
return {
isLoading: false,
toasterIsOpen: false,
formIsValid: true,
experimentalEvidance: {
- value: 'Select',
+ value: "Select",
isValid: true,
},
deleteExperimentalEvidance: {
- value: '',
+ value: "",
isValid: true,
},
comment: {
- value: '',
+ value: "",
isValid: true,
},
proteinExpEvidenceData: [
- { id: '1', type: 'Select', displayData:'Select' },
- { id: '2', type: 'in_vitro', displayData:'In Vitro' },
- { id: '3', type: 'in_vivo', displayData:'In Vivo' },
- { id: '4', type: 'in_cellulo', displayData:'In Cellulo' },
- { id: '5', type: 'mass_spectrometry', displayData:'Mass Spectrometry' },
- { id: '6', type: 'colocalization', displayData:'Colocalization' },
- { id: '7', type: 'frap', displayData:'FRAP' },
- { id: '8', type: 'others', displayData:'Others' },
+ { id: "1", type: "Select", displayData: "Select" },
+ { id: "2", type: "in_vitro", displayData: "In Vitro" },
+ { id: "3", type: "in_vivo", displayData: "In Vivo" },
+ { id: "4", type: "in_cellulo", displayData: "In Cellulo" },
+ {
+ id: "5",
+ type: "mass_spectrometry",
+ displayData: "Mass Spectrometry",
+ },
+ { id: "6", type: "colocalization", displayData: "Colocalization" },
+ { id: "7", type: "frap", displayData: "FRAP" },
+ { id: "8", type: "others", displayData: "Others" },
],
- experimentalEvidanceMsg: '',
+ experimentalEvidanceMsg: "",
serverError: false,
- errMessage: '',
+ errMessage: "",
};
},
computed: {
jwt: function () {
- return this.$store.getters['User/jwt'];
+ return this.$store.getters["User/jwt"];
},
role: function () {
- return this.$store.getters['User/userRole'];
+ return this.$store.getters["User/userRole"];
},
-
},
-
+
methods: {
- formatValue(input){
+ formatValue(input) {
let val = _.startCase(input);
return val;
},
@@ -299,20 +282,20 @@ export default {
this.toasterIsOpen = false;
},
close() {
- this.$emit('closeProteinExpEvidence');
+ this.$emit("closeProteinExpEvidence");
},
clearValidity(input) {
this[input].isValid = true;
},
validateForm() {
this.formIsValid = true;
- if (this.mode === 'Add') {
+ if (this.mode === "Add") {
if (
- this.experimentalEvidance.value === '' ||
- this.experimentalEvidance.value === 'Select'
+ this.experimentalEvidance.value === "" ||
+ this.experimentalEvidance.value === "Select"
) {
this.experimentalEvidanceMsg =
- 'Please select an Experimental evidence value!';
+ "Please select an Experimental evidence value!";
this.experimentalEvidance.isValid = false;
this.formIsValid = false;
}
@@ -332,18 +315,17 @@ export default {
this.formIsValid = false;
}
} else {
- if (this.deleteExperimentalEvidance.value === '') {
-
+ if (this.deleteExperimentalEvidance.value === "") {
this.experimentalEvidanceMsg =
- 'Please select an Experimental evidence value to remove!';
+ "Please select an Experimental evidence value to remove!";
this.deleteExperimentalEvidance.isValid = false;
this.formIsValid = false;
}
}
if (
- (this.comment.value === '' || this.comment.value.length < 50) &&
- this.role !== 'Maintainer'
+ (this.comment.value === "" || this.comment.value.length < 50) &&
+ this.role !== "Maintainer"
) {
this.comment.isValid = false;
this.formIsValid = false;
@@ -356,56 +338,58 @@ export default {
}
if (this.isDev) {
- host = require('../js/const').devApiHost;
+ host = require("../js/const").devApiHost;
}
let url = `${host}/api/update-items`;
let data;
let entityId = `${this.canonicalId}==${this.uniprotId}`;
- if (this.mode === 'Add') {
- if (this.role === 'Maintainer') {
+ if (this.mode === "Add") {
+ if (this.role === "Maintainer") {
data = {
- Entity: 'condensate_protein',
+ Entity: "condensate_protein",
EntityId: entityId,
- ChangeOperation: 'add',
- Attribute: 'exp_evidence',
- SubmissionComments:
- 'Maintainer do not need to provide a reason for such change at the moment!',
+ ChangeOperation: "add",
+ Attribute: "exp_evidence",
+ SubmissionComments: this.comment.value
+ ? this.comment.value
+ : "Maintainer do not need to provide a reason for such change at the moment!",
Value: this.experimentalEvidance.value,
- Status: 'accepted',
+ Status: "accepted",
};
} else {
data = {
- Entity: 'condensate_protein',
+ Entity: "condensate_protein",
EntityId: entityId,
- ChangeOperation: 'add',
- Attribute: 'exp_evidence',
+ ChangeOperation: "add",
+ Attribute: "exp_evidence",
SubmissionComments: this.comment.value,
Value: this.experimentalEvidance.value,
- Status: 'requested',
+ Status: "requested",
};
}
} else {
- if (this.role === 'Maintainer') {
+ if (this.role === "Maintainer") {
data = {
- Entity: 'condensate_protein',
+ Entity: "condensate_protein",
EntityId: entityId,
- ChangeOperation: 'remove',
- Attribute: 'exp_evidence',
- SubmissionComments:
- 'Maintainer do not need to provide a reason for such change at the moment!',
+ ChangeOperation: "remove",
+ Attribute: "exp_evidence",
+ SubmissionComments: this.comment.value
+ ? this.comment.value
+ : "Maintainer do not need to provide a reason for such change at the moment!",
Value: this.deleteExperimentalEvidance.value,
- Status: 'accepted',
+ Status: "accepted",
};
} else {
data = {
- Entity: 'condensate_protein',
+ Entity: "condensate_protein",
EntityId: entityId,
- ChangeOperation: 'remove',
- Attribute: 'exp_evidence',
+ ChangeOperation: "remove",
+ Attribute: "exp_evidence",
SubmissionComments: this.comment.value,
Value: this.deleteExperimentalEvidance.value,
- Status: 'requested',
+ Status: "requested",
};
}
}
@@ -423,12 +407,12 @@ export default {
);
this.isLoading = false;
this.toasterIsOpen = true;
- this.experimentalEvidance.value = 'Select';
- this.deleteExperimentalEvidance.value = '';
- this.comment.value = '';
+ this.experimentalEvidance.value = "Select";
+ this.deleteExperimentalEvidance.value = "";
+ this.comment.value = "";
this.serverError = false;
- this.errMessage = '';
- this.$emit('update-key');
+ this.errMessage = "";
+ this.$emit("update-key");
setTimeout(() => {
this.toasterIsOpen = false;
}, 2000);
@@ -437,7 +421,7 @@ export default {
this.isLoading = false;
this.serverError = true;
this.errMessage =
- e.message || 'Something went wrong, please try again later!';
+ e.message || "Something went wrong, please try again later!";
}
},
},
diff --git a/web/src/components/CMS/ProteinFunctionalType.vue b/web/src/components/CMS/ProteinFunctionalType.vue
index 573c61c..693f137 100644
--- a/web/src/components/CMS/ProteinFunctionalType.vue
+++ b/web/src/components/CMS/ProteinFunctionalType.vue
@@ -1,9 +1,6 @@
<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,14 +9,8 @@
/>
<h4>Request submitted 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>
@@ -34,10 +25,7 @@
</div>
<div class="form-group">
<div class="flex flex-col space-y-4 px-8">
- <div
- class="w-full"
- :class="{ invalid: !functionalType.isValid }"
- >
+ <div class="w-full" :class="{ invalid: !functionalType.isValid }">
<h1
class="
text-left
@@ -65,18 +53,12 @@
</option>
</select>
- <p
- v-if="!functionalType.isValid"
- class="text-red-500 mt-2"
- >
+ <p v-if="!functionalType.isValid" class="text-red-500 mt-2">
{{ functionalTypeMsg }}
</p>
</div>
- <div
- class="w-full"
- :class="{ invalid: !comment.isValid }"
- >
+ <div class="w-full" :class="{ invalid: !comment.isValid }">
<textarea
v-model.trim="comment.value"
:class="
@@ -107,16 +89,10 @@
@blur="clearValidity('comment')"
/>
- <p
- v-if="!comment.isValid"
- class="text-red-500"
- >
+ <p v-if="!comment.isValid" class="text-red-500">
Reason must not be empty or less than 50 characters.
</p>
- <p
- v-if="serverError"
- class="text-danger font-bold"
- >
+ <p v-if="serverError" class="text-danger font-bold">
{{ errMessage }}
</p>
</div>
@@ -165,53 +141,53 @@
</template>
<script>
-import BaseSpinner from '../UI/BaseSpinner.vue';
-import BaseToaster from '../UI/BaseToaster.vue';
-const _ = require('lodash');
-let host = require('../js/const').apiHost;
+import BaseSpinner from "../UI/BaseSpinner.vue";
+import BaseToaster from "../UI/BaseToaster.vue";
+const _ = require("lodash");
+let host = require("../js/const").apiHost;
export default {
components: { BaseSpinner, BaseToaster },
- props: ['proteinFunctionalType', 'uniprotId', 'canonicalId'],
+ props: ["proteinFunctionalType", "uniprotId", "canonicalId"],
data() {
return {
- isDev: process.env.NODE_ENV === 'development',
+ isDev: process.env.NODE_ENV === "development",
formIsValid: true,
functionalType: {
value: this.proteinFunctionalType
? this.proteinFunctionalType
- : 'Select',
+ : "Select",
isValid: true,
},
functionalOptions: [
- { id: '1', type: 'Select' },
- { id: '2', type: 'client' },
- { id: '3', type: 'driver' },
- { id: '4', type: 'regulator' },
+ { id: "1", type: "Select" },
+ { id: "2", type: "client" },
+ { id: "3", type: "driver" },
+ { id: "4", type: "regulator" },
],
comment: {
- value: '',
+ value: "",
isValid: true,
},
- functionalTypeMsg: '',
+ functionalTypeMsg: "",
error: false,
- errMsg: '',
+ errMsg: "",
serverError: false,
- errMessage: '',
+ errMessage: "",
isLoading: false,
toasterIsOpen: false,
};
},
-
+
computed: {
jwt: function () {
- return this.$store.getters['User/jwt'];
+ return this.$store.getters["User/jwt"];
},
role: function () {
- return this.$store.getters['User/userRole'];
+ return this.$store.getters["User/userRole"];
},
},
methods: {
- formatValue(input){
+ formatValue(input) {
let val = _.startCase(input);
return val;
},
@@ -222,7 +198,7 @@ export default {
this.toasterIsOpen = false;
},
close() {
- this.$emit('closeToggleProteinFunctionalType');
+ this.$emit("closeToggleProteinFunctionalType");
},
selectValue() {},
clearValidity(input) {
@@ -231,21 +207,23 @@ export default {
validateForm() {
this.formIsValid = true;
if (
- this.functionalType.value === '' ||
- this.functionalType.value === 'Select'
+ this.functionalType.value === "" ||
+ this.functionalType.value === "Select"
) {
- this.functionalTypeMsg = 'Please select a funtional type!';
+ this.functionalTypeMsg = "Please select a funtional type!";
this.functionalType.isValid = false;
this.formIsValid = false;
}
if (this.functionalType.value === this.proteinFunctionalType) {
- this.functionalTypeMsg = `The selected functional type is already ${_.startCase(this.proteinFunctionalType)}. Please select a different functional type from the list.`;
+ this.functionalTypeMsg = `The selected functional type is already ${_.startCase(
+ this.proteinFunctionalType
+ )}. Please select a different functional type from the list.`;
this.functionalType.isValid = false;
this.formIsValid = false;
}
if (
- (this.comment.value === '' || this.comment.value.length < 50) &&
- this.role !== 'Maintainer'
+ (this.comment.value === "" || this.comment.value.length < 50) &&
+ this.role !== "Maintainer"
) {
this.comment.isValid = false;
this.formIsValid = false;
@@ -258,37 +236,38 @@ export default {
}
if (this.isDev) {
- host = require('../js/const').devApiHost;
+ host = require("../js/const").devApiHost;
}
let url = `${host}/api/update-items`;
let data;
let entityId = `${this.canonicalId}==${this.uniprotId}`;
- if (this.role === 'Maintainer') {
+ if (this.role === "Maintainer") {
data = {
- Entity: 'condensate_protein',
+ Entity: "condensate_protein",
EntityId: entityId,
- ChangeOperation: 'update',
- Attribute: 'functional_type',
- SubmissionComments:
- 'Maintainer do not need to provide a reason for such change at the moment!',
+ ChangeOperation: "update",
+ Attribute: "functional_type",
+ SubmissionComments: this.comment.value
+ ? this.comment.value
+ : "Maintainer do not need to provide a reason for such change at the moment!",
Value: this.functionalType.value,
- Status: 'accepted',
+ Status: "accepted",
};
} else {
data = {
- Entity: 'condensate_protein',
+ Entity: "condensate_protein",
EntityId: entityId,
- ChangeOperation: 'update',
- Attribute: 'functional_type',
+ ChangeOperation: "update",
+ Attribute: "functional_type",
SubmissionComments: this.comment.value,
Value: this.functionalType.value,
- Status: 'requested',
+ Status: "requested",
};
}
this.isValid = true;
- this.error = '';
+ this.error = "";
this.isLoading = true;
try {
@@ -304,14 +283,14 @@ export default {
this.isLoading = false;
this.toasterIsOpen = true;
this.functionalType.value = !this.proteinFunctionalType
- ? 'Select'
+ ? "Select"
: this.proteinFunctionalType;
- this.comment.value = '';
+ this.comment.value = "";
this.isValid = true;
- this.error = '';
+ this.error = "";
this.serverError = false;
- this.errMessage = '';
- this.$emit('update-key');
+ this.errMessage = "";
+ this.$emit("update-key");
setTimeout(() => {
this.toasterIsOpen = false;
}, 2000);
@@ -320,7 +299,7 @@ export default {
this.isLoading = false;
this.serverError = true;
this.errMessage =
- e.message || 'Something went wrong, please try again later!';
+ e.message || "Something went wrong, please try again later!";
}
},
},
diff --git a/web/src/components/CMS/addDeleteMarker.vue b/web/src/components/CMS/addDeleteMarker.vue
index 2792fbb..0148ccb 100644
--- a/web/src/components/CMS/addDeleteMarker.vue
+++ b/web/src/components/CMS/addDeleteMarker.vue
@@ -1,9 +1,6 @@
<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,14 +9,8 @@
/>
<h4>Request submitted 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>
@@ -35,14 +26,10 @@
<div v-if="isLoading">
<base-spinner />
</div>
- <div
- v-if="markerData"
- class="form-group"
- >
- <label
- class="control-label col-sm-2"
- for="actionType"
- >Select Action</label>
+ <div v-if="markerData" class="form-group">
+ <label class="control-label col-sm-2" for="actionType"
+ >Select Action</label
+ >
<div class="col-sm-10">
<select
id="actionType"
@@ -50,11 +37,7 @@
class="form-control"
@change="selectValue"
>
- <option
- v-for="item in actionOptions"
- :key="item"
- class=""
- >
+ <option v-for="item in actionOptions" :key="item" class="">
{{ item }}
</option>
</select>
@@ -62,10 +45,9 @@
</div>
<div v-if="showAddMarker || !markerData">
<div class="form-group">
- <label
- class="control-label col-sm-2"
- for="marker"
- >Add a Marker</label>
+ <label class="control-label col-sm-2" for="marker"
+ >Add a Marker</label
+ >
<div class="col-sm-10">
<div class="panel panel-default">
<div class="panel-body">
@@ -75,7 +57,7 @@
class="form-control"
type="text"
placeholder="Uniprot ID"
- >
+ />
<div class="overflow-auto h-60">
<div
v-for="(item, index) in filteredAddSearch"
@@ -88,11 +70,8 @@
type="radio"
:value="item"
@click="selectMarker"
- >
- <label
- class="control-label"
- :for="index"
- >
+ />
+ <label class="control-label" :for="index">
{{ item }}
</label>
</div>
@@ -108,10 +87,9 @@
</div>
</div>
<div class="form-group">
- <label
- class="control-label col-sm-2"
- for="markerComment"
- >Reason</label>
+ <label class="control-label col-sm-2" for="markerComment"
+ >Reason</label
+ >
<div class="col-sm-10">
<textarea
@@ -161,7 +139,7 @@
class="form-control"
type="text"
placeholder="Uniprot ID"
- >
+ />
<div class="overflow-auto h-60">
<div
v-for="(item, index) in filteredDeleteSearch"
@@ -174,11 +152,8 @@
type="radio"
:value="item"
@click="selectMarker"
- >
- <label
- class="control-label"
- :for="index"
- >
+ />
+ <label class="control-label" :for="index">
{{ item }}
</label>
</div>
@@ -194,10 +169,9 @@
</div>
</div>
<div class="form-group -mt-9">
- <label
- class="control-label col-sm-2"
- for="funComment"
- >Reason</label>
+ <label class="control-label col-sm-2" for="funComment"
+ >Reason</label
+ >
<div class="col-sm-10">
<textarea
@@ -237,10 +211,7 @@
</div>
</div>
</div>
- <div
- v-if="showBtn || !markerData"
- class="form-group"
- >
+ <div v-if="showBtn || !markerData" class="form-group">
<div class="col-sm-2" />
<div class="col-sm-10">
<p
@@ -299,39 +270,39 @@
</template>
<script>
-import BaseSpinner from '../UI/BaseSpinner.vue';
-import BaseToaster from '../UI/BaseToaster.vue';
-const _ = require('lodash');
-let host = require('../js/const').apiHost;
+import BaseSpinner from "../UI/BaseSpinner.vue";
+import BaseToaster from "../UI/BaseToaster.vue";
+const _ = require("lodash");
+let host = require("../js/const").apiHost;
export default {
components: { BaseSpinner, BaseToaster },
- props: ['markerData', 'condensateId', 'proteins'],
+ props: ["markerData", "condensateId", "proteins"],
data() {
return {
- isDev: process.env.NODE_ENV === 'development',
- comment: '',
- search: '',
- actionOptions: ['Add', 'Delete'],
- actionType: '',
- marker: '',
+ isDev: process.env.NODE_ENV === "development",
+ comment: "",
+ search: "",
+ actionOptions: ["Add", "Delete"],
+ actionType: "",
+ marker: "",
uniprotIds: [],
error: false,
- message: '',
+ message: "",
showAddMarker: false,
showDeleteMarker: false,
showBtn: false,
- commentError: '',
- markerError: '',
+ commentError: "",
+ markerError: "",
isLoading: false,
toasterIsOpen: false,
};
},
computed: {
role: function () {
- return this.$store.getters['User/userRole'];
+ return this.$store.getters["User/userRole"];
},
jwt: function () {
- return this.$store.getters['User/jwt'];
+ return this.$store.getters["User/jwt"];
},
filteredAddSearch() {
return this.uniprotIds.filter((f) => f.includes(this.search));
@@ -357,27 +328,27 @@ export default {
this.toasterIsOpen = false;
},
markerValid() {
- this.markerError = '';
+ this.markerError = "";
},
commentValid() {
- this.commentError = '';
+ this.commentError = "";
},
selectValue() {
- if (this.actionType === 'Add') {
+ if (this.actionType === "Add") {
this.error = false;
- this.marker = '';
- this.message = '';
- this.comment = '';
+ this.marker = "";
+ this.message = "";
+ this.comment = "";
this.showAddMarker = true;
this.showDeleteMarker = false;
this.showBtn = true;
- } else if (this.actionType === 'Delete') {
+ } else if (this.actionType === "Delete") {
this.error = false;
- this.marker = '';
- this.message = '';
- this.comment = '';
+ this.marker = "";
+ this.message = "";
+ this.comment = "";
this.showDeleteMarker = true;
this.showAddMarker = false;
@@ -385,17 +356,17 @@ export default {
}
},
close() {
- this.$emit('close');
+ this.$emit("close");
},
validateComment() {},
selectMarker() {
- this.markerError = '';
+ this.markerError = "";
},
async editMarker() {
const vm = this;
if (vm.isDev) {
- host = require('../js/const').devApiHost;
+ host = require("../js/const").devApiHost;
}
let url = `${host}/api/update-items`;
@@ -403,18 +374,18 @@ export default {
// console.log(url);
let data;
- if (this.marker === '') {
+ if (this.marker === "") {
this.error = true;
- this.markerError = 'Select a Marker.';
+ this.markerError = "Select a Marker.";
return;
}
- if (this.actionType !== 'Delete') {
+ if (this.actionType !== "Delete") {
if (this.markerData) {
const presentUniprot = this.markerData.find((f) => f === this.marker);
if (presentUniprot) {
this.error = true;
this.markerError =
- 'Selected Uniprot ID is already present. Please select another Uniprot Id to add. ';
+ "Selected Uniprot ID is already present. Please select another Uniprot Id to add. ";
return;
}
}
@@ -422,32 +393,33 @@ export default {
if (!this.actionType) {
// console.log('True', this.role);
- if (this.role === 'Maintainer') {
+ if (this.role === "Maintainer") {
data = {
- Entity: 'condensate',
+ Entity: "condensate",
EntityId: this.condensateId,
- ChangeOperation: 'add',
- Attribute: 'biomarkers',
+ ChangeOperation: "add",
+ Attribute: "biomarkers",
Value: this.marker,
- SubmissionComments:
- 'Maintainer do not need to provide a reason for such change at the moment!',
- Status: 'accepted',
+ SubmissionComments: this.comment
+ ? this.comment
+ : "Maintainer do not need to provide a reason for such change at the moment!",
+ Status: "accepted",
};
} else {
- if (this.comment === '' || this.comment.length < 50) {
+ if (this.comment === "" || this.comment.length < 50) {
this.error = true;
this.commentError =
- 'Reason should not be empty or less than 50 characters!';
+ "Reason should not be empty or less than 50 characters!";
return;
}
data = {
- Entity: 'condensate',
+ Entity: "condensate",
EntityId: this.condensateId,
- ChangeOperation: 'add',
- Attribute: 'biomarkers',
+ ChangeOperation: "add",
+ Attribute: "biomarkers",
Value: this.marker,
SubmissionComments: this.comment,
- Status: 'requested',
+ Status: "requested",
};
}
@@ -460,38 +432,39 @@ export default {
// return;
// }
// }
- } else if (this.actionType === 'Add') {
+ } else if (this.actionType === "Add") {
// if (this.marker === "") {
// this.error = true;
// this.markerError = "Select a Marker.";
// return;
// }
- if (this.role === 'Maintainer') {
+ if (this.role === "Maintainer") {
data = {
- Entity: 'condensate',
+ Entity: "condensate",
EntityId: this.condensateId,
- ChangeOperation: 'add',
- Attribute: 'biomarkers',
+ ChangeOperation: "add",
+ Attribute: "biomarkers",
Value: this.marker,
- SubmissionComments:
- 'Maintainer do not need to provide a reason for such change at the moment!',
- Status: 'accepted',
+ SubmissionComments: this.comment
+ ? this.comment
+ : "Maintainer do not need to provide a reason for such change at the moment!",
+ Status: "accepted",
};
} else {
- if (this.comment === '' || this.comment.length < 50) {
+ if (this.comment === "" || this.comment.length < 50) {
this.error = true;
this.commentError =
- 'Reason should not be empty or less than 50 characters!';
+ "Reason should not be empty or less than 50 characters!";
return;
}
data = {
- Entity: 'condensate',
+ Entity: "condensate",
EntityId: this.condensateId,
- ChangeOperation: 'add',
- Attribute: 'biomarkers',
+ ChangeOperation: "add",
+ Attribute: "biomarkers",
Value: this.marker,
SubmissionComments: this.comment,
- Status: 'requested',
+ Status: "requested",
};
}
@@ -504,38 +477,39 @@ export default {
// return;
// }
// }
- } else if (this.actionType === 'Delete') {
+ } else if (this.actionType === "Delete") {
// if (this.marker === "") {
// this.error = true;
// this.markerError = "Select a Marker to delete.";
// return;
// }
- if (this.role === 'Maintainer') {
+ if (this.role === "Maintainer") {
data = {
- Entity: 'condensate',
+ Entity: "condensate",
EntityId: this.condensateId,
- ChangeOperation: 'remove',
- Attribute: 'biomarkers',
+ ChangeOperation: "remove",
+ Attribute: "biomarkers",
Value: this.marker,
- SubmissionComments:
- 'Maintainer do not need to provide a reason for such change at the moment!',
- Status: 'accepted',
+ SubmissionComments: this.comment
+ ? this.comment
+ : "Maintainer do not need to provide a reason for such change at the moment!",
+ Status: "accepted",
};
} else {
- if (this.comment === '' || this.comment.length < 50) {
+ if (this.comment === "" || this.comment.length < 50) {
this.error = true;
this.commentError =
- 'Reason should not be empty or less than 50 characters!';
+ "Reason should not be empty or less than 50 characters!";
return;
}
data = {
- Entity: 'condensate',
+ Entity: "condensate",
EntityId: this.condensateId,
- ChangeOperation: 'remove',
- Attribute: 'biomarkers',
+ ChangeOperation: "remove",
+ Attribute: "biomarkers",
Value: this.marker,
SubmissionComments: this.comment,
- Status: 'requested',
+ Status: "requested",
};
}
}
@@ -554,21 +528,21 @@ export default {
this.isLoading = false;
this.toasterIsOpen = true;
- this.comment = '';
+ this.comment = "";
this.error = false;
this.serverError = false;
- this.marker = '';
- this.commentError = '';
- this.$emit('update-key')
+ this.marker = "";
+ this.commentError = "";
+ this.$emit("update-key");
setTimeout(() => {
- this.toasterIsOpen =false;
+ this.toasterIsOpen = false;
}, 2000);
} catch (e) {
console.error(e);
- this.isLoading= false;
+ this.isLoading = false;
this.error = true;
this.message =
- e.message || 'Something went wrong, please try again later!';
+ e.message || "Something went wrong, please try again later!";
}
},
},
diff --git a/web/src/components/CMS/addDeletePubmed.vue b/web/src/components/CMS/addDeletePubmed.vue
index 2334fba..317a2a8 100644
--- a/web/src/components/CMS/addDeletePubmed.vue
+++ b/web/src/components/CMS/addDeletePubmed.vue
@@ -1,9 +1,6 @@
<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,14 +9,8 @@
/>
<h4>Request submitted 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>
@@ -46,7 +37,8 @@
"
for="pubId"
>
- Enter Pubmed ID to add.</label>
+ Enter Pubmed ID to add.</label
+ >
<input
id="pubId"
@@ -55,18 +47,16 @@
type="text"
placeholder="Pubmed ID"
@keyup="validation"
- >
- <p
- v-if="!isValid && error"
- class="text-red-600 mt-4 font-bold"
- >
+ />
+ <p v-if="!isValid && error" class="text-red-600 mt-4 font-bold">
{{ error }}
</p>
<label
class="text-left font-bold mb-2 text-xl sm:text-2xl"
for="funComment"
- >Reason</label>
+ >Reason</label
+ >
<div>
<textarea
@@ -171,7 +161,8 @@
sm:text-2xl
font-montserrat
"
- >Select Pubmed ID to remove.</label>
+ >Select Pubmed ID to remove.</label
+ >
<div>
<div
v-for="(item, index) in getPubmed"
@@ -184,7 +175,7 @@
type="radio"
:value="item"
@click="selectPubmedId"
- >
+ />
<div class="flex items-center">
<label :for="index">
{{ item }}
@@ -203,7 +194,8 @@
font-montserrat
"
for="funComment"
- >Reason</label>
+ >Reason</label
+ >
<div>
<textarea
@@ -232,10 +224,7 @@
placeholder="Please provide evidence/PubMed ID."
@keyup="validateComment"
/>
- <p
- v-if="!isValid && error"
- class="text-red-600 mt-4 font-bold"
- >
+ <p v-if="!isValid && error" class="text-red-600 mt-4 font-bold">
{{ error }}
</p>
<p
@@ -304,14 +293,10 @@
</div>
</div>
</div>
- <div
- v-if="mode === 'protein'"
- class="form-group"
- >
- <label
- class="control-label col-sm-4"
- for="actionType"
- >Select Action</label>
+ <div v-if="mode === 'protein'" class="form-group">
+ <label class="control-label col-sm-4" for="actionType"
+ >Select Action</label
+ >
<div class="col-sm-8">
<div>
<select
@@ -320,11 +305,7 @@
class="form-control"
@change="selectValue"
>
- <option
- v-for="item in actionOptions"
- :key="item"
- class=""
- >
+ <option v-for="item in actionOptions" :key="item" class="">
{{ item }}
</option>
</select>
@@ -334,10 +315,9 @@
<div v-if="showAddPubmedId">
<div class="form-group">
- <label
- class="control-label col-sm-4"
- for="pubId"
- >Enter pubmed ID</label>
+ <label class="control-label col-sm-4" for="pubId"
+ >Enter pubmed ID</label
+ >
<div class="col-sm-8">
<input
id="pubId"
@@ -346,20 +326,16 @@
type="text"
placeholder="Pubmed ID"
@keyup="validation"
- >
- <p
- v-if="!isValid && error"
- class="text-red-600 mt-4 font-bold"
- >
+ />
+ <p v-if="!isValid && error" class="text-red-600 mt-4 font-bold">
{{ error }}
</p>
</div>
</div>
<div class="form-group">
- <label
- class="control-label col-sm-4"
- for="funComment"
- >Reason</label>
+ <label class="control-label col-sm-4" for="funComment"
+ >Reason</label
+ >
<div class="col-sm-8">
<textarea
@@ -414,11 +390,8 @@
type="radio"
:value="item"
@click="selectPubmedId"
- >
- <label
- class="control-label"
- :for="index"
- >
+ />
+ <label class="control-label" :for="index">
{{ item }}
</label>
</div>
@@ -427,10 +400,9 @@
</div>
</div>
<div class="form-group -mt-9">
- <label
- class="control-label col-sm-4"
- for="funComment"
- >Reason</label>
+ <label class="control-label col-sm-4" for="funComment"
+ >Reason</label
+ >
<div class="col-sm-8">
<textarea
@@ -459,10 +431,7 @@
placeholder="Please provide evidence/PubMed ID."
@keyup="validateComment"
/>
- <p
- v-if="!isValid && error"
- class="text-red-600 mt-4 font-bold"
- >
+ <p v-if="!isValid && error" class="text-red-600 mt-4 font-bold">
{{ error }}
</p>
<p
@@ -544,50 +513,49 @@
</template>
<script>
-import BaseSpinner from '../UI/BaseSpinner.vue';
-import BaseToaster from '../UI/BaseToaster.vue';
+import BaseSpinner from "../UI/BaseSpinner.vue";
+import BaseToaster from "../UI/BaseToaster.vue";
//import BaseToaster from '../UI/BaseToaster.vue'
-const _ = require('lodash');
-let host = require('../js/const').apiHost;
+const _ = require("lodash");
+let host = require("../js/const").apiHost;
export default {
components: { BaseSpinner, BaseToaster },
- props: ['data', 'mode', 'pubmed', 'uniprot', 'type', 'canonicalId'],
+ props: ["data", "mode", "pubmed", "uniprot", "type", "canonicalId"],
data() {
return {
- actionType: '',
- pubmedId: '',
- buttonText: '',
+ actionType: "",
+ pubmedId: "",
+ buttonText: "",
showButtons: false,
- actionOptions: ['Add', 'Delete'],
+ actionOptions: ["Add", "Delete"],
showAddPubmedId: false,
showDeletePubmedId: false,
isValid: false,
inputVal: true,
- error: '',
- commentError: '',
- comment: '',
- message: '',
- pubmedIds: '',
+ error: "",
+ commentError: "",
+ comment: "",
+ message: "",
+ pubmedIds: "",
serverError: false,
whitespaceRegex: /(\s)/,
- isDev: process.env.NODE_ENV === 'development',
+ isDev: process.env.NODE_ENV === "development",
isLoading: false,
toasterIsOpen: false,
};
},
computed: {
btnDisabled() {
- if (!this.pubmedId || (!this.comment && this.role !== 'Maintainer')) {
-
+ if (!this.pubmedId || (!this.comment && this.role !== "Maintainer")) {
return true;
}
return false;
},
jwt: function () {
- return this.$store.getters['User/jwt'];
+ return this.$store.getters["User/jwt"];
},
role: function () {
- return this.$store.getters['User/userRole'];
+ return this.$store.getters["User/userRole"];
},
getPubmed() {
let pubIds;
@@ -596,19 +564,17 @@ export default {
pubIds = this.pubmed[key];
}
}
-
+
return pubIds;
},
disableButton() {
- if (!this.pubmedId || (!this.comment && this.role !== 'Maintainer')) {
+ if (!this.pubmedId || (!this.comment && this.role !== "Maintainer")) {
return true;
}
return false;
},
},
mounted() {
-
-
// for (let key in this.pubmed) {
// if (key === this.uniprot) {
// this.pubmedIds = this.pubmed[key];
@@ -625,15 +591,19 @@ export default {
},
validateComment() {
this.isValid = true;
- this.error = '';
- this.message = '';
+ this.error = "";
+ this.message = "";
this.serverError = false;
},
inputValidation(data) {
let foundPubId;
- if (this.mode === 'condensate' && this.type === 'Add' && Object.keys(data).length > 0) {
+ if (
+ this.mode === "condensate" &&
+ this.type === "Add" &&
+ Object.keys(data).length > 0
+ ) {
let pubmedData;
for (let key in data) {
if (key === this.uniprot) {
@@ -646,12 +616,16 @@ export default {
foundPubId = item;
}
}
- } else if (this.mode === 'protein' && this.actionType === 'Add' && Object.keys(data).length > 0) {
+ } else if (
+ this.mode === "protein" &&
+ this.actionType === "Add" &&
+ Object.keys(data).length > 0
+ ) {
foundPubId = data.pubmed_ids.find((p) => p === this.pubmedId);
}
- this.message = '';
- if (this.pubmedId === '') {
- this.error = 'Pubmed Id should not be empty!';
+ this.message = "";
+ if (this.pubmedId === "") {
+ this.error = "Pubmed Id should not be empty!";
return false;
}
@@ -663,13 +637,13 @@ export default {
// }
else if (foundPubId) {
this.isValid = false;
- this.commentError = '';
+ this.commentError = "";
this.error =
- 'Given pubmed id is aready present. Please add another pubmed id.';
+ "Given pubmed id is aready present. Please add another pubmed id.";
return false;
}
- this.message = '';
+ this.message = "";
return true;
},
@@ -677,18 +651,16 @@ export default {
const vm = this;
if (vm.isDev) {
- host = require('../js/const').devApiHost;
+ host = require("../js/const").devApiHost;
}
let url = `${host}/api/update-items`;
-
-
let data;
- if (this.mode === 'condensate' && this.type === 'Add') {
+ if (this.mode === "condensate" && this.type === "Add") {
//const foundPubId = this.pubmed.find((p) => p === this.pubmedId);
- console.log('return val', this.inputValidation(this.pubmed));
+ console.log("return val", this.inputValidation(this.pubmed));
let valid = this.inputValidation(this.pubmed);
@@ -696,157 +668,159 @@ export default {
return;
}
let entityId = `${this.canonicalId}==${this.uniprot}`;
- if (this.role === 'Maintainer') {
+ if (this.role === "Maintainer") {
data = {
- Entity: 'condensate_protein',
+ Entity: "condensate_protein",
EntityId: entityId,
- ChangeOperation: 'add',
- Attribute: 'pubmed_ids',
+ ChangeOperation: "add",
+ Attribute: "pubmed_ids",
Value: this.pubmedId,
- SubmissionComments:
- 'Maintainer do not need to provide a reason for such change at the moment!',
- Status: 'accepted',
+ SubmissionComments: this.comment
+ ? this.comment
+ : "Maintainer do not need to provide a reason for such change at the moment!",
+ Status: "accepted",
};
} else {
- if (this.comment === '' || this.comment.length < 50) {
+ if (this.comment === "" || this.comment.length < 50) {
this.isValid = false;
this.commentError =
- 'Reason should not be empty or less than 50 character!';
+ "Reason should not be empty or less than 50 character!";
return false;
}
data = {
- Entity: 'condensate_protein',
+ Entity: "condensate_protein",
EntityId: entityId,
- ChangeOperation: 'add',
- Attribute: 'pubmed_ids',
+ ChangeOperation: "add",
+ Attribute: "pubmed_ids",
Value: this.pubmedId,
SubmissionComments: this.comment,
- Status: 'requested',
+ Status: "requested",
};
}
-
-
- } else if (this.mode === 'condensate' && this.type === 'Delete') {
+ } else if (this.mode === "condensate" && this.type === "Delete") {
//val
if (!this.inputValidation(this.pubmed)) {
return;
}
- this.message = '';
- if (this.pubmedId === '') {
+ this.message = "";
+ if (this.pubmedId === "") {
this.isValid = false;
- this.error = 'Please select a pubmed id to remove!';
+ this.error = "Please select a pubmed id to remove!";
return;
}
let entityId = `${this.canonicalId}==${this.uniprot}`;
- if (this.role === 'Maintainer') {
+ if (this.role === "Maintainer") {
data = {
- Entity: 'condensate_protein',
+ Entity: "condensate_protein",
EntityId: entityId,
- ChangeOperation: 'remove',
- Attribute: 'pubmed_ids',
+ ChangeOperation: "remove",
+ Attribute: "pubmed_ids",
Value: this.pubmedId,
- SubmissionComments:
- 'Maintainer do not need to provide a reason for such change at the moment!',
- Status: 'accepted',
+ SubmissionComments: this.comment
+ ? this.comment
+ : "Maintainer do not need to provide a reason for such change at the moment!",
+ Status: "accepted",
};
} else {
- if (this.comment === '' || this.comment.length < 50) {
+ if (this.comment === "" || this.comment.length < 50) {
this.isValid = false;
this.commentError =
- 'Reason should not be empty or less than 50 character!';
+ "Reason should not be empty or less than 50 character!";
return false;
}
data = {
- Entity: 'condensate_protein',
+ Entity: "condensate_protein",
EntityId: entityId,
- ChangeOperation: 'remove',
- Attribute: 'pubmed_ids',
+ ChangeOperation: "remove",
+ Attribute: "pubmed_ids",
Value: this.pubmedId,
SubmissionComments: this.comment,
- Status: 'requested',
+ Status: "requested",
};
}
- } else if (this.mode === 'protein' && this.actionType === 'Add') {
+ } else if (this.mode === "protein" && this.actionType === "Add") {
//val
if (!this.inputValidation(this.data)) {
return;
}
- if (this.role === 'Maintainer') {
+ if (this.role === "Maintainer") {
data = {
- Entity: 'protein',
+ Entity: "protein",
EntityId: this.data.uniprot_id,
- ChangeOperation: 'add',
- Attribute: 'proteins',
+ ChangeOperation: "add",
+ Attribute: "proteins",
Value: this.pubmedId,
- SubmissionComments:
- 'Maintainer do not need to provide a reason for such change at the moment!',
- Status: 'accepted',
+ SubmissionComments: this.comment
+ ? this.comment
+ : "Maintainer do not need to provide a reason for such change at the moment!",
+ Status: "accepted",
};
} else {
- if (this.comment === '' || this.comment.length < 50) {
+ if (this.comment === "" || this.comment.length < 50) {
this.isValid = false;
this.commentError =
- 'Reason should not be empty or less than 50 character!';
+ "Reason should not be empty or less than 50 character!";
return false;
}
data = {
- Entity: 'protein',
+ Entity: "protein",
EntityId: this.data.uniprot_id,
- ChangeOperation: 'add',
- Attribute: 'proteins',
+ ChangeOperation: "add",
+ Attribute: "proteins",
Value: this.pubmedId,
SubmissionComments: this.comment,
- Status: 'requested',
+ Status: "requested",
};
}
- } else if (this.mode === 'protein' && this.actionType === 'Delete') {
+ } else if (this.mode === "protein" && this.actionType === "Delete") {
if (!this.inputValidation(this.data)) {
return;
}
- this.message = '';
- if (this.pubmedId === '') {
+ this.message = "";
+ if (this.pubmedId === "") {
this.isValid = false;
- this.error = 'Please select a pubmed id to remove!';
+ this.error = "Please select a pubmed id to remove!";
return;
}
- if (this.role === 'Maintainer') {
+ if (this.role === "Maintainer") {
data = {
- Entity: 'protein',
+ Entity: "protein",
EntityId: this.data.uniprot_id,
- ChangeOperation: 'remove',
- Attribute: 'proteins',
+ ChangeOperation: "remove",
+ Attribute: "proteins",
Value: this.pubmedId,
- SubmissionComments:
- 'Maintainer do not need to provide a reason for such change at the moment!',
- Status: 'accepted',
+ SubmissionComments: this.comment
+ ? this.comment
+ : "Maintainer do not need to provide a reason for such change at the moment!",
+ Status: "accepted",
};
} else {
- if (this.comment === '' || this.comment.length < 50) {
+ if (this.comment === "" || this.comment.length < 50) {
this.isValid = false;
this.commentError =
- 'Reason should not be empty or less than 50 character!';
+ "Reason should not be empty or less than 50 character!";
return false;
}
data = {
- Entity: 'protein',
+ Entity: "protein",
EntityId: this.data.uniprot_id,
- ChangeOperation: 'remove',
- Attribute: 'proteins',
+ ChangeOperation: "remove",
+ Attribute: "proteins",
Value: this.pubmedId,
SubmissionComments: this.comment,
- Status: 'requested',
+ Status: "requested",
};
}
}
this.isValid = true;
- this.error = '';
- this.message = '';
+ this.error = "";
+ this.message = "";
this.isLoading = true;
this.toasterIsOpen = true;
@@ -863,12 +837,12 @@ export default {
this.isLoading = false;
this.isValid = true;
- this.comment = '';
- this.error = '';
+ this.comment = "";
+ this.error = "";
this.serverError = false;
- this.pubmedId = '';
- this.commentError = '';
- this.$emit('update-key');
+ this.pubmedId = "";
+ this.commentError = "";
+ this.$emit("update-key");
setTimeout(() => {
this.toasterIsOpen = false;
}, 2000);
@@ -877,58 +851,58 @@ export default {
this.isLoading = false;
this.serverError = true;
this.message =
- e.message || 'Something went wrong, please try again later!';
+ e.message || "Something went wrong, please try again later!";
}
},
selectPubmedId() {
- this.error = '';
- this.serverError = '';
+ this.error = "";
+ this.serverError = "";
},
close() {
- this.$emit('cancel');
+ this.$emit("cancel");
},
closeAddPubmed() {
- this.$emit('closeToggleAddPubmed');
+ this.$emit("closeToggleAddPubmed");
},
closeDeletePubmed() {
- this.$emit('closeToggleDeletePubmed');
+ this.$emit("closeToggleDeletePubmed");
},
validation(e) {
- if (this.pubmedId === '') {
+ if (this.pubmedId === "") {
this.isValid = false;
- this.error = 'Pubmed Id should not be empty!';
+ this.error = "Pubmed Id should not be empty!";
return false;
}
if (e.keyCode === 32) {
this.isValid = false;
- this.error = 'Pubmed Id should not have empty space!';
+ this.error = "Pubmed Id should not have empty space!";
return false;
}
if (this.whitespaceRegex.test(this.pubmedId)) {
this.isValid = false;
- this.error = 'Pubmed Id should not have empty space!';
+ this.error = "Pubmed Id should not have empty space!";
return false;
}
this.isValid = true;
- this.message = '';
- this.error = '';
+ this.message = "";
+ this.error = "";
return true;
},
selectValue() {
- if (this.actionType === 'Add') {
- this.error = '';
- this.commentError = '';
- this.message = '';
- this.buttonText = 'Add';
- (this.pubmedId = ''), (this.isValid = true);
+ if (this.actionType === "Add") {
+ this.error = "";
+ this.commentError = "";
+ this.message = "";
+ this.buttonText = "Add";
+ (this.pubmedId = ""), (this.isValid = true);
this.showAddPubmedId = true;
this.showButtons = true;
this.showDeletePubmedId = false;
- } else if (this.actionType === 'Delete') {
- this.buttonText = 'Delete';
- this.error = '';
- this.commentError = '';
- this.message = '';
+ } else if (this.actionType === "Delete") {
+ this.buttonText = "Delete";
+ this.error = "";
+ this.commentError = "";
+ this.message = "";
this.showDeletePubmedId = true;
this.showButtons = true;
this.showAddPubmedId = false;
diff --git a/web/src/components/CMS/evidenceStarRating.vue b/web/src/components/CMS/evidenceStarRating.vue
index 524eeb3..002b811 100644
--- a/web/src/components/CMS/evidenceStarRating.vue
+++ b/web/src/components/CMS/evidenceStarRating.vue
@@ -1,9 +1,6 @@
<template>
<section>
- <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,14 +9,8 @@
/>
<h4>Request submitted 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>
@@ -28,19 +19,20 @@
<div v-if="isLoading">
<base-spinner />
</div>
-
+
<star-rating
v-model="currentRating"
:show-rating="false"
:star-size="30"
@rating-selected="validateRating"
/>
-
- <h4 class="border border-solid px-3 py-2 w-24 border-slate-300 rounded-md">
+
+ <h4
+ class="border border-solid px-3 py-2 w-24 border-slate-300 rounded-md"
+ >
{{ currentRating }} / 5
</h4>
-
-
+
<textarea
id="funComment"
v-model.trim="comment"
@@ -116,32 +108,32 @@
</template>
<script>
-const _ = require('lodash');
-let host = require('../js/const').apiHost;
+const _ = require("lodash");
+let host = require("../js/const").apiHost;
-import StarRating from 'vue-star-rating';
-import BaseToaster from '../UI/BaseToaster.vue';
+import StarRating from "vue-star-rating";
+import BaseToaster from "../UI/BaseToaster.vue";
export default {
components: { StarRating, BaseToaster },
- props: ['rating', 'uniprot', 'canonicalId'],
+ props: ["rating", "uniprot", "canonicalId"],
data() {
return {
currentRating: this.rating,
- message: '',
- comment: '',
+ message: "",
+ comment: "",
error: false,
valid: false,
isLoading: false,
toasterIsOpen: false,
- isDev: process.env.NODE_ENV === 'development',
+ isDev: process.env.NODE_ENV === "development",
};
},
computed: {
jwt: function () {
- return this.$store.getters['User/jwt'];
+ return this.$store.getters["User/jwt"];
},
role: function () {
- return this.$store.getters['User/userRole'];
+ return this.$store.getters["User/userRole"];
},
},
mounted() {
@@ -155,15 +147,15 @@ export default {
this.toasterIsOpen = false;
},
close() {
- this.$emit('close');
+ this.$emit("close");
},
validateComment() {
this.error = false;
- this.message = '';
+ this.message = "";
},
validateRating() {
this.error = false;
- this.message = '';
+ this.message = "";
},
async updateEvidenceStar() {
const vm = this;
@@ -171,7 +163,7 @@ export default {
// console.log(host)
if (vm.isDev) {
- host = require('../js/const').devApiHost;
+ host = require("../js/const").devApiHost;
}
let url = `${host}/api/update-items`;
@@ -183,34 +175,35 @@ export default {
// console.log('true');
this.error = false;
- vm.message = '';
+ vm.message = "";
let data;
let entityId = `${vm.canonicalId}==${vm.uniprot}`;
- if (this.role === 'Maintainer') {
+ if (this.role === "Maintainer") {
data = {
- Entity: 'condensate_protein',
+ Entity: "condensate_protein",
EntityId: entityId,
- ChangeOperation: 'update',
- Attribute: 'confidence_score',
+ ChangeOperation: "update",
+ Attribute: "confidence_score",
Value: this.currentRating.toString(),
- SubmissionComments:
- 'Maintainer do not required to give reason at the moment.',
- Status: 'accepted',
+ SubmissionComments: this.comment
+ ? this.comment
+ : "Maintainer do not required to give reason at the moment.",
+ Status: "accepted",
};
} else {
- if (vm.comment === '' || this.comment.length < 50) {
+ if (vm.comment === "" || this.comment.length < 50) {
this.error = true;
vm.message = `The reason field should not be empty or less than 50 characters!`;
return;
}
data = {
- Entity: 'condensate_protein',
+ Entity: "condensate_protein",
EntityId: entityId,
- ChangeOperation: 'update',
- Attribute: 'confidence_score',
+ ChangeOperation: "update",
+ Attribute: "confidence_score",
Value: this.currentRating.toString(),
SubmissionComments: this.comment,
- Status: 'requested',
+ Status: "requested",
};
}
@@ -228,18 +221,18 @@ export default {
);
this.isLoading = false;
this.toasterIsOpen = true;
- this.comment = '';
+ this.comment = "";
this.currentRating = this.rating;
- this.$emit('update-key')
+ this.$emit("update-key");
setTimeout(() => {
- this.toasterIsOpen =false;
+ this.toasterIsOpen = false;
}, 2000);
} catch (e) {
console.error(e);
- this.isLoading= false;
+ this.isLoading = false;
this.error = true;
this.message =
- e.message || 'Something went wrong, please try again later!';
+ e.message || "Something went wrong, please try again later!";
this.currentRating = this.rating;
}
},
diff --git a/web/src/components/CMS/updateFunctionalType.vue b/web/src/components/CMS/updateFunctionalType.vue
index d589c3c..ecb2cef 100644
--- a/web/src/components/CMS/updateFunctionalType.vue
+++ b/web/src/components/CMS/updateFunctionalType.vue
@@ -1,9 +1,6 @@
<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,14 +9,8 @@
/>
<h4>Request submitted 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>
@@ -34,10 +25,9 @@
<base-spinner />
</div>
<div class="form-group">
- <label
- class="control-label col-sm-4"
- for="FuncType"
- >Choose a functional type</label>
+ <label class="control-label col-sm-4" for="FuncType"
+ >Choose a functional type</label
+ >
<div class="col-sm-8">
<div>
<select
@@ -62,10 +52,9 @@
</div>
</div>
<div class="form-group">
- <label
- class="control-label col-sm-4"
- for="funComment"
- >Reason</label>
+ <label class="control-label col-sm-4" for="funComment"
+ >Reason</label
+ >
<div class="col-sm-8">
<textarea
@@ -95,10 +84,7 @@
@keyup="validateComment"
/>
- <p
- v-if="!isValid"
- class="text-danger mt-4 font-bold"
- >
+ <p v-if="!isValid" class="text-danger mt-4 font-bold">
{{ error }}
</p>
<p
@@ -158,27 +144,27 @@
</template>
<script>
-import BaseSpinner from '../UI/BaseSpinner.vue';
-import BaseToaster from '../UI/BaseToaster.vue';
-const _ = require('lodash');
-let host = require('../js/const').apiHost;
+import BaseSpinner from "../UI/BaseSpinner.vue";
+import BaseToaster from "../UI/BaseToaster.vue";
+const _ = require("lodash");
+let host = require("../js/const").apiHost;
export default {
components: { BaseSpinner, BaseToaster },
- props: ['type', 'data'],
+ props: ["type", "data"],
data() {
return {
- isDev: process.env.NODE_ENV === 'development',
+ isDev: process.env.NODE_ENV === "development",
functionalOptions: [
- { id: '1', type: 'client' },
- { id: '2', type: 'driver' },
- { id: '3', type: 'regulator' },
+ { id: "1", type: "client" },
+ { id: "2", type: "driver" },
+ { id: "3", type: "regulator" },
],
functionalType: this.data.functional_type,
- error: '',
+ error: "",
isValid: false,
- message: '',
+ message: "",
serverError: false,
- comment: '',
+ comment: "",
isLoading: false,
showToast: false,
toasterIsOpen: false,
@@ -186,10 +172,10 @@ export default {
},
computed: {
jwt: function () {
- return this.$store.getters['User/jwt'];
+ return this.$store.getters["User/jwt"];
},
role: function () {
- return this.$store.getters['User/userRole'];
+ return this.$store.getters["User/userRole"];
},
},
@@ -202,13 +188,13 @@ export default {
},
validateComment() {
this.isValid = true;
- this.error = '';
- this.message = '';
+ this.error = "";
+ this.message = "";
},
selectValue() {
this.isValid = true;
- this.error = '';
- this.message = '';
+ this.error = "";
+ this.message = "";
},
async updateFuctionalType() {
const vm = this;
@@ -216,53 +202,54 @@ export default {
// console.log(host)
if (vm.isDev) {
- host = require('../js/const').devApiHost;
+ host = require("../js/const").devApiHost;
}
let url = `${host}/api/update-items`;
if (!this.functionalType) {
this.isValid = false;
- this.message = '';
- this.error = 'Select a functional type to update!';
+ this.message = "";
+ this.error = "Select a functional type to update!";
return;
} else if (this.data.functional_type === this.functionalType) {
this.isValid = false;
- this.message = '';
+ this.message = "";
this.error = `The selected functional type is already ${this.functionalType}. Please select a different functional type from the list.`;
return;
}
let data;
this.isValid = true;
- this.error = '';
- if (this.role === 'Maintainer') {
+ this.error = "";
+ if (this.role === "Maintainer") {
data = {
- Entity: 'protein',
+ Entity: "protein",
EntityId: this.data.uniprot_id,
- ChangeOperation: 'update',
- Attribute: 'functional_type',
- SubmissionComments:
- 'Maintainer do not need to provide a reason for such change at the moment!',
+ ChangeOperation: "update",
+ Attribute: "functional_type",
+ SubmissionComments: this.comment
+ ? this.comment
+ : "Maintainer do not need to provide a reason for such change at the moment!",
Value: this.functionalType,
- Status: 'accepted',
+ Status: "accepted",
};
} else {
- if (this.comment === '' || this.comment.length < 50) {
+ if (this.comment === "" || this.comment.length < 50) {
this.isValid = false;
- this.message = '';
- this.error = 'Reason should not be empty or less than 50 character!';
+ this.message = "";
+ this.error = "Reason should not be empty or less than 50 character!";
return;
}
data = {
- Entity: 'protein',
+ Entity: "protein",
EntityId: this.data.uniprot_id,
- ChangeOperation: 'update',
- Attribute: 'functional_type',
+ ChangeOperation: "update",
+ Attribute: "functional_type",
SubmissionComments: this.comment,
Value: this.functionalType,
- Status: 'requested',
+ Status: "requested",
};
}
this.isLoading = true;
@@ -279,11 +266,11 @@ export default {
this.isLoading = false;
this.toasterIsOpen = true;
this.functionalType = this.data.functional_type;
- this.comment = '';
+ this.comment = "";
this.isValid = true;
- this.error = '';
+ this.error = "";
this.serverError = false;
- this.$emit('update-key');
+ this.$emit("update-key");
setTimeout(() => {
this.toasterIsOpen = false;
}, 2000);
@@ -292,11 +279,11 @@ export default {
this.isLoading = false;
this.serverError = true;
this.message =
- e.message || 'Something went wrong, please try again later!';
+ e.message || "Something went wrong, please try again later!";
}
},
close() {
- this.$emit('close');
+ this.$emit("close");
},
},
};
diff --git a/web/src/components/CondensateDetailPage.vue b/web/src/components/CondensateDetailPage.vue
index c0edcfb..17816d3 100644
--- a/web/src/components/CondensateDetailPage.vue
+++ b/web/src/components/CondensateDetailPage.vue
@@ -1,9 +1,6 @@
<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,14 +9,8 @@
/>
<h4>Request submitted 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>
@@ -50,10 +41,7 @@
<base-spinner />
</div>
<div>
- <h2
- v-if="fetchError"
- class="text-red-500"
- >
+ <h2 v-if="fetchError" class="text-red-500">
{{ fetchError }}
</h2>
</div>
@@ -67,7 +55,7 @@
<button
v-if="
getUserData !== null &&
- (getUserData === 'Maintainer' ||
+ (getUserData === 'Maintainer' ||
getUserData === 'Contributor')
"
class="rounded-lg px-5 py-4 text-center"
@@ -99,7 +87,8 @@
<label
for="condensateName"
class="control-label col-sm-2"
- >Name</label>
+ >Name</label
+ >
<div class="col-sm-10">
<div class="w-1/4">
<input
@@ -109,7 +98,7 @@
type="text"
placeholder="Enter condensate name."
@keyup="validateName"
- >
+ />
<p
v-if="nameError && nameErrMsg"
class="text-red-500 mt-2 text-2xl font-bold"
@@ -124,7 +113,8 @@
<label
for="condensateName"
class="control-label col-sm-2"
- >Reason</label>
+ >Reason</label
+ >
<div class="col-sm-10">
<div class="w-3/4">
<textarea
@@ -207,9 +197,7 @@
</div>
</form>
</div>
- <h4 class="round">
- General Information
- </h4>
+ <h4 class="round">General Information</h4>
<div
class="
bg-white
@@ -229,9 +217,7 @@
</div>
</div> -->
<div class="row">
- <div class="text col-sm-3 text-2xl">
- Species
- </div>
+ <div class="text col-sm-3 text-2xl">Species</div>
<div class="col-sm-9 text-2xl">
{{ response.data.species_name }} ({{
response.data.species_tax_id
@@ -239,15 +225,13 @@
</div>
</div>
<div class="row text-2xl">
- <div class="text col-sm-3">
- Description
- </div>
+ <div class="text col-sm-3">Description</div>
<div class="col-sm-9 text-2xl">
{{ response.data.description }}
<button
v-if="
getUserData !== null &&
- (getUserData === 'Maintainer' ||
+ (getUserData === 'Maintainer' ||
getUserData === 'Contributor')
"
class="btn btn-primary btn-link"
@@ -277,7 +261,8 @@
<label
class="control-label col-sm-2"
for="keyword"
- >Update description</label>
+ >Update description</label
+ >
<div class="col-sm-10">
<textarea
id="comment"
@@ -318,7 +303,8 @@
<label
class="control-label col-sm-2"
for="funComment"
- >Reason</label>
+ >Reason</label
+ >
<div class="col-sm-10">
<textarea
@@ -453,7 +439,7 @@
<button
v-if="
getUserData !== null &&
- (getUserData === 'Maintainer' ||
+ (getUserData === 'Maintainer' ||
getUserData === 'Contributor')
"
class="btn btn-primary btn-link"
@@ -475,17 +461,13 @@
</div>
<div class="row text-2xl">
- <div class="text col-sm-3">
- No. of Proteins
- </div>
+ <div class="text col-sm-3">No. of Proteins</div>
<div class="col-sm-9">
{{ response.data.protein_count }}
</div>
</div>
<div class="row text-2xl">
- <div class="text col-sm-3 text-2xl">
- Evidence star
- </div>
+ <div class="text col-sm-3 text-2xl">Evidence star</div>
<div class="flex col-sm-9">
<star-rating
:star-size="20"
@@ -505,9 +487,7 @@
</div>
<div v-show="response.data.experiments.length > 0">
- <h4 class="round">
- Experiments
- </h4>
+ <h4 class="round">Experiments</h4>
<div class="panel panel-default">
<table class="csi table table-hover table-responsive">
<thead>
@@ -603,8 +583,8 @@
<button
v-if="
getUserData !== null &&
- !response.data.is_experimental &&
- (getUserData === 'Maintainer' ||
+ !response.data.is_experimental &&
+ (getUserData === 'Maintainer' ||
getUserData === 'Contributor')
"
class="
@@ -625,10 +605,7 @@
>
Add a protein to this condensate
</button>
- <div
- v-if="showAddProtein"
- class="panel panel-default mt-4"
- >
+ <div v-if="showAddProtein" class="panel panel-default mt-4">
<div class="panel-body">
<div class="container-fluid col-md-12">
<div v-if="isLoading">
@@ -640,10 +617,9 @@
@submit.prevent="addProtein(response)"
>
<div class="form-group">
- <label
- class="control-label col-sm-2"
- for="species"
- >Add protein with uniprot ID</label>
+ <label class="control-label col-sm-2" for="species"
+ >Add protein with uniprot ID</label
+ >
<div class="col-sm-4">
<input
id="keyword"
@@ -652,7 +628,7 @@
type="text"
placeholder="Uniprot ID"
@keyup="uniprotKeyup"
- >
+ />
<p
v-if="isUniProtIdError"
class="text-red-600 mt-4 font-bold"
@@ -662,10 +638,9 @@
</div>
</div>
<div class="form-group">
- <label
- class="control-label col-sm-2"
- for="keyword"
- >Reason</label>
+ <label class="control-label col-sm-2" for="keyword"
+ >Reason</label
+ >
<div class="col-sm-8">
<textarea
id="comment"
@@ -811,9 +786,7 @@
/>
</div>
<div class="my-14 border border-gray-300 rounded-lg p-8">
- <h4 class="round mb-8">
- Top Contributors
- </h4>
+ <h4 class="round mb-8">Top Contributors</h4>
<contributor-list-table
:id="response.data.canonical_id"
entity="condensate"
@@ -871,26 +844,26 @@
</template>
<script>
-import fetchCondensate from '@/components/DDCODE/fetchCondensate.vue';
-import llpsTable from '@/components/LlpsTable.vue';
-import fetchPubMed from '@/components/DDCODE/fetchPubMed';
-import AddDeleteMarker from './CMS/addDeleteMarker.vue';
-import BaseSpinner from './UI/BaseSpinner.vue';
-import CondensateUpdateItemsTable from './CondensateUpdateItemsTable.vue';
-import BaseToaster from './UI/BaseToaster.vue';
-import StarRating from 'vue-star-rating';
-import ContributorListTable from './ContributorListTable.vue';
+import fetchCondensate from "@/components/DDCODE/fetchCondensate.vue";
+import llpsTable from "@/components/LlpsTable.vue";
+import fetchPubMed from "@/components/DDCODE/fetchPubMed";
+import AddDeleteMarker from "./CMS/addDeleteMarker.vue";
+import BaseSpinner from "./UI/BaseSpinner.vue";
+import CondensateUpdateItemsTable from "./CondensateUpdateItemsTable.vue";
+import BaseToaster from "./UI/BaseToaster.vue";
+import StarRating from "vue-star-rating";
+import ContributorListTable from "./ContributorListTable.vue";
//import FetchUserSpecificUpdateItems from './CMS/fetchUserSpecificUpdateItems.vue';
//import RequestUpdateItemTable from "./RequestUpdateItemTable.vue";
// import TheModal from './UI/TheModal.vue';
-const _ = require('lodash');
-require('./js/clipboard');
+const _ = require("lodash");
+require("./js/clipboard");
-let host = require('./js/const').apiHost;
+let host = require("./js/const").apiHost;
export default {
- name: 'CondensateDetailPage',
+ name: "CondensateDetailPage",
components: {
fetchCondensate,
llpsTable,
@@ -905,39 +878,39 @@ export default {
// RequestUpdateItemTable,
},
- props: ['condensateId'],
+ props: ["condensateId"],
data() {
return {
condensate: this.$route.params.condensate
? this.$route.params.condensate
: this.condensateId,
- dbNames: require('./js/const').db,
- isDev: process.env.NODE_ENV === 'development',
+ dbNames: require("./js/const").db,
+ isDev: process.env.NODE_ENV === "development",
showAddProtein: false,
- uniprotId: '',
- comment: '',
- proteinComment: '',
- condensateNameComment: '',
- condensateNameCommentErrMsg: '',
- markerComment: '',
- descriptionComment: '',
- description: '',
- descriptionMsg: '',
- condensateName: '',
- descriptionErrorMsg: '',
+ uniprotId: "",
+ comment: "",
+ proteinComment: "",
+ condensateNameComment: "",
+ condensateNameCommentErrMsg: "",
+ markerComment: "",
+ descriptionComment: "",
+ description: "",
+ descriptionMsg: "",
+ condensateName: "",
+ descriptionErrorMsg: "",
isUniProtIdError: false,
isCommentError: false,
isSubmitted: false,
error: false,
showUpdateDescription: false,
showAddDeleteMarker: false,
- commentErrorMsg: '',
+ commentErrorMsg: "",
descriptionCommentErr: false,
nameCommentErr: false,
proteinCommentErr: false,
markerCommentErr: false,
- uniprotIdErrorMsg: '',
- message: '',
+ uniprotIdErrorMsg: "",
+ message: "",
whitespaceRegex: /(\s)/,
nameError: false,
toggleModel: false,
@@ -949,10 +922,10 @@ export default {
},
computed: {
jwt: function () {
- return this.$store.getters['User/jwt'];
+ return this.$store.getters["User/jwt"];
},
getUserData() {
- const userRole = this.$store.getters['User/userRole'];
+ const userRole = this.$store.getters["User/userRole"];
return userRole;
},
@@ -960,7 +933,7 @@ export default {
methods: {
validateName() {
- (this.nameErrMsg = ''), (this.nameError = false);
+ (this.nameErrMsg = ""), (this.nameError = false);
},
showDialog() {
this.toasterIsOpen = true;
@@ -976,82 +949,83 @@ export default {
},
toggleChangeName() {
this.changeName = !this.changeName;
- this.condensateName = '';
+ this.condensateName = "";
},
closeAddDeleteMarker() {
- this.comment = '';
+ this.comment = "";
this.showAddDeleteMarker = false;
},
uniprotKeyup() {
- this.message = '';
+ this.message = "";
this.isUniProtIdError = false;
},
commentKeyup() {
- this.message = '';
+ this.message = "";
this.descriptionCommentErr = false;
this.isCommentError = false;
},
descriptionKeyup() {
- this.descriptionMsg = '';
- this.descriptionErrorMsg = '';
+ this.descriptionMsg = "";
+ this.descriptionErrorMsg = "";
},
toggleUpdateDescription(res) {
this.description = res;
- this.descriptionMsg = '';
- this.descriptionErrorMsg = '';
+ this.descriptionMsg = "";
+ this.descriptionErrorMsg = "";
this.descriptionCommentErr = false;
- this.descriptionComment = '';
+ this.descriptionComment = "";
this.showUpdateDescription = !this.showUpdateDescription;
},
validateProteinComment() {
this.proteinCommentErr = false;
- this.commentErrorMsg = '';
+ this.commentErrorMsg = "";
},
async changeCondensateName(response) {
if (!this.condensateName) {
this.nameError = true;
- this.nameErrMsg = 'Enter a condensate name.';
+ this.nameErrMsg = "Enter a condensate name.";
return;
}
this.nameError = false;
- this.nameErrMsg = '';
+ this.nameErrMsg = "";
if (this.isDev) {
- host = require('./js/const').devApiHost;
+ host = require("./js/const").devApiHost;
}
let url = `${host}/api/update-items`;
let data;
- if (this.getUserData === 'Maintainer') {
+ if (this.getUserData === "Maintainer") {
data = {
- Entity: 'condensate',
+ Entity: "condensate",
EntityId: response.data.canonical_id,
- ChangeOperation: 'update',
- Attribute: 'name',
+ ChangeOperation: "update",
+ Attribute: "name",
Value: this.condensateName,
- SubmissionComments:
- 'Maintainer do not need to provide a reason for such change at the moment!',
- Status: 'accepted',
+ SubmissionComments: this.condensateNameComment
+ ? this.condensateNameComment
+ : "Maintainer do not need to provide a reason for such change at the moment!",
+ Status: "accepted",
};
} else {
if (
- this.condensateNameComment === '' ||
+ this.condensateNameComment === "" ||
this.condensateNameComment.length < 50
) {
this.nameCommentErr = true;
this.condensateNameCommentErrMsg =
- 'Reason should not be empty or less than 50 characters!';
+ "Reason should not be empty or less than 50 characters!";
return;
}
data = {
- Entity: 'condensate',
+ Entity: "condensate",
EntityId: response.data.canonical_id,
- ChangeOperation: 'update',
- Attribute: 'name',
+ ChangeOperation: "update",
+ Attribute: "name",
Value: this.condensateName,
SubmissionComments: this.condensateNameComment,
- Status: 'requested',
+ Status: "requested",
};
}
this.isLoading = true;
@@ -1068,9 +1042,9 @@ export default {
this.isLoading = false;
this.toasterIsOpen = true;
this.nameCommentErr = false;
- this.condensateNameCommentErrMsg = '';
- this.condensateNameComment = '';
- this.condensateName = '';
+ this.condensateNameCommentErrMsg = "";
+ this.condensateNameComment = "";
+ this.condensateName = "";
this.updatedKey += 1;
setTimeout(() => {
this.toasterIsOpen = false;
@@ -1080,55 +1054,56 @@ export default {
this.isLoading = false;
this.nameCommentErr = true;
this.condensateNameCommentErrMsg =
- e.message || 'Something went wrong, please try again later!';
+ e.message || "Something went wrong, please try again later!";
}
},
async updateDescription(response) {
- if (this.description === '') {
- this.descriptionErrorMsg = 'Description should not be empty!';
+ if (this.description === "") {
+ this.descriptionErrorMsg = "Description should not be empty!";
return;
} else if (this.description === response.data.description) {
this.descriptionErrorMsg =
- 'You have not added any description. Please modify the existing description.';
- this.descriptionMsg = '';
+ "You have not added any description. Please modify the existing description.";
+ this.descriptionMsg = "";
return;
}
if (this.isDev) {
- host = require('./js/const').devApiHost;
+ host = require("./js/const").devApiHost;
}
let url = `${host}/api/update-items`;
let data;
- if (this.getUserData === 'Maintainer') {
+ if (this.getUserData === "Maintainer") {
data = {
- Entity: 'condensate',
+ Entity: "condensate",
EntityId: response.data.canonical_id,
- ChangeOperation: 'update',
- Attribute: 'description',
+ ChangeOperation: "update",
+ Attribute: "description",
Value: this.description,
- SubmissionComments:
- 'Maintainer do not need to provide a reason for such change at the moment!',
- Status: 'accepted',
+ SubmissionComments: this.descriptionComment
+ ? this.descriptionComment
+ : "Maintainer do not need to provide a reason for such change at the moment!",
+ Status: "accepted",
};
} else {
if (
- this.descriptionComment === '' ||
+ this.descriptionComment === "" ||
this.descriptionComment.length < 50
) {
this.descriptionCommentErr = true;
this.commentErrorMsg =
- 'Reason should not be empty or less than 50 characters!';
+ "Reason should not be empty or less than 50 characters!";
return;
}
data = {
- Entity: 'condensate',
+ Entity: "condensate",
EntityId: response.data.canonical_id,
- ChangeOperation: 'update',
- Attribute: 'description',
+ ChangeOperation: "update",
+ Attribute: "description",
Value: this.description,
SubmissionComments: this.descriptionComment,
- Status: 'requested',
+ Status: "requested",
};
}
this.isLoading = true;
@@ -1145,11 +1120,11 @@ export default {
this.isLoading = false;
this.toasterIsOpen = true;
this.descriptionCommentErr = false;
- this.descriptionComment = '';
- this.descriptionErrorMsg = '';
+ this.descriptionComment = "";
+ this.descriptionErrorMsg = "";
this.description = response.data.description;
- this.commentErrorMsg = '';
- this.comment = '';
+ this.commentErrorMsg = "";
+ this.comment = "";
this.isCommentError = false;
this.updatedKey += 1;
setTimeout(() => {
@@ -1157,27 +1132,27 @@ export default {
}, 2000);
} catch (e) {
console.error(e);
- this.descriptionMsg = '';
+ this.descriptionMsg = "";
this.descriptionErrorMsg =
- e.message || 'Something went wrong, please try again later!';
+ e.message || "Something went wrong, please try again later!";
}
},
async addProtein(response) {
- if (this.uniprotId === '') {
- this.uniprotIdErrorMsg = 'Uniprot ID should not be empty!';
+ if (this.uniprotId === "") {
+ this.uniprotIdErrorMsg = "Uniprot ID should not be empty!";
this.isUniProtIdError = true;
return;
} else if (this.uniprotId.length < 6) {
- this.uniprotIdErrorMsg = 'Uniprot ID should be minimum of 6 character.';
+ this.uniprotIdErrorMsg = "Uniprot ID should be minimum of 6 character.";
this.isUniProtIdError = true;
return;
} else if (this.uniprotId.length > 10) {
this.uniprotIdErrorMsg =
- 'Uniprot ID should be maximum of 10 character.';
+ "Uniprot ID should be maximum of 10 character.";
this.isUniProtIdError = true;
return;
} else if (this.whitespaceRegex.test(this.uniprotId)) {
- this.uniprotIdErrorMsg = 'Uniprot ID should not have space in between.';
+ this.uniprotIdErrorMsg = "Uniprot ID should not have space in between.";
this.isUniProtIdError = true;
return;
}
@@ -1186,45 +1161,46 @@ export default {
(u) => u.uniprot_id === this.uniprotId
);
if (findUniprotId) {
- this.message = '';
- this.uniprotIdErrorMsg = 'The Uniprot ID already exists!';
+ this.message = "";
+ this.uniprotIdErrorMsg = "The Uniprot ID already exists!";
this.isUniProtIdError = true;
return;
}
this.isError = false;
if (this.isDev) {
- host = require('./js/const').devApiHost;
+ host = require("./js/const").devApiHost;
}
let url = `${host}/api/update-items`;
let data;
- if (this.getUserData === 'Maintainer') {
+ if (this.getUserData === "Maintainer") {
data = {
- Entity: 'condensate',
+ Entity: "condensate",
EntityId: response.data.canonical_id,
- ChangeOperation: 'add',
- Attribute: 'proteins',
+ ChangeOperation: "add",
+ Attribute: "proteins",
Value: this.uniprotId,
- SubmissionComments:
- 'Maintainer do not need to provide a reason for such change at the moment!',
- Status: 'accepted',
+ SubmissionComments: this.proteinComment
+ ? this.proteinComment
+ : "Maintainer do not need to provide a reason for such change at the moment!",
+ Status: "accepted",
};
} else {
- if (this.proteinComment === '' || this.proteinComment.length < 50) {
+ if (this.proteinComment === "" || this.proteinComment.length < 50) {
this.proteinCommentErr = true;
this.commentErrorMsg =
- 'Reason should not be empty or less than 50 characters!';
+ "Reason should not be empty or less than 50 characters!";
return;
}
data = {
- Entity: 'condensate',
+ Entity: "condensate",
EntityId: response.data.canonical_id,
- ChangeOperation: 'add',
- Attribute: 'proteins',
+ ChangeOperation: "add",
+ Attribute: "proteins",
Value: this.uniprotId,
SubmissionComments: this.proteinComment,
- Status: 'requested',
+ Status: "requested",
};
}
this.isLoading = true;
@@ -1244,10 +1220,10 @@ export default {
this.error = false;
this.isSubmitted = true;
- this.uniprotId = '';
- this.comment = '';
+ this.uniprotId = "";
+ this.comment = "";
this.proteinCommentErr = false;
- this.commentErrorMsg = '';
+ this.commentErrorMsg = "";
this.updatedKey += 1;
setTimeout(() => {
this.toasterIsOpen = false;
@@ -1255,7 +1231,7 @@ export default {
} catch (e) {
console.error(e);
this.message =
- e.message || 'Something went wrong, please try again later!';
+ e.message || "Something went wrong, please try again later!";
this.isSubmitted = true;
this.error = true;
}
@@ -1317,17 +1293,17 @@ export default {
(a) =>
`<a href='/protein/${a}' class="link" target='_blank'>${a}</a>`
)
- .join(', ');
- else return '';
+ .join(", ");
+ else return "";
},
getDbNames(names) {
- return _.map(names, (i) => this.dbNames[i]).join(', ');
+ return _.map(names, (i) => this.dbNames[i]).join(", ");
},
getTitleAuthors(title, data) {
- return `${title}\n\n${_.map(data, (a) => a.name).join(', ')}`;
+ return `${title}\n\n${_.map(data, (a) => a.name).join(", ")}`;
},
tokenize(input, token) {
- return input.replaceAll(token, '<br/>');
+ return input.replaceAll(token, "<br/>");
},
},
};
--
GitLab