From 25d49675d81f9e19af7b66fedea64c1b38d5d413 Mon Sep 17 00:00:00 2001
From: Fede Isas <federicoisas@gmail.com>
Date: Wed, 12 Oct 2022 22:19:47 -0300
Subject: [PATCH 1/6] Collapsed Preview Attribute

---
 resources/js/components/FormGroup.vue | 41 +++++++++++++++++++++++++--
 src/Layouts/Layout.php                | 18 ++++++++++++
 2 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/FormGroup.vue b/resources/js/components/FormGroup.vue
index cab6ad07..12e55faa 100644
--- a/resources/js/components/FormGroup.vue
+++ b/resources/js/components/FormGroup.vue
@@ -25,7 +25,7 @@
 
                     <p class="text-80 grow px-4">
                       <span class="mr-3 font-semibold">#{{ index + 1 }}</span>
-                      {{ group.title }}
+                      {{ group.title }}<span v-if="collapsedPreview">: <span class="mr-3 font-semibold">{{ collapsedPreview }}</span></span>
                     </p>
 
                     <div class="flex" v-if="!readonly">
@@ -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)"
                 />
             </div>
         </div>
@@ -94,6 +95,7 @@
 <script>
 import BehavesAsPanel from 'nova-mixins/BehavesAsPanel';
 import { mapProps } from 'laravel-nova';
+import { ref, reactive, computed } from 'vue'
 
 export default {
     mixins: [BehavesAsPanel],
@@ -108,6 +110,28 @@ export default {
 
     emits: ['move-up', 'move-down', 'remove'],
 
+    setup(props) {
+        const collapsedPreview = ref("")
+
+        let collapsedPreviewAttribute = null;
+        for (const [key, layout] of Object.entries(props.field.layouts)) {
+            if (layout.name === props.group.name) {
+                collapsedPreviewAttribute = layout.collapsedPreviewAttribute;
+            }
+        }
+
+        Object.values(props.group.fields).forEach(field => {
+            let attribute = field.attribute.split('__').pop();
+            if (collapsedPreviewAttribute && attribute === collapsedPreviewAttribute) {
+                collapsedPreview.value = field.value;
+            }
+        });
+
+        return {
+            collapsedPreview,
+        };
+    },
+
     data() {
         return {
             removeMessage: false,
@@ -187,7 +211,20 @@ export default {
          */
         collapse() {
             this.collapsed = true;
-        }
+        },
+
+        handleFieldChanged(event, item) {
+            let collapsedPreviewAttribute = null;
+            for (const [key, layout] of Object.entries(this.field.layouts)) {
+                if (layout.name === this.group.name) {
+                    collapsedPreviewAttribute = layout.collapsedPreviewAttribute;
+                }
+            }
+
+            if (item.attribute.split('__').pop() === collapsedPreviewAttribute) {
+                this.collapsedPreview = event.target.value;
+            }
+        },
     },
 }
 </script>
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,
         ];
     }

From 3dbe79224b9a0f4ab4a987b6b86aceb04f916db8 Mon Sep 17 00:00:00 2001
From: Fede Isas <federicoisas@gmail.com>
Date: Wed, 12 Oct 2022 22:22:55 -0300
Subject: [PATCH 2/6] cleanup

---
 resources/js/components/FormGroup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/FormGroup.vue b/resources/js/components/FormGroup.vue
index 12e55faa..ba809743 100644
--- a/resources/js/components/FormGroup.vue
+++ b/resources/js/components/FormGroup.vue
@@ -95,7 +95,7 @@
 <script>
 import BehavesAsPanel from 'nova-mixins/BehavesAsPanel';
 import { mapProps } from 'laravel-nova';
