enh: hold multiple tables/views in global store

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

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,29 @@ 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
 
 				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/store/data.js

@@ -4,24 +4,40 @@ import displayError from '../shared/utils/displayError.js'
 import { parseCol } from '../shared/components/ncTable/mixins/columnParser.js'
 import { MetaColumns } from '../shared/components/ncTable/mixins/metaColumns.js'
 import { showError } from '@nextcloud/dialogs'
+import { set } from 'vue'
+
+function genStateKey(isView, elementId) {
+	elementId = elementId.toString()
+	return isView ? 'view-' + elementId : elementId
+}
 
 export default {
 	state: {
-		loading: false,
-		rows: [],
-		columns: [],
+		loading: {},
+		rows: {},
+		columns: {},
 	},
 
 	mutations: {
-		setColumns(state, columns) {
-			state.columns = columns
+		setColumns(state, { stateId, columns }) {
+			set(state.columns, stateId, columns)
+		},
+		setRows(state, { stateId, rows }) {
+			set(state.rows, stateId, rows)
+		},
+		setLoading(state, { stateId, value }) {
+			set(state.loading, stateId, !!(value))
+		},
+		clearColumns(state) {
+			state.columns = {}
 		},
-		setRows(state, rows) {
-			state.rows = rows
+		clearRows(state) {
+			state.rows = {}
 		},
-		setLoading(state, value) {
-			state.loading = !!(value)
+		clearLoading(state) {
+			state.loading = {}
 		},
+
 	},
 
 	getters: {
@@ -31,9 +47,15 @@ export default {
 	},
 
 	actions: {
+		clearState({ commit }) {
+			commit('clearLoading')
+			commit('clearColumns')
+			commit('clearRows')
+		},
 		// COLUMNS
 		async getColumnsFromBE({ commit }, { tableId, viewId }) {
-			commit('setLoading', true)
+			const stateId = genStateKey(!!(viewId), viewId ?? tableId)
+			commit('setLoading', { stateId, value: true })
 			let res = null
 
 			try {
@@ -57,22 +79,24 @@ export default {
 				return false
 			}
 			const columns = res.data.map(col => parseCol(col))
-			commit('setLoading', false)
+			commit('setLoading', { stateId, value: false })
 			return columns
 		},
-		async loadColumnsFromBE({ commit, dispatch }, { view, table }) {
-			let allColumns = await dispatch('getColumnsFromBE', { tableId: table?.id, viewId: view?.id })
+		async loadColumnsFromBE({ commit, dispatch }, { view, tableId }) {
+			let allColumns = await dispatch('getColumnsFromBE', { tableId, viewId: view?.id })
 			if (view) {
 				allColumns = allColumns.concat(MetaColumns.filter(col => view.columns.includes(col.id)))
 				allColumns = allColumns.sort(function(a, b) {
 					return view.columns.indexOf(a.id) - view.columns.indexOf(b.id)
 				  })
 			}
-			commit('setColumns', allColumns)
+			const stateId = genStateKey(!!(view?.id), view?.id ?? tableId)
+			commit('setColumns', { stateId, columns: allColumns })
 			return true
 		},
-		async insertNewColumn({ commit, state }, { data }) {
-			commit('setLoading', true)
+		async insertNewColumn({ commit, state }, { isView, elementId, data }) {
+			const stateId = genStateKey(isView, elementId)
+			commit('setLoading', { stateId, value: true })
 			let res = null
 
 			try {
@@ -81,15 +105,15 @@ export default {
 				displayError(e, t('tables', 'Could not insert column.'))
 				return false
 			}
-
-			const columns = state.columns
-			columns.push(parseCol(res.data))
-			commit('setColumns', columns)
-
-			commit('setLoading', false)
+			if (stateId) {
+				const columns = state.columns[stateId]
+				columns.push(parseCol(res.data))
+				commit('setColumns', { stateId, columns })
+				commit('setLoading', { stateId, value: false })
+			}
 			return true
 		},
-		async updateColumn({ state, commit }, { id, data }) {
+		async updateColumn({ state, commit }, { id, isView, elementId, data }) {
 			data.selectionOptions = JSON.stringify(data.selectionOptions)
 			let res = null
 
@@ -100,33 +124,40 @@ export default {
 				return false
 			}
 
-			const col = res.data
-			const columns = state.columns
-			const index = columns.findIndex(c => c.id === col.id)
-			columns[index] = parseCol(col)
-			commit('setColumns', [...columns])
+			const stateId = genStateKey(isView, elementId)
+			if (stateId) {
+				const col = res.data
+				const columns = state.columns[stateId]
+				const index = columns.findIndex(c => c.id === col.id)
+				columns[index] = parseCol(col)
+				commit('setColumns', { stateId, columns: [...columns] })
+			}
 
 			return true
 		},
-		async removeColumn({ state, commit }, { id }) {
+		async removeColumn({ state, commit }, { id, isView, elementId }) {
 			try {
 				await axios.delete(generateUrl('/apps/tables/column/' + id))
 			} catch (e) {
 				displayError(e, t('tables', 'Could not remove column.'))
 				return false
 			}
 
-			const columns = state.columns
-			const index = columns.findIndex(c => c.id === id)
-			columns.splice(index, 1)
-			commit('setColumns', [...columns])
+			const stateId = genStateKey(isView, elementId)
+			if (stateId) {
+				const columns = state.columns[stateId]
+				const index = columns.findIndex(c => c.id === id)
+				columns.splice(index, 1)
+				commit('setColumns', { stateId, columns: [...columns] })
+			}
 
 			return true
 		},
 
 		// ROWS
 		async loadRowsFromBE({ commit }, { tableId, viewId }) {
-			commit('setLoading', true)
+			const stateId = genStateKey(!!(viewId), viewId ?? tableId)
+			commit('setLoading', { stateId, value: true })
 			let res = null
 
 			try {
@@ -140,16 +171,17 @@ export default {
 				return false
 			}
 
-			commit('setRows', res.data)
-
-			commit('setLoading', false)
+			commit('setRows', { stateId, rows: res.data })
+			commit('setLoading', { stateId, value: false })
 			return true
 		},
-		removeRows({ commit }) {
-			commit('setRows', [])
+		removeRows({ commit }, { isView, elementId }) {
+			const stateId = genStateKey(isView, elementId)
+			commit('setRows', { stateId, rows: [] })
 		},
-		async updateRow({ state, commit, dispatch }, { id, viewId, data }) {
+		async updateRow({ state, commit, dispatch }, { id, isView, elementId, data }) {
 			let res = null
+			const viewId = isView ? elementId : null
 
 			try {
 				res = await axios.put(generateUrl('/apps/tables/row/' + id), { viewId, data })
@@ -164,11 +196,14 @@ export default {
 				return false
 			}
 
-			const row = res.data
-			const rows = state.rows
-			const index = rows.findIndex(r => r.id === row.id)
-			rows[index] = row
-			commit('setRows', [...rows])
+			const stateId = genStateKey(isView, elementId)
+			if (stateId) {
+				const row = res.data
+				const rows = state.rows[stateId]
+				const index = rows.findIndex(r => r.id === row.id)
+				rows[index] = row
+				commit('setRows', { stateId, rows: [...rows] })
+			}
 			return true
 		},
 		async insertNewRow({ state, commit, dispatch }, { viewId, tableId, data }) {
@@ -181,13 +216,17 @@ export default {
 				return false
 			}
 
-			const row = res.data
-			const rows = state.rows
-			rows.push(row)
-			commit('setRows', [...rows])
+			const stateId = genStateKey(!!(viewId), viewId ?? tableId)
+			if (stateId) {
+				const row = res.data
+				const rows = state.rows[stateId]
+				rows.push(row)
+				commit('setRows', { stateId, rows: [...rows] })
+			}
 			return true
 		},
-		async removeRow({ state, commit, dispatch }, { rowId, viewId }) {
+		async removeRow({ state, commit, dispatch }, { rowId, isView, elementId }) {
+			const viewId = isView ? elementId : null
 			try {
 				if (viewId) await axios.delete(generateUrl('/apps/tables/view/' + viewId + '/row/' + rowId))
 				else await axios.delete(generateUrl('/apps/tables/row/' + rowId))
@@ -201,11 +240,13 @@ export default {
 				return false
 			}
 
-			const rows = state.rows
-			const index = rows.findIndex(r => r.id === rowId)
-			rows.splice(index, 1)
-			commit('setRows', [...rows])
-
+			const stateId = genStateKey(isView, elementId)
+			if (stateId) {
+				const rows = state.rows[stateId]
+				const index = rows.findIndex(r => r.id === rowId)
+				rows.splice(index, 1)
+				commit('setRows', { stateId, rows: [...rows] })
+			}
 			return true
 		},
 	},