dwindown/dw-sheet-data-checker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
dw-sheet-data-checker/UI_IMPROVEMENTS_RECOMMENDATIONS.md
dwindown 430e063f91 ver 1.4.0
2025-11-16 01:01:53 +07:00

18 KiB
Raw Permalink Blame History

UI/UX Improvements & New Features Recommendations

Date: November 16, 2024
Focus: Display improvements, URL parameters, and filter-based search

🎨 Current Display Types Analysis

1. Vertical Table Display

Current State:

  • Two-column layout (header | value)
  • Good for detailed single-record view
  • Works well with pagination

Improvements Needed:

  • ✅ Already well-implemented
  • Consider: Collapsible sections for long data
  • Consider: Sticky headers on scroll

2. Div Display

Current State:

  • Flexible layout
  • Header and value in separate divs
  • Pagination support

Improvements Needed:

  • Add responsive grid option (2-column, 3-column on larger screens)
  • Better visual separation between records
  • Optional card-style wrapper per record

3. Standard Table Display

Current State:

  • Traditional table with DataTables
  • Horizontal layout
  • Sorting and searching built-in

Improvements Needed:

  • ✅ Already excellent with DataTables
  • Consider: Export buttons (CSV, PDF, Excel)
  • Consider: Column visibility toggle
  • Consider: Fixed header on scroll

4. Card Display

Current State:

  • Grid layout with responsive columns
  • Individual cards per field
  • Custom colors per card

Improvements Needed:

  • Add card hover effects
  • Optional image support in cards
  • Better spacing/padding controls
  • Card shadow customization

🚀 Major New Feature: URL Parameter Search & Filter Mode

Concept Overview

Transform the checker from "search-only" to "filter-capable" with two modes:

Mode 1: Search Mode (Current)

  • User fills form to find specific records
  • Results shown after submission
  • Good for targeted searches

Mode 2: Filter Mode (NEW)

  • Show all data by default
  • Form becomes a filter
  • Real-time filtering as user types
  • URL parameters pre-fill filters

Benefits

  1. Better UX - See all data immediately
  2. Shareable Links - Direct links to filtered results
  3. SEO Friendly - Crawlable data
  4. Faster Workflow - No need to search if browsing

📋 Feature 1: URL Parameter Support

Implementation Plan

Backend Changes

File: includes/class-Shortcode.php

Add URL parameter parsing in content() method:

public function content($atts, $content=null) {
    // ... existing code ...
    
    // Get URL parameters
    $url_params = [];
    if (isset($_GET) && !empty($_GET)) {
        foreach ($_GET as $key => $value) {
            // Sanitize and store
            $url_params[$key] = sanitize_text_field($value);
        }
    }
    
    // Pass to template
    $render = str_replace('{url_params}', json_encode($url_params), $render);
    
    return $render;
}

Frontend Changes

File: assets/public.js

Add auto-fill from URL parameters:

jQuery(document).ready(function($){
    // Get URL parameters
    function getUrlParams() {
        var params = {};
        var queryString = window.location.search.substring(1);
        var pairs = queryString.split('&');
        for (var i = 0; i < pairs.length; i++) {
            var pair = pairs[i].split('=');
            if (pair[0]) {
                params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
            }
        }
        return params;
    }
    
    // Auto-fill form from URL params
    var urlParams = getUrlParams();
    if (Object.keys(urlParams).length > 0) {
        $('.dw-checker-inputs').each(function() {
            var fieldName = $(this).data('kolom');
            if (urlParams[fieldName]) {
                $(this).val(urlParams[fieldName]);
            }
        });
        
        // Auto-submit if params exist
        if ($('.auto-search-on-params').val() == 'yes') {
            $('.search-button').trigger('click');
        }
    }
});

Admin Settings

File: templates/editor/setting-table-form.php

Add new setting:

