Merge pull request #843 from nextcloud/enh/multiple-tables-in-store

feat: hold multiple tables/views in global store

src/modules/main/sections/MainWrapper.vue

@@ -68,8 +68,8 @@ export default {
 	computed: {
 		...mapState(['activeRowId']),
 		...mapState({
-			columns: state => state.data.columns,
-			rows: state => state.data.rows,
+			columns(state) { return state.data.columns[this.isView ? 'view-' + (this.element.id).toString() : (this.element.id).toString()] },
+			rows(state) { return state.data.rows[this.isView ? 'view-' + (this.element.id).toString() : (this.element.id).toString()] },
 		}),
 	},
 
@@ -79,7 +79,7 @@ export default {
 		},
 	},
 
-	mounted() {
+	beforeMount() {
 		this.reload(true)
 	},
 
@@ -107,24 +107,33 @@ export default {
 				return
 			}
 
-			if (!this.lastActiveElement || this.element.id !== this.lastActiveElement.id || this.isView !== this.lastActiveElement.isView || force) {
+			// Used to reload View from backend, in case there are Filter updates
+			const isLastElementSameAndView = this.element.id === this.lastActiveElement?.id && this.isView === this.lastActiveElement?.isView
+
+			if (!this.lastActiveElement || this.element.id !== this.lastActiveElement.id || isLastElementSameAndView || this.isView !== this.lastActiveElement.isView || force) {
 				this.localLoading = true
 
+				// Since we show one page at a time, no need keep other tables in the store
+				await this.$store.dispatch('clearState')
+
 				this.viewSetting = {}
 
 				await this.$store.dispatch('loadColumnsFromBE', {
 					view: this.isView ? this.element : null,
-					table: !this.isView ? this.element : null,
+					tableId: !this.isView ? this.element.id : null,
 				})
 				if (this.canReadData(this.element)) {
 					await this.$store.dispatch('loadRowsFromBE', {
 						viewId: this.isView ? this.element.id : null,
 						tableId: !this.isView ? this.element.id : null,
 					})
 				} else {
-					await this.$store.dispatch('removeRows')
+					await this.$store.dispatch('removeRows', {
+						isView: this.isView,
+						elementId: this.element.id,
+					})
 				}
-				this.lastActiveViewId = {
+				this.lastActiveElement = {
 					id: this.element.id,
 					isView: this.isView,
 				}

src/modules/modals/CreateColumn.vue

@@ -281,7 +281,7 @@ export default {
 						data.numberSuffix = this.column.numberSuffix
 					}
 				}
-				const res = await this.$store.dispatch('insertNewColumn', { data })
+				const res = await this.$store.dispatch('insertNewColumn', { isView: this.isView, elementId: this.element.id, data })
 				if (res) {
 					showSuccess(t('tables', 'The column "{column}" was created.', { column: this.column.title }))
 				} else {

src/modules/modals/DeleteColumn.vue

@@ -41,11 +41,13 @@ export default {
 	},
 	methods: {
 		async deleteColumn() {
-			const res = await this.$store.dispatch('removeColumn', { id: this.columnToDelete.id })
+			const res = await this.$store.dispatch('removeColumn', { id: this.columnToDelete.id, isView: this.isView, elementId: this.elementId })
 			if (!res) {
 				showError(t('tables', 'Error occurred while deleting column "{column}".', { column: this.columnToDelete.title }))
 			}
-			await this.$store.dispatch('reloadViewsOfTable', { tableId: this.elementId })
+			if (!this.isView) {
+				await this.$store.dispatch('reloadViewsOfTable', { tableId: this.elementId })
+			}
 			this.$emit('cancel')
 		},
 	},

src/modules/modals/DeleteRows.vue

@@ -41,7 +41,8 @@ export default {
 			this.rowsToDelete.forEach(rowId => {
 				const res = this.$store.dispatch('removeRow', {
 					rowId,
-					viewId: this.isView ? this.elementId : null,
+					isView: this.isView,
+					elementId: this.elementId,
 				})
 				if (!res) {
 					error = true

src/modules/modals/EditColumn.vue

@@ -188,7 +188,7 @@ export default {
 			delete data.lastEditAt
 			delete data.lastEditBy
 			console.debug('this column data will be send', data)
-			const res = await this.$store.dispatch('updateColumn', { id: this.editColumn.id, data })
+			const res = await this.$store.dispatch('updateColumn', { id: this.editColumn.id, isView: this.isView, elementId: this.elementId, data })
 			if (res) {
 				showSuccess(t('tables', 'The column "{column}" was updated.', { column: this.editColumn.title }))
 			}

src/modules/modals/EditRow.vue

@@ -163,7 +163,8 @@ export default {
 			}
 			const res = await this.$store.dispatch('updateRow', {
 				id: this.row.id,
-				viewId: this.isView ? this.element.id : null,
+				isView: this.isView,
+				elementId: this.element.id,
 				data,
 			})
 			if (!res) {
@@ -182,7 +183,8 @@ export default {
 			this.localLoading = true
 			const res = await this.$store.dispatch('removeRow', {
 				rowId,
-				viewId: this.isView ? this.element.id : null,
+				isView: this.isView,
+				elementId: this.element.id,
 			})
 			if (!res) {
 				showError(t('tables', 'Could not delete row.'))

src/modules/modals/Import.vue

@@ -212,7 +212,7 @@ export default {
 				await this.$store.dispatch('loadViewsSharedWithMeFromBE')
 				await this.$store.dispatch('loadColumnsFromBE', {
 					view: this.isElementView ? this.element : null,
-					table: !this.isElementView ? this.element : null,
+					tableId: !this.isElementView ? this.element.id : null,
 				})
 				if (this.canReadData(this.element)) {
 					await this.$store.dispatch('loadRowsFromBE', {

src/shared/components/ncTable/NcTable.vue

@@ -41,19 +41,19 @@ deselect-all-rows        -> unselect all rows, e.g. after deleting selected rows
 		<div class="options row" style="padding-right: calc(var(--default-grid-baseline) * 2);">
 			<Options :rows="rows" :columns="parsedColumns" :element-id="elementId" :is-view="isView"
 				:selected-rows="localSelectedRows" :show-options="parsedColumns.length !== 0"
-				:view-setting.sync="localViewSetting" :config="config" @create-row="$emit('create-row', elementId, isView)"
+				:view-setting.sync="localViewSetting" :config="config" @create-row="$emit('create-row')"
 				@download-csv="data => downloadCsv(data, parsedColumns, downloadTitle)"
 				@set-search-string="str => setSearchString(str)"
-				@delete-selected-rows="rowIds => $emit('delete-selected-rows', rowIds, elementId, isView)" />
+				@delete-selected-rows="rowIds => $emit('delete-selected-rows', rowIds)" />
 		</div>
 		<div class="custom-table row">
 			<CustomTable v-if="config.canReadRows || (config.canCreateRows && rows.length > 0)" :columns="parsedColumns"
 				:rows="rows" :is-view="isView" :element-id="elementId" :view-setting.sync="localViewSetting"
-				:config="config" @create-row="$emit('create-row', elementId, isView)"
-				@edit-row="rowId => $emit('edit-row', rowId, elementId, isView)"
-				@create-column="$emit('create-column', elementId, isView)"
-				@edit-column="col => $emit('edit-column', col, elementId, isView)"
-				@delete-column="col => $emit('delete-column', col, elementId, isView)"
+				:config="config" @create-row="$emit('create-row')"
+				@edit-row="rowId => $emit('edit-row', rowId)"
+				@create-column="$emit('create-column')"
+				@edit-column="col => $emit('edit-column', col)"
+				@delete-column="col => $emit('delete-column', col)"
 				@update-selected-rows="rowIds => localSelectedRows = rowIds"
 				@download-csv="data => downloadCsv(data, parsedColumns, table)">
 				<template #actions>
@@ -68,7 +68,7 @@ deselect-all-rows        -> unselect all rows, e.g. after deleting selected rows
 				</template>
 				<template #action>
 					<NcButton :aria-label="t('tables', 'Create row')" type="primary"
-						@click="$emit('create-row', elementId, isView)">
+						@click="$emit('create-row')">
 						<template #icon>
 							<Plus :size="25" />
 						</template>

src/shared/components/ncTable/sections/CustomTable.vue

@@ -38,7 +38,6 @@
 import TableHeader from '../partials/TableHeader.vue'
 import TableRow from '../partials/TableRow.vue'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
-import { mapGetters } from 'vuex'
 import { MagicFields } from '../mixins/magicFields.js'
 
 export default {
@@ -85,8 +84,6 @@ export default {
 	},
 
 	computed: {
-
-		...mapGetters(['getColumnById']),
 		sorting() {
 			return this.viewSetting?.sorting
 		},