fix #489: add vpd target filtering

docs/design/489-vpd-target-filtering/README.md

@@ -0,0 +1,47 @@
+# Redmine #489 - VPD 적용 대상 목록 필터/검색 설계
+
+## 프로젝트 개요
+
+VPD Backoffice는 Oracle Database VPD/ORDS 기능을 백오피스 권한 테이블로 제어하기 위한 Spring Boot 관리 도구다. 운영자는 Oracle catalog의 TABLE/VIEW 중 VPD 적용 대상과 권한 등록 상태를 확인하고, 개별 또는 벌크로 VPD policy를 적용한다.
+
+## 목표
+
+`VPD 설정` 화면의 `VPD 적용 대상 TABLE/VIEW` 목록에서 업무 객체를 빠르게 찾을 수 있게 한다. DB catalog 원본은 유지하되, 기본 화면에서는 백오피스 지원 테이블을 숨기고 검색/필터/표시 건수 제어를 제공한다.
+
+## 문제
+
+캡처 기준:
+
+- `/tmp/vpd-ux-audit/screenshots/desktop-vpd-policies.png`
+- `/tmp/vpd-ux-audit/screenshots/mobile-vpd-policies.png`
+
+확인된 문제:
+
+- 지원 테이블(`CB_APP_*`, `CB_PERMISSION*`, `CB_PROTECTED_*`, `CB_USER_*` 등)과 업무 TABLE/VIEW가 섞여 보인다.
+- 목록이 길어 개별 적용 폼까지 이동하기 전에 운영자가 맥락을 잃는다.
+- schema 조회는 있으나 object 검색, type, VPD 상태, 권한 등록 상태 필터가 없다.
+
+## 설계
+
+- 서버의 catalog 조회 결과는 그대로 둔다.
+- 클라이언트 필터를 추가해 현재 페이지의 목록을 즉시 좁힌다.
+- 기본값은 `백오피스 지원 테이블 제외`로 둔다.
+- 지원 테이블 포함 여부, 검색어, object type, VPD 적용 상태, 권한 등록 상태, 표시 건수를 조합한다.
+- 숨김은 primary row와 filter detail row를 한 쌍으로 처리한다.
+
+## 완료 기준
+
+- 기본 화면에서 백오피스 지원 테이블이 숨겨진다.
+- 사용자는 checkbox로 지원 테이블을 다시 포함할 수 있다.
+- object 검색, TABLE/VIEW, VPD 상태, 권한 등록 상태, 표시 건수 필터가 동작한다.
+- 필터 결과 건수와 전체 건수가 표시된다.
+- 모바일 390px에서 body horizontal overflow가 없어야 한다.
+
+## 검증
+
+- `mvn test`
+- Playwright:
+  - `/vpd-policies`에서 기본 표시 건수와 지원 테이블 숨김 확인
+  - 지원 테이블 포함 checkbox 동작 확인
+  - 검색어 `BOARD` 입력 시 matching row 확인
+  - 390px viewport overflow 확인

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

@@ -526,6 +526,38 @@ body {
   min-height: 2rem;
 }
 
