[6.x] Asset field listing preview improvements (#13708)

Co-authored-by: Jason Varga <jason@pixelfear.com>

Author: jaygeorge

resources/js/components/fieldtypes/assets/AssetsIndexFieldtype.vue

@@ -1,8 +1,14 @@
 <template>
-    <div class="flex text-2xs">
-        <a v-for="asset in value" :key="asset.id" :href="asset.url" target="_blank">
+    <div class="flex text-2xs gap-2">
+        <a v-for="asset in value.assets.splice(0, 5)" :key="asset.id" :href="asset.url" target="_blank">
             <asset-thumbnail :asset="asset" class="-my-1 h-8 max-w-3xs" />
         </a>
+        <span
+            v-if="value.total > 6"
+            class="-my-1 flex h-8 min-w-8 items-center justify-center px-1.5 font-mono text-gray-600 dark:text-gray-400"
+        >
+            +&thinsp;{{ value.total - 5 }}
+        </span>
     </div>
 </template>
 

src/Fieldtypes/Assets/Assets.php

@@ -438,7 +438,16 @@ public function fieldRules()
 
     public function preProcessIndex($data)
     {
-        return $this->getItemsForPreProcessIndex($data)->map(function ($asset) {
+        $total = $data === null
+            ? 0
+            : ($this->config('max_files') === 1 ? 1 : count($data));
+
+        // Since we only want to display a handful of thumbnails, we'll slice it up here so we don't perform more
+        // augmentation overhead than necessary. e.g. 5 thumbs then +remainder. If the remainder is 1, we may
+        // as well show all 6 since the +1 would almost take up the same amount of space.
+        $data = collect($data)->take(6)->all();
+
+        $assets = $this->getItemsForPreProcessIndex($data)->map(function ($asset) {
             $arr = [
                 'id' => $asset->id(),
                 'is_image' => $isImage = $asset->isImage(),
@@ -456,6 +465,8 @@ public function preProcessIndex($data)
 
             return $arr;
         });
+
+        return compact('total', 'assets');
     }
 
     protected function getItemsForPreProcessIndex($values): Collection