diff --git a/web/src/components/AboutPage.vue b/web/src/components/AboutPage.vue
index 81db5133754963338d9ca931cac59dcade320102..088fc3829815f23be747d0e99fca14f5a5bf28ec 100644
--- a/web/src/components/AboutPage.vue
+++ b/web/src/components/AboutPage.vue
@@ -1,108 +1,151 @@
<template>
- <div id="page-content-wrapper" class="flex flex-wrap justify-center">
+ <div
+ id="page-content-wrapper"
+ class="flex flex-wrap justify-center"
+ >
<div class="w-5/6">
- <h2 class="text-uppercase">DD-Code</h2>
- <p>
- DD-CODE is a comprehensive, manually curated database for
- <a href="https://wiki.ddcode.org/Membraneless_compartments" class="hover:no-underline hover:text-green-600">biomolecular condensates</a> and their constituents as well as
- an <a href="https://wiki.ddcode.org/" class="hover:no-underline hover:text-green-600">encyclopedia</a> for the scientific terms used to describe
- them. Biomolecular condensates are cellular structures that are formed by
- <a href="https://wiki.ddcode.org/Membraneless_compartments" class="hover:no-underline hover:text-green-600">phase separation</a>. In cells, phase separation is driven by <a href="https://wiki.ddcode.org/Scaffolds_and_Clients" class="hover:text-green-600 hover:no-underline">driver</a>
- proteins/nucleic acid, which in turn recruit <a href="https://wiki.ddcode.org/Scaffolds_and_Clients" class="hover:no-underline hover:text-green-600">client</a> molecules into the
- condensate. It is important to note that a particular protein/nucleic acid
- may be a driver in one condensate but the client in another. Moreover, the
- formation of condensates might be regulated by <a href="https://wiki.ddcode.org/Scaffolds_and_Clients" class="hover:no-underline hover:text-green-600">regulator</a> proteins through
- specific biochemical activities, but they do not necessarily need to be a
- part of the condensate.
- </p>
- <p>
- DD-CODE is aimed at becoming a valuable resource for the phase separation
- and condensate community by providing 1) a reliable literature mined
- database on all biomolecular condensates and their constituents; 2) an
- encyclopedia and ontology of the scientific terms and definitions used in
- the field of phase separation and condensate biology and 3) a standardised
- list of terminologyes in the field. All data here are manually curated and
- experimental details and references are provided; this provides the basis
- of our scoring system.
- </p>
- <p>
- Protein definition: Proteins on DD-CODE are divided three groups.
-</p>
- <p>
- <b>Drivers:</b> Proteins which have at least one of the following features.
- <ul class="list-decimal list-inside px-8">
- <li v-for="items in driversList" :key="items">
- {{items}}
- </li>
-
-</ul>
- </p>
- <p>
- <b>Clients:</b> Proteins which are part of a condensate, but driven into it by driver proteins.
- </p>
- <p>
- <b>Regulators:</b> Proteins which biochemically/enzymatically regulate the formation of a condensate, but are structurally not part of it.
- </p>
- <p>
- <b>Scoring system on DD-CODE:</b> At DD-CODE is having three-fold scoring system (evidence stars)
- <ol class="list-decimal list-inside px-8">
- <li v-for="items in scoringSysList" :key="items">
- {{items}}
- </li>
- </ol>
- </p>
- <div>
- <p class="underline">
- Evidence of a protein being in a condensate:
-
- </p>
- <p>
- DD-CODE initially started off as an aggregation of
- existing protein-phase-separation databases namely - <a href="http://llps.biocuckoo.cn/" class="hover:no-underline hover:text-green-600">http://llps.biocuckoo.cn/</a> (dr_llps), <a href="http://bio-comp.org.cn/llpsdb/home.html " class="hover:no-underline hover:text-green-600">http://bio-comp.org.cn/llpsdb/home.html </a> (llps_db), <a href="http://db.phasep.pro/" class="hover:no-underline hover:text-green-600">http://db.phasep.pro/</a> (phase_pro) and <a href="https://phasepro.elte.hu/" class="hover:no-underline hover:text-green-600"></a> (phase_hu). Within these four source databases, we were also able to find publications (via text mining) stating localization of these phase-separating proteins into biomolecular condensates.
- </p>
- </div>
+ <h2 class="text-uppercase">
+ DD-Code
+ </h2>
+ <p>
+ DD-CODE is a comprehensive, manually curated database for
+ <a
+ href="https://wiki.ddcode.org/Membraneless_compartments"
+ class="hover:no-underline hover:text-green-600"
+ >biomolecular condensates</a> and their constituents as well as
+ an <a
+ href="https://wiki.ddcode.org/"
+ class="hover:no-underline hover:text-green-600"
+ >encyclopedia</a> for the scientific terms used to describe
+ them. Biomolecular condensates are cellular structures that are formed by
+ <a
+ href="https://wiki.ddcode.org/Membraneless_compartments"
+ class="hover:no-underline hover:text-green-600"
+ >phase separation</a>. In cells, phase separation is driven by <a
+ href="https://wiki.ddcode.org/Scaffolds_and_Clients"
+ class="hover:text-green-600 hover:no-underline"
+ >driver</a>
+ proteins/nucleic acid, which in turn recruit <a
+ href="https://wiki.ddcode.org/Scaffolds_and_Clients"
+ class="hover:no-underline hover:text-green-600"
+ >client</a> molecules into the
+ condensate. It is important to note that a particular protein/nucleic acid
+ may be a driver in one condensate but the client in another. Moreover, the
+ formation of condensates might be regulated by <a
+ href="https://wiki.ddcode.org/Scaffolds_and_Clients"
+ class="hover:no-underline hover:text-green-600"
+ >regulator</a> proteins through
+ specific biochemical activities, but they do not necessarily need to be a
+ part of the condensate.
+ </p>
+ <p>
+ DD-CODE is aimed at becoming a valuable resource for the phase separation
+ and condensate community by providing 1) a reliable literature mined
+ database on all biomolecular condensates and their constituents; 2) an
+ encyclopedia and ontology of the scientific terms and definitions used in
+ the field of phase separation and condensate biology and 3) a standardised
+ list of terminologyes in the field. All data here are manually curated and
+ experimental details and references are provided; this provides the basis
+ of our scoring system.
+ </p>
+ <p>
+ Protein definition: Proteins on DD-CODE are divided three groups.
+ </p>
+ <p>
+ <b>Drivers:</b> Proteins which have at least one of the following features.
+ <ul class="list-decimal list-inside px-8">
+ <li
+ v-for="items in driversList"
+ :key="items"
+ >
+ {{ items }}
+ </li>
+ </ul>
+ </p>
+ <p>
+ <b>Clients:</b> Proteins which are part of a condensate, but driven into it by driver proteins.
+ </p>
+ <p>
+ <b>Regulators:</b> Proteins which biochemically/enzymatically regulate the formation of a condensate, but are structurally not part of it.
+ </p>
+ <p>
+ <b>Scoring system on DD-CODE:</b> At DD-CODE is having three-fold scoring system (evidence stars)
+ <ol class="list-decimal list-inside px-8">
+ <li
+ v-for="items in scoringSysList"
+ :key="items"
+ >
+ {{ items }}
+ </li>
+ </ol>
+ </p>
+ <div>
+ <p class="underline">
+ Evidence of a protein being in a condensate:
+ </p>
+ <p>
+ DD-CODE initially started off as an aggregation of
+ existing protein-phase-separation databases namely - <a
+ href="http://llps.biocuckoo.cn/"
+ class="hover:no-underline hover:text-green-600"
+ >http://llps.biocuckoo.cn/</a> (dr_llps), <a
+ href="http://bio-comp.org.cn/llpsdb/home.html "
+ class="hover:no-underline hover:text-green-600"
+ >http://bio-comp.org.cn/llpsdb/home.html </a> (llps_db), <a
+ href="http://db.phasep.pro/"
+ class="hover:no-underline hover:text-green-600"
+ >http://db.phasep.pro/</a> (phase_pro) and <a
+ href="https://phasepro.elte.hu/"
+ class="hover:no-underline hover:text-green-600"
+ /> (phase_hu). Within these four source databases, we were also able to find publications (via text mining) stating localization of these phase-separating proteins into biomolecular condensates.
+ </p>
+ </div>
- <div>
- <p>
- Using the above two datapoints (source database annotations and publications), we devised a rule-based mechanism to rate the evidence of a protein being a condensate, which goes as follow:
- <ul class="list-disc list-inside px-8">
- <li v-for="items in evidenceProteinRateList" :key="items" v-html="items">
-
- </li>
- </ul>
- </p>
- <p>
- Besides these initial ratings, it is also possible for a contributor to modify these ratings.
- </p>
- </div>
+ <div>
+ <p>
+ Using the above two datapoints (source database annotations and publications), we devised a rule-based mechanism to rate the evidence of a protein being a condensate, which goes as follow:
+ <ul class="list-disc list-inside px-8">
+ <li
+ v-for="items in evidenceProteinRateList"
+ :key="items"
+ v-html="items"
+ />
+ </ul>
+ </p>
+ <p>
+ Besides these initial ratings, it is also possible for a contributor to modify these ratings.
+ </p>
+ </div>
- <div>
- <p class="undeline">
- Evidence of the existence of a condensate along with its proteome:
-
- </p>
- <p>
- Using the above ratings of a protein existing in a condensate, and computing the median of these scores, we provide a rating to the existence of the condensate as a whole.
- </p>
- <p>
- This rating, unlike the previous one though is not editable, and is always recomputed after a round of contributions are accepted and synced.
- </p>
- </div>
-
- <div>
- <p>
- <span class="underline">Evidence for a protein being a driver:</span> Having any of the below-mentioned features provide a star for a protein being a driver.
- <ul class="list-decimal list-inside px-8">
- <li v-for="items in proteinFeaturesList" :key="items">
- {{items}}
- </li>
- </ul>
- </p>
- <p>
- This provides maximum three starts (***) for a protein which is confidently a driver.
- </p>
- </div>
+ <div>
+ <p class="undeline">
+ Evidence of the existence of a condensate along with its proteome:
+ </p>
+ <p>
+ Using the above ratings of a protein existing in a condensate, and computing the median of these scores, we provide a rating to the existence of the condensate as a whole.
+ </p>
+ <p>
+ This rating, unlike the previous one though is not editable, and is always recomputed after a round of contributions are accepted and synced.
+ </p>
+ </div>
+
+ <div>
+ <p>
+ <span class="underline">Evidence for a protein being a driver:</span> Having any of the below-mentioned features provide a star for a protein being a driver.
+ <ul class="list-decimal list-inside px-8">
+ <li
+ v-for="items in proteinFeaturesList"
+ :key="items"
+ >
+ {{ items }}
+ </li>
+ </ul>
+ </p>
+ <p>
+ This provides maximum three starts (***) for a protein which is confidently a driver.
+ </p>
+ </div>
@@ -116,15 +159,14 @@
<li><a href="/about">Evidence stars</a></li>
</ul> -->
</div>
-
</div>
</template>
<script>
-const _ = require("lodash");
+const _ = require('lodash');
export default {
- name: "LandingPage",
+ name: 'LandingPage',
components: {},
props: {
msg: String,
@@ -132,25 +174,25 @@ export default {
data() {
return {
driversList: [
- "Undergo phase separation or self-assembly into liquid droplets independent of other proteins.",
- "Induce the formation of a condensate.",
- "Are essential for the integrity of a condensate.",
+ 'Undergo phase separation or self-assembly into liquid droplets independent of other proteins.',
+ 'Induce the formation of a condensate.',
+ 'Are essential for the integrity of a condensate.',
],
scoringSysList: [
- "A protein being present in a condensate (Rated out of 5)",
- "The existence of a condensate along with its proteome as a whole (Rated out of 5)",
- "A protein being present as a driver in the condensate (Rated out of 3)",
+ 'A protein being present in a condensate (Rated out of 5)',
+ 'The existence of a condensate along with its proteome as a whole (Rated out of 5)',
+ 'A protein being present as a driver in the condensate (Rated out of 3)',
],
evidenceProteinRateList: [
- "Having source database as <b>dr_llps</b> or <b>llps_db</b>: 1/5",
- "Having source database as <b>phase_pro</b> (high-throughput-exp): 2/5",
- "Having source database as <b>phase_pro</b> or <b>phase_hu</b>: 4/5",
- "Having a publication: 4/5",
+ 'Having source database as <b>dr_llps</b> or <b>llps_db</b>: 1/5',
+ 'Having source database as <b>phase_pro</b> (high-throughput-exp): 2/5',
+ 'Having source database as <b>phase_pro</b> or <b>phase_hu</b>: 4/5',
+ 'Having a publication: 4/5',
],
proteinFeaturesList: [
- "Undergo phase separation or self-assembly into liquid droplets independent of other proteins (*).",
- "Induce the formation of a condensate (*).",
- "Are essential for the integrity of a condensate (*)",
+ 'Undergo phase separation or self-assembly into liquid droplets independent of other proteins (*).',
+ 'Induce the formation of a condensate (*).',
+ 'Are essential for the integrity of a condensate (*)',
],
};
},
diff --git a/web/src/components/CMS/fetchProfile.vue b/web/src/components/CMS/fetchProfile.vue
index d4c889a538e0c90c6cdf6c47d0d9e08f3831f650..c64793d4e21d8cd576006d3b26c85a1ef4cf418f 100644
--- a/web/src/components/CMS/fetchProfile.vue
+++ b/web/src/components/CMS/fetchProfile.vue
@@ -39,14 +39,14 @@ export default {
const vm = this;
// console.log(host)
- console.log("is dev?",vm.isDev);
+ console.log('is dev?',vm.isDev);
if (vm.isDev) {
host = require('../js/const').devApiHost;
}
// console.log(vm.isExperimental)
let url = `${host}/api/users/me`;
- console.log("url is",url);
+ console.log('url is',url);
const jwt = vm.jwt;
if (jwt === null) {
diff --git a/web/src/components/CMS/updateFunctionalType.vue b/web/src/components/CMS/updateFunctionalType.vue
index 6d3b8a0421909143b2c65a767b503cc226510678..94acfa82442ec2edd067055d6ebafa323bda3dc0 100644
--- a/web/src/components/CMS/updateFunctionalType.vue
+++ b/web/src/components/CMS/updateFunctionalType.vue
@@ -1,6 +1,9 @@
<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"
@@ -9,8 +12,14 @@
/>
<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>
@@ -25,9 +34,10 @@
<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
@@ -52,9 +62,10 @@
</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
@@ -84,7 +95,10 @@
@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
@@ -144,27 +158,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,
@@ -172,10 +186,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'];
},
},
@@ -188,13 +202,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;
@@ -202,53 +216,53 @@ 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",
+ ChangeOperation: 'update',
+ Attribute: 'functional_type',
SubmissionComments:
- "Maintainer do not need to provide a reason for such change at the moment!",
+ '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;
@@ -265,11 +279,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);
@@ -278,11 +292,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 2f33df62d76437333125313256a32f3985a8e69c..470dedf4c11200d2507fc1c9459aca8382d31bce 100644
--- a/web/src/components/CondensateDetailPage.vue
+++ b/web/src/components/CondensateDetailPage.vue
@@ -50,8 +50,11 @@
<base-spinner />
</div>
<div>
- <h2 class="text-red-500" v-if="fetchError">
- {{fetchError}}
+ <h2
+ v-if="fetchError"
+ class="text-red-500"
+ >
+ {{ fetchError }}
</h2>
</div>
<!-- <div v-if="loading">
@@ -883,6 +886,7 @@ export default {
data() {
return {
// test data
+<<<<<<< HEAD
// testProteinFuntionalType: {
// A0A178VY62: "client",
// A0A178W3G2: "driver",
@@ -901,6 +905,26 @@ export default {
// A0A1I9LN21: ["in_vitro"],
// A0A1I9LRM4: ["in_vivo", "in_vitro", "frap"],
// },
+=======
+ testProteinFuntionalType: {
+ A0A178VY62: 'client',
+ A0A178W3G2: 'driver',
+ A0A1I9LN21: 'regulator',
+ A0A1I9LRM4: 'driver',
+ },
+ testProteinDriverCriterion: {
+ A0A178VY62: ['self_ps'],
+ A0A178W3G2: ['induce_formation'],
+ A0A1I9LN21: ['self_ps'],
+ A0A1I9LRM4: ['intergrity_essential', 'self_ps', 'induce_formation'],
+ },
+ testProteinExpEvidence: {
+ A0A178VY62: ['in_vivo'],
+ A0A178W3G2: ['in_tergrity_essential_cellulo'],
+ A0A1I9LN21: ['in_vitro'],
+ A0A1I9LRM4: ['in_vivo', 'in_vitro', 'frap'],
+ },
+>>>>>>> f18f524cb7f6f9b48131d4c8e7d68351288918f4
condensate: this.$route.params.condensate
? this.$route.params.condensate
: this.condensateId,
diff --git a/web/src/components/DDCODE/fetchCondensate.vue b/web/src/components/DDCODE/fetchCondensate.vue
index 9bb36da9a53888ad656fe101393070481a7ac0b0..022257b13a4e927e2dd80ce17d44024c685270a2 100644
--- a/web/src/components/DDCODE/fetchCondensate.vue
+++ b/web/src/components/DDCODE/fetchCondensate.vue
@@ -51,7 +51,7 @@ import LoginVue from '../../views/Login.vue';
console.log('url is', url);
if (vm.condensate && !_.isEmpty(vm.condensate)) {
- console.log("True");
+ console.log('True');
try{
const res = await fetch(url, {
method: 'GET',
@@ -98,7 +98,7 @@ import LoginVue from '../../views/Login.vue';
// }, 10);
// });
}catch(err){
- console.log("in catch",err.message);
+ console.log('in catch',err.message);
vm.loading = false;
vm.response = ''
vm.fetchError = `${err.message} Internal Error, please write a mail to DDCode Admin.`
diff --git a/web/src/components/DDCODE/fetchProtein.vue b/web/src/components/DDCODE/fetchProtein.vue
index 49c0335ebad0b46087a39d94919e42fc2ea0606d..b67835e6b90fac84da20a2facfcefc404e1007a3 100644
--- a/web/src/components/DDCODE/fetchProtein.vue
+++ b/web/src/components/DDCODE/fetchProtein.vue
@@ -62,7 +62,7 @@ export default {
Authorization: `Bearer ${apikey}`
}
})
- console.log("protein res", res);
+ console.log('protein res', res);
if(!res.ok){
vm.loading = false;
vm.response = ''
diff --git a/web/src/components/DDCODE/fetchStats.vue b/web/src/components/DDCODE/fetchStats.vue
index bbdddd5c89d43fd1940b309eba33406c185a8654..b7514e8dea8f5e4c69f0e67bf6ef784392619a51 100644
--- a/web/src/components/DDCODE/fetchStats.vue
+++ b/web/src/components/DDCODE/fetchStats.vue
@@ -59,7 +59,7 @@ export default {
vm.fetchError= '';
const response = await res.json();
- console.log("stat response", response);
+ console.log('stat response', response);
setTimeout(() => {
this.loading = false;
this.response = response
@@ -73,7 +73,7 @@ export default {
// });
}catch(error){
- console.log("true");
+ console.log('true');
vm.loading = false;
vm.response = ''
vm.fetchError = `${error.message} Internal Error, please write a mail to DDCode Admin.`
diff --git a/web/src/components/Datatable/CondensateDataTable.vue b/web/src/components/Datatable/CondensateDataTable.vue
index 428e5d98fb9156bbb5ba33d2a7d57c0274610819..ef5fcc36007385e7dde3b5763a669180f6828e36 100644
--- a/web/src/components/Datatable/CondensateDataTable.vue
+++ b/web/src/components/Datatable/CondensateDataTable.vue
@@ -1,17 +1,19 @@
<template>
<div>
- <h2 class="text-red-500" v-if="error">
- {{errorMsg}}
+ <h2
+ v-if="error"
+ class="text-red-500"
+ >
+ {{ errorMsg }}
</h2>
<div v-if="!error">
- <a ref="download" />
- <table
- :id="id"
- class="table table-striped table-bordered table-hover"
- width="100%"
- />
+ <a ref="download" />
+ <table
+ :id="id"
+ class="table table-striped table-bordered table-hover"
+ width="100%"
+ />
</div>
-
</div>
</template>
@@ -260,7 +262,7 @@ export default {
fnCallback(dat)
}
} catch(error) {
- console.log("error",error)
+ console.log('error',error)
this.error = true
this.errorMsg = 'Internal Error, please write a mail to DDCode Admin.'
}
diff --git a/web/src/components/Datatable/ProteinDataTable.vue b/web/src/components/Datatable/ProteinDataTable.vue
index c498adb1a6ec72ef7fef2055b813fbf2798687a2..08888d3a5b87f9fd57b5a8ce0bd1d8b0000c3fa7 100644
--- a/web/src/components/Datatable/ProteinDataTable.vue
+++ b/web/src/components/Datatable/ProteinDataTable.vue
@@ -1,17 +1,19 @@
<template>
<div>
- <h2 class="text-red-500" v-if="error">
- {{errorMsg}}
+ <h2
+ v-if="error"
+ class="text-red-500"
+ >
+ {{ errorMsg }}
</h2>
<div v-if="!error">
- <a ref="download" />
- <table
- :id="id"
- class="table table-striped table-bordered table-hover"
- width="100%"
- />
+ <a ref="download" />
+ <table
+ :id="id"
+ class="table table-striped table-bordered table-hover"
+ width="100%"
+ />
</div>
-
</div>
</template>
diff --git a/web/src/components/LandingPage.vue b/web/src/components/LandingPage.vue
index 6d86fce7f327f2498d5fa8f10447d2c2942bfd5d..fa30e82ab4e0a69808999dd5fd868cb1df73ef14 100644
--- a/web/src/components/LandingPage.vue
+++ b/web/src/components/LandingPage.vue
@@ -3,116 +3,119 @@
id="page-content-wrapper"
class="flex flex-wrap justify-center"
>
- <div class="w-5/6">
- <h2>
- <strong>Dresden</strong> Condensate Database and Encyclopedia
- {{ isDev ? "(Dev version)" : "" }}
- </h2>
- <p>
- <b>
- DD-CODE is a comprehensive, manually curated database of biomolecular
- condensates and an encyclopedia of the scientific terms used to describe
- and characterize those condensates.
- </b>
- <br>
- <br>
- </p>
+ <div class="w-5/6">
+ <h2>
+ <strong>Dresden</strong> Condensate Database and Encyclopedia
+ {{ isDev ? "(Dev version)" : "" }}
+ </h2>
+ <p>
+ <b>
+ DD-CODE is a comprehensive, manually curated database of biomolecular
+ condensates and an encyclopedia of the scientific terms used to describe
+ and characterize those condensates.
+ </b>
+ <br>
+ <br>
+ </p>
- <form
- class="form-horizontal"
- autocomplete="off"
- onSubmit="return false;"
- >
- <div class="row mb-2">
- <label class="control-label col-sm-2" />
- <div class="col-sm-4 input-sm">
- <input
- id="protein"
- v-model="pick"
- class="radio-inline"
- type="radio"
- value="protein"
- >
- <label
- class="radio-label"
- for="protein"
- >Protein</label>
- <input
- id="condensate"
- v-model="pick"
- class="radio-inline"
- type="radio"
- value="condensate"
- >
- <label
- class="radio-label"
- for="condensate"
- >Condensate</label>
+ <form
+ class="form-horizontal"
+ autocomplete="off"
+ onSubmit="return false;"
+ >
+ <div class="row mb-2">
+ <label class="control-label col-sm-2" />
+ <div class="col-sm-4 input-sm">
+ <input
+ id="protein"
+ v-model="pick"
+ class="radio-inline"
+ type="radio"
+ value="protein"
+ >
+ <label
+ class="radio-label"
+ for="protein"
+ >Protein</label>
+ <input
+ id="condensate"
+ v-model="pick"
+ class="radio-inline"
+ type="radio"
+ value="condensate"
+ >
+ <label
+ class="radio-label"
+ for="condensate"
+ >Condensate</label>
+ </div>
</div>
- </div>
- <div class="form-group">
- <label
- class="control-label col-sm-2"
- for="species"
- >Species</label>
- <div class="col-sm-4">
- <fetch-species>
- <template slot-scope="{ response, loading }">
- <div v-if="loading">
- Loading...
- </div>
- <div v-else>
- <select
- id="species"
- v-model="species"
- class="form-control input-sm"
- >
- <option
- v-for="item in removeNullItems(response.data)"
- :key="item.tax_id"
+ <div class="form-group">
+ <label
+ class="control-label col-sm-2"
+ for="species"
+ >Species</label>
+ <div class="col-sm-4">
+ <fetch-species>
+ <template slot-scope="{ response, loading }">
+ <div v-if="loading">
+ Loading...
+ </div>
+ <div v-else>
+ <select
+ id="species"
+ v-model="species"
+ class="form-control input-sm"
>
- {{
- item._id && item._id !== 0
- ? `${item._id} (${item.tax_id})`
- : "All"
- }}
- </option>
- </select>
- </div>
- </template>
- </fetch-species>
+ <option
+ v-for="item in removeNullItems(response.data)"
+ :key="item.tax_id"
+ >
+ {{
+ item._id && item._id !== 0
+ ? `${item._id} (${item.tax_id})`
+ : "All"
+ }}
+ </option>
+ </select>
+ </div>
+ </template>
+ </fetch-species>
+ </div>
</div>
- </div>
- <div class="row">
- <label
- class="control-label col-sm-2"
- for="keyword"
- >Search</label>
- <div class="col-sm-4">
- <vue-simple-suggest
- v-model="selected"
- :list="getSuggestionList"
- @select="onSelect"
- display-attribute="name"
- >
- <!-- Filter by input text to only show the matching results -->
- <input
- id="keyword"
- v-model="keyword"
- class="form-control input-sm"
- type="text"
- :placeholder="placeholder"
+ <div class="row">
+ <label
+ class="control-label col-sm-2"
+ for="keyword"
+ >Search</label>
+ <div class="col-sm-4">
+ <vue-simple-suggest
+ v-model="selected"
+ :list="getSuggestionList"
+ display-attribute="name"
+ @select="onSelect"
>
- <div slot="suggestion-item" slot-scope="{ suggestion }">
- <span v-if="suggestion.type === 'protein'">{{suggestion.gene_name}} ({{suggestion.id}}): {{suggestion.species_name}}</span>
- <span v-else-if="suggestion.type === 'condensate'">{{suggestion.id}}</span>
- <span v-else-if="suggestion.type === 'search'">Search for <b>{{suggestion.id}}</b></span>
- </div>
- </vue-simple-suggest>
- </div>
- <div class="col-sm-3">
- <button
- class="
+ <!-- Filter by input text to only show the matching results -->
+ <input
+ id="keyword"
+ v-model="keyword"
+ class="form-control input-sm"
+ type="text"
+ :placeholder="placeholder"
+ >
+ <div
+ slot="suggestion-item"
+ slot-scope="{ suggestion }"
+ >
+ <span v-if="suggestion.type === 'protein'">{{ suggestion.gene_name }} ({{ suggestion.id }}): {{ suggestion.species_name }}</span>
+ <span v-else-if="suggestion.type === 'condensate'">{{ suggestion.id }}</span>
+ <span v-else-if="suggestion.type === 'search'">Search for <b>{{ suggestion.id }}</b></span>
+ </div>
+ </vue-simple-suggest>
+ </div>
+ <div class="col-sm-3">
+ <button
+ class="
text-white
bg-blue-600
hover:bg-blue-700
@@ -126,55 +129,54 @@
font-bold
text-2xl
"
- type="submit"
- @click="searchWithKeyword"
- >
- Search
- </button>
+ type="submit"
+ @click="searchWithKeyword"
+ >
+ Search
+ </button>
+ </div>
</div>
- </div>
- <div class="form-group">
- <label class="col-sm-2" />
- <div class="col-sm-4 input-sm">
- <span style="float: right">
- Examples:
- <router-link to="/protein_example">UNE6</router-link>,
- <router-link to="/condensate_example">nucleolus__3702</router-link>
- </span>
+ <div class="form-group">
+ <label class="col-sm-2" />
+ <div class="col-sm-4 input-sm">
+ <span style="float: right">
+ Examples:
+ <router-link to="/protein_example">UNE6</router-link>,
+ <router-link to="/condensate_example">nucleolus__3702</router-link>
+ </span>
+ </div>
</div>
- </div>
- </form>
+ </form>
- <!--<div>{{require('lodash').map(this.$store.getters['Param/proteinList'], d => d.proteinName)}}</div>-->
- <!--<tags-input v-model="proteinNameList"/>-->
- <!--<div>-->
- <!--<router-link to="/endo2" tag="button">Overview</router-link>-->
- <!--<router-link to="/pheno_profile" tag="button">Phenotype Profiles</router-link>-->
- <!--</div>-->
- <div class="mt-20">
- <Search ref="search">
- <template slot-scope="{ response, loading }">
- <div v-if="loading">
- Loading...
- </div>
- <div v-else-if="response">
- <div v-show="response.count === 0">
- No results!
+ <!--<div>{{require('lodash').map(this.$store.getters['Param/proteinList'], d => d.proteinName)}}</div>-->
+ <!--<tags-input v-model="proteinNameList"/>-->
+ <!--<div>-->
+ <!--<router-link to="/endo2" tag="button">Overview</router-link>-->
+ <!--<router-link to="/pheno_profile" tag="button">Phenotype Profiles</router-link>-->
+ <!--</div>-->
+ <div class="mt-20">
+ <Search ref="search">
+ <template slot-scope="{ response, loading }">
+ <div v-if="loading">
+ Loading...
</div>
- <data-table
- v-show="response.count > 0"
- id="dataTable"
- :category="searchPick"
- :data="response.data"
- :keyword="keyword"
- />
- </div>
- </template>
- </Search>
+ <div v-else-if="response">
+ <div v-show="response.count === 0">
+ No results!
+ </div>
+ <data-table
+ v-show="response.count > 0"
+ id="dataTable"
+ :category="searchPick"
+ :data="response.data"
+ :keyword="keyword"
+ />
+ </div>
+ </template>
+ </Search>
+ </div>
</div>
</div>
-
- </div>
</template>
<script>
diff --git a/web/src/components/Links.vue b/web/src/components/Links.vue
index c6e4591fce447c758d99b37d923b74f2a3b6a3a0..9da15d61c1510743328419a8b1a0694cac6dfc4f 100644
--- a/web/src/components/Links.vue
+++ b/web/src/components/Links.vue
@@ -5,7 +5,10 @@
:class="{ active: $route.name === 'home' }"
@mouseover="openCondensateSubMenu = false"
>
- <router-link to="/" exact>
+ <router-link
+ to="/"
+ exact
+ >
<span class="text-2xl">Home</span>
</router-link>
</li>
@@ -210,7 +213,10 @@
<span class="text-2xl">Statistics</span>
</router-link>
</li>
- <li role="presentation" @mouseover="openCondensateSubMenu = false">
+ <li
+ role="presentation"
+ @mouseover="openCondensateSubMenu = false"
+ >
<a href="https://wiki.ddcode.org">
<span class="text-2xl">Encyclopedia</span>
</a>
@@ -218,7 +224,7 @@
<li
v-show="
userData !== null &&
- (userRole === 'Contributor' || userRole === 'Maintainer')
+ (userRole === 'Contributor' || userRole === 'Maintainer')
"
role="presentation"
:class="{ active: $route.name === 'updateItems' }"
@@ -256,7 +262,10 @@
role="presentation"
@mouseover="openCondensateSubMenu = false"
>
- <router-link to="/login" @click.native="signOut">
+ <router-link
+ to="/login"
+ @click.native="signOut"
+ >
<span class="fa fa-sign-out" />
</router-link>
</li>
@@ -275,7 +284,7 @@
<script>
export default {
- name: "Links",
+ name: 'Links',
data() {
return {
// userData: this.$store.getters['User/userData']
@@ -284,10 +293,10 @@ export default {
},
computed: {
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'];
},
},
mounted: function () {
@@ -305,11 +314,11 @@ export default {
},
signOut() {
const vm = this;
- window.localStorage.removeItem("jwt");
- window.localStorage.removeItem("userData");
- window.localStorage.removeItem("roleName");
- vm.$store.dispatch("User/logOut");
- vm.$router.push("/login");
+ window.localStorage.removeItem('jwt');
+ window.localStorage.removeItem('userData');
+ window.localStorage.removeItem('roleName');
+ vm.$store.dispatch('User/logOut');
+ vm.$router.push('/login');
},
},
};
diff --git a/web/src/components/ProteinDetailPage.vue b/web/src/components/ProteinDetailPage.vue
index 22e87e0815ad70a6c5e8aed01adc0ff886bed898..3c08a7d04ada9cc8354d928230cf4e60afb52047 100644
--- a/web/src/components/ProteinDetailPage.vue
+++ b/web/src/components/ProteinDetailPage.vue
@@ -36,8 +36,10 @@
<div v-if="loading">
<base-spinner v-if="loading" />
</div>
- <div v-if="fetchError">
- <h2 class="text-red-500">{{fetchError}}</h2>
+ <div v-if="fetchError">
+ <h2 class="text-red-500">
+ {{ fetchError }}
+ </h2>
</div>
<div v-else-if="response !== null">
<h2>{{ response.data.gene_name }}</h2>
diff --git a/web/src/components/StatPage.vue b/web/src/components/StatPage.vue
index 10277063cfa7f0f3ac5c565c3c382a8db6e21597..2cd3da4d70b6beefcea5c14449b19d95180f7fc1 100644
--- a/web/src/components/StatPage.vue
+++ b/web/src/components/StatPage.vue
@@ -3,44 +3,43 @@
id="page-content-wrapper"
class="flex flex-wrap justify-center"
>
- <div class="w-5/6">
- <h2>Statistics</h2>
+ <div class="w-5/6">
+ <h2>Statistics</h2>
- <fetch-stats>
- <template slot-scope="{response, loading, fetchError}">
- <slot
- :response="response"
- :loading="loading"
- :fetchError="fetchError"
- >
- <div v-if="loading || response === null">
- <base-spinner />
- </div>
- <div v-if="fetchError" >
- <h2 class="text-red-500">
- {{fetchError}}
- </h2>
- </div>
- <div v-if='response'>
- <species-chart
- :condensate="response.species_wise_condensates"
- :protein="response.species_wise_proteins"
- />
- <!--<evidence-chart :evidence-list="response.evidence_list_data" :evidence="response.evidence_data"></evidence-chart>-->
- <histograms :condensate="response.condensate_proteome_histogram" />
- </div>
- </slot>
- </template>
- </fetch-stats>
- </div>
-
+ <fetch-stats>
+ <template slot-scope="{response, loading, fetchError}">
+ <slot
+ :response="response"
+ :loading="loading"
+ :fetchError="fetchError"
+ >
+ <div v-if="loading || response === null">
+ <base-spinner />
+ </div>
+ <div v-if="fetchError">
+ <h2 class="text-red-500">
+ {{ fetchError }}
+ </h2>
+ </div>
+ <div v-if="response">
+ <species-chart
+ :condensate="response.species_wise_condensates"
+ :protein="response.species_wise_proteins"
+ />
+ <!--<evidence-chart :evidence-list="response.evidence_list_data" :evidence="response.evidence_data"></evidence-chart>-->
+ <histograms :condensate="response.condensate_proteome_histogram" />
+ </div>
+ </slot>
+ </template>
+ </fetch-stats>
+ </div>
</div>
</template>
<script>
import FetchStats from '@/components/DDCODE/fetchStats.vue'
-import SpeciesChart from "@/components/SpeciesChart";
-import Histograms from "@/components/Histograms";
+import SpeciesChart from '@/components/SpeciesChart';
+import Histograms from '@/components/Histograms';
import BaseSpinner from './UI/BaseSpinner.vue';
// import EvidenceChart from "@/components/EvidenceChart";
const _ = require('lodash')
diff --git a/web/src/components/UpdateItemTable.vue b/web/src/components/UpdateItemTable.vue
index 4c25c83c1415179e0d16c30006af5e30be16743a..83f0ce0aadbc7f347a424942d2573b3af2a76389 100644
--- a/web/src/components/UpdateItemTable.vue
+++ b/web/src/components/UpdateItemTable.vue
@@ -81,7 +81,7 @@ export default {
title: 'Value',
data: 'attributes.Value',
render: function (data, type, row, meta) {
- console.log("all changes now", data);
+ console.log('all changes now', data);
if(data==='frap'){
return data.toUpperCase();
}else if(data === 'self_ps'){
diff --git a/web/src/components/js/datatable.js b/web/src/components/js/datatable.js
index f70755b5b2faa5e4c2044d43aefc3821e4c73dae..2fabce83c6bd8a3062b5fc6f92d2db1eca23e644 100644
--- a/web/src/components/js/datatable.js
+++ b/web/src/components/js/datatable.js
@@ -6,9 +6,9 @@ const DataTable = $.fn.dataTable;
/* Set the defaults for DataTables initialisation */
$.extend(true, DataTable.defaults, {
dom:
- "<'row'<'col-sm-6'l><'col-sm-6'f>>"
- + "<'row'<'col-sm-12'tr>>"
- + "<'row'<'col-sm-5'i><'col-sm-7'p>>",
+ '<\'row\'<\'col-sm-6\'l><\'col-sm-6\'f>>'
+ + '<\'row\'<\'col-sm-12\'tr>>'
+ + '<\'row\'<\'col-sm-5\'i><\'col-sm-7\'p>>',
renderer: 'bootstrap',
});
diff --git a/web/src/views/ForgotPassword.vue b/web/src/views/ForgotPassword.vue
index 76bf9b6002224fc3863dbb89adfc03ed3ff5b554..1d2563edb87d64fcc5aa5c4facfcb760f5d5c597 100644
--- a/web/src/views/ForgotPassword.vue
+++ b/web/src/views/ForgotPassword.vue
@@ -46,7 +46,7 @@
</p> -->
<form @submit="forgotPassword">
- <div v-if="isLoading">
+ <div v-if="isLoading">
<base-spinner />
</div>
<div class="my-4">
diff --git a/web/src/views/Help.vue b/web/src/views/Help.vue
index 9b09137e9cd4f6ebc8529bd7285b5405b5339345..248fc2322869f3ab0b55c3950691c18407a181c6 100644
--- a/web/src/views/Help.vue
+++ b/web/src/views/Help.vue
@@ -2,7 +2,9 @@
<div class="flex flex-wrap justify-center">
<div class="w-5/6">
<h2>Help</h2>
- <p class="text-3xl">Content of this page coming soon..</p>
+ <p class="text-3xl">
+ Content of this page coming soon..
+ </p>
</div>
</div>
</template>
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 0a1173222a17282d0889fe39a69c7082f11a2e72..8af1df9acd26764cab58934012de1fb19bade9a4 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -227,7 +227,7 @@ export default {
password: this.password.val,
}),
});
- console.log("response is",res);
+ console.log('response is',res);
if(!res.ok){
this.isLoading = false;
@@ -272,7 +272,7 @@ export default {
this.error = false;
this.$router.push('/profile');
}catch(err){
- console.log("catch error",err);
+ console.log('catch error',err);
this.isLoading = false;
this.error = true;
this.errorMsg = `${err.message} Internal Error, please write a mail to DDCode Admin`;
diff --git a/web/src/views/Profile.vue b/web/src/views/Profile.vue
index 285ed391e238d16dfc5a06f1d39b4a3e01bac1f9..e5b4bf4aa92517e771fb1f2f9e228c0ba7b7a081 100644
--- a/web/src/views/Profile.vue
+++ b/web/src/views/Profile.vue
@@ -28,42 +28,42 @@
</base-toaster>
<div class="w-5/6">
<fetch-profile
- v-if="userData !== null"
- :key="updatedKey"
- >
- <template slot-scope="{ response, loading, error : profile_error }">
- <slot
- :response="response"
- :loading="loading"
- :error="profile_error"
- >
- <div v-if="loading">
- <base-spinner />
- </div>
- <div v-else-if="!loading && profile_error">
- <p class="text-red-500 text-2xl">
- {{ response }}
- </p>
- </div>
- <div v-else>
- <!-- {{response}}-->
- <h4 class="round">
- User Profile
- </h4>
- <div class="panel panel-default">
- <div class="panel-body">
- <div class="container-fluid col-md-12">
- <div class="row">
- <div class="text col-sm-3">
- User ID
- </div>
- <div class="col-sm-9">
- <div class="flex justify-between">
- <b>{{ response.username }}</b>
- <div class="relative">
- <button
- type="button"
- class="
+ v-if="userData !== null"
+ :key="updatedKey"
+ >
+ <template slot-scope="{ response, loading, error : profile_error }">
+ <slot
+ :response="response"
+ :loading="loading"
+ :error="profile_error"
+ >
+ <div v-if="loading">
+ <base-spinner />
+ </div>
+ <div v-else-if="!loading && profile_error">
+ <p class="text-red-500 text-2xl">
+ {{ response }}
+ </p>
+ </div>
+ <div v-else>
+ <!-- {{response}}-->
+ <h4 class="round">
+ User Profile
+ </h4>
+ <div class="panel panel-default">
+ <div class="panel-body">
+ <div class="container-fluid col-md-12">
+ <div class="row">
+ <div class="text col-sm-3">
+ User ID
+ </div>
+ <div class="col-sm-9">
+ <div class="flex justify-between">
+ <b>{{ response.username }}</b>
+ <div class="relative">
+ <button
+ type="button"
+ class="
text-white
bg-blue-600
hover:bg-blue-700
@@ -78,17 +78,17 @@
mr-2
font-bold
"
- @click="isOpen = !isOpen"
- >
- Edit
- <font-awesome-icon
- class="ml-2"
- icon="fa-solid fa-user-pen"
- />
- </button>
- <div
- v-if="isOpen"
- class="
+ @click="isOpen = !isOpen"
+ >
+ Edit
+ <font-awesome-icon
+ class="ml-2"
+ icon="fa-solid fa-user-pen"
+ />
+ </button>
+ <div
+ v-if="isOpen"
+ class="
mt-2
absolute
z-50
@@ -99,11 +99,11 @@
shadow-lg
bg-white
"
- >
- <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
- <a
- href="#"
- class="
+ >
+ <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
+ <a
+ href="#"
+ class="
text-gray-700
rounded-lg
block
@@ -114,11 +114,11 @@
hover:text-white
hover:no-underline
"
- @click="openScientificDisciplineEdit"
- >Scientific Discipline</a>
- <a
- href="#"
- class="
+ @click="openScientificDisciplineEdit"
+ >Scientific Discipline</a>
+ <a
+ href="#"
+ class="
text-gray-700
block
px-6
@@ -129,11 +129,11 @@
hover:text-white
hover:no-underline
"
- @click="openProfileLinkEdit"
- >Profile Link</a>
- <a
- href="#"
- class="text-gray-700
+ @click="openProfileLinkEdit"
+ >Profile Link</a>
+ <a
+ href="#"
+ class="text-gray-700
text-gray-700
block
px-6
@@ -143,169 +143,169 @@
hover:bg-gray-400
hover:text-white
hover:no-underline"
- @click="openChangePassword"
- >Password</a>
+ @click="openChangePassword"
+ >Password</a>
+ </div>
</div>
</div>
</div>
</div>
- </div>
- <div class="row">
- <div class="text col-sm-3">
- Full Name
- </div>
- <div class="col-sm-9">
- <b>{{ response.full_name }}</b>
- </div>
- </div>
- <div class="row">
- <div class="text col-sm-3">
- Email
- </div>
- <div class="col-sm-9">
- {{ response.email }}
- </div>
- </div>
- <div class="row">
- <div class="text col-sm-3">
- Role
- </div>
- <div class="col-sm-9">
- {{ setRole(response.role.name) }}
- </div>
- </div>
- <div class="row">
- <div class="text col-sm-3">
- Current role
- </div>
- <div class="col-sm-9">
- <div>
- {{ response.current_role.replace(/_/g, ' ') }}
+ <div class="row">
+ <div class="text col-sm-3">
+ Full Name
+ </div>
+ <div class="col-sm-9">
+ <b>{{ response.full_name }}</b>
</div>
</div>
- </div>
- <div class="row">
- <div class="text col-sm-3">
- Scientific Discipline
- </div>
- <div class="col-sm-9">
- <div>
- {{ response.scientific_discipline.join(', ') }}
+ <div class="row">
+ <div class="text col-sm-3">
+ Email
+ </div>
+ <div class="col-sm-9">
+ {{ response.email }}
</div>
</div>
- </div>
- <div class="row">
- <div class="text col-sm-3">
- Motivation
+ <div class="row">
+ <div class="text col-sm-3">
+ Role
+ </div>
+ <div class="col-sm-9">
+ {{ setRole(response.role.name) }}
+ </div>
</div>
- <div class="col-sm-9">
- <p>
- {{ response.motivation_text }}
- </p>
+ <div class="row">
+ <div class="text col-sm-3">
+ Current role
+ </div>
+ <div class="col-sm-9">
+ <div>
+ {{ response.current_role.replace(/_/g, ' ') }}
+ </div>
+ </div>
</div>
- </div>
- <div class="row">
- <div class="text col-sm-3">
- Affiliation
+ <div class="row">
+ <div class="text col-sm-3">
+ Scientific Discipline
+ </div>
+ <div class="col-sm-9">
+ <div>
+ {{ response.scientific_discipline.join(', ') }}
+ </div>
+ </div>
</div>
- <div class="col-sm-9">
- <div>
- {{ response.current_affiliation }}
+ <div class="row">
+ <div class="text col-sm-3">
+ Motivation
+ </div>
+ <div class="col-sm-9">
+ <p>
+ {{ response.motivation_text }}
+ </p>
</div>
</div>
- </div>
- <div class="row">
- <div class="text col-sm-3">
- Profile Link
+ <div class="row">
+ <div class="text col-sm-3">
+ Affiliation
+ </div>
+ <div class="col-sm-9">
+ <div>
+ {{ response.current_affiliation }}
+ </div>
+ </div>
</div>
- <div class="col-sm-9">
- <a
- :href="response.profile_link"
- target="_blank"
- >
- {{ response.profile_link }}
- </a>
+ <div class="row">
+ <div class="text col-sm-3">
+ Profile Link
+ </div>
+ <div class="col-sm-9">
+ <a
+ :href="response.profile_link"
+ target="_blank"
+ >
+ {{ response.profile_link }}
+ </a>
+ </div>
</div>
- </div>
- <div class="row">
- <div class="text col-sm-3">
- Joined
- </div>
- <div class="col-sm-9">
- {{ response.createdAt }}
- </div>
- </div>
- <div class="row">
- <div class="text col-sm-3">
- Updated
+ <div class="row">
+ <div class="text col-sm-3">
+ Joined
+ </div>
+ <div class="col-sm-9">
+ {{ response.createdAt }}
+ </div>
</div>
- <div class="col-sm-9">
- {{ response.updatedAt }}
+ <div class="row">
+ <div class="text col-sm-3">
+ Updated
+ </div>
+ <div class="col-sm-9">
+ {{ response.updatedAt }}
+ </div>
</div>
</div>
</div>
</div>
- </div>
- <div
- v-if="editMode"
- class="panel panel-default"
- >
- <div class="panel-body">
- <div class="container-fluid col-md-12">
- <div v-if="showEditScientificDis">
- <h3 class="mb-6 border-b">
- Update Scientific Discipline
- </h3>
- <div class="row">
- <div class="text col-sm-3 p-4">
- Scientific Discipline
- </div>
- <div class="col-sm-9 p-4">
- <div
- v-for="options in scientificDisciplineOptions"
- :key="options.id"
- >
- <input
- :id="options.id"
- v-model="selected"
- type="checkbox"
- class="h-6 w-6"
- :name="options"
- :value="options.discipline"
- >
- <label
- class="mx-3"
- :for="options.id"
- >{{
- options.discipline
- }}</label>
+ <div
+ v-if="editMode"
+ class="panel panel-default"
+ >
+ <div class="panel-body">
+ <div class="container-fluid col-md-12">
+ <div v-if="showEditScientificDis">
+ <h3 class="mb-6 border-b">
+ Update Scientific Discipline
+ </h3>
+ <div class="row">
+ <div class="text col-sm-3 p-4">
+ Scientific Discipline
</div>
+ <div class="col-sm-9 p-4">
+ <div
+ v-for="options in scientificDisciplineOptions"
+ :key="options.id"
+ >
+ <input
+ :id="options.id"
+ v-model="selected"
+ type="checkbox"
+ class="h-6 w-6"
+ :name="options"
+ :value="options.discipline"
+ >
+ <label
+ class="mx-3"
+ :for="options.id"
+ >{{
+ options.discipline
+ }}</label>
+ </div>
- <p
- v-if="profile_error && scientificErrMsg"
- class="text-red-500 font-bold mt-2"
- >
- {{ scientificErrMsg }}
- </p>
+ <p
+ v-if="profile_error && scientificErrMsg"
+ class="text-red-500 font-bold mt-2"
+ >
+ {{ scientificErrMsg }}
+ </p>
+ </div>
</div>
</div>
- </div>
- <div v-if="showEditProfileLink">
- <h3 class="mb-6 border-b">
- Change Profile Link
- </h3>
- <div class="row">
- <div class="text col-sm-3 p-4">
- Profile Link
- </div>
+ <div v-if="showEditProfileLink">
+ <h3 class="mb-6 border-b">
+ Change Profile Link
+ </h3>
+ <div class="row">
+ <div class="text col-sm-3 p-4">
+ Profile Link
+ </div>
- <div class="col-sm-9 p-4">
- <input
- id="inline-profile-link"
- v-model.trim="profile_link"
- class="
+ <div class="col-sm-9 p-4">
+ <input
+ id="inline-profile-link"
+ v-model.trim="profile_link"
+ class="
bg-white
w-1/3
py-4
@@ -316,31 +316,31 @@
border border-gray-500
hover:border-gray-700
"
- type="text"
- placeholder="Enter profile link."
- >
- <p
- v-if="profile_error && profileLinkErrMsg"
- class="text-red-500 font-bold mt-2"
- >
- {{ profileLinkErrMsg }}
- </p>
+ type="text"
+ placeholder="Enter profile link."
+ >
+ <p
+ v-if="profile_error && profileLinkErrMsg"
+ class="text-red-500 font-bold mt-2"
+ >
+ {{ profileLinkErrMsg }}
+ </p>
+ </div>
</div>
</div>
- </div>
- <div v-if="showChangePassword">
- <h3 class="mb-6 border-b">
- Change Password
- </h3>
- <div class="row">
- <div class="text col-sm-3 p-4">
- Current password
- </div>
- <div class="col-sm-9 p-4">
- <input
- id="current-password"
- v-model.trim="currentPassword"
- class="
+ <div v-if="showChangePassword">
+ <h3 class="mb-6 border-b">
+ Change Password
+ </h3>
+ <div class="row">
+ <div class="text col-sm-3 p-4">
+ Current password
+ </div>
+ <div class="col-sm-9 p-4">
+ <input
+ id="current-password"
+ v-model.trim="currentPassword"
+ class="
bg-white
w-1/3
py-4
@@ -351,19 +351,19 @@
border border-gray-500
hover:border-gray-700
"
- type="password"
- >
- </div>
- </div>
- <div class="row">
- <div class="text col-sm-3 p-4">
- New Password
+ type="password"
+ >
+ </div>
</div>
- <div class="col-sm-9 p-4">
- <input
- id="inline-password"
- v-model.trim="newPassword"
- class="
+ <div class="row">
+ <div class="text col-sm-3 p-4">
+ New Password
+ </div>
+ <div class="col-sm-9 p-4">
+ <input
+ id="inline-password"
+ v-model.trim="newPassword"
+ class="
bg-white
w-1/3
py-4
@@ -374,19 +374,19 @@
border border-gray-500
hover:border-gray-700
"
- type="password"
- >
- </div>
- </div>
- <div class="row">
- <div class="text col-sm-3 p-4">
- Confirm New Password
+ type="password"
+ >
+ </div>
</div>
- <div class="col-sm-9 p-4">
- <input
- id="confirm-password"
- v-model.trim="confirmPassword"
- class="
+ <div class="row">
+ <div class="text col-sm-3 p-4">
+ Confirm New Password
+ </div>
+ <div class="col-sm-9 p-4">
+ <input
+ id="confirm-password"
+ v-model.trim="confirmPassword"
+ class="
bg-white
w-1/3
py-4
@@ -397,21 +397,21 @@
border border-gray-500
hover:border-gray-700
"
- type="password"
- >
- <p
- v-if="profile_error && passwordErrMsg"
- class="text-red-500 font-bold mt-2"
- >
- {{ passwordErrMsg }}
- </p>
+ type="password"
+ >
+ <p
+ v-if="profile_error && passwordErrMsg"
+ class="text-red-500 font-bold mt-2"
+ >
+ {{ passwordErrMsg }}
+ </p>
+ </div>
</div>
</div>
- </div>
- <div class="flex space-x-4 mt-2">
- <button
- class="
+ <div class="flex space-x-4 mt-2">
+ <button
+ class="
bg-blue-500
text-xl
font-bold
@@ -421,12 +421,12 @@
text-white
hover:bg-blue-700
"
- @click="update(response)"
- >
- Update Profile
- </button>
- <button
- class="
+ @click="update(response)"
+ >
+ Update Profile
+ </button>
+ <button
+ class="
bg-gray-500
text-xl
font-bold
@@ -436,51 +436,50 @@
text-white
hover:bg-gray-700
"
- @click="close"
- >
- Cancel
- </button>
+ @click="close"
+ >
+ Cancel
+ </button>
+ </div>
</div>
</div>
+ <p
+ v-if="profile_error && errorMsg"
+ class="text-red-500 font-bold mt-2"
+ >
+ {{ errorMsg }}
+ </p>
</div>
- <p
- v-if="profile_error && errorMsg"
- class="text-red-500 font-bold mt-2"
- >
- {{ errorMsg }}
- </p>
- </div>
<!-- <button v-if="userData !== null && (getRole === 'Contributor' || getRole === 'Maintainer')"
class="btn btn-primary" @click="$router.push('/updateitem/new')">
Create new Update Item
</button> -->
- </div>
- </slot>
- </template>
- </fetch-profile>
+ </div>
+ </slot>
+ </template>
+ </fetch-profile>
- <fetch-users v-if="getRole === 'Administrator'">
- <template slot-scope="{ response, loading }">
- <slot
- :response="response"
- :loading="loading"
- >
- <div v-if="loading || response === null" />
- <div v-else>
- <h4 class="round">
- User List
- </h4>
- <user-table
- id="usersTable"
- :data="response"
- />
- </div>
- </slot>
- </template>
- </fetch-users>
+ <fetch-users v-if="getRole === 'Administrator'">
+ <template slot-scope="{ response, loading }">
+ <slot
+ :response="response"
+ :loading="loading"
+ >
+ <div v-if="loading || response === null" />
+ <div v-else>
+ <h4 class="round">
+ User List
+ </h4>
+ <user-table
+ id="usersTable"
+ :data="response"
+ />
+ </div>
+ </slot>
+ </template>
+ </fetch-users>
</div>
-
</div>
</template>