Add media filename renaming and preserve library filters

src/web/public/js/settings/media-library.js

@@ -6,6 +6,15 @@ const search = gallery && gallery.querySelector('[data-media-gallery-search]');
 const typeFilter = gallery && gallery.querySelector('[data-media-gallery-type-filter]');
 const usageFilter = gallery && gallery.querySelector('[data-media-gallery-usage-filter]');
 const sort = gallery && gallery.querySelector('[data-media-gallery-sort]');
+const initialGalleryQuery = new URLSearchParams(window.location.search);
+if (search && initialGalleryQuery.has('search')) search.value = initialGalleryQuery.get('search');
+[ ['type', typeFilter], ['usage', usageFilter], ['sort', sort] ].forEach(function (entry) {
+  const control = entry[1];
+  const value = initialGalleryQuery.get(entry[0]);
+  if (control && Array.from(control.options).some(function (option) { return option.value === value; })) {
+    control.value = value;
+  }
+});
 const galleryCount = gallery && gallery.querySelector('[data-media-gallery-count]');
 const noResults = gallery && gallery.querySelector('[data-media-gallery-no-results]');
 const loadMoreWrap = gallery && gallery.querySelector('[data-media-gallery-load-more-wrap]');
@@ -369,14 +378,19 @@ if (uploadForm) {
   });
 }
 
-function getGalleryQuery(offset, limit) {
+function getGalleryFilters() {
   const params = new URLSearchParams();
-  params.set('offset', String(offset));
-  params.set('limit', String(limit));
   params.set('search', String(search && search.value || '').trim());
   params.set('type', typeFilter ? typeFilter.value : 'all');
   params.set('usage', usageFilter ? usageFilter.value : 'all');
   params.set('sort', sort ? sort.value : 'date-desc');
+  return params;
+}
+
+function getGalleryQuery(offset, limit) {
+  const params = getGalleryFilters();
+  params.set('offset', String(offset));
+  params.set('limit', String(limit));
   return params.toString();
 }
 
@@ -439,7 +453,7 @@ function submitBulkDelete() {
   }
   const form = document.createElement('form');
   form.method = 'post';
-  form.action = '/media-library/delete';
+  form.action = '/media-library/delete?' + getGalleryFilters().toString();
   selectedAssetIds.forEach(function (id) {
     const input = document.createElement('input');
     input.type = 'hidden';
@@ -484,6 +498,12 @@ if (typeFilter) typeFilter.addEventListener('change', resetVisibleItemLimit);
 if (usageFilter) usageFilter.addEventListener('change', resetVisibleItemLimit);
 if (sort) sort.addEventListener('change', resetVisibleItemLimit);
 if (gallery) {
+  gallery.addEventListener('submit', function (event) {
+    const form = event.target;
+    const action = form && form.getAttribute('action');
+    if (!/^\/media-library\/[^/?]+\/delete(?:\?|$)/.test(action || '')) return;
+    form.action = action.split('?')[0] + '?' + getGalleryFilters().toString();
+  }, true);
   gallery.addEventListener('click', function (event) {
     if (!selectionMode) return;
     const column = event.target && event.target.closest ? event.target.closest('[data-media-gallery-column]') : null;
@@ -534,6 +554,62 @@ function showPreviewModal() {
 }
 
 if (modal && body) {
+  const renameForm = modal.querySelector('[data-media-gallery-rename-form]');
+  const filenameInput = modal.querySelector('[data-media-gallery-filename]');
+  const renameSave = modal.querySelector('[data-media-gallery-rename-save]');
+  const renameStatus = modal.querySelector('[data-media-gallery-rename-status]');
+  let activePreview = null;
+
+  if (renameForm && filenameInput && renameSave && renameStatus) {
+    renameForm.addEventListener('submit', async function (event) {
+      event.preventDefault();
+      if (renameSave.disabled || !activePreview) return;
+      const preview = activePreview;
+      const action = renameForm.action;
+      renameSave.disabled = true;
+      filenameInput.disabled = true;
+      renameStatus.hidden = true;
+      try {
+        const response = await fetch(action, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+          body: JSON.stringify({ name: filenameInput.value })
+        });
+        const result = await response.json();
+        if (!response.ok) throw new Error(result.error || 'Unable to rename media.');
+        preview.dataset.mediaName = result.name;
+        preview.setAttribute('aria-label', 'Preview ' + result.name);
+        const column = preview.closest('[data-media-gallery-column]');
+        const label = column && column.querySelector('.media-gallery-name');
+        if (label) {
+          label.textContent = result.name;
+          label.title = result.name;
+        }
+        if (activePreview === preview) {
+          filenameInput.value = result.name;
+          if (title) title.textContent = result.name;
+          const image = body.querySelector('img');
+          if (image) image.alt = result.name;
+          renameStatus.textContent = 'Filename saved.';
+          renameStatus.classList.remove('text-danger');
+          renameStatus.hidden = false;
+        }
+        await refreshGallery();
+      } catch (error) {
+        if (activePreview === preview) {
+          renameStatus.textContent = error.message || 'Unable to rename media.';
+          renameStatus.classList.add('text-danger');
+          renameStatus.hidden = false;
+        }
+      } finally {
+        if (activePreview === preview) {
+          renameSave.disabled = false;
+          filenameInput.disabled = false;
+        }
+      }
+    });
+  }
+
   document.addEventListener('click', function (event) {
     const preview = event.target && event.target.closest ? event.target.closest('[data-media-gallery-preview]') : null;
     if (!preview) {
@@ -543,6 +619,17 @@ if (modal && body) {
     const path = preview.getAttribute('data-media-path') || '';
     const type = preview.getAttribute('data-media-type') || 'image';
     const name = preview.getAttribute('data-media-name') || 'Media preview';
+    activePreview = preview;
+    if (renameForm && filenameInput && renameSave && renameStatus) {
+      const column = preview.closest('[data-media-gallery-column]');
+      const assetId = column && column.dataset.mediaId;
+      renameForm.hidden = !assetId;
+      renameForm.action = '/media-library/' + encodeURIComponent(assetId || '') + '/rename';
+      filenameInput.value = name;
+      filenameInput.disabled = false;
+      renameSave.disabled = false;
+      renameStatus.hidden = true;
+    }
     body.replaceChildren();
     if (title) {
       title.textContent = name;
@@ -560,6 +647,7 @@ if (modal && body) {
   });
 
   modal.addEventListener('hidden.bs.modal', function () {
+    activePreview = null;
     body.replaceChildren();
   });
 }