DeforaNetworks/corteza
3
0
Fork 0
Code Activity

Update record edit/view flow

Browse Source
This commit is contained in:
Jože Fortun
2023-07-24 17:27:11 +02:00
parent db740f7f28
commit 94a8f84939
4 changed files with 69 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web/compose/src/components/Common/RecordToolbar.vue
+20 -5
View File
@@ -63,7 +63,7 @@
</b-col>
<b-col
class="d-flex align-items-center justify-content-end"
class="d-flex align-items-center justify-content-end text-nowrap"
>
<template
v-if="module"
@@ -75,6 +75,8 @@
size-confirm="lg"
variant="danger"
:borderless="false"
button-class="d-flex align-items-center justify-content-center w-100 h-100"
style="min-height: 42px; min-width: 85px;"
@confirmed="$emit('delete')"
>
<b-spinner
@@ -96,6 +98,8 @@
variant="warning"
variant-ok="warning"
:borderless="false"
button-class="d-flex align-items-center justify-content-center w-100 h-100"
style="min-height: 42px; min-width: 95px;"
@confirmed="$emit('undelete')"
>
<b-spinner
@@ -110,7 +114,7 @@
</c-input-confirm>
<b-button
v-if="!inEditing && isCreated && module.canCreateRecord && !(hideClone || settings.hideClone)"
v-if="isCreated && module.canCreateRecord && !(hideClone || settings.hideClone)"
data-test-id="button-clone"
variant="light"
size="lg"
@@ -133,6 +137,18 @@
{{ labels.edit || $t('label.edit') }}
</b-button>
<b-button
v-else-if="inEditing && isCreated && !(hideEdit || settings.hideEdit)"
data-test-id="button-edit"
:disabled="!record.canUpdateRecord || processing"
variant="light"
size="lg"
class="ml-2"
@click.prevent="$emit('view')"
>
{{ labels.edit || $t('label.view') }}
</b-button>
<b-button
v-if="!inEditing && module.canCreateRecord && !(hideNew || settings.hideNew)"
data-test-id="button-add-new"
@@ -152,6 +168,7 @@
class="d-flex align-items-center justify-content-center ml-2"
variant="primary"
size="lg"
style="min-height: 42px; min-width: 73px;"
@click.prevent="$emit('submit')"
>
<b-spinner
@@ -314,9 +331,7 @@ export default {
},
backLabel () {
if (this.inEditing) {
return this.$t('label.cancel')
} else if (this.showRecordModal) {
if (this.showRecordModal) {
return this.$t('label.close')
}
client/web/compose/src/mixins/record.js
+11 -15
View File
@@ -150,18 +150,12 @@ export default {
.then(() => {
if (this.record.valueErrors.set) {
this.toastWarning(this.$t('notification:record.validationWarnings'))
} else if (this.showRecordModal) {
this.inEditing = false
this.inCreating = false
} else {
this.$router.push({ name: route, params: { ...this.$route.params, recordID: this.record.recordID } })
this.inCreating = false
}
this.toastSuccess(this.$t(`notification:record.${isNew ? 'create' : 'update'}Success`))
})
.catch(this.toastErrorHandler(this.$t(
isNew
? 'notification:record.createFailed'
: 'notification:record.updateFailed',
)))
.catch(this.toastErrorHandler(this.$t(`notification:record.${isNew ? 'create' : 'update'}Failed`)))
.finally(() => {
this.processingSubmit = false
this.processing = false
@@ -231,13 +225,14 @@ export default {
return this
.dispatchUiEvent('beforeDelete')
.then(() => this.$ComposeAPI.recordDelete(this.record))
.then(this.$ComposeAPI.recordDelete(this.record))
.then(() => {
this.record.deletedAt = (new Date()).toISOString()
})
.then(() => this.dispatchUiEvent('afterDelete'))
.then(() => this.updatePrompts())
.then(this.dispatchUiEvent('afterDelete'))
.then(this.updatePrompts())
.then(this.loadRecord)
.then(this.toastSuccess(this.$t('notification:record.deleteSuccess')))
.catch(this.toastErrorHandler(this.$t('notification:record.deleteFailed')))
.finally(() => {
this.processingDelete = false
@@ -251,10 +246,11 @@ export default {
return this
.dispatchUiEvent('beforeUndelete')
.then(() => this.$ComposeAPI.recordUndelete(this.record))
.then(() => this.dispatchUiEvent('afterUndelete'))
.then(() => this.updatePrompts())
.then(this.$ComposeAPI.recordUndelete(this.record))
.then(this.dispatchUiEvent('afterUndelete'))
.then(this.updatePrompts())
.then(this.loadRecord)
.then(this.toastSuccess(this.$t('notification:record.restoreSuccess')))
.catch(this.toastErrorHandler(this.$t('notification:record.restoreFailed')))
.finally(() => {
this.processingUndelete = false
client/web/compose/src/views/Public/Pages/Records/View.vue
+33 -26
View File
@@ -60,6 +60,7 @@
@add="handleAdd()"
@clone="handleClone()"
@edit="handleEdit()"
@view="handleView()"
@delete="handleDelete()"
@undelete="handleUndelete()"
@back="handleBack()"
@@ -273,7 +274,7 @@ export default {
mounted () {
this.$root.$on('refetch-record-blocks', () => {
// Don*t refresh when creating and prompt user before refreshing when editing
// Don't refresh when creating and prompt user before refreshing when editing
if (this.inCreating || (this.inEditing && !window.confirm(this.$t('notification:record.staleDataRefresh')))) {
return
}
@@ -300,9 +301,7 @@ export default {
clearRecordSet: 'record/clearSet',
}),
async loadRecord () {
this.record = undefined
async loadRecord (recordID = this.recordID) {
if (!this.page) {
return
}
@@ -312,12 +311,15 @@ export default {
if (moduleID !== NoID) {
const module = Object.freeze(this.getModuleByID(moduleID).clone())
if (this.recordID && this.recordID !== NoID) {
return this.$ComposeAPI.recordRead({ namespaceID, moduleID, recordID: this.recordID })
if (recordID && recordID !== NoID) {
return this.$ComposeAPI.recordRead({ namespaceID, moduleID, recordID })
.then(record => {
this.record = new compose.Record(module, record)
})
.catch(this.toastErrorHandler(this.$t('notification:record.loadFailed')))
.catch(e => {
this.toastErrorHandler(this.$t('notification:record.loadFailed'))(e)
this.handleBack()
})
} else {
this.record = new compose.Record(module, {})
}
@@ -327,7 +329,7 @@ export default {
async handleBack () {
/**
* Not the best way since we can not always know where we
* came from (and "were" is back).
* came from (and "where" is back).
*/
if (this.showRecordModal) {
if (!this.inEditing || this.inCreating) {
@@ -347,32 +349,31 @@ export default {
},
handleAdd () {
if (this.showRecordModal) {
this.inEditing = true
this.inCreating = true
this.record = new compose.Record(this.module, { values: this.values })
} else {
this.inEditing = true
this.inCreating = true
this.record = new compose.Record(this.module, { values: this.values })
if (!this.showRecordModal) {
this.$router.push({ name: 'page.record.create', params: this.newRouteParams })
}
},
handleClone () {
if (this.showRecordModal) {
this.inEditing = true
this.inCreating = true
this.record = new compose.Record(this.module, { values: this.record.values })
} else {
this.inEditing = true
this.inCreating = true
this.record = new compose.Record(this.module, { values: this.record.values })
if (!this.showRecordModal) {
this.$router.push({ name: 'page.record.create', params: { pageID: this.page.pageID, values: this.record.values } })
}
},
handleEdit () {
if (this.showRecordModal) {
this.inCreating = false
this.inEditing = true
} else {
this.$router.push({ name: 'page.record.edit', params: this.$route.params })
}
this.inEditing = true
this.inCreating = false
},
handleView () {
this.inEditing = false
this.inCreating = false
},
handleRedirectToPrevOrNext (recordID) {
@@ -434,7 +435,7 @@ export default {
}
// Check layouts for expressions/roles and find the first one that fits
this.layout = this.layouts.find(l => {
const matchedLayout = this.layouts.find(l => {
if (pageLayoutID && l.pageLayoutID !== pageLayoutID) return
const { expression, roles = [] } = l.config.visibility
@@ -446,11 +447,17 @@ export default {
return this.$auth.user.roles.some(roleID => roles.includes(roleID))
})
if (!this.layout) {
if (!matchedLayout) {
this.toastWarning(this.$t('notification:page.page-layout.notFound.view'))
return this.$router.go(-1)
}
if (this.layout && matchedLayout.pageLayoutID === this.layout.pageLayoutID) {
return
}
this.layout = matchedLayout
const { config = {} } = this.layout
const { buttons = [] } = config
locale/en/corteza-webapp-compose/notification.yaml
+5 -1
View File
@@ -113,8 +113,13 @@ page:
failed: Failed to delete layout
record:
createFailed: Could not create record
createSuccess: Record created
updateFailed: Could not update record
updateSuccess: Record updated
deleteFailed: Could not delete record
deleteSuccess: Record deleted
restoreFailed: Could not restore record
restoreSuccess: Record restored
deleteBulkFailed: Could not delete selected records
deleteBulkRecordUpdateFailed: Could not update selected records
deleteBulkSuccess: Successfully deleted selected records
@@ -131,7 +136,6 @@ record:
moduleOrPageNotSet: 'RecordList block error: module or page option not set'
unexpectedInput: Unexpected input for values property, should be an array with name-value object pairs
unexpectedValue: Unexpected value for record module ({{type}})
updateFailed: Could not update record
validationErrors: check error messages on the form
validationWarnings: Record saved successfully, check warning messages on the form
staleDataRefresh: Stale record data, all unsaved changes will be lost. Do you wish to refresh the data now?