From f34b16510a6a0362359e2f33f1cd9c30694580a1 Mon Sep 17 00:00:00 2001
From: enjeck <patrathewhiz@gmail.com>
Date: Wed, 27 Dec 2023 17:56:08 +0100
Subject: [PATCH 1/5] feat: add error hints for mandatory fields

Signed-off-by: Cleopatra Enjeck M <patrathewhiz@gmail.com>
---
 src/modules/modals/CreateRow.vue | 46 +++++++++++++++++---------------
 src/modules/modals/EditRow.vue   | 42 ++++++++++++++++-------------
 2 files changed, 49 insertions(+), 39 deletions(-)

diff --git a/src/modules/modals/CreateRow.vue b/src/modules/modals/CreateRow.vue
index 2877d289f..5f2dd3242 100644
--- a/src/modules/modals/CreateRow.vue
+++ b/src/modules/modals/CreateRow.vue
@@ -12,6 +12,10 @@
 				<ColumnFormComponent
 					:column="column"
 					:value.sync="row[column.id]" />
+				<NcNoteCard v-if="column.mandatory && !isValueValidForColumn(row[column.id], column)"
+					type="error">
+					{{ t('tables', `"${column.title}" should not be empty`) }}
+				</NcNoteCard>
 			</div>
 			<div class="row">
 				<div class="fix-col-4 space-T end">
@@ -20,7 +24,7 @@
 							{{ t('tables', 'Add more') }}
 						</NcCheckboxRadioSwitch>
 					</div>
-					<button v-if="!localLoading" class="primary" :aria-label="t('tables', 'Save row')" @click="actionConfirm()">
+					<button v-if="!localLoading" class="primary" :aria-label="t('tables', 'Save row')" :disabled="hasEmptyMandatoryRows" @click="actionConfirm()">
 						{{ t('tables', 'Save') }}
 					</button>
 				</div>
@@ -30,8 +34,8 @@
 </template>
 
 <script>
-import { NcModal, NcCheckboxRadioSwitch } from '@nextcloud/vue'
-import { showError, showSuccess, showWarning } from '@nextcloud/dialogs'
+import { NcModal, NcCheckboxRadioSwitch, NcNoteCard } from '@nextcloud/vue'
+import { showError, showSuccess } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/dist/index.css'
 import { mapGetters } from 'vuex'
 import ColumnFormComponent from '../main/partials/ColumnFormComponent.vue'
