feat: add websocket topic management and show page update functionality https://web.tracklify.com/project/2b7ZVgE5/AdminForth/1503/b5tFOucv/when-user-goes-to-show-page-su

Co-authored-by: Copilot <copilot@github.com>

Author: ivictbor

adminforth/dataConnectors/baseConnector.ts

@@ -22,6 +22,14 @@ type AdminForthFilterNormalizationResult = {
   normalizedFilters?: AdminForthFilterInput;
 };
 
+async function publishShowPageUpdate(resource: AdminForthResource, recordId: string, updates: Record<string, any>) {
+  await global.adminforth.websocket.publish(`/showPage/${resource.resourceId}/${String(recordId)}`, {
+    resourceId: resource.resourceId,
+    recordId,
+    updates,
+  });
+}
+
 
 export default class AdminForthBaseConnector implements IAdminForthDataSourceConnectorBase {
 
@@ -578,6 +586,7 @@ export default class AdminForthBaseConnector implements IAdminForthDataSourceCon
     afLogger.trace(`🪲✏️ updating record id:${recordId}, values: ${JSON.stringify(recordWithOriginalValues)}`);
 
     await this.updateRecordOriginalValues({ resource, recordId, newValues: recordWithOriginalValues });
+    await publishShowPageUpdate(resource, recordId, newValues);
 
     return { ok: true };
   }

adminforth/documentation/docs/tutorial/03-Customization/16-websocket.md

@@ -20,6 +20,18 @@ On server you can publish data to the topic by calling
 admin.websocket.publish('/topic-name', {some: 'data'});
 ```
 
+If you need to unsubscribe from a whole family of topics, for example when route changes can leave old dynamic subscriptions behind, you can use `unsubscribeByPrefix`:
+
+```javascript
+import websocket from '@/websocket';
+
+websocket.unsubscribeByPrefix('/topic-name/');
+```
+
+This will unsubscribe from all topics whose name starts with the prefix.
+
+It is useful for dynamic topics like `/topic-name/<resourceId>/<recordId>` where a stale subscription can update the wrong page if component unmount does not happen exactly when you expect.
+
 Let's consider a real-world example.
 
 ## Usage example

adminforth/documentation/docs/tutorial/08-Plugins/26-agent.md

@@ -1,6 +1,7 @@
 ---
 title: Agent
 slug: /tutorial/Plugins/agent
+sidebar_position: 0
 ---
 
 > TODO: this plugin tutorial is in progress, some information might be missing, we are actively working on it now. If you have any questions regarding this plugin, please reach out to us in GitHub issues

adminforth/modules/operationalResource.ts

@@ -91,6 +91,10 @@ export default class OperationalResource implements IOperationalResource {
   }
 
   async update(primaryKey: any, record: any): Promise<any> {
+    if (Object.keys(record).length === 0) {
+      return { ok: true };
+    }
+
     return await this.dataConnector.updateRecord({ 
       resource: this.resourceConfig,
       recordId: primaryKey,

adminforth/spa/src/views/ShowView.vue

@@ -181,7 +181,7 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import { useCoreStore } from '@/stores/core';
 import { getCustomComponent, checkAcessByAllowedActions, initThreeDotsDropdown, formatComponent, executeCustomAction } from '@/utils';
 import { IconPenSolid, IconTrashBinSolid, IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, onUnmounted, ref, computed } from 'vue';
 import { useRoute,useRouter } from 'vue-router';
 import {callAdminForthApi} from '@/utils';
 import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
@@ -193,15 +193,18 @@ import { getIcon } from '@/utils';
 import { type AdminForthComponentDeclarationFull, type AdminForthResourceColumnCommon, type FieldGroup } from '@/types/Common.js';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
 import { Spinner } from '@/afcl';
+import websocket from '@/websocket';
 
 const route = useRoute();
 const router = useRouter();
 const loading = ref(true);
 const { t } = useI18n();
 const { confirm, alert, show } = useAdminforth();
 const coreStore = useCoreStore();
+const SHOW_PAGE_TOPIC_PREFIX = '/showPage/';
 
 const actionLoadingStates = ref<Record<string, boolean>>({});
+const subscribedShowPageTopic = ref<string | null>(null);
 
 const customActions = computed(() => {
   return coreStore.resource?.options?.actions?.filter((a: any) => a.showIn?.showThreeDotsMenu) || [];
@@ -219,7 +222,34 @@ const skeletonRowsCount = computed(() => {
   return finalCount > 0 ? finalCount : 10;
 });
 
+const showPageTopic = computed(() => {
+  return `${SHOW_PAGE_TOPIC_PREFIX}${String(route.params.resourceId)}/${String(route.params.primaryKey)}`;
+});
+
+function applyShowPageUpdates(data: { resourceId: string; recordId: string; updates: Record<string, any> }) {
+  if (String(data.resourceId) !== String(route.params.resourceId)) {
+    return;
+  }
+  if (String(data.recordId) !== String(route.params.primaryKey)) {
+    return;
+  }
+  if (!coreStore.record) {
+    return;
+  }
+
+  Object.entries(data.updates).forEach(([attribute, value]) => {
+    coreStore.record[attribute] = value;
+  });
+}
+
+function subscribeToShowPageUpdates() {
+  websocket.unsubscribeByPrefix(SHOW_PAGE_TOPIC_PREFIX);
+  subscribedShowPageTopic.value = showPageTopic.value;
+  websocket.subscribe(subscribedShowPageTopic.value, applyShowPageUpdates);
+}
+
 onMounted(async () => {
+  subscribeToShowPageUpdates();
   loading.value = true;
   await coreStore.fetchResourceFull({
     resourceId: route.params.resourceId as string,
@@ -236,6 +266,13 @@ onMounted(async () => {
   loading.value = false;
 });
 
+onUnmounted(() => {
+  if (!subscribedShowPageTopic.value) {
+    return;
+  }
+  websocket.unsubscribe(subscribedShowPageTopic.value);
+});
+
 const groups = computed(() => {
   let fieldGroupType;
   if (coreStore.resource) {

adminforth/spa/src/websocket.ts

@@ -106,22 +106,37 @@ setInterval(() => {
 
 export default {
   subscribe(topic: string, callback: (data: any) => void): void {
+    const isFirstSubscription = !subscriptions[topic];
     if (!subscriptions[topic]) {
       subscriptions[topic] = [];
     }
     subscriptions[topic].push(callback);
-    if (state.status === 'connected') {
+    if (isFirstSubscription && state.status === 'connected') {
       doPhysicalSubscribe(topic);
     }
   },
 
   unsubscribe(topic: string): void {
+    if (!subscriptions[topic]) {
+      return;
+    }
     delete subscriptions[topic];
     if (state.status === 'connected') {
       doPhysicalUnsubscribe(topic);
     }
   },
 
+  unsubscribeByPrefix(prefix: string): void {
+    Object.keys(subscriptions)
+      .filter((topic) => topic.startsWith(prefix))
+      .forEach((topic) => {
+        delete subscriptions[topic];
+        if (state.status === 'connected') {
+          doPhysicalUnsubscribe(topic);
+        }
+      });
+  },
+
   unsubscribeAll(): void {
     Object.keys(subscriptions).forEach((topic) => {
       delete subscriptions[topic];