V8-archive: Getting started with interfaces

Created on 8 Dec 2018 · 3Comments · Source: directus/v8-archive

Hey,
im interested in creating my own interfaces but there are some questions still unawnsered.

for example in the text-input interface, you use v-input instead of a default input and I cant find where v-input is defined.
when using the v-input, the value that gets returned on the "updateValue" event is the raw value which is not when you use the default input. Here you get the whole event and have to access the value by value.target.value first.
when saving, using the default html value element, the value in it gets reset to the one, that was entered the event before but it saves correctly.

I do not realy understand why these things are how they are and would be happy if someone can explain it.

question

Source

Nitwel

👍1

Most helpful comment

for example in the text-input interface, you use v-input instead of a default input and I cant find where v-input is defined.

v-input in this case is a global component in the application itself. The interface is re-using it so it doesn't have to re-invent the wheel. That being said, I'm not too happy with the state of the global components right now. They're not well optimized and don't work with every event.

when using the v-input, the value that gets returned on the "updateValue" event is the raw value which is not when you use the default input. Here you get the whole event and have to access the value by value.target.value first.

Here you touch on exactly one of the main issues I have with the current global components. Their @update and @input events return just the value, while the other events either don't work or are passed on as native events. I want to implement a new set of global components following the Vue Styleguide (app/962), using this pattern of making all the native events available as well: https://www.youtube.com/watch?v=DmKOhewRRHs&t=2308s. @rachelsun59 is figuring out what goes into the core set of components after which I'll be porting over the core set of components. When the new base components are created, I'll be making documentation for them as well.

when saving, using the default html value element, the value in it gets reset to the one, that was entered the event before but it saves correctly.

This is a bug. The interfaces get passed in the saved values overwritten by the edits the user made when applicable. When saving, the edits get send to the server and the edits are being cleared. This same edits object is checked to show the "Are you sure you want to leave? Unsaved edits will be cleared" message. By fixing this one bug in the app, the interfaces will work as expected.

I'll see if I can get rid of that bug today, cause it has been bothering me too :/

TL;DR

You can use all the global components as defined in https://github.com/directus/app/blob/master/src/globals.js. However, these are in need of some heavy refactoring and aren't documented properly, so use with caution.

I can't promise there won't be breaking changes in these (currently existing) global components.. Once they had this big refactor, I will start considering them to be external facing components that _have_ to be backwards compatible.

rijkvanzanten on 9 Dec 2018

👍2

All 3 comments

for example in the text-input interface, you use v-input instead of a default input and I cant find where v-input is defined.

when using the v-input, the value that gets returned on the "updateValue" event is the raw value which is not when you use the default input. Here you get the whole event and have to access the value by value.target.value first.