Skip to content
Snippets Groups Projects
Commit 229f190b authored by moon's avatar moon
Browse files

Added "Add a condensate to this protein" in WIP 

It needs to replace the function in "addCondensate(response)" as the content is pasted from "addProtein(response)"
parent a24cc9c4
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
web/src/components/ProteinDetailPage.vue
+ 329
− 0
View file @ 229f190b
......@@ -389,6 +389,208 @@
<h4 class="round">
Condensates
</h4>
<button
v-if="
getUserData !== null &&
(getUserData === 'Maintainer' ||
getUserData === 'Contributor')
"
class="
text-white
bg-blue-600
hover:bg-blue-700
focus:ring-2 focus:ring-blue-300
rounded-lg
inline-flex
items-center
px-5
py-3
mb-5
text-center
font-bold
"
type="button"
@click="showAddCondensate = !showAddCondensate"
>
Add a condensate to this protein
</button>
<div
v-if="showAddCondensate"
class="panel panel-default mt-4"
>
<div class="panel-body">
<div class="container-fluid col-md-12">
<form
class="form-horizontal"
autocomplete="off"
@submit.prevent="addCondensate(response)"
>
<div v-if="isLoading">
<base-spinner />
</div>
<div class="form-group">
<label
class="control-label col-sm-2"
for="condensate_is_experimental"
>Synthetic?</label>
<div class="col-sm-4 pt-2">
<input
id="condensate_is_experimental_true"
v-model="condensate.is_experimental"
type="radio"
name="condensate_is_experimental"
value="true"
>
<label
for="condensate_is_experimental_true"
class="ml-2 mr-3"
>Yes</label>
<input
id="condensate_is_experimental_false"
v-model="condensate.is_experimental"
type="radio"
name="condensate_is_experimental"
value="false"
>
<label
for="condensate_is_experimental_false"
class="ml-2 mr-3"
>No</label>
</div>
</div>
<div class="form-group">
<label
class="control-label col-sm-2"
for="condensate_name"
>Condensate Name</label>
<div class="col-sm-4">
<input
id="condensate_name"
v-model.trim="condensate.name"
class="form-control input-sm"
type="text"
placeholder="Name"
>
</div>
<p
v-if="isUniProtIdError"
class="text-red-600 mt-4 font-bold"
>
{{ uniprotIdErrorMsg }}
</p>
</div>
<div class="form-group">
<label
class="control-label col-sm-2"
for="condensate_species"
>Species</label>
<div class="col-sm-4">
<input
id="condensate_species"
v-model.trim="condensate.species"
class="form-control input-sm"
type="text"
placeholder="Species (NCBI taxonomy ID)"
>
</div>
</div>
<div class="form-group">
<label
class="control-label col-sm-2"
for="condensate_synonyms"
>Synonyms</label>
<div class="col-sm-4">
<input
id="condensate_synonyms"
v-model.trim="condensate.synonyms"
class="form-control input-sm"
type="text"
placeholder="Synonyms (comma-separated)"
>
</div>
</div>
<div class="form-group">
<label
class="control-label col-sm-2"
for="condensate_comments"
>Comments</label>
<div class="col-sm-8">
<textarea
id="condensate_comments"
v-model.trim="condensate.comments"
class="
form-control
block
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700
focus:bg-white
focus:border-blue-600
focus:outline-none
"
rows="5"
:placeholder="
getUserData === 'Maintainer'
? 'Optional.'
: 'Mandatory.'
"
/>
<div class="flex space-x-4">
<button
id="dropdownMenuButton"
class="
text-white
bg-blue-600
hover:bg-blue-700
focus:ring-2 focus:ring-blue-300
rounded-lg
inline-flex
items-center
px-5
py-2.5
text-center
font-bold
"
type="submit"
>
Add
</button>
<button
id="dropdownMenuButton"
class="
bg-white
hover:bg-gray-200
focus:ring-2 focus:ring-gray-300
rounded-lg
border border-gray-300
px-5
py-2.5
hover:text-gray-900
font-bold
"
type="button"
@click="showAddCondensate = !showAddCondensate"
>
Cancel
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="panel panel-default">
<table class="csi table table-hover table-responsive">
<thead>
......@@ -453,6 +655,7 @@ import AddDeletePubmed from './CMS/addDeletePubmed.vue';
//import FetchUserSpecificUpdateItems from './CMS/fetchUserSpecificUpdateItems.vue';
import ProteinUpdateItemTable from './ProteinUpdateItemTable.vue';
import BaseSpinner from './UI/BaseSpinner.vue';
import {apiHost as host} from "@/components/js/const";
//import BaseToaster from "./UI/BaseToaster.vue";
const $ = (window.jQuery = require('jquery'));
......@@ -476,6 +679,14 @@ export default {
data() {
return {
showAddCondensate: false,
condensate: {
name: '',
is_experimental: false,
species: '',
synonyms: [],
comments: '',
},
showUpdateFunctionType: false,
showAddOrDeletePubmedId: false,
shownMore: {
......@@ -487,6 +698,7 @@ export default {
dbNames: require('./js/const').db,
toasterIsOpen: false,
updatedKey: 0,
isLoading: false,
};
},
computed: {
......@@ -570,6 +782,123 @@ export default {
});
}
},
async addCondensate(response) {
if (this.condensate.name === '') {
this.uniprotIdErrorMsg = 'Condensate name 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.isUniProtIdError = true;
return;
} else if (this.uniprotId.length > 10) {
this.uniprotIdErrorMsg =
'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.isUniProtIdError = true;
return;
}
const findUniprotId = response.data.proteins.find(
(u) => u.uniprot_id === this.uniprotId
);
if (findUniprotId) {
this.message = '';
this.uniprotIdErrorMsg = 'The Uniprot ID already exists!';
this.isUniProtIdError = true;
return;
}
this.isError = false;
if (this.isDev) {
host = require('./js/const').devApiHost;
}
let url = `${host}/api/update-items`;
let data;
if (this.getUserData === 'Maintainer') {
data = {
Entity: 'condensate',
EntityId: response.data.canonical_id,
ChangeOperation: 'add',
Attribute: 'proteins',
Value: this.uniprotId,
SubmissionComments:
'Maintainer do not need to provide a reason for such change at the moment!',
Status: 'accepted',
};
} else {
if (this.proteinComment === '' || this.proteinComment.length < 50) {
this.proteinCommentErr = true;
this.commentErrorMsg =
'Reason should not be empty or less than 50 characters!';
return;
}
data = {
Entity: 'condensate',
EntityId: response.data.canonical_id,
ChangeOperation: 'add',
Attribute: 'proteins',
Value: this.uniprotId,
SubmissionComments: this.proteinComment,
Status: 'requested',
};
}
this.isLoading = true;
try {
await this.axios.post(
url,
{ data: data },
{
headers: {
Authorization: `Bearer ${this.jwt}`,
},
}
);
this.isLoading = false;
this.toasterIsOpen = true;
this.error = false;
this.isSubmitted = true;
this.uniprotId = '';
this.comment = '';
this.proteinCommentErr = false;
this.commentErrorMsg = '';
this.updatedKey += 1;
setTimeout(() => {
this.toasterIsOpen = false;
}, 2000);
} catch (e) {
console.error(e);
this.message =
e.message || 'Something went wrong, please try again later!';
this.isSubmitted = true;
this.error = true;
}
// try {
// const res=await this.axios.get(
// `${host}
// /api/update-item/findCondensate/${response.data.canonical_id}`,
// {
// headers: {
// Authorization: `Bearer ${this.jwt}`,
// },
// }
// );
// console.log(await res)
// } catch (e) {
// console.error(e);
// }
},
},
};
</script>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment