Add assets support

composer.json

@@ -17,7 +17,7 @@
         }
     },
     "require": {
-        "statamic/cms": "^4.0"
+        "statamic/cms": "^4.39.0"
     },
     "config": {
         "allow-plugins": {

resources/js/components/fieldtypes/RelatedAsset.vue

@@ -0,0 +1,33 @@
+<template>
+
+    <div class="item select-none">
+        <div class="item-inner">
+            <div
+                v-if="asset.is_svg"
+                class="img svg-img h-7 w-7 bg-no-repeat bg-center bg-cover text-center flex items-center justify-center"
+                :style="'background-image:url(' + asset.thumbnail + ')'"
+            ></div>
+            <img
+                class="asset-thumbnail max-h-full max-w-full rounded w-7 h-7 object-cover"
+                loading="lazy"
+                :src="asset.thumbnail"
+                :alt="asset.basename"
+                v-if="asset.is_image"
+            />
+            <file-icon :extension="asset.extension" v-else class="w-7 h-7" />
+            <a :href="asset.edit_url" v-text="asset.title" class="flex items-center flex-1 ml-3 text-xs text-left truncate w-full" v-tooltip="asset.title" />
+            <div v-text="asset.size" class="hidden @xs:inline asset-filesize text-xs text-gray-600 px-2" />
+        </div>
+    </div>
+
+</template>
+
+<script>
+export default {
+
+    props: {
+        asset: Object,
+    },
+
+};
+</script>

resources/js/components/fieldtypes/RelatedItem.vue

@@ -2,7 +2,7 @@
 
     <div class="item select-none">
         <div class="item-inner">
-            <div v-if="statusIcon" class="little-dot mr-2 hidden@sm:block" :class="item.status" />
+            <div class="little-dot mr-2 hidden@sm:block" :class="item.status" />
             <a :href="item.edit_url" v-text="item.title" class="truncate" v-tooltip="item.title" />
             <div class="flex items-center flex-1 justify-end">
                 <div v-if="item.collection" v-text="item.collection.title" class="text-4xs text-gray-600 uppercase whitespace-nowrap mr-2 hidden @sm:block" />
@@ -17,7 +17,6 @@ export default {
 
     props: {
         item: Object,
-        statusIcon: Boolean,
     },
 
 }

resources/js/components/fieldtypes/ReverseRelationship.vue

@@ -10,12 +10,16 @@
 
         <div v-else class="relationship-input-items space-y-1 outline-none">
             <related-item
+                v-if="config.mode !== 'assets'"
                 v-for="(item, i) in items"
                 :key="item.id"
                 :item="item"
-                :status-icon="true"
-                :read-only="true"
-                class="item outline-none"
+            />
+            <related-asset
+                v-if="config.mode === 'assets'"
+                v-for="(item, i) in items"
+                :key="item.id"
+                :asset="item"
             />
         </div>
 
@@ -25,6 +29,7 @@
 
 <script>
 import RelatedItem from './RelatedItem.vue';
+import RelatedAsset from './RelatedAsset.vue';
 
 export default {
 
@@ -34,6 +39,7 @@ export default {
 
     components: {
         RelatedItem,
+        RelatedAsset,
     },
 
     inject: ['storeName'],
@@ -64,14 +70,14 @@ export default {
     methods: {
        
         request() {
-            if (!this.store.values.id) {
+            if (!this.meta.id) {
                 return;
             }
 
             this.loading = true;
             this.$axios.get(cp_url('reverse-relationship'), {
                 params: {
-                    id: this.store.values.id,
+                    id: this.meta.id,
                     config: this.configParameter,
                 }
             }).then(response => {

src/Fieldtypes/ReverseRelationship.php

@@ -2,7 +2,11 @@
 
 namespace Tv2regionerne\StatamicReverseRelationship\Fieldtypes;
 
+use Statamic\Facades\Asset;
+use Statamic\Facades\AssetContainer;
+use Statamic\Facades\Collection;
 use Statamic\Facades\Entry;
+use Statamic\Facades\Taxonomy;
 use Statamic\Facades\Term;
 use Statamic\Fields\Fieldtype;
 
@@ -24,6 +28,7 @@ protected function configFieldItems(): array
                         'options' => [
                             'entries' => __('Entries'),
                             'terms' => __('Terms'),
+                            'assets' => __('Assets'),
                         ],
                     ],
                     'collection' => [
@@ -46,6 +51,16 @@ protected function configFieldItems(): array
                             'mode' => 'terms',
                         ],
                     ],
+                    'container' => [
+                        'display' => __('Container'),
+                        'instructions' => __('The related container'),
+                        'type' => 'asset_container',
+                        'max_items' => 1,
+                        'validate' => 'required_if:mode,assets',
+                        'if' => [
+                            'mode' => 'assets',
+                        ],
+                    ],
                     'field' => [
                         'display' => __('Field'),
                         'instructions' => __('The related field'),
@@ -62,6 +77,13 @@ protected function configFieldItems(): array
         ];
     }
 
+    public function preload()
+    {
+        return [
+            'id' => $this->field()->parent()->id(),
+        ];
+    }
+
     public function augment($value)
     {
         $id = $this->field->parent()->id();
@@ -96,10 +118,33 @@ protected function getQuery($id)
             // Remove the taxonomy handle from the ID
             $id = str($id)->after('::')->value();
             $query = Term::query()->where('taxonomy', $this->config('taxonomy'));
+        } elseif ($mode === 'assets') {
+            $query = Asset::query()->where('container', $this->config('container'));
         }
 
+        $field = $this->getField();
+        $key = $field->type() === 'assets' ? 'max_files' : 'max_items';
+        $method = $field->get($key) === 1
+            ? 'whereJsonContains'
+            : 'where';
+
         return $query
-            ->whereJsonContains($this->config('field'), $id)
+            ->{$method}($this->config('field'), $id)
             ->orderBy($this->config('sort') ?? 'title');
     }
+
+    protected function getField()
+    {
+        $mode = $this->config('mode');
+
+        if ($mode === 'entries') {
+            $blueprint = Collection::findByHandle($this->config('collection'))->entryBlueprint();
+        } elseif ($mode === 'terms') {
+            $blueprint = Taxonomy::findByHandle($this->config('taxonomy'))->termBlueprint();
+        } elseif ($mode === 'assets') {
+            $blueprint = AssetContainer::findByHandle($this->config('container'))->blueprint();
+        }
+
+        return $blueprint->fields()->get($this->config('field'));
+    }
 }

src/Http/Controllers/ReverseRelationshipController.php

@@ -15,6 +15,17 @@ public function index(Request $request)
 
         $items = $fieldtype->getItems($request->input('id'));
 
+        if ($fieldtype->field()->get('mode') === 'assets') {
+            $items = $items->map(function ($asset) {
+                $data = $asset->toArray();
+                if ($asset->isImage() || $asset->isSvg()) {
+                    $data['thumbnail'] = $asset->thumbnailUrl('small');
+                }
+
+                return $data;
+            });
+        }
+
         return JsonResource::collection($items);
     }