@adminforth/many2many 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/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/build.log

@@ -0,0 +1,12 @@
+
+> @adminforth/many2many@1.0.1 build
+> tsc && rsync -av --exclude 'node_modules' custom dist/
+
+sending incremental file list
+custom/
+custom/ManyToManyInput.vue
+custom/ManyToManyShow.vue
+custom/tsconfig.json
+
+sent 4,884 bytes  received 77 bytes  9,922.00 bytes/sec
+total size is 4,592  speedup is 0.93

package/custom/ManyToManyInput.vue

@@ -0,0 +1,117 @@
+<template>
+  <Select
+    class="w-full"
+    :options="selectOptions"
+    v-model="selected"
+    multiple
+    @search="loadForeignOptions"
+    @scroll-near-end="scrollNearEnd"
+  ></Select>
+</template>
+
+
+<script lang="ts" setup>
+import { Select } from '@/afcl'
+import { ref, onMounted, watch } from 'vue';
+import { callAdminForthApi } from '@/utils';
+
+const props = defineProps<{
+  column: any,
+  record: any,
+  meta: any,
+  resource: any
+}>();
+
+const emit = defineEmits([
+  'update:value',
+]);
+
+const selected = ref([])
+const selectOptions = ref([])
+const pickedValues = ref([])
+const currentSearch = ref('')
+const lastSearch = ref('')
+const loadOffset = ref(0);
+const wasLimitReached = ref(false);
+
+onMounted(async() => {
+  if ( !props.record || Object.keys(props.record).length === 0 ) {
+    loadForeignOptions();
+  } else {
+    try {
+      const resp = await callAdminForthApi({
+        method: 'POST',
+        path: `/plugin/${props.meta.pluginInstanceId}/get-junctionResource-records`,
+        body: {
+          recordId: props.record[props.meta.resourcePrimaryKeyColumnName]
+        },
+      });
+      selected.value = resp.data
+    } catch (error) {
+      console.error('Error loading foreign options:', error);
+    }
+
+    try {
+      const resp = await callAdminForthApi({
+        method: 'POST',
+        path: `/plugin/${props.meta.pluginInstanceId}/get-junctionResource-records`,
+        body: {
+          recordId: props.record[props.meta.resourcePrimaryKeyColumnName],
+          returnLabels: true,
+        },
+      });
+      pickedValues.value = resp.data
+    } catch (error) {
+      console.error('Error loading foreign options:', error);
+    }
+
+    loadForeignOptions();
+  }
+});
+
+async function loadForeignOptions(search = '', offset = 0) {
+  lastSearch.value = currentSearch.value;
+  currentSearch.value = search;
+  try {
+    const resp = await callAdminForthApi({
+      method: 'POST',
+      path: `/get_resource_foreign_data`,
+      body: {
+        resourceId: props.meta.junctionResourceId,
+        column: props.meta.linkedColumnName,
+        limit: 100,
+        offset: offset,
+        search: search,
+      },
+    });
+    
+    wasLimitReached.value = resp.items.length < 100;
+    const removeValues = pickedValues.value.map(i => i.value);
+    const result = resp.items.filter(item => !removeValues.includes(item.value));
+    selectOptions.value = selectOptions.value.filter(item => !removeValues.includes(item.value));
+    const removeValues2 = selectOptions.value.map(i => i.value);
+    const finalResult = result.filter(item => !removeValues2.includes(item.value));
+
+    selectOptions.value = [...pickedValues.value, ...selectOptions.value, ...finalResult];
+  } catch (error) {
+    console.error('Error loading foreign options:', error);
+  }
+}
+
+function scrollNearEnd() {
+  console.log('scrollNearEnd');
+  if ( lastSearch.value !== currentSearch.value ) {
+    loadOffset.value = 0;
+  } else {
+    loadOffset.value += 100;
+  }
+  if ( wasLimitReached.value ) return;
+  loadForeignOptions(currentSearch.value, loadOffset.value);
+}
+
+watch(() => selected.value, (value) => {
+  pickedValues.value.push(selectOptions.value.find(i => i.value === value[value.length -1]));
+  emit('update:value', value);
+});
+
+</script>

package/custom/ManyToManyShow.vue

