Display non-editable fields normally

[JoshTheDerf]

We'd love to adopt this extension for some use-cases, especially some of our upcoming plans where inline editing will speed things up a great deal.

While testing this extension, we noticed that only fields that can be edited are allowed to be displayed in the table. Relational/Nested fields are not displayed.

We have a fairly complex data model that has multiple layers of nesting for various purposes. Even though we might not need to edit nested information, we do need to be able to see that nested information in the table layout.

Would it be possible and reasonable to:

• Allow adding all fields, including relational/nested ones that are currently supported by the table layout.
• Use native displays for fields not currently supported for editing.
• Skip over fields that are not currently supported for editing when navigating around the layout with the keyboard.

[formfcw]

Thanks for your request!

Basically, it was always my intention to only make fields available that could also be edited in the item/detail view. Therefore, you will find the restrictions in the code below for fields that are is_primary_key, hidden, or readonly.

directus-extension-editable-layout/src/index.ts

Lines 554 to 562 in 6836ce0

	return (
	field &&
	!field.meta?.special?.includes("no-data") &&
	!field.schema?.is_primary_key &&
	!field.meta?.hidden &&
	!field.meta?.readonly &&
	!flexibleEditor &&
	!relational
	);

Off topic: The reason why Flexible Editor is not allowed is that it depends on a separate M2A field which makes editing here quite complex at the moment. And the reason why relational fields are not allowed at the moment is that they have a problem with the display at the moment.

I think it is no big deal to allow is_primary_key/hidden/readonly fields and display them as read-only. So you need to implement a condition to determine if it is editable or not. If it is editable, render the <editable-cell /> component, otherwise just render <render-display /> — therefore, you can copy lines 99–103.

directus-extension-editable-layout/src/layout.vue

Lines 94 to 113 in 6836ce0

	<template v-for="header, index in tableHeaders" :key="header.value" #[`item.${header.value}`]="{ item }">
	<editable-cell :column="index" @leaveCell="autoSaveEdits" :item="item" :field-key="header.value"
	:field-edits="edits[item[primaryKeyField?.field]]?.[header.value]"
	:interface-id="header.field?.meta?.interface ?? 'input'" :inline="isInterfaceInline(header.field)">
	<template #display="{ displayItem }">
	<render-display :value="getFromAliasedItem(displayItem, header.value)"
	:display="header.field.display" :options="header.field.displayOptions"
	:interface="header.field.interface" :interface-options="header.field.interfaceOptions"
	:type="header.field.type" :collection="header.field.collection"
	:field="header.field.field" />
	</template>
	<template #interface>
	<v-form :fields="[header.field]" :initial-values="item"
	v-model="editsWritable[item[primaryKeyField?.field]]" :loading="loading"
	:primary-key="item[primaryKeyField?.field]" autofocus :show-validation-errors="false"
	:show-no-visible-fields="false" :raw-editor-enabled="false" />
	</template>
	</editable-cell>
	</template>

In the Add field dropdown it would be nice if you could indicate, that these fields are read-only by simply appending (Readonly) to that field name — therefore use the $t:readonly translation.

I think that should do it. I am really happy to see a PR for it.

For now, I would recommend keeping relation fields excluded. If you still want to work on it, please do so in a separate PR.