<tr class="has-link" style="display: none;">
    <th>URL Parameters</th>
    <td>
        <div class="row mb-2">
            <div class="col-3"><label class="form-label fw-bold mb-0">Enable URL Params</label></div>
            <div class="col-9">
                <select name="checker[url_params][enabled]" class="form-select">
                    <option value="no">Disabled</option>
                    <option value="yes">Enabled</option>
                </select>
                <small class="text-muted">Allow pre-filling form via URL parameters</small>
            </div>
        </div>
        <div class="row mb-2">
            <div class="col-3"><label class="form-label fw-bold mb-0">Auto Search</label></div>
            <div class="col-9">
                <select name="checker[url_params][auto_search]" class="form-select auto-search-on-params">
                    <option value="no">No - Just fill form</option>
                    <option value="yes">Yes - Auto submit</option>
                </select>
                <small class="text-muted">Automatically search when URL params present</small>
            </div>
        </div>
    </td>
</tr>

Usage Examples

Example 1: Pre-fill single field

https://yoursite.com/checker/?Name=John

Example 2: Pre-fill multiple fields

https://yoursite.com/checker/?Name=John&City=Jakarta

Example 3: Auto-search

https://yoursite.com/checker/?Name=John&auto=1

📊 Feature 2: Show All Data Mode (Filter Mode)

Implementation Plan

Concept

Instead of showing empty form → search → results, show:

  1. All data loaded by default
  2. Form acts as live filter
  3. Results update as user types

Admin Settings

File: templates/editor/setting-table-result.php

Add new setting:

<tr class="has-link" style="display: none;">
    <th>Data Display Mode</th>
    <td>
        <div class="row mb-3">
            <div class="col-3"><label class="form-label fw-bold mb-0">Initial Display</label></div>
            <div class="col-9">
                <select name="checker[result][initial_display]" class="form-select result-initial-display">
                    <option value="hidden">Hidden - Show after search</option>
                    <option value="all">Show All - Display all records</option>
                    <option value="limited">Show Limited - First 10 records</option>
                </select>
                <small class="text-muted">How to display data on page load</small>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-3"><label class="form-label fw-bold mb-0">Filter Mode</label></div>
            <div class="col-9">
                <select name="checker[result][filter_mode]" class="form-select result-filter-mode">
                    <option value="search">Search - Submit to find</option>
                    <option value="filter">Filter - Real-time filtering</option>
                </select>
                <small class="text-muted">Search requires submit, Filter updates live</small>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-3"><label class="form-label fw-bold mb-0">Max Records</label></div>
            <div class="col-9">
                <input type="number" name="checker[result][max_records]" class="form-control" value="100" min="10" max="1000">
                <small class="text-muted">Maximum records to display (performance limit)</small>
            </div>
        </div>
    </td>
</tr>

Frontend Implementation

File: assets/public.js

Add filter mode logic:

// Load all data on page load (if enabled)
if (checkerSettings.initial_display !== 'hidden') {
    loadAllData();
}

function loadAllData() {
    $.ajax({
        type: 'post',
        url: '/wp-admin/admin-ajax.php',
        data: {
            action: 'checker_load_all_data',
            checker_id: checkerId,
            limit: checkerSettings.max_records || 100
        },
        success: function(res) {
            renderResults(res);
            
            // Enable filter mode if configured
            if (checkerSettings.filter_mode === 'filter') {
                enableLiveFiltering();
            }
        }
    });
}

function enableLiveFiltering() {
    // Store all data
    var allData = currentResults;
    
    // Listen to input changes
    $('.dw-checker-inputs').on('input', function() {
        var filters = {};
        
        // Collect all filter values
        $('.dw-checker-inputs').each(function() {
            var field = $(this).data('kolom');
            var value = $(this).val();
            if (value) {
                filters[field] = value.toLowerCase();
            }
        });
        
        // Filter data client-side
        var filtered = allData.filter(function(row) {
            var match = true;
            for (var field in filters) {
                var rowValue = (row[field] || '').toLowerCase();
                var filterValue = filters[field];
                
                // Check match type
                if (matchType === 'match') {
                    if (rowValue !== filterValue) match = false;
                } else if (matchType === 'contain') {
                    if (rowValue.indexOf(filterValue) === -1) match = false;
                }
            }
            return match;
        });
        
        // Update display
        renderResults({
            count: filtered.length,
            rows: filtered,
            settings: checkerSettings,
            output: outputSettings
        });
    });
}

