utomic-media/directus-extension-field-actions

Add advanced link & copy functionalities to your directus fields. Supports interfaces as well as displays.

directus-extension-field-actions's Issues

Manual installation from one folder

Check if we can provide any easier manual installation method than copying both files to each of its folder (displays/field-actions and interfaces/field-actions).

A possible solution could be the pack extemsion type but seems that this is npm only?
directus/directus#15001 (comment)

See also:
#1 (comment)

Release via npm

In order to have an easier installation we should release the extension on npm (as it's open source now)

Therefore we need to find out how we can install both extension types from one folder
#1 (comment)
directus/directus#15001 (comment)

Subtitle with display formatting in card view and searching with more than 3 characters

In card view for a collection where you have values in the subtitle or title that use this extension for display formatting. when performing a search on the collection page, as you type the items will be filtered but once the search term goes over 3 characters the subtitle and or title disappears. This does not happen if using a table view.

For us we use this extension to format the subtitle on this collection to give a copy button for the ip address.
(sorry for having to blur but its production data)
items no search query

Items search query 3 char:

Items search query 4 char:

Replace string with a specific character to show

This is a suggestion for a feature that would be nice to have.

How about adding a Replace String item in the Display?

I mainly use this extension for URL entries, as a button for the entered URL.
If you add the ability to show certain characters (like "Button" or "Click") instead of showing the URL, it would be possible to use the extension as a button in a table.
This would solve the problem of too long URLs being truncated.

Thanks as always!

Display overflow in page title

If the page title contains the display, it creates an overflow

Not applicable for relational fields?

Is this extension not applicable for any of the relational fields (M2O, O2M, M2M)?
Or even the 'Files' field?

Display: Fix Tooltip position with overflow values

If the value is longer than the shown display (e.g in table views) the tooltip might be offset, as it's in the middle of the whole value. This could be solved by adding the tooltip to the left.

the fields config is not work in defineDisplay

Hi , Thanks for the wonderful extension. we are exploring to use it heavily for our business logic implementaiton.

One question, follow the directus document display
fields — If this option is set, the display will fetch relational fields. Can either be an array of fields or a function that returns an array of fields

I set the fields in defineDisplay, but it is not work.
... export default defineDisplay({ ... fields: ['id', 'description', 'status', 'currency', 'amount'] })

FIX: the display and interface still have the default id 'custom'

This is problematically in case some other interface / display uses this. We should change to our own (correct) IDs. Once we change the ID, the interface / display needs to be re-selected in the settings --> BREAKING CHANGE!

Check if a single re-select in enough or if we also loose the display/interface settings. In this case check to provide a custom migration.

Feature Request: Allow using `PUBLIC_URL` as a base URL

Currently I use Directus in several environments. What would be really useful is if this plugin could read the PUBLIC_URL and use that as a base so regardless of environment, I could just enter a URI and link/copy buttons could be "environment aware".

For example, if my preview url is http://localhost:8055/some/page anyone, regardless of environment will get the wrong link. If instead I set the link URL as /some/page. The PUBLIC_URL could be http://staging.example.com and the full preview URL would end up http://staging.example.com/some/page.

New Option: link-Prefix

In order to link not fully link-data we'd like to support custom prefixes. E.g when a field contains a slug, we want to be able to prefix it with the base-url via settings. This is required for both: display and interface

Option to set action icon position

Add an option to select to display the action icons in front of the values. Especially for displays this is useful, as the value might not be displayed completely (e.g in Table layouts).

Open on current window

Love your extension plugin, it works well.

Just found a bug here. If we use this open link as a button on the list page, it will keep open a new tab/window regardless your link setting, is there any way we can change it behavior?

Display breaks in sidebar-title and m2m display (v1.4.0)

V1.4.0 uses display: flex on the display component. This breaks when the display is used inside a m2m or a sidebar title.

Feature request: Actions to modify data of the item/field

Hi guys,

I just discovered this extension and I really like it. I'm wondering if you have considered the option to add actions that interact with the data.

I think the Table layout is powerful to handle bulk or individual actions without the need to navigate each item one by one which could be tedious. For example, a category field could be a Dropdown instead of just a label. Other cases are true/false values than can show a Switch to quickly update the item.

There are other couple cases where I think adding the options I mentioned before could be helpful.

Cannot read properties of null (reading 'matches')

Hi,

i tried to install the extension via:
npm i directus-extension-field-actions

npm ERR! Cannot read properties of null (reading 'matches')
npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2023-04-17T12_31_37_712Z-debug-0.log

the log File contains:

0 verbose cli /usr/local/bin/node /usr/local/bin/npm 1 info using [email protected] 2 info using [email protected] 3 timing npm:load:whichnode Completed in 2ms 4 timing config:load:defaults Completed in 2ms 5 timing config:load:file:/usr/local/lib/node_modules/npm/npmrc Completed in 1ms 6 timing config:load:builtin Completed in 1ms 7 timing config:load:cli Completed in 2ms 8 timing config:load:env Completed in 1ms 9 timing config:load:file:/directus/.npmrc Completed in 0ms 10 timing config:load:project Completed in 1ms 11 timing config:load:file:/root/.npmrc Completed in 0ms 12 timing config:load:user Completed in 1ms 13 timing config:load:file:/usr/local/etc/npmrc Completed in 0ms 14 timing config:load:global Completed in 0ms 15 timing config:load:setEnvs Completed in 1ms 16 timing config:load Completed in 9ms 17 timing npm:load:configload Completed in 9ms 18 timing npm:load:mkdirpcache Completed in 1ms 19 timing npm:load:mkdirplogs Completed in 4ms 20 verbose title npm i directus-extension-field-actions 21 verbose argv "i" "directus-extension-field-actions" 22 timing npm:load:setTitle Completed in 2ms 23 timing config:load:flatten Completed in 5ms 24 timing npm:load:display Completed in 6ms 25 verbose logfile logs-max:10 dir:/root/.npm/_logs/2023-04-17T12_08_54_128Z- 26 verbose logfile /root/.npm/_logs/2023-04-17T12_08_54_128Z-debug-0.log 27 timing npm:load:logFile Completed in 8ms 28 timing npm:load:timers Completed in 0ms 29 timing npm:load:configScope Completed in 0ms 30 timing npm:load Completed in 33ms 31 timing arborist:ctor Completed in 1ms 32 silly logfile done cleaning log files 33 timing arborist:ctor Completed in 0ms 34 timing idealTree:init Completed in 6998ms 35 timing idealTree:userRequests Completed in 26ms 36 silly idealTree buildDeps 37 silly fetch manifest directus-extension-field-actions@* 38 http fetch GET 200 https://registry.npmjs.org/directus-extension-field-actions 464ms (cache miss) 39 silly fetch manifest @ngneat/[email protected] 40 http fetch GET 200 https://registry.npmjs.org/@ngneat%2ffalso 929ms (cache miss) 41 silly fetch manifest @types/[email protected] 42 http fetch GET 200 https://registry.npmjs.org/@types%2fasync 1440ms (cache miss) 43 silly fetch manifest @types/[email protected] 44 http fetch GET 200 https://registry.npmjs.org/@types%2fbusboy 83ms (cache miss) 45 silly fetch manifest @types/[email protected] 46 http fetch GET 200 https://registry.npmjs.org/@types%2fbytes 70ms (cache miss) 47 silly fetch manifest @types/[email protected] 48 http fetch GET 200 https://registry.npmjs.org/@types%2fcookie-parser 49ms (cache miss) 49 silly fetch manifest @types/[email protected] 50 http fetch GET 200 https://registry.npmjs.org/@types%2fcors 50ms (cache miss) 51 silly fetch manifest @types/[email protected] 52 http fetch GET 200 https://registry.npmjs.org/@types%2fdeep-diff 1430ms (cache miss) 53 silly fetch manifest @types/[email protected] 54 http fetch GET 200 https://registry.npmjs.org/@types%2fdestroy 57ms (cache miss) 55 silly fetch manifest @types/[email protected] 56 http fetch GET 200 https://registry.npmjs.org/@types%2fencodeurl 68ms (cache miss) 57 silly fetch manifest @types/[email protected] 58 http fetch GET 200 https://registry.npmjs.org/@types%2fexif-reader 1377ms (cache miss) 59 silly fetch manifest @types/[email protected] 60 http fetch GET 200 https://registry.npmjs.org/@types%2fexpress 54ms (cache miss) 61 silly fetch manifest @types/[email protected] 62 http fetch GET 200 https://registry.npmjs.org/@types%2fexpress-serve-static-core 54ms (cache miss) 63 silly fetch manifest @types/[email protected] 64 http fetch GET 200 https://registry.npmjs.org/@types%2ffast-redact 1415ms (cache miss) 65 silly fetch manifest @types/[email protected] 66 http fetch GET 200 https://registry.npmjs.org/@types%2fflat 53ms (cache miss) 67 silly fetch manifest @types/[email protected] 68 http fetch GET 200 https://registry.npmjs.org/@types%2ffs-extra 82ms (cache miss) 69 silly fetch manifest @types/[email protected] 70 http fetch GET 200 https://registry.npmjs.org/@types%2finquirer 1370ms (cache miss) 71 silly fetch manifest @types/[email protected] 72 http fetch GET 200 https://registry.npmjs.org/@types%2fjs-yaml 69ms (cache miss) 73 silly fetch manifest @types/[email protected] 74 http fetch GET 200 https://registry.npmjs.org/@types%2fjson2csv 75ms (cache miss) 75 silly fetch manifest @types/[email protected] 76 http fetch GET 200 https://registry.npmjs.org/@types%2fjsonwebtoken 43ms (cache miss) 77 silly fetch manifest @types/[email protected] 78 http fetch GET 200 https://registry.npmjs.org/@types%2fkeyv 64ms (cache miss) 79 silly fetch manifest @types/[email protected] 80 http fetch GET 200 https://registry.npmjs.org/@types%2fldapjs 1438ms (cache miss) 81 silly fetch manifest @types/[email protected] 82 http fetch GET 200 https://registry.npmjs.org/@types%2flodash 65ms (cache miss) 83 silly fetch manifest @types/[email protected] 84 http fetch GET 200 https://registry.npmjs.org/@types%2fmarked 53ms (cache miss) 85 silly fetch manifest @types/[email protected] 86 http fetch GET 200 https://registry.npmjs.org/@types%2fmime-types 58ms (cache miss) 87 silly fetch manifest @types/[email protected] 88 http fetch GET 200 https://registry.npmjs.org/@types%2fms 51ms (cache miss) 89 silly fetch manifest @types/[email protected] 90 http fetch GET 200 https://registry.npmjs.org/@types%2fnode 337ms (cache miss) 91 silly fetch manifest @types/[email protected] 92 http fetch GET 200 https://registry.npmjs.org/@types%2fnode-cron 71ms (cache miss) 93 silly fetch manifest @types/[email protected] 94 http fetch GET 200 https://registry.npmjs.org/@types%2fnodemailer 52ms (cache miss) 95 silly fetch manifest @types/[email protected] 96 http fetch GET 200 https://registry.npmjs.org/@types%2fobject-hash 65ms (cache miss) 97 silly fetch manifest @types/[email protected] 98 http fetch GET 200 https://registry.npmjs.org/@types%2fqs 69ms (cache miss) 99 silly fetch manifest @types/[email protected] 100 http fetch GET 200 https://registry.npmjs.org/@types%2fsanitize-html 914ms (cache miss) 101 silly fetch manifest @types/[email protected] 102 http fetch GET 200 https://registry.npmjs.org/@types%2fsharp 77ms (cache miss) 103 silly fetch manifest @types/[email protected] 104 http fetch GET 200 https://registry.npmjs.org/@types%2fstream-json 880ms (cache miss) 105 silly fetch manifest @types/[email protected] 106 http fetch GET 200 https://registry.npmjs.org/@types%2fuuid 42ms (cache miss) 107 silly fetch manifest @types/[email protected] 108 http fetch GET 200 https://registry.npmjs.org/@types%2fuuid-validate 1458ms (cache miss) 109 silly fetch manifest @types/[email protected] 110 http fetch GET 200 https://registry.npmjs.org/@types%2fwellknown 1445ms (cache miss) 111 silly fetch manifest @vitest/[email protected] 112 http fetch GET 200 https://registry.npmjs.org/@vitest%2fcoverage-c8 117ms (cache miss) 113 silly fetch manifest [email protected] 114 http fetch GET 200 https://registry.npmjs.org/vitest 62ms (cache miss) 115 silly fetch manifest @edge-runtime/vm@* 116 http fetch GET 200 https://registry.npmjs.org/@edge-runtime%2fvm 93ms (cache miss) 117 silly fetch manifest @vitest/browser@* 118 http fetch GET 200 https://registry.npmjs.org/@vitest%2fbrowser 109ms (cache miss) 119 silly fetch manifest vitest@>=0.29.4 120 silly fetch manifest @vitest/ui@* 121 http fetch GET 200 https://registry.npmjs.org/@vitest%2fui 110ms (cache miss) 122 silly fetch manifest happy-dom@* 123 http fetch GET 200 https://registry.npmjs.org/happy-dom 57ms (cache miss) 124 silly fetch manifest jsdom@* 125 http fetch GET 200 https://registry.npmjs.org/jsdom 47ms (cache miss) 126 silly fetch manifest canvas@^2.5.0 127 http fetch GET 200 https://registry.npmjs.org/canvas 39ms (cache miss) 128 silly fetch manifest playwright@* 129 http fetch GET 200 https://registry.npmjs.org/playwright 208ms (cache miss) 130 silly fetch manifest safaridriver@* 131 http fetch GET 200 https://registry.npmjs.org/safaridriver 741ms (cache miss) 132 silly fetch manifest webdriverio@* 133 http fetch GET 200 https://registry.npmjs.org/webdriverio 49ms (cache miss) 134 silly fetch manifest [email protected] 135 http fetch GET 200 https://registry.npmjs.org/copyfiles 72ms (cache miss) 136 silly fetch manifest [email protected] 137 http fetch GET 200 https://registry.npmjs.org/form-data 41ms (cache miss) 138 silly fetch manifest [email protected] 139 http fetch GET 200 https://registry.npmjs.org/knex-mock-client 743ms (cache miss) 140 silly fetch manifest [email protected] 141 http fetch GET 200 https://registry.npmjs.org/knex 47ms (cache miss) 142 silly fetch manifest [email protected] 143 http fetch GET 200 https://registry.npmjs.org/ts-node 43ms (cache miss) 144 silly fetch manifest @swc/core@>=1.2.50 145 http fetch GET 200 https://registry.npmjs.org/@swc%2fcore 92ms (cache miss) 146 silly fetch manifest @swc/helpers@^0.5.0 147 http fetch GET 200 https://registry.npmjs.org/@swc%2fhelpers 61ms (cache miss) 148 silly fetch manifest @swc/wasm@>=1.2.50 149 http fetch GET 200 https://registry.npmjs.org/@swc%2fwasm 65ms (cache miss) 150 silly fetch manifest [email protected] 151 http fetch GET 200 https://registry.npmjs.org/typescript 358ms (cache miss) 152 silly fetch manifest [email protected] 153 http fetch GET 200 https://registry.npmjs.org/ts-node-dev 35ms (cache miss) 154 silly fetch manifest node-notifier@* 155 http fetch GET 200 https://registry.npmjs.org/node-notifier 43ms (cache miss) 156 silly placeDep ROOT @ngneat/[email protected] OK for: [email protected] want: 6.4.0 157 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 3.2.18 158 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 1.5.0 159 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 3.1.1 160 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 1.4.3 161 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 2.8.13 162 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 1.0.2 163 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 1.0.0 164 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 1.0.0 165 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 1.0.0 166 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 4.17.17 167 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 4.17.33 168 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 3.0.2 169 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 5.0.2 170 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 11.0.1 171 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 8.2.6 172 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 4.0.5 173 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 5.0.3 174 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 9.0.1 175 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 3.1.4 176 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 2.2.5 177 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 4.14.191 178 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 4.0.8 179 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 2.1.1 180 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 0.7.31 181 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 18.15.3 182 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 3.0.7 183 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 6.4.7 184 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 3.0.2 185 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 6.9.7 186 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 2.9.0 187 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 0.31.1 188 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 1.7.3 189 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 9.0.1 190 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 0.0.1 191 silly placeDep ROOT @types/[email protected] OK for: [email protected] want: 0.5.4 192 silly placeDep ROOT @vitest/[email protected] OK for: [email protected] want: 0.29.3 193 silly placeDep ROOT [email protected] OK for: @vitest/[email protected] want: >=0.29.0 <1 194 silly placeDep ROOT [email protected] OK for: [email protected] want: 2.4.1 195 silly placeDep ROOT [email protected] OK for: [email protected] want: * 196 silly placeDep ROOT [email protected] OK for: [email protected] want: 4.0.0 197 timing idealTree Completed in 27956ms 198 timing command:i Completed in 27972ms 199 verbose stack TypeError: Cannot read properties of null (reading 'matches') 199 verbose stack at Link.matches (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/node.js:1119:41) 199 verbose stack at Link.canDedupe (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/node.js:1073:15) 199 verbose stack at PlaceDep.pruneDedupable (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/place-dep.js:426:14) 199 verbose stack at new PlaceDep (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/place-dep.js:278:14) 199 verbose stack at /usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:943:31 199 verbose stack at Array.map (<anonymous>) 199 verbose stack at [buildDepStep] (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:943:8) 199 verbose stack at async Arborist.buildIdealTree (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:207:7) 199 verbose stack at async Promise.all (index 1) 199 verbose stack at async Arborist.reify (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:159:5) 200 verbose cwd /directus/extensions 201 verbose Linux 5.10.0-21-amd64 202 verbose node v18.15.0 203 verbose npm v9.5.0 204 error Cannot read properties of null (reading 'matches') 205 verbose exit 1 206 timing npm Completed in 28099ms 207 verbose unfinished npm timer reify 1681733334246 208 verbose unfinished npm timer reify:loadTrees 1681733334249 209 verbose unfinished npm timer idealTree:buildDeps 1681733341275 210 verbose unfinished npm timer idealTree:#root 1681733341276 211 verbose code 1 212 error A complete log of this run can be found in: 212 error /root/.npm/_logs/2023-04-17T12_08_54_128Z-debug-0.log

can anybody help me with this message?

thank you

Franz

problem in One to Many table view

When the display method is enabled in One to Many, the display is displayed only as ...

CSS around the field not showing.

Dear utomic-media

Thank you for the extension.
The extension is enabled and I even manually added the CSS from .vue file in the project settings field, but the field is not highlighted

.action-interface {
	display: flex;
	flex-direction: row;
	align-items: center;
	.v-button {
		margin-left: 1rem;
	}
}

Isn't it included on the index.js file? What am I missing? Others might miss it also, help is appreciated.

Thanks!

how to use the extension

Great extension,

Exactly what I need

I used docker-compose to install it

But I can not find anything new in the "Interface" nor "Display"

Directus 10.8.2

Thanks

Action interface: changing value throws mixes input with event

When changing a input value it mixes the event with the value:
[object InputEvent]

Add setting: Open link in current / new tab

Add a setting to define weather a link should be opened in the current or in a new tab.

Add a way (or default behaviour) to open link in a new window

Hello,

There is a difference in the behaviour of the "open link" button and the "open link" action when clicking the value.

The button has a target="_blank" attribute but the link on the value does not. Also, the button behaves correctly regarding the #26 issue.

I would like to have the link open in a new window. I'd be fine with an option allowing both cases.

Thanks in advance, please tell if you'd like me to open a PR.

Dark mode compatability

The display background variable is not fully dark-mode compatible.

Click Action Redirection Problem

Click Action is set to Open Link, and when clicked, it is not redirected directly to the link, but is redirected after accessing the item page.

CleanShot.2023-03-21.at.23.34.02-converted_1.mp4

Settings: Group Copy and link-actions in a collapsible (closed by default)

As the settings get's unstructured with two many options it would be great to group the copy- and link settings each into a collapsible interface. These should be collapsed by default.

The idea is to wrap these settings in a collapsible section (one for copy and on for link):

directus-extension-field-actions/src/shared/options/sharedConfigOptions.ts

Line 5 in 732c3e7

const options: DisplayConfig['options'] = [

This should use the default group-detail interface:
https://github.com/directus/directus/tree/main/app/src/interfaces/group-detail

But not sure right now if the define-functions allow to use those wrapper-alias fields. Would need some test / research.

Disable field actions if value is null

Currently the field actions are always enabled. This should automatically be computed based on the value

prefix aren't indipendently for the copy and link button

when a prefix is defined for the Link option, this is also reflected in the "copy" option, whether in "edit" or "display" mode