Merge pull request #808 from nextcloud/enh-emit-id

enh: Use table id for events

src/modules/main/partials/TableView.vue

@@ -2,6 +2,8 @@
 	<NcTable v-if="columns.length > 0"
 		:rows="rows"
 		:columns="columns"
+		:element-id="element.id"
+		:is-view="isView"
 		:download-title="element.title"
 		:view-setting.sync="localViewSetting"
 		:can-read-rows="canReadRows"
@@ -110,22 +112,22 @@ export default {
 
 	methods: {
 		createColumn() {
-			emit('tables:column:create')
+			emit('tables:column:create', { isView: this.isView, element: this.element })
 		},
 		editColumn(column) {
-			emit('tables:column:edit', column)
+			emit('tables:column:edit', { column, isView: this.isView, elementId: this.element.id })
 		},
 		deleteColumn(column) {
-			emit('tables:column:delete', column)
+			emit('tables:column:delete', { column, isView: this.isView, elementId: this.element.id })
 		},
 		createRow() {
-			emit('tables:row:create', this.columns)
+			emit('tables:row:create', { columns: this.columns, isView: this.isView, elementId: this.element.id })
 		},
 		editRow(rowId) {
-			emit('tables:row:edit', { row: this.rows.find(r => r.id === rowId), columns: this.columns })
+			emit('tables:row:edit', { row: this.rows.find(r => r.id === rowId), columns: this.columns, isView: this.isView, element: this.element })
 		},
 		deleteSelectedRows(rows) {
-			emit('tables:row:delete', rows)
+			emit('tables:row:delete', { rows, isView: this.isView, elementId: this.element.id })
 		},
 
 		toggleShare() {

src/modules/main/sections/EmptyTable.vue

@@ -29,7 +29,7 @@ export default {
 	},
 	methods: {
 		createColumn() {
-			emit('tables:column:create')
+			emit('tables:column:create', { isView: false, element: this.table })
 		},
 	},
 

src/modules/main/sections/MainWrapper.vue

@@ -85,7 +85,7 @@ export default {
 
 	methods: {
 		createColumn() {
-			emit('tables:column:create')
+			emit('tables:column:create', { isView: this.isView, element: this.element })
 		},
 		downloadCSV() {
 			this.downloadCsv(this.rows, this.columns, this.element.title)
@@ -129,7 +129,7 @@ export default {
 					isView: this.isView,
 				}
 				if (this.activeRowId) {
-					emit('tables:row:edit', { row: this.rows.find(r => r.id === this.activeRowId), columns: this.columns })
+					emit('tables:row:edit', { row: this.rows.find(r => r.id === this.activeRowId), columns: this.columns, isView: this.isView, elementId: this.element.id })
 				}
 				this.localLoading = false
 			}

src/modules/modals/CreateColumn.vue

@@ -104,7 +104,6 @@ import SelectionForm from '../../shared/components/ncTable/partials/columnTypePa
 import SelectionMultiForm from '../../shared/components/ncTable/partials/columnTypePartials/forms/SelectionMultiForm.vue'
 import { showError, showInfo, showSuccess, showWarning } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/dist/index.css'
-import { mapGetters } from 'vuex'
 import ColumnTypeSelection from '../main/partials/ColumnTypeSelection.vue'
 import TextRichForm from '../../shared/components/ncTable/partials/columnTypePartials/forms/TextRichForm.vue'
 import { ColumnTypes } from '../../shared/components/ncTable/mixins/columnHandler.js'
@@ -135,6 +134,14 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		isView: {
+			type: Boolean,
+			default: false,
+		},
+		element: {
+			type: Object,
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -177,7 +184,6 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters(['activeElement', 'isView']),
 		combinedType: {
 			get() {
 				return this.column.type ? this.column.type + ((this.column.subtype) ? ('-' + this.column.subtype) : '') : null
@@ -248,8 +254,8 @@ export default {
 					description: this.column.description,
 					selectedViewIds: this.column.selectedViews.map(view => view.id),
 					mandatory: this.column.mandatory,
-					viewId: this.isView ? this.activeElement.id : null,
-					tableId: !this.isView ? this.activeElement.id : null,
+					viewId: this.isView ? this.element.id : null,
+					tableId: !this.isView ? this.element.id : null,
 				}
 				if (this.combinedType === ColumnTypes.TextLine || this.combinedType === ColumnTypes.TextLong) {
 					data.textDefault = this.column.textDefault
@@ -282,7 +288,7 @@ export default {
 					showWarning(t('tables', 'Sorry, something went wrong.'))
 					console.debug('axios error', res)
 				}
-				await this.$store.dispatch('reloadViewsOfTable', { tableId: this.isView ? this.activeElement.tableId : this.activeElement.id })
+				await this.$store.dispatch('reloadViewsOfTable', { tableId: this.isView ? this.element.tableId : this.element.id })
 			} catch (e) {
 				console.error(e)
 				showError(t('tables', 'Could not create new column.'))

src/modules/modals/CreateRow.vue

@@ -37,7 +37,6 @@
 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'
 
 export default {
@@ -58,6 +57,14 @@ export default {
 			type: Array,
 			default: null,
 		},
+		isView: {
+			type: Boolean,
+			default: false,
+		},
+		elementId: {
+			type: Number,
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -67,7 +74,6 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters(['activeElement', 'isView']),
 		nonMetaColumns() {
 			return this.columns.filter(col => col.id >= 0)
 		},
@@ -121,8 +127,8 @@ export default {
 					})
 				}
 				await this.$store.dispatch('insertNewRow', {
-					viewId: this.isView ? this.activeElement.id : null,
-					tableId: !this.isView ? this.activeElement.id : null,
+					viewId: this.isView ? this.elementId : null,
+					tableId: !this.isView ? this.elementId : null,
 					data,
 				})
 			} catch (e) {

src/modules/modals/DeleteColumn.vue

@@ -14,7 +14,6 @@
 import DialogConfirmation from '../../shared/modals/DialogConfirmation.vue'
 import { showError } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/dist/index.css'
-import { mapGetters } from 'vuex'
 
 export default {
 	name: 'DeleteColumn',
@@ -26,9 +25,16 @@ export default {
 			type: Object,
 			default: null,
 		},
+		isView: {
+			type: Boolean,
+			default: false,
+		},
+		elementId: {
+			type: Number,
+			default: null,
+		},
 	},
 	computed: {
-		...mapGetters(['activeElement', 'isView']),
 		deleteDescription() {
 			return t('tables', 'Are you sure you want to delete column "{column}"?', { column: this.columnToDelete.title })
 		},
@@ -37,9 +43,9 @@ export default {
 		async deleteColumn() {
 			const res = await this.$store.dispatch('removeColumn', { id: this.columnToDelete.id })
 			if (!res) {
-				showError(t('tables', 'Error occurred while deleting column "{column}".', { column: this.column.title }))
+				showError(t('tables', 'Error occurred while deleting column "{column}".', { column: this.columnToDelete.title }))
 			}
-			await this.$store.dispatch('reloadViewsOfTable', { tableId: this.isView ? this.activeElement.tableId : this.activeElement.id })
+			await this.$store.dispatch('reloadViewsOfTable', { tableId: this.elementId })
 			this.$emit('cancel')
 		},
 	},

src/modules/modals/DeleteRows.vue

@@ -15,7 +15,6 @@ import DialogConfirmation from '../../shared/modals/DialogConfirmation.vue'
 import { showError } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/dist/index.css'
 import { emit } from '@nextcloud/event-bus'
-import { mapGetters } from 'vuex'
 
 export default {
 	name: 'DeleteRows',
@@ -27,17 +26,22 @@ export default {
 			type: Array,
 			default: null,
 		},
-	},
-	computed: {
-		...mapGetters(['activeElement', 'isView']),
+		elementId: {
+			type: Number,
+			default: null,
+		},
+		isView: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	methods: {
 		deleteRows() {
 			let error = false
 			this.rowsToDelete.forEach(rowId => {
 				const res = this.$store.dispatch('removeRow', {
 					rowId,
-					viewId: this.isView ? this.activeElement.id : null,
+					viewId: this.isView ? this.elementId : null,
 				})
 				if (!res) {
 					error = true
@@ -46,7 +50,7 @@ export default {
 			if (error) {
 				showError(t('tables', 'Error occurred while deleting rows.'))
 			}
-			emit('tables:selected-rows:deselect', {})
+			emit('tables:selected-rows:deselect', { elementId: this.elementId, isView: this.isView })
 			this.$emit('cancel')
 		},
 	},

src/modules/modals/EditColumn.vue

@@ -104,6 +104,14 @@ export default {
 			type: Object,
 			default: null,
 		},
+		isView: {
+			type: Boolean,
+			default: false,
+		},
+		elementId: {
+			type: Number,
+			default: null,
+		},
 	},
 	data() {
 		return {

src/modules/modals/EditRow.vue

@@ -32,7 +32,7 @@
 							{{ t('tables', 'I really want to delete this row!') }}
 						</NcButton>
 					</div>
-					<NcButton v-if="canUpdateData(activeElement) && !localLoading" :aria-label="t('tables', 'Save')" type="primary"
+					<NcButton v-if="canUpdateData(element) && !localLoading" :aria-label="t('tables', 'Save')" type="primary"
 						data-cy="editRowSaveButton"
 						:disabled="hasEmptyMandatoryRows"
 						@click="actionConfirm">
@@ -51,7 +51,6 @@ 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'
-import { mapGetters } from 'vuex'
 
 export default {
 	name: 'EditRow',
@@ -75,6 +74,14 @@ export default {
 			type: Object,
 			default: null,
 		},
+		isView: {
+			type: Boolean,
+			default: false,
+		},
+		element: {
+			type: Object,
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -84,9 +91,8 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters(['activeElement', 'isView']),
 		showDeleteButton() {
-			return this.canDeleteData(this.activeElement) && !this.localLoading
+			return this.canDeleteData(this.element) && !this.localLoading
 		},
 		nonMetaColumns() {
 			return this.columns.filter(col => col.id >= 0)
@@ -157,7 +163,7 @@ export default {
 			}
 			const res = await this.$store.dispatch('updateRow', {
 				id: this.row.id,
-				viewId: this.isView ? this.activeElement.id : null,
+				viewId: this.isView ? this.element.id : null,
 				data,
 			})
 			if (!res) {
@@ -176,7 +182,7 @@ export default {
 			this.localLoading = true
 			const res = await this.$store.dispatch('removeRow', {
 				rowId,
-				viewId: this.isView ? this.activeElement.id : null,
+				viewId: this.isView ? this.element.id : null,
 			})
 			if (!res) {
 				showError(t('tables', 'Could not delete row.'))

src/modules/modals/Modals.vue

@@ -3,19 +3,23 @@
 		<CreateTable :show-modal="showModalCreateTable" @close="showModalCreateTable = false" />
 		<DeleteTable :show-modal="tableToDelete !== null" :table="tableToDelete" @cancel="tableToDelete = null" />
 
-		<CreateColumn :show-modal="showCreateColumn" @close="showCreateColumn = false" />
-		<EditColumn v-if="columnToEdit" :column="columnToEdit" @close="columnToEdit = false" />
-		<DeleteColumn v-if="columnToDelete" :column-to-delete="columnToDelete" @cancel="columnToDelete = null" />
+		<CreateColumn :show-modal="createColumnInfo !== null" :is-view="createColumnInfo?.isView" :element="createColumnInfo?.element" @close="createColumnInfo = null" />
+		<EditColumn v-if="columnToEdit" :column="columnToEdit?.column" :is-view="columnToEdit.isView" :element-id="columnToEdit?.elementId" @close="columnToEdit = false" />
+		<DeleteColumn v-if="columnToDelete" :is-view="columnToDelete?.isView" :element-id="columnToDelete?.elementId" :column-to-delete="columnToDelete?.column" @cancel="columnToDelete = null" />
 
-		<CreateRow :columns="columnsForRow"
+		<CreateRow :columns="columnsForRow?.columns"
+			:is-view="columnsForRow?.isView"
+			:element-id="columnsForRow?.elementId"
 			:show-modal="columnsForRow !== null"
 			@close="columnsForRow = null" />
 		<EditRow :columns="editRow?.columns"
 			:row="editRow?.row"
+			:is-view="editRow?.isView"
+			:element="editRow?.element"
 			:show-modal="editRow !== null"
 			:out-transition="true"
 			@close="editRow = null" />
-		<DeleteRows v-if="rowsToDelete" :rows-to-delete="rowsToDelete" @cancel="rowsToDelete = null" />
+		<DeleteRows v-if="rowsToDelete" :rows-to-delete="rowsToDelete?.rows" :is-view="rowsToDelete?.isView" :element-id="rowsToDelete?.elementId" @cancel="rowsToDelete = null" />
 
 		<ViewSettings
 			:show-modal="viewToEdit !== null"
@@ -72,7 +76,7 @@ export default {
 
 	data() {
 		return {
-			showCreateColumn: false,
+			createColumnInfo: null,
 			columnToEdit: null,
 			columnToDelete: null,
 			columnsForRow: null,
@@ -109,26 +113,30 @@ export default {
 		subscribe('tables:view:delete', view => { this.viewToDelete = view })
 
 		// columns
-		subscribe('tables:column:create', () => { this.showCreateColumn = true })
-		subscribe('tables:column:edit', column => { this.columnToEdit = column })
-		subscribe('tables:column:delete', column => { this.columnToDelete = column })
+		subscribe('tables:column:create', columnInfo => { this.createColumnInfo = columnInfo })
+		subscribe('tables:column:edit', columnInfo => { this.columnToEdit = columnInfo })
+		subscribe('tables:column:delete', columnInfo => { this.columnToDelete = columnInfo })
 
 		// rows
-		subscribe('tables:row:create', columns => { this.columnsForRow = columns })
-		subscribe('tables:row:edit', row => { this.editRow = row })
-		subscribe('tables:row:delete', rows => { this.rowsToDelete = rows })
+		subscribe('tables:row:create', columnsInfo => { this.columnsForRow = columnsInfo })
+		subscribe('tables:row:edit', rowInfo => { this.editRow = rowInfo })
+		subscribe('tables:row:delete', tableInfo => {
+			this.rowsToDelete = tableInfo
+		})
 
 		// misc
 		subscribe('tables:modal:import', element => { this.importToElement = element })
 	},
 	unmounted() {
 		unsubscribe('tables:view:reload', () => { this.reload(true) })
-		unsubscribe('tables:column:create', () => { this.showCreateColumn = true })
-		unsubscribe('tables:column:edit', column => { this.columnToEdit = column })
-		unsubscribe('tables:column:delete', column => { this.columnToDelete = column })
-		unsubscribe('tables:row:create', columns => { this.columnsForRow = columns })
-		unsubscribe('tables:row:edit', row => { this.editRow = row })
-		unsubscribe('tables:row:delete', rows => { this.rowsToDelete = rows })
+		unsubscribe('tables:column:create', columnInfo => { this.createColumnInfo = columnInfo })
+		unsubscribe('tables:column:edit', columnInfo => { this.columnToEdit = columnInfo })
+		unsubscribe('tables:column:delete', columnInfo => { this.columnToDelete = columnInfo })
+		unsubscribe('tables:row:create', columnsInfo => { this.columnsForRow = columnsInfo })
+		unsubscribe('tables:row:edit', rowInfo => { this.editRow = rowInfo })
+		unsubscribe('tables:row:delete', tableInfo => {
+			this.rowsToDelete = tableInfo
+		})
 		unsubscribe('tables:view:edit', view => { this.viewToEdit = { view, createView: false } })
 		unsubscribe('tables:view:create', tableInfos => {
 			this.viewToEdit = {