Tareas #8505
Actualizado por Anielkis Herrera hace alrededor de 1 mes
h2. [original]
desarrollo de modal con historial en Mundiales previos para el Calendario Fechas.
h2. [enhanced]
h3. User Story
Como usuario del widget de calendario de fechas del Mundial de Béisbol, quiero poder ver el historial de enfrentamientos entre equipos en Mundiales anteriores cuando hago clic en el indicador VS (versus) en las tarjetas de partido, para tener contexto histórico sobre los enfrentamientos entre los equipos.
h3. Functional Requirements
h4. 1. History Modal Implementation
* *Trigger Element*: VS (versus) indicator in match cards should trigger the History Modal
* *Modal Type*: Implement the History Modal blueprint as specified in the widget documentation
* *Data Input*: Modal receives two team objects and match history parameters when triggered
* *Responsive Behavior*: Full-screen on mobile, centered modal on desktop
h4. 2. Content Structure
The History Modal must include the following sections:
*strong*. A. Head-to-head Record Section
* Total wins for each team
* Draw/tie count
* Overall record display (e.g., "Team A leads 5-3-1")
*strong*. B. Past Encounters List
* List of previous matches between the teams
* Include scores, dates, and tournament context
* Sort chronologically (most recent first)
*strong*. C. Tournament Statistics Comparison
* Head-to-head record specifically in World Baseball Classic tournaments
* Performance statistics in previous World Cups
* Win percentages and other relevant metrics
*strong*. D. Historical Context Section
* Background information about the rivalry
* Notable moments or memorable matches
* Any special historical significance of the matchup
h4. 3. UI Components
* Tabs for different data views (head-to-head, tournament history, statistics)
* Statistics cards for key metrics
* Match history list with expandable details
* Loading states for data retrieval
* Error handling for missing historical data
h3. Technical Implementation Details
h4. 1. Files to Modify
* @src/components/sports/football/MatchScore.vue@ - Add VS click handler to trigger modal
* @src/components/widgets/CalendarWidget.vue@ - Integrate modal functionality
* @src/components/base/MyBaseModal.vue@ - Ensure proper modal base component
* Create new component: @src/components/history/HistoryModal.vue@ - Main history modal component
h4. 2. Data Requirements
* Endpoint for historical match data between teams
* Team information for both participating teams
* Previous World Baseball Classic tournament data
* Match results and statistics from previous tournaments
h4. 3. API Integration
* Create service to fetch historical match data: @src/services/historyService.js@
* Implement caching mechanism for historical data
* Handle API errors gracefully with fallback content
h4. 4. Internationalization
* Add translations for history modal content in @public/data/mundialbeisbol/i18n.json@
* Include keys for:
** "historial_enfrentamientos" (All-Time Series)
** "historial_mundiales" (World Baseball Classic History)
** "estadísticas_generales" (General Stats)
h3. Non-Functional Requirements
h4. 1. Performance
* Modal should load within 2 seconds
* Implement lazy loading for historical data
* Cache frequently accessed historical records
h4. 2. Security
* Validate all data received from API endpoints
* Sanitize content before displaying in modal
* Prevent XSS attacks through proper content sanitization
h4. 3. Accessibility
* Ensure keyboard navigation works properly
* Add proper ARIA attributes for screen readers
* Maintain focus management within modal
* Include proper contrast ratios for text
h4. 4. Responsive Design
* Modal adapts to all screen sizes
* Touch-friendly interface for mobile devices
* Proper spacing and sizing on different viewports
h3. Acceptance Criteria
h4. 1. Functionality
* [ ] Clicking VS indicator opens History Modal with correct team data
* [ ] Modal displays head-to-head record correctly
* [ ] Past encounters list shows historical matches with dates and scores
* [ ] Tournament statistics show World Baseball Classic specific data
* [ ] Historical context section provides meaningful background information
h4. 2. UI/UX
* [ ] Modal has smooth entrance and exit animations
* [ ] Tab navigation works properly between different data views
* [ ] Loading states are displayed during data fetch
* [ ] Error states are handled gracefully with appropriate messaging
h4. 3. Technical
* [ ] All internationalization keys are properly implemented
* [ ] API calls are properly cached and error-handled
* [ ] Modal follows the established theming system
* [ ] Component follows Vue best practices and existing code patterns
h3. Testing Requirements
* Unit tests for the HistoryModal component
* Integration tests for API data fetching
* E2E tests for the complete user flow (click VS → open modal → view content)
* Cross-browser compatibility testing
* Mobile responsiveness testing
h3. Dependencies
* Access to historical match data API
* Proper team identification system in existing codebase
* Working modal system implementation in the widget framework
desarrollo de modal con historial en Mundiales previos para el Calendario Fechas.
h2. [enhanced]
h3. User Story
Como usuario del widget de calendario de fechas del Mundial de Béisbol, quiero poder ver el historial de enfrentamientos entre equipos en Mundiales anteriores cuando hago clic en el indicador VS (versus) en las tarjetas de partido, para tener contexto histórico sobre los enfrentamientos entre los equipos.
h3. Functional Requirements
h4. 1. History Modal Implementation
* *Trigger Element*: VS (versus) indicator in match cards should trigger the History Modal
* *Modal Type*: Implement the History Modal blueprint as specified in the widget documentation
* *Data Input*: Modal receives two team objects and match history parameters when triggered
* *Responsive Behavior*: Full-screen on mobile, centered modal on desktop
h4. 2. Content Structure
The History Modal must include the following sections:
*strong*. A. Head-to-head Record Section
* Total wins for each team
* Draw/tie count
* Overall record display (e.g., "Team A leads 5-3-1")
*strong*. B. Past Encounters List
* List of previous matches between the teams
* Include scores, dates, and tournament context
* Sort chronologically (most recent first)
*strong*. C. Tournament Statistics Comparison
* Head-to-head record specifically in World Baseball Classic tournaments
* Performance statistics in previous World Cups
* Win percentages and other relevant metrics
*strong*. D. Historical Context Section
* Background information about the rivalry
* Notable moments or memorable matches
* Any special historical significance of the matchup
h4. 3. UI Components
* Tabs for different data views (head-to-head, tournament history, statistics)
* Statistics cards for key metrics
* Match history list with expandable details
* Loading states for data retrieval
* Error handling for missing historical data
h3. Technical Implementation Details
h4. 1. Files to Modify
* @src/components/sports/football/MatchScore.vue@ - Add VS click handler to trigger modal
* @src/components/widgets/CalendarWidget.vue@ - Integrate modal functionality
* @src/components/base/MyBaseModal.vue@ - Ensure proper modal base component
* Create new component: @src/components/history/HistoryModal.vue@ - Main history modal component
h4. 2. Data Requirements
* Endpoint for historical match data between teams
* Team information for both participating teams
* Previous World Baseball Classic tournament data
* Match results and statistics from previous tournaments
h4. 3. API Integration
* Create service to fetch historical match data: @src/services/historyService.js@
* Implement caching mechanism for historical data
* Handle API errors gracefully with fallback content
h4. 4. Internationalization
* Add translations for history modal content in @public/data/mundialbeisbol/i18n.json@
* Include keys for:
** "historial_enfrentamientos" (All-Time Series)
** "historial_mundiales" (World Baseball Classic History)
** "estadísticas_generales" (General Stats)
h3. Non-Functional Requirements
h4. 1. Performance
* Modal should load within 2 seconds
* Implement lazy loading for historical data
* Cache frequently accessed historical records
h4. 2. Security
* Validate all data received from API endpoints
* Sanitize content before displaying in modal
* Prevent XSS attacks through proper content sanitization
h4. 3. Accessibility
* Ensure keyboard navigation works properly
* Add proper ARIA attributes for screen readers
* Maintain focus management within modal
* Include proper contrast ratios for text
h4. 4. Responsive Design
* Modal adapts to all screen sizes
* Touch-friendly interface for mobile devices
* Proper spacing and sizing on different viewports
h3. Acceptance Criteria
h4. 1. Functionality
* [ ] Clicking VS indicator opens History Modal with correct team data
* [ ] Modal displays head-to-head record correctly
* [ ] Past encounters list shows historical matches with dates and scores
* [ ] Tournament statistics show World Baseball Classic specific data
* [ ] Historical context section provides meaningful background information
h4. 2. UI/UX
* [ ] Modal has smooth entrance and exit animations
* [ ] Tab navigation works properly between different data views
* [ ] Loading states are displayed during data fetch
* [ ] Error states are handled gracefully with appropriate messaging
h4. 3. Technical
* [ ] All internationalization keys are properly implemented
* [ ] API calls are properly cached and error-handled
* [ ] Modal follows the established theming system
* [ ] Component follows Vue best practices and existing code patterns
h3. Testing Requirements
* Unit tests for the HistoryModal component
* Integration tests for API data fetching
* E2E tests for the complete user flow (click VS → open modal → view content)
* Cross-browser compatibility testing
* Mobile responsiveness testing
h3. Dependencies
* Access to historical match data API
* Proper team identification system in existing codebase
* Working modal system implementation in the widget framework