EditProteinDetails.vue 10.90 KiB
<template>
<div
id="page-content-wrapper"
class="main"
>
<fetch-protein :protein="protein">
<template slot-scope="{ response, loading }">
<slot
:response="response"
:loading="loading"
>
<div v-if="loading">
Loading...
</div>
<div v-else-if="response !== null">
<h2>{{ response.data.gene_name }}</h2>
<h4 class="round">
This is edit protein page
</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">
Name
</div>
<div class="col-sm-9">
<b>Protein {{ response.data.name }}</b>
</div>
</div>
<div class="row">
<div class="text col-sm-3">
UniProt
</div>
<div class="col-sm-9">
<div v-if="response.data.uniprot_id">
<a
:href="
'https://www.uniprot.org/uniprot/' +
response.data.uniprot_id
"
class="uniprot-link"
target="_blank"
>
{{
response.data.uniprot_id +
" (" +
response.data.uniprot_readable_id +
")"
}}
<i class="glyphicon glyphicon-link" /></a>
</div>
</div>
</div>
<div class="row">
<div class="text col-sm-3">
Pubmed Ids
</div>
<div class="col-sm-6">
<div>
<span
v-for="(item, index) in getPubMedIds(
response.data.pubmed_ids
)"
:key="index"
>
<a
:id="item"
:href="'https://pubmed.ncbi.nlm.nih.gov/' + item"
class="uniprot-link tooltipped tooltipped-n tooltipped-multiline"
target="_blank"
@mouseover="fetchPubMedId(item)"
>
{{ item }}
<i class="glyphicon glyphicon-link" />
</a>
</span>
<!-- <button
v-if="
getUserData !== null &&
getUserData !== 'Administrator'
"
class="btn btn-primary btn-link"
@click="
showAddOrDeletePubmedId = !showAddOrDeletePubmedId
"
>
<font-awesome-icon
icon="fa-solid fa-pen-to-square fa-xl"
/>
</button>
<add-delete-pubmed
v-if="showAddOrDeletePubmedId"
:data="response.data"
@cancel="cancelAddOrDeletePubmedId"
/> -->
</div>
<div
id="more"
:class="{
active: response.data.pubmed_ids.length <= 7,
}"
>
<span
v-for="(item, index) in getMorePubIds(
response.data.pubmed_ids
)"
:key="index"
>
<a
:id="item"
:href="'https://pubmed.ncbi.nlm.nih.gov/' + item"
class="uniprot-link tooltipped tooltipped-n tooltipped-multiline"
target="_blank"
@mouseover="fetchPubMedId(item)"
>
{{ item }}
<i class="glyphicon glyphicon-link" />
</a>
<br v-if="index % 7 === 6">
</span>
</div>
</div>
<div
v-show="response.data.pubmed_ids.length > 7"
class="col-sm-2"
>
<a
v-show="!shownMore.pub"
class="uniprot-link"
@click="showMore('#more', 'pub', response.length)"
><i
class="fa fa-angle-double-down"
aria-hidden="true"
style="color: royalblue"
/>
Show more</a>
<a
v-show="shownMore.pub"
class="uniprot-link"
@click="showLess('#more', 'pub')"
><i
class="fa fa-angle-double-up"
aria-hidden="true"
style="color: royalblue"
/>
Show less</a>
</div>
</div>
<div class="row">
<div class="text col-sm-3">
Evidance star
</div>
<div class="col-sm-9">
stars
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p class="text-success font-bold mt-4">
{{ message }}
</p>
<div class="flex space-x-4 mt-4">
<div>
<button
class="btn btn-danger"
@click="openModal"
>
Remove the protein
</button>
</div>
<div>
<button
class="btn btn-primary"
@click="$router.go(-1)"
>
Back
</button>
</div>
<the-delete-modal
:show="toggleModal"
:title="modalTitle"
:message="message"
@confirm="confirm(response.data)"
@cancel="cancel"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</slot>
</template>
</fetch-protein>
</div>
</template>
<script>
import fetchProtein from "./DDCODE/fetchProtein.vue";
import TheDeleteModal from "./UI/TheDeleteModal.vue";
let host = require("./js/const").apiHost;
const $ = (window.jQuery = require("jquery"));
const _ = require("lodash");
require("./js/clipboard");
export default {
components: { fetchProtein, TheDeleteModal },
data() {
return {
protein: this.$route.params.proteinId,
shownMore: {
pub: false,
},
serverError: false,
message: "",
isDev: process.env.NODE_ENV === "development",
toggleModal: false,
modalTitle: "",
};
},
computed: {
jwt: function () {
return this.$store.getters["User/jwt"];
},
},
methods: {
confirm(responceData) {
this.modalTitle = "";
this.deleteProtein(responceData);
},
cancel() {
this.toggleModal = false;
this.message = "";
},
showLess(id, clazz) {
let $rows = $(id);
$rows.removeClass("active");
this.shownMore[clazz] = false;
},
showMore(id, clazz) {
let $rows = $(id);
$rows.addClass("active");
this.shownMore[clazz] = true;
},
getPubMedIds(ids) {
let outIds = [];
ids.forEach((i, idx) => {
outIds.push(`${i}`);
});
return outIds.slice(0, 7);
},
getMorePubIds(ids) {
let outIds = [];
ids.forEach((i) => {
outIds.push(`${i}`);
});
return outIds.slice(7);
},
openModal() {
this.modalTitle = "Are you sure you want to delete this protein?";
this.toggleModal = true;
},
async deleteProtein(responceData) {
const vm = this;
if (vm.isDev) {
host = require("./js/const").devApiHost;
}
let url = `${host}/api/update-items`;
let canonicalId = responceData.condensates[0].canonical_id;
console.log(canonicalId);
let data = {
Entity: "condensate",
EntityId: canonicalId,
ChangeOperation: "remove",
Attribute: "proteins",
Value: responceData.uniprot_id,
Status: "requested",
};
console.log(data);
try {
await this.axios.post(
url,
{ data: data },
{
headers: {
Authorization: `Bearer ${this.jwt}`,
},
}
);
this.message = "Request submitted successfully!";
} catch (e) {
console.error(e);
this.serverError = true;
this.message =
e.message || "Something went wrong, please try again later!";
}
},
fetchPubMedId(item) {
const vm = this;
// console.log(item)
const url =
"https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esummary.fcgi?db=pubmed&retmode=json&id=";
const request = url + item;
let $row = $("#" + item);
if (!$row.attr("aria-label")) {
fetch(request)
.then((response) => response.json())
.then((response) => {
setTimeout(() => {
const res = response.result[item];
$row.attr(
"aria-label",
vm.getTitleAuthors(res.title, res.authors)
);
}, 0);
});
}
},
getTitleAuthors(title, data) {
return `${title}\n\n${_.map(data, (a) => a.name).join(", ")}`;
},
},
};
</script>
<style>
@import url("~@/assets/bootstrap.css");
@import url("~@/assets/datatable.css");
@import url("~@/assets/tooltip.css");
</style>