@@ -42,6 +46,7 @@ export default {
 		NcModal,
 		ColumnFormComponent,
 		NcCheckboxRadioSwitch,
+		NcNoteCard,
 	},
 	props: {
 		showModal: {
@@ -65,6 +70,16 @@ export default {
 		nonMetaColumns() {
 			return this.columns.filter(col => col.id >= 0)
 		},
+		hasEmptyMandatoryRows() {
+			let mandatoryFieldsEmpty = false
+			this.columns.forEach(col => {
+				if (col.mandatory) {
+					const validValue = this.isValueValidForColumn(this.row[col.id], col)
+					mandatoryFieldsEmpty = mandatoryFieldsEmpty || !validValue
+				}
+			})
+			return mandatoryFieldsEmpty
+		},
 	},
 	methods: {
 		actionCancel() {
@@ -85,25 +100,14 @@ export default {
 			return !!value || value === 0
 		},
 		async actionConfirm() {
-			let mandatoryFieldsEmpty = false
-			this.columns.forEach(col => {
-				if (col.mandatory) {
-					const validValue = this.isValueValidForColumn(this.row[col.id], col)
-					mandatoryFieldsEmpty = mandatoryFieldsEmpty || !validValue
-				}
-			})
-			if (!mandatoryFieldsEmpty) {
-				this.localLoading = true
-				await this.sendNewRowToBE()
-				this.localLoading = false
-				if (!this.addNewAfterSave) {
-					this.actionCancel()
-				} else {
-					showSuccess(t('tables', 'Row successfully created.'))
-					this.reset()
-				}
+			this.localLoading = true
+			await this.sendNewRowToBE()
+			this.localLoading = false
+			if (!this.addNewAfterSave) {
+				this.actionCancel()
 			} else {
-				showWarning(t('tables', 'Please fill in the mandatory fields.'))
+				showSuccess(t('tables', 'Row successfully created.'))
+				this.reset()
 			}
 		},
 		async sendNewRowToBE() {
diff --git a/src/modules/modals/EditRow.vue b/src/modules/modals/EditRow.vue
index b6fd53751..8b13a761a 100644
--- a/src/modules/modals/EditRow.vue
+++ b/src/modules/modals/EditRow.vue
@@ -12,6 +12,10 @@
 				<ColumnFormComponent
 					:column="column"
 					:value.sync="localRow[column.id]" />
+				<NcNoteCard v-if="column.mandatory && !isValueValidForColumn(localRow[column.id], column)"
+					type="error">
+					{{ t('tables', `"${column.title}" should not be empty`) }}
+				</NcNoteCard>
 			</div>
 			<div class="row">
 				<div class="fix-col-4 space-T" :class="{'justify-between': showDeleteButton, 'end': !showDeleteButton}">
@@ -27,7 +31,9 @@
 							{{ t('tables', 'I really want to delete this row!') }}
 						</NcButton>
 					</div>
-					<NcButton v-if="canUpdateData(activeElement) && !localLoading" :aria-label="t('tables', 'Save')" type="primary" @click="actionConfirm">
+					<NcButton v-if="canUpdateData(activeElement) && !localLoading" :aria-label="t('tables', 'Save')" type="primary"
+						:disabled="hasEmptyMandatoryRows"
+						@click="actionConfirm">
 						{{ t('tables', 'Save') }}
 					</NcButton>
 					<div v-if="localLoading" class="icon-loading" style="margin-left: 20px;" />
@@ -38,8 +44,8 @@
 </template>
 
 <script>
-import { NcModal, NcButton } from '@nextcloud/vue'
-import { showError, showWarning } from '@nextcloud/dialogs'
+import { NcModal, NcButton, NcNoteCard } from '@nextcloud/vue'
+import { showError } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/dist/index.css'
 import ColumnFormComponent from '../main/partials/ColumnFormComponent.vue'
 import permissionsMixin from '../../shared/components/ncTable/mixins/permissionsMixin.js'
@@ -51,6 +57,7 @@ export default {
 		NcModal,
 		NcButton,
 		ColumnFormComponent,
+		NcNoteCard,
 	},
 	mixins: [permissionsMixin],
 	props: {
@@ -82,6 +89,16 @@ export default {
 		nonMetaColumns() {
 			return this.columns.filter(col => col.id >= 0)
 		},
+		hasEmptyMandatoryRows() {
+			let mandatoryFieldsEmpty = false
+			this.columns.forEach(col => {
+				if (col.mandatory) {
+					const validValue = this.isValueValidForColumn(this.localRow[col.id], col)
+					mandatoryFieldsEmpty = mandatoryFieldsEmpty || !validValue
+				}
+			})
+			return mandatoryFieldsEmpty
+		},
 	},
 	watch: {
 		row() {
@@ -123,21 +140,10 @@ export default {
 			return !!value || value === 0
 		},
 		async actionConfirm() {
-			let mandatoryFieldsEmpty = false
-			this.columns.forEach(col => {
-				if (col.mandatory) {
-					const validValue = this.isValueValidForColumn(this.localRow[col.id], col)
-					mandatoryFieldsEmpty = mandatoryFieldsEmpty || !validValue
-				}
-			})
-			if (!mandatoryFieldsEmpty) {
-				this.localLoading = true
-				await this.sendRowToBE()
-				this.localLoading = false
-				this.actionCancel()
-			} else {
-				showWarning(t('tables', 'Please fill in the mandatory fields.'))
-			}
+			this.localLoading = true
+			await this.sendRowToBE()
+			this.localLoading = false
+			this.actionCancel()
 		},
 		async sendRowToBE() {
 			const data = []

From 68451a574765a4d3fef89f42facb0e9ee4a2ed4f Mon Sep 17 00:00:00 2001
From: Cleopatra Enjeck M <patrathewhiz@gmail.com>
Date: Fri, 29 Dec 2023 10:25:52 +0100
Subject: [PATCH 2/5] style: use NcButton instead of button

Signed-off-by: Cleopatra Enjeck M <patrathewhiz@gmail.com>
---
 src/modules/modals/CreateRow.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/modules/modals/CreateRow.vue b/src/modules/modals/CreateRow.vue
index 5f2dd3242..25105a33a 100644
--- a/src/modules/modals/CreateRow.vue
+++ b/src/modules/modals/CreateRow.vue
@@ -24,9 +24,9 @@
 							{{ t('tables', 'Add more') }}
 						</NcCheckboxRadioSwitch>
 					</div>
-					<button v-if="!localLoading" class="primary" :aria-label="t('tables', 'Save row')" :disabled="hasEmptyMandatoryRows" @click="actionConfirm()">
+					<NcButton v-if="!localLoading" class="primary" :aria-label="t('tables', 'Save row')" :disabled="hasEmptyMandatoryRows" @click="actionConfirm()">
 						{{ t('tables', 'Save') }}
-					</button>
+					</NcButton>
 				</div>
 			</div>
 		</div>
@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import { NcModal, NcCheckboxRadioSwitch, NcNoteCard } from '@nextcloud/vue'
+import { NcModal, NcCheckboxRadioSwitch, NcNoteCard, NcButton } from '@nextcloud/vue'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/dist/index.css'
 import { mapGetters } from 'vuex'
@@ -47,6 +47,7 @@ export default {
 		ColumnFormComponent,
 		NcCheckboxRadioSwitch,
 		NcNoteCard,
+		NcButton,
 	},
 	props: {
 		showModal: {

From c1ec69ed0422227072724275f45b8d149e3d6dd0 Mon Sep 17 00:00:00 2001
From: Cleopatra Enjeck M <patrathewhiz@gmail.com>
Date: Fri, 29 Dec 2023 11:30:04 +0100
Subject: [PATCH 3/5] style: separate placeholder string

Signed-off-by: Cleopatra Enjeck M <patrathewhiz@gmail.com>
---
 src/modules/modals/CreateRow.vue | 2 +-
 src/modules/modals/EditRow.vue   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/modals/CreateRow.vue b/src/modules/modals/CreateRow.vue
index 25105a33a..1e17f815e 100644
--- a/src/modules/modals/CreateRow.vue
+++ b/src/modules/modals/CreateRow.vue
@@ -14,7 +14,7 @@
 					:value.sync="row[column.id]" />
 				<NcNoteCard v-if="column.mandatory && !isValueValidForColumn(row[column.id], column)"
 					type="error">
-					{{ t('tables', `"${column.title}" should not be empty`) }}
+					{{ t('tables', '"{columnTitle}" should not be empty', { columnTitle: column.title }) }}
 				</NcNoteCard>
 			</div>
 			<div class="row">
diff --git a/src/modules/modals/EditRow.vue b/src/modules/modals/EditRow.vue
index 8b13a761a..575e96246 100644
--- a/src/modules/modals/EditRow.vue
+++ b/src/modules/modals/EditRow.vue
@@ -14,7 +14,7 @@
 					:value.sync="localRow[column.id]" />
 				<NcNoteCard v-if="column.mandatory && !isValueValidForColumn(localRow[column.id], column)"
 					type="error">
-					{{ t('tables', `"${column.title}" should not be empty`) }}
+					{{ t('tables', '"{columnTitle}" should not be empty', { columnTitle: column.title }) }}
 				</NcNoteCard>
 			</div>
 			<div class="row">

From 3c2d4957af6ca3ffc8622a70928a9465288ee0d5 Mon Sep 17 00:00:00 2001
From: Cleopatra Enjeck M <patrathewhiz@gmail.com>
Date: Tue, 2 Jan 2024 07:27:00 +0100
Subject: [PATCH 4/5] test: add e2e test for row

Signed-off-by: Cleopatra Enjeck M <patrathewhiz@gmail.com>
---
 cypress/e2e/tables-rows.cy.js    | 27 +++++++++++++++++++++++++++
 src/modules/modals/CreateRow.vue |  4 ++--
 src/modules/modals/EditRow.vue   |  3 ++-
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/cypress/e2e/tables-rows.cy.js b/cypress/e2e/tables-rows.cy.js
index 9f9f3613e..95dc372f9 100644
--- a/cypress/e2e/tables-rows.cy.js
+++ b/cypress/e2e/tables-rows.cy.js
@@ -47,4 +47,31 @@ describe('Rows for a table', () => {
 		cy.get('.modal-container:visible').should('not.exist')
 		cy.get('.custom-table table').contains('Changed column value').should('not.exist')
 	})
+
+	it('Check mandatory fields error', () => {
+		cy.contains('.app-menu-entry--label', 'Tables').click()
+		cy.contains('button', 'Create new table').click()
+		cy.get('.tile').contains('ToDo').click({ force: true })
+		cy.get('.modal__content').should('be.visible')
+		cy.get('.modal__content input[type="text"]').clear().type('to do list')
+		cy.contains('button', 'Create table').click()
+
+		cy.get('.app-navigation-entry-link').contains('to do list').click({ force: true })
+		cy.get('.NcTable').contains('Create row').click({ force: true })
+
+		cy.get('[data-cy="createRowModal"] .notecard--error').should('exist')
+		cy.get('[data-cy="createRowSaveButton"]').should('be.disabled')
+		cy.get('.modal__content .slot input').first().type('My first task')
+		cy.get('[data-cy="createRowModal"] .notecard--error').should('not.exist')
+		cy.get('[data-cy="createRowSaveButton"]').should('be.enabled')
+		cy.get('[data-cy="createRowSaveButton"]').click()
+
+		cy.get('.app-navigation-entry-link').contains('to do list').click({ force: true })
+		cy.get('.custom-table table').contains('My first task').parent().parent().find('[aria-label="Edit row"]').click()
+		cy.get('[data-cy="editRowModal"] .notecard--error').should('not.exist')
+		cy.get('.modal__content .slot input').first().clear()
+		cy.get('[data-cy="editRowModal"] .notecard--error').should('exist')
+		cy.get('[data-cy="editRowSaveButton"]').should('be.disabled')
+
+	})
 })
diff --git a/src/modules/modals/CreateRow.vue b/src/modules/modals/CreateRow.vue
index 1e17f815e..db75f549c 100644
--- a/src/modules/modals/CreateRow.vue
+++ b/src/modules/modals/CreateRow.vue
@@ -1,5 +1,5 @@
 <template>
-	<NcModal v-if="showModal" @close="actionCancel">
+	<NcModal v-if="showModal" @close="actionCancel" data-cy="createRowModal">
 		<div class="modal__content">
 			<div class="row">
 				<div class="col-4">
@@ -24,7 +24,7 @@
 							{{ t('tables', 'Add more') }}
 						</NcCheckboxRadioSwitch>
 					</div>
-					<NcButton v-if="!localLoading" class="primary" :aria-label="t('tables', 'Save row')" :disabled="hasEmptyMandatoryRows" @click="actionConfirm()">
+					<NcButton v-if="!localLoading" class="primary" :aria-label="t('tables', 'Save row')" :disabled="hasEmptyMandatoryRows" @click="actionConfirm()" data-cy="createRowSaveButton">
 						{{ t('tables', 'Save') }}
 					</NcButton>
 				</div>
diff --git a/src/modules/modals/EditRow.vue b/src/modules/modals/EditRow.vue
index 575e96246..7ea52ea73 100644
--- a/src/modules/modals/EditRow.vue
+++ b/src/modules/modals/EditRow.vue
@@ -1,5 +1,5 @@
 <template>
-	<NcModal v-if="showModal" @close="actionCancel">
+	<NcModal v-if="showModal" @close="actionCancel" data-cy="editRowModal">
 		<div class="modal__content">
 			<div class="row">
 				<div class="col-4">
@@ -32,6 +32,7 @@
 						</NcButton>
 					</div>
 					<NcButton v-if="canUpdateData(activeElement) && !localLoading" :aria-label="t('tables', 'Save')" type="primary"
+					data-cy="editRowSaveButton"
 						:disabled="hasEmptyMandatoryRows"
 						@click="actionConfirm">
 						{{ t('tables', 'Save') }}

From 87c11e03dbd9fa5f7348699691a2258587e40abf Mon Sep 17 00:00:00 2001
From: Cleopatra Enjeck M <patrathewhiz@gmail.com>
Date: Tue, 2 Jan 2024 07:29:28 +0100
Subject: [PATCH 5/5] style: fix lint

Signed-off-by: Cleopatra Enjeck M <patrathewhiz@gmail.com>
---
 src/modules/modals/CreateRow.vue | 4 ++--
 src/modules/modals/EditRow.vue   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/modules/modals/CreateRow.vue b/src/modules/modals/CreateRow.vue
index db75f549c..c753dcf3c 100644
--- a/src/modules/modals/CreateRow.vue
+++ b/src/modules/modals/CreateRow.vue
@@ -1,5 +1,5 @@
 <template>
-	<NcModal v-if="showModal" @close="actionCancel" data-cy="createRowModal">
+	<NcModal v-if="showModal" data-cy="createRowModal" @close="actionCancel">
 		<div class="modal__content">
 			<div class="row">
 				<div class="col-4">
@@ -24,7 +24,7 @@
 							{{ t('tables', 'Add more') }}
 						</NcCheckboxRadioSwitch>
 					</div>
-					<NcButton v-if="!localLoading" class="primary" :aria-label="t('tables', 'Save row')" :disabled="hasEmptyMandatoryRows" @click="actionConfirm()" data-cy="createRowSaveButton">
+					<NcButton v-if="!localLoading" class="primary" :aria-label="t('tables', 'Save row')" :disabled="hasEmptyMandatoryRows" data-cy="createRowSaveButton" @click="actionConfirm()">
 						{{ t('tables', 'Save') }}
 					</NcButton>
 				</div>
diff --git a/src/modules/modals/EditRow.vue b/src/modules/modals/EditRow.vue
index 7ea52ea73..3aed7fa5b 100644
--- a/src/modules/modals/EditRow.vue
+++ b/src/modules/modals/EditRow.vue
@@ -1,5 +1,5 @@
 <template>
-	<NcModal v-if="showModal" @close="actionCancel" data-cy="editRowModal">
+	<NcModal v-if="showModal" data-cy="editRowModal" @close="actionCancel">
 		<div class="modal__content">
 			<div class="row">
 				<div class="col-4">
@@ -32,7 +32,7 @@
 						</NcButton>
 					</div>
 					<NcButton v-if="canUpdateData(activeElement) && !localLoading" :aria-label="t('tables', 'Save')" type="primary"
-					data-cy="editRowSaveButton"
+						data-cy="editRowSaveButton"
 						:disabled="hasEmptyMandatoryRows"
 						@click="actionConfirm">
 						{{ t('tables', 'Save') }}