@adminforth/foreign-inline-show 1.0.1

package/.woodpecker/buildRelease.sh

@@ -0,0 +1,13 @@
+
+#!/bin/bash
+
+# write npm run output both to console and to build.log
+npm run build 2>&1 | tee build.log
+build_status=${PIPESTATUS[0]}
+
+# if exist status from the npm run build is not 0
+# then exit with the status code from the npm run build
+if [ $build_status -ne 0 ]; then
+  echo "Build failed. Exiting with status code $build_status"
+  exit $build_status
+fi

package/.woodpecker/buildSlackNotify.sh

@@ -0,0 +1,44 @@
+#!/bin/sh
+
+set -x
+
+COMMIT_SHORT_SHA=$(echo $CI_COMMIT_SHA | cut -c1-8)
+
+
+if [ "$CI_STEP_STATUS" = "success" ]; then
+  MESSAGE="Did a build without issues on \`$CI_REPO_NAME/$CI_COMMIT_BRANCH\`. Commit: _${CI_COMMIT_MESSAGE}_ (<$CI_COMMIT_URL|$COMMIT_SHORT_SHA>)"
+
+  curl  -s -X POST -H "Content-Type: application/json" -d '{
+    "username": "'"$CI_COMMIT_AUTHOR"'",
+    "icon_url": "'"$CI_COMMIT_AUTHOR_AVATAR"'",
+    "attachments": [
+      {
+          "mrkdwn_in": ["text", "pretext"],
+          "color": "#36a64f",
+          "text": "'"$MESSAGE"'"
+      }
+    ]
+  }' "$DEVELOPERS_SLACK_WEBHOOK"
+  exit 0
+fi
+export BUILD_LOG=$(cat ./build.log)
+
+BUILD_LOG=$(echo $BUILD_LOG | sed 's/"/\\"/g')
+
+MESSAGE="Broke \`$CI_REPO_NAME/$CI_COMMIT_BRANCH\` with commit _${CI_COMMIT_MESSAGE}_ (<$CI_COMMIT_URL|$COMMIT_SHORT_SHA>)"
+CODE_BLOCK="\`\`\`$BUILD_LOG\n\`\`\`"
+
+echo "Sending slack message to developers $MESSAGE"
+# Send the message
+curl -sS -X POST -H "Content-Type: application/json" -d '{
+  "username": "'"$CI_COMMIT_AUTHOR"'",
+  "icon_url": "'"$CI_COMMIT_AUTHOR_AVATAR"'",
+  "attachments": [
+    {
+        "mrkdwn_in": ["text", "pretext"],
+        "color": "#8A1C12",
+        "text": "'"$CODE_BLOCK"'",
+        "pretext": "'"$MESSAGE"'"
+    }
+  ]
+}' "$DEVELOPERS_SLACK_WEBHOOK" 2>&1

package/.woodpecker/release.yml

