diff --git a/src/main/resources/public/js/getAndAddContracts.js b/src/main/resources/public/js/getAndAddContracts.js
index 9069228a..7c5e8b60 100644
--- a/src/main/resources/public/js/getAndAddContracts.js
+++ b/src/main/resources/public/js/getAndAddContracts.js
@@ -11,9 +11,6 @@
* but this a good practice since "$" is not "reserved" to jQuery.
* Now "$" is just a function argument name and not the jQuery
* alias anymore. It could named "foo" fo ex, thus making a call like foo("#contracts") valid.
-* @todo #253:60min On frontend, in Contracts tab, after adding a new contract, we should add the new
-* contract to contract table, instead of updating table by re-fetching all contracts again.
-* Same logic should be applied to "markContractForRemove" and "restoreContract".
*/
var projectContractsCount = -1;
(function getAndAddContracts($, contractsService, usersService, confirmDialog){
@@ -203,50 +200,27 @@ var projectContractsCount = -1;
$(".hourlyRate-error").hide();
}
- /**
- * Turn a Contract into a DataTable row.
- * @param {Object} contract Contract.
- * @return Row as Array of columns.
- */
- function contractAsTableRowArray(contract){
- var removeRestoreIcon;
- if (contract.markedForRemoval == 'null') {
- removeRestoreIcon = ""
- + ""
- + "";
- } else {
- var toolTipMessage = "This contract has been marked for removal on "
- + contract.markedForRemoval.split('T')[0] + ". "
- + "No more tasks will be assigned to it and it will be removed after 30 days.";
- removeRestoreIcon = ""
- + ""
- + " "
- + ""
- + ""
- }
- return [
- contract.id.contributorUsername,
- contract.id.role,
- contract.hourlyRate,
- contract.value,
- ""
- + ""
- + " "
- + ""
- + ""
- + " "
- + removeRestoreIcon
- ];
+ /**
+ * Turn a Contract into a DataTable row.
+ * @param {Object} contract Contract.
+ * @return Row as Object.
+ */
+ function contractAsTableRowArray(contract) {
+ return {
+ contributorUsername: contract.id.contributorUsername,
+ role: contract.id.role,
+ hourlyRate: contract.hourlyRate,
+ value: contract.value,
+ options: { markedForRemoval: contract.markedForRemoval }
+ };
}
- $(document).ready(function(){
+ $(document).ready(function () {
- var project = {
+ var project = {
owner: $("#owner").text(),
name: $("#name").text()
- }
+ }
function loadContracts() {
$("#contracts").dataTable().fnDestroy();
@@ -254,128 +228,117 @@ var projectContractsCount = -1;
language: {
loadingRecords: '
'
},
- ajax: function(data, callback){
+ ajax: function (data, callback) {
contractsService
- .getAll(project)
- .then(function (contracts) {
- //adding contracts to table
- callback({ data: contracts.map(contractAsTableRowArray) });
- })
- .catch(handleError);
+ .getAll(project)
+ .then(function (contracts) {
+ //adding contracts to table
+ callback({ data: contracts.map(contractAsTableRowArray) });
+ })
+ .catch(handleError);
},
- drawCallback: function(){
- $("#contracts .contractAgenda").off();
- $("#contracts .removeContract").off();
- $("#contracts .editContract").off();
- $('[data-toggle="tooltip"]').tooltip();
- $("#contracts .contractAgenda").each(
- function () {
- $(this).on(
- "click",
- function (event) {
- var repo = $("#owner").text() + "/" + $("#name").text();
- var contributor = $(this).parent().parent().children()[0].innerText;
- var role = $(this).parent().parent().children()[1].innerText;
- var hourlyRate = $(this).parent().parent().children()[2].innerText;
- var provider = "github";
- var contract = {
- id: {
- repoFullName: repo,
- contributorUsername: contributor,
- role: role,
- provider: provider
- },
- hourlyRate: hourlyRate
- }
- getTasksOfContract(contract);
- getInvoicesOfContract(contract);
+ rowId: function (data) {
+ return data.contributorUsername + data.role;
+ },
+ columns: [
+ { data: "contributorUsername" },
+ { data: "role" },
+ { data: "hourlyRate" },
+ { data: "value" },
+ {
+ data: "options",
+ render: function (data, type) {
+ if (type === 'display') {
+ var removeRestoreIcon;
+ if (data.markedForRemoval == 'null') {
+ removeRestoreIcon = ""
+ + ""
+ + "";
+ } else {
+ var toolTipMessage = "This contract has been marked for removal on "
+ + data.markedForRemoval.split('T')[0] + ". "
+ + "No more tasks will be assigned to it and it will be removed after 30 days.";
+ removeRestoreIcon = ""
+ + ""
+ + " "
+ + ""
+ + ""
}
- )
+ return ""
+ + ""
+ + " "
+ + ""
+ + ""
+ + " "
+ + removeRestoreIcon;
+ } else {
+ return data;
+ }
}
- );
+ }
+ ],
+ drawCallback: function () {
+ $('[data-toggle="tooltip"]').tooltip();
if ($("#contracts .contractAgenda").length > 0) {
$($("#contracts .contractAgenda")[0]).trigger("click");
}
- $("#contracts .editContract").each(
- function () {
- $(this).on(
- "click",
- function (event) {
- var contributor = $(this).parent().parent().children()[0].innerText;
- var role = $(this).parent().parent().children()[1].innerText;
-
- $("#newContractCard").hide();
-
- $("#updateContractUsername").val(contributor);
- $("#updateContractRole").val(role);
- $("#usernameDisplayed").html(contributor);
- $("#roleDisplayed").html(role);
- $("#updatedHourlyRate").val("");
-
- $("#updateContractCard").show();
- }
- )
- }
- );
- $("#contracts .removeContract").each(
- function () {
- $(this).on(
- "click",
- function (event) {
- event.preventDefault();
-
- var repo = $("#owner").text() + "/" + $("#name").text();
- var contributor = $(this).parent().parent().children()[0].innerText;
- var role = $(this).parent().parent().children()[1].innerText;
- var provider = "github";
- var contract = {
- id: {
- repoFullName: repo,
- contributorUsername: contributor,
- role: role,
- provider: provider
- }
- }
- confirmDialog
- .create("Are you sure you want to remove this contract?")
- .then(() => markContractForRemoval(contract));
- }
- )
- }
- )
- $("#contracts .restoreContract").each(
- function () {
- $(this).on(
- "click",
- function (event) {
- event.preventDefault();
-
- var repo = $("#owner").text() + "/" + $("#name").text();
- var contributor = $(this).parent().parent().children()[0].innerText;
- var role = $(this).parent().parent().children()[1].innerText;
- var provider = "github";
- var contract = {
- id: {
- repoFullName: repo,
- contributorUsername: contributor,
- role: role,
- provider: provider
- }
- }
- confirmDialog
- .create("Are you sure you want to restore this contract?")
- .then(() => restoreContract(contract));
- }
- )
- }
- )
}
});
}
+ $("#contracts ").on("click", ".contractAgenda", function () {
+ var repo = $("#owner").text() + "/" + $("#name").text();
+ var contributor = $(this).parent().parent().children()[0].innerText;
+ var role = $(this).parent().parent().children()[1].innerText;
+ var hourlyRate = $(this).parent().parent().children()[2].innerText;
+ var provider = "github";
+ var contract = {
+ id: {
+ repoFullName: repo,
+ contributorUsername: contributor,
+ role: role,
+ provider: provider
+ },
+ hourlyRate: hourlyRate
+ }
+ getTasksOfContract(contract);
+ getInvoicesOfContract(contract);
+ });
+
+ $("#contracts ").on("click", ".editContract", function () {
+ var contributor = $(this).parent().parent().children()[0].innerText;
+ var role = $(this).parent().parent().children()[1].innerText;
+
+ $("#newContractCard").hide();
+
+ $("#updateContractUsername").val(contributor);
+ $("#updateContractRole").val(role);
+ $("#usernameDisplayed").html(contributor);
+ $("#roleDisplayed").html(role);
+ $("#updatedHourlyRate").val("");
+
+ $("#updateContractCard").show();
+ });
+
+ $("#contracts ").on("click", ".removeContract", function (event) {
+ event.preventDefault();
+ confirmDialog
+ .create("Are you sure you want to remove this contract?")
+ .then(() => markContractForRemoval($(this)));
+ });
+
+ $("#contracts ").on("click", ".restoreContract", function (event) {
+ event.preventDefault();
+ confirmDialog
+ .create("Are you sure you want to restore this contract?")
+ .then(() => restoreContract($(this)));
+ });
+
$("#projectContractsButton").click(
- ()=> {
- if($("#projectContractsButton").hasClass("active")) {
+ () => {
+ if ($("#projectContractsButton").hasClass("active")) {
return;
}
loadContracts();
@@ -417,11 +380,13 @@ var projectContractsCount = -1;
//check if username exists before submit
contractsService.update(project, formData)
.then(
- function(updatedContract){
+ function (updatedContract) {
$("#updateContractForm input").val('');
- loadContracts();
$("#updateContractCard").hide();
$("#newContractCard").show();
+ var table = $("#contracts").DataTable();
+ var row = table.row("#" + updatedContract.id.contributorUsername + updatedContract.id.role);
+ table.cell({ row: row.index(), column: 2}).data(updatedContract.hourlyRate).draw("page")
}
).catch(handleError)
.finally(
@@ -458,17 +423,23 @@ var projectContractsCount = -1;
/**
* Mark a Contract for deletion.
- * @param contract Contract.
+ * @param button Remove Button.
*/
- function markContractForRemoval(contract) {
+ function markContractForRemoval(button) {
+ var repo = $("#owner").text() + "/" + $("#name").text();
+ var table = $("#contracts").DataTable();
+ var row = table.row(button.parents('tr')); // row of the button
+ var data = row.data();
$.ajax( //API call to get the active Invoice.
"/api/projects/"
- + contract.id.repoFullName
- + "/contracts/" + contract.id.contributorUsername + "/mark?role=" + contract.id.role,
+ + repo
+ + "/contracts/" + data.contributorUsername + "/mark?role=" + data.role,
{
type: "PUT",
- success: function() {
- loadContracts();
+ success: function (contract) {
+ table.cell({ row: row.index(), column: 4 })
+ .data({ markedForRemoval: contract.markedForRemoval })
+ .draw("page");
},
error: function () {
alert("Something went wrong. Please refresh the page and try again.")
@@ -480,16 +451,22 @@ var projectContractsCount = -1;
/**
* Restore a contract.
* @param contract Contract.
+ * @param button Remove button.
*/
- function restoreContract(contract) {
+ function restoreContract(button) {
+ var repo = $("#owner").text() + "/" + $("#name").text();
+ var table = $("#contracts").DataTable();
+ var row = table.row(button.parents('tr')); // row of the button
+ var data = row.data()
$.ajax( //API call to get the active Invoice.
"/api/projects/"
- + contract.id.repoFullName
- + "/contracts/" + contract.id.contributorUsername + "/mark?role=" + contract.id.role,
+ + repo
+ + "/contracts/" + data.contributorUsername + "/mark?role=" + data.role,
{
type: "DELETE",
- success: function() {
- loadContracts();
+ success: function () {
+ table.cell({ row: row.index(), column: 4 })
+ .data({ markedForRemoval: 'null' });
},
error: function () {
alert("Something went wrong. Please refresh the page and try again.")
@@ -521,21 +498,21 @@ var projectContractsCount = -1;
$("#addContractLoading").show();
clearFormErrors();
disableForm(true);
- }
- ).then(
- function(){
- return contractsService.add(project, formData)
- }
- ).then(
- function(contract){
- $("#addContractForm input").val('');
- $('#addContractForm option:first').prop('selected',true);
- //we check the current page (0 based) displayed in table.
- //if is last page, we're adding the contract to table.
- //since it's the latest contract created.
- loadContracts();
- }
- ).catch(handleError)
+ }
+ ).then(
+ function () {
+ return contractsService.add(project, formData)
+ }
+ ).then(
+ function (contract) {
+ $("#addContractForm input").val('');
+ $('#addContractForm option:first').prop('selected', true);
+ $("#contracts").DataTable()
+ .rows
+ .add([contractAsTableRowArray(contract)])
+ .draw()
+ }
+ ).catch(handleError)
.finally(
function(){
disableForm(false);