Do not use global active element

Signed-off-by: Cleopatra Enjeck M <patrathewhiz@gmail.com>

src/modules/main/partials/TableView.vue

@@ -110,44 +110,29 @@ export default {
 	},
 
 	methods: {
-		setActiveElement() {
-			if (this.isView) {
-				this.$store.commit('setActiveViewId', parseInt(this.element.id))
-			} else {
-				this.$store.commit('setActiveTableId', parseInt(this.element.id))
-			}
-		},
 		createColumn() {
-			this.setActiveElement()
-			emit('tables:column:create')
+			emit('tables:column:create', { isView: this.isView, element: this.element })
 		},
 		editColumn(column) {
-			this.setActiveElement()
-			emit('tables:column:edit', column)
+			emit('tables:column:edit', { column, isView: this.isView, elementId: this.element.id })
 		},
 		deleteColumn(column) {
-			this.setActiveElement()
-			emit('tables:column:delete', column)
+			emit('tables:column:delete', {column, isView: this.isView, elementId: this.element.id})
 		},
 		createRow() {
-			this.setActiveElement()
-			emit('tables:row:create', this.columns)
+			emit('tables:row:create', { column: this.columns, isView: this.isView, elementId: this.element.id })
 		},
 		editRow(rowId) {
-			this.setActiveElement()
-			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) {
-			this.setActiveElement()
-			emit('tables:row:delete', rows)
+			emit('tables:row:delete', { rows, isView: this.isView, elementId: this.element.id })
 		},
 
 		toggleShare() {
-			this.setActiveElement()
 			emit('tables:sidebar:sharing', { open: true, tab: 'sharing' })
 		},
 		actionShowIntegration() {
-			this.setActiveElement()
 			emit('tables:sidebar:integration', { open: true, tab: 'integration' })
 		},
 		openImportModal(element) {

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,26 +85,16 @@ export default {
 	},
 
 	methods: {
-		setActiveElement() {
-			if (this.isView) {
-				this.$store.commit('setActiveViewId', parseInt(this.element.id))
-			} else {
-				this.$store.commit('setActiveTableId', parseInt(this.element.id))
-			}
-		},
 		createColumn() {
-			this.setActiveElement()
-			emit('tables:column:create')
+			emit('tables:column:create', { isView: this.isView, element: this.element })
 		},
 		downloadCSV() {
 			this.downloadCsv(this.rows, this.columns, this.element.title)
 		},
 		toggleShare() {
-			this.setActiveElement()
 			emit('tables:sidebar:sharing', { open: true, tab: 'sharing' })
 		},
 		showIntegration() {
-			this.setActiveElement()
 			emit('tables:sidebar:integration', { open: true, tab: 'integration' })
 		},
 		openImportModal() {
@@ -140,8 +130,7 @@ export default {
 					isView: this.isView,
 				}
 				if (this.activeRowId) {
-					this.setActiveElement()
-					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

@@ -135,6 +135,14 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		isView: {
+			type: Boolean,
+			default: false,
+		},
+		element: {
+			type: Object,
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -177,7 +185,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 +255,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 +289,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

@@ -58,6 +58,14 @@ export default {
 			type: Array,
 			default: null,
 		},
+		isView: {
+			type: Boolean,
+			default: false,
+		},
+		elementId: {
+			type: Number,
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -67,7 +75,6 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters(['activeElement', 'isView']),
 		nonMetaColumns() {
 			return this.columns.filter(col => col.id >= 0)
 		},
@@ -121,8 +128,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

@@ -26,9 +26,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 +44,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',
@@ -28,16 +27,13 @@ export default {
 			default: null,
 		},
 	},
-	computed: {
-		...mapGetters(['activeElement', 'isView']),
-	},
 	methods: {
 		deleteRows() {
 			let error = false
-			this.rowsToDelete.forEach(rowId => {
+			this.rowsToDelete.rows.forEach(rowId => {
 				const res = this.$store.dispatch('removeRow', {
 					rowId,
-					viewId: this.isView ? this.activeElement.id : null,
+					viewId: this.rowsToDelete.isView ? this.rowsToDelete.elementId : null,
 				})
 				if (!res) {
 					error = true
@@ -46,7 +42,7 @@ export default {
 			if (error) {
 				showError(t('tables', 'Error occurred while deleting rows.'))
 			}
-			emit('tables:selected-rows:deselect', this.activeElement.id)
+			emit('tables:selected-rows:deselect', this.rowsToDelete.elementId)
 			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

@@ -31,7 +31,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">
@@ -50,7 +50,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',
@@ -74,6 +73,14 @@ export default {
 			type: Object,
 			default: null,
 		},
+		isView: {
+			type: Boolean,
+			default: false,
+		},
+		element: {
+			type: Number,
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -83,9 +90,8 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters(['activeElement', 'isView']),
 		showDeleteButton() {
-			return this.canDeleteData(this.activeElement) && !this.localLoading
+			return this.canDeleteData(this.element.id) && !this.localLoading
 		},
 		nonMetaColumns() {
 			return this.columns.filter(col => col.id >= 0)
@@ -156,7 +162,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) {
@@ -175,7 +181,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,15 +3,19 @@
 		<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?.column"
+			: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" />
@@ -72,7 +76,7 @@ export default {
 
 	data() {
 		return {
-			showCreateColumn: false,
+			createColumnInfo: null,
 			columnToEdit: null,
 			columnToDelete: null,
 			columnsForRow: null,
@@ -109,26 +113,28 @@ 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 = {