@@ -0,0 +1,40 @@
+clone:
+  git:
+    image: woodpeckerci/plugin-git
+    settings:
+      partial: false
+      depth: 5
+
+steps:
+  init-secrets:
+    when:
+      - event: push
+    image: infisical/cli
+    environment:
+      INFISICAL_TOKEN:
+        from_secret: VAULT_TOKEN
+    commands:
+      - infisical export --domain https://vault.devforth.io/api --format=dotenv-export --env="prod" > /woodpecker/deploy.vault.env
+
+  release:
+    image: node:20
+    when:
+      - event: push
+    commands:
+      - apt update && apt install -y rsync
+      - export $(cat /woodpecker/deploy.vault.env | xargs)
+      - npm clean-install
+      - /bin/bash ./.woodpecker/buildRelease.sh
+      - npm audit signatures
+      - npx semantic-release
+
+  slack-on-failure:
+    when:
+      - event: push
+        status: [failure, success]
+      - event: push
+    image: curlimages/curl
+    commands:
+      - export $(cat /woodpecker/deploy.vault.env | xargs)
+      - /bin/sh ./.woodpecker/buildSlackNotify.sh
+

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+
+# Changelog
+
+The complete changelog is available on the [GitHub Releases page](https://github.com/devforth/adminforth-foreign-inline-list/releases).
+

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Devforth.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,7 @@
+# AdminForth ForeignInlineList Plugin
+
+<img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="License: MIT" /> <img src="https://woodpecker.devforth.io/api/badges/3848/status.svg" alt="Build Status" /> <a href="https://www.npmjs.com/package/@adminforth/foreign-inline-show"> <img src="https://img.shields.io/npm/dt/@adminforth/foreign-inline-show" alt="npm downloads" /></a> <a href="https://www.npmjs.com/package/@adminforth/foreign-inline-show"><img src="https://img.shields.io/npm/v/@adminforth/foreign-inline-show" alt="npm version" /></a> <a href="https://www.npmjs.com/package/@adminforth/foreign-inline-show">
+
+Allows to add an inline show of connected foreign resource records on a adminforth show page.
+
+## For usage, see [AdminForth ForeignInlineList Documentation](https://adminforth.dev/docs/tutorial/Plugins/ForeignInlineList/)

package/build.log

@@ -0,0 +1,10 @@
+
+> @adminforth/foreign-inline-show@1.0.27 build
+> tsc && rsync -av --exclude 'node_modules' custom dist/
+
+sending incremental file list
+custom/
+custom/InlineShow.vue
+
+sent 4,078 bytes  received 39 bytes  8,234.00 bytes/sec
+total size is 3,934  speedup is 0.96

package/custom/InlineShow.vue

@@ -0,0 +1,122 @@
+<template>
+  <td colspan="2" class="pb-3 px-0 pt-0">
+    <div v-if="loading" role="status" class="max-w-sm animate-pulse">
+        <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
+        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5"></div>
+        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
+        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[330px] mb-2.5"></div>
+        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[300px] mb-2.5"></div>
+        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
+        <span class="sr-only">{{ $t('Loading...') }}</span>
+    </div>
+    <div 
+      v-else-if="coreStore.record"
+      class="relative w-full flex flex-col gap-4"
+    >
+    <div class="flex items-center gap-1">
+      <h4 v-if="parentRecord"
+          class="px-6 py-4"
+      >{{ listResource.label }} {{$t('inline record')}}</h4>
+    </div>  
+      <div v-if="parentRecord">
+        <ShowTable
+          :columns="filteredColumns"
+          :resource="listResource"
+          :record="parentRecord"
+        />
+      </div>
+    </div>
+  </td>
+</template>
+
+
+<script setup lang="ts">
+import { useCoreStore } from '@/stores/core';
+import { onMounted, ref, computed, watchEffect } from 'vue';
+import {callAdminForthApi} from '@/utils';
+import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
+import ShowTable from '@/components/ShowTable.vue';
+import { useI18n } from 'vue-i18n';
+
+
+const sort = ref([]);
+const parentRecord = ref(null);
+const props = defineProps(['column', 'record', 'meta', 'resource', 'adminUser']);
+const loading = ref(true);
+const { t } = useI18n();
+const coreStore = useCoreStore();
+const listResource = ref(null);
+
+const parentResourceRefColumn = computed(() => {
+  if (!props.resource || !listResource.value) return null;
+
+  return props.resource.columns.find(c =>
+    c.foreignResource?.polymorphicResources
+      ? c.foreignResource.polymorphicResources.some(pr => pr.resourceId === listResource.value.resourceId)
+      : c.foreignResource?.resourceId === listResource.value.resourceId
+  );
+});
+
+onMounted(async () => {
+  listResource.value = (await callAdminForthApi({
+    path: `/plugin/${props.meta.pluginInstanceId}/get_resource`,
+    method: 'POST',
+    body: {},
+  })).resource;
+  await getParentRecord();
+
+});
+
+async function getParentRecord() {
+  if (!listResource.value || !parentResourceRefColumn.value) {
+    console.warn('No parent resource or reference column found');
+    parentRecord.value = null;
+    loading.value = false;
+  }
+
+  const foreignKeyValue = props.record[parentResourceRefColumn.value.name];
+  if (!foreignKeyValue) {
+    console.warn('No foreign key value found in the record', props.record);
+    parentRecord.value = null;
+    loading.value = false;
+  }
+
+  const data = await callAdminForthApi({
+    path: '/get_resource_data',
+    method: 'POST',
+    body: {
+      source: 'show',
+      resourceId: listResource.value.resourceId,
+      filters: [{
+        field: listResource.value.columns.find(c => c.primaryKey).name,
+        operator: 'eq',
+        value: foreignKeyValue.pk ?? foreignKeyValue,
+      }],
+      limit: 1,
+      offset: 0,
+      sort: Array.isArray(sort.value) ? sort.value : [],
+    },
+  });
+  if (!data) {
+    console.error('No data returned from API', data);
+    parentRecord.value = null;
+    loading.value = false;
+  }
+  if (data.error) {
+    showErrorTost(data.error);
+    parentRecord.value = null;
+    loading.value = false;
+  }
+  loading.value = false;
+  parentRecord.value = data.data?.[0] || null;
+}
+const filteredColumns = computed(() => {
+  return listResource.value?.columns?.filter(col => {
+    const isInjectedField =
+      col.virtual && col.name?.startsWith('foreignInlineList_');
+
+    return col.showIn?.show && !isInjectedField;
+  }) || [];
+});
+</script>
+

package/dist/custom/InlineShow.vue

@@ -0,0 +1,122 @@
+<template>
+  <td colspan="2" class="pb-3 px-0 pt-0">
+    <div v-if="loading" role="status" class="max-w-sm animate-pulse">
+        <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
+        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5"></div>
+        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
+        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[330px] mb-2.5"></div>
+        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[300px] mb-2.5"></div>
+        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
+        <span class="sr-only">{{ $t('Loading...') }}</span>
+    </div>
+    <div 
+      v-else-if="coreStore.record"
+      class="relative w-full flex flex-col gap-4"
+    >
+    <div class="flex items-center gap-1">
+      <h4 v-if="parentRecord"
+          class="px-6 py-4"
+      >{{ listResource.label }} {{$t('inline record')}}</h4>
+    </div>  
+      <div v-if="parentRecord">
+        <ShowTable
+          :columns="filteredColumns"
+          :resource="listResource"
+          :record="parentRecord"
+        />
+      </div>
+    </div>
+  </td>
+</template>
+
+
+<script setup lang="ts">
+import { useCoreStore } from '@/stores/core';
+import { onMounted, ref, computed, watchEffect } from 'vue';
+import {callAdminForthApi} from '@/utils';
+import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
+import ShowTable from '@/components/ShowTable.vue';
+import { useI18n } from 'vue-i18n';
+
+
+const sort = ref([]);
+const parentRecord = ref(null);
+const props = defineProps(['column', 'record', 'meta', 'resource', 'adminUser']);
+const loading = ref(true);
+const { t } = useI18n();
+const coreStore = useCoreStore();
+const listResource = ref(null);
+
+const parentResourceRefColumn = computed(() => {
+  if (!props.resource || !listResource.value) return null;
+
+  return props.resource.columns.find(c =>
+    c.foreignResource?.polymorphicResources
+      ? c.foreignResource.polymorphicResources.some(pr => pr.resourceId === listResource.value.resourceId)
+      : c.foreignResource?.resourceId === listResource.value.resourceId
+  );
+});
+
+onMounted(async () => {
+  listResource.value = (await callAdminForthApi({
+    path: `/plugin/${props.meta.pluginInstanceId}/get_resource`,
+    method: 'POST',
+    body: {},
+  })).resource;
+  await getParentRecord();
+
+});
+
+async function getParentRecord() {
+  if (!listResource.value || !parentResourceRefColumn.value) {
+    console.warn('No parent resource or reference column found');
+    parentRecord.value = null;
+    loading.value = false;
+  }
+
+  const foreignKeyValue = props.record[parentResourceRefColumn.value.name];
+  if (!foreignKeyValue) {
+    console.warn('No foreign key value found in the record', props.record);
+    parentRecord.value = null;
+    loading.value = false;
+  }
+
+  const data = await callAdminForthApi({
+    path: '/get_resource_data',
+    method: 'POST',
+    body: {
+      source: 'show',
+      resourceId: listResource.value.resourceId,
+      filters: [{
+        field: listResource.value.columns.find(c => c.primaryKey).name,
+        operator: 'eq',
+        value: foreignKeyValue.pk ?? foreignKeyValue,
+      }],
+      limit: 1,
+      offset: 0,
+      sort: Array.isArray(sort.value) ? sort.value : [],
+    },
+  });
+  if (!data) {
+    console.error('No data returned from API', data);
+    parentRecord.value = null;
+    loading.value = false;
+  }
+  if (data.error) {
+    showErrorTost(data.error);
+    parentRecord.value = null;
+    loading.value = false;
+  }
+  loading.value = false;
+  parentRecord.value = data.data?.[0] || null;
+}
+const filteredColumns = computed(() => {
+  return listResource.value?.columns?.filter(col => {
+    const isInjectedField =
+      col.virtual && col.name?.startsWith('foreignInlineList_');
+
+    return col.showIn?.show && !isInjectedField;
+  }) || [];
+});
+</script>
+

package/dist/index.js

@@ -0,0 +1,132 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import clone from 'clone';
+import { AdminForthPlugin, suggestIfTypo } from "adminforth";
+import { interpretResource, ActionCheckSource } from "adminforth";
+export default class ForeignInlineShowPlugin extends AdminForthPlugin {
+    constructor(options) {
+        super(options, import.meta.url);
+        this.options = options;
+    }
+    instanceUniqueRepresentation(pluginOptions) {
+        return `${pluginOptions.foreignResourceId}`;
+    }
+    setupEndpoints(server) {
+        process.env.HEAVY_DEBUG && console.log(`🪲 ForeignInlineShowPlugin.setupEndpoints, registering: '/plugin/${this.pluginInstanceId}/get_resource'`);
+        server.endpoint({
+            method: 'POST',
+            path: `/plugin/${this.pluginInstanceId}/get_resource`,
+            handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body, adminUser }) {
+                const resource = this.adminforth.config.resources.find((res) => this.options.foreignResourceId === res.resourceId);
+                if (!resource) {
+                    return { error: `Resource ${this.options.foreignResourceId} not found` };
+                }
+                const resourceCopy = clone(Object.assign(Object.assign({}, resource), { plugins: undefined }));
+                if (this.options.modifyTableResourceConfig) {
+                    this.options.modifyTableResourceConfig(resourceCopy);
+                }
+                const { allowedActions } = yield interpretResource(adminUser, resourceCopy, {}, ActionCheckSource.DisplayButtons, this.adminforth);
+                return {
+                    resource: Object.assign(Object.assign({}, resourceCopy), { options: Object.assign(Object.assign({}, resourceCopy.options), { allowedActions }) })
+                };
+            })
+        });
+        server.endpoint({
+            method: 'POST',
+            path: `/plugin/${this.pluginInstanceId}/start_bulk_action`,
+            handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body, adminUser, tr }) {
+                const { resourceId, actionId, recordIds } = body;
+                const resource = this.adminforth.config.resources.find((res) => res.resourceId == resourceId);
+                if (!resource) {
+                    return { error: yield tr(`Resource {resourceId} not found`, 'errors', { resourceId }) };
+                }
+                const resourceCopy = JSON.parse(JSON.stringify(Object.assign(Object.assign({}, resource), { plugins: undefined })));
+                if (this.options.modifyTableResourceConfig) {
+                    this.options.modifyTableResourceConfig(resourceCopy);
+                }
+                const { allowedActions } = yield interpretResource(adminUser, resourceCopy, { requestBody: body }, ActionCheckSource.BulkActionRequest, this.adminforth);
+                const action = resourceCopy.options.bulkActions.find((act) => act.id == actionId);
+                if (!action) {
+                    return { error: yield tr(`Action {actionId} not found`, 'errors', { actionId }) };
+                }
+                if (action.allowed) {
+                    const execAllowed = yield action.allowed({ adminUser, resourceCopy, selectedIds: recordIds, allowedActions });
+                    if (!execAllowed) {
+                        return { error: yield tr(`Action "{actionId}" not allowed`, 'errors', { actionId: action.label }) };
+                    }
+                }
+                const response = yield action.action({ selectedIds: recordIds, adminUser, resourceCopy, tr });
+                return Object.assign({ actionId,
+                    recordIds,
+                    resourceId }, response);
+            })
+        });
+    }
+    modifyResourceConfig(adminforth, resourceConfig) {
+        const _super = Object.create(null, {
+            modifyResourceConfig: { get: () => super.modifyResourceConfig }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e;
+            _super.modifyResourceConfig.call(this, adminforth, resourceConfig);
+            this.adminforth = adminforth;
+            this.foreignResource = adminforth.config.resources.find((resource) => resource.resourceId === this.options.foreignResourceId);
+            if (!this.foreignResource) {
+                const similar = suggestIfTypo(adminforth.config.resources.map((res) => res.resourceId), this.options.foreignResourceId);
+                throw new Error(`ForeignInlineShowPlugin: Resource with ID "${this.options.foreignResourceId}" not found. ${similar ? `Did you mean "${similar}"?` : ''}`);
+            }
+            const newColumn = {
+                name: `foreignInlineShow_${this.foreignResource.resourceId}`,
+                label: 'Foreign Inline Show',
+                virtual: true,
+                showIn: {
+                    show: true,
+                    list: false,
+                    edit: false,
+                    create: false,
+                    filter: false,
+                },
+                components: {
+                    showRow: {
+                        file: this.componentPath('InlineShow.vue'),
+                        meta: Object.assign(Object.assign({}, this.options), { pluginInstanceId: this.pluginInstanceId })
+                    }
+                },
+            };
+            if ((_a = this.options.placeInGroup) === null || _a === void 0 ? void 0 : _a.name) {
+                const fieldGroupTypes = [
+                    'fieldGroups',
+                    'createFieldGroups',
+                    'editFieldGroups',
+                    'showFieldGroups'
+                ];
+                let columnAdded = false;
+                for (const groupType of fieldGroupTypes) {
+                    const targetGroup = (_c = (_b = resourceConfig.options) === null || _b === void 0 ? void 0 : _b[groupType]) === null || _c === void 0 ? void 0 : _c.find(group => { var _a; return group.groupName === ((_a = this.options.placeInGroup) === null || _a === void 0 ? void 0 : _a.name); });
+                    if (targetGroup) {
+                        if (this.options.placeInGroup.position < 0 || this.options.placeInGroup.position > targetGroup.columns.length) {
+                            throw new Error(`ForeignInlineShowPlugin: Invalid position ${(_d = this.options.placeInGroup) === null || _d === void 0 ? void 0 : _d.position}. Must be between 0 and ${targetGroup.columns.length} for group "${(_e = this.options.placeInGroup) === null || _e === void 0 ? void 0 : _e.name}"`);
+                        }
+                        if (!columnAdded) {
+                            const beforeColumnName = targetGroup.columns[this.options.placeInGroup.position - 1];
+                            const beforeColumnIndex = resourceConfig.columns.findIndex(col => col.name === beforeColumnName);
+                            resourceConfig.columns.splice(beforeColumnIndex + 1, 0, newColumn);
+                            columnAdded = true;
+                        }
+                        targetGroup.columns.splice(this.options.placeInGroup.position, 0, newColumn.name);
+                    }
+                }
+            }
+            else {
+                resourceConfig.columns.push(newColumn);
+            }
+        });
+    }
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/index.ts

