gcp-hockey-results/motm_app/COMMENTS_MANAGEMENT_FEATURE.md

7.7 KiB

Comments Management Feature

Overview

Added a comprehensive comments management interface to the MOTM application, providing admin users with the ability to view, edit, delete, and manage match comments, similar to the existing MOTM management functionality.

Features Implemented

1. View All Comments

  • Display all comments in a card-based interface
  • Show comment ID, match date, and full comment text
  • Display statistics: total comments, unique match dates, and average comments per match

2. Edit Comments

  • Inline edit functionality for each comment
  • Click "Edit" to show an editable textarea
  • Save or cancel changes without page reload
  • Comments are properly escaped to handle special characters

3. Delete Comments

  • Individual Comment Deletion: Delete specific comments one at a time
  • Match Date Deletion: Delete all comments for a specific match date
  • Bulk Deletion: Delete all comments in the database at once
  • All deletions require confirmation dialogs for safety

4. Column Management

  • View all columns in the _motmcomments table
  • Drop unwanted columns (similar to MOTM management)
  • Protected columns (matchDate, comment, rowid, id) cannot be dropped

5. Statistics Dashboard

  • Total comment count
  • Number of unique match dates with comments
  • Average comments per match

Files Modified/Created

New Files

  1. templates/comments_management.html
    • Bootstrap 5-based responsive interface
    • Card-based comment display
    • Inline editing functionality
    • Bulk operation controls
    • Statistics dashboard

Modified Files

  1. main.py

    • Added /admin/comments/manage route (lines 1385-1481)
    • Handles GET and POST requests for all comment operations
    • Actions supported:
      • delete_comment: Delete individual comment
      • edit_comment: Update comment text
      • delete_match_comments: Delete all comments for a match
      • delete_all_comments: Delete all comments
      • drop_column: Drop a column from the table
  2. templates/admin_dashboard.html

    • Added "Comments Management" button (lines 68-76)
    • Styled with yellow/warning theme (btn-outline-warning)
    • Includes comments icon

Usage

Accessing Comments Management

  1. Log in to the admin dashboard
  2. Click the "Comments Management" button in the Quick Actions section
  3. The page will display all match comments with management controls

Managing Comments

Edit a Comment

  1. Click the "Edit" button on any comment card
  2. Modify the text in the textarea
  3. Click "Save" to update or "Cancel" to discard changes

Delete a Comment

  1. Click the "Delete" button on any comment card
  2. Confirm the deletion in the dialog
  3. Comment will be removed from the database

Delete Match Comments

  1. In the "Bulk Operations" section, select a match date
  2. Click "Delete Match Comments"
  3. Confirm the deletion
  4. All comments for that match will be removed

Delete All Comments

  1. In the "Bulk Operations" section, click "Delete All Comments"
  2. Confirm the deletion (requires explicit confirmation)
  3. All comments in the database will be removed

Drop a Column

  1. In the "Column Management" section, select a column
  2. Click "Drop Column"
  3. Confirm the action
  4. The column will be removed from the table schema

Database Compatibility

The implementation handles different database types:

SQLite

  • Uses rowid as the unique identifier for comments
  • Fallback to id column if available

PostgreSQL/MySQL

  • Uses information_schema to query column names
  • Uses id or rowid for unique identification
  • Fallback logic ensures compatibility

Security Features

  1. Authentication Required: All routes require @basic_auth.required
  2. Confirmation Dialogs: All destructive operations require user confirmation
  3. Protected Columns: Core columns (matchDate, comment) are protected from dropping
  4. SQL Injection Prevention: Uses parameterized queries with SQLAlchemy text()
  5. Special Character Handling: Properly escapes single quotes in comments

Technical Implementation

Backend Route Pattern

@app.route('/admin/comments/manage', methods=['GET', 'POST'])
@basic_auth.required
def comments_management():
    # Handle POST actions (edit, delete, drop)
    # Query database for comments and metadata
    # Render template with data

Key Query Examples

Get all comments:

SELECT rowid, matchDate, comment 
FROM _motmcomments 
ORDER BY matchDate DESC, rowid DESC

Delete a comment:

DELETE FROM _motmcomments 
WHERE rowid = :comment_id

Update a comment:

UPDATE _motmcomments 
SET comment = :comment 
WHERE rowid = :comment_id

Drop a column:

ALTER TABLE _motmcomments 
DROP COLUMN {column_name}

UI/UX Features

Responsive Design

  • Bootstrap 5 grid system
  • Mobile-friendly card layout
  • Touch-friendly buttons and controls

Visual Indicators

  • Color-coded badges for match dates
  • Card-based layout with left border accent
  • FontAwesome icons for actions
  • Success/error flash messages

Interactive Elements

  • Inline editing with JavaScript
  • Confirmation dialogs for destructive actions
  • Collapsible edit forms
  • Real-time form validation

Future Enhancements

Potential improvements for future versions:

  1. Search and Filter

    • Search comments by text
    • Filter by match date range
    • Sort by date, length, or other criteria
  2. Batch Operations

    • Select multiple comments for deletion
    • Bulk edit with find/replace
  3. Comment Moderation

    • Flag inappropriate comments
    • Approve/reject comments before display
  4. Export Functionality

    • Export comments to CSV/JSON
    • Generate match reports with comments
  5. Pagination

    • Handle large numbers of comments efficiently
    • Load more/infinite scroll

Testing

To test the comments management feature:

  1. Setup:

    cd /home/jonny/Projects/gcp-hockey-results/motm_app
    python main.py  # or your preferred method
    
  2. Access: Navigate to /admin and click "Comments Management"

  3. Test Cases:

    • View comments (should display all comments)
    • Edit a comment (verify text updates correctly)
    • Delete a comment (verify it's removed)
    • Delete match comments (verify all for that date are removed)
    • Try dropping a non-essential column (if any exist)
    • Check statistics are calculated correctly

Troubleshooting

"No comments found"

  • Ensure users have submitted comments during voting
  • Check the _motmcomments table has data

"Error deleting comment"

  • Verify database permissions
  • Check rowid or id column exists
  • Review error message for specifics

"Error dropping column"

  • Ensure column name is correct
  • Verify database supports ALTER TABLE DROP COLUMN
  • SQLite has limitations on dropping columns
  • /admin/motm/manage - Similar management interface for MOTM data
  • templates/motm_management.html - Reference implementation
  • database.py - Database models and configuration
  • db_setup.py - Database initialization

Comparison with MOTM Management

Feature MOTM Management Comments Management
View Data ✓ Table format ✓ Card format
Edit Items ✓ Reset counts ✓ Edit text
Delete Items ✓ Reset fixtures ✓ Delete comments
Drop Columns ✓ Yes ✓ Yes
Bulk Operations ✓ Reset all ✓ Delete all
Statistics ✓ Totals ✓ Counts & averages

Conclusion

The Comments Management feature provides a complete administrative interface for managing match comments, matching the functionality pattern established by the MOTM Management system while being tailored to the specific needs of comment data.