forked from jsnbuchanan/crowd-funder-for-time-pwa
- Remove duplicate NOTIFY_INVITE_MISSING and NOTIFY_INVITE_PROCESSING_ERROR exports - Update InviteOneAcceptView.vue to use correct NOTIFY_INVITE_TRUNCATED_DATA constant - Migrate ContactsView to PlatformServiceMixin and extract into modular sub-components - Resolves TypeScript compilation errors preventing web build
247 lines
7.1 KiB
Markdown
247 lines
7.1 KiB
Markdown
# ContactsView Pre-Migration Audit
|
|
|
|
**Author**: Matthew Raymer
|
|
**Date**: 2025-07-16
|
|
**Status**: 🎯 **AUDIT COMPLETE** - Ready for Migration
|
|
|
|
## Overview
|
|
|
|
This document provides a comprehensive audit of ContactsView.vue before migration to the Enhanced Triple Migration Pattern. ContactsView is a complex component that manages contact display, creation, and interaction functionality.
|
|
|
|
## Current State Analysis
|
|
|
|
### Component Statistics
|
|
- **Total Lines**: 1,280 lines
|
|
- **Template Lines**: ~350 lines
|
|
- **Script Lines**: ~930 lines
|
|
- **Style Lines**: ~0 lines (no scoped styles)
|
|
- **Complexity Level**: High (complex contact management logic)
|
|
|
|
### Database Operations Identified
|
|
|
|
#### 1. Contact Retrieval
|
|
```typescript
|
|
// Line 450: Main contact loading
|
|
this.contacts = await this.$getAllContacts();
|
|
|
|
// Line 775: Refresh after CSV import
|
|
this.contacts = await this.$getAllContacts();
|
|
```
|
|
|
|
#### 2. Contact Insertion
|
|
```typescript
|
|
// Line 520: Single contact insertion
|
|
await this.$insertContact(newContact);
|
|
|
|
// Line 850: CSV contact insertion
|
|
await this.$insertContact(newContact);
|
|
```
|
|
|
|
#### 3. Contact Updates
|
|
```typescript
|
|
// Line 950: Update contact registration status
|
|
await this.$updateContact(contact.did, { registered: true });
|
|
```
|
|
|
|
### Notification Usage Analysis
|
|
|
|
#### Current Notification Calls (42 instances)
|
|
1. `this.notify.error()` - 15 instances
|
|
2. `this.notify.success()` - 8 instances
|
|
3. `this.notify.warning()` - 1 instance
|
|
4. `this.notify.info()` - 1 instance
|
|
5. `this.notify.sent()` - 1 instance
|
|
6. `this.notify.copied()` - 1 instance
|
|
7. `this.$notify()` - 15 instances (modal notifications)
|
|
|
|
#### Notification Constants Already Imported
|
|
```typescript
|
|
import {
|
|
NOTIFY_CONTACT_NO_INFO,
|
|
NOTIFY_CONTACTS_ADD_ERROR,
|
|
NOTIFY_CONTACT_NO_DID,
|
|
NOTIFY_CONTACT_INVALID_DID,
|
|
NOTIFY_CONTACTS_ADDED_VISIBLE,
|
|
NOTIFY_CONTACTS_ADDED,
|
|
NOTIFY_CONTACT_IMPORT_ERROR,
|
|
NOTIFY_CONTACT_IMPORT_CONFLICT,
|
|
NOTIFY_CONTACT_IMPORT_CONSTRAINT,
|
|
NOTIFY_CONTACT_SETTING_SAVE_ERROR,
|
|
NOTIFY_CONTACT_INFO_COPY,
|
|
NOTIFY_CONTACTS_SELECT_TO_COPY,
|
|
NOTIFY_CONTACT_LINK_COPIED,
|
|
NOTIFY_BLANK_INVITE,
|
|
NOTIFY_INVITE_REGISTRATION_SUCCESS,
|
|
NOTIFY_CONTACTS_ADDED_CSV,
|
|
NOTIFY_CONTACT_INPUT_PARSE_ERROR,
|
|
NOTIFY_CONTACT_NO_CONTACT_FOUND,
|
|
NOTIFY_GIVES_LOAD_ERROR,
|
|
NOTIFY_MEETING_STATUS_ERROR,
|
|
NOTIFY_REGISTRATION_ERROR_FALLBACK,
|
|
NOTIFY_REGISTRATION_ERROR_GENERIC,
|
|
NOTIFY_VISIBILITY_ERROR_FALLBACK,
|
|
getRegisterPersonSuccessMessage,
|
|
getVisibilitySuccessMessage,
|
|
getGivesRetrievalErrorMessage,
|
|
} from "@/constants/notifications";
|
|
```
|
|
|
|
### Template Complexity Analysis
|
|
|
|
#### Complex Template Logic Identified
|
|
1. **Contact Filtering Logic** (Lines 150-160)
|
|
```vue
|
|
<li
|
|
v-for="contact in filteredContacts()"
|
|
:key="contact.did"
|
|
>
|
|
```
|
|
|
|
2. **Give Amounts Display Logic** (Lines 200-280)
|
|
```vue
|
|
{{
|
|
showGiveTotals
|
|
? ((givenToMeConfirmed[contact.did] || 0)
|
|
+ (givenToMeUnconfirmed[contact.did] || 0))
|
|
: showGiveConfirmed
|
|
? (givenToMeConfirmed[contact.did] || 0)
|
|
: (givenToMeUnconfirmed[contact.did] || 0)
|
|
}}
|
|
```
|
|
|
|
3. **Button State Logic** (Lines 100-120)
|
|
```vue
|
|
:class="
|
|
contactsSelected.length > 0
|
|
? 'text-md bg-gradient-to-b from-blue-400 to-blue-700...'
|
|
: 'text-md bg-gradient-to-b from-slate-400 to-slate-700...'
|
|
"
|
|
```
|
|
|
|
### Method Complexity Analysis
|
|
|
|
#### High Complexity Methods (>50 lines)
|
|
1. **`onClickNewContact()`** - ~100 lines (contact input parsing)
|
|
2. **`addContact()`** - ~80 lines (contact addition logic)
|
|
3. **`register()`** - ~60 lines (registration process)
|
|
4. **`loadGives()`** - ~80 lines (give data loading)
|
|
|
|
#### Medium Complexity Methods (20-50 lines)
|
|
1. **`processContactJwt()`** - ~30 lines
|
|
2. **`processInviteJwt()`** - ~80 lines
|
|
3. **`setVisibility()`** - ~30 lines
|
|
4. **`copySelectedContacts()`** - ~40 lines
|
|
|
|
## Migration Readiness Assessment
|
|
|
|
### ✅ Already Migrated Elements
|
|
1. **PlatformServiceMixin**: Already imported and used
|
|
2. **Database Operations**: All using mixin methods
|
|
3. **Notification Constants**: All imported and used
|
|
4. **Helper Methods**: Using notification helpers
|
|
|
|
### 🔄 Migration Requirements
|
|
|
|
#### 1. Template Streamlining (High Priority)
|
|
- Extract complex give amounts calculation to computed property
|
|
- Extract button state logic to computed property
|
|
- Extract contact filtering logic to computed property
|
|
|
|
#### 2. Method Refactoring (Medium Priority)
|
|
- Break down `onClickNewContact()` into smaller methods
|
|
- Extract contact parsing logic to separate methods
|
|
- Simplify `loadGives()` method structure
|
|
|
|
#### 3. Code Organization (Low Priority)
|
|
- Group related methods together
|
|
- Add method documentation
|
|
- Improve error handling consistency
|
|
|
|
## Risk Assessment
|
|
|
|
### High Risk Areas
|
|
1. **Contact Input Parsing**: Complex logic for different input formats
|
|
2. **Give Amounts Display**: Complex conditional rendering
|
|
3. **JWT Processing**: Error-prone external data handling
|
|
|
|
### Medium Risk Areas
|
|
1. **Registration Process**: Network-dependent operations
|
|
2. **Visibility Settings**: State management complexity
|
|
3. **CSV Import**: Data validation and error handling
|
|
|
|
### Low Risk Areas
|
|
1. **UI State Management**: Simple boolean toggles
|
|
2. **Navigation**: Standard router operations
|
|
3. **Clipboard Operations**: Simple utility usage
|
|
|
|
## Migration Strategy
|
|
|
|
### Phase 1: Template Streamlining
|
|
1. Create computed properties for complex template logic
|
|
2. Extract give amounts calculation
|
|
3. Simplify button state management
|
|
|
|
### Phase 2: Method Refactoring
|
|
1. Break down large methods into smaller, focused methods
|
|
2. Extract contact parsing logic
|
|
3. Improve error handling patterns
|
|
|
|
### Phase 3: Code Organization
|
|
1. Group related methods
|
|
2. Add comprehensive documentation
|
|
3. Final testing and validation
|
|
|
|
## Estimated Migration Time
|
|
|
|
- **Template Streamlining**: 30 minutes
|
|
- **Method Refactoring**: 45 minutes
|
|
- **Code Organization**: 15 minutes
|
|
- **Testing and Validation**: 30 minutes
|
|
- **Total Estimated Time**: 2 hours
|
|
|
|
## Dependencies
|
|
|
|
### Internal Dependencies
|
|
- PlatformServiceMixin (already integrated)
|
|
- Notification constants (already imported)
|
|
- Contact interface and types
|
|
- Various utility functions
|
|
|
|
### External Dependencies
|
|
- Vue Router for navigation
|
|
- Axios for API calls
|
|
- Capacitor for platform detection
|
|
- Various crypto and JWT libraries
|
|
|
|
## Testing Requirements
|
|
|
|
### Functional Testing
|
|
1. Contact creation from various input formats
|
|
2. Contact list display and filtering
|
|
3. Give amounts display and calculations
|
|
4. Contact selection and copying
|
|
5. Registration and visibility settings
|
|
|
|
### Edge Case Testing
|
|
1. Invalid input handling
|
|
2. Network error scenarios
|
|
3. JWT processing errors
|
|
4. CSV import edge cases
|
|
|
|
## Success Criteria
|
|
|
|
1. ✅ All database operations use PlatformServiceMixin methods
|
|
2. ✅ All notifications use centralized constants
|
|
3. ✅ Complex template logic extracted to computed properties
|
|
4. ✅ Methods under 80 lines and single responsibility
|
|
5. ✅ Comprehensive error handling
|
|
6. ✅ All functionality preserved
|
|
7. ✅ Performance maintained or improved
|
|
|
|
---
|
|
|
|
**Status**: Ready for migration
|
|
**Priority**: High (complex component)
|
|
**Estimated Effort**: 2 hours
|
|
**Dependencies**: None (all prerequisites met)
|
|
**Stakeholders**: Development team |