-import { ref, reactive, computed } from 'vue'
+import { ref } from 'vue'
 
 export default {
     mixins: [BehavesAsPanel],

From 0815db030e00a06f97ada6313fcd04217e750d61 Mon Sep 17 00:00:00 2001
From: Fede Isas <federicoisas@gmail.com>
Date: Wed, 12 Oct 2022 22:42:20 -0300
Subject: [PATCH 3/6] cleanup

---
 resources/js/components/FormGroup.vue | 52 +++++++++++----------------
 1 file changed, 21 insertions(+), 31 deletions(-)

diff --git a/resources/js/components/FormGroup.vue b/resources/js/components/FormGroup.vue
index ba809743..f0bb105c 100644
--- a/resources/js/components/FormGroup.vue
+++ b/resources/js/components/FormGroup.vue
@@ -95,7 +95,6 @@
 <script>
 import BehavesAsPanel from 'nova-mixins/BehavesAsPanel';
 import { mapProps } from 'laravel-nova';
-import { ref } from 'vue'
 
 export default {
     mixins: [BehavesAsPanel],
@@ -110,37 +109,26 @@ export default {
 
     emits: ['move-up', 'move-down', 'remove'],
 
-    setup(props) {
-        const collapsedPreview = ref("")
-
-        let collapsedPreviewAttribute = null;
-        for (const [key, layout] of Object.entries(props.field.layouts)) {
-            if (layout.name === props.group.name) {
-                collapsedPreviewAttribute = layout.collapsedPreviewAttribute;
-            }
-        }
-
-        Object.values(props.group.fields).forEach(field => {
-            let attribute = field.attribute.split('__').pop();
-            if (collapsedPreviewAttribute && attribute === collapsedPreviewAttribute) {
-                collapsedPreview.value = field.value;
-            }
-        });
-
-        return {
-            collapsedPreview,
-        };
-    },
-
     data() {
         return {
             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'];
 
@@ -166,6 +154,15 @@ 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: {
         /**
          * Move this group up
@@ -214,14 +211,7 @@ export default {
         },
 
         handleFieldChanged(event, item) {
-            let collapsedPreviewAttribute = null;
-            for (const [key, layout] of Object.entries(this.field.layouts)) {
-                if (layout.name === this.group.name) {
-                    collapsedPreviewAttribute = layout.collapsedPreviewAttribute;
-                }
-            }
-
-            if (item.attribute.split('__').pop() === collapsedPreviewAttribute) {
+            if (item.attribute.split('__').pop() === this.collapsedPreviewAttribute) {
                 this.collapsedPreview = event.target.value;
             }
         },

From 237a5af8d60f92c8f8aec7f64d8ac873e99e7760 Mon Sep 17 00:00:00 2001
From: Fede Isas <federicoisas@gmail.com>
Date: Wed, 12 Oct 2022 22:54:15 -0300
Subject: [PATCH 4/6] Truncate collapsedPreview to 30 characters

---
 resources/js/components/FormGroup.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/FormGroup.vue b/resources/js/components/FormGroup.vue
index f0bb105c..805f1e3a 100644
--- a/resources/js/components/FormGroup.vue
+++ b/resources/js/components/FormGroup.vue
@@ -25,7 +25,7 @@
 
                     <p class="text-80 grow px-4">
                       <span class="mr-3 font-semibold">#{{ index + 1 }}</span>
-                      {{ group.title }}<span v-if="collapsedPreview">: <span class="mr-3 font-semibold">{{ collapsedPreview }}</span></span>
+                      {{ group.title }}<span v-if="collapsedPreview">: <span class="mr-3 font-semibold">{{ truncate(collapsedPreview, 30) }}</span></span>
                     </p>
 
                     <div class="flex" v-if="!readonly">
@@ -164,6 +164,13 @@ export default {
     },
 
     methods: {
+        truncate(value, length) {
+            if (value.length > length) {
+                return value.substring(0, length) + "...";
+            } else {
+                return value;
+            }
+        },
         /**
          * Move this group up
          */

From e639b4e1bf687bd12506749b948fec6db9b027bb Mon Sep 17 00:00:00 2001
From: Fede Isas <federicoisas@gmail.com>
Date: Thu, 13 Oct 2022 12:31:52 -0300
Subject: [PATCH 5/6] show collapsedPreview when not null to allow boolean
 values

---
 resources/js/components/FormGroup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/FormGroup.vue b/resources/js/components/FormGroup.vue
index 805f1e3a..a25dc5c6 100644
--- a/resources/js/components/FormGroup.vue
+++ b/resources/js/components/FormGroup.vue
@@ -25,7 +25,7 @@
 
                     <p class="text-80 grow px-4">
                       <span class="mr-3 font-semibold">#{{ index + 1 }}</span>
-                      {{ group.title }}<span v-if="collapsedPreview">: <span class="mr-3 font-semibold">{{ truncate(collapsedPreview, 30) }}</span></span>
+                      {{ group.title }}<span v-if="collapsedPreview !== null">: <span class="mr-3 font-semibold">{{ truncate(collapsedPreview, 30) }}</span></span>
                     </p>
 
                     <div class="flex" v-if="!readonly">

From 22cc81c5ad1a4604ff15f29dc73d1674b09b8233 Mon Sep 17 00:00:00 2001
From: Fede Isas <federicoisas@gmail.com>
Date: Fri, 5 Jul 2024 17:14:49 -0300
Subject: [PATCH 6/6] Bump dependencies

---
 composer.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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": {