feat: create and edit rows from tables interactive widget

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

cypress/component/ContentReferenceWidget.cy.js

@@ -4,6 +4,7 @@ describe('ContentReferenceWidget', () => {
 	let richObject = {}
 
 	before(() => {
+		// Load the richObject from a fixture
 		cy.fixture('widgets/richObject.json')
 			.then(richObjectFixture => {
 				richObject = richObjectFixture
@@ -27,21 +28,74 @@ describe('ContentReferenceWidget', () => {
 		const searchTerm = 'cat'
 
 		// Search for the row including the above search term
-		cy.get('@searchBar').type(searchTerm)
+		cy.get('@options').find('input').type(searchTerm)
 
 		// Ensure there is only one resultant row and
 		// verify the row correctly includes the search term
 		cy.get('@rows').its('length').should('equal', 1)
 		cy.get('@rows').first().as('firstRow')
 		cy.get('@firstRow').children().first().contains(searchTerm, { matchCase: false })
 	})
+
+	it('can create a row', () => {
+		mountContentWidget(richObject);
+
+		// Load a fixture used to reply to the create row request
+		cy.fixture('widgets/createRow.json')
+			.then((rowData) => {
+				cy.reply('**/index.php/apps/tables/row', rowData)
+			})
+
+		// Click the Create Row button
+		cy.get('@options').find('button').click()
+
+		// Input row data
+		cy.get('[data-cy="Name"] input').type('Hello')
+		cy.get('[data-cy="Account manager"] input').type('World')
+
+		// Create the row and make sure the modal disappears
+		cy.get('[data-cy="createRowSaveButton"]').click()
+		cy.get('.modal__content').should('not.exist')
+
+		// Make sure the row was added and is visible
+		cy.get('@rows').last().children().as('createdRow')
+		cy.get('@createdRow').first().contains('Hello')
+		cy.get('@createdRow').next().contains('World')
+	})
+
+	it('can edit a row', () => {
+		mountContentWidget(richObject)
+
+		// Load a fixture which is used to reply to the edit row request
+		cy.fixture('widgets/editRow.json')
+			.then((rowData) => {
+				cy.reply('**/index.php/apps/tables/row/*', rowData)
+			})
+
+		// Click the edit button on the first row
+		cy.get('@rows').first().find('td.sticky button').click({ force: true })
+
+		// Get the first field of the Edit Row modal
+		cy.get('.modal__content').as('editRowModal')
+		cy.get('@editRowModal').find('.row.space-T').as('fields')
+		cy.get('@fields').first().find('input').as('editNameField')
+
+		// Clear the current input and enter a new value
+		cy.get('@editNameField').clear()
+		cy.get('@editNameField').type('Giraffe')
+
+		// Edit the row and make sure the modal disappears
+		cy.get('[data-cy="editRowSaveButton"]').click()
+		cy.get('@editRowModal').should('not.exist')
+
+		// Check the edited row for the new value
+		cy.get('@rows').first().children().as('editedRow')
+		cy.get('@editedRow').first().contains('Giraffe')
+	})
 })
 
 function mountContentWidget(richObject) {
-	cy.intercept({
-		method: 'GET',
-		url: '**/index.php/apps/tables/row/table/*',
-	}, richObject.rows)
+	cy.reply('**/index.php/apps/tables/row/table/*', richObject.rows)
 
 	cy.mount(ContentReferenceWidget, {
 		propsData: {
@@ -50,7 +104,7 @@ function mountContentWidget(richObject) {
 	})
 
 	// Get some often used elements
-	cy.get('.tables-content-widget > .options input').as('searchBar')
+	cy.get('.tables-content-widget > .options').as('options')
 	cy.get('.tables-content-widget .NcTable table').as('table')
 	cy.get('@table').find('tbody tr[data-cy="customTableRow"]').as('rows')
 }

cypress/fixtures/widgets/createRow.json

@@ -0,0 +1,42 @@
+{
+    "id": 229,
+    "tableId": 49,
+    "createdBy": null,
+    "createdAt": null,
+    "lastEditBy": null,
+    "lastEditAt": null,
+	"data": [
+		{
+			"columnId": 159,
+			"value": "Hello"
+		},
+		{
+			"columnId": 160,
+			"value": "World"
+		},
+		{
+			"columnId": 161,
+			"value": ""
+		},
+		{
+			"columnId": 162,
+			"value": "2024-05-30"
+		},
+		{
+			"columnId": 164,
+			"value": ""
+		},
+		{
+			"columnId": 165,
+			"value": ""
+		},
+		{
+			"columnId": 166,
+			"value": 30
+		},
+		{
+			"columnId": 167,
+			"value": ""
+		}
+	]
+}

cypress/fixtures/widgets/editRow.json

@@ -0,0 +1,46 @@
+{
+    "id": 226,
+    "tableId": 49,
+    "createdBy": null,
+    "createdAt": null,
+    "lastEditBy": null,
+    "lastEditAt": null,
+    "data": [
+        {
+            "columnId": 159,
+            "value": "Giraffe"
+        },
+        {
+            "columnId": 160,
+            "value": "Mr. Smith"
+        },
+        {
+            "columnId": 161,
+            "value": "Dog food every week"
+        },
+        {
+            "columnId": 162,
+            "value": "2023-01-01"
+        },
+        {
+            "columnId": 163,
+            "value": "2023-12-31"
+        },
+        {
+            "columnId": 164,
+            "value": "The dog is our best friend."
+        },
+        {
+            "columnId": 165,
+            "value": "Standard, SLA Level 2"
+        },
+        {
+            "columnId": 166,
+            "value": 80
+        },
+        {
+            "columnId": 167,
+            "value": "Likes treats"
+        }
+    ]
+}

cypress/support/component.js

@@ -31,3 +31,9 @@ const prepareOptions = (options = {}) => {
 Cypress.Commands.add('mount', (component, options) => {
 	return mount(component, prepareOptions(options))
 })
+
+Cypress.Commands.add('reply', (route, data) => {
+	cy.intercept(route, (req) => {
+		req.reply(data)
+	})
+})

src/modules/modals/CreateRow.vue

@@ -38,6 +38,7 @@ import { NcModal, NcCheckboxRadioSwitch, NcNoteCard, NcButton } from '@nextcloud
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/dist/index.css'
 import ColumnFormComponent from '../main/partials/ColumnFormComponent.vue'
+import { translate as t } from '@nextcloud/l10n'
 
 export default {
 	name: 'CreateRow',
@@ -96,6 +97,7 @@ export default {
 		},
 	},
 	methods: {
+		t,
 		actionCancel() {
 			this.reset()
 			this.addNewAfterSave = false

src/modules/modals/EditRow.vue

@@ -48,6 +48,7 @@
 <script>
 import { NcModal, NcButton, NcNoteCard } from '@nextcloud/vue'
 import { showError } from '@nextcloud/dialogs'
+import { translate as t } from '@nextcloud/l10n'
 import '@nextcloud/dialogs/dist/index.css'
 import ColumnFormComponent from '../main/partials/ColumnFormComponent.vue'
 import permissionsMixin from '../../shared/components/ncTable/mixins/permissionsMixin.js'
@@ -124,6 +125,7 @@ export default {
 		this.loadValues()
 	},
 	methods: {
+		t,
 		loadValues() {
 			if (this.row) {
 				const tmp = {}

src/shared/components/ncEditor/NcEditor.vue

@@ -18,6 +18,7 @@
 <script>
 import { NcEmptyContent } from '@nextcloud/vue'
 import Alert from 'vue-material-design-icons/Alert.vue'
+import { translate as t } from '@nextcloud/l10n'
 
 export default {
 
@@ -96,6 +97,7 @@ export default {
 	},
 
 	methods: {
+		t,
 		async setupEditor() {
 			this?.editor?.destroy()
 			if (this.textAppAvailable) {

src/views/ContentReferenceWidget.vue

@@ -112,6 +112,8 @@ export default {
 			const { width } = entry.contentRect
 			this.$el.style.setProperty('--widget-content-width', `${width}px`)
 		})
+
+		await this.loadRows()
 	},
 
 	methods: {