Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add error hints for mandatory fields #755

Merged
merged 5 commits into from
Jan 8, 2024
Merged

feat: add error hints for mandatory fields #755

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f34b165
feat: add error hints for mandatory fields
enjeck Dec 27, 2023
68451a5
style: use NcButton instead of button
enjeck Dec 29, 2023
c1ec69e
style: separate placeholder string
enjeck Dec 29, 2023
3c2d495
test: add e2e test for row
enjeck Jan 2, 2024
87c11e0
style: fix lint
enjeck Jan 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions cypress/e2e/tables-rows.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')

})
})
51 changes: 28 additions & 23 deletions src/modules/modals/CreateRow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<NcModal v-if="showModal" @close="actionCancel">
<NcModal v-if="showModal" data-cy="createRowModal" @close="actionCancel">
<div class="modal__content">
<div class="row">
<div class="col-4">
Expand All @@ -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', '"{columnTitle}" should not be empty', { columnTitle: column.title }) }}
</NcNoteCard>
</div>
<div class="row">
<div class="fix-col-4 space-T end">
Expand All @@ -20,18 +24,18 @@
{{ t('tables', 'Add more') }}
</NcCheckboxRadioSwitch>
</div>
<button v-if="!localLoading" class="primary" :aria-label="t('tables', 'Save row')" @click="actionConfirm()">
<NcButton v-if="!localLoading" class="primary" :aria-label="t('tables', 'Save row')" :disabled="hasEmptyMandatoryRows" data-cy="createRowSaveButton" @click="actionConfirm()">
{{ t('tables', 'Save') }}
</button>
</NcButton>
</div>
</div>
</div>
</NcModal>
</template>

<script>
import { NcModal, NcCheckboxRadioSwitch } from '@nextcloud/vue'
import { showError, showSuccess, showWarning } from '@nextcloud/dialogs'
import { NcModal, NcCheckboxRadioSwitch, NcNoteCard, NcButton } 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'
Expand All @@ -42,6 +46,8 @@ export default {
NcModal,
ColumnFormComponent,
NcCheckboxRadioSwitch,
NcNoteCard,
NcButton,
},
props: {
showModal: {
Expand All @@ -65,6 +71,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() {
Expand All @@ -85,25 +101,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) {
enjeck marked this conversation as resolved.
Show resolved Hide resolved
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() {
Expand Down
45 changes: 26 additions & 19 deletions src/modules/modals/EditRow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<NcModal v-if="showModal" @close="actionCancel">
<NcModal v-if="showModal" data-cy="editRowModal" @close="actionCancel">
<div class="modal__content">
<div class="row">
<div class="col-4">
Expand All @@ -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', '"{columnTitle}" should not be empty', { columnTitle: column.title }) }}
</NcNoteCard>
</div>
<div class="row">
<div class="fix-col-4 space-T" :class="{'justify-between': showDeleteButton, 'end': !showDeleteButton}">
Expand All @@ -27,7 +31,10 @@
{{ 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"
data-cy="editRowSaveButton"
:disabled="hasEmptyMandatoryRows"
@click="actionConfirm">
{{ t('tables', 'Save') }}
</NcButton>
<div v-if="localLoading" class="icon-loading" style="margin-left: 20px;" />
Expand All @@ -38,8 +45,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'
Expand All @@ -51,6 +58,7 @@ export default {
NcModal,
NcButton,
ColumnFormComponent,
NcNoteCard,
},
mixins: [permissionsMixin],
props: {
Expand Down Expand Up @@ -82,6 +90,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() {
Expand Down Expand Up @@ -123,21 +141,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 = []
Expand Down
Loading