6.5 KiB

Raw Blame History

DiscoverView.vue Migration Documentation

Migration Start: 2025-07-08 12:11 UTC
Component: DiscoverView.vue
Priority: High (Critical User Journey)
Location: src/views/DiscoverView.vue

Pre-Migration Analysis

🔍 Current State Assessment

Database Operations

Legacy Pattern: Uses databaseUtil.retrieveSettingsForActiveAccount() (line 396)
Legacy Pattern: Uses databaseUtil.mapQueryResultToValues() (line 405)
Direct PlatformService: Uses PlatformServiceFactory.getInstance() (line 403)
Raw SQL: Uses "SELECT * FROM contacts" (line 404)

Notification Usage

Direct $notify Calls: 3 instances found (lines 515, 607, 758)
Notification Types: danger, warning, success
Messages: Error handling, search results, loading status

Template Complexity

Conditional Rendering: Multiple v-if/v-else conditions for tabs
Dynamic Content: Complex search results and map integration
User Interactions: Search functionality, map interactions, infinite scroll

📊 Migration Complexity Assessment

Database Migration: Medium (2 database operations)
SQL Abstraction: Low (1 raw SQL query)
Notification Migration: Medium (3 notifications)
Template Streamlining: High (complex conditionals and interactions)

🎯 Migration Goals

Replace databaseUtil calls with PlatformServiceMixin methods
Abstract raw SQL with service methods
Extract all notification messages to constants
Replace $notify() calls with helper methods
Streamline template with computed properties

Migration Plan

Phase 1: Database Migration

// Replace databaseUtil.retrieveSettingsForActiveAccount()
const settings = await this.$accountSettings();

// Replace PlatformServiceFactory.getInstance() + raw SQL
const allContacts = await this.$getAllContacts();

// Replace databaseUtil.mapQueryResultToValues()
// This will be handled by the service method above

Phase 2: Notification Migration

// Extract to constants
NOTIFY_DISCOVER_SEARCH_ERROR
NOTIFY_DISCOVER_LOCAL_SEARCH_ERROR
NOTIFY_DISCOVER_MAP_SEARCH_ERROR

// Replace direct $notify calls with helper methods
this.notify.error(NOTIFY_DISCOVER_SEARCH_ERROR.message, TIMEOUTS.LONG);

Phase 3: Template Streamlining

// Extract complex conditional classes to computed properties
computedProjectsTabStyleClassNames()
computedPeopleTabStyleClassNames()
computedLocalTabStyleClassNames()
computedMappedTabStyleClassNames()
computedRemoteTabStyleClassNames()

Migration Implementation

Step 1: Add PlatformServiceMixin

import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";

@Component({
  components: {
    // ... existing components
  },
  mixins: [PlatformServiceMixin],
})

Step 2: Add Notification Infrastructure

import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
import {
  NOTIFY_DISCOVER_SEARCH_ERROR,
  NOTIFY_DISCOVER_LOCAL_SEARCH_ERROR,
  NOTIFY_DISCOVER_MAP_SEARCH_ERROR,
} from "@/constants/notifications";

// Add property
notify!: ReturnType<typeof createNotifyHelpers>;

// Initialize in created()
created() {
  this.notify = createNotifyHelpers(this.$notify);
}

Step 3: Replace Database Operations

// In mounted() method
const settings = await this.$accountSettings();
this.allContacts = await this.$getAllContacts();

Step 4: Replace Notification Calls

// Replace error notifications
this.notify.error(NOTIFY_DISCOVER_SEARCH_ERROR.message, TIMEOUTS.LONG);
this.notify.error(NOTIFY_DISCOVER_LOCAL_SEARCH_ERROR.message, TIMEOUTS.LONG);
this.notify.error(NOTIFY_DISCOVER_MAP_SEARCH_ERROR.message, TIMEOUTS.LONG);

Expected Outcomes

Technical Improvements

✅ All database operations use PlatformServiceMixin
✅ No raw SQL queries in component
✅ All notifications use helper methods and constants
✅ Template logic streamlined with computed properties
✅ Consistent error handling patterns

Functional Preservation

✅ Search functionality (local, mapped, anywhere) preserved
✅ Map integration and tile loading preserved
✅ Infinite scroll functionality preserved
✅ Tab switching and state management preserved
✅ Error handling and user feedback preserved

Performance Improvements

✅ Reduced database query complexity
✅ Standardized notification patterns
✅ Optimized template rendering
✅ Better error handling efficiency

Testing Requirements

Functional Testing

Search functionality works for all tabs (Projects, People)
Local search with location selection works
Mapped search with map integration works
Anywhere search with infinite scroll works
Error handling displays appropriate notifications
Tab switching preserves state correctly

Cross-Platform Testing

Web browser functionality
Mobile app functionality (Capacitor)
Desktop app functionality (Electron)
PWA functionality

Error Scenario Testing

Network connectivity issues
Invalid search parameters
Empty search results
Map loading failures
Database connection issues

Security Audit Checklist

SQL Injection Prevention

No raw SQL queries in component
All database operations use parameterized queries
Input validation for search terms
Proper error handling without information disclosure

Data Privacy

User search terms properly sanitized
Location data handled securely
Contact information access controlled
No sensitive data in error messages

Input Validation

Search terms validated and sanitized
Map coordinates validated
URL parameters properly handled
File uploads (if any) validated

Migration Timeline

Estimated Duration: 25-35 minutes

Phase 1 (Database): 8-10 minutes
Phase 2 (SQL): 3-5 minutes
Phase 3 (Notifications): 8-10 minutes
Phase 4 (Template): 6-10 minutes

Risk Assessment

Functionality Risk: Low (search is well-contained)
Data Risk: Low (read-only operations)
User Impact: Low (feature is secondary to main workflow)

Dependencies

PlatformServiceMixin availability
Notification constants in place
Map component integration preserved
Search API endpoints accessible

Author: Matthew Raymer
Date: 2025-07-08
Purpose: Document DiscoverView.vue migration to Enhanced Triple Migration Pattern

6.5 KiB Raw Blame History