From 10a2b27843161b8ad7b2a0e575086e891e521b20 Mon Sep 17 00:00:00 2001
From: raghosh <raghosh@loaner-laptop-13.local>
Date: Wed, 18 May 2022 16:43:57 +0200
Subject: [PATCH] Working on request actions of Novel Condensate.
---
web/src/components/LlpsTable.vue | 341 ++++++++++--------
.../components/NovelCondensateRequests.vue | 314 ++++++++++++++++
web/src/components/js/const.js | 12 +-
web/src/views/NovelCondensate.vue | 305 ++++++++++++++++
web/src/views/UpdateItem.vue | 307 ++++++++--------
web/src/views/UpdateItems.vue | 36 +-
6 files changed, 981 insertions(+), 334 deletions(-)
create mode 100644 web/src/components/NovelCondensateRequests.vue
create mode 100644 web/src/views/NovelCondensate.vue
diff --git a/web/src/components/LlpsTable.vue b/web/src/components/LlpsTable.vue
index ba054fc..8a42209 100644
--- a/web/src/components/LlpsTable.vue
+++ b/web/src/components/LlpsTable.vue
@@ -5,7 +5,7 @@
<table
:id="id"
class="table table-striped table-bordered table-hover"
- style="width:100%"
+ style="width: 100%"
/>
<the-action-modal
@@ -31,30 +31,30 @@
</template>
<script>
-import TheActionModal from './UI/TheActionModal.vue';
-import TheDeleteModal from './UI/TheDeleteModal.vue';
-import {apikey} from '@/components/js/const';
+import TheActionModal from "./UI/TheActionModal.vue";
+import TheDeleteModal from "./UI/TheDeleteModal.vue";
+import { apikey } from "@/components/js/const";
-const _ = require('lodash');
-const $ = (window.jQuery = require('jquery'));
-require('./js/clipboard');
-require('@/components/js/datatable');
+const _ = require("lodash");
+const $ = (window.jQuery = require("jquery"));
+require("./js/clipboard");
+require("@/components/js/datatable");
let table;
const scoreMap = {
- 'http://llps.biocuckoo.cn/': 1,
- 'http://db.phasep.pro/browse/highthroughput/': 2,
- 'http://db.phasep.pro/browse/reviewed/': 4,
- 'http://db.phasep.pro/browse/uniprotreviewed/': 4,
- 'http://bio-comp.org.cn/llpsdb/': 4,
- 'https://phasepro.elte.hu/': 4,
- 'https://pubmed.ncbi.nlm.nih.gov/': 4,
- 'https://cd-code.org/': 5,
+ "http://llps.biocuckoo.cn/": 1,
+ "http://db.phasep.pro/browse/highthroughput/": 2,
+ "http://db.phasep.pro/browse/reviewed/": 4,
+ "http://db.phasep.pro/browse/uniprotreviewed/": 4,
+ "http://bio-comp.org.cn/llpsdb/": 4,
+ "https://phasepro.elte.hu/": 4,
+ "https://pubmed.ncbi.nlm.nih.gov/": 4,
+ "https://cd-code.org/": 5,
};
function getStartWith(url) {
- let ret = '';
+ let ret = "";
_.forEach(_.keys(scoreMap), (i) => {
if (url.startsWith(i)) {
ret = i;
@@ -79,39 +79,39 @@ function getRating(data) {
}
}
- r.push('</div>');
+ r.push("</div>");
return r;
}
export default {
- name: 'LlpsTable',
+ name: "LlpsTable",
components: {
TheActionModal,
TheDeleteModal,
},
props: [
- 'id',
- 'data',
- 'map',
- 'pubmed',
- 'dbTags',
- 'isExperimental',
- 'canonicalId',
- 'proteinDriverCriterion',
- 'proteinExperimentalEvidence',
- 'proteinFunctionalType',
+ "id",
+ "data",
+ "map",
+ "pubmed",
+ "dbTags",
+ "isExperimental",
+ "canonicalId",
+ "proteinDriverCriterion",
+ "proteinExperimentalEvidence",
+ "proteinFunctionalType",
],
data() {
return {
toggleActionModal: false,
toggleDeleteModal: false,
- uniprotId: '',
- selectedRowData: '',
- canonicaliD: '',
+ uniprotId: "",
+ selectedRowData: "",
+ canonicaliD: "",
proteinConfidenceScore: 0,
- proteinFunctionalTypeData: '',
- proteinExperimentalEvidenceData: '',
- proteinDriverCriterionData: '',
+ proteinFunctionalTypeData: "",
+ proteinExperimentalEvidenceData: "",
+ proteinDriverCriterionData: "",
};
},
mounted() {
@@ -122,11 +122,11 @@ export default {
methods: {
closeModal() {
this.toggleActionModal = false;
- this.$emit('update-key');
+ this.$emit("update-key");
},
closeDeleteModal() {
this.toggleDeleteModal = false;
- this.$emit('update-key');
+ this.$emit("update-key");
},
fetchProtein(uniprot_id) {
const vm = this;
@@ -136,7 +136,7 @@ export default {
// console.log(url)
// this.$router.push(url)
// window.open(url);
- vm.$router.push(url)
+ vm.$router.push(url);
},
forwardUniprot(uniprot_id) {
const vm = this;
@@ -145,7 +145,7 @@ export default {
// // eslint-disable-next-line
// console.log(url)
// window.open(url);
- vm.$router.push(url)
+ vm.$router.push(url);
},
createLink(link) {
return `<a href="${link}" class="external-link tooltipped tooltipped-n tooltipped-multiline"
@@ -163,15 +163,15 @@ export default {
// console.log(item)
if (item) {
const url =
- 'https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esummary.fcgi?db=pubmed&retmode=json&id=';
+ "https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esummary.fcgi?db=pubmed&retmode=json&id=";
const request = url + item;
- let $row = $('#' + item);
+ let $row = $("#" + item);
- if (!$row.attr('aria-label')) {
+ if (!$row.attr("aria-label")) {
fetch(request, {
- method : 'GET',
- mode: 'cors',
- headers: {}
+ method: "GET",
+ mode: "cors",
+ headers: {},
})
.then((response) => response.json())
.then((response) => {
@@ -180,9 +180,9 @@ export default {
$(`a[id="${item}"]`).each(function () {
$(this).attr(
- 'aria-label',
+ "aria-label",
`${res.title}\n\n${_.map(res.authors, (a) => a.name).join(
- ', '
+ ", "
)}`
);
});
@@ -201,16 +201,16 @@ export default {
const columns = vm.isExperimental
? [
{
- title: 'UniProt',
- data: 'uniprot_id',
- className: 'text-nowrap',
+ title: "UniProt",
+ data: "uniprot_id",
+ className: "text-nowrap",
fnCreatedCell: (nTd, sData, oData) => {
$(nTd).html(`<a href="" class="protein-link"> ${sData} </a>`);
},
},
{
- title: 'Gene Name',
- data: 'gene_name',
+ title: "Gene Name",
+ data: "gene_name",
fnCreatedCell: (nTd, sData, oData) => {
if (sData) {
$(nTd).html(`<a href="" class="protein-link"> ${sData}</a>`);
@@ -220,8 +220,8 @@ export default {
},
},
{
- title: 'Name',
- data: 'name',
+ title: "Name",
+ data: "name",
fnCreatedCell: (nTd, sData, oData) => {
if (sData) {
$(nTd).html(`<a href="" class="protein-link"> ${sData}</a>`);
@@ -266,36 +266,37 @@ export default {
// }
// },
{
- title: 'Pubmed',
- data: 'uniprot_id',
- className: 'text-nowrap',
+ title: "Pubmed",
+ data: "uniprot_id",
+ className: "text-nowrap",
render: function (data, type, row, meta) {
if (vm.pubmed) {
let dat = vm.pubmed[row.uniprot_id];
if (dat) {
- return dat.join(', ');
+ return dat.join(", ");
} else {
- return '';
+ return "";
}
} else {
- return '';
+ return "";
}
},
fnCreatedCell: (nTd, sData, oData) => {
// console.log(sData)
if (vm.pubmed) {
let data = vm.pubmed[oData.uniprot_id];
+
if (data) {
// $(nTd).html(data.filter(a => a.startsWith('http')).join('\n'));
// $(nTd).html(data.map(i => vm.createLink(i)).join('<br/>'));
$(nTd).html(
- data.map((i) => vm.createPubMedLink(i)).join(' ')
+ data.map((i) => vm.createPubMedLink(i)).join(" ")
);
} else {
- $(nTd).html('');
+ $(nTd).html("");
}
} else {
- $(nTd).html('');
+ $(nTd).html("");
}
},
},
@@ -385,22 +386,22 @@ export default {
// },
// }
{
- title: 'Confidence Score',
- className: 'text-nowrap',
- data: 'uniprot_id',
+ title: "Confidence Score",
+ className: "text-nowrap",
+ data: "uniprot_id",
render: function (data, type, row, meta) {
// console.log(_.flatMap(row.condensates, c => c.data_sources))
let dat = vm.map[row.uniprot_id];
if (dat) {
return dat;
}
- return '';
+ return "";
},
fnCreatedCell: (nTd, sData, oData) => {
// console.log(sData)
let data = vm.map[oData.uniprot_id];
if (data) {
- $(nTd).html(getRating(data).join('\n'));
+ $(nTd).html(getRating(data).join("\n"));
}
},
},
@@ -434,17 +435,17 @@ export default {
]
: [
{
- title: 'UniProt',
- data: 'uniprot_id',
- className: 'whitespace-normal',
+ title: "UniProt",
+ data: "uniprot_id",
+ className: "whitespace-normal",
fnCreatedCell: (nTd, sData, oData) => {
$(nTd).html(`<a href="" class="protein-link"> ${sData} </a>`);
},
},
{
- title: 'Gene Name',
- data: 'gene_name',
- className: 'whitespace-normal',
+ title: "Gene Name",
+ data: "gene_name",
+ className: "whitespace-normal",
fnCreatedCell: (nTd, sData, oData) => {
if (sData) {
$(nTd).html(`<a href="" class="protein-link"> ${sData}</a>`);
@@ -454,9 +455,9 @@ export default {
},
},
{
- title: 'Name',
- data: 'name',
- className: 'whitespace-normal break-all',
+ title: "Name",
+ data: "name",
+ className: "whitespace-normal break-all",
fnCreatedCell: (nTd, sData, oData) => {
if (sData) {
$(nTd).html(`<a href="" class="protein-link"> ${sData}</a>`);
@@ -484,19 +485,20 @@ export default {
// }
// },
{
- title: 'Pubmed',
- data: 'uniprot_id',
- className: 'whitespace-normal',
+ title: "Pubmed",
+ data: "uniprot_id",
+ className: "whitespace-normal",
render: function (data, type, row, meta) {
if (vm.pubmed) {
let dat = vm.pubmed[row.uniprot_id];
+ console.log("lpps data", dat);
if (dat) {
- return dat.join(', ');
+ return dat.join(", ");
} else {
- return '';
+ return "";
}
} else {
- return '';
+ return "";
}
},
fnCreatedCell: (nTd, sData, oData) => {
@@ -507,21 +509,21 @@ export default {
// $(nTd).html(data.filter(a => a.startsWith('http')).join('\n'));
// $(nTd).html(data.map(i => vm.createLink(i)).join('<br/>'));
$(nTd).html(
- data.map((i) => vm.createPubMedLink(i)).join(' ')
+ data.map((i) => vm.createPubMedLink(i)).join(" ")
);
} else {
- $(nTd).html('');
+ $(nTd).html("");
}
} else {
- $(nTd).html('');
+ $(nTd).html("");
}
},
},
{
- title: 'Functional Type',
- data: 'protein_functional_type',
- className: 'whitespace-nowrap',
-
+ title: "Functional Type",
+ data: "protein_functional_type",
+ className: "whitespace-nowrap",
+
render: function (data, type, row, meta) {
// console.log(_.flatMap(row.condensates, c => c.data_sources))
if (!vm.proteinFunctionalType) {
@@ -531,15 +533,15 @@ export default {
if (dat) {
return _.startCase(dat);
} else {
- return '';
+ return "";
}
},
},
{
- title: 'Experimental Evidence',
- data: 'protein_exp_evidence',
- className: 'whitespace-normal',
-
+ title: "Experimental Evidence",
+ data: "protein_exp_evidence",
+ className: "whitespace-normal",
+
render: function (data, type, row, meta) {
// console.log(_.flatMap(row.condensates, c => c.data_sources))
if (!vm.proteinExperimentalEvidence) {
@@ -548,18 +550,20 @@ export default {
let dat = vm.proteinExperimentalEvidence[row.uniprot_id];
if (dat) {
- const val= dat.map(i=> i==='frap'? dat[i]=i.toUpperCase() : _.startCase(i))
-
- return val.join(', ');
+ const val = dat.map((i) =>
+ i === "frap" ? (dat[i] = i.toUpperCase()) : _.startCase(i)
+ );
+
+ return val.join(", ");
}
- return '';
+ return "";
},
},
{
- title: 'Driver Criterion',
- data: 'driver_criterion',
- className: 'whitespace-normal',
-
+ title: "Driver Criterion",
+ data: "driver_criterion",
+ className: "whitespace-normal",
+
render: function (data, type, row, meta) {
// console.log(_.flatMap(row.condensates, c => c.data_sources))
if (!vm.proteinDriverCriterion) {
@@ -567,12 +571,13 @@ export default {
}
let dat = vm.proteinDriverCriterion[row.uniprot_id];
if (dat) {
-
- const val= dat.map(i=> i==='self_ps'? dat[i]='Self-PS': _.startCase(i))
-
- return val.join(', ');
+ const val = dat.map((i) =>
+ i === "self_ps" ? (dat[i] = "Self-PS") : _.startCase(i)
+ );
+
+ return val.join(", ");
}
- return '';
+ return "";
},
},
// {
@@ -606,10 +611,10 @@ export default {
// },
// }
{
- title: 'Confidence Score',
- className: 'whitespace-nowrap',
- data: 'uniprot_id',
- name: 'confidenceScore',
+ title: "Confidence Score",
+ className: "whitespace-nowrap",
+ data: "uniprot_id",
+ name: "confidenceScore",
render: function (data, type, row, meta) {
// console.log(_.flatMap(row.condensates, c => c.data_sources))
let dat = vm.map[row.uniprot_id];
@@ -617,20 +622,20 @@ export default {
// console.log(getRatingValue(vm.map[row.uniprot_id]))
return dat;
}
- return '';
+ return "";
},
fnCreatedCell: (nTd, sData, oData) => {
let data = vm.map[oData.uniprot_id];
if (data) {
- $(nTd).html(getRating(data).join('\n'));
+ $(nTd).html(getRating(data).join("\n"));
}
},
},
{
- title: 'Action',
- data: 'uniprot_id',
- name: 'action',
- className: 'text-nowrap',
+ title: "Action",
+ data: "uniprot_id",
+ name: "action",
+ className: "text-nowrap",
fnCreatedCell: (nTd, sData, oData) => {
$(nTd).html(
`<button class="rounded-md bg-transparent hover:bg-blue-500 text-blue-700
@@ -680,7 +685,7 @@ export default {
// aaSorting: [[ 0, 'asc' ]],
lengthMenu: [
[10, 25, 50, -1],
- [10, 25, 50, 'All'],
+ [10, 25, 50, "All"],
],
paging: true,
searching: true,
@@ -689,7 +694,7 @@ export default {
order: [], // order: [[0, 'asc']],
bDestroy: true, // Add this property to new setting,
oLanguage: {
- sSearch: 'Filter',
+ sSearch: "Filter",
},
dom: '<"row"<"col-sm-2"l><"col-sm-2"f><"col-sm-6"p><"#download.col-sm-2">><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>',
// initComplete: function () {
@@ -723,20 +728,22 @@ export default {
table = $(tableId).DataTable(nTableOptions);
- $('#download').html('<div style="text-align: right;"><div class="dropdown">\n' +
- ' <button class="btn download-link" type="button" id="dropdownMenuButton">\n' +
- ' Download CSV\n' +
- ' </button>\n' +
- '</div></div>');
+ $("#download").html(
+ '<div style="text-align: right;"><div class="dropdown">\n' +
+ ' <button class="btn download-link" type="button" id="dropdownMenuButton">\n' +
+ " Download CSV\n" +
+ " </button>\n" +
+ "</div></div>"
+ );
if (
- !this.$store.getters['User/userRole'] ||
- this.$store.getters['User/userRole'] === 'Administrator' ||
- this.$store.getters['User/userRole'] === 'Authenticated'
+ !this.$store.getters["User/userRole"] ||
+ this.$store.getters["User/userRole"] === "Administrator" ||
+ this.$store.getters["User/userRole"] === "Authenticated"
) {
var colIndex;
table.columns().every(function () {
- colIndex = table.column('action:name').index();
+ colIndex = table.column("action:name").index();
// ... do something with data(), or this.nodes(), etc
});
@@ -745,20 +752,20 @@ export default {
const tableBody = `${tableId} tbody`;
- $(tableBody).on('click', 'tr td a.protein-link', (e) => {
+ $(tableBody).on("click", "tr td a.protein-link", (e) => {
e.preventDefault();
const tr = $(e.target).parent().parent();
const row = table.row(tr);
vm.fetchProtein(row.data().uniprot_id);
});
- $(tableBody).on('click', 'tr td a.uniprot-link', (e) => {
+ $(tableBody).on("click", "tr td a.uniprot-link", (e) => {
e.preventDefault();
const tr = $(e.target).parent().parent();
const row = table.row(tr);
vm.forwardUniprot(row.data().uniprot_id);
});
- $(tableBody).on('click', 'tr td button.edit-link', (e) => {
+ $(tableBody).on("click", "tr td button.edit-link", (e) => {
e.preventDefault();
const tr = $(e.target).parent().parent();
@@ -789,7 +796,7 @@ export default {
proteinDriCri = vm.proteinDriverCriterion[driverCri];
}
}
-
+
vm.proteinFunctionalTypeData = findProteinFunctionalType;
vm.proteinExperimentalEvidenceData = proteinExpEvi;
vm.proteinDriverCriterionData = proteinDriCri;
@@ -802,24 +809,24 @@ export default {
// vm.$router.push(`/protein/editDetails/${id}`);
// vm.fetchPubMedId(e.target.id);
});
- $(tableBody).on('click', 'tr td button.delete-link', (e) => {
+ $(tableBody).on("click", "tr td button.delete-link", (e) => {
e.preventDefault();
const tr = $(e.target).parent().parent();
const row = table.row(tr);
const id = row.data().uniprot_id;
vm.uniprotId = id;
-
+
vm.toggleDeleteModal = true;
// vm.$router.push(`/protein/editDetails/${id}`);
// vm.fetchPubMedId(e.target.id);
});
- $(tableBody).on('mouseover', 'tr td a.pubmed-link', (e) => {
+ $(tableBody).on("mouseover", "tr td a.pubmed-link", (e) => {
e.preventDefault();
// console.log(e.target.id)
vm.fetchPubMedId(e.target.id);
});
- $('#download').on('click', (e) => {
+ $("#download").on("click", (e) => {
e.preventDefault();
vm.downloadCsv();
});
@@ -827,19 +834,27 @@ export default {
async downloadCsv() {
const vm = this;
if (vm.data) {
-
- console.log(vm.data)
+ console.log(vm.data);
const data = vm.data;
let exports = [];
- let header = ['UniProt', 'Gene Name', 'Name', 'Pubmed', 'Functional Type', 'Experimental Evidence', 'Driver Criterion', 'DB', 'Confidence Score'];
-
- exports.push(header.join(', '));
-
- _.forEach(data, item => {
-
+ let header = [
+ "UniProt",
+ "Gene Name",
+ "Name",
+ "Pubmed",
+ "Functional Type",
+ "Experimental Evidence",
+ "Driver Criterion",
+ "DB",
+ "Confidence Score",
+ ];
+
+ exports.push(header.join(", "));
+
+ _.forEach(data, (item) => {
let pubMedIds = [];
if (vm.pubmed) {
let pubMedId = vm.pubmed[item.uniprot_id];
@@ -879,22 +894,35 @@ export default {
let dbTags;
if (vm.dbTags) {
let dat = vm.dbTags[id];
- dbTags = dat.join('\t');
+ dbTags = dat.join("\t");
}
- exports.push([`"${item.uniprot_id}"`, `"${item.gene_name}"`, `"${item.name}"`, `"${pubMedIds.join('\t')}"`, findProteinFunctionalType, proteinExpEvi, proteinDriCri, dbTags, findScore].join(','));
- })
+ exports.push(
+ [
+ `"${item.uniprot_id}"`,
+ `"${item.gene_name}"`,
+ `"${item.name}"`,
+ `"${pubMedIds.join("\t")}"`,
+ findProteinFunctionalType,
+ proteinExpEvi,
+ proteinDriCri,
+ dbTags,
+ findScore,
+ ].join(",")
+ );
+ });
- let blob = new Blob([exports.join('\n')], {type: 'text/csv'})
+ let blob = new Blob([exports.join("\n")], { type: "text/csv" });
- let contentDisposition = 'Content-Disposition: attachment; filename="download-data.csv"'
- let filename = contentDisposition.split('filename=')[1]
- filename = filename.replace(/"/g, '')
+ let contentDisposition =
+ 'Content-Disposition: attachment; filename="download-data.csv"';
+ let filename = contentDisposition.split("filename=")[1];
+ filename = filename.replace(/"/g, "");
- let link = vm.$refs.download
- link.href = window.URL.createObjectURL(blob)
- link.download = filename
- link.click()
+ let link = vm.$refs.download;
+ link.href = window.URL.createObjectURL(blob);
+ link.download = filename;
+ link.click();
}
},
},
@@ -963,7 +991,6 @@ ul.pagination {
border-color: #30546b;
}
-
.link {
color: #ef0087 !important;
}
diff --git a/web/src/components/NovelCondensateRequests.vue b/web/src/components/NovelCondensateRequests.vue
new file mode 100644
index 0000000..6831b67
--- /dev/null
+++ b/web/src/components/NovelCondensateRequests.vue
@@ -0,0 +1,314 @@
+<template>
+ <section>
+ <table
+ :id="id"
+ class="table table-striped table-bordered table-hover"
+ style="width: 100%"
+ ></table>
+ </section>
+</template>
+
+<script>
+const _ = require("lodash");
+let host = require("./js/const").apiHost;
+
+const $ = (window.jQuery = require("jquery"));
+require("@/components/js/datatable");
+
+let table;
+export default {
+ props: ["id", "meta"],
+ data() {
+ return {
+ rows: [],
+ header: [],
+ total: 0,
+ isDev: process.env.NODE_ENV === "development",
+ };
+ },
+ computed: {
+ jwt: function () {
+ return this.$store.getters["User/jwt"];
+ },
+ getRole: function () {
+ return this.$store.getters["User/userData"];
+ },
+ },
+ mounted() {
+ const vm = this;
+ vm.createTable(vm.id);
+ },
+ methods: {
+ editUpdateItem(id) {
+ // eslint-disable-next-line
+ this.$router.push("/updateitem/" + id);
+ },
+ createTable(id) {
+ console.log("in created", this.getRole);
+ const vm = this;
+ const columns = [
+ {
+ title: "ID",
+ data: "id",
+ fnCreatedCell: (nTd, sData, oData) => {
+ $(nTd).html(`<a href="" class="edit-link"> ${sData}</a>`);
+ },
+ },
+ {
+ title: "Name",
+ data: "attributes.Name",
+ },
+ {
+ title: "Proteins",
+ data: "attributes.Proteins",
+ render: function (data, type, row, meta) {
+ if (data) {
+ let dat;
+ dat = data.map((e) => e.uniprot_id);
+ return dat;
+ } else {
+ return "";
+ }
+ },
+ },
+ {
+ title: "Species Tax ID",
+ data: "attributes.SpeciesTaxId",
+ },
+ {
+ title: "Status",
+ data: "attributes.Status",
+ fnCreatedCell: (nTd, sData, oData) => {
+ if (sData === "synced") {
+ $(nTd).html(
+ `<div class="rounded-full capitalize font-bold px-4 mr-2 bg-gray-500 text-white p-2 rounded flex items-center justify-center">${sData}</div>`
+ );
+ } else if (sData === "accepted") {
+ $(nTd).html(
+ `<div class="rounded-full capitalize font-bold px-4 mr-2 bg-green-500 text-white p-2 rounded flex items-center justify-center">${sData}</div>`
+ );
+ } else if (sData === "rejected") {
+ $(nTd).html(
+ `<div class="rounded-full capitalize font-bold px-4 mr-2 bg-red-500 text-white p-2 rounded flex items-center justify-center">${sData}</div>`
+ );
+ } else if (sData === "requested") {
+ $(nTd).html(
+ `<div class="rounded-full capitalize font-bold px-4 mr-2 bg-yellow-500 text-white p-2 rounded flex items-center justify-center">${sData}</div>`
+ );
+ }
+ },
+ },
+ {
+ title: "Submitted By",
+ data: "attributes.submittedBy.data.attributes.username",
+ },
+ {
+ title: "Submitted At",
+ data: "attributes.SubmittedAt",
+ render: function (data, type, row, meta) {
+ return new Date(Date.parse(data)).toLocaleString();
+ },
+ },
+ {
+ title: "Reviewer",
+ data: "attributes.reviewedBy",
+ render: function (data, type, row, meta) {
+ if (data.data) {
+ return data.data.attributes.username;
+ } else {
+ return "";
+ }
+ },
+ },
+
+ {
+ title: "Action",
+
+ defaultContent: `<button class=" rounded-md bg-transparent hover:bg-blue-500 text-blue-700
+ hover:text-white
+ border border-blue-500
+ hover:border-transparent
+ focus:ring-2 focus:ring-blue-300
+ items-center
+ px-4
+ py-2
+ font-bold
+ text-center view-link">View
+ </button>`,
+ },
+ ];
+ const nTableOptions = {
+ columns,
+ // aaSorting: [[ 0, 'asc' ]],
+ lengthMenu: [
+ [10, 25, 50, 100],
+ [10, 25, 50, 100],
+ ],
+ paging: true,
+ searching: true,
+ info: true,
+ bProcessing: true,
+ bServerSide: true,
+ order: [], // order: [[0, 'asc']],
+ bDestroy: true, // Add this property to new setting,
+ oLanguage: {
+ sSearch: "Filter",
+ },
+
+ fnServerData: function (sSource, aoData, fnCallback, oSettings) {
+ oSettings.jqXHR = vm.fetchCallback(vm.rows, aoData, fnCallback);
+ },
+ dom: '<"row"<"col-sm-2"l><"col-sm-2"f><"col-sm-8"p>><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>',
+ };
+
+ const tableId = `#${id}`;
+ if (table) {
+ table.destroy();
+ $(tableId).empty();
+ }
+
+ table = $(tableId).DataTable(nTableOptions);
+
+ const tableBody = `${tableId} tbody`;
+
+ $(table.row(1).nodes()).addClass("Highlight_inUse");
+
+ $(tableBody).on("click", "tr td a.edit-link", (e) => {
+ e.preventDefault();
+ const tr = $(e.target).parent().parent();
+ const row = table.row(tr);
+ vm.editUpdateItem(row.data().id);
+ });
+ $(tableBody).on("click", "tr td button.view-link", (e) => {
+ e.preventDefault();
+ const tr = $(e.target).parent().parent();
+ const row = table.row(tr);
+ vm.editUpdateItem(row.data().id);
+ });
+ },
+ async fetchCallback(data, aoData, fnCallback) {
+ let vm = this;
+ console.log("in fetch call back");
+ // console.log(aoData)
+ let orderItem = aoData.find((x) => x.name === "order");
+ let startItem = aoData.find((x) => x.name === "start");
+ let lengthItem = aoData.find((x) => x.name === "length");
+ let searchItem = aoData.find((x) => x.name === "search");
+ // console.log(`length = ${lengthItem.value}, offset = ${startItem.value}`)
+ // console.log(`orderItem = ${orderItem.value}, searchItem = ${searchItem.value.value}`)
+
+ const page = startItem.value / lengthItem.value + 1;
+
+ let search = searchItem.value.value;
+
+ if (vm.isDev) {
+ host = require("./js/const").devApiHost;
+ }
+
+ const qs = require("qs");
+ const query = {
+ pagination: {
+ pageSize: lengthItem.value,
+ page: page,
+ },
+ };
+
+ const columns = [
+ "id",
+ "Name",
+ "SpeciesTaxId",
+ "Proteins",
+ "IsExperimental",
+
+ "Status",
+ "SubmittedAt",
+ ];
+
+ let order = ["SubmittedAt:desc"];
+ if (orderItem.value.length > 0) {
+ orderItem.value.forEach(function (data) {
+ // console.log(data)
+ order = `${columns[data.column]}:${data.dir}`;
+ });
+ // console.log(order)
+ }
+
+ query["sort"] = order;
+
+ if (searchItem.value.value) {
+ query["filters"] = {
+ $or: [
+ {
+ Entity: {
+ $containsi: search,
+ },
+ },
+ {
+ EntityId: {
+ $containsi: search,
+ },
+ },
+ {
+ ChangeOperation: {
+ $containsi: search,
+ },
+ },
+ {
+ Attribute: {
+ $containsi: search,
+ },
+ },
+ {
+ Value: {
+ $containsi: search,
+ },
+ },
+ ],
+ };
+ }
+
+ const queryString = qs.stringify(query, {
+ encodeValuesOnly: true,
+ });
+
+ let url = `${host}/api/novel-condensates?${queryString}`;
+
+ console.log("url is", url);
+
+ const jwt = vm.jwt;
+ if (jwt === null) {
+ return;
+ }
+
+ try {
+ const res = await this.axios.get(url, {
+ headers: {
+ Authorization: `Bearer ${jwt}`,
+ },
+ });
+
+ console.log("response", res);
+
+ if (res.data) {
+ let dat = {
+ draw: aoData.draw,
+ recordsTotal: query["filters"]
+ ? vm.total
+ : (vm.total = res.data.meta.pagination.total),
+ recordsFiltered: res.data.meta.pagination.total,
+ data: res.data.data,
+ };
+
+ fnCallback(dat);
+ }
+ } catch (error) {
+ this.error = true;
+ this.errorMsg = "You are not authorized to access this item.";
+ }
+ },
+ },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/web/src/components/js/const.js b/web/src/components/js/const.js
index 7c333b3..c3a351c 100644
--- a/web/src/components/js/const.js
+++ b/web/src/components/js/const.js
@@ -1,12 +1,12 @@
export const host = '/api';
-export const devHost = '/api';
-export const apiHost = '/cms';
-export const devApiHost = '/cms';
+// export const devHost = '/api';
+// export const apiHost = '/cms';
+// export const devApiHost = '/cms';
-// export const devHost = 'https://dev.cd-code.org/api';
+export const devHost = 'https://dev.cd-code.org/api';
// export const devHost = 'http://localhost:5001';
-// export const apiHost = 'http://localhost:1337';
-// export const devApiHost = 'http://localhost:1337';
+export const apiHost = 'http://localhost:1337';
+export const devApiHost = 'http://localhost:1337';
// apikey should be give here:
export const apikey = process.env.VUE_APP_API_KEY;
diff --git a/web/src/views/NovelCondensate.vue b/web/src/views/NovelCondensate.vue
new file mode 100644
index 0000000..f8f0286
--- /dev/null
+++ b/web/src/views/NovelCondensate.vue
@@ -0,0 +1,305 @@
+<template>
+ <div>
+ <base-toaster :open="toasterIsOpen" @close="hideDialog">
+ <div class="flex justify-between items-center">
+ <font-awesome-icon
+ class="ml-3"
+ icon="fa-solid fa-thumbs-up "
+ size="lg"
+ />
+
+ <h4>Request updated successfully!</h4>
+ <button class="btn btn-outline" @click="hideDialog">
+ <font-awesome-icon icon="fa-regular fa-circle-xmark" size="2x" />
+ </button>
+ </div>
+ </base-toaster>
+ <div class="flex items-center justify-center">
+ <h3 v-show="error && !jwt" class="text-2xl text-red-500">
+ {{ errorMsg }}
+ </h3>
+ <div
+ v-if="item === 'new' || loaded"
+ class="md:flex w-3/5 border border-gray-300 rounded-lg p-2 mt-5"
+ ></div>
+ </div>
+ </div>
+</template>
+<script>
+import BaseSpinner from "../components/UI/BaseSpinner.vue";
+import BaseToaster from "../components/UI/BaseToaster.vue";
+let host = require("@/components/js/const").apiHost;
+
+export default {
+ components: { BaseSpinner, BaseToaster },
+ props: ["itemId"],
+ data() {
+ return {
+ item: this.$route.params.item ? this.$route.params.item : this.itemId,
+ name: "", // [protein, condensate, condensate_protein]
+ speciesTaxId: "",
+ proteins: [],
+ synonyms: "",
+ status: "", // 1. requested, 2. accepted, 3. rejected, 4. synced
+ reviewerStatus: "Choose an action",
+ submittedBy: "",
+ submittedAt: "", // datetime
+ submissionComments: "",
+ reviewedBy: "",
+ reviewedAt: "", // datetime
+ reviewComments: "",
+ reviewerComments: "",
+ syncedAt: "", // datetime
+ syncResponse: "", // response from the sync process (errors if any)
+ loaded: false,
+ error: false,
+ errorMsg: `An error occurred, please try again`,
+ statusErrMsg: "",
+ reviewerCmtErrMsg: "",
+ isLoading: false,
+ toasterIsOpen: false,
+ actionErrMsg: "",
+ isDev: process.env.NODE_ENV === "development",
+ reqActions: ["Choose an action", "accepted", "rejected"],
+ };
+ },
+ computed: {
+ jwt: function () {
+ return this.$store.getters["User/jwt"];
+ },
+ userData: function () {
+ return this.$store.getters["User/userData"];
+ },
+ userRole: function () {
+ return this.$store.getters["User/userRole"];
+ },
+ colorChange() {
+ if (this.status === "rejected") {
+ return `bg-red-500`;
+ } else if (this.status === "requested") {
+ return `bg-yellow-500`;
+ } else if (this.status === "synced") {
+ return `bg-gray-500`;
+ } else if (this.status === "accepted") {
+ return `bg-green-500`;
+ }
+ return "";
+ },
+ },
+ mounted: async function () {
+ const vm = this;
+
+ const jwt = vm.jwt;
+ if (jwt === null) {
+ vm.$router.push("/login");
+ } else {
+ if (vm.item !== "new") {
+ vm.load(vm.item);
+ }
+ }
+ },
+ methods: {
+ showDialog() {
+ this.toasterIsOpen = true;
+ },
+ hideDialog() {
+ this.toasterIsOpen = false;
+ },
+ validateReviewerCmt() {
+ this.error = false;
+ this.reviewerCmtErrMsg = "";
+ },
+ validateStatusChange() {
+ this.error = false;
+ this.statusErrMsg = "";
+ },
+ async update(e) {
+ e.preventDefault();
+
+ const vm = this;
+
+ if (vm.isDev) {
+ host = require("@/components/js/const").devApiHost;
+ }
+
+ const jwt = vm.jwt;
+ if (jwt === null) {
+ vm.loaded = false;
+ return;
+ }
+
+ // console.log(vm.userData)
+ let dat = {
+ Entity: this.entity,
+ EntityId: this.entityId,
+ Attribute: this.attribute,
+ Value: this.attributeValue,
+ ChangeOperation: this.changeOperation,
+ SubmissionComments: this.submissionComments,
+ Status: vm.userRole === "Maintainer" ? "accepted" : this.status,
+ // ReviewedBy:
+ // ReviewedAt:
+ // ReviewComment:
+ // SyncedAt:
+ // SyncResponse:
+ };
+
+ try {
+ if (vm.item !== "new") {
+ const res = await this.axios.put(
+ `${host}/api/update-items/` + vm.item,
+ {
+ data: dat,
+ },
+ {
+ headers: {
+ Authorization: `Bearer ${jwt}`,
+ },
+ }
+ );
+ } else {
+ const res = await this.axios.post(
+ `${host}/api/update-items`,
+ {
+ data: dat,
+ },
+ {
+ headers: {
+ Authorization: `Bearer ${jwt}`,
+ },
+ }
+ );
+ }
+
+ // console.log(res)
+
+ vm.$router.push("/profile");
+ } catch (error) {
+ // console.log(error.response.data.error.message)
+ // console.log(error.response)
+ this.error = true;
+ this.errorMsg = error;
+ }
+ },
+ async load(id) {
+ const vm = this;
+
+ if (vm.isDev) {
+ host = require("@/components/js/const").devApiHost;
+ }
+
+ const jwt = vm.jwt;
+ if (jwt === null) {
+ vm.loaded = false;
+ return;
+ }
+
+ // console.log(vm.userData)
+ vm.isLoading = true;
+ try {
+ const res = await this.axios.get(`${host}/api/update-items/` + id, {
+ headers: {
+ Authorization: `Bearer ${jwt}`,
+ },
+ });
+
+ console.log(res.data.data);
+
+ if (res.data.data) {
+ const d = res.data.data.attributes;
+ vm.item = res.data.data.id;
+ vm.entity = d.Entity;
+ vm.entityId = d.EntityId;
+ vm.attribute = d.Attribute;
+ vm.attributeValue = d.Value;
+ vm.changeOperation = d.ChangeOperation;
+ vm.status = d.Status;
+ vm.submissionComments = d.SubmissionComments;
+ vm.reviewerComments = d.ReviewComments;
+ vm.reviewedBy = d.reviewedBy;
+ vm.reviewedAt = d.ReviewedAt;
+ // ReviewedBy:
+ // ReviewedAt:
+ // ReviewComment:
+ vm.syncedAt = d.SyncedAt;
+ vm.syncResponse = d.SyncResponse;
+ }
+ vm.isLoading = false;
+ vm.loaded = true;
+ } catch (error) {
+ // console.error(error)
+ this.error = true;
+ this.errorMsg = "You are not authorized to access this item.";
+ vm.isLoading = false;
+ setTimeout(() => vm.$router.go(-1), 2000);
+ }
+ },
+ async updateReview() {
+ const vm = this;
+
+ if (vm.isDev) {
+ host = require("@/components/js/const").devApiHost;
+ }
+
+ const jwt = vm.jwt;
+ if (jwt === null) {
+ vm.loaded = false;
+ return;
+ }
+ if (!this.reviewerStatus || this.reviewerStatus === "Choose an action") {
+ console.log("in update review true");
+ this.error = true;
+ this.statusErrMsg = "Please select an action.";
+
+ return;
+ } else if (this.reviewerStatus === this.status) {
+ this.error = true;
+ this.statusErrMsg =
+ "The new change status is same as previous. Please select another value.";
+ return;
+ } else if (!this.reviewComments) {
+ this.error = true;
+ this.reviewerCmtErrMsg = "Comment should not be empty!";
+ return;
+ }
+ // console.log(vm.userData)
+ let dat = {
+ Status: this.reviewerStatus,
+ ReviewComments: this.reviewComments,
+ ReviewedAt: this.reviewedAt,
+ };
+ this.isLoading = true;
+ try {
+ await this.axios.put(
+ `${host}/api/update-item/review/` + vm.item,
+ {
+ data: dat,
+ },
+ {
+ headers: {
+ Authorization: `Bearer ${jwt}`,
+ },
+ }
+ );
+
+ // console.log(res)
+ this.reviewComments = "";
+ this.isLoading = false;
+ this.toasterIsOpen = true;
+ setTimeout(() => {
+ this.toasterIsOpen = false;
+ this.load(this.item);
+ }, 2000);
+ } catch (error) {
+ // console.log(error.response.data.error.message)
+ // console.log(error.response)
+ this.error = true;
+ this.errorMsg = error;
+ vm.isLoading = false;
+ }
+ },
+ },
+};
+</script>
+<style>
+</style>
diff --git a/web/src/views/UpdateItem.vue b/web/src/views/UpdateItem.vue
index 4c5e533..819fac2 100644
--- a/web/src/views/UpdateItem.vue
+++ b/web/src/views/UpdateItem.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,22 +9,13 @@
/>
<h4>Request updated successfully!</h4>
- <button
- class="btn btn-outline"
- @click="hideDialog"
- >
- <font-awesome-icon
- icon="fa-regular fa-circle-xmark"
- size="2x"
- />
+ <button class="btn btn-outline" @click="hideDialog">
+ <font-awesome-icon icon="fa-regular fa-circle-xmark" size="2x" />
</button>
</div>
</base-toaster>
<div class="flex items-center justify-center">
- <h3
- v-show="error && !jwt"
- class="text-2xl text-red-500"
- >
+ <h3 v-show="error && !jwt" class="text-2xl text-red-500">
{{ errorMsg }}
</h3>
<div
@@ -49,10 +37,7 @@
>
{{ item === "new" ? "Create new Update Item" : item }}
</h1>
- <form
- class="w-full md:w-auto"
- @submit.prevent="updateReview"
- >
+ <form class="w-full md:w-auto" @submit.prevent="updateReview">
<div class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
<label
@@ -78,12 +63,7 @@
focus:bg-gray-200 focus:border-blue-700
"
>
- <option
- disabled
- value=""
- >
- Please select one
- </option>
+ <option disabled value="">Please select one</option>
<option>protein</option>
<option>condensate</option>
<option>condensate_protein</option>
@@ -118,7 +98,7 @@
"
type="text"
placeholder="UNE6"
- >
+ />
</div>
</div>
@@ -148,12 +128,7 @@
focus:bg-gray-200 focus:border-blue-700
"
>
- <option
- disabled
- value=""
- >
- Please select one
- </option>
+ <option disabled value="">Please select one</option>
<option>add</option>
<option>remove</option>
<option>update</option>
@@ -188,7 +163,7 @@
"
type="text"
placeholder="functional_type"
- >
+ />
</div>
</div>
@@ -219,7 +194,7 @@
"
type="text"
placeholder="driver"
- >
+ />
</div>
</div>
@@ -273,10 +248,24 @@
(userRole === 'Contributor' ||
userRole === 'Maintainer' ||
userRole === 'Administrator') &&
- itemId !== 'new'
+ itemId !== 'new'
"
:class="colorChange"
- class="rounded-full font-bold capitalize mt-3 px-4 mr-2 w-40 text-white p-2 rounded flex items-center justify-center"
+ class="
+ rounded-full
+ font-bold
+ capitalize
+ mt-3
+ px-4
+ mr-2
+ w-40
+ text-white
+ p-2
+ rounded
+ flex
+ items-center
+ justify-center
+ "
>
<!-- <div class="rounded-full px-4 mr-2 bg-gray-500 text-white p-2 rounded flex items-center justify-center">${sData}</div> -->
{{ status }}
@@ -319,9 +308,6 @@
</p>
</div>
</div>
-
-
-
<!-- <button
v-if="item !== 'new' && userRole !== 'Maintainer'"
@@ -333,7 +319,7 @@
<span class="fa fa-arrow-right" />
</button> -->
<div
- v-if="status!='rejected'"
+ v-if="status != 'rejected'"
class="md:flex md:items-center mx-3 mb-6"
>
<div class="md:w-1/3">
@@ -347,20 +333,27 @@
<div class="md:w-2/3">
<p
v-if="!syncResponse"
- class="mt-3 px-4 mr-2 w-full bg-gray-300 p-2 flex items-center justify-center"
+ class="
+ mt-3
+ px-4
+ mr-2
+ w-full
+ bg-gray-300
+ p-2
+ flex
+ items-center
+ justify-center
+ "
>
Yet to be synced.
</p>
- <p
- v-else
- class="mt-3"
- >
- {{ syncResponse }}
+ <p v-else class="mt-3">
+ {{ syncResponse }}
</p>
</div>
</div>
<div
- v-if="status!='rejected'"
+ v-if="status != 'rejected'"
class="md:flex md:items-center mx-3 mb-6"
>
<div class="md:w-1/3">
@@ -374,14 +367,21 @@
<div class="md:w-2/3">
<p
v-if="!syncedAt"
- class="mt-3 px-4 mr-2 w-full bg-gray-300 p-2 flex items-center justify-center"
+ class="
+ mt-3
+ px-4
+ mr-2
+ w-full
+ bg-gray-300
+ p-2
+ flex
+ items-center
+ justify-center
+ "
>
Yet to be synced.
</p>
- <p
- v-else
- class="mt-3"
- >
+ <p v-else class="mt-3">
{{ syncedAt }}
</p>
</div>
@@ -390,23 +390,22 @@
<div
v-if="
userRole === 'Maintainer' &&
- item !== 'new' && status!='synced'
+ item !== 'new' &&
+ status != 'synced'
"
class="mt-10"
>
<div class="relative flex py-5 items-center">
<div class="flex-grow border-t border-gray-400" />
- <span
- class="flex-shrink mx-4 text-gray-400"
- >Reviewer Section</span>
+ <span class="flex-shrink mx-4 text-gray-400"
+ >Reviewer Section</span
+ >
<div class="flex-grow border-t border-gray-400" />
</div>
<div v-if="isLoading">
<base-spinner />
</div>
- <h3 class="mb-6">
- Reviewer Action
- </h3>
+ <h3 class="mb-6">Reviewer Action</h3>
<div class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
@@ -420,7 +419,6 @@
<div class="md:w-2/3">
<div>
<select
-
id="inline-status"
v-model="reviewerStatus"
class="
@@ -439,7 +437,7 @@
<!-- <option value="Select" selected disabled>Select</option>
<option>accepted</option>
<option>rejected</option> -->
-
+
<option
v-for="action in reqActions"
:key="action"
@@ -485,7 +483,6 @@
bg-transparent
border-gray-500
hover:border-gray-700
-
"
type="text"
placeholder="Reviewer comments here"
@@ -516,11 +513,15 @@
</div>
<div class="flex space-x-4">
<button
- v-if=" userRole === 'Maintainer' &&
- item !== 'new' && status!='synced'"
+ v-if="
+ userRole === 'Maintainer' &&
+ item !== 'new' &&
+ status != 'synced'
+ "
type="submit"
:disabled="entityId.length < 3"
- class="text-white
+ class="
+ text-white
bg-blue-500
hover:bg-blue-700
focus:ring-2 focus:ring-blue-300
@@ -530,30 +531,25 @@
px-5
py-2.5
text-center
- font-bold"
+ font-bold
+ "
>
- {{ "Update Review" }}
+ {{ "Update Review" }}
</button>
<div class="group">
<button
-
type="button"
class="
-
- bg-gray
-
- group-hover:bg-gray-400
- group-hover:text-white
-
-
- focus:ring-2 focus:ring-gray-300
- rounded-lg
- border border-gray-300
- px-5
- py-3
- hover:text-gray-900
- font-bold
- "
+ bg-gray
+ group-hover:bg-gray-400 group-hover:text-white
+ focus:ring-2 focus:ring-gray-300
+ rounded-lg
+ border border-gray-300
+ px-5
+ py-3
+ hover:text-gray-900
+ font-bold
+ "
@click="$router.go(-1)"
>
Back
@@ -567,81 +563,79 @@
</div>
</template>
<script>
-import BaseSpinner from '../components/UI/BaseSpinner.vue';
-import BaseToaster from '../components/UI/BaseToaster.vue';
-let host = require('@/components/js/const').apiHost;
+import BaseSpinner from "../components/UI/BaseSpinner.vue";
+import BaseToaster from "../components/UI/BaseToaster.vue";
+let host = require("@/components/js/const").apiHost;
export default {
- name: 'UpdateItem',
+ name: "UpdateItem",
components: { BaseSpinner, BaseToaster },
- props: ['itemId'],
+ props: ["itemId"],
data() {
return {
item: this.$route.params.item ? this.$route.params.item : this.itemId,
- entity: 'protein', // [protein, condensate, condensate_protein]
- entityId: '', // protein: <uniprot_id>, condensate: <canonical_id>, condensate_protein: <uniprot_id>==<canonical_id>
- changeOperation: 'add', // add/remove/update/update_add/update_remove
- attribute: '', // protein: functional_type[driver/client/regulator], pubmed_ids[]
+ entity: "protein", // [protein, condensate, condensate_protein]
+ entityId: "", // protein: <uniprot_id>, condensate: <canonical_id>, condensate_protein: <uniprot_id>==<canonical_id>
+ changeOperation: "add", // add/remove/update/update_add/update_remove
+ attribute: "", // protein: functional_type[driver/client/regulator], pubmed_ids[]
// condensate: description, proteins
// condensate_protein: confidence_score, pubmed_ids
- attributeValue: '', // the value of the attribute to be updated. Could be "null" for add/remove operations. The data type is dynamic
- status: 'requested', // 1. requested, 2. accepted, 3. rejected, 4. synced
- reviewerStatus: 'Choose an action',
- submittedBy: '',
- submittedAt: '', // datetime
- submissionComments: '',
- reviewedBy: '',
- reviewedAt: '', // datetime
- reviewComments: '',
- reviewerComments: '',
- syncedAt: '', // datetime
- syncResponse: '', // response from the sync process (errors if any)
+ attributeValue: "", // the value of the attribute to be updated. Could be "null" for add/remove operations. The data type is dynamic
+ status: "requested", // 1. requested, 2. accepted, 3. rejected, 4. synced
+ reviewerStatus: "Choose an action",
+ submittedBy: "",
+ submittedAt: "", // datetime
+ submissionComments: "",
+ reviewedBy: "",
+ reviewedAt: "", // datetime
+ reviewComments: "",
+ reviewerComments: "",
+ syncedAt: "", // datetime
+ syncResponse: "", // response from the sync process (errors if any)
loaded: false,
error: false,
errorMsg: `An error occurred, please try again`,
- statusErrMsg: '',
- reviewerCmtErrMsg: '',
+ statusErrMsg: "",
+ reviewerCmtErrMsg: "",
isLoading: false,
toasterIsOpen: false,
- actionErrMsg:'',
- isDev: process.env.NODE_ENV === 'development',
- reqActions:['Choose an action','accepted', 'rejected']
+ actionErrMsg: "",
+ isDev: process.env.NODE_ENV === "development",
+ reqActions: ["Choose an action", "accepted", "rejected"],
};
},
computed: {
jwt: function () {
- return this.$store.getters['User/jwt'];
+ return this.$store.getters["User/jwt"];
},
userData: function () {
- return this.$store.getters['User/userData'];
+ return this.$store.getters["User/userData"];
},
userRole: function () {
- return this.$store.getters['User/userRole'];
+ return this.$store.getters["User/userRole"];
},
- colorChange(){
- if(this.status==='rejected'){
- return `bg-red-500`
- }else if(this.status==='requested'){
- return `bg-yellow-500`
+ colorChange() {
+ if (this.status === "rejected") {
+ return `bg-red-500`;
+ } else if (this.status === "requested") {
+ return `bg-yellow-500`;
+ } else if (this.status === "synced") {
+ return `bg-gray-500`;
+ } else if (this.status === "accepted") {
+ return `bg-green-500`;
}
- else if(this.status==='synced'){
- return `bg-gray-500`
- }else if(this.status==='accepted'){
- return `bg-green-500`
- }
- return ''
- }
+ return "";
+ },
},
mounted: async function () {
const vm = this;
const jwt = vm.jwt;
if (jwt === null) {
- vm.$router.push('/login');
+ vm.$router.push("/login");
} else {
- if (vm.item !== 'new') {
+ if (vm.item !== "new") {
vm.load(vm.item);
-
}
}
},
@@ -650,15 +644,15 @@ export default {
this.toasterIsOpen = true;
},
hideDialog() {
- this.toasterIsOpen = false;
+ this.toasterIsOpen = false;
},
validateReviewerCmt() {
this.error = false;
- this.reviewerCmtErrMsg = '';
+ this.reviewerCmtErrMsg = "";
},
validateStatusChange() {
this.error = false;
- this.statusErrMsg = '';
+ this.statusErrMsg = "";
},
async update(e) {
e.preventDefault();
@@ -666,7 +660,7 @@ export default {
const vm = this;
if (vm.isDev) {
- host = require('@/components/js/const').devApiHost;
+ host = require("@/components/js/const").devApiHost;
}
const jwt = vm.jwt;
@@ -683,7 +677,7 @@ export default {
Value: this.attributeValue,
ChangeOperation: this.changeOperation,
SubmissionComments: this.submissionComments,
- Status: vm.userRole === 'Maintainer' ? 'accepted' : this.status,
+ Status: vm.userRole === "Maintainer" ? "accepted" : this.status,
// ReviewedBy:
// ReviewedAt:
// ReviewComment:
@@ -692,7 +686,7 @@ export default {
};
try {
- if (vm.item !== 'new') {
+ if (vm.item !== "new") {
const res = await this.axios.put(
`${host}/api/update-items/` + vm.item,
{
@@ -720,7 +714,7 @@ export default {
// console.log(res)
- vm.$router.push('/profile');
+ vm.$router.push("/profile");
} catch (error) {
// console.log(error.response.data.error.message)
// console.log(error.response)
@@ -732,7 +726,7 @@ export default {
const vm = this;
if (vm.isDev) {
- host = require('@/components/js/const').devApiHost;
+ host = require("@/components/js/const").devApiHost;
}
const jwt = vm.jwt;
@@ -742,7 +736,7 @@ export default {
}
// console.log(vm.userData)
-vm.isLoading= true;
+ vm.isLoading = true;
try {
const res = await this.axios.get(`${host}/api/update-items/` + id, {
headers: {
@@ -750,7 +744,7 @@ vm.isLoading= true;
},
});
- console.log(res.data.data)
+ console.log(res.data.data);
if (res.data.data) {
const d = res.data.data.attributes;
@@ -768,16 +762,16 @@ vm.isLoading= true;
// ReviewedBy:
// ReviewedAt:
// ReviewComment:
- vm.syncedAt=d.SyncedAt;
- vm.syncResponse=d.SyncResponse
+ vm.syncedAt = d.SyncedAt;
+ vm.syncResponse = d.SyncResponse;
}
-vm.isLoading=false;
+ vm.isLoading = false;
vm.loaded = true;
} catch (error) {
// console.error(error)
this.error = true;
- this.errorMsg = 'You are not authorized to access this item.';
- vm.isLoading=false;
+ this.errorMsg = "You are not authorized to access this item.";
+ vm.isLoading = false;
setTimeout(() => vm.$router.go(-1), 2000);
}
},
@@ -785,7 +779,7 @@ vm.isLoading=false;
const vm = this;
if (vm.isDev) {
- host = require('@/components/js/const').devApiHost;
+ host = require("@/components/js/const").devApiHost;
}
const jwt = vm.jwt;
@@ -793,22 +787,20 @@ vm.isLoading=false;
vm.loaded = false;
return;
}
- if (!this.reviewerStatus || this.reviewerStatus === 'Choose an action') {
- console.log('in update review true');
+ if (!this.reviewerStatus || this.reviewerStatus === "Choose an action") {
+ console.log("in update review true");
this.error = true;
- this.statusErrMsg =
- 'Please select an action.';
+ this.statusErrMsg = "Please select an action.";
return;
- }else if (this.reviewerStatus===this.status) {
+ } else if (this.reviewerStatus === this.status) {
this.error = true;
this.statusErrMsg =
- 'The new change status is same as previous. Please select another value.';
+ "The new change status is same as previous. Please select another value.";
return;
- }
- else if (!this.reviewComments) {
+ } else if (!this.reviewComments) {
this.error = true;
- this.reviewerCmtErrMsg = 'Comment should not be empty!';
+ this.reviewerCmtErrMsg = "Comment should not be empty!";
return;
}
// console.log(vm.userData)
@@ -832,20 +824,19 @@ vm.isLoading=false;
);
// console.log(res)
- this.reviewComments = '';
+ this.reviewComments = "";
this.isLoading = false;
this.toasterIsOpen = true;
setTimeout(() => {
- this.toasterIsOpen =false;
- this.load(this.item);
-
+ this.toasterIsOpen = false;
+ this.load(this.item);
}, 2000);
} catch (error) {
// console.log(error.response.data.error.message)
// console.log(error.response)
this.error = true;
this.errorMsg = error;
- vm.isLoading=false;
+ vm.isLoading = false;
}
},
},
diff --git a/web/src/views/UpdateItems.vue b/web/src/views/UpdateItems.vue
index 9a3f487..fa5dfb6 100644
--- a/web/src/views/UpdateItems.vue
+++ b/web/src/views/UpdateItems.vue
@@ -4,48 +4,58 @@
<div
v-if="
userData !== null &&
- (userRole === 'Contributor' || userRole === 'Maintainer')
+ (userRole === 'Contributor' || userRole === 'Maintainer')
"
class="my-14 border border-gray-300 rounded-lg p-8"
>
<update-item-table id="update-item-table" />
</div>
+ <div
+ v-if="
+ userData !== null &&
+ (userRole === 'Contributor' || userRole === 'Maintainer')
+ "
+ class="my-14 border border-gray-300 rounded-lg p-8"
+ >
+ <novel-condensate-requests id="novel-condensate-requests" />
+ </div>
</div>
</div>
</template>
<script>
// import BaseSpinner from "../components/UI/BaseSpinner.vue";
// import BaseToaster from "../components/UI/BaseToaster.vue";
-import UpdateItemTable from '@/components/UpdateItemTable';
-let host = require('@/components/js/const').apiHost;
+import UpdateItemTable from "@/components/UpdateItemTable";
+import NovelCondensateRequests from "@/components/NovelCondensateRequests";
+let host = require("@/components/js/const").apiHost;
export default {
- name: 'UpdateItems',
- components: { UpdateItemTable },
- props: ['itemId'],
+ name: "UpdateItems",
+ components: { UpdateItemTable, NovelCondensateRequests },
+ props: ["itemId"],
data() {
return {
- isDev: process.env.NODE_ENV === 'development',
+ isDev: process.env.NODE_ENV === "development",
editMode: false,
toasterIsOpen: false,
};
},
computed: {
jwt: function () {
- return this.$store.getters['User/jwt'];
+ return this.$store.getters["User/jwt"];
},
userData: function () {
- return this.$store.getters['User/userData'];
+ return this.$store.getters["User/userData"];
},
userRole: function () {
- return this.$store.getters['User/userRole'];
+ return this.$store.getters["User/userRole"];
},
},
mounted: async function () {
const vm = this;
if (vm.userData === null) {
- this.$router.push('/login');
+ this.$router.push("/login");
} else {
vm.user = vm.userData.id;
vm.current_role = vm.userData.current_role;
@@ -67,8 +77,8 @@ export default {
<style scoped>
@import url("~@/assets/bootstrap.css");
-div.tablecontainer{
- width: 80%
+div.tablecontainer {
+ width: 80%;
}
a {
--
GitLab