Skip to content

Related items module #191

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 37 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
37e482d
initial upload
timio23 Apr 26, 2025
a935ad3
Merge branch 'directus-labs:main' into related-items-module
timio23 Apr 26, 2025
9ad0bff
Update pnpm-lock.yaml
timio23 Apr 26, 2025
01bb86f
added API reference to README
timio23 Apr 26, 2025
c52adec
Merge branch 'main' into related-items-module
ukmadlz Apr 28, 2025
7383cd1
moved admin check to index
timio23 May 29, 2025
0389ccc
removed comments
timio23 May 29, 2025
593d392
added keywords and authors
timio23 May 29, 2025
7c4f324
updated Directus minimum version
timio23 May 29, 2025
e1dd62f
hide Label on interface
timio23 May 29, 2025
8d36e8a
settings field full width
timio23 May 29, 2025
081f6bf
removed special parameter
timio23 May 29, 2025
307aaab
datetime improvements on mobile
timio23 May 29, 2025
d1182ea
graceful errors for hook
timio23 May 31, 2025
2e08ae8
added support for junction tables
timio23 May 31, 2025
54fd668
notification on item update and stop self editing
timio23 May 31, 2025
56498a6
special parameters required
timio23 May 31, 2025
f1b73db
eslint changes
timio23 May 31, 2025
1ddabc9
Merge branch 'related-items-module' of https://github.com/timio23/ext…
timio23 May 31, 2025
1ec0c25
Merge branch 'main' into related-items-module
timio23 May 31, 2025
0c5d22e
moved author and contributors - linting
timio23 May 31, 2025
76d0e1f
Merge branch 'related-items-module' of https://github.com/timio23/ext…
timio23 May 31, 2025
80efe62
another linting error
timio23 May 31, 2025
8f854e9
try catch on endpoint
timio23 May 31, 2025
e9e66e3
Improve icon color
timio23 Jun 3, 2025
5a0847a
Improve v-chip hover styling
timio23 Jun 3, 2025
26457df
nullified related items ID bug fix
timio23 Jun 3, 2025
4d2234b
Added label to template
timio23 Jun 3, 2025
c182749
Show notice when creating new item
timio23 Jun 3, 2025
959293c
Make label persistant
timio23 Jun 3, 2025
000bdc6
fixed text alignment
timio23 Jun 3, 2025
af449a5
remove duplicate items
timio23 Jun 5, 2025
a88c97f
hydrate fields after saving settings
timio23 Jun 6, 2025
38aa2c4
added systen-data dependancy
timio23 Jun 6, 2025
996afab
linting fixes
timio23 Jun 6, 2025
39d324c
Update pnpm-lock.yaml
timio23 Jun 6, 2025
33f58f5
Merge branch 'main' into related-items-module
timio23 Jun 30, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 80 additions & 0 deletions packages/related-items-bundle/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
# Related Items Bundle

Find all collections, fields or items related to a collection even if it doesn't include the reverse fields from the supported relationships: Many to One (m2o), One to Many (o2m), Many to Many (m2m) or Many to Any (m2a).

![Related Items Bundle](https://raw.githubusercontent.com/directus-labs/extensions/main/packages/related-items-bundle/docs/related-items-bundle.jpg)

You can include system collections such as Users and Files and benefit from seeing all the relations to other collections. For example, when viewing a file in the File Library, you will see what collections and items reference the file and know what will be impacted if it is edited or deleted.

## Usage

Once installed and configured, visit an item for an included collection and scroll to the bottom of the page. By default, all related items are returned with pagination over 10 records. Use the collection filters at the top to easily see the related items in that collection.

Click on an item to open the draw for more information or make changes to that item. However, some system tables are not supported.

## Requirements

- Directus 11.1.2+
- Admin user to initialize module

## Installation

Refer to the Official Guide for details on installing the extension from the Marketplace or manually.

## How to configure this module

1. Using an Admin user, go to the project settings `/admin/settings/project` and scroll to the bottom
2. Click on the field labelled "Related Items Collections"
3. Tick the collections to include from the dropdown field
4. Save changes

When opening the project settings for the first time, the module will automatically add the new system field at the bottom of the page. Any selection of the collections will create a new alias field within that collection's Data model. The new interface can be repositioned or customized but any changes to these fields will be lost if you choose to exclude the collection in future. Admin permissions are required during these steps.

## Permissions

This extension uses the current user's policy/role permissions and will only show the permitted data. Please refer to your Access Policies to ensure your users have required access.

## API Reference

This bundle contains an endpoint extension. The data can be queried using the following endpoint:

```
GET /related-items/<collection>/<item_id>
```

The response will be an array of related collections and for each one, a secondary array of any related items from that collection. For example:

```
{
"collection": "directus_files",
"fields": [
"directus_files_id.id",
"directus_files_id.title",
"directus_files_id.type"
],
"relation": "m2m",
"translations": null,
"field": "article_id",
"junction_field": "directus_files_id",
"primary_key": "id",
"template": "{{ title }}",
"items": [
{
"directus_files_id": {
"id": "x0x1234x-5xx6-7890-x123-xxx4xx56789x",
"title": "Annual Leave Policy",
"type": "image/jpeg"
}
},
{
"directus_files_id": {
"id": "x9x8765x-5xx6-7890-x123-xxx4xx56789x",
"title": "Brand Guidelines",
"type": "image/png"
}
}
]
}
```

_Note: The fields and primary key can be used as context when processing the items or rendering an output._
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
81 changes: 81 additions & 0 deletions packages/related-items-bundle/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
{
"name": "@directus-labs/related-items-bundle",
"type": "module",
"version": "1.0.0",
"description": "Show all related items across selected collections.",
"author": "Directus Labs",
"contributors": [
{
"name": "Tim Butterfield",
"email": "[email protected]",
"url": "https://www.npmjs.com/~timio23"
}
],
"license": "MIT",
"keywords": [
"directus",
"directus-extension",
"directus-extension-bundle",
"relational",
"m2o",
"m2m",
"o2m",
"m2a"
],
"icon": "extension",
"files": [
"dist"
],
"directus:extension": {
"type": "bundle",
"path": {
"app": "dist/app.js",
"api": "dist/api.js"
},
"entries": [
{
"type": "module",
"name": "related-items-module",
"source": "src/related-items-module/index.ts"
},
{
"type": "endpoint",
"name": "related-items-endpoint",
"source": "src/related-items-endpoint/index.ts"
},
{
"type": "interface",
"name": "related-items-interface",
"source": "src/related-items-interface/index.ts"
},
{
"type": "hook",
"name": "related-items-hook",
"source": "src/related-items-hook/index.ts"
}
],
"host": "^11.1.2"
},
"scripts": {
"build": "directus-extension build",
"dev": "directus-extension build -w --no-minify",
"link": "directus-extension link",
"add": "directus-extension add",
"validate": "directus-extension validate"
},
"dependencies": {
"@directus/eslint-config": "^0.1.0",
"@directus/format-title": "^12.0.1",
"@directus/system-data": "^3.1.0",
"vue-i18n": "^9.14.0",
"vue-router": "^4.4.5"
},
"devDependencies": {
"@directus/constants": "^13.0.0",
"@directus/extensions-sdk": "^13.0.1",
"@directus/types": "^13.0.0",
"@directus/utils": "^13.0.0",
"typescript": "^5.6.3",
"vue": "^3.5.13"
}
}
Loading
Loading