fix #477: toggle vpd filter detail

src/main/resources/static/css/app.css

@@ -854,6 +854,13 @@ body {
   text-align: left;
 }
 
+.policy-function-button.active,
+.policy-function-button[aria-expanded="true"] {
+  background: var(--rw-accent-soft);
+  border-color: var(--rw-accent);
+  color: var(--rw-accent-strong);
+}
+
 .policy-source-cell {
   background: var(--rw-surface) !important;
   padding: 0 0 .75rem !important;

src/main/resources/static/js/app.js

@@ -5,6 +5,29 @@ document.body.addEventListener('htmx:responseError', (event) => {
   }
 });
 
+function resetFilterToggle(button, target) {
+  if (!button || !target) {
+    return;
+  }
+  button.setAttribute('aria-expanded', 'false');
+  button.classList.remove('active');
+  target.innerHTML = button.dataset.toggleDefaultText || 'Filter 이름을 클릭하면 policy/filter source가 표시됩니다.';
+}
+
+function setFilterToggleLoading(button, target) {
+  if (!button || !target) {
+    return;
+  }
+  button.setAttribute('aria-expanded', 'true');
+  button.classList.add('active');
+  target.innerHTML = button.dataset.toggleLoadingText || 'policy/filter source를 조회하는 중입니다.';
+}
+
+function findHtmxTarget(button) {
+  const selector = button?.getAttribute('hx-target') || button?.getAttribute('data-hx-target');
+  return selector ? document.querySelector(selector) : null;
+}
+
 function escapeHtml(value) {
   return value
       .replaceAll('&', '&')
@@ -430,6 +453,25 @@ document.addEventListener('DOMContentLoaded', () => {
   updatePermissionWizardPreview(document);
 });
 
+document.body.addEventListener('htmx:beforeRequest', (event) => {
+  const button = event.detail.elt;
+  if (!button?.matches?.('[data-filter-toggle]')) {
+    return;
+  }
+  const target = findHtmxTarget(button);
+  if (button.getAttribute('aria-expanded') === 'true') {
+    event.preventDefault();
+    resetFilterToggle(button, target);
+    return;
+  }
+  setFilterToggleLoading(button, target);
+});
+
 document.body.addEventListener('htmx:afterSwap', (event) => {
+  const button = event.detail.elt;
+  if (button?.matches?.('[data-filter-toggle]')) {
+    button.setAttribute('aria-expanded', 'true');
+    button.classList.add('active');
+  }
   renderMarkdownViews(event.detail.target || document);
 });

src/main/resources/templates/vpd-policies.html

@@ -77,6 +77,10 @@
             <button th:if="${target.vpdApplied()}"
                     class="btn btn-sm btn-outline-secondary policy-function-button"
                     type="button"
+                    aria-expanded="false"
+                    data-filter-toggle="true"
+                    data-toggle-default-text="Filter 이름을 클릭하면 policy/filter source가 표시됩니다."
+                    data-toggle-loading-text="policy/filter source를 조회하는 중입니다."
                     th:hx-get="@{/vpd-policies/object-filter-detail(objectOwner=${target.owner()},objectName=${target.objectName()})}"
                     th:hx-target="${'#target-filter-detail-' + iter.index}"
                     hx-swap="innerHTML">