Skip to content
Snippets Groups Projects
Commit 613f4194 authored by moon's avatar moon
Browse files

Single quote is used for string in order to allow double quote string inside just in case

parent 445ddeb5
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
web/src/components/DataTableCondensate.vue
+ 117
− 146
View file @ 613f4194
......@@ -10,9 +10,9 @@
</template>
<script>
const _ = require("lodash");
const $ = (window.jQuery = require("jquery"));
require("./js/datatable");
const _ = require('lodash');
const $ = (window.jQuery = require('jquery'));
require('./js/datatable');
let table;
......@@ -36,8 +36,8 @@ function getRating(data) {
}
export default {
name: "data-table",
props: ["id", "data", "category"],
name: 'data-table',
props: ['id', 'data', 'category'],
data() {
return {};
},
......@@ -57,15 +57,15 @@ export default {
const columns = [
{
title: "Name",
data: "name",
title: 'Name',
data: 'name',
fnCreatedCell: (nTd, sData, oData) => {
$(nTd).html(`<a href="" class="detail-link"> ${oData.name}</a>`);
},
},
{
title: "Proteins",
data: "proteins",
title: 'Proteins',
data: 'proteins',
fnCreatedCell: (nTd, sData, oData) => {
// console.log(sData)
if (sData) {
......@@ -78,7 +78,7 @@ export default {
},
},
{
title: "No. Proteins",
title: 'No. Proteins',
render: function (data, type, row, meta) {
return row.protein_count;
},
......@@ -110,13 +110,13 @@ export default {
// }
// },
{
title: "Species",
data: "species_name",
title: 'Species',
data: 'species_name',
render: function (data, type, row, meta) {
if (data) {
return data + " (" + row.species_tax_id + ")";
return data + ' (' + row.species_tax_id + ')';
} else {
return "Chimeras";
return 'Chimeras';
}
},
},
......@@ -124,16 +124,16 @@ export default {
const nTableOptions = {
columns,
aaSorting: [[0, "asc"]],
aaSorting: [[0, 'asc']],
paging: true,
searching: true,
info: true,
data,
pageLength: 100,
order: [[2, "desc"]], // order: [[0, 'asc']],
order: [[2, 'desc']], // order: [[0, 'asc']],
bDestroy: true, // Add this property to new setting,
oLanguage: {
sSearch: "Filter ",
sSearch: 'Filter ',
},
dom: '<"row"<"col-sm-8"f><"#download.col-sm-4">><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>',
// dom: '<"row"<"col-sm-4"l><"col-sm-6"f><"#download.col-sm-2">><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>'
......@@ -150,8 +150,8 @@ export default {
$("#download").html(
'<div style="text-align: right;"><div class="dropdown">\n' +
' <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n' +
" Download\n" +
" </button>\n" +
' Download\n' +
' </button>\n' +
' <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">\n' +
' <a class="dropdown-item" href="#" ref="csv">CSV</a>\n' +
' <a class="dropdown-item" href="#" ref="tsv">TSV</a>\n' +
......@@ -162,7 +162,7 @@ export default {
const tableBody = `${tableId} tbody`;
$(tableBody).on("click", "tr td a.detail-link", (e) => {
$(tableBody).on('click', 'tr td a.detail-link', (e) => {
e.preventDefault();
const tr = $(e.target).parent().parent();
const row = table.row(tr);
......@@ -170,16 +170,16 @@ export default {
vm.moveDetailPage(row.data().canonical_id);
});
$("#download").on("click", "a.dropdown-item", (e) => {
$('#download').on('click', 'a.dropdown-item', (e) => {
e.preventDefault();
switch ($(e.target).text()) {
case "CSV":
case 'CSV':
vm.downloadCsv();
break;
case "TSV":
case 'TSV':
vm.downloadTsv();
break;
case "JSON":
case 'JSON':
vm.downloadJson();
break;
}
......@@ -189,15 +189,9 @@ export default {
const vm = this;
let exports = [];
let header = [
"Name",
"Canonical ID",
"Biomolecular/Synthetic",
"Species Name",
"Species Tax Id",
"Proteins",
];
exports.push(header.join(", "));
let header = ['Name', 'Canonical ID', 'Biomolecular/Synthetic', 'Species Name', 'Species Tax Id', 'Proteins'];
exports.push(header.join(', '));
_.forEach(vm.data, (item) => {
let proteins = [];
......@@ -205,24 +199,15 @@ export default {
proteins.push(`${i}`);
});
exports.push(
[
`"${item.name}"`,
`"${item.canonical_id}"`,
`"${item.is_experimental ? "Syntehtic" : "Biomolecular"}"`,
`"${item.species_name}"`,
item.species_tax_id,
`"${proteins.join("\t")}"`,
].join(",")
);
exports.push([`"${item.name}"`, `"${item.canonical_id}"`, `"${item.is_experimental ? 'Synthetic' : 'Biomolecular'}"`, `"${item.species_name}"`, item.species_tax_id,`"${proteins.join('\t')}"`].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 filename = contentDisposition.split('filename=')[1];
filename = filename.replace(/"/g, '');
let link = vm.$refs.download;
link.href = window.URL.createObjectURL(blob);
......@@ -233,15 +218,9 @@ export default {
const vm = this;
let exports = [];
let header = [
"Name",
"Canonical ID",
"Biomolecular/Synthetic",
"Species Name",
"Species Tax Id",
"Proteins",
];
exports.push(header.join(", "));
let header = ['Name', 'Canonical ID', 'Biomolecular/Synthetic', 'Species Name', 'Species Tax Id', 'Proteins'];
exports.push(header.join(', '));
_.forEach(vm.data, (item) => {
let proteins = [];
......@@ -249,24 +228,16 @@ export default {
proteins.push(`${i}`);
});
exports.push(
[
item.name,
item.canonical_id,
item.is_experimental ? "Synthetic" : "Biomolecular",
item.species_name,
item.species_tax_id,
proteins.join(", "),
].join("\t")
);
exports.push([item.name, item.canonical_id, item.is_experimental ? 'Synthetic' : 'Biomolecular', item.species_name, item.species_tax_id, proteins.join(', ')].join('\t'));
});
let blob = new Blob([exports.join("\n")], { type: "text/tsv" });
let blob = new Blob([exports.join('\n')], { type: 'text/tsv' });
let contentDisposition =
'Content-Disposition: attachment; filename="download-data.tsv"';
let filename = contentDisposition.split("filename=")[1];
filename = filename.replace(/"/g, "");
let filename = contentDisposition.split('filename=')[1];
filename = filename.replace(/"/g, '');
let link = vm.$refs.download;
link.href = window.URL.createObjectURL(blob);
......@@ -276,13 +247,13 @@ export default {
downloadJson() {
const vm = this;
let blob = new Blob([JSON.stringify(vm.data, null, 2)], {
type: "application/json",
type: 'application/json',
});
let contentDisposition =
'Content-Disposition: attachment; filename="download-data.json"';
let filename = contentDisposition.split("filename=")[1];
filename = filename.replace(/"/g, "");
let filename = contentDisposition.split('filename=')[1];
filename = filename.replace(/"/g, '');
let link = vm.$refs.download;
link.href = window.URL.createObjectURL(blob);
......@@ -298,94 +269,94 @@ export default {
</script>
<style>
.mainContent {
padding: 20px;
}
.mainContent {
padding: 20px;
}
.checked {
color: orange;
}
.no-padding {
padding: 0;
}
.checked {
color: orange;
}
.no-padding {
padding: 0;
}
.gene {
font-size: large;
}
.gene {
font-size: large;
}
table.pheno {
width: 330px;
}
table.pheno {
width: 330px;
}
td.pheno-title {
text-align: center;
}
td.pheno {
width: 33%;
border-top: none;
border-bottom: none;
text-align: center;
vertical-align: middle;
font-size: small;
word-wrap: break-spaces;
}
td.pheno-title {
text-align: center;
}
td.pheno {
width: 33%;
border-top: none;
border-bottom: none;
text-align: center;
vertical-align: middle;
font-size: small;
word-wrap: break-spaces;
}
td.pheno-item {
width: 33%;
text-align: center;
border-width: 0 1px;
word-wrap: break-word;
}
td.pheno-item {
width: 33%;
text-align: center;
border-width: 0 1px;
word-wrap: break-word;
}
.table thead td.pheno {
border-width: 0 1px;
}
.table thead td.pheno {
border-width: 0 1px;
}
table.dataTable.row-border > tbody > tr:first-child > th,
table.dataTable.row-border > tbody > tr:first-child > td,
table.dataTable.display > tbody > tr:first-child > th,
table.dataTable.display > tbody > tr:first-child > td {
border-top: none;
}
table.dataTable.row-border > tbody > tr:first-child > th,
table.dataTable.row-border > tbody > tr:first-child > td,
table.dataTable.display > tbody > tr:first-child > th,
table.dataTable.display > tbody > tr:first-child > td {
border-top: none;
}
table.dataTable.row-border > tbody > tr > th,
table.dataTable.row-border > tbody > tr > td,
table.dataTable.display > tbody > tr > th,
table.dataTable.display > tbody > tr > td {
border-top: 1px solid #ddd;
}
table.dataTable.row-border > tbody > tr > th,
table.dataTable.row-border > tbody > tr > td,
table.dataTable.display > tbody > tr > th,
table.dataTable.display > tbody > tr > td {
border-top: 1px solid #ddd;
}
table.dataTable > tbody > tr {
background-color: #ffffff;
}
table.dataTable > tbody > tr {
background-color: #ffffff;
}
table.dataTable.row-border > tbody > tr:hover,
table.dataTable.display > tbody > tr:hover {
background-color: #f6f6f6;
}
table.dataTable.row-border > tbody > tr:hover,
table.dataTable.display > tbody > tr:hover {
background-color: #f6f6f6;
}
.detail-link {
color: #0065b9;
font-weight: bold;
}
.detail-link {
color: #0065b9;
font-weight: bold;
}
.dropdown-item {
font-size: 1.2rem;
}
.dropdown-item {
font-size: 1.2rem;
}
select.form-control {
font-size: 12px;
padding: 3px 12px;
}
select.form-control {
font-size: 12px;
padding: 3px 12px;
}
.pagination {
font-size: 1.2rem;
}
.pagination {
font-size: 1.2rem;
}
a mark {
color: #0065b9;
padding: 0;
text-decoration: underline;
font-style: oblique;
}
a mark {
color: #0065b9;
padding: 0;
text-decoration: underline;
font-style: oblique;
}
</style>
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