Added id to PayLoad of CustomTable edit-clicked event (#604)

__Pull Request Description__

This PR adds the id of the row being edited in the CustomTableComponent
to the `edit-clicked` event. It makes corresponding changes in the unit
tests for the component and in the UI example page and its tests.

---
__Licensing Certification__

FarmData2 is a [Free Cultural
Work](https://freedomdefined.org/Definition) and all accepted
contributions are licensed as described in the LICENSE.md file. This
requires that the contributor holds the rights to do so. By submitting
this pull request __I certify that I satisfy the terms of the [Developer
Certificate of Origin](https://developercertificate.org/)__ for its
contents.

Co-authored-by: Chris <31524934+FutzMonitor@users.noreply.github.com>

.gitignore

@@ -10,6 +10,7 @@ docker/logo/.htaccess
 
 **/cypress/screenshots/*
 **/cypress/videos/*
+**/cypress/downloads
 
 **/__pycache__
 

farmdata2/farmdata2_modules/fd2_example/ui/ui.html

@@ -119,7 +119,8 @@
             @clone="cloneEvent"
             @row-deleted="deleteTableRow"
             @row-edited="updateTableRow"
-
+            @edit-clicked="showEditRow"
+            @edit-canceled="cancelEditRow"
             >
         </custom-table>
         <button data-cy='show-column' 
@@ -130,6 +131,11 @@
             @click='hideColumn'>Hide Column</button>
         <button data-cy='add-data' 
             @click='addDataRow'>Add Data Row</button>
+        <br><br>
+        <UL>
+            <LI>ID of row being edited: <span data-cy="edit-row-id">{{ editRowID }}</span></LI>
+        </UL>
+        <br>
     </UL>
 
     <p><b>FieldSets & Buttons</b></p>
@@ -247,8 +253,7 @@
         myButtons: [
             {"hoverTip": 'Clone', "visible": true, "inputType": {'type': 'button', 'value': 'glyphicon glyphicon-asterisk', 'buttonClass': 'table-button btn btn-warning', 'event': 'clone'}},
         ],
-
-
+        editRowID: "",
 
         waitingOnLogs: false,
         waitingOnErr: false,
@@ -318,26 +323,34 @@
 
         // backend needs to be updated when deleting a row
         deleteTableRow(rowIDs) {
-        for(let i = 0; i < rowIDs.length; i++){
-            // delete record
-            let url = ""
-            deleteRecord(url, this.sessionToken)
-            .then(() => {
-                for(var j = 0; j < this.tableData.length; j++){
-                if(this.tableData[j].id == rowIDs[i]){
-                    this.tableData.splice(j, 1)
+            for(let i = 0; i < rowIDs.length; i++){
+                // delete record
+                let url = ""
+                deleteRecord(url, this.sessionToken)
+                .then(() => {
+                    for(var j = 0; j < this.tableData.length; j++){
+                    if(this.tableData[j].id == rowIDs[i]){
+                        this.tableData.splice(j, 1)
+                    }
                 }
-            }
-            })
-            .catch((err => {
-                this.errBannerVisibility = true
-            }))
+                })
+                .catch((err => {
+                    this.errBannerVisibility = true
+                }))
 
-        }
+            }
 
             // Would also need to delete data from the db via API here.
         },
 
+        showEditRow(rowID) {
+            this.editRowID = rowID
+        },
+
+        cancelEditRow(rowID) {
+            this.editRowID = ""
+        },
+
         updateTableRow(edits, rowID) {
             for(var i=0; i < this.tableData.length; i++){
                 if(this.tableData[i].id == rowID){
@@ -346,6 +359,9 @@
                     }
                 }
             }
+
+            this.editRowID = ""
+
           // Would also need to update data in the db via API here.
         },
 

farmdata2/farmdata2_modules/fd2_example/ui/ui.table.spec.js

@@ -28,6 +28,8 @@ describe('Test the behavior of the CustomTableComponent', () => {
             .should('have.text', '5')
         cy.get('[data-cy=r0-boolean-input]')
             .should('be.checked')
+        cy.get('[data-cy=edit-row-id]')
+            .should('have.text','')
     })
 
     it('Select the first item in the table and delete it.', () => {
@@ -56,11 +58,17 @@ describe('Test the behavior of the CustomTableComponent', () => {
             .clear()
             .type('Tee Shirts')
 
+        cy.get('[data-cy=edit-row-id]')
+            .should('have.text','1')
+
         cy.get('[data-cy=r0-save-button]')
             .click()
 
         cy.get('[data-cy=r0-Item]')
             .should('have.text','Tee Shirts')
+
+        cy.get('[data-cy=edit-row-id]')
+            .should('have.text','')
     })
 
     it('Click the Add Row button and ensure that the new row was added.', () => {

farmdata2/farmdata2_modules/resources/CustomTableComponent.js

@@ -51,9 +51,9 @@ catch(err) {
  * </div>
  * 
  * <div>
- * @vue-event edit-clicked - Emitted when an edit button is clicked to indicate that the table is in edit mode.
+ * @vue-event edit-clicked - Emitted when an edit button is clicked to indicate that the table is in edit mode.  The payload contains the id of the row that is being edited.
  * @vue-event {Object|Number} row-edited - Emitted when the save button is clicked after editing a row.  The event has two payloads.  The first is an Object indicates the changes that were made to the row. For example, if a user changes the crop of a row to kale, the emitted object will be <code>{crop: 'KALE'}</code>, and if they also edited the area to Chuau it would be <code>{crop: 'KALE', area: 'CHUAU'}</code>.  The second is a Number that indicates 'id' of the row that was changed. 
- * @vue-event row-canceled - Emitted when a row was being edited and the cancel button is clicked.
+ * @vue-event edit-canceled - Emitted when a row was being edited and the cancel button is clicked.
  * @vue-event {Array[]} row-deleted - Emitted when the delete button is clicked if any of the checkboxes on the lefthand side of a row are selected. Emits an array of all the IDs that were deleted for the page to make the appropriate API request to have those records deleted.
  * @vue-event {Array[]} event - Emits an 'event', name of event depends on the button's event name, with a payload of row IDs for the parent page to handle. 
  * </div>
@@ -306,7 +306,7 @@ let CustomTableComponent = {
                 'id': this.rows[index].id,
                 'data': this.rows[index].data    
             }
-            this.$emit('edit-clicked')
+            this.$emit('edit-clicked', this.rows[index].id)
         },
 
         finishRowEdit: function(id){
@@ -336,7 +336,7 @@ let CustomTableComponent = {
             this.editedRowData = {}
 
             this.isMatch = true
-            this.$emit('row-canceled')
+            this.$emit('edit-canceled')
         },
 
         deleteRow: function(){

farmdata2/farmdata2_modules/resources/CustomTableComponent.spec.comp.js

@@ -207,6 +207,16 @@ describe('custom table component', () => {
                 .should('be.disabled')
         })
 
+        it('clicking edit emits row id', () => {
+            const spy = cy.spy()
+            Cypress.vue.$on('edit-clicked', spy)
+            cy.get('[data-cy=r1-edit-button]')
+                .click()
+                .then(() => {
+                    expect(spy).to.be.calledWith(2)
+                })
+        })
+
         it('save button emits changes when clicked', () => {
             const spy = cy.spy()
             Cypress.vue.$on('row-edited', spy)
@@ -395,7 +405,7 @@ describe('custom table component', () => {
 
         it('cancel button emits an event', () => {
             const spy = cy.spy()
-            Cypress.vue.$on('row-canceled', spy)
+            Cypress.vue.$on('edit-canceled', spy)
             cy.get('[data-cy=r0-edit-button')
                 .click()