forked from trent_larson/crowd-funder-for-time-pwa
Migrate DiscoverView.vue to Enhanced Triple Migration Pattern
- Replaced all databaseUtil and direct PlatformServiceFactory usage with PlatformServiceMixin methods - Removed all raw SQL queries from the component - Centralized all notification messages in src/constants/notifications.ts - Replaced direct $notify calls with notification helpers and TIMEOUTS constants - Streamlined template logic (tab classes via computed properties) - Updated migration documentation and security audit - Ran lint-fix; no errors remain Ready for human testing and validation.
This commit is contained in:
Matthew Raymer
211
docs/migration-testing/DISCOVERVIEW_MIGRATION.md
Normal file
211
docs/migration-testing/DISCOVERVIEW_MIGRATION.md
Normal file
@@ -0,0 +1,211 @@
|
||||
# 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**
|
||||
1. Replace `databaseUtil` calls with PlatformServiceMixin methods
|
||||
2. Abstract raw SQL with service methods
|
||||
3. Extract all notification messages to constants
|
||||
4. Replace `$notify()` calls with helper methods
|
||||
5. Streamline template with computed properties
|
||||
|
||||
## Migration Plan
|
||||
|
||||
### **Phase 1: Database Migration**
|
||||
```typescript
|
||||
// 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**
|
||||
```typescript
|
||||
// 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**
|
||||
```typescript
|
||||
// Extract complex conditional classes to computed properties
|
||||
computedProjectsTabStyleClassNames()
|
||||
computedPeopleTabStyleClassNames()
|
||||
computedLocalTabStyleClassNames()
|
||||
computedMappedTabStyleClassNames()
|
||||
computedRemoteTabStyleClassNames()
|
||||
```
|
||||
|
||||
## Migration Implementation
|
||||
|
||||
### **Step 1: Add PlatformServiceMixin**
|
||||
```typescript
|
||||
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
// ... existing components
|
||||
},
|
||||
mixins: [PlatformServiceMixin],
|
||||
})
|
||||
```
|
||||
|
||||
### **Step 2: Add Notification Infrastructure**
|
||||
```typescript
|
||||
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**
|
||||
```typescript
|
||||
// In mounted() method
|
||||
const settings = await this.$accountSettings();
|
||||
this.allContacts = await this.$getAllContacts();
|
||||
```
|
||||
|
||||
### **Step 4: Replace Notification Calls**
|
||||
```typescript
|
||||
// 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
|
||||
Reference in New Issue
Block a user