diff --git a/composer.json b/composer.json index 22726d8e..9461bc7c 100644 --- a/composer.json +++ b/composer.json @@ -21,8 +21,8 @@ "php": "^7.3|^8.0", "ext-json": "*", "laravel/framework": "^8.0|^9.0|^10.0|^11.0", - "laravel/nova": "^4.0", - "nova-kit/nova-packages-tool": "^1.3.1" + "laravel/nova": "^4.34", + "nova-kit/nova-packages-tool": "^1.16" }, "autoload": { "psr-4": { diff --git a/resources/js/components/FormGroup.vue b/resources/js/components/FormGroup.vue index cab6ad07..a25dc5c6 100644 --- a/resources/js/components/FormGroup.vue +++ b/resources/js/components/FormGroup.vue @@ -25,7 +25,7 @@

#{{ index + 1 }} - {{ group.title }} + {{ group.title }}: {{ truncate(collapsedPreview, 30) }}

@@ -85,6 +85,7 @@ :mode="mode" :show-help-text="item.helpText != null" :class="{ 'remove-bottom-border': index == group.fields.length - 1 }" + @change="handleFieldChanged($event, item)" />
@@ -113,10 +114,21 @@ export default { removeMessage: false, collapsed: this.group.collapsed, readonly: this.group.readonly, + collapsedPreview: null, }; }, computed: { + collapsedPreviewAttribute() { + let collapsedPreviewAttribute = null; + for (const [key, layout] of Object.entries(this.field.layouts)) { + if (layout.name === this.group.name) { + collapsedPreviewAttribute = layout.collapsedPreviewAttribute; + } + } + + return collapsedPreviewAttribute; + }, titleStyle() { let classes = ['border-t', 'border-r', 'border-l', 'border-gray-200', 'dark:border-gray-700', 'rounded-t-lg']; @@ -142,7 +154,23 @@ export default { } }, + mounted() { + Object.values(this.group.fields).forEach(field => { + let attribute = field.attribute.split('__').pop(); + if (this.collapsedPreviewAttribute && attribute === this.collapsedPreviewAttribute) { + this.collapsedPreview = field.value; + } + }); + }, + methods: { + truncate(value, length) { + if (value.length > length) { + return value.substring(0, length) + "..."; + } else { + return value; + } + }, /** * Move this group up */ @@ -187,7 +215,13 @@ export default { */ collapse() { this.collapsed = true; - } + }, + + handleFieldChanged(event, item) { + if (item.attribute.split('__').pop() === this.collapsedPreviewAttribute) { + this.collapsedPreview = event.target.value; + } + }, }, } diff --git a/src/Layouts/Layout.php b/src/Layouts/Layout.php index f324f9b8..18a4f1ff 100644 --- a/src/Layouts/Layout.php +++ b/src/Layouts/Layout.php @@ -66,6 +66,13 @@ class Layout implements LayoutInterface, JsonSerializable, ArrayAccess, Arrayabl */ protected $fields; + /** + * The layout's preview attribute + * + * @var string + */ + protected $collapsedPreviewAttribute; + /** * The attributes that should be cast to native types. * @@ -181,6 +188,16 @@ public function name() return $this->name; } + /** + * Retrieve the layout's collapsed preview attribute + * + * @return string + */ + public function collapsedPreviewAttribute() + { + return $this->collapsedPreviewAttribute; + } + /** * Retrieve the layout's title * @@ -686,6 +703,7 @@ public function jsonSerialize() 'name' => $this->name, 'title' => $this->title, 'fields' => $this->fields->jsonSerialize(), + 'collapsedPreviewAttribute' => $this->collapsedPreviewAttribute(), 'limit' => $this->limit, ]; }