@@ -0,0 +1,43 @@
+<template>
+ <template v-for="value in values" :key="value.value">
+    <Link :to="`/resource/${props.meta.linkedResourceId}/show/${value.value}`" class="badge bg-primary me-1 mr-3">{{ value.label }}</Link>
+ </template>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { callAdminForthApi } from '@/utils';
+import { Link } from '@/afcl'
+
+
+const props = defineProps<{
+  column: any,
+  record: any,
+  meta: any,
+  resource: any
+}>();
+
+const emit = defineEmits([
+  'update:value',
+]);
+
+const values = ref([]);
+
+onMounted(async() => {
+  if ( !props.record || Object.keys(props.record).length === 0 ) return;
+  try {
+    const resp = await callAdminForthApi({
+      method: 'POST',
+      path: `/plugin/${props.meta.pluginInstanceId}/get-junctionResource-records`,
+      body: {
+        recordId: props.record[props.meta.resourcePrimaryKeyColumnName],
+        returnLabels: true,
+      },
+    });
+    values.value = resp.data;
+  } catch (error) {
+    console.error('Error loading foreign options:', error);
+  }
+});
+
+</script>

package/custom/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".", // This should point to your project root
+    "paths": {
+      "@/*": [
+        "../node_modules/adminforth/dist/spa/src/*"
+      ],
+      "*": [
+        "../node_modules/adminforth/dist/spa/node_modules/*"
+      ],
+      "@@/*": [
+        "."
+      ]
+    }
+  }
+}

package/dist/custom/ManyToManyInput.vue

@@ -0,0 +1,117 @@
+<template>
+  <Select
+    class="w-full"
+    :options="selectOptions"
+    v-model="selected"
+    multiple
+    @search="loadForeignOptions"
+    @scroll-near-end="scrollNearEnd"
+  ></Select>
+</template>
+
+
+<script lang="ts" setup>
+import { Select } from '@/afcl'
+import { ref, onMounted, watch } from 'vue';
+import { callAdminForthApi } from '@/utils';
+
+const props = defineProps<{
+  column: any,
+  record: any,
+  meta: any,
+  resource: any
+}>();
+
+const emit = defineEmits([
+  'update:value',
+]);
+
+const selected = ref([])
+const selectOptions = ref([])
+const pickedValues = ref([])
+const currentSearch = ref('')
+const lastSearch = ref('')
+const loadOffset = ref(0);
+const wasLimitReached = ref(false);
+
+onMounted(async() => {
+  if ( !props.record || Object.keys(props.record).length === 0 ) {
+    loadForeignOptions();
+  } else {
+    try {
+      const resp = await callAdminForthApi({
+        method: 'POST',
+        path: `/plugin/${props.meta.pluginInstanceId}/get-junctionResource-records`,
+        body: {
+          recordId: props.record[props.meta.resourcePrimaryKeyColumnName]
+        },
+      });
+      selected.value = resp.data
+    } catch (error) {
+      console.error('Error loading foreign options:', error);
+    }
+
+    try {
+      const resp = await callAdminForthApi({
+        method: 'POST',
+        path: `/plugin/${props.meta.pluginInstanceId}/get-junctionResource-records`,
+        body: {
+          recordId: props.record[props.meta.resourcePrimaryKeyColumnName],
+          returnLabels: true,
+        },
+      });
+      pickedValues.value = resp.data
+    } catch (error) {
+      console.error('Error loading foreign options:', error);
+    }
+
+    loadForeignOptions();
+  }
+});
+
+async function loadForeignOptions(search = '', offset = 0) {
+  lastSearch.value = currentSearch.value;
+  currentSearch.value = search;
+  try {
+    const resp = await callAdminForthApi({
+      method: 'POST',
+      path: `/get_resource_foreign_data`,
+      body: {
+        resourceId: props.meta.junctionResourceId,
+        column: props.meta.linkedColumnName,
+        limit: 100,
+        offset: offset,
+        search: search,
+      },
+    });
+    
+    wasLimitReached.value = resp.items.length < 100;
+    const removeValues = pickedValues.value.map(i => i.value);
+    const result = resp.items.filter(item => !removeValues.includes(item.value));
+    selectOptions.value = selectOptions.value.filter(item => !removeValues.includes(item.value));
+    const removeValues2 = selectOptions.value.map(i => i.value);
+    const finalResult = result.filter(item => !removeValues2.includes(item.value));
+
+    selectOptions.value = [...pickedValues.value, ...selectOptions.value, ...finalResult];
+  } catch (error) {
+    console.error('Error loading foreign options:', error);
+  }
+}
+
+function scrollNearEnd() {
+  console.log('scrollNearEnd');
+  if ( lastSearch.value !== currentSearch.value ) {
+    loadOffset.value = 0;
+  } else {
+    loadOffset.value += 100;
+  }
+  if ( wasLimitReached.value ) return;
+  loadForeignOptions(currentSearch.value, loadOffset.value);
+}
+
+watch(() => selected.value, (value) => {
+  pickedValues.value.push(selectOptions.value.find(i => i.value === value[value.length -1]));
+  emit('update:value', value);
+});
+
+</script>