@@ -0,0 +1,171 @@
+import type { 
+  AdminForthResource, 
+  IAdminForth,
+  IHttpServer,
+} from "adminforth";
+import clone from 'clone';
+
+import { AdminForthPlugin, AdminForthResourcePages, suggestIfTypo } from "adminforth";
+import { PluginOptions } from "./types.js";
+import { interpretResource, ActionCheckSource } from "adminforth";
+
+export default class ForeignInlineShowPlugin extends AdminForthPlugin {
+  foreignResource: AdminForthResource;
+  options: PluginOptions;
+  adminforth: IAdminForth;
+
+  constructor(options: PluginOptions) {
+    super(options, import.meta.url);
+    this.options = options;
+  }
+
+  instanceUniqueRepresentation(pluginOptions: any) : string {
+    return `${pluginOptions.foreignResourceId}`;
+  }
+
+  setupEndpoints(server: IHttpServer) {
+    process.env.HEAVY_DEBUG && console.log(`🪲 ForeignInlineShowPlugin.setupEndpoints, registering: '/plugin/${this.pluginInstanceId}/get_resource'`);
+    server.endpoint({
+      method: 'POST',
+      path: `/plugin/${this.pluginInstanceId}/get_resource`,
+      handler: async ({ body, adminUser }) => {
+        const resource = this.adminforth.config.resources.find((res) => this.options.foreignResourceId === res.resourceId);
+        if (!resource) {
+          return { error: `Resource ${this.options.foreignResourceId} not found` };
+        }
+        const resourceCopy = clone({ ...resource, plugins: undefined });
+
+        if (this.options.modifyTableResourceConfig) {
+          this.options.modifyTableResourceConfig(resourceCopy);
+        }
+
+        const { allowedActions } = await interpretResource(adminUser, resourceCopy, {}, ActionCheckSource.DisplayButtons, this.adminforth);
+
+        return { 
+          resource: { 
+            ...resourceCopy,
+            options: {
+              ...resourceCopy.options,
+              allowedActions,
+            },
+          }
+        };
+      }
+    });
+    server.endpoint({
+      method: 'POST',
+      path: `/plugin/${this.pluginInstanceId}/start_bulk_action`,
+      handler: async ({ body, adminUser, tr }) => {
+          const { resourceId, actionId, recordIds } = body;
+          const resource = this.adminforth.config.resources.find((res) => res.resourceId == resourceId);
+          if (!resource) {
+              return { error: await tr(`Resource {resourceId} not found`, 'errors', { resourceId }) };
+          }
+
+          const resourceCopy = JSON.parse(JSON.stringify({ ...resource, plugins: undefined }));
+
+
+          if (this.options.modifyTableResourceConfig) {
+            this.options.modifyTableResourceConfig(resourceCopy);
+          }
+
+          const { allowedActions } = await interpretResource(
+            adminUser, 
+            resourceCopy, 
+            { requestBody: body },
+            ActionCheckSource.BulkActionRequest,
+            this.adminforth
+          );
+
+          const action = resourceCopy.options.bulkActions.find((act) => act.id == actionId);
+          if (!action) {
+            return { error: await tr(`Action {actionId} not found`, 'errors', { actionId }) };
+          } 
+
+          if (action.allowed) {
+            const execAllowed = await action.allowed({ adminUser, resourceCopy, selectedIds: recordIds, allowedActions });
+            if (!execAllowed) {
+              return { error: await tr(`Action "{actionId}" not allowed`, 'errors', { actionId: action.label }) };
+            }
+          }
+          const response = await action.action({selectedIds: recordIds, adminUser, resourceCopy, tr});
+          
+          return {
+            actionId,
+            recordIds,
+            resourceId,
+            ...response
+          }
+      }
+    })
+  }
+
+  async modifyResourceConfig(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
+    super.modifyResourceConfig(adminforth, resourceConfig);
+    this.adminforth = adminforth;
+
+    this.foreignResource = adminforth.config.resources.find((resource) => resource.resourceId === this.options.foreignResourceId);
+    if (!this.foreignResource) {
+      const similar = suggestIfTypo(adminforth.config.resources.map((res) => res.resourceId), this.options.foreignResourceId);
+      throw new Error(`ForeignInlineShowPlugin: Resource with ID "${this.options.foreignResourceId}" not found. ${similar ? `Did you mean "${similar}"?` : ''}`);
+    }
+
+    const newColumn = {
+      name: `foreignInlineShow_${this.foreignResource.resourceId}`,
+      label: 'Foreign Inline Show',
+      virtual: true,
+      showIn: {
+        show: true,
+        list: false,
+        edit: false,
+        create: false,
+        filter: false,
+      },
+      components: {
+        showRow: { 
+          file: this.componentPath('InlineShow.vue'),
+          meta: {
+            ...this.options, 
+            pluginInstanceId: this.pluginInstanceId
+          }
+        }
+      },
+    };
+
+    if (this.options.placeInGroup?.name) {
+      const fieldGroupTypes = [
+        'fieldGroups',
+        'createFieldGroups', 
+        'editFieldGroups',
+        'showFieldGroups'
+      ] as const;
+
+      let columnAdded = false;
+      
+      for (const groupType of fieldGroupTypes) {
+        const targetGroup = resourceConfig.options?.[groupType]?.find(
+          group => group.groupName === this.options.placeInGroup?.name
+        );
+        
+        if (targetGroup) {
+          if (this.options.placeInGroup.position < 0 || this.options.placeInGroup.position > targetGroup.columns.length) {
+            throw new Error(`ForeignInlineShowPlugin: Invalid position ${this.options.placeInGroup?.position}. Must be between 0 and ${targetGroup.columns.length} for group "${this.options.placeInGroup?.name}"`);
+          }
+
+          if (!columnAdded) {
+            const beforeColumnName = targetGroup.columns[this.options.placeInGroup.position - 1];
+            const beforeColumnIndex = resourceConfig.columns.findIndex(
+              col => col.name === beforeColumnName
+            );
+            resourceConfig.columns.splice(beforeColumnIndex + 1, 0, newColumn);
+            columnAdded = true;
+          }
+
+          targetGroup.columns.splice(this.options.placeInGroup.position, 0, newColumn.name);
+        }
+      }
+    } else {
+      resourceConfig.columns.push(newColumn);
+    }
+  }
+}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@adminforth/foreign-inline-show",
+  "version": "1.0.1",
+  "description": "AdminForth plugin for adding show of parent item to the child items show page",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "homepage": "https://adminforth.dev/docs/tutorial/Plugins/ForeignInlineShow/",
+  "scripts": {
+    "build": "tsc && rsync -av --exclude 'node_modules' custom dist/",
+    "prepare": "npm link adminforth"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/devforth/adminforth-foreign-inline-show.git"
+  },
+  "author": "devforth",
+  "keywords": [
+    "adminforth",
+    "show foreign items"
+  ],
+  "license": "ISC",
+  "devDependencies": {
+    "@types/node": "^22.10.7",
+    "semantic-release": "^24.2.1",
+    "semantic-release-slack-bot": "^4.0.2",
+    "typescript": "^5.7.3"
+  },
+  "release": {
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/npm",
+      "@semantic-release/github",
+      [
+        "semantic-release-slack-bot",
+        {
+          "notifyOnSuccess": true,
+          "notifyOnFail": true,
+          "slackIcon": ":package:",
+          "markdownReleaseNotes": true
+        }
+      ]
+    ],
+    "branches": [
+      "main",
+      {
+        "name": "next",
+        "prerelease": true
+      }
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "clone": "^2.1.2"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,112 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+
+    /* Projects */
+    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
+
+    /* Language and Environment */
+    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
+    // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+
+    /* Modules */
+    // changed from commmonjs to node16 because The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'.
+    "module": "node16",                                /* Specify what module code is generated. */
+    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
+    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+    // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
+    // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
+    // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
+    // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
+    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
+    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+
+    /* JavaScript Support */
+    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+    /* Emit */
+    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+    "outDir": "./dist",                                   /* Specify an output folder for all emitted files. */
+    // "removeComments": true,                           /* Disable emitting comments. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+
+    /* Interop Constraints */
+    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+
+    /* Type Checking */
+    "strict": false,   /* TODO */                                   /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+
+    /* Completeness */
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true,                                 /* Skip type checking all .d.ts files. */
+  },
+  "exclude": ["node_modules", "dist", "custom"],           /* Exclude files from compilation. */
+}

package/types.ts

@@ -0,0 +1,32 @@
+
+import { AdminForthResource } from 'adminforth';
+
+export type PluginOptions = {
+
+  /** 
+   * Id of the resource to be displayed in the inline list.
+   * 
+   * Resource mandatory should have one columns which defined {@link AdminForthResourceColumn.foreignResource} which
+   * should be equal to the resourceId of the resource where plugin is used.
+   */
+  foreignResourceId: string;
+
+  /**
+   * Function to modify the resource config of the table.
+   * Can be used to define list of columns visible in the inline list.
+   * Or modify listPageSize
+   * 
+   * @param resourceConfig - Resource config of the table.
+   */
+  modifyTableResourceConfig?: (resourceConfig: AdminForthResource) => void;
+
+  /**
+   * Place the component in a specific group.
+   * 
+   * @param group - Group to place the component in.
+   */
+  placeInGroup?: {
+    name: string;
+    position: number;
+  };
+}