Property filters overhaul: status sorting, simplified UI

- Remove status dropdown (always show all properties) - Remove sort dropdown (use status-based sorting) - Sort order: Active > Pending > Sold, then by modified date - Map view: half height, 2-column property grid - Beds field same width as others - Add CLAUDE.md documentation for property system 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-30 19:52:50 -06:00
parent 1dd874091c
commit 775c57a678
1182 changed files with 310135 additions and 257 deletions
@@ -0,0 +1,212 @@
+// @ts-check
+const { test, expect } = require('@playwright/test');
+
+test.describe('Property Filters AJAX', () => {
+  test('should have homeprozAjax global defined', async ({ page }) => {
+    await page.goto('/properties/');
+
+    // Check if homeprozAjax is defined
+    const hasAjaxGlobal = await page.evaluate(() => {
+      return typeof window.homeprozAjax !== 'undefined';
+    });
+
+    console.log('homeprozAjax defined:', hasAjaxGlobal);
+
+    if (hasAjaxGlobal) {
+      const ajaxConfig = await page.evaluate(() => {
+        return {
+          ajaxUrl: window.homeprozAjax?.ajaxUrl,
+          nonce: window.homeprozAjax?.nonce,
+          archiveUrl: window.homeprozAjax?.archiveUrl
+        };
+      });
+      console.log('AJAX Config:', ajaxConfig);
+    }
+
+    expect(hasAjaxGlobal).toBe(true);
+  });
+
+  test('should have jQuery loaded', async ({ page }) => {
+    await page.goto('/properties/');
+
+    const hasJquery = await page.evaluate(() => {
+      return typeof window.jQuery !== 'undefined';
+    });
+
+    console.log('jQuery loaded:', hasJquery);
+    expect(hasJquery).toBe(true);
+  });
+
+  test('should have filter form elements', async ({ page }) => {
+    await page.goto('/properties/');
+
+    // Check for form elements
+    const filtersForm = page.locator('.filters-form');
+    const propertyResults = page.locator('#property-results');
+
+    await expect(filtersForm).toBeVisible();
+    await expect(propertyResults).toBeVisible();
+
+    // List all select elements
+    const selects = await page.locator('.filters-form select').all();
+    console.log('Number of select elements:', selects.length);
+
+    for (const select of selects) {
+      const name = await select.getAttribute('name');
+      const options = await select.locator('option').count();
+      console.log(`Select "${name}" has ${options} options`);
+    }
+  });
+
+  test('should trigger AJAX on dropdown change', async ({ page }) => {
+    // Listen for network requests
+    const ajaxRequests = [];
+    page.on('request', request => {
+      if (request.url().includes('admin-ajax.php')) {
+        ajaxRequests.push({
+          url: request.url(),
+          postData: request.postData()
+        });
+      }
+    });
+
+    const ajaxResponses = [];
+    page.on('response', async response => {
+      if (response.url().includes('admin-ajax.php')) {
+        let body;
+        try {
+          body = await response.text();
+        } catch (e) {
+          body = 'Could not read body';
+        }
+        ajaxResponses.push({
+          url: response.url(),
+          status: response.status(),
+          body: body.substring(0, 500)
+        });
+      }
+    });
+
+    // Listen for console errors
+    const consoleErrors = [];
+    page.on('console', msg => {
+      if (msg.type() === 'error') {
+        consoleErrors.push(msg.text());
+      }
+    });
+
+    await page.goto('/properties/');
+
+    // Wait for page to fully load
+    await page.waitForLoadState('networkidle');
+
+    // Get the sort dropdown (most likely to have multiple options)
+    const sortSelect = page.locator('select[name="sort"]');
+
+    if (await sortSelect.count() > 0) {
+      console.log('Changing sort dropdown...');
+
+      // Change the value
+      await sortSelect.selectOption('price_low');
+
+      // Wait a moment for AJAX
+      await page.waitForTimeout(2000);
+
+      console.log('AJAX Requests made:', ajaxRequests.length);
+      console.log('AJAX Responses received:', ajaxResponses.length);
+
+      if (ajaxRequests.length > 0) {
+        console.log('Request details:', JSON.stringify(ajaxRequests, null, 2));
+      }
+
+      if (ajaxResponses.length > 0) {
+        console.log('Response details:', JSON.stringify(ajaxResponses, null, 2));
+      }
+
+      if (consoleErrors.length > 0) {
+        console.log('Console errors:', consoleErrors);
+      }
+    }
+
+    // Check if any AJAX request was made
+    expect(ajaxRequests.length).toBeGreaterThan(0);
+  });
+
+  test('should check for JavaScript errors on page load', async ({ page }) => {
+    const jsErrors = [];
+
+    page.on('pageerror', error => {
+      jsErrors.push(error.message);
+    });
+
+    page.on('console', msg => {
+      if (msg.type() === 'error') {
+        jsErrors.push(msg.text());
+      }
+    });
+
+    await page.goto('/properties/');
+    await page.waitForLoadState('networkidle');
+
+    console.log('JavaScript errors found:', jsErrors.length);
+    if (jsErrors.length > 0) {
+      console.log('Errors:', jsErrors);
+    }
+
+    // This test reports errors but doesn't fail - we want to see what's happening
+    expect(true).toBe(true);
+  });
+
+  test('manual AJAX call test', async ({ page }) => {
+    await page.goto('/properties/');
+    await page.waitForLoadState('networkidle');
+
+    // Try making a manual AJAX call to see what happens
+    const result = await page.evaluate(async () => {
+      if (typeof window.homeprozAjax === 'undefined') {
+        return { error: 'homeprozAjax not defined' };
+      }
+
+      if (typeof window.jQuery === 'undefined') {
+        return { error: 'jQuery not defined' };
+      }
+
+      return new Promise((resolve) => {
+        window.jQuery.ajax({
+          url: window.homeprozAjax.ajaxUrl,
+          type: 'POST',
+          data: {
+            action: 'homeproz_filter_properties',
+            nonce: window.homeprozAjax.nonce,
+            property_type: '',
+            property_status: '',
+            property_location: '',
+            min_price: '',
+            max_price: '',
+            beds: '',
+            sort: 'newest',
+            paged: 1
+          },
+          success: function(response) {
+            resolve({ success: true, response: response });
+          },
+          error: function(xhr, status, error) {
+            resolve({
+              success: false,
+              status: xhr.status,
+              statusText: xhr.statusText,
+              responseText: xhr.responseText?.substring(0, 500),
+              error: error
+            });
+          }
+        });
+      });
+    });
+
+    console.log('Manual AJAX result:', JSON.stringify(result, null, 2));
+
+    if (result.error) {
+      console.log('ERROR:', result.error);
+    }
+  });
+});