package/dist/custom/ManyToManyShow.vue

@@ -0,0 +1,43 @@
+<template>
+ <template v-for="value in values" :key="value.value">
+    <Link :to="`/resource/${props.meta.linkedResourceId}/show/${value.value}`" class="badge bg-primary me-1 mr-3">{{ value.label }}</Link>
+ </template>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { callAdminForthApi } from '@/utils';
+import { Link } from '@/afcl'
+
+
+const props = defineProps<{
+  column: any,
+  record: any,
+  meta: any,
+  resource: any
+}>();
+
+const emit = defineEmits([
+  'update:value',
+]);
+
+const values = ref([]);
+
+onMounted(async() => {
+  if ( !props.record || Object.keys(props.record).length === 0 ) return;
+  try {
+    const resp = await callAdminForthApi({
+      method: 'POST',
+      path: `/plugin/${props.meta.pluginInstanceId}/get-junctionResource-records`,
+      body: {
+        recordId: props.record[props.meta.resourcePrimaryKeyColumnName],
+        returnLabels: true,
+      },
+    });
+    values.value = resp.data;
+  } catch (error) {
+    console.error('Error loading foreign options:', error);
+  }
+});
+
+</script>

package/dist/custom/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".", // This should point to your project root
+    "paths": {
+      "@/*": [
+        "../node_modules/adminforth/dist/spa/src/*"
+      ],
+      "*": [
+        "../node_modules/adminforth/dist/spa/node_modules/*"
+      ],
+      "@@/*": [
+        "."
+      ]
+    }
+  }
+}

package/dist/index.js