+.vpd-target-controls {
+  align-items: end;
+  background: var(--rw-surface-muted);
+  border: 1px solid var(--rw-border);
+  border-radius: 8px;
+  display: grid;
+  gap: .75rem;
+  grid-template-columns: minmax(min(220px, 100%), 1.5fr) repeat(4, minmax(min(120px, 100%), 1fr)) auto auto;
+  margin-bottom: .75rem;
+  min-width: 0;
+  padding: .75rem;
+}
+
+.vpd-target-controls label {
+  color: var(--rw-muted);
+  font-size: .78rem;
+  font-weight: 700;
+}
+
+.vpd-support-toggle {
+  align-items: center;
+  display: flex;
+  gap: .45rem;
+  min-height: 2.2rem;
+}
+
+.vpd-target-count {
+  color: var(--rw-muted);
+  font-size: .82rem;
+  white-space: nowrap;
+}
+
 .question-presets {
   display: flex;
   flex-wrap: wrap;
@@ -1146,6 +1178,14 @@ body {
     flex: 1 1 auto;
   }
 
+  .vpd-target-controls {
+    grid-template-columns: 1fr;
+  }
+
+  .vpd-target-count {
+    white-space: normal;
+  }
+
   .table-responsive > .table {
     min-width: 960px;
   }

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

@@ -492,9 +492,138 @@ function initPermissionWizard() {
   activatePermissionWizardStep(wizard, Number(wizard.dataset.currentStep || '1'));
 }
 
+const backofficeSupportObjectPatterns = [
+  /^CB_APP_/,
+  /^CB_PERMISSION(_|$)/,
+  /^CB_PROTECTED_/,
+  /^CB_USER_/,
+  /^CB_GROUP_/,
+  /^CB_ORDS_/,
+  /^CB_AGENT_BEARER_/,
+  /^CB_BACKOFFICE_/,
+  /^APP_(GROUP|ROLE|USER)$/,
+  /^DB_SOURCE$/,
+  /^PERMISSION$/,
+  /^USER_GROUP$/
+];
+
+function isBackofficeSupportObject(objectName) {
+  const normalized = (objectName || '').trim().toUpperCase();
+  return backofficeSupportObjectPatterns.some((pattern) => pattern.test(normalized));
+}
+
+function initVpdTargetFilters() {
+  const controls = document.querySelector('[data-vpd-target-controls]');
+  const body = document.querySelector('[data-vpd-target-body]');
+  if (!controls || !body) {
+    return;
+  }
+  const rows = Array.from(body.querySelectorAll('[data-vpd-target-row]')).map((row) => ({
+    row,
+    detail: row.nextElementSibling?.matches('[data-vpd-target-detail]') ? row.nextElementSibling : null,
+    object: (row.dataset.object || '').toUpperCase(),
+    objectName: (row.dataset.objectName || '').toUpperCase(),
+    objectType: (row.dataset.objectType || '').toUpperCase(),
+    vpdApplied: row.dataset.vpdApplied || 'false',
+    protectedObject: row.dataset.protectedObject || 'false'
+  }));
+  const search = controls.querySelector('[data-vpd-target-search]');
+  const type = controls.querySelector('[data-vpd-target-type]');
+  const vpd = controls.querySelector('[data-vpd-target-vpd]');
+  const protectedObject = controls.querySelector('[data-vpd-target-protected]');
+  const includeSupport = controls.querySelector('[data-vpd-target-include-support]');
+  const pageSize = controls.querySelector('[data-vpd-target-page-size]');
+  const visibleCount = controls.querySelector('[data-vpd-target-visible]');
+  const matchedCount = controls.querySelector('[data-vpd-target-matched]');
+  const totalCount = controls.querySelector('[data-vpd-target-total]');
+  const reset = controls.querySelector('[data-vpd-target-reset]');
+  const empty = document.createElement('tr');
+  empty.className = 'vpd-target-empty-runtime';
+  empty.innerHTML = '<td colspan="7" class="text-muted">필터 조건에 맞는 TABLE/VIEW가 없습니다.</td>';
+  body.appendChild(empty);
+
+  const matchesFilters = (entry) => {
+    const query = (search?.value || '').trim().toUpperCase();
+    if (query && !entry.object.includes(query)) {
+      return false;
+    }
+    if (type?.value && entry.objectType !== type.value) {
+      return false;
+    }
+    if (vpd?.value && entry.vpdApplied !== vpd.value) {
+      return false;
+    }
+    if (protectedObject?.value && entry.protectedObject !== protectedObject.value) {
+      return false;
+    }
+    if (!includeSupport?.checked && isBackofficeSupportObject(entry.objectName)) {
+      return false;
+    }
+    return true;
+  };
+
+  const applyFilters = () => {
+    const maxRows = pageSize?.value === 'ALL' ? Number.POSITIVE_INFINITY : Number(pageSize?.value || 50);
+    let matched = 0;
+    let visible = 0;
+    rows.forEach((entry) => {
+      const matchedRow = matchesFilters(entry);
+      if (matchedRow) {
+        matched += 1;
+      }
+      const show = matchedRow && visible < maxRows;
+      if (show) {
+        visible += 1;
+      }
+      entry.row.hidden = !show;
+      if (entry.detail) {
+        entry.detail.hidden = !show;
+      }
+    });
+    empty.hidden = matched !== 0;
+    if (visibleCount) {
+      visibleCount.textContent = String(visible);
+    }
+    if (matchedCount) {
+      matchedCount.textContent = String(matched);
+    }
+    if (totalCount) {
+      totalCount.textContent = String(rows.length);
+    }
+  };
+
+  [search, type, vpd, protectedObject, includeSupport, pageSize].forEach((control) => {
+    control?.addEventListener(control === search ? 'input' : 'change', applyFilters);
+  });
+  reset?.addEventListener('click', () => {
+    if (search) {
+      search.value = '';
+    }
+    if (type) {
+      type.value = '';
+    }
+    if (vpd) {
+      vpd.value = '';
+    }
+    if (protectedObject) {
+      protectedObject.value = '';
+    }
+    if (includeSupport) {
+      includeSupport.checked = false;
+    }
+    if (pageSize) {
+      pageSize.value = '50';
+    }
+    applyFilters();
+    search?.focus();
+  });
+  applyFilters();
+}
+
 document.addEventListener('DOMContentLoaded', () => {
   initPersistentMenus();
   renderMarkdownViews();
+  initVpdTargetFilters();
   const master = document.getElementById('userRoleMaster');
   if (master) {
     master.addEventListener('change', filterUserRoleDetail);

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

@@ -46,6 +46,56 @@
       <option value="">관리 대상 스키마</option>
       <option th:each="owner : ${formOptions.schemaOwners()}" th:value="${owner}"></option>
     </datalist>
+    <div class="vpd-target-controls" data-vpd-target-controls th:if="${!#lists.isEmpty(vpdTargets)}">
+      <label>
+        Object 검색
+        <input class="form-control form-control-sm" type="search" placeholder="예: BOARD, CUSTOMER"
+               data-vpd-target-search>
+      </label>
+      <label>
+        Type
+        <select class="form-select form-select-sm" data-vpd-target-type>
+          <option value="">전체</option>
+          <option value="TABLE">TABLE</option>
+          <option value="VIEW">VIEW</option>
+        </select>
+      </label>
+      <label>
+        VPD 상태
+        <select class="form-select form-select-sm" data-vpd-target-vpd>
+          <option value="">전체</option>
+          <option value="true">VPD 적용됨</option>
+          <option value="false">미적용</option>
+        </select>
+      </label>
+      <label>
+        권한 등록
+        <select class="form-select form-select-sm" data-vpd-target-protected>
+          <option value="">전체</option>
+          <option value="true">등록됨</option>
+          <option value="false">미등록</option>
+        </select>
+      </label>
+      <label>
+        표시
+        <select class="form-select form-select-sm" data-vpd-target-page-size>
+          <option value="25">25</option>
+          <option value="50" selected>50</option>
+          <option value="100">100</option>
+          <option value="ALL">전체</option>
+        </select>
+      </label>
+      <label class="form-check vpd-support-toggle">
+        <input class="form-check-input" type="checkbox" data-vpd-target-include-support>
+        <span class="form-check-label">백오피스 지원 테이블 포함</span>
+      </label>
+      <button class="btn btn-sm rw-btn-secondary" type="button" data-vpd-target-reset>초기화</button>
+      <div class="vpd-target-count" aria-live="polite">
+        표시 <strong data-vpd-target-visible>0</strong>
+        / 일치 <strong data-vpd-target-matched>0</strong>
+        / 전체 <span data-vpd-target-total th:text="${#lists.size(vpdTargets)}">0</span>
+      </div>
+    </div>
     <div class="table-responsive">
       <table class="table table-sm align-middle">
         <thead>
@@ -59,9 +109,14 @@
           <th>검증용 ORDS 경로</th>
         </tr>
         </thead>
-        <tbody>
+        <tbody data-vpd-target-body>
         <th:block th:each="target, iter : ${vpdTargets}">
-        <tr>
+        <tr data-vpd-target-row
+            th:attr="data-object=${target.objectDisplayName()},
+                     data-object-name=${target.objectName()},
+                     data-object-type=${target.objectType()},
+                     data-vpd-applied=${target.vpdApplied()},
+                     data-protected-object=${target.protectedObject()}">
           <td><code th:text="${target.objectDisplayName()}">ADMIN.TABLE</code></td>
           <td th:text="${target.objectType()}">TABLE</td>
           <td>
@@ -98,7 +153,7 @@
             <span th:unless="${target.ordsPath()}" class="text-muted">검증 경로 미등록</span>
           </td>
         </tr>
-        <tr th:if="${target.vpdApplied()}">
+        <tr th:if="${target.vpdApplied()}" data-vpd-target-detail>
           <td colspan="7" class="policy-source-cell">
             <div th:id="${'target-filter-detail-' + iter.index}" class="text-muted small">
               Filter 이름을 클릭하면 policy/filter source가 표시됩니다.