media filters

public/build/assets/app-e9d1dd12.js

@@ -0,0 +1 @@
+import{a as f}from"./app-c8ab9151.js";export{f as default};

public/build/assets/dropdown-73a613e0.js

@@ -0,0 +1 @@
+import"./app-c8ab9151.js";

public/build/assets/editor-73a613e0.js

@@ -0,0 +1 @@
+import"./app-c8ab9151.js";

public/build/assets/media-manager-73a613e0.js

@@ -0,0 +1 @@
+import"./app-c8ab9151.js";

public/build/assets/repeater-73a613e0.js

@@ -0,0 +1 @@
+import"./app-c8ab9151.js";

public/build/manifest.json

@@ -7,44 +7,44 @@
     "css": [
       "assets/app-4d04387c.css"
     ],
-    "file": "assets/app-c6af0dee.js",
+    "file": "assets/app-c8ab9151.js",
     "isEntry": true,
     "src": "resources/js/app.js"
   },
   "resources/js/dropdown.js": {
-    "file": "assets/dropdown-7dc1f3ea.js",
+    "file": "assets/dropdown-73a613e0.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/dropdown.js"
   },
   "resources/js/editor.js": {
-    "file": "assets/editor-7dc1f3ea.js",
+    "file": "assets/editor-73a613e0.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/editor.js"
   },
   "resources/js/media-manager.js": {
-    "file": "assets/media-manager-7dc1f3ea.js",
+    "file": "assets/media-manager-73a613e0.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/media-manager.js"
   },
   "resources/js/repeater.js": {
-    "file": "assets/repeater-7dc1f3ea.js",
+    "file": "assets/repeater-73a613e0.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/repeater.js"
   },
   "resources/sass/app.scss": {
-    "file": "assets/app-5cfcf402.js",
+    "file": "assets/app-e9d1dd12.js",
     "imports": [
       "resources/js/app.js"
     ],

resources/js/media-manager.js

@@ -10,17 +10,31 @@ document.addEventListener('alpine:init', () => {
             queue: [],
             items: [],
             nextPageUrl: url,
+            query: config.query,
             init() {
                 this.$root.querySelector('.modal__body').addEventListener('scroll', throttle((event) => {
                     if (this.shouldPaginate(event)) {
-                        this.fetch();
+                        this.paginate();
                     }
                 }));
+
+                this.$watch('query', () => this.fetch());
             },
             fetch() {
                 this.processing = true;
 
-                window.$http.get(this.nextPageUrl).then((response) => {
+                window.$http.get(url, { params: this.query }).then((response) => {
+                    this.items = response.data.data;
+                }).catch((error) => {
+                    //
+                }).finally(() => {
+                    this.processing = false;
+                });
+            },
+            paginate() {
+                this.processing = true;
+
+                window.$http.get(this.nextPageUrl, { params: this.query }).then((response) => {
                     this.items.push(...response.data.data);
                     this.nextPageUrl = response.data.next_page_url;
                 }).catch((error) => {

resources/views/fields/media.blade.php

@@ -1,7 +1,4 @@
-<div
-    class="form-group--row"
-    x-data="{ selection: {{ json_encode($selection) }} }"
->
+<div class="form-group--row" x-data="{ selection: {{ json_encode($selection) }} }">
     <span class="form-label">{{ $label }}</span>
     <div class="file-list">
         <button

resources/views/media/filters.blade.php

@@ -1,4 +1,4 @@
-<div class="modal__filter">
+<div class="modal__filter" x-data="query">
     @foreach($filters as $filter)
         @include($filter['template'], $filter)
     @endforeach

resources/views/media/manager.blade.php

@@ -4,7 +4,6 @@
     class="modal--media"
     data-dropzone="{{ __('Drag & drop your images and files here') }}"
     x-data="mediaManager('{{ $url }}', {{ json_encode($config) }})"
-    x-model="selection"
     x-bind:class="{ 'modal--dropzone': dragging }"
     x-on:dragend.prevent="dragging = false"
     x-on:dragover.prevent="dragging = true"

resources/views/media/queued-medium.blade.php

@@ -7,11 +7,11 @@ class="media-item"
             <div
                 class="progressbar__inner"
                 role="progressbar"
-                x-bind:aria-labelledby="item.hash"
                 aria-valuemin="0"
-                aria-valuenow="68"
                 aria-valuemax="100"
                 aria-labelledby="progress-caption"
+                x-bind:aria-valuenow="item.progress"
+                x-bind:aria-labelledby="item.hash"
             >
                 <div class="progressbar__indicator" x-bind:style="item.progress && { inlineSize: item.progress + '%' }"></div>
             </div>

src/Fields/Media.php

@@ -246,25 +246,30 @@ public function toInput(Request $request, Model $model): array
     {
         $data = parent::toInput($request, $model);
 
+        $filters = $this->resolveFilters($request)->authorized($request);
+
         return array_merge($data, [
             'modalKey' => $this->getModalKey(),
             'config' => [
                 'accept' => $this->getAttribute('accept', '*'),
                 'multiple' => $this->multiple,
                 'chunk_size' => Config::get('root.media.chunk_size'),
+                'query' => $filters->mapToData($request),
             ],
             'selection' => array_map(static function (array $option): array {
                 return array_merge($option, [
                     'html' => View::make('root::fields.file-option', $option)->render(),
                 ]);
             }, $data['options'] ?? []),
             'url' => $this->getUri() ? $this->buildUri($request, $model) : null,
-            'filters' => $this->resolveFilters($request)
-                ->authorized($request)
-                ->renderable()
+            'filters' => $filters->renderable()
                 ->map(function (RenderableFilter $filter) use ($request, $model): array {
                     return $filter->toField()
                         ->removeAttribute('name')
+                        ->setAttributes([
+                            'x-model.debounce.300ms' => $filter->getKey(),
+                            'x-bind:readonly' => 'processing',
+                        ])
                         ->toInput($request, $this->getRelation($model)->getRelated());
                 })
                 ->all(),

src/Traits/HasAttributes.php

@@ -44,23 +44,23 @@ public function setAttributes(array $attributes): static
      */
     public function hasAttribute(string $key): bool
     {
-        return Arr::has($this->attributes, $key);
+        return array_key_exists($key, $this->attributes);
     }
 
     /**
      * Get the given attribute.
      */
     public function getAttribute(string $key, mixed $default = null): mixed
     {
-        return Arr::get($this->attributes, $key, $default);
+        return $this->attributes[$key] ?? $default;
     }
 
     /**
      * Set the given attribute.
      */
     public function setAttribute(string $key, mixed $value): static
     {
-        Arr::set($this->attributes, $key, $value);
+        $this->attributes[$key] = $value;
 
         return $this;
     }
@@ -70,7 +70,7 @@ public function setAttribute(string $key, mixed $value): static
      */
     public function removeAttribute(string $key): static
     {
-        Arr::forget($this->attributes, $key);
+        unset($this->attributes[$key]);
 
         return $this;
     }