From c334b61c8065bf3e68fbc195c8b5062cc8ddee04 Mon Sep 17 00:00:00 2001 From: cristianpela Date: Wed, 6 Jan 2021 15:26:35 +0200 Subject: [PATCH] #285 Updates on Project Contracts will not reload the whole table. --- .../resources/public/js/getAndAddContracts.js | 337 ++++++++---------- 1 file changed, 157 insertions(+), 180 deletions(-) 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);