ProteinUpdateItemTable.vue 8.42 KiB
<template>
<table
:id="id"
class="table table-striped table-bordered table-hover"
/>
</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", "data", "meta"],
data() {
return {
rows: [],
header: [],
total: 0,
isDev: process.env.NODE_ENV === "development",
};
},
computed: {
jwt: function () {
return this.$store.getters["User/jwt"];
},
},
mounted() {
const vm = this;
vm.createTable(vm.id);
},
methods: {
editUpdateItem(id) {
// eslint-disable-next-line
this.$router.push("/updateitem/" + id);
},
createTable(id) {
const vm = this;
const columns = [
{
title: "ID",
data: "id",
fnCreatedCell: (nTd, sData, oData) => {
$(nTd).html(`<a href="" class="edit-link"> ${sData}</a>`);
},
},
{
title: "Resource Name",
data: "attributes.Entity",
},
{
title: "Resource ID",
data: "attributes.EntityId",
},
{
title: "Attribute",
data: "attributes.Attribute",
},
{
title: "Value",
data: "attributes.Value",
},
{
title: "Change Operation",
data: "attributes.ChangeOperation",
},
{
title: "Status",
data: "attributes.Status",
fnCreatedCell: (nTd, sData, oData) => {
if(sData==='synced'){
$(nTd).html(`<div class="rounded-full 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 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 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 px-4 mr-2 bg-yellow-500 text-white p-2 rounded flex items-center justify-center">${sData}</div>`);
}
},
},
{
title: "Submitted at",
data: "attributes.SubmittedAt",
render: function (data, type, row, meta) {
return new Date(Date.parse(data)).toLocaleString();
},
},
{
title: "Action",
// data: `<button class="btn btn-primary edit-link btn-outline font-bold" style="font-weight:bold">
// View<i class="fa fa-edit" style="font-weight:bold"></i>
// </button>`,
defaultContent: `<button class="btn btn-primary view-link btn-outline font-bold" style="font-weight:bold">
View
</button>`,
}
// {
// title: "Reviewer",
// data: "attributes.reviewedBy",
// render: function (data, type, row, meta) {
// if (data.data) {
// return data.data.attributes.username;
// } else {
// return "";
// }
// },
// },
];
vm.headers = columns;
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`;
$(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(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",
"Entity",
"EntityId",
"Attribute",
"Value",
"ChangeOperation",
"Status",
"SubmittedAt",
"submittedBy.username",
"reviewedBy.username",
];
let order = ["id:asc"];
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/update-item/filterProteinRequest/${vm.data}?${queryString}`;
console.log("protein udate", url);
const jwt = vm.jwt;
if (jwt === null) {
return;
}
// let dat = {
// draw: aoData.draw,
// data: vm.data
// }
// fnCallback(dat)
try {
const res = await this.axios.get(url, {
headers: {
Authorization: `Bearer ${jwt}`,
},
});
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.";
}
},
exportTsv() {
// const vm = this;
},
},
};
</script>
<style scoped>
@import url("~@/assets/datatable.css");
select.form-control {
font-size: 12px;
padding: 3px 12px;
}
ul.pagination {
font-size: 1rem;
}
.form-inline .form-control {
height: 25px;
line-height: 25px;
vertical-align: middle;
}
.edit-link {
font-weight: bold;
color: #0065b9;
}
.pagination {
font-size: 1.2rem;
}
.panel-table {
font-size: 1.4rem;
margin-bottom: 20px;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
</style>