Backend Handler

File: includes/class-Shortcode.php

Add new AJAX handler:

public function __construct() {
    // ... existing code ...
    add_action('wp_ajax_checker_load_all_data', [$this, 'checker_load_all_data']);
    add_action('wp_ajax_nopriv_checker_load_all_data', [$this, 'checker_load_all_data']);
}

public function checker_load_all_data() {
    $post_id = $_REQUEST['checker_id'];
    $limit = isset($_REQUEST['limit']) ? intval($_REQUEST['limit']) : 100;
    $checker = get_post_meta($post_id, 'checker', true);
    
    // Security check
    $ip = CHECKER_SECURITY::get_client_ip();
    $rate_limit = CHECKER_SECURITY::check_rate_limit($post_id, $ip);
    if (!$rate_limit['allowed']) {
        wp_send_json_error(['message' => $rate_limit['message']]);
        return;
    }
    
    $url = $checker['link'];
    $link_format = substr($url, -3);
    $delimiter = $link_format == 'tsv' ? "\t" : ",";
    
    $data = [];
    if (($handle = fopen($url, "r")) !== false) {
        $keys = fgetcsv($handle, 0, $delimiter);
        $count = 0;
        while (($row = fgetcsv($handle, 0, $delimiter)) !== false && $count < $limit) {
            $data[] = array_combine($keys, $row);
            $count++;
        }
        fclose($handle);
    }
    
    wp_send_json([
        'count' => count($data),
        'rows' => $data,
        'settings' => $checker['result'],
        'output' => $checker['output']
    ]);
}

🎯 Feature 3: Enhanced Display Options

Pagination Improvements

Current Issues

  • Only shows numbered buttons
  • No "Previous/Next" buttons
  • No "Show X per page" option

Recommended Additions

File: assets/public.js

// Enhanced pagination
function createPagination(totalRecords, perPage) {
    var totalPages = Math.ceil(totalRecords / perPage);
    var html = '<div class="dw-checker-pagination">';
    
    // Per page selector
    html += '<div class="per-page-selector">';
    html += 'Show <select class="pagination-per-page">';
    html += '<option value="10">10</option>';
    html += '<option value="25" selected>25</option>';
    html += '<option value="50">50</option>';
    html += '<option value="100">100</option>';
    html += '</select> per page';
    html += '</div>';
    
    // Previous button
    html += '<button class="pagination-btn pagination-prev" disabled>Previous</button>';
    
    // Page numbers
    for (var i = 1; i <= totalPages; i++) {
        var active = i === 1 ? ' active' : '';
        html += '<button class="pagination-btn pagination-page'+active+'" data-page="'+i+'">'+i+'</button>';
    }
    
    // Next button
    html += '<button class="pagination-btn pagination-next">Next</button>';
    
    html += '</div>';
    return html;
}

Export Functionality

Add export buttons for standard table:

// Add to DataTables config
$('.dw-checker-result-container').DataTable({
    responsive: true,
    scrollX: true,
    dom: 'Bfrtip',
    buttons: [
        'copy', 'csv', 'excel', 'pdf', 'print'
    ]
});

Requires: DataTables Buttons extension

<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>

📱 Responsive Improvements

Mobile Optimization

Vertical Table on Mobile

@media (max-width: 768px) {
    .dw-checker-result-table {
        font-size: 14px;
    }
    
    .dw-checker-result-table th {
        width: 40%;
    }
    
    .dw-checker-result-table td {
        width: 60%;
    }
}

Card Display Enhancements

.dw-checker-card-container {
    gap: 1rem;
    padding: 1rem;
}

.dw-checker-single-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.dw-checker-single-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

🎨 Visual Enhancements

Loading States

Add loading indicators:

beforeSend: function() {
    $('.dw-checker-results').html(`
        <div class="dw-checker-loading">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p>Loading data...</p>
        </div>
    `);
}

Empty States

Better empty state design:

if (res.count == 0) {
    $('.dw-checker-results').html(`
        <div class="dw-checker-empty-state">
            <svg><!-- Empty state icon --></svg>
            <h3>No Results Found</h3>
            <p>Try adjusting your search criteria</p>
            <button class="btn btn-primary reset-search">Reset Search</button>
        </div>
    `);
}

🔧 Admin UI Improvements

Settings Organization

Add Collapsible Sections

<tr class="has-link" style="display: none;">
    <th colspan="2">
        <button class="btn btn-link section-toggle" data-target="#advanced-settings">
            <i class="bi bi-chevron-down"></i> Advanced Settings
        </button>
    </th>
</tr>
<tr id="advanced-settings" style="display: none;">
    <td colspan="2">
        <!-- Advanced settings here -->
    </td>
</tr>

Preview Improvements

Live Preview Toggle

<div class="preview-controls">
    <button class="btn btn-sm btn-primary" id="toggle-preview">
        <i class="bi bi-eye"></i> Toggle Preview
    </button>
    <button class="btn btn-sm btn-secondary" id="refresh-preview">
        <i class="bi bi-arrow-clockwise"></i> Refresh
    </button>
    <select class="form-select form-select-sm" id="preview-mode">
        <option value="desktop">Desktop View</option>
        <option value="tablet">Tablet View</option>
        <option value="mobile">Mobile View</option>
    </select>
</div>

📊 Implementation Priority

Phase 1: Quick Wins (1-2 days)

  1. ✅ Security table format (DONE)
  2. URL parameter support
  3. Loading states
  4. Empty states
  5. Mobile responsive fixes

Phase 2: Major Features (3-5 days)

  1. Show all data mode
  2. Filter mode (live filtering)
  3. Enhanced pagination
  4. Export functionality

Phase 3: Polish (2-3 days)

  1. Card hover effects
  2. Collapsible sections
  3. Preview improvements
  4. Performance optimization

🎯 Expected Benefits

User Experience

  • Faster access - See data immediately
  • Better navigation - Shareable links
  • More intuitive - Filter instead of search
  • Mobile friendly - Responsive design

Admin Experience

  • Consistent UI - Table format everywhere
  • Better organization - Collapsible sections
  • Live preview - See changes instantly
  • More control - Granular settings

Performance

  • Client-side filtering - No server requests
  • Pagination - Load only what's needed
  • Caching - Reuse loaded data
  • Lazy loading - Images load on demand

📝 Configuration Examples

Example 1: Directory Listing

Mode: Show All Data
Filter: Real-time
Display: Card
Max Records: 100
URL Params: Enabled

Example 2: Search Tool

Mode: Hidden
Filter: Search (submit)
Display: Standard Table
Max Records: 1000
URL Params: Disabled

Example 3: Catalog Browser

Mode: Show Limited (10)
Filter: Real-time
Display: Card
Max Records: 500
URL Params: Enabled
Export: Enabled

✅ Success Metrics

User Engagement

  • Time to first result < 2 seconds
  • Bounce rate decrease by 30%
  • Filter usage > 60% of sessions

Performance

  • Page load < 3 seconds
  • Filter response < 100ms
  • Mobile score > 90/100

Adoption

  • URL sharing increase by 50%
  • Export usage > 20% of sessions
  • Mobile usage increase by 40%

🚀 Next Steps

  1. Review recommendations with stakeholders
  2. Prioritize features based on user needs
  3. Create detailed specs for chosen features
  4. Implement Phase 1 (quick wins)
  5. Test and iterate based on feedback
  6. Roll out Phase 2 (major features)
  7. Polish and optimize (Phase 3)

Status: Ready for review
Estimated Total Time: 6-10 days
Impact: High - Major UX improvement
Complexity: Medium - Requires careful planning

Would you like me to implement any of these features?