@@ -0,0 +1,178 @@
+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 { AdminForthPlugin, Filters } from "adminforth";
+let junctionResource = null;
+let linkedColumnNameInJunctionResource = null;
+let resourceColumnNameInJunctionResource = null;
+export default class extends AdminForthPlugin {
+    constructor(options) {
+        super(options, import.meta.url);
+        this.options = options;
+    }
+    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);
+            for (const resource of this.adminforth.config.resources) {
+                let wasLinkedResourceFound = false;
+                let wasCurrentResourceFound = false;
+                for (const column of resource.columns) {
+                    if (((_a = column.foreignResource) === null || _a === void 0 ? void 0 : _a.resourceId) === this.options.linkedResourceId) {
+                        wasLinkedResourceFound = true;
+                    }
+                    else if (((_b = column.foreignResource) === null || _b === void 0 ? void 0 : _b.resourceId) === resourceConfig.resourceId) {
+                        wasCurrentResourceFound = true;
+                    }
+                }
+                if (wasLinkedResourceFound && wasCurrentResourceFound) {
+                    junctionResource = resource;
+                    break;
+                }
+            }
+            if (!junctionResource) {
+                throw new Error(`Junction resource not found for many-to-many relation between ${resourceConfig.resourceId} and ${this.options.linkedResourceId}`);
+            }
+            linkedColumnNameInJunctionResource = (_c = junctionResource.columns.find(c => { var _a; return ((_a = c.foreignResource) === null || _a === void 0 ? void 0 : _a.resourceId) === this.options.linkedResourceId; })) === null || _c === void 0 ? void 0 : _c.name;
+            resourceColumnNameInJunctionResource = (_d = junctionResource.columns.find(c => { var _a; return ((_a = c.foreignResource) === null || _a === void 0 ? void 0 : _a.resourceId) === resourceConfig.resourceId; })) === null || _d === void 0 ? void 0 : _d.name;
+            const pluginFrontendOptions = {
+                pluginInstanceId: this.pluginInstanceId,
+                resourceId: resourceConfig.resourceId,
+                linkedResourceId: this.options.linkedResourceId,
+                junctionResourceId: junctionResource ? junctionResource.resourceId : null,
+                linkedColumnName: linkedColumnNameInJunctionResource,
+                resourcePrimaryKeyColumnName: (_e = resourceConfig.columns.find(c => c.primaryKey)) === null || _e === void 0 ? void 0 : _e.name,
+            };
+            const virtualColumn = {
+                virtual: true,
+                name: `many2many_${this.pluginInstanceId}`,
+                components: {
+                    edit: {
+                        file: this.componentPath('ManyToManyInput.vue'),
+                        meta: pluginFrontendOptions,
+                    },
+                    create: {
+                        file: this.componentPath('ManyToManyInput.vue'),
+                        meta: pluginFrontendOptions,
+                    },
+                    show: {
+                        file: this.componentPath('ManyToManyShow.vue'),
+                        meta: pluginFrontendOptions,
+                    },
+                },
+                showIn: {
+                    create: true,
+                    edit: true,
+                    list: false,
+                    show: true,
+                    filter: false,
+                },
+                required: {
+                    create: false,
+                    edit: false
+                },
+                label: this.options.linkedResourceId
+            };
+            resourceConfig.columns.push(virtualColumn);
+            // ** HOOKS FOR CREATE **//
+            resourceConfig.hooks.create.afterSave.push((_a) => __awaiter(this, [_a], void 0, function* ({ recordId, recordWithVirtualColumns }) {
+                if (recordWithVirtualColumns[`many2many_${this.pluginInstanceId}`]) {
+                    for (const linkedId of recordWithVirtualColumns[`many2many_${this.pluginInstanceId}`]) {
+                        yield this.adminforth.resource(junctionResource.resourceId).create({
+                            [resourceColumnNameInJunctionResource]: recordId,
+                            [linkedColumnNameInJunctionResource]: linkedId,
+                        });
+                    }
+                }
+                return { ok: true };
+            }));
+            // ** HOOKS FOR EDIT **//
+            resourceConfig.hooks.edit.beforeSave.push((_a) => __awaiter(this, [_a], void 0, function* ({ recordId, updates }) {
+                if (updates[`many2many_${this.pluginInstanceId}`]) {
+                    const existingJunctionRecords = yield this.adminforth.resource(junctionResource.resourceId).list([Filters.EQ(resourceColumnNameInJunctionResource, recordId)]);
+                    const updatedLinkedIds = updates[`many2many_${this.pluginInstanceId}`];
+                    for (const jr of existingJunctionRecords) {
+                        const linkedId = jr[linkedColumnNameInJunctionResource];
+                        if (!updatedLinkedIds.includes(linkedId)) {
+                            yield this.adminforth.resource(junctionResource.resourceId).delete(jr[junctionResource.columns.find(c => c.primaryKey).name]);
+                        }
+                    }
+                    for (const linkedId of updatedLinkedIds) {
+                        const alreadyExists = existingJunctionRecords.find(jr => jr[linkedColumnNameInJunctionResource] === linkedId);
+                        if (!alreadyExists) {
+                            yield this.adminforth.resource(junctionResource.resourceId).create({
+                                [resourceColumnNameInJunctionResource]: recordId,
+                                [linkedColumnNameInJunctionResource]: linkedId,
+                            });
+                        }
+                    }
+                }
+                return { ok: true };
+            }));
+            // ** HOOKS FOR DELETE **//
+            if (!this.options.dontDeleteJunctionRecords) {
+                resourceConfig.hooks.delete.beforeSave.push((_a) => __awaiter(this, [_a], void 0, function* ({ recordId, record }) {
+                    const existingJunctionRecords = yield this.adminforth.resource(junctionResource.resourceId).list([Filters.EQ(resourceColumnNameInJunctionResource, recordId)]);
+                    for (const jr of existingJunctionRecords) {
+                        yield this.adminforth.resource(junctionResource.resourceId).delete(jr[junctionResource.columns.find(c => c.primaryKey).name]);
+                    }
+                    return { ok: true };
+                }));
+                const linkedResource = this.adminforth.config.resources.find(r => r.resourceId === this.options.linkedResourceId);
+                linkedResource.hooks.delete.beforeSave.push((_a) => __awaiter(this, [_a], void 0, function* ({ recordId, record }) {
+                    const existingJunctionRecords = yield this.adminforth.resource(junctionResource.resourceId).list([Filters.EQ(linkedColumnNameInJunctionResource, recordId)]);
+                    for (const jr of existingJunctionRecords) {
+                        yield this.adminforth.resource(junctionResource.resourceId).delete(jr[junctionResource.columns.find(c => c.primaryKey).name]);
+                    }
+                    return { ok: true };
+                }));
+            }
+        });
+    }
+    validateConfigAfterDiscover(adminforth, resourceConfig) {
+        // optional method where you can safely check field types after database discovery was performed
+    }
+    instanceUniqueRepresentation(pluginOptions) {
+        // optional method to return unique string representation of plugin instance. 
+        // Needed if plugin can have multiple instances on one resource 
+        return `many2many-${this.resourceConfig.resourceId}-${this.options.linkedResourceId}`;
+    }
+    setupEndpoints(server) {
+        server.endpoint({
+            method: 'POST',
+            path: `/plugin/${this.pluginInstanceId}/get-junctionResource-records`,
+            handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body }) {
+                const { recordId, returnLabels } = body;
+                const junctionRecords = yield this.adminforth.resource(junctionResource.resourceId).list([Filters.EQ(resourceColumnNameInJunctionResource, recordId)]);
+                let dataToReturn = [];
+                const junctionResourcePkColumn = junctionResource.columns.find(c => c.primaryKey);
+                const linkedResource = this.adminforth.resource(this.options.linkedResourceId);
+                for (const jr of junctionRecords) {
+                    const record = yield this.adminforth.resource(this.options.linkedResourceId).get([Filters.EQ(junctionResourcePkColumn.name, jr[linkedColumnNameInJunctionResource])]);
+                    if (!returnLabels) {
+                        dataToReturn.push(record[junctionResourcePkColumn.name]);
+                    }
+                    else {
+                        dataToReturn.push(linkedResource.resourceConfig.recordLabel ? {
+                            label: linkedResource.resourceConfig.recordLabel(record),
+                            value: record[junctionResourcePkColumn.name]
+                        } : {
+                            label: record[junctionResourcePkColumn.name],
+                            value: record[junctionResourcePkColumn.name]
+                        });
+                    }
+                }
+                return { ok: true, data: dataToReturn };
+            })
+        });
+    }
+}

