[stable0.9] feat: remove rows in view after edit when they no longer match filter

appinfo/routes.php

@@ -88,6 +88,7 @@
 		['name' => 'row#updateSet', 'url' => '/row/{id}', 'verb' => 'PUT'],
 		['name' => 'row#destroyByView', 'url' => '/view/{viewId}/row/{id}', 'verb' => 'DELETE'],
 		['name' => 'row#destroy', 'url' => '/row/{id}', 'verb' => 'DELETE'],
+		['name' => 'row#presentInView', 'url' => '/view/{viewId}/row/{id}/present', 'verb' => 'GET'],
 
 		// shares
 		['name' => 'share#index', 'url' => '/share/table/{tableId}', 'verb' => 'GET'],

lib/Controller/RowController.php

@@ -100,4 +100,12 @@ public function destroyByView(int $id, int $viewId): DataResponse {
 			return $this->service->delete($id, $viewId, $this->userId);
 		});
 	}
+
+	#[NoAdminRequired]
+	public function presentInView(int $id, int $viewId): DataResponse {
+		return $this->handleError(function () use ($id, $viewId) {
+			$present = $this->service->isRowInViewPresent($id, $viewId, $this->userId);
+			return ['present' => $present];
+		});
+	}
 }

lib/Service/RowService.php

@@ -614,6 +614,25 @@ public function getViewRowsCount(View $view, string $userId): int {
 		}
 	}
 
+	/**
+	 * @param int $rowId
+	 * @param int $viewId
+	 * @param string $userId
+	 * @return bool
+	 *
+	 * @throws PermissionError
+	 */
+	public function isRowInViewPresent(int $rowId, int $viewId, string $userId): bool {
+		if (!$this->permissionsService->canReadRowsByElementId($viewId, 'view', $userId)) {
+			$e = new \Exception('Row not found.');
+			$this->logger->error($e->getMessage(), ['exception' => $e]);
+			throw new PermissionError(get_class($this) . ' - ' . __FUNCTION__ . ': ' . $e->getMessage());
+		}
+
+		$view = $this->viewMapper->find($viewId);
+		return $this->row2Mapper->isRowInViewPresent($rowId, $view, $userId);
+	}
+
 	private function filterRowResult(?View $view, Row2 $row): Row2 {
 		if ($view === null) {
 			return $row;

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

@@ -22,9 +22,13 @@
 					</template>
 				</TableHeader>
 			</thead>
-			<tbody>
-				<TableRow v-for="(row, index) in currentPageRows"
-					:key="index"
+			<transition-group
+				name="table-row"
+				tag="tbody"
+				:css="rowAnimation"
+				@after-leave="disableRowAnimation">
+				<TableRow v-for="row in currentPageRows"
+					:key="row.id"
 					data-cy="customTableRow"
 					:row="row"
 					:columns="columns"
@@ -33,8 +37,7 @@
 					:config="config"
 					@update-row-selection="updateRowSelection"
 					@edit-row="rowId => $emit('edit-row', rowId)" />
-				<tr />
-			</tbody>
+			</transition-group>
 		</table>
 		<div v-if="totalPages > 1" class="pagination-footer" :class="{'large-width': !appNavCollapsed || isMobile}">
 			<div class="pagination-items">
@@ -144,6 +147,7 @@ export default {
 			localViewSetting: this.viewSetting,
 			pageNumber: 1,
 			rowsPerPage: 100,
+			rowAnimation: false,
 		}
 	},
 
@@ -328,9 +332,11 @@ export default {
 
 	mounted() {
 		subscribe('tables:selected-rows:deselect', ({ elementId, isView }) => this.deselectAllRows(elementId, isView))
+		subscribe('tables:row:animate', this.enableRowAnimation)
 	},
 	beforeDestroy() {
 		unsubscribe('tables:selected-rows:deselect', ({ elementId, isView }) => this.deselectAllRows(elementId, isView))
+		unsubscribe('tables:row:animate', this.enableRowAnimation)
 	},
 
 	methods: {
@@ -383,6 +389,12 @@ export default {
 				this.$emit('update-selected-rows', this.selectedRows)
 			}
 		},
+		enableRowAnimation() {
+			this.rowAnimation = true
+		},
+		disableRowAnimation() {
+			this.rowAnimation = false
+		},
 	},
 }
 </script>
@@ -572,4 +584,18 @@ export default {
 
 }
 
+.table-row-leave-active {
+  transition: all 600ms ease;
+}
+
+.table-row-leave-to {
+  opacity: 0;
+  height: 0 !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  transform: translateX(-1rem);
+}
+
 </style>

src/store/data.js

@@ -10,6 +10,7 @@ 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'
+import { emit } from '@nextcloud/event-bus'
 
 function genStateKey(isView, elementId) {
 	elementId = elementId.toString()
@@ -202,7 +203,9 @@ export const useDataStore = defineStore('data', {
 				const row = res.data
 				const index = this.rows[stateId].findIndex(r => r.id === row.id)
 				set(this.rows[stateId], index, row)
+				await this.removeRowIfNotInView({ rowId: row?.id, viewId, stateId })
 			}
+
 			return true
 		},
 
@@ -223,7 +226,9 @@ export const useDataStore = defineStore('data', {
 				const row = res?.data?.ocs?.data
 				const newIndex = this.rows[stateId].length
 				set(this.rows[stateId], newIndex, row)
+				await this.removeRowIfNotInView({ rowId: row?.id, viewId, stateId })
 			}
+
 			return true
 		},
 
@@ -252,5 +257,28 @@ export const useDataStore = defineStore('data', {
 			}
 			return true
 		},
+
+		async checkRowInView({ rowId, viewId }) {
+			try {
+				const res = await axios.get(generateUrl('/apps/tables/view/{viewId}/row/{rowId}/present', { viewId, rowId }))
+				return res.data.present
+			} catch (e) {
+				showError(t('tables', 'Could not verify row. View is reloaded'))
+				await this.loadRowsFromBE({ viewId })
+			}
+		},
+
+		async removeRowIfNotInView({ rowId, viewId, stateId }) {
+			if (!rowId || !viewId) {
+				return
+			}
+
+			const rowInView = await this.checkRowInView({ rowId, viewId })
+			if (rowInView === false) {
+				emit('tables:row:animate')
+				this.rows[stateId] = this.rows[stateId].filter(r => r.id !== rowId)
+			}
+		},
 	},
+
 })