Compare commits
12 Commits
matthew-sc
...
android-15
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
6d49be45ca | ||
| e240c2940a | |||
| 54dca9e745 | |||
| 9f0fed0a60 | |||
| 0d152adbf2 | |||
| cead308800 | |||
| 676a301331 | |||
| d6db81cc36 | |||
|
|
f2ddcd2541 | ||
| fb81f7b96e | |||
| a23416ead1 | |||
| 530c7c1a13 |
@@ -1,6 +0,0 @@
|
||||
---
|
||||
description:
|
||||
globs:
|
||||
alwaysApply: true
|
||||
---
|
||||
use the system date function to understand the proper date and time for all interactions.
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -55,3 +55,4 @@ build_logs/
|
||||
icons
|
||||
|
||||
|
||||
android/app/src/main/res/
|
||||
33
BUILDING.md
33
BUILDING.md
@@ -321,11 +321,11 @@ Prerequisites: macOS with Xcode installed
|
||||
|
||||
#### Each Release
|
||||
|
||||
0. First time (or if XCode dependencies change):
|
||||
0. First time (or if dependencies change):
|
||||
|
||||
- `pkgx +rubygems.org sh`
|
||||
|
||||
- ... and you may have to fix these, especially with pkgx
|
||||
- ... and you may have to fix these, especially with pkgx:
|
||||
|
||||
```bash
|
||||
gem_path=$(which gem)
|
||||
@@ -334,12 +334,9 @@ Prerequisites: macOS with Xcode installed
|
||||
export GEM_PATH=$shortened_path
|
||||
```
|
||||
|
||||
```bash
|
||||
cd ios/App
|
||||
pod install
|
||||
```
|
||||
1. Check the iOS flag isIOS in CapacitorPlatformService (currently hard-coded for iOS build).
|
||||
|
||||
1. Build the web assets:
|
||||
2. Build the web assets:
|
||||
|
||||
```bash
|
||||
rm -rf dist
|
||||
@@ -347,8 +344,7 @@ Prerequisites: macOS with Xcode installed
|
||||
npm run build:capacitor
|
||||
```
|
||||
|
||||
|
||||
2. Update iOS project with latest build:
|
||||
3. Update iOS project with latest build:
|
||||
|
||||
```bash
|
||||
npx cap sync ios
|
||||
@@ -356,7 +352,7 @@ Prerequisites: macOS with Xcode installed
|
||||
|
||||
- If that fails with "Could not find..." then look at the "gem_path" instructions above.
|
||||
|
||||
3. Copy the assets:
|
||||
4. Copy the assets:
|
||||
|
||||
```bash
|
||||
# It makes no sense why capacitor-assets will not run without these but it actually changes the contents.
|
||||
@@ -367,15 +363,14 @@ Prerequisites: macOS with Xcode installed
|
||||
npx capacitor-assets generate --ios
|
||||
```
|
||||
|
||||
4. Bump the version to match Android:
|
||||
4. Bump the version to match Android & package.json:
|
||||
|
||||
```
|
||||
cd ios/App
|
||||
xcrun agvtool new-version 25
|
||||
xcrun agvtool new-version 30
|
||||
# Unfortunately this edits Info.plist directly.
|
||||
#xcrun agvtool new-marketing-version 0.4.5
|
||||
cat App.xcodeproj/project.pbxproj | sed "s/MARKETING_VERSION = .*;/MARKETING_VERSION = 0.5.1;/g" > temp
|
||||
mv temp App.xcodeproj/project.pbxproj
|
||||
cat App.xcodeproj/project.pbxproj | sed "s/MARKETING_VERSION = .*;/MARKETING_VERSION = 0.5.4;/g" > temp && mv temp App.xcodeproj/project.pbxproj
|
||||
cd -
|
||||
```
|
||||
|
||||
@@ -403,6 +398,8 @@ Prerequisites: macOS with Xcode installed
|
||||
* You'll probably have to "Manage" something about encryption, disallowed in France.
|
||||
* Then "Save" and "Add to Review" and "Resubmit to App Review".
|
||||
|
||||
8. Revert the iOS flag isIOS in CapacitorPlatformService.
|
||||
|
||||
### Android Build
|
||||
|
||||
Prerequisites: Android Studio with Java SDK installed
|
||||
@@ -427,7 +424,7 @@ Prerequisites: Android Studio with Java SDK installed
|
||||
npx capacitor-assets generate --android
|
||||
```
|
||||
|
||||
4. Bump version to match iOS: android/app/build.gradle
|
||||
4. Bump version to match iOS & package.json: android/app/build.gradle
|
||||
|
||||
5. Open the project in Android Studio:
|
||||
|
||||
@@ -478,7 +475,7 @@ At play.google.com/console:
|
||||
- Note that if you add testers, you have to go to "Publishing Overview" and send those changes or your (closed) testers won't see it.
|
||||
|
||||
|
||||
## First-time Android Configuration for deep links
|
||||
## Android Configuration for deep links
|
||||
|
||||
You must add the following intent filter to the `android/app/src/main/AndroidManifest.xml` file:
|
||||
|
||||
@@ -489,4 +486,6 @@ You must add the following intent filter to the `android/app/src/main/AndroidMan
|
||||
<category android:name="android.intent.category.BROWSABLE" />
|
||||
<data android:scheme="timesafari" />
|
||||
</intent-filter>
|
||||
```
|
||||
```
|
||||
|
||||
... though when we tried that most recently it failed to 'build' the APK with: http(s) scheme and host attribute are missing, but are required for Android App Links [AppLinkUrlError]
|
||||
|
||||
@@ -1,538 +0,0 @@
|
||||
# CEFPython Implementation Survey for TimeSafari
|
||||
|
||||
**Author:** Matthew Raymer
|
||||
**Date:** December 2025
|
||||
**Project:** TimeSafari Cross-Platform Desktop Implementation
|
||||
|
||||
## Executive Summary
|
||||
|
||||
This survey evaluates implementing CEFPython as an additional desktop platform for TimeSafari, with full integration into the existing migration system used by Capacitor and native web platforms.
|
||||
|
||||
### Key Findings
|
||||
|
||||
**Feasibility:** ✅ **Highly Feasible** - CEFPython can integrate seamlessly with TimeSafari's existing architecture
|
||||
|
||||
**Migration System Compatibility:** ✅ **Full Compatibility** - Can use the exact same `migration.ts` system as Capacitor and web
|
||||
|
||||
**Performance:** ✅ **Excellent** - Native Python backend with Chromium rendering engine
|
||||
|
||||
**Security:** ✅ **Strong** - Chromium's security model with Python backend isolation
|
||||
|
||||
---
|
||||
|
||||
## 1. Architecture Overview
|
||||
|
||||
### 1.1 Current Platform Architecture
|
||||
|
||||
TimeSafari uses a sophisticated cross-platform architecture with shared codebase and platform-specific implementations:
|
||||
|
||||
```typescript
|
||||
src/
|
||||
├── main.common.ts # Shared initialization
|
||||
├── main.web.ts # Web/PWA entry point
|
||||
├── main.capacitor.ts # Mobile entry point
|
||||
├── main.electron.ts # Electron entry point
|
||||
├── main.pywebview.ts # PyWebView entry point
|
||||
├── main.cefpython.ts # NEW: CEFPython entry point
|
||||
├── services/
|
||||
│ ├── PlatformService.ts # Platform abstraction interface
|
||||
│ ├── PlatformServiceFactory.ts
|
||||
│ └── platforms/
|
||||
│ ├── WebPlatformService.ts
|
||||
│ ├── CapacitorPlatformService.ts
|
||||
│ ├── ElectronPlatformService.ts
|
||||
│ ├── PyWebViewPlatformService.ts
|
||||
│ └── CEFPythonPlatformService.ts # NEW
|
||||
└── cefpython/ # NEW: CEFPython backend
|
||||
├── main.py
|
||||
├── handlers/
|
||||
│ ├── database.py # SQLite with migration support
|
||||
│ ├── crypto.py # Cryptographic operations
|
||||
│ └── api.py # API server integration
|
||||
└── bridge/
|
||||
└── javascript_bridge.py # JS-Python communication
|
||||
```
|
||||
|
||||
### 1.2 Migration System Integration
|
||||
|
||||
**Key Insight:** CEFPython can use the exact same migration system as Capacitor and web platforms:
|
||||
|
||||
```typescript
|
||||
// src/main.cefpython.ts - CEFPython entry point
|
||||
import { initializeApp } from "./main.common";
|
||||
import { runMigrations } from "./db-sql/migration";
|
||||
import { CEFPythonPlatformService } from "./services/platforms/CEFPythonPlatformService";
|
||||
|
||||
const app = initializeApp();
|
||||
|
||||
// Initialize CEFPython platform service
|
||||
const platformService = new CEFPythonPlatformService();
|
||||
|
||||
// Run migrations using the same system as Capacitor
|
||||
async function initializeDatabase() {
|
||||
const sqlExec = (sql: string) => platformService.dbExecute(sql);
|
||||
const sqlQuery = (sql: string) => platformService.dbQuery(sql);
|
||||
const extractMigrationNames = (result: any) => {
|
||||
const names = result.values?.map((row: any) => row.name) || [];
|
||||
return new Set(names);
|
||||
};
|
||||
|
||||
await runMigrations(sqlExec, sqlQuery, extractMigrationNames);
|
||||
}
|
||||
|
||||
// Initialize database before mounting app
|
||||
initializeDatabase().then(() => {
|
||||
app.mount("#app");
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Python Backend Implementation
|
||||
|
||||
### 2.1 Database Handler with Migration Support
|
||||
|
||||
```python
|
||||
# src/cefpython/handlers/database.py
|
||||
import sqlite3
|
||||
from pathlib import Path
|
||||
from typing import List, Dict, Any
|
||||
|
||||
class DatabaseHandler:
|
||||
def __init__(self):
|
||||
self.db_path = self._get_db_path()
|
||||
self.connection = sqlite3.connect(str(self.db_path))
|
||||
self.connection.row_factory = sqlite3.Row
|
||||
|
||||
# Configure for better performance
|
||||
self.connection.execute("PRAGMA journal_mode=WAL;")
|
||||
self.connection.execute("PRAGMA synchronous=NORMAL;")
|
||||
|
||||
def query(self, sql: str, params: List[Any] = None) -> Dict[str, Any]:
|
||||
"""Execute SQL query and return results in Capacitor-compatible format"""
|
||||
cursor = self.connection.cursor()
|
||||
|
||||
if params:
|
||||
cursor.execute(sql, params)
|
||||
else:
|
||||
cursor.execute(sql)
|
||||
|
||||
if sql.strip().upper().startswith('SELECT'):
|
||||
columns = [description[0] for description in cursor.description]
|
||||
rows = []
|
||||
for row in cursor.fetchall():
|
||||
rows.append(dict(zip(columns, row)))
|
||||
return {'values': rows} # Match Capacitor format
|
||||
else:
|
||||
self.connection.commit()
|
||||
return {'affected_rows': cursor.rowcount}
|
||||
|
||||
def execute(self, sql: string, params: List[Any] = None) -> Dict[str, Any]:
|
||||
"""Execute SQL statement (for INSERT, UPDATE, DELETE, CREATE)"""
|
||||
cursor = self.connection.cursor()
|
||||
|
||||
if params:
|
||||
cursor.execute(sql, params)
|
||||
else:
|
||||
cursor.execute(sql)
|
||||
|
||||
self.connection.commit()
|
||||
|
||||
return {
|
||||
'changes': {
|
||||
'changes': cursor.rowcount,
|
||||
'lastId': cursor.lastrowid
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2.2 Platform Service Implementation
|
||||
|
||||
```typescript
|
||||
// src/services/platforms/CEFPythonPlatformService.ts
|
||||
import { PlatformService } from '../PlatformService';
|
||||
import { runMigrations } from '@/db-sql/migration';
|
||||
|
||||
export class CEFPythonPlatformService implements PlatformService {
|
||||
private bridge: any;
|
||||
|
||||
constructor() {
|
||||
this.bridge = (window as any).cefBridge;
|
||||
if (!this.bridge) {
|
||||
throw new Error('CEFPython bridge not available');
|
||||
}
|
||||
}
|
||||
|
||||
// Database operations using the same interface as Capacitor
|
||||
async dbQuery(sql: string, params?: any[]): Promise<any> {
|
||||
const result = await this.bridge.call('database', 'query', sql, params || []);
|
||||
return result;
|
||||
}
|
||||
|
||||
async dbExecute(sql: string, params?: any[]): Promise<any> {
|
||||
const result = await this.bridge.call('database', 'execute', sql, params || []);
|
||||
return result;
|
||||
}
|
||||
|
||||
// Migration system integration
|
||||
async runMigrations(): Promise<void> {
|
||||
const sqlExec: (sql: string) => Promise<any> = this.dbExecute.bind(this);
|
||||
const sqlQuery: (sql: string) => Promise<any> = this.dbQuery.bind(this);
|
||||
const extractMigrationNames: (result: any) => Set<string> = (result) => {
|
||||
const names = result.values?.map((row: any) => row.name) || [];
|
||||
return new Set(names);
|
||||
};
|
||||
|
||||
await runMigrations(sqlExec, sqlQuery, extractMigrationNames);
|
||||
}
|
||||
|
||||
// Platform detection
|
||||
isCEFPython(): boolean {
|
||||
return true;
|
||||
}
|
||||
|
||||
getCapabilities(): PlatformCapabilities {
|
||||
return {
|
||||
hasCamera: true,
|
||||
hasFileSystem: true,
|
||||
hasNotifications: true,
|
||||
hasSQLite: true,
|
||||
hasCrypto: true
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Migration System Compatibility
|
||||
|
||||
### 3.1 Key Advantage
|
||||
|
||||
**CEFPython can use the exact same migration system as Capacitor:**
|
||||
|
||||
```typescript
|
||||
// Both Capacitor and CEFPython use the same migration.ts
|
||||
import { runMigrations } from '@/db-sql/migration';
|
||||
|
||||
// Capacitor implementation
|
||||
const sqlExec: (sql: string) => Promise<capSQLiteChanges> = this.db.execute.bind(this.db);
|
||||
const sqlQuery: (sql: string) => Promise<DBSQLiteValues> = this.db.query.bind(this.db);
|
||||
|
||||
// CEFPython implementation
|
||||
const sqlExec: (sql: string) => Promise<any> = this.dbExecute.bind(this);
|
||||
const sqlQuery: (sql: string) => Promise<any> = this.dbQuery.bind(this);
|
||||
|
||||
// Both use the same migration runner
|
||||
await runMigrations(sqlExec, sqlQuery, extractMigrationNames);
|
||||
```
|
||||
|
||||
### 3.2 Database Format Compatibility
|
||||
|
||||
The Python database handler returns data in the same format as Capacitor:
|
||||
|
||||
```python
|
||||
# Python returns Capacitor-compatible format
|
||||
def query(self, sql: str, params: List[Any] = None) -> Dict[str, Any]:
|
||||
# ... execute query ...
|
||||
return {
|
||||
'values': [
|
||||
{'name': '001_initial', 'executed_at': '2025-01-01'},
|
||||
{'name': '002_add_contacts', 'executed_at': '2025-01-02'}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
This matches the Capacitor format:
|
||||
```typescript
|
||||
// Capacitor returns same format
|
||||
const result = await this.db.query("SELECT name FROM migrations");
|
||||
// result = { values: [{ name: '001_initial' }, { name: '002_add_contacts' }] }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Build Configuration
|
||||
|
||||
### 4.1 Vite Configuration
|
||||
|
||||
```typescript
|
||||
// vite.config.cefpython.mts
|
||||
import { defineConfig } from 'vite';
|
||||
import { createBuildConfig } from './vite.config.common.mts';
|
||||
|
||||
export default defineConfig({
|
||||
...createBuildConfig('cefpython'),
|
||||
|
||||
define: {
|
||||
'process.env.VITE_PLATFORM': JSON.stringify('cefpython'),
|
||||
'process.env.VITE_PWA_ENABLED': JSON.stringify(false),
|
||||
__IS_MOBILE__: JSON.stringify(false),
|
||||
__USE_QR_READER__: JSON.stringify(true)
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 4.2 Package.json Scripts
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"build:cefpython": "vite build --config vite.config.cefpython.mts",
|
||||
"dev:cefpython": "concurrently \"npm run dev:web\" \"python src/cefpython/main.py --dev\"",
|
||||
"test:cefpython": "python -m pytest tests/cefpython/"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 4.3 Python Requirements
|
||||
|
||||
```txt
|
||||
# requirements-cefpython.txt
|
||||
cefpython3>=66.1
|
||||
cryptography>=3.4.0
|
||||
requests>=2.25.0
|
||||
pyinstaller>=4.0
|
||||
pytest>=6.0.0
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Platform Service Factory Integration
|
||||
|
||||
### 5.1 Updated Factory
|
||||
|
||||
```typescript
|
||||
// src/services/PlatformServiceFactory.ts
|
||||
import { CEFPythonPlatformService } from './platforms/CEFPythonPlatformService';
|
||||
|
||||
export function createPlatformService(platform: string): PlatformService {
|
||||
switch (platform) {
|
||||
case 'web':
|
||||
return new WebPlatformService();
|
||||
case 'capacitor':
|
||||
return new CapacitorPlatformService();
|
||||
case 'electron':
|
||||
return new ElectronPlatformService();
|
||||
case 'pywebview':
|
||||
return new PyWebViewPlatformService();
|
||||
case 'cefpython':
|
||||
return new CEFPythonPlatformService(); // NEW
|
||||
default:
|
||||
throw new Error(`Unsupported platform: ${platform}`);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Performance and Security Analysis
|
||||
|
||||
### 6.1 Performance Comparison
|
||||
|
||||
| Metric | Electron | PyWebView | CEFPython | Notes |
|
||||
|--------|----------|-----------|-----------|-------|
|
||||
| **Memory Usage** | 150-200MB | 80-120MB | 100-150MB | CEFPython more efficient than Electron |
|
||||
| **Startup Time** | 3-5s | 2-3s | 2-4s | Similar to PyWebView |
|
||||
| **Database Performance** | Good | Good | Excellent | Native SQLite |
|
||||
| **Crypto Performance** | Good | Good | Excellent | Native Python crypto |
|
||||
| **Bundle Size** | 120-150MB | 50-80MB | 80-120MB | Smaller than Electron |
|
||||
|
||||
### 6.2 Security Features
|
||||
|
||||
```python
|
||||
# src/cefpython/utils/security.py
|
||||
class SecurityManager:
|
||||
def __init__(self):
|
||||
self.blocked_domains = set(['malicious-site.com'])
|
||||
self.allowed_schemes = {'https', 'http', 'file'}
|
||||
|
||||
def validate_network_access(self, url: str) -> bool:
|
||||
"""Validate if network access is allowed"""
|
||||
from urllib.parse import urlparse
|
||||
parsed = urlparse(url)
|
||||
|
||||
# Check blocked domains
|
||||
if parsed.hostname in self.blocked_domains:
|
||||
return False
|
||||
|
||||
# Allow HTTPS only for external domains
|
||||
if parsed.scheme != 'https' and parsed.hostname != 'localhost':
|
||||
return False
|
||||
|
||||
return True
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. Migration Strategy
|
||||
|
||||
### 7.1 Phase 1: Foundation (Week 1-2)
|
||||
|
||||
**Objectives:**
|
||||
- Set up CEFPython development environment
|
||||
- Create basic application structure
|
||||
- Implement database handler with migration support
|
||||
- Establish JavaScript-Python bridge
|
||||
|
||||
**Deliverables:**
|
||||
- [ ] Basic CEFPython application that loads TimeSafari web app
|
||||
- [ ] Database handler with SQLite integration
|
||||
- [ ] Migration system integration
|
||||
- [ ] JavaScript bridge for communication
|
||||
|
||||
### 7.2 Phase 2: Platform Integration (Week 3-4)
|
||||
|
||||
**Objectives:**
|
||||
- Implement CEFPython platform service
|
||||
- Integrate with existing migration system
|
||||
- Test database operations with real data
|
||||
- Validate migration compatibility
|
||||
|
||||
**Deliverables:**
|
||||
- [ ] CEFPython platform service implementation
|
||||
- [ ] Migration system integration
|
||||
- [ ] Database compatibility testing
|
||||
- [ ] Performance benchmarking
|
||||
|
||||
### 7.3 Phase 3: Feature Integration (Week 5-6)
|
||||
|
||||
**Objectives:**
|
||||
- Integrate with existing platform features
|
||||
- Implement API server integration
|
||||
- Add security features
|
||||
- Test with real user workflows
|
||||
|
||||
**Deliverables:**
|
||||
- [ ] Full feature compatibility
|
||||
- [ ] API integration
|
||||
- [ ] Security implementation
|
||||
- [ ] User workflow testing
|
||||
|
||||
### 7.4 Phase 4: Polish and Distribution (Week 7-8)
|
||||
|
||||
**Objectives:**
|
||||
- Optimize performance
|
||||
- Add build and distribution scripts
|
||||
- Create documentation
|
||||
- Prepare for release
|
||||
|
||||
**Deliverables:**
|
||||
- [ ] Performance optimization
|
||||
- [ ] Build automation
|
||||
- [ ] Documentation
|
||||
- [ ] Release-ready application
|
||||
|
||||
---
|
||||
|
||||
## 8. Risk Assessment
|
||||
|
||||
### 8.1 Technical Risks
|
||||
|
||||
| Risk | Probability | Impact | Mitigation |
|
||||
|------|-------------|--------|------------|
|
||||
| **CEFPython compatibility issues** | Medium | High | Use stable CEFPython version, test thoroughly |
|
||||
| **Migration system integration** | Low | High | Follow existing patterns, extensive testing |
|
||||
| **Performance issues** | Low | Medium | Benchmark early, optimize as needed |
|
||||
| **Security vulnerabilities** | Low | High | Implement security manager, regular audits |
|
||||
|
||||
### 8.2 Development Risks
|
||||
|
||||
| Risk | Probability | Impact | Mitigation |
|
||||
|------|-------------|--------|------------|
|
||||
| **Python/CEF knowledge gap** | Medium | Medium | Training, documentation, pair programming |
|
||||
| **Integration complexity** | Medium | Medium | Incremental development, extensive testing |
|
||||
| **Build system complexity** | Low | Medium | Automated build scripts, CI/CD |
|
||||
|
||||
---
|
||||
|
||||
## 9. Success Metrics
|
||||
|
||||
### 9.1 Technical Metrics
|
||||
|
||||
- [ ] **Migration Compatibility:** 100% compatibility with existing migration system
|
||||
- [ ] **Performance:** < 150MB memory usage, < 4s startup time
|
||||
- [ ] **Security:** Pass security audit, no critical vulnerabilities
|
||||
- [ ] **Reliability:** 99%+ uptime, < 1% error rate
|
||||
|
||||
### 9.2 Development Metrics
|
||||
|
||||
- [ ] **Code Quality:** 90%+ test coverage, < 5% code duplication
|
||||
- [ ] **Documentation:** Complete API documentation, user guides
|
||||
- [ ] **Build Automation:** Automated builds, CI/CD pipeline
|
||||
- [ ] **Release Readiness:** Production-ready application
|
||||
|
||||
---
|
||||
|
||||
## 10. Conclusion
|
||||
|
||||
### 10.1 Recommendation
|
||||
|
||||
**✅ PROCEED WITH IMPLEMENTATION**
|
||||
|
||||
CEFPython provides an excellent opportunity to add a robust desktop platform to TimeSafari with:
|
||||
|
||||
1. **Full Migration System Compatibility:** Can use the exact same migration system as Capacitor and web
|
||||
2. **Native Performance:** Python backend with Chromium rendering
|
||||
3. **Security:** Chromium's security model with Python backend isolation
|
||||
4. **Development Efficiency:** Follows established patterns and architecture
|
||||
|
||||
### 10.2 Implementation Priority
|
||||
|
||||
**High Priority:**
|
||||
- Database handler with migration support
|
||||
- JavaScript-Python bridge
|
||||
- Platform service integration
|
||||
- Basic application structure
|
||||
|
||||
**Medium Priority:**
|
||||
- Crypto handler integration
|
||||
- API server integration
|
||||
- Security features
|
||||
- Performance optimization
|
||||
|
||||
**Low Priority:**
|
||||
- Advanced features
|
||||
- Build automation
|
||||
- Documentation
|
||||
- Distribution packaging
|
||||
|
||||
### 10.3 Timeline
|
||||
|
||||
**Total Duration:** 8 weeks (2 months)
|
||||
**Team Size:** 1-2 developers
|
||||
**Risk Level:** Medium
|
||||
**Confidence:** 85%
|
||||
|
||||
The implementation leverages TimeSafari's existing architecture and migration system, making it a natural addition to the platform ecosystem while providing users with a high-performance desktop option.
|
||||
|
||||
---
|
||||
|
||||
## 11. Next Steps
|
||||
|
||||
1. **Immediate Actions:**
|
||||
- Set up development environment
|
||||
- Create basic CEFPython application structure
|
||||
- Implement database handler with migration support
|
||||
|
||||
2. **Week 1-2:**
|
||||
- Complete foundation implementation
|
||||
- Test migration system integration
|
||||
- Validate database operations
|
||||
|
||||
3. **Week 3-4:**
|
||||
- Implement platform service
|
||||
- Integrate with existing features
|
||||
- Begin performance testing
|
||||
|
||||
4. **Week 5-6:**
|
||||
- Complete feature integration
|
||||
- Security implementation
|
||||
- User workflow testing
|
||||
|
||||
5. **Week 7-8:**
|
||||
- Performance optimization
|
||||
- Build automation
|
||||
- Documentation and release preparation
|
||||
|
||||
This implementation will provide TimeSafari users with a robust, secure, and high-performance desktop application that seamlessly integrates with the existing ecosystem.
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,469 +0,0 @@
|
||||
# GiftedDialog Component Decomposition Plan
|
||||
|
||||
## Overview
|
||||
|
||||
This document outlines a comprehensive plan to refactor the GiftedDialog component by breaking it into smaller, more manageable sub-components. This approach will improve maintainability, testability, and reusability while preparing the codebase for future Pinia integration.
|
||||
|
||||
## Current State Analysis
|
||||
|
||||
The GiftedDialog component (1060 lines) is a complex Vue component that handles:
|
||||
|
||||
- **Two-step wizard UI**: Entity selection → Gift details
|
||||
- **Multiple entity types**: Person/Project as giver/recipient
|
||||
- **Complex conditional rendering**: Based on context and entity types
|
||||
- **Form validation and submission**: Gift recording with API integration
|
||||
- **State management**: UI flow, entity selection, form data
|
||||
|
||||
### Key Challenges
|
||||
|
||||
1. **Large single file**: Difficult to navigate and maintain
|
||||
2. **Mixed concerns**: UI logic, business logic, and API calls in one place
|
||||
3. **Complex state**: Multiple interconnected reactive properties
|
||||
4. **Testing difficulty**: Hard to test individual features in isolation
|
||||
5. **Reusability**: Components like entity grids could be reused elsewhere
|
||||
|
||||
## Decomposition Strategy
|
||||
|
||||
### Phase 1: Extract Display Components (✅ COMPLETED)
|
||||
|
||||
These components handle pure presentation with minimal business logic:
|
||||
|
||||
#### 1. PersonCard.vue ✅
|
||||
|
||||
- **Purpose**: Display individual person entities with selection capability
|
||||
- **Features**:
|
||||
- Person avatar using EntityIcon
|
||||
- Selection states (selectable, conflicted, disabled)
|
||||
- Time icon overlay for contacts
|
||||
- Click event handling
|
||||
- **Props**: `person`, `selectable`, `conflicted`, `showTimeIcon`
|
||||
- **Emits**: `person-selected`
|
||||
|
||||
#### 2. ProjectCard.vue ✅
|
||||
|
||||
- **Purpose**: Display individual project entities with selection capability
|
||||
- **Features**:
|
||||
- Project icon using ProjectIcon
|
||||
- Project name and issuer information
|
||||
- Click event handling
|
||||
- **Props**: `project`, `activeDid`, `allMyDids`, `allContacts`
|
||||
- **Emits**: `project-selected`
|
||||
|
||||
#### 3. EntitySummaryButton.vue ✅
|
||||
|
||||
- **Purpose**: Display selected entity with edit capability in step 2
|
||||
- **Features**:
|
||||
- Entity avatar (person or project)
|
||||
- Entity name and role label
|
||||
- Editable vs locked states
|
||||
- Edit button functionality
|
||||
- **Props**: `entity`, `entityType`, `label`, `editable`
|
||||
- **Emits**: `edit-requested`
|
||||
|
||||
#### 4. AmountInput.vue ✅
|
||||
|
||||
- **Purpose**: Specialized numeric input with increment/decrement controls
|
||||
- **Features**:
|
||||
- Increment/decrement buttons with validation
|
||||
- Configurable min/max values and step size
|
||||
- Input validation and formatting
|
||||
- v-model compatibility
|
||||
- **Props**: `value`, `min`, `max`, `step`, `inputId`
|
||||
- **Emits**: `update:value`
|
||||
|
||||
### Phase 2: Extract Layout Components (✅ COMPLETED)
|
||||
|
||||
These components handle layout and entity organization:
|
||||
|
||||
#### 5. EntityGrid.vue ✅
|
||||
|
||||
- **Purpose**: Unified grid layout for displaying people or projects
|
||||
- **Features**:
|
||||
- Responsive grid layout for people/projects
|
||||
- Special entity integration (You, Unnamed)
|
||||
- Conflict detection integration
|
||||
- Empty state messaging
|
||||
- Show All navigation
|
||||
- Event delegation for entity selection
|
||||
- **Props**: `entityType`, `entities`, `maxItems`, `activeDid`, `allMyDids`, `allContacts`, `conflictChecker`, `showYouEntity`, `youSelectable`, `showAllRoute`, `showAllQueryParams`
|
||||
- **Emits**: `entity-selected`
|
||||
|
||||
#### 6. SpecialEntityCard.vue ✅
|
||||
|
||||
- **Purpose**: Handle special entities like "You" and "Unnamed"
|
||||
- **Features**:
|
||||
- Special icon display (hand, question mark)
|
||||
- Conflict state handling
|
||||
- Configurable styling based on entity type
|
||||
- Click event handling
|
||||
- **Props**: `entityType`, `label`, `icon`, `selectable`, `conflicted`, `entityData`
|
||||
- **Emits**: `entity-selected`
|
||||
|
||||
#### 7. ShowAllCard.vue ✅
|
||||
|
||||
- **Purpose**: Handle "Show All" navigation functionality
|
||||
- **Features**:
|
||||
- Router-link integration
|
||||
- Query parameter passing
|
||||
- Consistent visual styling
|
||||
- Hover effects
|
||||
- **Props**: `entityType`, `routeName`, `queryParams`
|
||||
- **Emits**: None (uses router-link)
|
||||
|
||||
### Phase 3: Extract Step Components (✅ COMPLETED)
|
||||
|
||||
These components handle major UI sections:
|
||||
|
||||
#### 8. EntitySelectionStep.vue ✅
|
||||
|
||||
- **Purpose**: Complete step 1 entity selection interface
|
||||
- **Features**:
|
||||
- Dynamic step labeling based on context
|
||||
- EntityGrid integration for unified entity display
|
||||
- Conflict detection and prevention
|
||||
- Special entity handling (You, Unnamed)
|
||||
- Show All navigation with context preservation
|
||||
- Cancel functionality
|
||||
- Event delegation for entity selection
|
||||
- **Props**: `stepType`, `giverEntityType`, `recipientEntityType`, `showProjects`, `isFromProjectView`, `projects`, `allContacts`, `activeDid`, `allMyDids`, `conflictChecker`, `fromProjectId`, `toProjectId`, `giver`, `receiver`
|
||||
- **Emits**: `entity-selected`, `cancel`
|
||||
|
||||
#### 9. GiftDetailsStep.vue ✅
|
||||
|
||||
- **Purpose**: Complete step 2 gift details form interface
|
||||
- **Features**:
|
||||
- Entity summary display with edit capability
|
||||
- Gift description input with placeholder support
|
||||
- Amount input with increment/decrement controls
|
||||
- Unit code selection (HUR, USD, BTC, etc.)
|
||||
- Photo & more options navigation
|
||||
- Conflict detection and warning display
|
||||
- Form validation and submission
|
||||
- Cancel functionality
|
||||
- **Props**: `giver`, `receiver`, `giverEntityType`, `recipientEntityType`, `description`, `amount`, `unitCode`, `prompt`, `isFromProjectView`, `hasConflict`, `offerId`, `fromProjectId`, `toProjectId`
|
||||
- **Emits**: `update:description`, `update:amount`, `update:unitCode`, `edit-entity`, `explain-data`, `submit`, `cancel`
|
||||
|
||||
### Phase 4: Refactor Main Component (FINAL)
|
||||
|
||||
#### 9. GiftedDialog.vue (PLANNED REFACTOR)
|
||||
|
||||
- **Purpose**: Orchestrate sub-components and manage overall state
|
||||
- **Responsibilities**:
|
||||
- Step navigation logic
|
||||
- Entity conflict detection
|
||||
- API integration for gift recording
|
||||
- Success/error handling
|
||||
- Dialog visibility management
|
||||
|
||||
## Implementation Progress
|
||||
|
||||
### ✅ Completed Components
|
||||
|
||||
**Phase 1: Display Components**
|
||||
|
||||
1. **PersonCard.vue** - Individual person display with selection
|
||||
2. **ProjectCard.vue** - Individual project display with selection
|
||||
3. **EntitySummaryButton.vue** - Selected entity display with edit capability
|
||||
4. **AmountInput.vue** - Numeric input with increment/decrement controls
|
||||
|
||||
**Phase 2: Layout Components**
|
||||
5. **EntityGrid.vue** - Unified grid layout for entity selection
|
||||
6. **SpecialEntityCard.vue** - Special entities (You, Unnamed) with conflict handling
|
||||
7. **ShowAllCard.vue** - Show All navigation with router integration
|
||||
|
||||
**Phase 3: Step Components**
|
||||
8. **EntitySelectionStep.vue** - Complete step 1 entity selection interface
|
||||
9. **GiftDetailsStep.vue** - Complete step 2 gift details form interface
|
||||
|
||||
### 🔄 Next Steps
|
||||
|
||||
1. **Update GiftedDialog.vue** - Integrate all Phase 1-3 components
|
||||
2. **Test integration** - Ensure functionality remains intact
|
||||
3. **Create unit tests** - For all new components
|
||||
4. **Performance validation** - Ensure no regression
|
||||
5. **Phase 4 planning** - Refactor main component to orchestration only
|
||||
|
||||
### 📋 Future Phases
|
||||
|
||||
1. **Extract EntitySelectionStep.vue** - Complete step 1 logic
|
||||
2. **Extract GiftDetailsStep.vue** - Complete step 2 logic
|
||||
3. **Refactor main component** - Minimal orchestration logic
|
||||
4. **Add comprehensive tests** - Unit tests for each component
|
||||
5. **Prepare for Pinia** - State management migration
|
||||
|
||||
## Benefits of This Approach
|
||||
|
||||
### 1. Incremental Refactoring
|
||||
|
||||
- Each phase can be implemented and tested independently
|
||||
- Reduces risk of breaking existing functionality
|
||||
- Allows for gradual improvement over time
|
||||
|
||||
### 2. Improved Maintainability
|
||||
- Smaller, focused components are easier to understand
|
||||
- Clear separation of concerns
|
||||
- Easier to locate and fix bugs
|
||||
|
||||
### 3. Enhanced Testability
|
||||
- Individual components can be unit tested in isolation
|
||||
- Easier to mock dependencies
|
||||
- Better test coverage possible
|
||||
|
||||
### 4. Better Reusability
|
||||
- Components like EntityGrid can be used in other views
|
||||
- PersonCard and ProjectCard can be used throughout the app
|
||||
- AmountInput can be reused for other numeric inputs
|
||||
|
||||
### 5. Pinia Preparation
|
||||
- Smaller components make state management migration easier
|
||||
- Clear data flow patterns emerge
|
||||
- Easier to identify what state should be global vs local
|
||||
|
||||
## Integration Examples
|
||||
|
||||
### Using PersonCard in EntityGrid
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<ul class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-2 gap-y-4">
|
||||
<PersonCard
|
||||
v-for="person in people"
|
||||
:key="person.did"
|
||||
:person="person"
|
||||
:conflicted="wouldCreateConflict(person.did)"
|
||||
@person-selected="handlePersonSelected"
|
||||
/>
|
||||
</ul>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Using AmountInput in GiftDetailsStep
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<AmountInput
|
||||
:value="amount"
|
||||
:min="0"
|
||||
:max="1000"
|
||||
input-id="gift-amount"
|
||||
@update:value="amount = $event"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Using EntitySummaryButton in GiftDetailsStep
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<EntitySummaryButton
|
||||
:entity="giver"
|
||||
entity-type="person"
|
||||
label="Received from:"
|
||||
:editable="canEditGiver"
|
||||
@edit-requested="handleEditGiver"
|
||||
/>
|
||||
<EntitySummaryButton
|
||||
:entity="receiver"
|
||||
entity-type="person"
|
||||
label="Given to:"
|
||||
:editable="canEditReceiver"
|
||||
@edit-requested="handleEditReceiver"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Using EntityGrid in EntitySelectionStep
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<label class="block font-bold mb-4">
|
||||
{{ stepLabel }}
|
||||
</label>
|
||||
|
||||
<EntityGrid
|
||||
:entity-type="shouldShowProjects ? 'projects' : 'people'"
|
||||
:entities="shouldShowProjects ? projects : allContacts"
|
||||
:max-items="10"
|
||||
:active-did="activeDid"
|
||||
:all-my-dids="allMyDids"
|
||||
:all-contacts="allContacts"
|
||||
:conflict-checker="wouldCreateConflict"
|
||||
:show-you-entity="showYouEntity"
|
||||
:you-selectable="youSelectable"
|
||||
:show-all-route="showAllRoute"
|
||||
:show-all-query-params="showAllQueryParams"
|
||||
@entity-selected="handleEntitySelected"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Using SpecialEntityCard Standalone
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<ul class="grid grid-cols-4 gap-2">
|
||||
<SpecialEntityCard
|
||||
entity-type="you"
|
||||
label="You"
|
||||
icon="hand"
|
||||
:conflicted="wouldCreateConflict(activeDid)"
|
||||
:entity-data="{ did: activeDid, name: 'You' }"
|
||||
@entity-selected="handleYouSelected"
|
||||
/>
|
||||
|
||||
<SpecialEntityCard
|
||||
entity-type="unnamed"
|
||||
label="Unnamed"
|
||||
icon="circle-question"
|
||||
:entity-data="{ did: '', name: 'Unnamed' }"
|
||||
@entity-selected="handleUnnamedSelected"
|
||||
/>
|
||||
</ul>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Using EntitySelectionStep in GiftedDialog
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div v-show="currentStep === 1">
|
||||
<EntitySelectionStep
|
||||
:step-type="stepType"
|
||||
:giver-entity-type="giverEntityType"
|
||||
:recipient-entity-type="recipientEntityType"
|
||||
:show-projects="showProjects"
|
||||
:is-from-project-view="isFromProjectView"
|
||||
:projects="projects"
|
||||
:all-contacts="allContacts"
|
||||
:active-did="activeDid"
|
||||
:all-my-dids="allMyDids"
|
||||
:conflict-checker="wouldCreateConflict"
|
||||
:from-project-id="fromProjectId"
|
||||
:to-project-id="toProjectId"
|
||||
:giver="giver"
|
||||
:receiver="receiver"
|
||||
@entity-selected="handleEntitySelected"
|
||||
@cancel="cancel"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Using GiftDetailsStep in GiftedDialog
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div v-show="currentStep === 2">
|
||||
<GiftDetailsStep
|
||||
:giver="giver"
|
||||
:receiver="receiver"
|
||||
:giver-entity-type="giverEntityType"
|
||||
:recipient-entity-type="recipientEntityType"
|
||||
:description="description"
|
||||
:amount="parseFloat(amountInput)"
|
||||
:unit-code="unitCode"
|
||||
:prompt="prompt"
|
||||
:is-from-project-view="isFromProjectView"
|
||||
:has-conflict="hasPersonConflict"
|
||||
:offer-id="offerId"
|
||||
:from-project-id="fromProjectId"
|
||||
:to-project-id="toProjectId"
|
||||
@update:description="description = $event"
|
||||
@update:amount="amountInput = $event.toString()"
|
||||
@update:unit-code="unitCode = $event"
|
||||
@edit-entity="handleEditEntity"
|
||||
@explain-data="explainData"
|
||||
@submit="handleSubmit"
|
||||
@cancel="cancel"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Migration Strategy
|
||||
|
||||
### Backward Compatibility
|
||||
- Maintain existing API and prop interfaces
|
||||
- Ensure all existing functionality works unchanged
|
||||
- Preserve all event emissions and callbacks
|
||||
|
||||
### Testing Strategy
|
||||
- Create unit tests for each new component
|
||||
- Maintain existing integration tests
|
||||
- Add visual regression tests for UI components
|
||||
|
||||
### Performance Considerations
|
||||
- Monitor bundle size impact
|
||||
- Ensure no performance regression
|
||||
- Optimize component loading if needed
|
||||
|
||||
## Security Considerations
|
||||
|
||||
### Input Validation
|
||||
- AmountInput includes proper numeric validation
|
||||
- All user inputs are validated before processing
|
||||
- XSS prevention through proper Vue templating
|
||||
|
||||
### Data Handling
|
||||
- No sensitive data stored in component state
|
||||
- Proper prop validation and type checking
|
||||
- Secure API communication maintained
|
||||
|
||||
## Conclusion
|
||||
|
||||
This decomposition plan provides a structured approach to refactoring the GiftedDialog component while maintaining functionality and preparing for future enhancements. The incremental approach reduces risk and allows for continuous improvement of the codebase.
|
||||
|
||||
The completed Phase 1 components (PersonCard, ProjectCard, EntitySummaryButton, AmountInput) provide a solid foundation for the remaining phases and demonstrate the benefits of component decomposition in terms of maintainability, testability, and reusability.
|
||||
|
||||
---
|
||||
|
||||
## Final Integration Results
|
||||
|
||||
### ✅ **INTEGRATION COMPLETE**
|
||||
|
||||
**Completed on**: 2025-01-28
|
||||
|
||||
**Results:**
|
||||
- **Main GiftedDialog template**: Reduced from ~200 lines to ~20 lines
|
||||
- **Components created**: 9 focused, reusable components
|
||||
- **Lines of code**: ~2,000 lines of well-structured component code
|
||||
- **Backward compatibility**: 100% maintained
|
||||
- **Build status**: ✅ Passing
|
||||
- **Runtime status**: ✅ Working
|
||||
|
||||
**Components Successfully Integrated:**
|
||||
|
||||
1. **PersonCard.vue** - Individual person display with conflict detection
|
||||
2. **ProjectCard.vue** - Individual project display with issuer info
|
||||
3. **EntitySummaryButton.vue** - Selected entity display with edit capability
|
||||
4. **AmountInput.vue** - Numeric input with validation and controls
|
||||
5. **SpecialEntityCard.vue** - "You" and "Unnamed" entity handling
|
||||
6. **ShowAllCard.vue** - Navigation with router integration
|
||||
7. **EntityGrid.vue** - Unified grid layout orchestration
|
||||
8. **EntitySelectionStep.vue** - Complete Step 1 interface
|
||||
9. **GiftDetailsStep.vue** - Complete Step 2 interface
|
||||
|
||||
**Integration Benefits Achieved:**
|
||||
- ✅ **Maintainability**: Each component has single responsibility
|
||||
- ✅ **Testability**: Components can be unit tested in isolation
|
||||
- ✅ **Reusability**: Components can be used across the application
|
||||
- ✅ **Readability**: Clear separation of concerns and focused logic
|
||||
- ✅ **Debugging**: Easier to identify and fix issues
|
||||
- ✅ **Performance**: No performance regression, improved code splitting
|
||||
|
||||
**Next Steps:**
|
||||
1. **Pinia State Management**: Ready for state management migration
|
||||
2. **Component Testing**: Add comprehensive unit tests
|
||||
3. **Visual Testing**: Add Playwright component tests
|
||||
4. **Documentation**: Update component documentation
|
||||
5. **Optimization**: Fine-tune performance if needed
|
||||
|
||||
---
|
||||
|
||||
**Author**: Matthew Raymer
|
||||
**Last Updated**: 2025-01-28
|
||||
**Status**: ✅ **INTEGRATION COMPLETE - READY FOR PRODUCTION**
|
||||
File diff suppressed because it is too large
Load Diff
@@ -31,8 +31,8 @@ android {
|
||||
applicationId "app.timesafari.app"
|
||||
minSdkVersion rootProject.ext.minSdkVersion
|
||||
targetSdkVersion rootProject.ext.targetSdkVersion
|
||||
versionCode 26
|
||||
versionName "0.5.1"
|
||||
versionCode 30
|
||||
versionName "0.5.4"
|
||||
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
|
||||
aaptOptions {
|
||||
// Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
|
||||
|
||||
@@ -19,14 +19,14 @@
|
||||
},
|
||||
"SQLite": {
|
||||
"iosDatabaseLocation": "Library/CapacitorDatabase",
|
||||
"iosIsEncryption": true,
|
||||
"iosIsEncryption": false,
|
||||
"iosBiometric": {
|
||||
"biometricAuth": true,
|
||||
"biometricAuth": false,
|
||||
"biometricTitle": "Biometric login for TimeSafari"
|
||||
},
|
||||
"androidIsEncryption": true,
|
||||
"androidIsEncryption": false,
|
||||
"androidBiometric": {
|
||||
"biometricAuth": true,
|
||||
"biometricAuth": false,
|
||||
"biometricTitle": "Biometric login for TimeSafari"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,14 +19,14 @@
|
||||
},
|
||||
"SQLite": {
|
||||
"iosDatabaseLocation": "Library/CapacitorDatabase",
|
||||
"iosIsEncryption": true,
|
||||
"iosIsEncryption": false,
|
||||
"iosBiometric": {
|
||||
"biometricAuth": true,
|
||||
"biometricAuth": false,
|
||||
"biometricTitle": "Biometric login for TimeSafari"
|
||||
},
|
||||
"androidIsEncryption": true,
|
||||
"androidIsEncryption": false,
|
||||
"androidBiometric": {
|
||||
"biometricAuth": true,
|
||||
"biometricAuth": false,
|
||||
"biometricTitle": "Biometric login for TimeSafari"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,224 +0,0 @@
|
||||
# GiftedDialog Complete Documentation
|
||||
|
||||
## Overview
|
||||
|
||||
The GiftedDialog system is a sophisticated multi-step dialog for recording gifts between people and projects in the TimeSafari application. It consists of a main orchestrating component and 9 specialized child components that handle different aspects of the gift recording workflow.
|
||||
|
||||
## Key Features
|
||||
|
||||
- **Two-Step Workflow**: Entity selection → Gift details
|
||||
- **Multi-Entity Support**: People, projects, and special entities
|
||||
- **Conflict Detection**: Prevents invalid gift combinations
|
||||
- **Responsive Design**: Works across all device sizes
|
||||
- **Accessibility**: Full keyboard navigation and screen reader support
|
||||
- **Validation**: Comprehensive form validation and error handling
|
||||
- **Flexible Integration**: Can be embedded in any view with different contexts
|
||||
|
||||
## Component Architecture
|
||||
|
||||
### Main Component
|
||||
- **GiftedDialog.vue** - Main orchestrating component that manages dialog state, step navigation, and API integration
|
||||
|
||||
### Step Components
|
||||
- **EntitySelectionStep.vue** - Step 1 controller with dynamic labeling and context awareness
|
||||
- **GiftDetailsStep.vue** - Step 2 controller with form validation and entity summaries
|
||||
|
||||
### Layout Components
|
||||
- **EntityGrid.vue** - Unified entity grid layout with responsive design
|
||||
- **EntitySummaryButton.vue** - Selected entity display with edit capability
|
||||
|
||||
### Display Components
|
||||
- **PersonCard.vue** - Individual person display with avatar and selection states
|
||||
- **ProjectCard.vue** - Individual project display with icons and issuer information
|
||||
- **SpecialEntityCard.vue** - Special entities (You, Unnamed) with conflict detection
|
||||
- **ShowAllCard.vue** - Navigation component with router integration
|
||||
|
||||
### Input Components
|
||||
- **AmountInput.vue** - Numeric input with increment/decrement controls and validation
|
||||
|
||||
## Data Flow
|
||||
|
||||
### Step 1: Entity Selection
|
||||
1. User opens dialog → GiftedDialog renders EntitySelectionStep
|
||||
2. EntitySelectionStep renders EntityGrid with entities and configuration
|
||||
3. EntityGrid renders PersonCard/ProjectCard/SpecialEntityCard components
|
||||
4. User clicks entity → Card emits to Grid → Grid emits to Step → Step emits to Dialog
|
||||
5. GiftedDialog updates state and advances to step 2
|
||||
|
||||
### Step 2: Gift Details
|
||||
1. GiftedDialog renders GiftDetailsStep with selected entities
|
||||
2. GiftDetailsStep renders EntitySummaryButton and AmountInput components
|
||||
3. User fills form and clicks submit → Step emits to Dialog
|
||||
4. GiftedDialog processes submission via API and handles success/error
|
||||
|
||||
## Key Props and Configuration
|
||||
|
||||
### GiftedDialog Props
|
||||
```typescript
|
||||
interface GiftedDialogProps {
|
||||
fromProjectId?: string; // Project ID when project is giver
|
||||
toProjectId?: string; // Project ID when project is recipient
|
||||
showProjects?: boolean; // Whether to show projects
|
||||
isFromProjectView?: boolean; // Context flag for project views
|
||||
}
|
||||
```
|
||||
|
||||
### Opening the Dialog
|
||||
```typescript
|
||||
// Basic usage
|
||||
giftedDialog.open();
|
||||
|
||||
// With pre-selected entities and context
|
||||
giftedDialog.open(
|
||||
giverEntity, // Pre-selected giver
|
||||
receiverEntity, // Pre-selected receiver
|
||||
offerId, // Offer context
|
||||
customTitle, // Custom dialog title
|
||||
prompt, // Custom input prompt
|
||||
successCallback // Success handler
|
||||
);
|
||||
```
|
||||
|
||||
## Integration Patterns
|
||||
|
||||
### Basic Integration
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<button @click="openGiftDialog">Record Gift</button>
|
||||
<GiftedDialog ref="giftedDialog" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default class Example extends Vue {
|
||||
openGiftDialog() {
|
||||
const dialog = this.$refs.giftedDialog as GiftedDialog;
|
||||
dialog.open();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Project Context Integration
|
||||
```typescript
|
||||
// Gift from project
|
||||
dialog.open(
|
||||
projectEntity, // Project as giver
|
||||
undefined, // User selects receiver
|
||||
undefined, // No offer
|
||||
"Gift from Project",
|
||||
"What did this project provide?"
|
||||
);
|
||||
|
||||
// Gift to project
|
||||
dialog.open(
|
||||
undefined, // User selects giver
|
||||
projectEntity, // Project as receiver
|
||||
undefined, // No offer
|
||||
"Gift to Project",
|
||||
"What was contributed to this project?"
|
||||
);
|
||||
```
|
||||
|
||||
## State Management
|
||||
|
||||
The dialog manages internal state through a reactive system:
|
||||
|
||||
- **Step Navigation**: Controls progression from entity selection to gift details
|
||||
- **Entity Selection**: Tracks selected giver and receiver entities
|
||||
- **Conflict Detection**: Prevents selecting same person for both roles
|
||||
- **Form Validation**: Ensures required fields are completed
|
||||
- **API Integration**: Handles gift submission and response processing
|
||||
|
||||
## Conflict Detection Logic
|
||||
|
||||
```typescript
|
||||
function wouldCreateConflict(selectedDid: string): boolean {
|
||||
// Only applies to person-to-person gifts
|
||||
if (giverEntityType !== "person" || recipientEntityType !== "person") {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check if selecting same person for both roles
|
||||
if (stepType === "giver") {
|
||||
return receiver?.did === selectedDid;
|
||||
} else if (stepType === "recipient") {
|
||||
return giver?.did === selectedDid;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
```
|
||||
|
||||
## AmountInput Component Fix
|
||||
|
||||
The AmountInput component was recently fixed to resolve an issue where increment/decrement buttons weren't updating the displayed value:
|
||||
|
||||
### Problem
|
||||
- Input field used `:value="displayValue"` (one-way binding)
|
||||
- Programmatic updates to `displayValue` weren't reflected in DOM
|
||||
|
||||
### Solution
|
||||
- Changed to `v-model="displayValue"` (two-way binding)
|
||||
- Now properly synchronizes programmatic and user input changes
|
||||
|
||||
### Usage
|
||||
```vue
|
||||
<AmountInput
|
||||
:value="amount"
|
||||
:min="0"
|
||||
:max="1000"
|
||||
:step="1"
|
||||
@update:value="handleAmountChange"
|
||||
/>
|
||||
```
|
||||
|
||||
## Testing Strategy
|
||||
|
||||
### Unit Testing
|
||||
- Individual component behavior
|
||||
- Props validation
|
||||
- Event emission
|
||||
- Computed property calculations
|
||||
|
||||
### Integration Testing
|
||||
- Multi-component workflows
|
||||
- State management
|
||||
- API integration
|
||||
- Error handling
|
||||
|
||||
### End-to-End Testing
|
||||
- Complete user workflows
|
||||
- Cross-browser compatibility
|
||||
- Accessibility compliance
|
||||
- Performance validation
|
||||
|
||||
## Security Considerations
|
||||
|
||||
- **Input Validation**: All user inputs are sanitized and validated
|
||||
- **DID Privacy**: User identifiers only shared with authorized contacts
|
||||
- **API Security**: Requests are cryptographically signed
|
||||
- **XSS Prevention**: Template sanitization and CSP headers
|
||||
|
||||
## Performance Optimizations
|
||||
|
||||
- **Lazy Loading**: Components loaded only when needed
|
||||
- **Virtual Scrolling**: For large entity lists
|
||||
- **Debounced Input**: Prevents excessive API calls
|
||||
- **Computed Properties**: Efficient reactive calculations
|
||||
- **Memory Management**: Proper cleanup on component destruction
|
||||
|
||||
## Accessibility Features
|
||||
|
||||
- **Keyboard Navigation**: Full tab order and keyboard shortcuts
|
||||
- **Screen Reader Support**: ARIA labels and semantic HTML
|
||||
- **Focus Management**: Proper focus handling on open/close
|
||||
- **High Contrast**: Supports high contrast themes
|
||||
- **Responsive Design**: Works on all screen sizes
|
||||
|
||||
---
|
||||
|
||||
**Author**: Matthew Raymer
|
||||
**Last Updated**: 2025-06-30
|
||||
**Version**: 1.0.0
|
||||
221
docs/DATABASE_CONNECTION_FIXES.md
Normal file
221
docs/DATABASE_CONNECTION_FIXES.md
Normal file
@@ -0,0 +1,221 @@
|
||||
# Database Connection Fixes for TimeSafari
|
||||
|
||||
## Overview
|
||||
|
||||
This document outlines the fixes implemented to resolve database connection issues in the TimeSafari application, particularly for Capacitor SQLite on Android devices.
|
||||
|
||||
## Issues Identified
|
||||
|
||||
### 1. CapacitorSQLitePlugin Errors
|
||||
- Multiple `*** ERROR CapacitorSQLitePlugin: null` messages in Android logs
|
||||
- Database connection conflicts and initialization failures
|
||||
- Connection leaks causing "Connection timesafari.sqlite already exists" errors
|
||||
|
||||
### 2. Performance Issues
|
||||
- App skipping 57 frames due to main thread blocking
|
||||
- Null pointer exceptions in garbage collection
|
||||
- Memory management issues
|
||||
|
||||
### 3. Connection Management
|
||||
- Lack of proper connection cleanup on app lifecycle events
|
||||
- No retry logic for failed connections
|
||||
- Missing error handling and recovery mechanisms
|
||||
|
||||
## Implemented Fixes
|
||||
|
||||
### 1. Enhanced Database Initialization
|
||||
|
||||
#### Connection Cleanup
|
||||
- Added `cleanupExistingConnections()` method to properly close existing connections
|
||||
- Implemented connection consistency checks before creating new connections
|
||||
- Added proper error handling for connection cleanup failures
|
||||
|
||||
#### Retry Logic
|
||||
- Implemented exponential backoff retry mechanism for database connections
|
||||
- Maximum of 3 retry attempts with increasing delays
|
||||
- Comprehensive error logging for each attempt
|
||||
|
||||
#### Database Configuration
|
||||
- Configured optimal SQLite settings for performance and stability:
|
||||
- `PRAGMA journal_mode=WAL` for better concurrency
|
||||
- `PRAGMA synchronous=NORMAL` for balanced performance
|
||||
- `PRAGMA cache_size=10000` for improved caching
|
||||
- `PRAGMA temp_store=MEMORY` for faster temporary operations
|
||||
- `PRAGMA mmap_size=268435456` (256MB) for memory mapping
|
||||
|
||||
### 2. Lifecycle Management
|
||||
|
||||
#### App Lifecycle Listeners
|
||||
- Added event listeners for `beforeunload` and `visibilitychange`
|
||||
- Automatic database cleanup when app goes to background
|
||||
- Proper resource management to prevent connection leaks
|
||||
|
||||
#### Health Monitoring
|
||||
- Implemented `healthCheck()` method for connection status monitoring
|
||||
- Added `reinitializeDatabase()` for forced reconnection
|
||||
- Performance metrics tracking for database operations
|
||||
|
||||
### 3. Error Handling and Diagnostics
|
||||
|
||||
#### Comprehensive Error Handling
|
||||
- Enhanced error logging with detailed context
|
||||
- Graceful degradation when database operations fail
|
||||
- User-friendly error messages with recovery suggestions
|
||||
|
||||
#### Diagnostic Tools
|
||||
- Created `databaseDiagnostics.ts` utility for troubleshooting
|
||||
- Database stress testing capabilities
|
||||
- Performance monitoring and reporting
|
||||
- System information collection for debugging
|
||||
|
||||
### 4. Configuration Changes
|
||||
|
||||
#### Capacitor Configuration
|
||||
- Temporarily disabled encryption to isolate connection issues
|
||||
- Disabled biometric authentication to reduce complexity
|
||||
- Maintained proper database location settings
|
||||
|
||||
#### Camera Integration Fixes
|
||||
- Fixed `CameraDirection` enum usage for Capacitor Camera v6
|
||||
- Updated from string literals to proper enum values
|
||||
- Resolved TypeScript compilation errors
|
||||
|
||||
## Usage
|
||||
|
||||
### Running Diagnostics
|
||||
|
||||
```typescript
|
||||
import { runDatabaseDiagnostics, stressTestDatabase } from '@/utils/databaseDiagnostics';
|
||||
|
||||
// Run comprehensive diagnostics
|
||||
const diagnosticInfo = await runDatabaseDiagnostics();
|
||||
console.log('Database status:', diagnosticInfo.connectionStatus);
|
||||
|
||||
// Run stress test
|
||||
await stressTestDatabase(20);
|
||||
```
|
||||
|
||||
### Health Checks
|
||||
|
||||
```typescript
|
||||
import { PlatformServiceFactory } from '@/services/PlatformServiceFactory';
|
||||
|
||||
const platformService = PlatformServiceFactory.getInstance();
|
||||
const health = await platformService.healthCheck();
|
||||
|
||||
if (!health.healthy) {
|
||||
console.error('Database health check failed:', health.error);
|
||||
// Attempt reinitialization
|
||||
await platformService.reinitializeDatabase();
|
||||
}
|
||||
```
|
||||
|
||||
### Performance Monitoring
|
||||
|
||||
```typescript
|
||||
import { logDatabasePerformance } from '@/utils/databaseDiagnostics';
|
||||
|
||||
// Wrap database operations with performance monitoring
|
||||
const start = Date.now();
|
||||
await platformService.dbQuery("SELECT * FROM users");
|
||||
const duration = Date.now() - start;
|
||||
logDatabasePerformance("User query", duration);
|
||||
```
|
||||
|
||||
## Troubleshooting Guide
|
||||
|
||||
### Common Issues and Solutions
|
||||
|
||||
#### 1. "Connection timesafari.sqlite already exists"
|
||||
**Cause**: Multiple database connections not properly closed
|
||||
**Solution**:
|
||||
- Use the enhanced cleanup methods
|
||||
- Check for existing connections before creating new ones
|
||||
- Implement proper app lifecycle management
|
||||
|
||||
#### 2. CapacitorSQLitePlugin null errors
|
||||
**Cause**: Database initialization failures or connection conflicts
|
||||
**Solution**:
|
||||
- Use retry logic with exponential backoff
|
||||
- Check connection consistency
|
||||
- Verify database configuration settings
|
||||
|
||||
#### 3. Performance Issues
|
||||
**Cause**: Main thread blocking or inefficient database operations
|
||||
**Solution**:
|
||||
- Use WAL journal mode for better concurrency
|
||||
- Implement proper connection pooling
|
||||
- Monitor and optimize query performance
|
||||
|
||||
#### 4. Memory Leaks
|
||||
**Cause**: Database connections not properly closed
|
||||
**Solution**:
|
||||
- Implement proper cleanup on app lifecycle events
|
||||
- Use health checks to monitor connection status
|
||||
- Force reinitialization when issues are detected
|
||||
|
||||
### Debugging Steps
|
||||
|
||||
1. **Check Logs**: Look for database-related error messages
|
||||
2. **Run Diagnostics**: Use `runDatabaseDiagnostics()` to get system status
|
||||
3. **Monitor Performance**: Track query execution times
|
||||
4. **Test Connections**: Use stress testing to identify issues
|
||||
5. **Verify Configuration**: Check Capacitor and SQLite settings
|
||||
|
||||
### Recovery Procedures
|
||||
|
||||
#### Automatic Recovery
|
||||
- Health checks run periodically
|
||||
- Automatic reinitialization on connection failures
|
||||
- Graceful degradation for non-critical operations
|
||||
|
||||
#### Manual Recovery
|
||||
- Force app restart to clear all connections
|
||||
- Clear app data if persistent issues occur
|
||||
- Check device storage and permissions
|
||||
|
||||
## Security Considerations
|
||||
|
||||
### Data Protection
|
||||
- Encryption can be re-enabled once connection issues are resolved
|
||||
- Biometric authentication can be restored after stability is confirmed
|
||||
- Proper error handling prevents data corruption
|
||||
|
||||
### Privacy
|
||||
- Diagnostic information is logged locally only
|
||||
- No sensitive data is exposed in error messages
|
||||
- User data remains protected during recovery procedures
|
||||
|
||||
## Performance Impact
|
||||
|
||||
### Improvements
|
||||
- Reduced connection initialization time
|
||||
- Better memory usage through proper cleanup
|
||||
- Improved app responsiveness with background processing
|
||||
- Enhanced error recovery reduces user impact
|
||||
|
||||
### Monitoring
|
||||
- Performance metrics are tracked automatically
|
||||
- Slow operations are logged with warnings
|
||||
- System resource usage is monitored
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
### Planned Improvements
|
||||
1. **Connection Pooling**: Implement proper connection pooling for better performance
|
||||
2. **Encryption Re-enablement**: Restore encryption once stability is confirmed
|
||||
3. **Advanced Monitoring**: Add real-time performance dashboards
|
||||
4. **Automated Recovery**: Implement self-healing mechanisms
|
||||
|
||||
### Research Areas
|
||||
1. **Alternative Storage**: Investigate other storage solutions for specific use cases
|
||||
2. **Migration Tools**: Develop tools for seamless data migration
|
||||
3. **Cross-Platform Optimization**: Optimize for different device capabilities
|
||||
|
||||
## Conclusion
|
||||
|
||||
These fixes address the core database connection issues while maintaining application stability and user experience. The enhanced error handling, monitoring, and recovery mechanisms provide a robust foundation for reliable database operations across all platforms.
|
||||
|
||||
## Author
|
||||
|
||||
Matthew Raymer - Database Architecture and Mobile Platform Development
|
||||
@@ -403,7 +403,7 @@
|
||||
buildSettings = {
|
||||
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
|
||||
CODE_SIGN_STYLE = Automatic;
|
||||
CURRENT_PROJECT_VERSION = 26;
|
||||
CURRENT_PROJECT_VERSION = 30;
|
||||
DEVELOPMENT_TEAM = GM3FS5JQPH;
|
||||
ENABLE_APP_SANDBOX = NO;
|
||||
ENABLE_USER_SCRIPT_SANDBOXING = NO;
|
||||
@@ -413,7 +413,7 @@
|
||||
"$(inherited)",
|
||||
"@executable_path/Frameworks",
|
||||
);
|
||||
MARKETING_VERSION = 0.5.1;
|
||||
MARKETING_VERSION = 0.5.4;
|
||||
OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
|
||||
PRODUCT_BUNDLE_IDENTIFIER = app.timesafari;
|
||||
PRODUCT_NAME = "$(TARGET_NAME)";
|
||||
@@ -430,7 +430,7 @@
|
||||
buildSettings = {
|
||||
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
|
||||
CODE_SIGN_STYLE = Automatic;
|
||||
CURRENT_PROJECT_VERSION = 26;
|
||||
CURRENT_PROJECT_VERSION = 30;
|
||||
DEVELOPMENT_TEAM = GM3FS5JQPH;
|
||||
ENABLE_APP_SANDBOX = NO;
|
||||
ENABLE_USER_SCRIPT_SANDBOXING = NO;
|
||||
@@ -440,7 +440,7 @@
|
||||
"$(inherited)",
|
||||
"@executable_path/Frameworks",
|
||||
);
|
||||
MARKETING_VERSION = 0.5.1;
|
||||
MARKETING_VERSION = 0.5.4;
|
||||
PRODUCT_BUNDLE_IDENTIFIER = app.timesafari;
|
||||
PRODUCT_NAME = "$(TARGET_NAME)";
|
||||
SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
|
||||
|
||||
1312
package-lock.json
generated
1312
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "timesafari",
|
||||
"version": "0.5.1",
|
||||
"version": "0.5.4",
|
||||
"description": "Time Safari Application",
|
||||
"author": {
|
||||
"name": "Time Safari Team"
|
||||
|
||||
Binary file not shown.
@@ -1,207 +0,0 @@
|
||||
/** * AmountInput.vue - Specialized amount input with increment/decrement
|
||||
controls * * Extracted from GiftedDialog.vue to handle numeric amount input *
|
||||
with increment/decrement buttons and validation. * * @author Matthew Raymer */
|
||||
<template>
|
||||
<div class="flex flex-grow">
|
||||
<button
|
||||
class="rounded-s border border-e-0 border-slate-400 bg-slate-200 px-4 py-2"
|
||||
:disabled="isAtMinimum"
|
||||
type="button"
|
||||
@click.prevent="decrement"
|
||||
>
|
||||
<font-awesome icon="chevron-left" />
|
||||
</button>
|
||||
|
||||
<input
|
||||
:id="inputId"
|
||||
v-model="displayValue"
|
||||
type="number"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:step="step"
|
||||
class="flex-1 border border-e-0 border-slate-400 px-2 py-2 text-center w-[1px]"
|
||||
@input="handleInput"
|
||||
@blur="handleBlur"
|
||||
/>
|
||||
|
||||
<button
|
||||
class="rounded-e border border-slate-400 bg-slate-200 px-4 py-2"
|
||||
:disabled="isAtMaximum"
|
||||
type="button"
|
||||
@click.prevent="increment"
|
||||
>
|
||||
<font-awesome icon="chevron-right" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue, Watch, Emit } from "vue-facing-decorator";
|
||||
|
||||
/**
|
||||
* AmountInput - Numeric input with increment/decrement controls
|
||||
*
|
||||
* Features:
|
||||
* - Increment/decrement buttons with validation
|
||||
* - Configurable min/max values and step size
|
||||
* - Input validation and formatting
|
||||
* - Disabled state handling for boundary values
|
||||
* - Emits update events for v-model compatibility
|
||||
*/
|
||||
@Component
|
||||
export default class AmountInput extends Vue {
|
||||
/** Current numeric value */
|
||||
@Prop({ required: true })
|
||||
value!: number;
|
||||
|
||||
/** Minimum allowed value */
|
||||
@Prop({ default: 0 })
|
||||
min!: number;
|
||||
|
||||
/** Maximum allowed value */
|
||||
@Prop({ default: Number.MAX_SAFE_INTEGER })
|
||||
max!: number;
|
||||
|
||||
/** Step size for increment/decrement */
|
||||
@Prop({ default: 1 })
|
||||
step!: number;
|
||||
|
||||
/** Input element ID for accessibility */
|
||||
@Prop({ default: "amount-input" })
|
||||
inputId!: string;
|
||||
|
||||
/** Internal display value for input field */
|
||||
private displayValue: string = "0";
|
||||
|
||||
/**
|
||||
* Initialize display value from prop
|
||||
*/
|
||||
mounted(): void {
|
||||
console.log(
|
||||
`[AmountInput] mounted() - initial value: ${this.value}, min: ${this.min}, max: ${this.max}, step: ${this.step}`,
|
||||
);
|
||||
this.displayValue = this.value.toString();
|
||||
console.log(
|
||||
`[AmountInput] mounted() - displayValue set to: ${this.displayValue}`,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Watch for external value changes
|
||||
*/
|
||||
@Watch("value")
|
||||
onValueChange(newValue: number): void {
|
||||
this.displayValue = newValue.toString();
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if current value is at minimum
|
||||
*/
|
||||
get isAtMinimum(): boolean {
|
||||
const result = this.value <= this.min;
|
||||
console.log(
|
||||
`[AmountInput] isAtMinimum - value: ${this.value}, min: ${this.min}, result: ${result}`,
|
||||
);
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if current value is at maximum
|
||||
*/
|
||||
get isAtMaximum(): boolean {
|
||||
const result = this.value >= this.max;
|
||||
console.log(
|
||||
`[AmountInput] isAtMaximum - value: ${this.value}, max: ${this.max}, result: ${result}`,
|
||||
);
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Increment the value by step size
|
||||
*/
|
||||
increment(): void {
|
||||
console.log(
|
||||
`[AmountInput] increment() called - current value: ${this.value}, step: ${this.step}`,
|
||||
);
|
||||
const newValue = Math.min(this.value + this.step, this.max);
|
||||
console.log(`[AmountInput] increment() calculated newValue: ${newValue}`);
|
||||
this.updateValue(newValue);
|
||||
}
|
||||
|
||||
/**
|
||||
* Decrement the value by step size
|
||||
*/
|
||||
decrement(): void {
|
||||
console.log(
|
||||
`[AmountInput] decrement() called - current value: ${this.value}, step: ${this.step}`,
|
||||
);
|
||||
const newValue = Math.max(this.value - this.step, this.min);
|
||||
console.log(`[AmountInput] decrement() calculated newValue: ${newValue}`);
|
||||
this.updateValue(newValue);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle direct input changes
|
||||
*/
|
||||
handleInput(): void {
|
||||
const numericValue = parseFloat(this.displayValue);
|
||||
if (!isNaN(numericValue)) {
|
||||
const clampedValue = Math.max(this.min, Math.min(numericValue, this.max));
|
||||
this.updateValue(clampedValue);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle input blur - ensure display value matches actual value
|
||||
*/
|
||||
handleBlur(): void {
|
||||
this.displayValue = this.value.toString();
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the value and emit change event
|
||||
*/
|
||||
private updateValue(newValue: number): void {
|
||||
console.log(
|
||||
`[AmountInput] updateValue() called - oldValue: ${this.value}, newValue: ${newValue}`,
|
||||
);
|
||||
if (newValue !== this.value) {
|
||||
console.log(
|
||||
`[AmountInput] updateValue() - values different, updating and emitting`,
|
||||
);
|
||||
this.displayValue = newValue.toString();
|
||||
this.emitUpdateValue(newValue);
|
||||
} else {
|
||||
console.log(`[AmountInput] updateValue() - values same, skipping update`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Emit update:value event
|
||||
*/
|
||||
@Emit("update:value")
|
||||
emitUpdateValue(value: number): number {
|
||||
console.log(`[AmountInput] emitUpdateValue() - emitting value: ${value}`);
|
||||
return value;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Remove spinner arrows from number input */
|
||||
input[type="number"]::-webkit-outer-spin-button,
|
||||
input[type="number"]::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
/* Disabled button styles */
|
||||
button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
@@ -1,264 +0,0 @@
|
||||
/** * EntityGrid.vue - Unified entity grid layout component * * Extracted from
|
||||
GiftedDialog.vue to provide a reusable grid layout * for displaying people,
|
||||
projects, and special entities with selection. * * @author Matthew Raymer */
|
||||
<template>
|
||||
<ul :class="gridClasses">
|
||||
<!-- Special entities (You, Unnamed) for people grids -->
|
||||
<template v-if="entityType === 'people'">
|
||||
<!-- "You" entity -->
|
||||
<SpecialEntityCard
|
||||
v-if="showYouEntity"
|
||||
entity-type="you"
|
||||
label="You"
|
||||
icon="hand"
|
||||
:selectable="youSelectable"
|
||||
:conflicted="youConflicted"
|
||||
:entity-data="youEntityData"
|
||||
@entity-selected="handleEntitySelected"
|
||||
/>
|
||||
|
||||
<!-- "Unnamed" entity -->
|
||||
<SpecialEntityCard
|
||||
entity-type="unnamed"
|
||||
label="Unnamed"
|
||||
icon="circle-question"
|
||||
:entity-data="unnamedEntityData"
|
||||
@entity-selected="handleEntitySelected"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Empty state message -->
|
||||
<li
|
||||
v-if="entities.length === 0"
|
||||
class="text-xs text-slate-500 italic col-span-full"
|
||||
>
|
||||
{{ emptyStateMessage }}
|
||||
</li>
|
||||
|
||||
<!-- Entity cards (people or projects) -->
|
||||
<template v-if="entityType === 'people'">
|
||||
<PersonCard
|
||||
v-for="person in displayedEntities"
|
||||
:key="person.did"
|
||||
:person="person"
|
||||
:conflicted="isPersonConflicted(person.did)"
|
||||
:show-time-icon="true"
|
||||
@person-selected="handlePersonSelected"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-else-if="entityType === 'projects'">
|
||||
<ProjectCard
|
||||
v-for="project in displayedEntities"
|
||||
:key="project.handleId"
|
||||
:project="project"
|
||||
:active-did="activeDid"
|
||||
:all-my-dids="allMyDids"
|
||||
:all-contacts="allContacts"
|
||||
@project-selected="handleProjectSelected"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Show All navigation -->
|
||||
<ShowAllCard
|
||||
v-if="shouldShowAll"
|
||||
:entity-type="entityType"
|
||||
:route-name="showAllRoute"
|
||||
:query-params="showAllQueryParams"
|
||||
/>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
|
||||
import PersonCard from "./PersonCard.vue";
|
||||
import ProjectCard from "./ProjectCard.vue";
|
||||
import SpecialEntityCard from "./SpecialEntityCard.vue";
|
||||
import ShowAllCard from "./ShowAllCard.vue";
|
||||
import { Contact } from "../db/tables/contacts";
|
||||
import { PlanData } from "../interfaces/records";
|
||||
|
||||
/**
|
||||
* EntityGrid - Unified grid layout for displaying people or projects
|
||||
*
|
||||
* Features:
|
||||
* - Responsive grid layout for people/projects
|
||||
* - Special entity integration (You, Unnamed)
|
||||
* - Conflict detection integration
|
||||
* - Empty state messaging
|
||||
* - Show All navigation
|
||||
* - Event delegation for entity selection
|
||||
*/
|
||||
@Component({
|
||||
components: {
|
||||
PersonCard,
|
||||
ProjectCard,
|
||||
SpecialEntityCard,
|
||||
ShowAllCard,
|
||||
},
|
||||
})
|
||||
export default class EntityGrid extends Vue {
|
||||
/** Type of entities to display */
|
||||
@Prop({ required: true })
|
||||
entityType!: "people" | "projects";
|
||||
|
||||
/** Array of entities to display */
|
||||
@Prop({ required: true })
|
||||
entities!: Contact[] | PlanData[];
|
||||
|
||||
/** Maximum number of entities to display */
|
||||
@Prop({ default: 10 })
|
||||
maxItems!: number;
|
||||
|
||||
/** Active user's DID */
|
||||
@Prop({ required: true })
|
||||
activeDid!: string;
|
||||
|
||||
/** All user's DIDs */
|
||||
@Prop({ required: true })
|
||||
allMyDids!: string[];
|
||||
|
||||
/** All contacts */
|
||||
@Prop({ required: true })
|
||||
allContacts!: Contact[];
|
||||
|
||||
/** Function to check if a person DID would create a conflict */
|
||||
@Prop({ required: true })
|
||||
conflictChecker!: (did: string) => boolean;
|
||||
|
||||
/** Whether to show the "You" entity for people grids */
|
||||
@Prop({ default: true })
|
||||
showYouEntity!: boolean;
|
||||
|
||||
/** Whether the "You" entity is selectable */
|
||||
@Prop({ default: true })
|
||||
youSelectable!: boolean;
|
||||
|
||||
/** Route name for "Show All" navigation */
|
||||
@Prop({ default: "" })
|
||||
showAllRoute!: string;
|
||||
|
||||
/** Query parameters for "Show All" navigation */
|
||||
@Prop({ default: () => ({}) })
|
||||
showAllQueryParams!: Record<string, any>;
|
||||
|
||||
/**
|
||||
* Computed CSS classes for the grid layout
|
||||
*/
|
||||
get gridClasses(): string {
|
||||
const baseClasses = "grid gap-x-2 gap-y-4 text-center mb-4";
|
||||
|
||||
if (this.entityType === "projects") {
|
||||
return `${baseClasses} grid-cols-3 md:grid-cols-4`;
|
||||
} else {
|
||||
return `${baseClasses} grid-cols-4 sm:grid-cols-5 md:grid-cols-6`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Computed entities to display (limited by maxItems)
|
||||
*/
|
||||
get displayedEntities(): Contact[] | PlanData[] {
|
||||
const maxDisplay = this.entityType === "projects" ? 7 : this.maxItems;
|
||||
return this.entities.slice(0, maxDisplay);
|
||||
}
|
||||
|
||||
/**
|
||||
* Computed empty state message based on entity type
|
||||
*/
|
||||
get emptyStateMessage(): string {
|
||||
if (this.entityType === "projects") {
|
||||
return "(No projects found.)";
|
||||
} else {
|
||||
return "(Add friends to see more people worthy of recognition.)";
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether to show the "Show All" navigation
|
||||
*/
|
||||
get shouldShowAll(): boolean {
|
||||
return this.entities.length > 0 && this.showAllRoute !== "";
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether the "You" entity is conflicted
|
||||
*/
|
||||
get youConflicted(): boolean {
|
||||
return this.conflictChecker(this.activeDid);
|
||||
}
|
||||
|
||||
/**
|
||||
* Entity data for the "You" special entity
|
||||
*/
|
||||
get youEntityData(): { did: string; name: string } {
|
||||
return {
|
||||
did: this.activeDid,
|
||||
name: "You",
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Entity data for the "Unnamed" special entity
|
||||
*/
|
||||
get unnamedEntityData(): { did: string; name: string } {
|
||||
return {
|
||||
did: "",
|
||||
name: "Unnamed",
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a person DID is conflicted
|
||||
*/
|
||||
isPersonConflicted(did: string): boolean {
|
||||
return this.conflictChecker(did);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle person selection from PersonCard
|
||||
*/
|
||||
handlePersonSelected(person: Contact): void {
|
||||
this.emitEntitySelected({
|
||||
type: "person",
|
||||
data: person,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle project selection from ProjectCard
|
||||
*/
|
||||
handleProjectSelected(project: PlanData): void {
|
||||
this.emitEntitySelected({
|
||||
type: "project",
|
||||
data: project,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle special entity selection from SpecialEntityCard
|
||||
*/
|
||||
handleEntitySelected(event: {
|
||||
type: string;
|
||||
entityType: string;
|
||||
data: any;
|
||||
}): void {
|
||||
this.emitEntitySelected({
|
||||
type: "special",
|
||||
entityType: event.entityType,
|
||||
data: event.data,
|
||||
});
|
||||
}
|
||||
|
||||
// Emit methods using @Emit decorator
|
||||
|
||||
@Emit("entity-selected")
|
||||
emitEntitySelected(data: any): any {
|
||||
return data;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Grid-specific styles if needed */
|
||||
</style>
|
||||
@@ -1,242 +0,0 @@
|
||||
/** * EntitySelectionStep.vue - Entity selection step component * * Extracted
|
||||
from GiftedDialog.vue to handle the complete step 1 * entity selection interface
|
||||
with dynamic labeling and grid display. * * @author Matthew Raymer */
|
||||
<template>
|
||||
<div id="sectionGiftedGiver">
|
||||
<label class="block font-bold mb-4">
|
||||
{{ stepLabel }}
|
||||
</label>
|
||||
|
||||
<EntityGrid
|
||||
:entity-type="shouldShowProjects ? 'projects' : 'people'"
|
||||
:entities="shouldShowProjects ? projects : allContacts"
|
||||
:max-items="10"
|
||||
:active-did="activeDid"
|
||||
:all-my-dids="allMyDids"
|
||||
:all-contacts="allContacts"
|
||||
:conflict-checker="conflictChecker"
|
||||
:show-you-entity="shouldShowYouEntity"
|
||||
:you-selectable="youSelectable"
|
||||
:show-all-route="showAllRoute"
|
||||
:show-all-query-params="showAllQueryParams"
|
||||
@entity-selected="handleEntitySelected"
|
||||
/>
|
||||
|
||||
<button
|
||||
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-lg"
|
||||
@click="handleCancel"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
|
||||
import EntityGrid from "./EntityGrid.vue";
|
||||
import { Contact } from "../db/tables/contacts";
|
||||
import { PlanData } from "../interfaces/records";
|
||||
|
||||
/**
|
||||
* Entity selection event data structure
|
||||
*/
|
||||
interface EntitySelectionEvent {
|
||||
type: "person" | "project" | "special";
|
||||
entityType?: string;
|
||||
data: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* EntitySelectionStep - Complete step 1 entity selection interface
|
||||
*
|
||||
* Features:
|
||||
* - Dynamic step labeling based on context
|
||||
* - EntityGrid integration for unified entity display
|
||||
* - Conflict detection and prevention
|
||||
* - Special entity handling (You, Unnamed)
|
||||
* - Show All navigation with context preservation
|
||||
* - Cancel functionality
|
||||
* - Event delegation for entity selection
|
||||
*/
|
||||
@Component({
|
||||
components: {
|
||||
EntityGrid,
|
||||
},
|
||||
})
|
||||
export default class EntitySelectionStep extends Vue {
|
||||
/** Type of step: 'giver' or 'recipient' */
|
||||
@Prop({ required: true })
|
||||
stepType!: "giver" | "recipient";
|
||||
|
||||
/** Type of giver entity: 'person' or 'project' */
|
||||
@Prop({ required: true })
|
||||
giverEntityType!: "person" | "project";
|
||||
|
||||
/** Type of recipient entity: 'person' or 'project' */
|
||||
@Prop({ required: true })
|
||||
recipientEntityType!: "person" | "project";
|
||||
|
||||
/** Whether to show projects instead of people */
|
||||
@Prop({ default: false })
|
||||
showProjects!: boolean;
|
||||
|
||||
/** Whether this is from a project view */
|
||||
@Prop({ default: false })
|
||||
isFromProjectView!: boolean;
|
||||
|
||||
/** Array of available projects */
|
||||
@Prop({ required: true })
|
||||
projects!: PlanData[];
|
||||
|
||||
/** Array of available contacts */
|
||||
@Prop({ required: true })
|
||||
allContacts!: Contact[];
|
||||
|
||||
/** Active user's DID */
|
||||
@Prop({ required: true })
|
||||
activeDid!: string;
|
||||
|
||||
/** All user's DIDs */
|
||||
@Prop({ required: true })
|
||||
allMyDids!: string[];
|
||||
|
||||
/** Function to check if a DID would create a conflict */
|
||||
@Prop({ required: true })
|
||||
conflictChecker!: (did: string) => boolean;
|
||||
|
||||
/** Project ID for context (giver) */
|
||||
@Prop({ default: "" })
|
||||
fromProjectId!: string;
|
||||
|
||||
/** Project ID for context (recipient) */
|
||||
@Prop({ default: "" })
|
||||
toProjectId!: string;
|
||||
|
||||
/** Current giver entity for context */
|
||||
@Prop()
|
||||
giver?: any;
|
||||
|
||||
/** Current receiver entity for context */
|
||||
@Prop()
|
||||
receiver?: any;
|
||||
|
||||
/**
|
||||
* Computed step label based on context
|
||||
*/
|
||||
get stepLabel(): string {
|
||||
if (this.stepType === "recipient") {
|
||||
return "Choose who received the gift:";
|
||||
} else if (this.showProjects) {
|
||||
return "Choose a project benefitted from:";
|
||||
} else {
|
||||
return "Choose a person received from:";
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether to show projects in the grid
|
||||
*/
|
||||
get shouldShowProjects(): boolean {
|
||||
return (
|
||||
(this.stepType === "giver" && this.giverEntityType === "project") ||
|
||||
(this.stepType === "recipient" && this.recipientEntityType === "project")
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether to show the "You" entity
|
||||
*/
|
||||
get shouldShowYouEntity(): boolean {
|
||||
return (
|
||||
this.stepType === "recipient" ||
|
||||
(this.stepType === "giver" && this.isFromProjectView)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether the "You" entity is selectable
|
||||
*/
|
||||
get youSelectable(): boolean {
|
||||
return !this.conflictChecker(this.activeDid);
|
||||
}
|
||||
|
||||
/**
|
||||
* Route name for "Show All" navigation
|
||||
*/
|
||||
get showAllRoute(): string {
|
||||
if (this.shouldShowProjects) {
|
||||
return "discover";
|
||||
} else if (this.allContacts.length > 0) {
|
||||
return "contact-gift";
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
/**
|
||||
* Query parameters for "Show All" navigation
|
||||
*/
|
||||
get showAllQueryParams(): Record<string, any> {
|
||||
if (this.shouldShowProjects) {
|
||||
return {};
|
||||
}
|
||||
|
||||
return {
|
||||
stepType: this.stepType,
|
||||
giverEntityType: this.giverEntityType,
|
||||
recipientEntityType: this.recipientEntityType,
|
||||
...(this.stepType === "giver"
|
||||
? {
|
||||
recipientProjectId: this.toProjectId,
|
||||
recipientProjectName: this.receiver?.name,
|
||||
recipientProjectImage: this.receiver?.image,
|
||||
recipientProjectHandleId: this.receiver?.handleId,
|
||||
recipientDid: this.receiver?.did,
|
||||
}
|
||||
: {
|
||||
giverProjectId: this.fromProjectId,
|
||||
giverProjectName: this.giver?.name,
|
||||
giverProjectImage: this.giver?.image,
|
||||
giverProjectHandleId: this.giver?.handleId,
|
||||
giverDid: this.giver?.did,
|
||||
}),
|
||||
fromProjectId: this.fromProjectId,
|
||||
toProjectId: this.toProjectId,
|
||||
showProjects: this.showProjects.toString(),
|
||||
isFromProjectView: this.isFromProjectView.toString(),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle entity selection from EntityGrid
|
||||
*/
|
||||
handleEntitySelected(event: EntitySelectionEvent): void {
|
||||
this.emitEntitySelected({
|
||||
stepType: this.stepType,
|
||||
...event,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle cancel button click
|
||||
*/
|
||||
handleCancel(): void {
|
||||
this.emitCancel();
|
||||
}
|
||||
|
||||
// Emit methods using @Emit decorator
|
||||
|
||||
@Emit("entity-selected")
|
||||
emitEntitySelected(data: any): any {
|
||||
return data;
|
||||
}
|
||||
|
||||
@Emit("cancel")
|
||||
emitCancel(): void {
|
||||
// No return value needed
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Component-specific styles if needed */
|
||||
</style>
|
||||
@@ -1,145 +0,0 @@
|
||||
/** * EntitySummaryButton.vue - Displays selected entity with edit capability *
|
||||
* Extracted from GiftedDialog.vue to handle entity summary display * in the gift
|
||||
details step with edit functionality. * * @author Matthew Raymer */
|
||||
<template>
|
||||
<component
|
||||
:is="editable ? 'button' : 'div'"
|
||||
class="flex-1 flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2"
|
||||
@click="handleClick"
|
||||
>
|
||||
<!-- Entity Icon/Avatar -->
|
||||
<div>
|
||||
<template v-if="entityType === 'project'">
|
||||
<ProjectIcon
|
||||
v-if="entity?.handleId"
|
||||
:entity-id="entity.handleId"
|
||||
:icon-size="32"
|
||||
:image-url="entity.image"
|
||||
class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<EntityIcon
|
||||
v-if="entity?.did"
|
||||
:contact="entity"
|
||||
class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
|
||||
/>
|
||||
<font-awesome
|
||||
v-else
|
||||
icon="circle-question"
|
||||
class="text-slate-400 text-3xl"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Entity Information -->
|
||||
<div class="text-start min-w-0">
|
||||
<p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">
|
||||
{{ label }}
|
||||
</p>
|
||||
<h3 class="font-semibold truncate">
|
||||
{{ entity?.name || "Unnamed" }}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<!-- Edit/Lock Icon -->
|
||||
<p class="ms-auto text-sm pe-1" :class="iconClasses">
|
||||
<font-awesome
|
||||
:icon="editable ? 'pen' : 'lock'"
|
||||
:title="editable ? 'Change' : 'Can\'t be changed'"
|
||||
/>
|
||||
</p>
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
|
||||
import EntityIcon from "./EntityIcon.vue";
|
||||
import ProjectIcon from "./ProjectIcon.vue";
|
||||
import { Contact } from "../db/tables/contacts";
|
||||
|
||||
/**
|
||||
* Entity interface for both person and project entities
|
||||
*/
|
||||
interface EntityData {
|
||||
did?: string;
|
||||
handleId?: string;
|
||||
name?: string;
|
||||
image?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* EntitySummaryButton - Displays selected entity with optional edit capability
|
||||
*
|
||||
* Features:
|
||||
* - Shows entity avatar (person or project)
|
||||
* - Displays entity name and role label
|
||||
* - Handles editable vs locked states
|
||||
* - Emits edit events when clicked and editable
|
||||
* - Supports both person and project entity types
|
||||
*/
|
||||
@Component({
|
||||
components: {
|
||||
EntityIcon,
|
||||
ProjectIcon,
|
||||
},
|
||||
})
|
||||
export default class EntitySummaryButton extends Vue {
|
||||
/** Entity data to display */
|
||||
@Prop({ required: true })
|
||||
entity!: EntityData | Contact | null;
|
||||
|
||||
/** Type of entity: 'person' or 'project' */
|
||||
@Prop({ required: true })
|
||||
entityType!: "person" | "project";
|
||||
|
||||
/** Display label for the entity role */
|
||||
@Prop({ required: true })
|
||||
label!: string;
|
||||
|
||||
/** Whether the entity can be edited */
|
||||
@Prop({ default: true })
|
||||
editable!: boolean;
|
||||
|
||||
/**
|
||||
* Computed CSS classes for the edit/lock icon
|
||||
*/
|
||||
get iconClasses(): string {
|
||||
return this.editable ? "text-blue-500" : "text-slate-400";
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle click event - only emit if editable
|
||||
*/
|
||||
handleClick(): void {
|
||||
if (this.editable) {
|
||||
this.emitEditRequested({
|
||||
entityType: this.entityType,
|
||||
entity: this.entity,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Emit methods using @Emit decorator
|
||||
|
||||
@Emit("edit-requested")
|
||||
emitEditRequested(data: any): any {
|
||||
return data;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Ensure button styling is consistent */
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #f1f5f9; /* hover:bg-slate-100 */
|
||||
}
|
||||
|
||||
div {
|
||||
cursor: default;
|
||||
}
|
||||
</style>
|
||||
@@ -1,414 +0,0 @@
|
||||
/** * GiftDetailsStep.vue - Gift details step component * * Extracted from
|
||||
GiftedDialog.vue to handle the complete step 2 * gift details form interface
|
||||
with entity summaries and validation. * * @author Matthew Raymer */
|
||||
<template>
|
||||
<div id="sectionGiftedGift">
|
||||
<!-- Entity Summary Buttons -->
|
||||
<div class="grid grid-cols-2 gap-2 mb-4">
|
||||
<!-- Giver Button -->
|
||||
<EntitySummaryButton
|
||||
:entity="giver"
|
||||
:entity-type="giverEntityType"
|
||||
:label="giverLabel"
|
||||
:editable="canEditGiver"
|
||||
@edit-requested="handleEditGiver"
|
||||
/>
|
||||
|
||||
<!-- Recipient Button -->
|
||||
<EntitySummaryButton
|
||||
:entity="receiver"
|
||||
:entity-type="recipientEntityType"
|
||||
:label="recipientLabel"
|
||||
:editable="canEditRecipient"
|
||||
@edit-requested="handleEditRecipient"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Gift Description Input -->
|
||||
<input
|
||||
v-model="localDescription"
|
||||
type="text"
|
||||
class="block w-full rounded border border-slate-400 px-3 py-2 mb-4 placeholder:italic"
|
||||
:placeholder="prompt || 'What was given?'"
|
||||
@input="handleDescriptionChange"
|
||||
/>
|
||||
|
||||
<!-- Amount Input and Unit Selection -->
|
||||
<div class="flex mb-4">
|
||||
<AmountInput
|
||||
:value="localAmount"
|
||||
:min="0"
|
||||
input-id="inputGivenAmount"
|
||||
@update:value="handleAmountChange"
|
||||
/>
|
||||
|
||||
<select
|
||||
v-model="localUnitCode"
|
||||
class="flex-1 rounded border border-slate-400 ms-2 px-3 py-2"
|
||||
@change="handleUnitCodeChange"
|
||||
>
|
||||
<option value="HUR">Hours</option>
|
||||
<option value="USD">US $</option>
|
||||
<option value="BTC">BTC</option>
|
||||
<option value="BX">BX</option>
|
||||
<option value="ETH">ETH</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Photo & More Options Link -->
|
||||
<router-link
|
||||
:to="photoOptionsRoute"
|
||||
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-lg mb-4"
|
||||
>
|
||||
Photo & more options…
|
||||
</router-link>
|
||||
|
||||
<!-- Sign & Send Info -->
|
||||
<p class="text-center text-sm mb-4">
|
||||
<b class="font-medium">Sign & Send</b> to publish to the world
|
||||
<font-awesome
|
||||
icon="circle-info"
|
||||
class="fa-fw text-blue-500 text-base cursor-pointer"
|
||||
@click="handleExplainData"
|
||||
/>
|
||||
</p>
|
||||
|
||||
<!-- Conflict Warning -->
|
||||
<div
|
||||
v-if="hasConflict"
|
||||
class="mb-4 p-3 bg-red-50 border border-red-200 rounded-md"
|
||||
>
|
||||
<p class="text-red-700 text-sm text-center">
|
||||
<font-awesome icon="exclamation-triangle" class="fa-fw mr-1" />
|
||||
Cannot record: Same person selected as both giver and recipient
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
<button
|
||||
:disabled="hasConflict"
|
||||
:class="submitButtonClasses"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
Sign & Send
|
||||
</button>
|
||||
<button
|
||||
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-lg"
|
||||
@click="handleCancel"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue, Watch, Emit } from "vue-facing-decorator";
|
||||
import EntitySummaryButton from "./EntitySummaryButton.vue";
|
||||
import AmountInput from "./AmountInput.vue";
|
||||
import { RouteLocationRaw } from "vue-router";
|
||||
|
||||
/**
|
||||
* Entity data interface for giver/receiver
|
||||
*/
|
||||
interface EntityData {
|
||||
did?: string;
|
||||
handleId?: string;
|
||||
name?: string;
|
||||
image?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* GiftDetailsStep - Complete step 2 gift details form interface
|
||||
*
|
||||
* Features:
|
||||
* - Entity summary display with edit capability
|
||||
* - Gift description input with placeholder support
|
||||
* - Amount input with increment/decrement controls
|
||||
* - Unit code selection (HUR, USD, BTC, etc.)
|
||||
* - Photo & more options navigation
|
||||
* - Conflict detection and warning display
|
||||
* - Form validation and submission
|
||||
* - Cancel functionality
|
||||
*/
|
||||
@Component({
|
||||
components: {
|
||||
EntitySummaryButton,
|
||||
AmountInput,
|
||||
},
|
||||
})
|
||||
export default class GiftDetailsStep extends Vue {
|
||||
/** Giver entity data */
|
||||
@Prop({ required: true })
|
||||
giver!: EntityData | null;
|
||||
|
||||
/** Receiver entity data */
|
||||
@Prop({ required: true })
|
||||
receiver!: EntityData | null;
|
||||
|
||||
/** Type of giver entity: 'person' or 'project' */
|
||||
@Prop({ required: true })
|
||||
giverEntityType!: "person" | "project";
|
||||
|
||||
/** Type of recipient entity: 'person' or 'project' */
|
||||
@Prop({ required: true })
|
||||
recipientEntityType!: "person" | "project";
|
||||
|
||||
/** Gift description */
|
||||
@Prop({ default: "" })
|
||||
description!: string;
|
||||
|
||||
/** Gift amount */
|
||||
@Prop({ default: 0 })
|
||||
amount!: number;
|
||||
|
||||
/** Unit code (HUR, USD, etc.) */
|
||||
@Prop({ default: "HUR" })
|
||||
unitCode!: string;
|
||||
|
||||
/** Input placeholder text */
|
||||
@Prop({ default: "" })
|
||||
prompt!: string;
|
||||
|
||||
/** Whether this is from a project view */
|
||||
@Prop({ default: false })
|
||||
isFromProjectView!: boolean;
|
||||
|
||||
/** Whether there's a conflict between giver and receiver */
|
||||
@Prop({ default: false })
|
||||
hasConflict!: boolean;
|
||||
|
||||
/** Offer ID for context */
|
||||
@Prop({ default: "" })
|
||||
offerId!: string;
|
||||
|
||||
/** Project ID for context (giver) */
|
||||
@Prop({ default: "" })
|
||||
fromProjectId!: string;
|
||||
|
||||
/** Project ID for context (recipient) */
|
||||
@Prop({ default: "" })
|
||||
toProjectId!: string;
|
||||
|
||||
/** Local reactive copies of props for v-model */
|
||||
private localDescription: string = "";
|
||||
private localAmount: number = 0;
|
||||
private localUnitCode: string = "HUR";
|
||||
|
||||
/**
|
||||
* Initialize local values from props
|
||||
*/
|
||||
mounted(): void {
|
||||
this.localDescription = this.description;
|
||||
this.localAmount = this.amount;
|
||||
this.localUnitCode = this.unitCode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Watch for external prop changes
|
||||
*/
|
||||
@Watch("description")
|
||||
onDescriptionChange(newValue: string): void {
|
||||
this.localDescription = newValue;
|
||||
}
|
||||
|
||||
@Watch("amount")
|
||||
onAmountChange(newValue: number): void {
|
||||
this.localAmount = newValue;
|
||||
}
|
||||
|
||||
@Watch("unitCode")
|
||||
onUnitCodeChange(newValue: string): void {
|
||||
this.localUnitCode = newValue;
|
||||
}
|
||||
|
||||
/**
|
||||
* Computed label for giver entity
|
||||
*/
|
||||
get giverLabel(): string {
|
||||
return this.giverEntityType === "project"
|
||||
? "Benefited from:"
|
||||
: "Received from:";
|
||||
}
|
||||
|
||||
/**
|
||||
* Computed label for recipient entity
|
||||
*/
|
||||
get recipientLabel(): string {
|
||||
return this.recipientEntityType === "project"
|
||||
? "Given to project:"
|
||||
: "Given to:";
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether the giver can be edited
|
||||
*/
|
||||
get canEditGiver(): boolean {
|
||||
return !(this.isFromProjectView && this.giverEntityType === "project");
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether the recipient can be edited
|
||||
*/
|
||||
get canEditRecipient(): boolean {
|
||||
return this.recipientEntityType === "person";
|
||||
}
|
||||
|
||||
/**
|
||||
* Computed CSS classes for submit button
|
||||
*/
|
||||
get submitButtonClasses(): string {
|
||||
if (this.hasConflict) {
|
||||
return "block w-full text-center text-md uppercase font-bold bg-gradient-to-b from-slate-300 to-slate-500 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-slate-400 px-1.5 py-2 rounded-lg cursor-not-allowed";
|
||||
}
|
||||
return "block w-full text-center text-md uppercase font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-lg";
|
||||
}
|
||||
|
||||
/**
|
||||
* Computed route for photo & more options
|
||||
*/
|
||||
get photoOptionsRoute(): RouteLocationRaw {
|
||||
return {
|
||||
name: "gifted-details",
|
||||
query: {
|
||||
amountInput: this.localAmount.toString(),
|
||||
description: this.localDescription,
|
||||
giverDid:
|
||||
this.giverEntityType === "person" ? this.giver?.did : undefined,
|
||||
giverName: this.giver?.name,
|
||||
offerId: this.offerId,
|
||||
fulfillsProjectId:
|
||||
this.giverEntityType === "person" &&
|
||||
this.recipientEntityType === "project"
|
||||
? this.toProjectId
|
||||
: undefined,
|
||||
providerProjectId:
|
||||
this.giverEntityType === "project" &&
|
||||
this.recipientEntityType === "person"
|
||||
? this.giver?.handleId
|
||||
: this.fromProjectId,
|
||||
recipientDid: this.receiver?.did,
|
||||
recipientName: this.receiver?.name,
|
||||
unitCode: this.localUnitCode,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle description input changes
|
||||
*/
|
||||
handleDescriptionChange(): void {
|
||||
this.emitUpdateDescription(this.localDescription);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle amount input changes
|
||||
*/
|
||||
handleAmountChange(newAmount: number): void {
|
||||
console.log(
|
||||
`[GiftDetailsStep] handleAmountChange() called - oldAmount: ${this.localAmount}, newAmount: ${newAmount}`,
|
||||
);
|
||||
this.localAmount = newAmount;
|
||||
this.emitUpdateAmount(newAmount);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle unit code selection changes
|
||||
*/
|
||||
handleUnitCodeChange(): void {
|
||||
this.emitUpdateUnitCode(this.localUnitCode);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle giver edit request
|
||||
*/
|
||||
handleEditGiver(): void {
|
||||
this.emitEditEntity({
|
||||
entityType: "giver",
|
||||
currentEntity: this.giver,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle recipient edit request
|
||||
*/
|
||||
handleEditRecipient(): void {
|
||||
this.emitEditEntity({
|
||||
entityType: "recipient",
|
||||
currentEntity: this.receiver,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle explain data info click
|
||||
*/
|
||||
handleExplainData(): void {
|
||||
this.emitExplainData();
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle form submission
|
||||
*/
|
||||
handleSubmit(): void {
|
||||
if (!this.hasConflict) {
|
||||
this.emitSubmit({
|
||||
description: this.localDescription,
|
||||
amount: this.localAmount,
|
||||
unitCode: this.localUnitCode,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle cancel button click
|
||||
*/
|
||||
handleCancel(): void {
|
||||
this.emitCancel();
|
||||
}
|
||||
|
||||
// Emit methods using @Emit decorator
|
||||
|
||||
@Emit("update:description")
|
||||
emitUpdateDescription(description: string): string {
|
||||
return description;
|
||||
}
|
||||
|
||||
@Emit("update:amount")
|
||||
emitUpdateAmount(amount: number): number {
|
||||
console.log(
|
||||
`[GiftDetailsStep] emitUpdateAmount() - emitting amount: ${amount}`,
|
||||
);
|
||||
return amount;
|
||||
}
|
||||
|
||||
@Emit("update:unitCode")
|
||||
emitUpdateUnitCode(unitCode: string): string {
|
||||
return unitCode;
|
||||
}
|
||||
|
||||
@Emit("edit-entity")
|
||||
emitEditEntity(data: any): any {
|
||||
return data;
|
||||
}
|
||||
|
||||
@Emit("explain-data")
|
||||
emitExplainData(): void {
|
||||
// No return value needed
|
||||
}
|
||||
|
||||
@Emit("submit")
|
||||
emitSubmit(data: any): any {
|
||||
return data;
|
||||
}
|
||||
|
||||
@Emit("cancel")
|
||||
emitCancel(): void {
|
||||
// No return value needed
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Component-specific styles if needed */
|
||||
</style>
|
||||
@@ -1,64 +1,99 @@
|
||||
<template>
|
||||
<div v-if="visible" class="dialog-overlay">
|
||||
<div class="dialog">
|
||||
<!-- Step 1: Entity Selection -->
|
||||
<EntitySelectionStep
|
||||
v-show="currentStep === 1"
|
||||
:step-type="stepType"
|
||||
:giver-entity-type="giverEntityType"
|
||||
:recipient-entity-type="recipientEntityType"
|
||||
:show-projects="showProjects"
|
||||
:is-from-project-view="isFromProjectView"
|
||||
:projects="projects"
|
||||
:all-contacts="allContacts"
|
||||
:active-did="activeDid"
|
||||
:all-my-dids="allMyDids"
|
||||
:conflict-checker="wouldCreateConflict"
|
||||
:from-project-id="fromProjectId"
|
||||
:to-project-id="toProjectId"
|
||||
:giver="giver"
|
||||
:receiver="receiver"
|
||||
@entity-selected="handleEntitySelected"
|
||||
@cancel="cancel"
|
||||
/>
|
||||
|
||||
<!-- Step 2: Gift Details -->
|
||||
<GiftDetailsStep
|
||||
v-show="currentStep === 2"
|
||||
:giver="giver"
|
||||
:receiver="receiver"
|
||||
:giver-entity-type="giverEntityType"
|
||||
:recipient-entity-type="recipientEntityType"
|
||||
:description="description"
|
||||
:amount="parseFloat(amountInput) || 0"
|
||||
:unit-code="unitCode"
|
||||
:prompt="prompt"
|
||||
:is-from-project-view="isFromProjectView"
|
||||
:has-conflict="hasPersonConflict"
|
||||
:offer-id="offerId"
|
||||
:from-project-id="fromProjectId"
|
||||
:to-project-id="toProjectId"
|
||||
@update:description="description = $event"
|
||||
@update:amount="handleAmountUpdate"
|
||||
@update:unit-code="unitCode = $event"
|
||||
@edit-entity="handleEditEntity"
|
||||
@explain-data="explainData"
|
||||
@submit="handleSubmit"
|
||||
@cancel="cancel"
|
||||
<h1 class="text-xl font-bold text-center mb-4">
|
||||
{{ customTitle }}
|
||||
</h1>
|
||||
<input
|
||||
v-model="description"
|
||||
type="text"
|
||||
class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
|
||||
:placeholder="prompt || 'What was given?'"
|
||||
/>
|
||||
<div class="flex flex-row justify-center">
|
||||
<span
|
||||
class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center text-blue-500 px-2 py-2 w-20"
|
||||
@click="changeUnitCode()"
|
||||
>
|
||||
{{ libsUtil.UNIT_SHORT[unitCode] || unitCode }}
|
||||
</span>
|
||||
<div
|
||||
class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
|
||||
@click="amountInput === '0' ? null : decrement()"
|
||||
>
|
||||
<font-awesome icon="chevron-left" />
|
||||
</div>
|
||||
<input
|
||||
id="inputGivenAmount"
|
||||
v-model="amountInput"
|
||||
type="number"
|
||||
class="border border-r-0 border-slate-400 px-2 py-2 text-center w-20"
|
||||
/>
|
||||
<div
|
||||
class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
|
||||
@click="increment()"
|
||||
>
|
||||
<font-awesome icon="chevron-right" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 flex justify-center">
|
||||
<span>
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'gifted-details',
|
||||
query: {
|
||||
amountInput,
|
||||
description,
|
||||
giverDid: giver?.did,
|
||||
giverName: giver?.name,
|
||||
offerId,
|
||||
fulfillsProjectId: toProjectId,
|
||||
providerProjectId: fromProjectId,
|
||||
recipientDid: receiver?.did,
|
||||
recipientName: receiver?.name,
|
||||
unitCode,
|
||||
},
|
||||
}"
|
||||
class="text-blue-500"
|
||||
>
|
||||
Photo & more options ...
|
||||
</router-link>
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-center mb-2 mt-6 italic">
|
||||
Sign & Send to publish to the world
|
||||
<font-awesome
|
||||
icon="circle-info"
|
||||
class="pl-2 text-blue-500 cursor-pointer"
|
||||
@click="explainData()"
|
||||
/>
|
||||
</p>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
<button
|
||||
class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
|
||||
@click="confirm"
|
||||
>
|
||||
Sign & Send
|
||||
</button>
|
||||
<button
|
||||
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
|
||||
@click="cancel"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, Prop, Watch } from "vue-facing-decorator";
|
||||
import { Vue, Component, Prop } from "vue-facing-decorator";
|
||||
|
||||
import { NotificationIface, USE_DEXIE_DB } from "../constants/app";
|
||||
import {
|
||||
createAndSubmitGive,
|
||||
didInfo,
|
||||
serverMessageForUser,
|
||||
getHeaders,
|
||||
} from "../libs/endorserServer";
|
||||
import * as libsUtil from "../libs/util";
|
||||
import { db, retrieveSettingsForActiveAccount } from "../db/index";
|
||||
@@ -67,42 +102,13 @@ import * as databaseUtil from "../db/databaseUtil";
|
||||
import { retrieveAccountDids } from "../libs/util";
|
||||
import { logger } from "../utils/logger";
|
||||
import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
|
||||
import EntityIcon from "../components/EntityIcon.vue";
|
||||
import ProjectIcon from "../components/ProjectIcon.vue";
|
||||
import EntitySelectionStep from "../components/EntitySelectionStep.vue";
|
||||
import GiftDetailsStep from "../components/GiftDetailsStep.vue";
|
||||
import { PlanData } from "../interfaces/records";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
EntityIcon,
|
||||
ProjectIcon,
|
||||
EntitySelectionStep,
|
||||
GiftDetailsStep,
|
||||
},
|
||||
})
|
||||
@Component
|
||||
export default class GiftedDialog extends Vue {
|
||||
$notify!: (notification: NotificationIface, timeout?: number) => void;
|
||||
|
||||
@Prop() fromProjectId = "";
|
||||
@Prop() toProjectId = "";
|
||||
@Prop({ default: false }) showProjects = false;
|
||||
@Prop() isFromProjectView = false;
|
||||
|
||||
@Watch("showProjects")
|
||||
onShowProjectsChange() {
|
||||
this.updateEntityTypes();
|
||||
}
|
||||
|
||||
@Watch("fromProjectId")
|
||||
onFromProjectIdChange() {
|
||||
this.updateEntityTypes();
|
||||
}
|
||||
|
||||
@Watch("toProjectId")
|
||||
onToProjectIdChange() {
|
||||
this.updateEntityTypes();
|
||||
}
|
||||
|
||||
activeDid = "";
|
||||
allContacts: Array<Contact> = [];
|
||||
@@ -119,94 +125,9 @@ export default class GiftedDialog extends Vue {
|
||||
receiver?: libsUtil.GiverReceiverInputInfo;
|
||||
unitCode = "HUR";
|
||||
visible = false;
|
||||
currentStep = 1;
|
||||
|
||||
libsUtil = libsUtil;
|
||||
|
||||
projects: PlanData[] = [];
|
||||
|
||||
didInfo = didInfo;
|
||||
|
||||
// Computed property to help debug template logic
|
||||
get shouldShowProjects() {
|
||||
const result =
|
||||
(this.stepType === "giver" && this.giverEntityType === "project") ||
|
||||
(this.stepType === "recipient" && this.recipientEntityType === "project");
|
||||
return result;
|
||||
}
|
||||
|
||||
// Computed property to check if current selection would create a conflict
|
||||
get hasPersonConflict() {
|
||||
// Only check for conflicts when both entities are persons
|
||||
if (
|
||||
this.giverEntityType !== "person" ||
|
||||
this.recipientEntityType !== "person"
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check if giver and recipient are the same person
|
||||
if (
|
||||
this.giver?.did &&
|
||||
this.receiver?.did &&
|
||||
this.giver.did === this.receiver.did
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// Computed property to check if a contact would create a conflict when selected
|
||||
wouldCreateConflict(contactDid: string) {
|
||||
// Only check for conflicts when both entities are persons
|
||||
if (
|
||||
this.giverEntityType !== "person" ||
|
||||
this.recipientEntityType !== "person"
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.stepType === "giver") {
|
||||
// If selecting as giver, check if it conflicts with current recipient
|
||||
return this.receiver?.did === contactDid;
|
||||
} else if (this.stepType === "recipient") {
|
||||
// If selecting as recipient, check if it conflicts with current giver
|
||||
return this.giver?.did === contactDid;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
stepType = "giver";
|
||||
giverEntityType = "person" as "person" | "project";
|
||||
recipientEntityType = "person" as "person" | "project";
|
||||
|
||||
updateEntityTypes() {
|
||||
// Reset and set entity types based on current context
|
||||
this.giverEntityType = "person";
|
||||
this.recipientEntityType = "person";
|
||||
|
||||
// Determine entity types based on current context
|
||||
if (this.showProjects) {
|
||||
// HomeView "Project" button or ProjectViewView "Given by This"
|
||||
this.giverEntityType = "project";
|
||||
this.recipientEntityType = "person";
|
||||
} else if (this.fromProjectId) {
|
||||
// ProjectViewView "Given by This" button (project is giver)
|
||||
this.giverEntityType = "project";
|
||||
this.recipientEntityType = "person";
|
||||
} else if (this.toProjectId) {
|
||||
// ProjectViewView "Given to This" button (project is recipient)
|
||||
this.giverEntityType = "person";
|
||||
this.recipientEntityType = "project";
|
||||
} else {
|
||||
// HomeView "Person" button
|
||||
this.giverEntityType = "person";
|
||||
this.recipientEntityType = "person";
|
||||
}
|
||||
}
|
||||
|
||||
async open(
|
||||
giver?: libsUtil.GiverReceiverInputInfo,
|
||||
receiver?: libsUtil.GiverReceiverInputInfo,
|
||||
@@ -219,14 +140,10 @@ export default class GiftedDialog extends Vue {
|
||||
this.giver = giver;
|
||||
this.prompt = prompt || "";
|
||||
this.receiver = receiver;
|
||||
// if we show "given to user" selection, default checkbox to true
|
||||
this.amountInput = "0";
|
||||
this.callbackOnSuccess = callbackOnSuccess;
|
||||
this.offerId = offerId || "";
|
||||
this.currentStep = giver ? 2 : 1;
|
||||
this.stepType = "giver";
|
||||
|
||||
// Update entity types based on current props
|
||||
this.updateEntityTypes();
|
||||
|
||||
try {
|
||||
let settings = await databaseUtil.retrieveSettingsForActiveAccount();
|
||||
@@ -257,16 +174,7 @@ export default class GiftedDialog extends Vue {
|
||||
this.allContacts,
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
this.giverEntityType === "project" ||
|
||||
this.recipientEntityType === "project"
|
||||
) {
|
||||
await this.loadProjects();
|
||||
} else {
|
||||
// Clear projects array when not needed
|
||||
this.projects = [];
|
||||
}
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
} catch (err: any) {
|
||||
logger.error("Error retrieving settings from database:", err);
|
||||
this.$notify(
|
||||
@@ -316,7 +224,6 @@ export default class GiftedDialog extends Vue {
|
||||
this.amountInput = "0";
|
||||
this.prompt = "";
|
||||
this.unitCode = "HUR";
|
||||
this.currentStep = 1;
|
||||
}
|
||||
|
||||
async confirm() {
|
||||
@@ -359,20 +266,6 @@ export default class GiftedDialog extends Vue {
|
||||
return;
|
||||
}
|
||||
|
||||
// Check for person conflict
|
||||
if (this.hasPersonConflict) {
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
type: "danger",
|
||||
title: "Error",
|
||||
text: "You cannot select the same person as both giver and recipient.",
|
||||
},
|
||||
3000,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
this.close();
|
||||
this.$notify(
|
||||
{
|
||||
@@ -411,56 +304,24 @@ export default class GiftedDialog extends Vue {
|
||||
unitCode: string = "HUR",
|
||||
) {
|
||||
try {
|
||||
// Determine the correct parameters based on entity types
|
||||
let fromDid: string | undefined;
|
||||
let toDid: string | undefined;
|
||||
let fulfillsProjectHandleId: string | undefined;
|
||||
let providerPlanHandleId: string | undefined;
|
||||
|
||||
if (
|
||||
this.giverEntityType === "project" &&
|
||||
this.recipientEntityType === "person"
|
||||
) {
|
||||
// Project-to-person gift
|
||||
fromDid = undefined; // No person giver
|
||||
toDid = recipientDid as string; // Person recipient
|
||||
fulfillsProjectHandleId = undefined; // No project recipient
|
||||
providerPlanHandleId = this.giver?.handleId; // Project giver
|
||||
} else if (
|
||||
this.giverEntityType === "person" &&
|
||||
this.recipientEntityType === "project"
|
||||
) {
|
||||
// Person-to-project gift
|
||||
fromDid = giverDid as string; // Person giver
|
||||
toDid = undefined; // No person recipient
|
||||
fulfillsProjectHandleId = this.toProjectId; // Project recipient
|
||||
providerPlanHandleId = undefined; // No project giver
|
||||
} else {
|
||||
// Person-to-person gift
|
||||
fromDid = giverDid as string;
|
||||
toDid = recipientDid as string;
|
||||
fulfillsProjectHandleId = undefined;
|
||||
providerPlanHandleId = undefined;
|
||||
}
|
||||
|
||||
const result = await createAndSubmitGive(
|
||||
this.axios,
|
||||
this.apiServer,
|
||||
this.activeDid,
|
||||
fromDid,
|
||||
toDid,
|
||||
giverDid as string,
|
||||
recipientDid as string,
|
||||
description,
|
||||
amount,
|
||||
unitCode,
|
||||
fulfillsProjectHandleId,
|
||||
this.toProjectId,
|
||||
this.offerId,
|
||||
false,
|
||||
undefined,
|
||||
providerPlanHandleId,
|
||||
this.fromProjectId,
|
||||
);
|
||||
|
||||
if (!result.success) {
|
||||
const errorMessage = this.getGiveCreationErrorMessage(result);
|
||||
const errorMessage = result.error;
|
||||
logger.error("Error with give creation result:", result);
|
||||
this.$notify(
|
||||
{
|
||||
@@ -506,19 +367,6 @@ export default class GiftedDialog extends Vue {
|
||||
|
||||
// Helper functions for readability
|
||||
|
||||
/**
|
||||
* @param result direct response eg. ErrorResult or SuccessResult (potentially with embedded "data")
|
||||
* @returns best guess at an error message
|
||||
*/
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
getGiveCreationErrorMessage(result: any) {
|
||||
return (
|
||||
result.error?.userMessage ||
|
||||
result.error?.error ||
|
||||
result.response?.data?.error?.message
|
||||
);
|
||||
}
|
||||
|
||||
explainData() {
|
||||
this.$notify(
|
||||
{
|
||||
@@ -530,173 +378,6 @@ export default class GiftedDialog extends Vue {
|
||||
-1,
|
||||
);
|
||||
}
|
||||
|
||||
selectGiver(contact?: Contact) {
|
||||
if (contact) {
|
||||
this.giver = {
|
||||
did: contact.did,
|
||||
name: contact.name || contact.did,
|
||||
};
|
||||
} else {
|
||||
this.giver = {
|
||||
did: "",
|
||||
name: "Unnamed",
|
||||
};
|
||||
}
|
||||
this.currentStep = 2;
|
||||
}
|
||||
|
||||
goBackToStep1(step: string) {
|
||||
this.stepType = step;
|
||||
this.currentStep = 1;
|
||||
}
|
||||
|
||||
async loadProjects() {
|
||||
try {
|
||||
const response = await fetch(this.apiServer + "/api/v2/report/plans", {
|
||||
method: "GET",
|
||||
headers: await getHeaders(this.activeDid),
|
||||
});
|
||||
|
||||
if (response.status !== 200) {
|
||||
throw new Error("Failed to load projects");
|
||||
}
|
||||
|
||||
const results = await response.json();
|
||||
if (results.data) {
|
||||
this.projects = results.data;
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error("Error loading projects:", error);
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
type: "danger",
|
||||
title: "Error",
|
||||
text: "Failed to load projects",
|
||||
},
|
||||
3000,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
selectProject(project: PlanData) {
|
||||
this.giver = {
|
||||
did: project.handleId,
|
||||
name: project.name,
|
||||
image: project.image,
|
||||
handleId: project.handleId,
|
||||
};
|
||||
this.receiver = {
|
||||
did: this.activeDid,
|
||||
name: "You",
|
||||
};
|
||||
this.currentStep = 2;
|
||||
}
|
||||
|
||||
selectRecipient(contact?: Contact) {
|
||||
if (contact) {
|
||||
this.receiver = {
|
||||
did: contact.did,
|
||||
name: contact.name || contact.did,
|
||||
};
|
||||
} else {
|
||||
this.receiver = {
|
||||
did: "",
|
||||
name: "Unnamed",
|
||||
};
|
||||
}
|
||||
this.currentStep = 2;
|
||||
}
|
||||
|
||||
selectRecipientProject(project: PlanData) {
|
||||
this.receiver = {
|
||||
did: project.handleId,
|
||||
name: project.name,
|
||||
image: project.image,
|
||||
handleId: project.handleId,
|
||||
};
|
||||
this.currentStep = 2;
|
||||
}
|
||||
|
||||
// Computed property for the query parameters
|
||||
get giftedDetailsQuery() {
|
||||
return {
|
||||
amountInput: this.amountInput,
|
||||
description: this.description,
|
||||
giverDid: this.giverEntityType === "person" ? this.giver?.did : undefined,
|
||||
giverName: this.giver?.name,
|
||||
offerId: this.offerId,
|
||||
fulfillsProjectId:
|
||||
this.giverEntityType === "person" &&
|
||||
this.recipientEntityType === "project"
|
||||
? this.toProjectId
|
||||
: undefined,
|
||||
providerProjectId:
|
||||
this.giverEntityType === "project" &&
|
||||
this.recipientEntityType === "person"
|
||||
? this.giver?.handleId
|
||||
: this.fromProjectId,
|
||||
recipientDid: this.receiver?.did,
|
||||
recipientName: this.receiver?.name,
|
||||
unitCode: this.unitCode,
|
||||
};
|
||||
}
|
||||
|
||||
// New event handlers for component integration
|
||||
|
||||
/**
|
||||
* Handle entity selection from EntitySelectionStep
|
||||
* @param entity - The selected entity (person or project)
|
||||
*/
|
||||
handleEntitySelected(entity: {
|
||||
type: "person" | "project";
|
||||
data: Contact | PlanData;
|
||||
}) {
|
||||
if (entity.type === "person") {
|
||||
const contact = entity.data as Contact;
|
||||
if (this.stepType === "giver") {
|
||||
this.selectGiver(contact);
|
||||
} else {
|
||||
this.selectRecipient(contact);
|
||||
}
|
||||
} else {
|
||||
const project = entity.data as PlanData;
|
||||
if (this.stepType === "giver") {
|
||||
this.selectProject(project);
|
||||
} else {
|
||||
this.selectRecipientProject(project);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle edit entity request from GiftDetailsStep
|
||||
* @param entityType - 'giver' or 'recipient'
|
||||
*/
|
||||
handleEditEntity(entityType: "giver" | "recipient") {
|
||||
this.goBackToStep1(entityType);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle form submission from GiftDetailsStep
|
||||
*/
|
||||
handleSubmit() {
|
||||
this.confirm();
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle amount update from GiftDetailsStep
|
||||
*/
|
||||
handleAmountUpdate(newAmount: number) {
|
||||
console.log(
|
||||
`[GiftedDialog] handleAmountUpdate() called - oldAmount: ${this.amountInput}, newAmount: ${newAmount}`,
|
||||
);
|
||||
this.amountInput = newAmount.toString();
|
||||
console.log(
|
||||
`[GiftedDialog] handleAmountUpdate() - amountInput updated to: ${this.amountInput}`,
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -48,12 +48,15 @@
|
||||
<span>
|
||||
{{ didInfo(visDid) }}
|
||||
<span v-if="!serverUtil.isEmptyOrHiddenDid(visDid)">
|
||||
<a :href="`/did/${visDid}`" class="text-blue-500">
|
||||
<router-link
|
||||
:to="{ path: '/did/' + encodeURIComponent(visDid) }"
|
||||
class="text-blue-500"
|
||||
>
|
||||
<font-awesome
|
||||
icon="arrow-up-right-from-square"
|
||||
class="fa-fw"
|
||||
/>
|
||||
</a>
|
||||
</router-link>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -250,7 +250,7 @@ export default class OfferDialog extends Vue {
|
||||
);
|
||||
|
||||
if (!result.success) {
|
||||
const errorMessage = this.getOfferCreationErrorMessage(result);
|
||||
const errorMessage = result.error;
|
||||
logger.error("Error with offer creation result:", result);
|
||||
this.$notify(
|
||||
{
|
||||
@@ -290,21 +290,6 @@ export default class OfferDialog extends Vue {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Helper functions for readability
|
||||
|
||||
/**
|
||||
* @param result direct response eg. ErrorResult or SuccessResult (potentially with embedded "data")
|
||||
* @returns best guess at an error message
|
||||
*/
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
getOfferCreationErrorMessage(result: any) {
|
||||
return (
|
||||
serverMessageForUser(result) ||
|
||||
result.error?.userMessage ||
|
||||
result.error?.error
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,114 +0,0 @@
|
||||
/** * PersonCard.vue - Individual person display component * * Extracted from
|
||||
GiftedDialog.vue to handle person entity display * with selection states and
|
||||
conflict detection. * * @author Matthew Raymer */
|
||||
<template>
|
||||
<li :class="cardClasses" @click="handleClick">
|
||||
<div class="relative w-fit mx-auto">
|
||||
<EntityIcon
|
||||
v-if="person.did"
|
||||
:contact="person"
|
||||
class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
|
||||
/>
|
||||
<font-awesome
|
||||
v-else
|
||||
icon="circle-question"
|
||||
class="text-slate-400 text-5xl mb-1"
|
||||
/>
|
||||
|
||||
<!-- Time icon overlay for contacts -->
|
||||
<div
|
||||
v-if="person.did && showTimeIcon"
|
||||
class="rounded-full bg-slate-400 absolute bottom-0 right-0 p-1 translate-x-1/3"
|
||||
>
|
||||
<font-awesome icon="clock" class="block text-white text-xs w-[1em]" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 :class="nameClasses">
|
||||
{{ person.name || person.did || "Unnamed" }}
|
||||
</h3>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
|
||||
import EntityIcon from "./EntityIcon.vue";
|
||||
import { Contact } from "../db/tables/contacts";
|
||||
|
||||
/**
|
||||
* PersonCard - Individual person display with selection capability
|
||||
*
|
||||
* Features:
|
||||
* - Person avatar using EntityIcon
|
||||
* - Selection states (selectable, conflicted, disabled)
|
||||
* - Time icon overlay for contacts
|
||||
* - Click event handling
|
||||
* - Emits click events for parent handling
|
||||
*/
|
||||
@Component({
|
||||
components: {
|
||||
EntityIcon,
|
||||
},
|
||||
})
|
||||
export default class PersonCard extends Vue {
|
||||
/** Contact data to display */
|
||||
@Prop({ required: true })
|
||||
person!: Contact;
|
||||
|
||||
/** Whether this person can be selected */
|
||||
@Prop({ default: true })
|
||||
selectable!: boolean;
|
||||
|
||||
/** Whether this person would create a conflict if selected */
|
||||
@Prop({ default: false })
|
||||
conflicted!: boolean;
|
||||
|
||||
/** Whether to show time icon overlay */
|
||||
@Prop({ default: false })
|
||||
showTimeIcon!: boolean;
|
||||
|
||||
/**
|
||||
* Computed CSS classes for the card
|
||||
*/
|
||||
get cardClasses(): string {
|
||||
if (!this.selectable || this.conflicted) {
|
||||
return "opacity-50 cursor-not-allowed";
|
||||
}
|
||||
return "cursor-pointer hover:bg-slate-50";
|
||||
}
|
||||
|
||||
/**
|
||||
* Computed CSS classes for the person name
|
||||
*/
|
||||
get nameClasses(): string {
|
||||
const baseClasses =
|
||||
"text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden";
|
||||
|
||||
if (this.conflicted) {
|
||||
return `${baseClasses} text-slate-400`;
|
||||
}
|
||||
|
||||
return baseClasses;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle card click - only emit if selectable and not conflicted
|
||||
*/
|
||||
handleClick(): void {
|
||||
if (this.selectable && !this.conflicted) {
|
||||
this.emitPersonSelected(this.person);
|
||||
}
|
||||
}
|
||||
|
||||
// Emit methods using @Emit decorator
|
||||
|
||||
@Emit("person-selected")
|
||||
emitPersonSelected(person: Contact): Contact {
|
||||
return person;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Component-specific styles if needed */
|
||||
</style>
|
||||
@@ -1,96 +0,0 @@
|
||||
/** * ProjectCard.vue - Individual project display component * * Extracted from
|
||||
GiftedDialog.vue to handle project entity display * with selection states and
|
||||
issuer information. * * @author Matthew Raymer */
|
||||
<template>
|
||||
<li class="cursor-pointer" @click="handleClick">
|
||||
<div class="relative w-fit mx-auto">
|
||||
<ProjectIcon
|
||||
:entity-id="project.handleId"
|
||||
:icon-size="48"
|
||||
:image-url="project.image"
|
||||
class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h3
|
||||
class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
|
||||
>
|
||||
{{ project.name }}
|
||||
</h3>
|
||||
|
||||
<div class="text-xs text-slate-500 truncate">
|
||||
<font-awesome icon="user" class="fa-fw text-slate-400" />
|
||||
{{ issuerDisplayName }}
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
|
||||
import ProjectIcon from "./ProjectIcon.vue";
|
||||
import { PlanData } from "../interfaces/records";
|
||||
import { Contact } from "../db/tables/contacts";
|
||||
import { didInfo } from "../libs/endorserServer";
|
||||
|
||||
/**
|
||||
* ProjectCard - Displays a project entity with selection capability
|
||||
*
|
||||
* Features:
|
||||
* - Shows project icon using ProjectIcon
|
||||
* - Displays project name and issuer information
|
||||
* - Handles click events for selection
|
||||
* - Shows issuer name using didInfo utility
|
||||
*/
|
||||
@Component({
|
||||
components: {
|
||||
ProjectIcon,
|
||||
},
|
||||
})
|
||||
export default class ProjectCard extends Vue {
|
||||
/** Project entity to display */
|
||||
@Prop({ required: true })
|
||||
project!: PlanData;
|
||||
|
||||
/** Active user's DID for issuer display */
|
||||
@Prop({ required: true })
|
||||
activeDid!: string;
|
||||
|
||||
/** All user's DIDs for issuer display */
|
||||
@Prop({ required: true })
|
||||
allMyDids!: string[];
|
||||
|
||||
/** All contacts for issuer display */
|
||||
@Prop({ required: true })
|
||||
allContacts!: Contact[];
|
||||
|
||||
/**
|
||||
* Computed display name for the project issuer
|
||||
*/
|
||||
get issuerDisplayName(): string {
|
||||
return didInfo(
|
||||
this.project.issuerDid,
|
||||
this.activeDid,
|
||||
this.allMyDids,
|
||||
this.allContacts,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle card click - emit project selection
|
||||
*/
|
||||
handleClick(): void {
|
||||
this.emitProjectSelected(this.project);
|
||||
}
|
||||
|
||||
// Emit methods using @Emit decorator
|
||||
|
||||
@Emit("project-selected")
|
||||
emitProjectSelected(project: PlanData): PlanData {
|
||||
return project;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Component-specific styles if needed */
|
||||
</style>
|
||||
@@ -1,66 +0,0 @@
|
||||
/** * ShowAllCard.vue - Show All navigation card component * * Extracted from
|
||||
GiftedDialog.vue to handle "Show All" navigation * for both people and projects
|
||||
entity types. * * @author Matthew Raymer */
|
||||
<template>
|
||||
<li class="cursor-pointer">
|
||||
<router-link :to="navigationRoute" class="block text-center">
|
||||
<font-awesome icon="circle-right" class="text-blue-500 text-5xl mb-1" />
|
||||
<h3
|
||||
class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
|
||||
>
|
||||
Show All
|
||||
</h3>
|
||||
</router-link>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-facing-decorator";
|
||||
import { RouteLocationRaw } from "vue-router";
|
||||
|
||||
/**
|
||||
* ShowAllCard - Displays "Show All" navigation for entity grids
|
||||
*
|
||||
* Features:
|
||||
* - Provides navigation to full entity listings
|
||||
* - Supports different routes based on entity type
|
||||
* - Maintains context through query parameters
|
||||
* - Consistent visual styling with other cards
|
||||
*/
|
||||
@Component
|
||||
export default class ShowAllCard extends Vue {
|
||||
/** Type of entities being shown */
|
||||
@Prop({ required: true })
|
||||
entityType!: "people" | "projects";
|
||||
|
||||
/** Route name to navigate to */
|
||||
@Prop({ required: true })
|
||||
routeName!: string;
|
||||
|
||||
/** Query parameters to pass to the route */
|
||||
@Prop({ default: () => ({}) })
|
||||
queryParams!: Record<string, any>;
|
||||
|
||||
/**
|
||||
* Computed navigation route with query parameters
|
||||
*/
|
||||
get navigationRoute(): RouteLocationRaw {
|
||||
return {
|
||||
name: this.routeName,
|
||||
query: this.queryParams,
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Ensure router-link styling is consistent */
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover .fa-circle-right {
|
||||
transform: scale(1.1);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
</style>
|
||||
@@ -1,135 +0,0 @@
|
||||
/** * SpecialEntityCard.vue - Special entity display component * * Extracted
|
||||
from GiftedDialog.vue to handle special entities like "You" * and "Unnamed" with
|
||||
conflict detection and selection capability. * * @author Matthew Raymer */
|
||||
<template>
|
||||
<li :class="cardClasses" @click="handleClick">
|
||||
<font-awesome :icon="icon" :class="iconClasses" />
|
||||
<h3 :class="nameClasses">
|
||||
{{ label }}
|
||||
</h3>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-facing-decorator";
|
||||
import { Emit } from "vue-facing-decorator";
|
||||
|
||||
/**
|
||||
* SpecialEntityCard - Displays special entities with selection capability
|
||||
*
|
||||
* Features:
|
||||
* - Displays special entities like "You" and "Unnamed"
|
||||
* - Shows appropriate FontAwesome icons
|
||||
* - Handles conflict states and selection
|
||||
* - Emits selection events with entity data
|
||||
* - Configurable styling based on entity type
|
||||
*/
|
||||
@Component({
|
||||
emits: ["entity-selected"],
|
||||
})
|
||||
export default class SpecialEntityCard extends Vue {
|
||||
/** Type of special entity */
|
||||
@Prop({ required: true })
|
||||
entityType!: "you" | "unnamed";
|
||||
|
||||
/** Display label for the entity */
|
||||
@Prop({ required: true })
|
||||
label!: string;
|
||||
|
||||
/** FontAwesome icon name */
|
||||
@Prop({ required: true })
|
||||
icon!: string;
|
||||
|
||||
/** Whether this entity can be selected */
|
||||
@Prop({ default: true })
|
||||
selectable!: boolean;
|
||||
|
||||
/** Whether selecting this entity would create a conflict */
|
||||
@Prop({ default: false })
|
||||
conflicted!: boolean;
|
||||
|
||||
/** Entity data to emit when selected */
|
||||
@Prop({ required: true })
|
||||
entityData!: { did?: string; name: string };
|
||||
|
||||
/**
|
||||
* Computed CSS classes for the card container
|
||||
*/
|
||||
get cardClasses(): string {
|
||||
const baseClasses = "block";
|
||||
|
||||
if (!this.selectable || this.conflicted) {
|
||||
return `${baseClasses} cursor-not-allowed opacity-50`;
|
||||
}
|
||||
|
||||
return `${baseClasses} cursor-pointer`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Computed CSS classes for the icon
|
||||
*/
|
||||
get iconClasses(): string {
|
||||
const baseClasses = "text-5xl mb-1";
|
||||
|
||||
if (this.conflicted) {
|
||||
return `${baseClasses} text-slate-400`;
|
||||
}
|
||||
|
||||
// Different colors for different entity types
|
||||
switch (this.entityType) {
|
||||
case "you":
|
||||
return `${baseClasses} text-blue-500`;
|
||||
case "unnamed":
|
||||
return `${baseClasses} text-slate-400`;
|
||||
default:
|
||||
return `${baseClasses} text-slate-400`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Computed CSS classes for the entity name/label
|
||||
*/
|
||||
get nameClasses(): string {
|
||||
const baseClasses =
|
||||
"text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden";
|
||||
|
||||
if (this.conflicted) {
|
||||
return `${baseClasses} text-slate-400`;
|
||||
}
|
||||
|
||||
// Different colors for different entity types
|
||||
switch (this.entityType) {
|
||||
case "you":
|
||||
return `${baseClasses} text-blue-500`;
|
||||
case "unnamed":
|
||||
return `${baseClasses} text-slate-500 italic`;
|
||||
default:
|
||||
return `${baseClasses} text-slate-500`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle card click - only emit if selectable and not conflicted
|
||||
*/
|
||||
handleClick(): void {
|
||||
if (this.selectable && !this.conflicted) {
|
||||
this.emitEntitySelected({
|
||||
type: "special",
|
||||
entityType: this.entityType,
|
||||
data: this.entityData,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Emit methods using @Emit decorator
|
||||
|
||||
@Emit("entity-selected")
|
||||
emitEntitySelected(data: any): any {
|
||||
return data;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Component-specific styles if needed */
|
||||
</style>
|
||||
@@ -38,14 +38,14 @@ export default class TopMessage extends Vue {
|
||||
settings.apiServer !== AppString.PROD_ENDORSER_API_SERVER
|
||||
) {
|
||||
const didPrefix = settings.activeDid?.slice(11, 15);
|
||||
this.message = "You're linked to a non-prod server, user " + didPrefix;
|
||||
this.message = "You're not using prod, user " + didPrefix;
|
||||
} else if (
|
||||
settings.warnIfProdServer &&
|
||||
settings.apiServer === AppString.PROD_ENDORSER_API_SERVER
|
||||
) {
|
||||
const didPrefix = settings.activeDid?.slice(11, 15);
|
||||
this.message =
|
||||
"You're linked to the production server, user " + didPrefix;
|
||||
"You are using prod, user " + didPrefix;
|
||||
}
|
||||
} catch (err: unknown) {
|
||||
this.$notify(
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
import { AxiosResponse } from "axios";
|
||||
import { GiverReceiverInputInfo } from "../libs/util";
|
||||
import { ErrorResult, ResultWithType } from "./common";
|
||||
|
||||
export interface GiverOutputInfo {
|
||||
action: string;
|
||||
@@ -47,12 +45,3 @@ export interface ProviderInfo {
|
||||
*/
|
||||
linkConfirmed: boolean;
|
||||
}
|
||||
|
||||
// Type for createAndSubmitClaim result
|
||||
export type CreateAndSubmitClaimResult = SuccessResult | ErrorResult;
|
||||
|
||||
// Update SuccessResult to use ClaimResult
|
||||
export interface SuccessResult extends ResultWithType {
|
||||
type: "success";
|
||||
response: AxiosResponse<ClaimResult>;
|
||||
}
|
||||
|
||||
@@ -15,10 +15,6 @@ export interface GenericCredWrapper<T extends GenericVerifiableCredential> {
|
||||
publicUrls?: Record<string, string>;
|
||||
}
|
||||
|
||||
export interface ResultWithType {
|
||||
type: string;
|
||||
}
|
||||
|
||||
export interface ErrorResponse {
|
||||
error?: {
|
||||
message?: string;
|
||||
@@ -30,11 +26,6 @@ export interface InternalError {
|
||||
userMessage?: string;
|
||||
}
|
||||
|
||||
export interface ErrorResult extends ResultWithType {
|
||||
type: "error";
|
||||
error: InternalError;
|
||||
}
|
||||
|
||||
export interface KeyMeta {
|
||||
did: string;
|
||||
publicKeyHex: string;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
export type {
|
||||
// From common.ts
|
||||
CreateAndSubmitClaimResult,
|
||||
GenericCredWrapper,
|
||||
GenericVerifiableCredential,
|
||||
KeyMeta,
|
||||
@@ -18,11 +19,6 @@ export type {
|
||||
RegisterActionClaim,
|
||||
} from "./claims";
|
||||
|
||||
export type {
|
||||
// From claims-result.ts
|
||||
CreateAndSubmitClaimResult,
|
||||
} from "./claims-result";
|
||||
|
||||
export type {
|
||||
// From records.ts
|
||||
PlanSummaryRecord,
|
||||
|
||||
@@ -979,7 +979,7 @@ export const createAndSubmitConfirmation = async (
|
||||
handleId: string | undefined,
|
||||
apiServer: string,
|
||||
axios: Axios,
|
||||
) => {
|
||||
): Promise<CreateAndSubmitClaimResult> => {
|
||||
const goodClaim = removeSchemaContext(
|
||||
removeVisibleToDids(
|
||||
addLastClaimOrHandleAsIdIfMissing(claim, lastClaimId, handleId),
|
||||
|
||||
@@ -29,7 +29,6 @@ import {
|
||||
faCircleCheck,
|
||||
faCircleInfo,
|
||||
faCircleQuestion,
|
||||
faCircleRight,
|
||||
faCircleUser,
|
||||
faClock,
|
||||
faCoins,
|
||||
@@ -61,7 +60,6 @@ import {
|
||||
faLightbulb,
|
||||
faLink,
|
||||
faLocationDot,
|
||||
faLock,
|
||||
faLongArrowAltLeft,
|
||||
faLongArrowAltRight,
|
||||
faMagnifyingGlass,
|
||||
@@ -81,7 +79,6 @@ import {
|
||||
faSquareCaretDown,
|
||||
faSquareCaretUp,
|
||||
faSquarePlus,
|
||||
faThumbtack,
|
||||
faTrashCan,
|
||||
faTriangleExclamation,
|
||||
faUser,
|
||||
@@ -114,7 +111,6 @@ library.add(
|
||||
faCircleCheck,
|
||||
faCircleInfo,
|
||||
faCircleQuestion,
|
||||
faCircleRight,
|
||||
faCircleUser,
|
||||
faClock,
|
||||
faCoins,
|
||||
@@ -146,7 +142,6 @@ library.add(
|
||||
faLightbulb,
|
||||
faLink,
|
||||
faLocationDot,
|
||||
faLock,
|
||||
faLongArrowAltLeft,
|
||||
faLongArrowAltRight,
|
||||
faMagnifyingGlass,
|
||||
@@ -166,7 +161,6 @@ library.add(
|
||||
faSquareCaretDown,
|
||||
faSquareCaretUp,
|
||||
faSquarePlus,
|
||||
faThumbtack,
|
||||
faTrashCan,
|
||||
faTriangleExclamation,
|
||||
faUser,
|
||||
|
||||
@@ -49,8 +49,6 @@ import { insertDidSpecificSettings, parseJsonField } from "../db/databaseUtil";
|
||||
export interface GiverReceiverInputInfo {
|
||||
did?: string;
|
||||
name?: string;
|
||||
image?: string;
|
||||
handleId?: string;
|
||||
}
|
||||
|
||||
export enum OnboardPage {
|
||||
|
||||
@@ -81,18 +81,16 @@ export class DeepLinkHandler {
|
||||
string,
|
||||
{ name: string; paramKey?: string }
|
||||
> = {
|
||||
"user-profile": { name: "user-profile" },
|
||||
"project-details": { name: "project-details" },
|
||||
"onboard-meeting-setup": { name: "onboard-meeting-setup" },
|
||||
"invite-one-accept": { name: "invite-one-accept" },
|
||||
"contact-import": { name: "contact-import" },
|
||||
"confirm-gift": { name: "confirm-gift" },
|
||||
claim: { name: "claim" },
|
||||
"claim-cert": { name: "claim-cert" },
|
||||
"claim": { name: "claim" },
|
||||
"claim-add-raw": { name: "claim-add-raw" },
|
||||
"contact-edit": { name: "contact-edit", paramKey: "did" },
|
||||
contacts: { name: "contacts" },
|
||||
did: { name: "did", paramKey: "did" },
|
||||
"claim-cert": { name: "claim-cert" },
|
||||
"confirm-gift": { name: "confirm-gift" },
|
||||
"did": { name: "did", paramKey: "did" },
|
||||
"invite-one-accept": { name: "invite-one-accept" },
|
||||
"onboard-meeting-members": { name: "onboard-meeting-members" },
|
||||
"onboard-meeting-setup": { name: "onboard-meeting-setup" },
|
||||
"project": { name: "project" },
|
||||
"user-profile": { name: "user-profile" },
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@@ -5,6 +5,7 @@ import {
|
||||
CameraSource,
|
||||
CameraDirection,
|
||||
} from "@capacitor/camera";
|
||||
import { Capacitor } from "@capacitor/core";
|
||||
import { Share } from "@capacitor/share";
|
||||
import {
|
||||
SQLiteConnection,
|
||||
@@ -41,7 +42,7 @@ interface QueuedOperation {
|
||||
*/
|
||||
export class CapacitorPlatformService implements PlatformService {
|
||||
/** Current camera direction */
|
||||
private currentDirection: CameraDirection = "BACK";
|
||||
private currentDirection: CameraDirection = CameraDirection.Rear;
|
||||
|
||||
private sqlite: SQLiteConnection;
|
||||
private db: SQLiteDBConnection | null = null;
|
||||
@@ -53,6 +54,29 @@ export class CapacitorPlatformService implements PlatformService {
|
||||
|
||||
constructor() {
|
||||
this.sqlite = new SQLiteConnection(CapacitorSQLite);
|
||||
|
||||
// Set up app lifecycle listeners for proper cleanup
|
||||
this.setupLifecycleListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up app lifecycle listeners for proper database cleanup
|
||||
*/
|
||||
private setupLifecycleListeners(): void {
|
||||
if (typeof window !== 'undefined' && window.addEventListener) {
|
||||
// Handle app pause/resume events
|
||||
window.addEventListener('beforeunload', () => {
|
||||
this.cleanupDatabase();
|
||||
});
|
||||
|
||||
// Handle visibility change (app going to background)
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.hidden) {
|
||||
// App going to background - ensure database is properly closed
|
||||
this.cleanupDatabase();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private async initializeDatabase(): Promise<void> {
|
||||
@@ -86,19 +110,14 @@ export class CapacitorPlatformService implements PlatformService {
|
||||
}
|
||||
|
||||
try {
|
||||
// Create/Open database
|
||||
this.db = await this.sqlite.createConnection(
|
||||
this.dbName,
|
||||
false,
|
||||
"no-encryption",
|
||||
1,
|
||||
false,
|
||||
);
|
||||
// Check if database connection already exists and close it
|
||||
await this.cleanupExistingConnections();
|
||||
|
||||
await this.db.open();
|
||||
// Create/Open database with retry logic
|
||||
this.db = await this.createDatabaseConnection();
|
||||
|
||||
// Set journal mode to WAL for better performance
|
||||
// await this.db.execute("PRAGMA journal_mode=WAL;");
|
||||
// Configure database for better performance and stability
|
||||
await this.configureDatabase();
|
||||
|
||||
// Run migrations
|
||||
await this.runCapacitorMigrations();
|
||||
@@ -115,6 +134,8 @@ export class CapacitorPlatformService implements PlatformService {
|
||||
"[CapacitorPlatformService] Error initializing SQLite database:",
|
||||
error,
|
||||
);
|
||||
// Clean up on failure
|
||||
await this.cleanupDatabase();
|
||||
throw new Error(
|
||||
"[CapacitorPlatformService] Failed to initialize database",
|
||||
);
|
||||
@@ -247,7 +268,7 @@ export class CapacitorPlatformService implements PlatformService {
|
||||
hasFileSystem: true,
|
||||
hasCamera: true,
|
||||
isMobile: true,
|
||||
isIOS: /iPad|iPhone|iPod/.test(navigator.userAgent),
|
||||
isIOS: Capacitor.getPlatform() === "ios",
|
||||
hasFileDownload: false,
|
||||
needsFileHandlingInstructions: true,
|
||||
isNativeApp: true,
|
||||
@@ -701,7 +722,7 @@ export class CapacitorPlatformService implements PlatformService {
|
||||
* @returns Promise that resolves when the camera is rotated
|
||||
*/
|
||||
async rotateCamera(): Promise<void> {
|
||||
this.currentDirection = this.currentDirection === "BACK" ? "FRONT" : "BACK";
|
||||
this.currentDirection = this.currentDirection === CameraDirection.Rear ? CameraDirection.Front : CameraDirection.Rear;
|
||||
logger.debug(`Camera rotated to ${this.currentDirection} camera`);
|
||||
}
|
||||
|
||||
@@ -738,4 +759,179 @@ export class CapacitorPlatformService implements PlatformService {
|
||||
params || [],
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Clean up any existing database connections to prevent conflicts
|
||||
*/
|
||||
private async cleanupExistingConnections(): Promise<void> {
|
||||
try {
|
||||
// Check if we have an existing connection
|
||||
if (this.db) {
|
||||
try {
|
||||
await this.db.close();
|
||||
} catch (closeError) {
|
||||
logger.warn(
|
||||
"[CapacitorPlatformService] Error closing existing connection:",
|
||||
closeError,
|
||||
);
|
||||
}
|
||||
this.db = null;
|
||||
}
|
||||
|
||||
// Check for existing connections with the same name
|
||||
const connections = await this.sqlite.checkConnectionsConsistency();
|
||||
const isConn = await this.sqlite.isConnection(this.dbName, false);
|
||||
|
||||
if (isConn.result) {
|
||||
logger.log(
|
||||
"[CapacitorPlatformService] Found existing connection, closing it",
|
||||
);
|
||||
await this.sqlite.closeConnection(this.dbName, false);
|
||||
}
|
||||
} catch (error) {
|
||||
logger.warn(
|
||||
"[CapacitorPlatformService] Error during connection cleanup:",
|
||||
error,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create database connection with retry logic
|
||||
*/
|
||||
private async createDatabaseConnection(): Promise<SQLiteDBConnection> {
|
||||
const maxRetries = 3;
|
||||
let lastError: Error | null = null;
|
||||
|
||||
for (let attempt = 1; attempt <= maxRetries; attempt++) {
|
||||
try {
|
||||
logger.log(
|
||||
`[CapacitorPlatformService] Creating database connection (attempt ${attempt}/${maxRetries})`,
|
||||
);
|
||||
|
||||
const db = await this.sqlite.createConnection(
|
||||
this.dbName,
|
||||
false,
|
||||
"no-encryption",
|
||||
1,
|
||||
false,
|
||||
);
|
||||
|
||||
await db.open();
|
||||
|
||||
logger.log(
|
||||
`[CapacitorPlatformService] Database connection created successfully on attempt ${attempt}`,
|
||||
);
|
||||
|
||||
return db;
|
||||
} catch (error) {
|
||||
lastError = error as Error;
|
||||
logger.error(
|
||||
`[CapacitorPlatformService] Database connection attempt ${attempt} failed:`,
|
||||
error,
|
||||
);
|
||||
|
||||
if (attempt < maxRetries) {
|
||||
// Wait before retry with exponential backoff
|
||||
const delay = Math.min(1000 * Math.pow(2, attempt - 1), 5000);
|
||||
logger.log(
|
||||
`[CapacitorPlatformService] Waiting ${delay}ms before retry...`,
|
||||
);
|
||||
await new Promise(resolve => setTimeout(resolve, delay));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
throw new Error(
|
||||
`[CapacitorPlatformService] Failed to create database connection after ${maxRetries} attempts: ${lastError?.message}`,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Configure database settings for optimal performance and stability
|
||||
*/
|
||||
private async configureDatabase(): Promise<void> {
|
||||
if (!this.db) {
|
||||
throw new Error("Database not initialized");
|
||||
}
|
||||
|
||||
try {
|
||||
// Configure for better performance and stability
|
||||
await this.db.execute("PRAGMA journal_mode=WAL;");
|
||||
await this.db.execute("PRAGMA synchronous=NORMAL;");
|
||||
await this.db.execute("PRAGMA cache_size=10000;");
|
||||
await this.db.execute("PRAGMA temp_store=MEMORY;");
|
||||
await this.db.execute("PRAGMA mmap_size=268435456;"); // 256MB
|
||||
|
||||
logger.log(
|
||||
"[CapacitorPlatformService] Database configuration applied successfully",
|
||||
);
|
||||
} catch (error) {
|
||||
logger.warn(
|
||||
"[CapacitorPlatformService] Error applying database configuration:",
|
||||
error,
|
||||
);
|
||||
// Don't throw here as the database is still functional
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clean up database resources
|
||||
*/
|
||||
private async cleanupDatabase(): Promise<void> {
|
||||
try {
|
||||
if (this.db) {
|
||||
await this.db.close();
|
||||
this.db = null;
|
||||
}
|
||||
this.initialized = false;
|
||||
this.initializationPromise = null;
|
||||
logger.log(
|
||||
"[CapacitorPlatformService] Database cleanup completed",
|
||||
);
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
"[CapacitorPlatformService] Error during database cleanup:",
|
||||
error,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Health check for database connection
|
||||
*/
|
||||
async healthCheck(): Promise<{ healthy: boolean; error?: string }> {
|
||||
try {
|
||||
if (!this.initialized || !this.db) {
|
||||
return { healthy: false, error: "Database not initialized" };
|
||||
}
|
||||
|
||||
// Try a simple query to test the connection
|
||||
await this.db.query("SELECT 1 as test");
|
||||
return { healthy: true };
|
||||
} catch (error) {
|
||||
logger.error("[CapacitorPlatformService] Health check failed:", error);
|
||||
return {
|
||||
healthy: false,
|
||||
error: error instanceof Error ? error.message : String(error)
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Force reinitialize the database connection
|
||||
*/
|
||||
async reinitializeDatabase(): Promise<void> {
|
||||
logger.log("[CapacitorPlatformService] Forcing database reinitialization");
|
||||
|
||||
// Clean up existing connection
|
||||
await this.cleanupDatabase();
|
||||
|
||||
// Reset initialization state
|
||||
this.initialized = false;
|
||||
this.initializationPromise = null;
|
||||
|
||||
// Reinitialize
|
||||
await this.initializeDatabase();
|
||||
}
|
||||
}
|
||||
|
||||
158
src/utils/databaseDiagnostics.ts
Normal file
158
src/utils/databaseDiagnostics.ts
Normal file
@@ -0,0 +1,158 @@
|
||||
/**
|
||||
* Database Diagnostics Utility
|
||||
*
|
||||
* This utility provides diagnostic tools for troubleshooting database connection
|
||||
* issues in the TimeSafari application, particularly for Capacitor SQLite.
|
||||
*
|
||||
* @author Matthew Raymer
|
||||
*/
|
||||
|
||||
import { logger } from "./logger";
|
||||
import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
|
||||
|
||||
export interface DatabaseDiagnosticInfo {
|
||||
platform: string;
|
||||
timestamp: string;
|
||||
databaseName: string;
|
||||
connectionStatus: string;
|
||||
errorDetails?: string;
|
||||
performanceMetrics?: {
|
||||
initializationTime?: number;
|
||||
queryTime?: number;
|
||||
};
|
||||
systemInfo?: {
|
||||
userAgent: string;
|
||||
platform: string;
|
||||
memory?: {
|
||||
used: number;
|
||||
total: number;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Performs comprehensive database diagnostics
|
||||
*/
|
||||
export async function runDatabaseDiagnostics(): Promise<DatabaseDiagnosticInfo> {
|
||||
const startTime = Date.now();
|
||||
const diagnosticInfo: DatabaseDiagnosticInfo = {
|
||||
platform: "unknown",
|
||||
timestamp: new Date().toISOString(),
|
||||
databaseName: "timesafari.sqlite",
|
||||
connectionStatus: "unknown",
|
||||
};
|
||||
|
||||
try {
|
||||
// Get platform service
|
||||
const platformService = PlatformServiceFactory.getInstance();
|
||||
const capabilities = platformService.getCapabilities();
|
||||
|
||||
diagnosticInfo.platform = capabilities.isIOS ? "iOS" :
|
||||
capabilities.isMobile ? "Android" : "Web";
|
||||
|
||||
// Add system information
|
||||
diagnosticInfo.systemInfo = {
|
||||
userAgent: navigator.userAgent,
|
||||
platform: navigator.platform,
|
||||
};
|
||||
|
||||
// Add memory information if available
|
||||
if ('memory' in performance) {
|
||||
const memory = (performance as any).memory;
|
||||
diagnosticInfo.systemInfo.memory = {
|
||||
used: memory.usedJSHeapSize,
|
||||
total: memory.totalJSHeapSize,
|
||||
};
|
||||
}
|
||||
|
||||
// Test database connection
|
||||
const initStart = Date.now();
|
||||
|
||||
try {
|
||||
// Test a simple query
|
||||
const queryStart = Date.now();
|
||||
const result = await platformService.dbQuery("SELECT 1 as test");
|
||||
const queryTime = Date.now() - queryStart;
|
||||
|
||||
diagnosticInfo.connectionStatus = "healthy";
|
||||
diagnosticInfo.performanceMetrics = {
|
||||
queryTime,
|
||||
};
|
||||
|
||||
logger.log("[DatabaseDiagnostics] Database connection test successful");
|
||||
} catch (error) {
|
||||
diagnosticInfo.connectionStatus = "error";
|
||||
diagnosticInfo.errorDetails = error instanceof Error ? error.message : String(error);
|
||||
|
||||
logger.error("[DatabaseDiagnostics] Database connection test failed:", error);
|
||||
}
|
||||
|
||||
const totalTime = Date.now() - startTime;
|
||||
if (diagnosticInfo.performanceMetrics) {
|
||||
diagnosticInfo.performanceMetrics.initializationTime = totalTime;
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
diagnosticInfo.connectionStatus = "critical";
|
||||
diagnosticInfo.errorDetails = error instanceof Error ? error.message : String(error);
|
||||
logger.error("[DatabaseDiagnostics] Diagnostic run failed:", error);
|
||||
}
|
||||
|
||||
// Log the complete diagnostic information
|
||||
logger.log("[DatabaseDiagnostics] Diagnostic results:", diagnosticInfo);
|
||||
|
||||
return diagnosticInfo;
|
||||
}
|
||||
|
||||
/**
|
||||
* Logs database performance metrics
|
||||
*/
|
||||
export function logDatabasePerformance(operation: string, duration: number): void {
|
||||
logger.log(`[DatabasePerformance] ${operation}: ${duration}ms`);
|
||||
|
||||
// Log warning for slow operations
|
||||
if (duration > 1000) {
|
||||
logger.warn(`[DatabasePerformance] Slow operation detected: ${operation} took ${duration}ms`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a database connection stress test
|
||||
*/
|
||||
export async function stressTestDatabase(iterations: number = 10): Promise<void> {
|
||||
logger.log(`[DatabaseStressTest] Starting stress test with ${iterations} iterations`);
|
||||
|
||||
const platformService = PlatformServiceFactory.getInstance();
|
||||
const results: number[] = [];
|
||||
|
||||
for (let i = 0; i < iterations; i++) {
|
||||
const start = Date.now();
|
||||
try {
|
||||
await platformService.dbQuery("SELECT 1 as test");
|
||||
const duration = Date.now() - start;
|
||||
results.push(duration);
|
||||
|
||||
logger.log(`[DatabaseStressTest] Iteration ${i + 1}: ${duration}ms`);
|
||||
} catch (error) {
|
||||
logger.error(`[DatabaseStressTest] Iteration ${i + 1} failed:`, error);
|
||||
}
|
||||
|
||||
// Small delay between iterations
|
||||
await new Promise(resolve => setTimeout(resolve, 100));
|
||||
}
|
||||
|
||||
if (results.length > 0) {
|
||||
const avg = results.reduce((a, b) => a + b, 0) / results.length;
|
||||
const min = Math.min(...results);
|
||||
const max = Math.max(...results);
|
||||
|
||||
logger.log(`[DatabaseStressTest] Results - Avg: ${avg.toFixed(2)}ms, Min: ${min}ms, Max: ${max}ms`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Exports diagnostic information for debugging
|
||||
*/
|
||||
export function exportDiagnosticInfo(info: DatabaseDiagnosticInfo): string {
|
||||
return JSON.stringify(info, null, 2);
|
||||
}
|
||||
@@ -198,7 +198,7 @@ export default class ClaimAddRawView extends Vue {
|
||||
this.apiServer,
|
||||
this.axios,
|
||||
);
|
||||
if (result.type === "success") {
|
||||
if (result.success) {
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
|
||||
@@ -46,6 +46,7 @@
|
||||
</h2>
|
||||
<div class="flex justify-center w-full">
|
||||
<router-link
|
||||
v-if="veriClaim.id"
|
||||
:to="'/claim-cert/' + encodeURIComponent(veriClaim.id)"
|
||||
class="text-blue-500 mt-2"
|
||||
title="Printable Certificate"
|
||||
@@ -292,12 +293,17 @@
|
||||
<div class="text-sm">
|
||||
{{ didInfo(confirmerId) }}
|
||||
<span v-if="!serverUtil.isEmptyOrHiddenDid(confirmerId)">
|
||||
<a :href="`/did/${confirmerId}`" class="text-blue-500">
|
||||
<router-link
|
||||
:to="{
|
||||
path: '/did/' + encodeURIComponent(confirmerId),
|
||||
}"
|
||||
class="text-blue-500"
|
||||
>
|
||||
<font-awesome
|
||||
icon="arrow-up-right-from-square"
|
||||
class="fa-fw"
|
||||
/>
|
||||
</a>
|
||||
</router-link>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -329,12 +335,17 @@
|
||||
<div class="text-sm">
|
||||
{{ didInfo(confsVisibleTo) }}
|
||||
<span v-if="!serverUtil.isEmptyOrHiddenDid(confsVisibleTo)">
|
||||
<a :href="`/did/${confsVisibleTo}`" class="text-blue-500">
|
||||
<router-link
|
||||
:to="{
|
||||
path: '/did/' + encodeURIComponent(confsVisibleTo),
|
||||
}"
|
||||
class="text-blue-500"
|
||||
>
|
||||
<font-awesome
|
||||
icon="arrow-up-right-from-square"
|
||||
class="fa-fw"
|
||||
/>
|
||||
</a>
|
||||
</router-link>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -443,12 +454,17 @@
|
||||
<span>
|
||||
{{ didInfo(visDid) }}
|
||||
<span v-if="!serverUtil.isEmptyOrHiddenDid(visDid)">
|
||||
<a :href="`/did/${visDid}`" class="text-blue-500">
|
||||
<router-link
|
||||
:to="{
|
||||
path: '/did/' + encodeURIComponent(visDid),
|
||||
}"
|
||||
class="text-blue-500"
|
||||
>
|
||||
<font-awesome
|
||||
icon="arrow-up-right-from-square"
|
||||
class="fa-fw"
|
||||
/>
|
||||
</a>
|
||||
</router-link>
|
||||
</span>
|
||||
<span v-if="veriClaim.publicUrls?.[visDid]"
|
||||
>, found at <a
|
||||
@@ -925,7 +941,7 @@ export default class ClaimView extends Vue {
|
||||
this.apiServer,
|
||||
this.axios,
|
||||
);
|
||||
if (result.type === "success") {
|
||||
if (result.success) {
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
|
||||
@@ -407,14 +407,14 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-2 ml-2">
|
||||
<a
|
||||
<router-link
|
||||
v-if="isRegistered"
|
||||
class="text-blue-500 cursor-pointer"
|
||||
:href="urlForNewGive"
|
||||
:to="urlForNewGive"
|
||||
>
|
||||
<font-awesome icon="file-lines" />
|
||||
Record a Give Similar to the Original
|
||||
</a>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -831,7 +831,7 @@ export default class ConfirmGiftView extends Vue {
|
||||
this.apiServer,
|
||||
this.axios,
|
||||
);
|
||||
if (result.type === "success") {
|
||||
if (result.success) {
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
|
||||
><font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
|
||||
</router-link>
|
||||
{{ stepType === "giver" ? "Given by..." : "Given to..." }}
|
||||
Given by...
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
<button
|
||||
type="button"
|
||||
class="block w-full text-center text-sm uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
|
||||
@click="openDialog('Unnamed')"
|
||||
@click="openDialog()"
|
||||
>
|
||||
<font-awesome icon="gift" class="fa-fw"></font-awesome>
|
||||
</button>
|
||||
@@ -65,13 +65,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<GiftedDialog
|
||||
ref="customDialog"
|
||||
:from-project-id="fromProjectId"
|
||||
:to-project-id="toProjectId"
|
||||
:show-projects="showProjects"
|
||||
:is-from-project-view="isFromProjectView"
|
||||
/>
|
||||
<GiftedDialog ref="customDialog" :to-project-id="projectId" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -103,24 +97,6 @@ export default class ContactGiftingView extends Vue {
|
||||
description = "";
|
||||
projectId = "";
|
||||
prompt = "";
|
||||
recipientProjectName = "";
|
||||
recipientProjectImage = "";
|
||||
recipientProjectHandleId = "";
|
||||
|
||||
// New context parameters
|
||||
stepType = "giver";
|
||||
giverEntityType = "person" as "person" | "project";
|
||||
recipientEntityType = "person" as "person" | "project";
|
||||
giverProjectId = "";
|
||||
giverProjectName = "";
|
||||
giverProjectImage = "";
|
||||
giverProjectHandleId = "";
|
||||
giverDid = "";
|
||||
recipientDid = "";
|
||||
fromProjectId = "";
|
||||
toProjectId = "";
|
||||
showProjects = false;
|
||||
isFromProjectView = false;
|
||||
|
||||
async created() {
|
||||
try {
|
||||
@@ -148,41 +124,9 @@ export default class ContactGiftingView extends Vue {
|
||||
);
|
||||
}
|
||||
|
||||
this.projectId =
|
||||
(this.$route.query["recipientProjectId"] as string) || "";
|
||||
this.recipientProjectName =
|
||||
(this.$route.query["recipientProjectName"] as string) || "";
|
||||
this.recipientProjectImage =
|
||||
(this.$route.query["recipientProjectImage"] as string) || "";
|
||||
this.recipientProjectHandleId =
|
||||
(this.$route.query["recipientProjectHandleId"] as string) || "";
|
||||
this.projectId = (this.$route.query["projectId"] as string) || "";
|
||||
this.prompt = (this.$route.query["prompt"] as string) ?? this.prompt;
|
||||
|
||||
// Read new context parameters
|
||||
this.stepType = (this.$route.query["stepType"] as string) || "giver";
|
||||
this.giverEntityType =
|
||||
(this.$route.query["giverEntityType"] as "person" | "project") ||
|
||||
"person";
|
||||
this.recipientEntityType =
|
||||
(this.$route.query["recipientEntityType"] as "person" | "project") ||
|
||||
"person";
|
||||
this.giverProjectId =
|
||||
(this.$route.query["giverProjectId"] as string) || "";
|
||||
this.giverProjectName =
|
||||
(this.$route.query["giverProjectName"] as string) || "";
|
||||
this.giverProjectImage =
|
||||
(this.$route.query["giverProjectImage"] as string) || "";
|
||||
this.giverProjectHandleId =
|
||||
(this.$route.query["giverProjectHandleId"] as string) || "";
|
||||
this.giverDid = (this.$route.query["giverDid"] as string) || "";
|
||||
this.recipientDid = (this.$route.query["recipientDid"] as string) || "";
|
||||
this.fromProjectId = (this.$route.query["fromProjectId"] as string) || "";
|
||||
this.toProjectId = (this.$route.query["toProjectId"] as string) || "";
|
||||
this.showProjects =
|
||||
(this.$route.query["showProjects"] as string) === "true";
|
||||
this.isFromProjectView =
|
||||
(this.$route.query["isFromProjectView"] as string) === "true";
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
} catch (err: any) {
|
||||
logger.error("Error retrieving settings & contacts:", err);
|
||||
@@ -200,108 +144,17 @@ export default class ContactGiftingView extends Vue {
|
||||
}
|
||||
}
|
||||
|
||||
openDialog(contact?: GiverReceiverInputInfo | "Unnamed") {
|
||||
if (contact === "Unnamed") {
|
||||
// Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected
|
||||
let recipient: GiverReceiverInputInfo;
|
||||
let giver: GiverReceiverInputInfo | undefined;
|
||||
|
||||
if (this.stepType === "giver") {
|
||||
// We're selecting a giver, so recipient is either a project or the current user
|
||||
if (this.recipientEntityType === "project") {
|
||||
recipient = {
|
||||
did: this.recipientProjectHandleId,
|
||||
name: this.recipientProjectName,
|
||||
image: this.recipientProjectImage,
|
||||
handleId: this.recipientProjectHandleId,
|
||||
};
|
||||
} else {
|
||||
recipient = { did: this.activeDid, name: "You" };
|
||||
}
|
||||
giver = undefined; // Will be set to "Unnamed" in GiftedDialog
|
||||
} else {
|
||||
// We're selecting a recipient, so recipient is "Unnamed" and giver is preserved from context
|
||||
recipient = { did: "", name: "Unnamed" };
|
||||
|
||||
// Preserve the existing giver from the context
|
||||
if (this.giverEntityType === "project") {
|
||||
giver = {
|
||||
did: this.giverProjectHandleId,
|
||||
name: this.giverProjectName,
|
||||
image: this.giverProjectImage,
|
||||
handleId: this.giverProjectHandleId,
|
||||
};
|
||||
} else if (this.giverDid) {
|
||||
giver = {
|
||||
did: this.giverDid,
|
||||
name: this.giverProjectName || "Someone",
|
||||
};
|
||||
} else {
|
||||
giver = { did: this.activeDid, name: "You" };
|
||||
}
|
||||
}
|
||||
|
||||
(this.$refs.customDialog as GiftedDialog).open(
|
||||
giver,
|
||||
recipient,
|
||||
undefined,
|
||||
this.stepType === "giver" ? "Given by Unnamed" : "Given to Unnamed",
|
||||
this.prompt,
|
||||
);
|
||||
// Immediately select "Unnamed" and move to Step 2
|
||||
(this.$refs.customDialog as GiftedDialog).selectGiver();
|
||||
} else {
|
||||
// Regular case: contact is a GiverReceiverInputInfo
|
||||
let giver: GiverReceiverInputInfo;
|
||||
let recipient: GiverReceiverInputInfo;
|
||||
|
||||
if (this.stepType === "giver") {
|
||||
// We're selecting a giver, so the contact becomes the giver
|
||||
giver = contact as GiverReceiverInputInfo; // Safe because we know contact is not "Unnamed" or undefined
|
||||
|
||||
// Recipient is either a project or the current user
|
||||
if (this.recipientEntityType === "project") {
|
||||
recipient = {
|
||||
did: this.recipientProjectHandleId,
|
||||
name: this.recipientProjectName,
|
||||
image: this.recipientProjectImage,
|
||||
handleId: this.recipientProjectHandleId,
|
||||
};
|
||||
} else {
|
||||
recipient = { did: this.activeDid, name: "You" };
|
||||
}
|
||||
} else {
|
||||
// We're selecting a recipient, so the contact becomes the recipient
|
||||
recipient = contact as GiverReceiverInputInfo; // Safe because we know contact is not "Unnamed" or undefined
|
||||
|
||||
// Preserve the existing giver from the context
|
||||
if (this.giverEntityType === "project") {
|
||||
giver = {
|
||||
did: this.giverProjectHandleId,
|
||||
name: this.giverProjectName,
|
||||
image: this.giverProjectImage,
|
||||
handleId: this.giverProjectHandleId,
|
||||
};
|
||||
} else if (this.giverDid) {
|
||||
giver = {
|
||||
did: this.giverDid,
|
||||
name: this.giverProjectName || "Someone",
|
||||
};
|
||||
} else {
|
||||
giver = { did: this.activeDid, name: "You" };
|
||||
}
|
||||
}
|
||||
|
||||
(this.$refs.customDialog as GiftedDialog).open(
|
||||
giver,
|
||||
recipient,
|
||||
undefined,
|
||||
this.stepType === "giver"
|
||||
? "Given by " + (contact?.name || "someone not named")
|
||||
: "Given to " + (contact?.name || "someone not named"),
|
||||
this.prompt,
|
||||
);
|
||||
}
|
||||
openDialog(giver?: GiverReceiverInputInfo) {
|
||||
const recipient = this.projectId
|
||||
? undefined
|
||||
: { did: this.activeDid, name: "you" };
|
||||
(this.$refs.customDialog as GiftedDialog).open(
|
||||
giver,
|
||||
recipient,
|
||||
undefined,
|
||||
"Given by " + (giver?.name || "someone not named"),
|
||||
this.prompt,
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -788,7 +788,7 @@ export default class DiscoverView extends Vue {
|
||||
const route = {
|
||||
path: this.isProjectsActive
|
||||
? "/project/" + encodeURIComponent(id)
|
||||
: "/userProfile/" + encodeURIComponent(id),
|
||||
: "/user-profile/" + encodeURIComponent(id),
|
||||
};
|
||||
this.$router.push(route);
|
||||
}
|
||||
|
||||
@@ -826,7 +826,7 @@ export default class GiftedDetails extends Vue {
|
||||
}
|
||||
|
||||
if (!result.success) {
|
||||
const errorMessage = this.getGiveCreationErrorMessage(result);
|
||||
const errorMessage = result.error;
|
||||
logger.error("Error with give creation result:", result);
|
||||
this.$notify(
|
||||
{
|
||||
@@ -899,19 +899,6 @@ export default class GiftedDetails extends Vue {
|
||||
|
||||
// Helper functions for readability
|
||||
|
||||
/**
|
||||
* @param result direct response eg. ErrorResult or SuccessResult (potentially with embedded "data")
|
||||
* @returns best guess at an error message
|
||||
*/
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
getGiveCreationErrorMessage(result: any) {
|
||||
return (
|
||||
result.error?.userMessage ||
|
||||
result.error?.error ||
|
||||
result.response?.data?.error?.message
|
||||
);
|
||||
}
|
||||
|
||||
explainData() {
|
||||
this.$notify(
|
||||
{
|
||||
|
||||
@@ -24,11 +24,11 @@
|
||||
<!-- eslint-disable prettier/prettier max-len -->
|
||||
<div>
|
||||
<p>
|
||||
This app focuses on gifts & gratitude, using them to build cool things together with your network.
|
||||
This app focuses on raw gratitude, using it to build cool things together with your network.
|
||||
</p>
|
||||
|
||||
<p class="ml-4">
|
||||
If you'd like to see the page-by-page help,
|
||||
If you'd like to see the page-by-page help again,
|
||||
<span
|
||||
class="text-blue-500 cursor-pointer"
|
||||
@click="unsetFinishedOnboarding()"
|
||||
@@ -555,9 +555,6 @@
|
||||
initiative.
|
||||
</p>
|
||||
|
||||
<h2 class="text-xl font-semibold">What app version is this?</h2>
|
||||
<p>{{ package.version }} ({{ commitHash }})</p>
|
||||
|
||||
<h2 class="text-xl font-semibold">
|
||||
I have other questions or feedback, like getting a new profile or removing my data or requesting an improvement.
|
||||
</h2>
|
||||
@@ -567,6 +564,28 @@
|
||||
>info@TimeSafari.app</a
|
||||
>
|
||||
</p>
|
||||
|
||||
<h2 class="text-xl font-semibold">What app version is this?</h2>
|
||||
<p>{{ package.version }} ({{ commitHash }})</p>
|
||||
|
||||
<div v-if="Capacitor.isNativePlatform()">
|
||||
<h2 class="text-xl font-semibold">
|
||||
Do I have the latest version?
|
||||
</h2>
|
||||
<p v-if="Capacitor.getPlatform() === 'ios'">
|
||||
<a href="https://apps.apple.com/us/app/time-safari/id6742664907" target="_blank" class="text-blue-500">
|
||||
Check the App Store.
|
||||
</a>
|
||||
</p>
|
||||
<p v-else-if="Capacitor.getPlatform() === 'android'">
|
||||
<a href="https://timesafari.app/app.apk" target="_blank" class="text-blue-500">
|
||||
Download the latest APK to see.
|
||||
</a>
|
||||
</p>
|
||||
<p v-else>
|
||||
Sorry, your platform of '{{ Capacitor.getPlatform() }}' is not recognized.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- eslint enable -->
|
||||
</section>
|
||||
@@ -603,6 +622,7 @@ export default class HelpView extends Vue {
|
||||
showVerifiable = false;
|
||||
|
||||
APP_SERVER = APP_SERVER;
|
||||
Capacitor = Capacitor;
|
||||
|
||||
// Ideally, we put no functionality in here, especially in the setup,
|
||||
// because we never want this page to have a chance of throwing an error.
|
||||
|
||||
@@ -117,73 +117,101 @@ Raymer * @version 1.0.0 */
|
||||
</div>
|
||||
|
||||
<div v-else id="sectionRecordSomethingGiven">
|
||||
<!-- Record Quick-Action -->
|
||||
<div class="mb-6">
|
||||
<div class="flex gap-2 items-center mb-2">
|
||||
<h2 class="text-xl font-bold">Record something given by:</h2>
|
||||
<button
|
||||
class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
|
||||
@click="openGiftedPrompts()"
|
||||
>
|
||||
<font-awesome
|
||||
icon="lightbulb"
|
||||
class="block text-center w-[1em]"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<!-- !isCreatingIdentifier && isRegistered -->
|
||||
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="text-center text-base uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-2 rounded-lg"
|
||||
@click="openDialogPerson()"
|
||||
>
|
||||
<font-awesome icon="user" />
|
||||
Person
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-center text-base uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-2 rounded-lg"
|
||||
@click="openProjectDialog()"
|
||||
>
|
||||
<font-awesome icon="folder-open" />
|
||||
Project
|
||||
</button>
|
||||
</div>
|
||||
<!-- show the actions for recognizing a give -->
|
||||
<div class="flex">
|
||||
<h2 class="text-xl font-bold">What have you seen someone do?</h2>
|
||||
<button
|
||||
class="ml-2 block text-xs text-center bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1 rounded-md"
|
||||
@click="openGiftedPrompts()"
|
||||
>
|
||||
<font-awesome icon="lightbulb" class="fa-fw" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ul
|
||||
class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mt-4"
|
||||
>
|
||||
<li @click="openDialog()">
|
||||
<img
|
||||
src="../assets/blank-square.svg"
|
||||
class="mx-auto border border-blue-500 rounded-md mb-1 cursor-pointer"
|
||||
/>
|
||||
<h3
|
||||
class="text-xs text-blue-500 italic font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
|
||||
>
|
||||
Unnamed/Unknown
|
||||
</h3>
|
||||
</li>
|
||||
<li v-if="allContacts.length === 0" class="text-sm">
|
||||
(Add friends to see more people worthy of recognition.)
|
||||
</li>
|
||||
<li
|
||||
v-for="contact in allContacts.slice(0, 6)"
|
||||
:key="contact.did"
|
||||
@click="openDialog(contact)"
|
||||
>
|
||||
<EntityIcon
|
||||
:contact="contact"
|
||||
:icon-size="64"
|
||||
class="mx-auto border border-blue-500 rounded-md mb-1 cursor-pointer"
|
||||
/>
|
||||
<h3
|
||||
class="text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
|
||||
>
|
||||
{{ contact.name || contact.did }}
|
||||
</h3>
|
||||
</li>
|
||||
<li>
|
||||
<router-link
|
||||
v-if="allContacts.length >= 6"
|
||||
:to="{ name: 'contact-gift' }"
|
||||
class="flex align-bottom text-xs text-blue-500 mt-12 cursor-pointer"
|
||||
>
|
||||
... or someone else...
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<GiftedDialog ref="customDialog" :show-projects="showProjectsDialog" />
|
||||
<GiftedDialog ref="customDialog" />
|
||||
<GiftedPrompts ref="giftedPrompts" />
|
||||
<FeedFilters ref="feedFilters" />
|
||||
|
||||
<div class="relative">
|
||||
<button
|
||||
v-if="isRegistered"
|
||||
class="absolute right-6 bottom-0 transform translate-y-1/2 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full"
|
||||
@click="openDialog()"
|
||||
>
|
||||
<font-awesome icon="plus" class="fa-fw" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Results List -->
|
||||
<div class="mt-4 mb-4">
|
||||
<div class="flex gap-2 items-center mb-3">
|
||||
<h2 class="text-xl font-bold">Latest Activity</h2>
|
||||
<button
|
||||
v-if="resultsAreFiltered()"
|
||||
class="block ms-auto text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
|
||||
@click="openFeedFilters()"
|
||||
>
|
||||
<font-awesome
|
||||
icon="filter"
|
||||
class="block text-center w-[1em] translate-y-[0.05em]"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
|
||||
@click="openFeedFilters()"
|
||||
>
|
||||
<font-awesome
|
||||
icon="filter"
|
||||
class="block text-center w-[1em] translate-y-[0.05em]"
|
||||
/>
|
||||
</button>
|
||||
<div class="flex items-center mb-4">
|
||||
<h2 class="text-xl font-bold flex items-center gap-4">
|
||||
Latest Activity
|
||||
<button
|
||||
v-if="resultsAreFiltered()"
|
||||
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md text-xs text-white"
|
||||
@click="openFeedFilters()"
|
||||
>
|
||||
<font-awesome icon="filter" class="fa-fw" />
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md text-xs text-white"
|
||||
@click="openFeedFilters()"
|
||||
>
|
||||
<font-awesome icon="filter" class="fa-fw" />
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -446,7 +474,6 @@ export default class HomeView extends Vue {
|
||||
selectedImageData: Blob | null = null;
|
||||
isImageViewerOpen = false;
|
||||
imageCache: Map<string, Blob | null> = new Map();
|
||||
showProjectsDialog = false;
|
||||
|
||||
/**
|
||||
* Initializes the component on mount
|
||||
@@ -1610,33 +1637,17 @@ export default class HomeView extends Vue {
|
||||
* @param giver Optional contact info for giver
|
||||
* @param description Optional gift description
|
||||
*/
|
||||
openDialog(giver?: GiverReceiverInputInfo | "Unnamed", description?: string) {
|
||||
if (giver === "Unnamed") {
|
||||
// Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected
|
||||
(this.$refs.customDialog as GiftedDialog).open(
|
||||
undefined,
|
||||
{
|
||||
did: this.activeDid,
|
||||
name: "You",
|
||||
} as GiverReceiverInputInfo,
|
||||
undefined,
|
||||
"Given by Unnamed",
|
||||
description,
|
||||
);
|
||||
// Immediately select "Unnamed" and move to Step 2
|
||||
(this.$refs.customDialog as GiftedDialog).selectGiver();
|
||||
} else {
|
||||
(this.$refs.customDialog as GiftedDialog).open(
|
||||
giver,
|
||||
{
|
||||
did: this.activeDid,
|
||||
name: "You",
|
||||
} as GiverReceiverInputInfo,
|
||||
undefined,
|
||||
"Given by " + (giver?.name || "someone not named"),
|
||||
description,
|
||||
);
|
||||
}
|
||||
openDialog(giver?: GiverReceiverInputInfo, description?: string) {
|
||||
(this.$refs.customDialog as GiftedDialog).open(
|
||||
giver,
|
||||
{
|
||||
did: this.activeDid,
|
||||
name: "you",
|
||||
} as GiverReceiverInputInfo,
|
||||
undefined,
|
||||
"Given by " + (giver?.name || "someone not named"),
|
||||
description,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -1832,7 +1843,7 @@ export default class HomeView extends Vue {
|
||||
this.axios,
|
||||
);
|
||||
|
||||
if (result.type === "success") {
|
||||
if (result.success) {
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
@@ -1870,18 +1881,5 @@ export default class HomeView extends Vue {
|
||||
this.$router.push({ name: "contact-qr" });
|
||||
}
|
||||
}
|
||||
|
||||
openDialogPerson(
|
||||
giver?: GiverReceiverInputInfo | "Unnamed",
|
||||
description?: string,
|
||||
) {
|
||||
this.showProjectsDialog = false;
|
||||
this.openDialog(giver, description);
|
||||
}
|
||||
|
||||
openProjectDialog() {
|
||||
this.showProjectsDialog = true;
|
||||
(this.$refs.customDialog as any).open();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -52,16 +52,24 @@
|
||||
icon="user"
|
||||
class="fa-fw text-slate-400"
|
||||
></font-awesome>
|
||||
{{ issuerInfoObject?.displayName }}
|
||||
<span v-if="!serverUtil.isEmptyOrHiddenDid(issuer)">
|
||||
<a :href="`/did/${issuer}`" class="text-blue-500">
|
||||
<span class="truncate inline-block max-w-[calc(100%-2rem)]">
|
||||
{{ issuerInfoObject?.displayName }}
|
||||
</span>
|
||||
<span class="inline-flex items-center">
|
||||
<router-link
|
||||
:to="{
|
||||
path: '/did/' + encodeURIComponent(issuer),
|
||||
}"
|
||||
class="text-blue-500 ml-1"
|
||||
title="See more about this person"
|
||||
>
|
||||
<font-awesome
|
||||
icon="arrow-up-right-from-square"
|
||||
class="fa-fw"
|
||||
/>
|
||||
</a>
|
||||
</router-link>
|
||||
</span>
|
||||
<span v-else-if="serverUtil.isHiddenDid(issuer)">
|
||||
<span v-if="serverUtil.isHiddenDid(issuer)" class="ml-1">
|
||||
<font-awesome
|
||||
icon="info-circle"
|
||||
class="fa-fw text-blue-500 cursor-pointer"
|
||||
@@ -196,11 +204,63 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<GiftedDialog
|
||||
ref="giveDialogToThis"
|
||||
:to-project-id="projectId"
|
||||
:is-from-project-view="true"
|
||||
/>
|
||||
<div v-if="activeDid && isRegistered">
|
||||
<div class="text-center">
|
||||
<p class="mt-2 mt-4 text-center">Record a contribution from:</p>
|
||||
</div>
|
||||
<ul
|
||||
class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5 mt-2"
|
||||
>
|
||||
<li @click="openGiftDialogToProject({ name: 'you', did: activeDid })">
|
||||
<font-awesome
|
||||
icon="hand"
|
||||
class="fa-fw text-blue-500 text-5xl cursor-pointer"
|
||||
/>
|
||||
<h3
|
||||
class="mt-5 text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
|
||||
>
|
||||
You
|
||||
</h3>
|
||||
</li>
|
||||
<li @click="openGiftDialogToProject()">
|
||||
<img
|
||||
src="../assets/blank-square.svg"
|
||||
class="mx-auto border border-blue-300 rounded-md mb-1 cursor-pointer"
|
||||
/>
|
||||
<h3
|
||||
class="text-xs text-blue-500 italic font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
|
||||
>
|
||||
Unnamed/Unknown
|
||||
</h3>
|
||||
</li>
|
||||
<li
|
||||
v-for="contact in allContacts.slice(0, 5)"
|
||||
:key="contact.did"
|
||||
@click="openGiftDialogToProject(contact)"
|
||||
>
|
||||
<EntityIcon
|
||||
:contact="contact"
|
||||
:icon-size="64"
|
||||
class="mx-auto border border-blue-300 rounded-md mb-1 cursor-pointer"
|
||||
/>
|
||||
<h3
|
||||
class="text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
|
||||
>
|
||||
{{ contact.name || "(no name)" }}
|
||||
</h3>
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
v-if="allContacts.length >= 5"
|
||||
class="flex align-bottom text-xs text-blue-500 mt-12 cursor-pointer"
|
||||
@click="onClickAllContactsGifting()"
|
||||
>
|
||||
... or someone else...
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<GiftedDialog ref="giveDialogToThis" :to-project-id="projectId" />
|
||||
|
||||
<!-- Offers & Gifts to & from this -->
|
||||
<div class="grid items-start grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
|
||||
@@ -466,12 +526,7 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<GiftedDialog
|
||||
ref="giveDialogFromThis"
|
||||
:from-project-id="projectId"
|
||||
:show-projects="true"
|
||||
:is-from-project-view="true"
|
||||
/>
|
||||
<GiftedDialog ref="giveDialogFromThis" :from-project-id="projectId" />
|
||||
|
||||
<h3 class="text-lg font-bold mb-3 mt-4">
|
||||
Benefitted From This Project
|
||||
@@ -1182,53 +1237,21 @@ export default class ProjectViewView extends Vue {
|
||||
);
|
||||
}
|
||||
|
||||
openGiftDialogToProject(
|
||||
contact?: libsUtil.GiverReceiverInputInfo | "Unnamed",
|
||||
) {
|
||||
if (contact === "Unnamed") {
|
||||
// Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected
|
||||
(this.$refs.giveDialogToThis as GiftedDialog).open(
|
||||
undefined,
|
||||
undefined,
|
||||
undefined,
|
||||
"Given by Unnamed to this project",
|
||||
);
|
||||
// Immediately select "Unnamed" and move to Step 2
|
||||
(this.$refs.giveDialogToThis as GiftedDialog).selectGiver();
|
||||
} else {
|
||||
// Open straight to Step 2 with current user as giver and current project as recipient
|
||||
(this.$refs.giveDialogToThis as GiftedDialog).open(
|
||||
{
|
||||
did: this.activeDid,
|
||||
name: "You",
|
||||
},
|
||||
{
|
||||
did: this.issuer,
|
||||
name: this.name,
|
||||
handleId: this.projectId,
|
||||
image: this.imageUrl,
|
||||
},
|
||||
undefined,
|
||||
`Given to ${this.name}`,
|
||||
);
|
||||
}
|
||||
openGiftDialogToProject(contact?: libsUtil.GiverReceiverInputInfo) {
|
||||
(this.$refs.giveDialogToThis as GiftedDialog).open(
|
||||
contact,
|
||||
undefined,
|
||||
undefined,
|
||||
(contact?.name || "Someone not named") + ` gave to this project`,
|
||||
);
|
||||
}
|
||||
|
||||
openGiftDialogFromProject() {
|
||||
// Set the project as giver and the current user as recipient
|
||||
(this.$refs.giveDialogFromThis as GiftedDialog).open(
|
||||
{
|
||||
did: undefined,
|
||||
name: this.name,
|
||||
handleId: this.projectId,
|
||||
image: this.imageUrl,
|
||||
},
|
||||
undefined,
|
||||
{ did: this.activeDid, name: "You" },
|
||||
undefined,
|
||||
`${this.name} gave to you`,
|
||||
undefined,
|
||||
undefined,
|
||||
true,
|
||||
`This project gave to you`,
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1410,7 +1433,7 @@ export default class ProjectViewView extends Vue {
|
||||
this.apiServer,
|
||||
this.axios,
|
||||
);
|
||||
if (result.type === "success") {
|
||||
if (result.success) {
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
|
||||
@@ -155,7 +155,7 @@ import { Contact } from "../db/tables/contacts";
|
||||
import {
|
||||
GenericCredWrapper,
|
||||
GenericVerifiableCredential,
|
||||
ErrorResult,
|
||||
CreateAndSubmitClaimResult,
|
||||
} from "../interfaces";
|
||||
import {
|
||||
BVC_MEETUPS_PROJECT_CLAIM_ID,
|
||||
@@ -298,13 +298,13 @@ export default class QuickActionBvcBeginView extends Vue {
|
||||
}
|
||||
|
||||
// in parallel, make a confirmation for each selected claim and send them all to the server
|
||||
const confirmResults = await Promise.allSettled(
|
||||
const confirmResults: PromiseSettledResult<CreateAndSubmitClaimResult>[] = await Promise.allSettled(
|
||||
this.claimsToConfirmSelected.map(async (jwtId) => {
|
||||
const record = this.claimsToConfirm.find(
|
||||
(claim) => claim.id === jwtId,
|
||||
);
|
||||
if (!record) {
|
||||
return { type: "error", error: "Record not found." };
|
||||
return { success: false, error: "Record not found." };
|
||||
}
|
||||
return createAndSubmitConfirmation(
|
||||
this.activeDid,
|
||||
@@ -318,8 +318,8 @@ export default class QuickActionBvcBeginView extends Vue {
|
||||
);
|
||||
// check for any rejected confirmations
|
||||
const confirmsSucceeded = confirmResults.filter(
|
||||
(result) =>
|
||||
result.status === "fulfilled" && result.value.type === "success",
|
||||
// 'fulfilled' is the status in a successful PromiseFulfilledResult
|
||||
(result) => result.status === "fulfilled" && result.value.success,
|
||||
);
|
||||
if (confirmsSucceeded.length < this.claimsToConfirmSelected.length) {
|
||||
logger.error("Error sending confirmations:", confirmResults);
|
||||
@@ -353,7 +353,7 @@ export default class QuickActionBvcBeginView extends Vue {
|
||||
undefined,
|
||||
BVC_MEETUPS_PROJECT_CLAIM_ID,
|
||||
);
|
||||
giveSucceeded = giveResult.type === "success";
|
||||
giveSucceeded = giveResult.success;
|
||||
if (!giveSucceeded) {
|
||||
logger.error("Error sending give:", giveResult);
|
||||
this.$notify(
|
||||
@@ -362,7 +362,7 @@ export default class QuickActionBvcBeginView extends Vue {
|
||||
type: "danger",
|
||||
title: "Error",
|
||||
text:
|
||||
(giveResult as ErrorResult)?.error?.userMessage ||
|
||||
(giveResult as CreateAndSubmitClaimResult)?.error ||
|
||||
"There was an error sending that give.",
|
||||
},
|
||||
5000,
|
||||
|
||||
@@ -22,7 +22,7 @@ export default defineConfig({
|
||||
url: 'url/',
|
||||
zlib: 'browserify-zlib',
|
||||
path: 'path-browserify',
|
||||
fs: path.resolve(__dirname, 'src/utils/node-modules/fs.js'),
|
||||
fs: false,
|
||||
tty: 'tty-browserify',
|
||||
net: false,
|
||||
dns: false,
|
||||
|
||||
Reference in New Issue
Block a user