package/dist/types.js

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

package/index.ts

@@ -0,0 +1,182 @@
+import { AdminForthPlugin, Filters } from "adminforth";
+import type { IAdminForth, IHttpServer, AdminForthResourcePages, AdminForthResourceColumn, AdminForthDataTypes, AdminForthResource } from "adminforth";
+import type { PluginOptions } from './types.js';
+
+let junctionResource = null;
+let linkedColumnNameInJunctionResource = null;
+let resourceColumnNameInJunctionResource = null;
+export default class  extends AdminForthPlugin {
+  options: PluginOptions;
+
+  constructor(options: PluginOptions) {
+    super(options, import.meta.url);
+    this.options = options;
+  }
+
+  async modifyResourceConfig(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
+    super.modifyResourceConfig(adminforth, resourceConfig);
+
+    for(const resource of this.adminforth.config.resources) {
+      let wasLinkedResourceFound = false;
+      let wasCurrentResourceFound = false;
+      for(const column of resource.columns) {
+        if ( column.foreignResource?.resourceId === this.options.linkedResourceId ) {
+          wasLinkedResourceFound = true;
+        } else if ( column.foreignResource?.resourceId === resourceConfig.resourceId ) {
+          wasCurrentResourceFound = true;
+        } 
+      }
+      if ( wasLinkedResourceFound && wasCurrentResourceFound ) {
+        junctionResource = resource;
+        break;
+      }
+    }
+    if (!junctionResource) {
+      throw new Error(`Junction resource not found for many-to-many relation between ${resourceConfig.resourceId} and ${this.options.linkedResourceId}`);
+    }
+
+    linkedColumnNameInJunctionResource = junctionResource.columns.find(c => c.foreignResource?.resourceId === this.options.linkedResourceId)?.name;
+    resourceColumnNameInJunctionResource = junctionResource.columns.find(c => c.foreignResource?.resourceId === resourceConfig.resourceId)?.name;
+
+    const pluginFrontendOptions = {
+      pluginInstanceId: this.pluginInstanceId,
+      resourceId: resourceConfig.resourceId,
+      linkedResourceId: this.options.linkedResourceId,
+      junctionResourceId: junctionResource ? junctionResource.resourceId : null,
+      linkedColumnName: linkedColumnNameInJunctionResource,
+      resourcePrimaryKeyColumnName: resourceConfig.columns.find(c => c.primaryKey)?.name,
+    }
+
+    const virtualColumn: AdminForthResourceColumn = {
+      virtual: true,
+      name: `many2many_${this.pluginInstanceId}`,
+      components: {
+        edit: {
+          file: this.componentPath('ManyToManyInput.vue'),
+          meta: pluginFrontendOptions,
+        },
+        create: {
+          file: this.componentPath('ManyToManyInput.vue'),
+          meta: pluginFrontendOptions,
+        },
+        show: {
+          file: this.componentPath('ManyToManyShow.vue'),
+          meta: pluginFrontendOptions,
+        },
+      },
+      showIn: {
+        create: true,
+        edit: true,
+        list: false,
+        show: true,
+        filter: false,
+      },
+      required: {
+        create: false,
+        edit: false
+      },
+      label: this.options.linkedResourceId
+    };
+    resourceConfig.columns.push(virtualColumn);
+
+    // ** HOOKS FOR CREATE **//
+
+    resourceConfig.hooks.create.afterSave.push(async ({ recordId, recordWithVirtualColumns }) => {
+      if ( recordWithVirtualColumns[`many2many_${this.pluginInstanceId}`] ) {
+        for(const linkedId of recordWithVirtualColumns[`many2many_${this.pluginInstanceId}`]) {
+          await this.adminforth.resource(junctionResource.resourceId).create({
+            [resourceColumnNameInJunctionResource]: recordId,
+            [linkedColumnNameInJunctionResource]: linkedId,
+          });
+        }
+      }
+      return { ok: true };
+    });
+
+    // ** HOOKS FOR EDIT **//
+
+    resourceConfig.hooks.edit.beforeSave.push(async ({recordId, updates }: { recordId: any, updates: any }) => {
+      if ( updates[`many2many_${this.pluginInstanceId}`] ) {
+        const existingJunctionRecords = await this.adminforth.resource(junctionResource.resourceId).list([Filters.EQ(resourceColumnNameInJunctionResource, recordId)]);
+        const updatedLinkedIds = updates[`many2many_${this.pluginInstanceId}`];
+        for(const jr of existingJunctionRecords) {
+          const linkedId = jr[linkedColumnNameInJunctionResource];
+          if ( !updatedLinkedIds.includes(linkedId) ) {
+            await this.adminforth.resource(junctionResource.resourceId).delete(jr[junctionResource.columns.find(c => c.primaryKey).name]);
+          }
+        }
+        for(const linkedId of updatedLinkedIds) {
+          const alreadyExists = existingJunctionRecords.find(jr => jr[linkedColumnNameInJunctionResource] === linkedId);
+          if ( !alreadyExists ) {
+            await this.adminforth.resource(junctionResource.resourceId).create({
+              [resourceColumnNameInJunctionResource]: recordId,
+              [linkedColumnNameInJunctionResource]: linkedId,
+            });
+          }
+        }
+      }
+      return { ok: true };
+    });
+
+    // ** HOOKS FOR DELETE **//
+    if (!this.options.dontDeleteJunctionRecords) {
+      resourceConfig.hooks.delete.beforeSave.push(async ({ recordId, record }: { recordId: any, record: any }) => {
+        const existingJunctionRecords = await this.adminforth.resource(junctionResource.resourceId).list([Filters.EQ(resourceColumnNameInJunctionResource, recordId)]);
+        for(const jr of existingJunctionRecords) {
+          await this.adminforth.resource(junctionResource.resourceId).delete(jr[junctionResource.columns.find(c => c.primaryKey).name]);
+        }
+        return { ok: true };
+      });
+      const linkedResource = this.adminforth.config.resources.find(r => r.resourceId === this.options.linkedResourceId);
+      linkedResource.hooks.delete.beforeSave.push(async ({ recordId, record }: { recordId: any, record: any }) => {
+        const existingJunctionRecords = await this.adminforth.resource(junctionResource.resourceId).list([Filters.EQ(linkedColumnNameInJunctionResource, recordId)]);
+        for(const jr of existingJunctionRecords) {
+          await this.adminforth.resource(junctionResource.resourceId).delete(jr[junctionResource.columns.find(c => c.primaryKey).name]);
+        }
+        return { ok: true };
+      });
+    }
+  }
+  
+  validateConfigAfterDiscover(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
+    // optional method where you can safely check field types after database discovery was performed
+  }
+
+  instanceUniqueRepresentation(pluginOptions: any) : string {
+    // optional method to return unique string representation of plugin instance. 
+    // Needed if plugin can have multiple instances on one resource 
+    return `many2many-${this.resourceConfig.resourceId}-${this.options.linkedResourceId}`;
+  }
+
+  setupEndpoints(server: IHttpServer) {
+    server.endpoint({
+      method: 'POST',
+      path: `/plugin/${this.pluginInstanceId}/get-junctionResource-records`,
+      handler: async ({ body }) => {
+        const { recordId, returnLabels } = body;
+        const junctionRecords = await this.adminforth.resource(junctionResource.resourceId).list([Filters.EQ(resourceColumnNameInJunctionResource, recordId)]);
+        let dataToReturn = [];
+        const junctionResourcePkColumn = junctionResource.columns.find(c => c.primaryKey);
+        const linkedResource = this.adminforth.resource(this.options.linkedResourceId);
+        for(const jr of junctionRecords) {
+          const record = await this.adminforth.resource(this.options.linkedResourceId).get([Filters.EQ(junctionResourcePkColumn.name, jr[linkedColumnNameInJunctionResource])]);
+          if ( !returnLabels ) {
+            dataToReturn.push (record[junctionResourcePkColumn.name]);
+          } else {
+            dataToReturn.push (
+              (linkedResource as any).resourceConfig.recordLabel ? { 
+                label: (linkedResource as any).resourceConfig.recordLabel(record), 
+                value: record[junctionResourcePkColumn.name]
+              } : {
+                label: record[junctionResourcePkColumn.name],
+                value: record[junctionResourcePkColumn.name]
+              }
+            );
+          }
+        }
+        return { ok: true, data: dataToReturn };
+      }
+    });
+  }
+
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@adminforth/many2many",
+  "version": "1.0.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "build": "tsc && rsync -av --exclude 'node_modules' custom dist/"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "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
+      }
+    ]
+  },
+  "devDependencies": {
+    "@types/node": "latest",
+    "typescript": "^5.7.3"
+  },
+  "dependencies": {
+    "adminforth": "^2.4.0-next.308",
+    "semantic-release-slack-bot": "^4.0.2"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+      "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include*/ 
+      "module": "node16",                                /* Specify what module code is generated. */
+      "outDir": "./dist",                                   /* Specify an output folder for all emitted files. */
+      "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules.  */
+      "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+      "strict": false,                                     /* Enable all strict type-checking options. */
+      "skipLibCheck": true,                                 /* Skip type checking all .d.ts files. */
+    },
+    "exclude": ["node_modules", "dist", "custom"],           /* Exclude files from compilation. */
+  }
+  

package/types.ts

@@ -0,0 +1,4 @@
+export interface PluginOptions {
+  linkedResourceId: string
+  dontDeleteJunctionRecords?: boolean 
+}