Allow User to filter by unused images or files in the media library

frontend/js/components/media-library/MediaLibrary.vue

@@ -32,6 +32,7 @@
             <div slot="hidden-filters">
               <a17-vselect class="medialibrary__filter-item" ref="filter" name="tag" :options="tags"
                            :placeholder="$trans('media-library.filter-select-label', 'Filter by tag')" :searchable="true" maxHeight="175px"/>
+              <a17-checkbox ref="unused" name="unused" :initial-value="0" :value="1" label="Only unused"/>
             </div>
           </a17-filter>
         </div>
@@ -76,6 +77,7 @@
   import a17MediaGrid from './MediaGrid.vue'
   import a17ItemList from '../ItemList.vue'
   import a17Spinner from '@/components/Spinner.vue'
+  import a17Checkbox from '@/components/Checkbox.vue'
 
   import scrollToY from '@/utils/scrollToY.js'
 
@@ -89,7 +91,8 @@
       'a17-uploader': a17Uploader,
       'a17-mediagrid': a17MediaGrid,
       'a17-itemlist': a17ItemList,
-      'a17-spinner': a17Spinner
+      'a17-spinner': a17Spinner,
+      'a17-checkbox': a17Checkbox
     },
     props: {
       modalTitlePrefix: {
@@ -311,12 +314,21 @@
 
         data.type = this.type
 
+        if (Array.isArray(data.unused) && data.unused.length) {
+          data.unused = data.unused[0]
+        }
+
         return data
       },
       clearFilters: function () {
         const self = this
         // reset tags
         if (this.$refs.filter) this.$refs.filter.value = null
+        // reset unused field
+        if (this.$refs.unused) {
+          const input = this.$refs.unused.$el.querySelector('input')
+          input && input.click()
+        }
 
         this.$nextTick(function () {
           self.submitFilter()

src/Http/Controllers/Admin/FileLibraryController.php

@@ -39,6 +39,7 @@ class FileLibraryController extends ModuleController implements SignUploadListen
     protected $defaultFilters = [
         'search' => 'search',
         'tag' => 'tag_id',
+        'unused' => 'unused'
     ];
 
     /**
@@ -145,6 +146,10 @@ protected function getRequestFilters()
             $requestFilters['tag'] = $this->request->get('tag');
         }
 
+        if ($this->request->has('unused') && (int) $this->request->unused === 1) {
+            $requestFilters['unused'] = $this->request->get('unused');
+        }
+
         return $requestFilters ?? [];
     }
 

src/Http/Controllers/Admin/MediaLibraryController.php

@@ -41,6 +41,7 @@ class MediaLibraryController extends ModuleController implements SignUploadListe
     protected $defaultFilters = [
         'search' => 'search',
         'tag' => 'tag_id',
+        'unused' => 'unused'
     ];
 
     /**
@@ -129,6 +130,10 @@ protected function getRequestFilters()
             $requestFilters['tag'] = $this->request->get('tag');
         }
 
+        if ($this->request->has('unused') && (int) $this->request->unused === 1) {
+            $requestFilters['unused'] = $this->request->get('unused');
+        }
+
         return $requestFilters ?? [];
     }
 

src/Models/File.php

@@ -25,6 +25,12 @@ public function canDeleteSafely()
         return DB::table(config('twill.fileables_table', 'twill_fileables'))->where('file_id', $this->id)->count() === 0;
     }
 
+    public function scopeUnused ($query)
+    {
+        $usedIds = DB::table(config('twill.fileables_table'))->get()->pluck('file_id');
+        return $query->whereNotIn('id', $usedIds->toArray())->get();
+    }
+
     public function toCmsArray()
     {
         return [

src/Models/Media.php

@@ -33,6 +33,12 @@ public function __construct(array $attributes = [])
         parent::__construct($attributes);
     }
 
+    public function scopeUnused ($query)
+    {
+        $usedIds = DB::table(config('twill.mediables_table'))->get()->pluck('media_id');
+        return $query->whereNotIn('id', $usedIds->toArray())->get();
+    }
+
     public function getDimensionsAttribute()
     {
         return $this->width . 'x' . $this->height;