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
|
icons
|
||||||
|
|
||||||
|
|
||||||
|
android/app/src/main/res/
|
||||||
31
BUILDING.md
31
BUILDING.md
@@ -321,11 +321,11 @@ Prerequisites: macOS with Xcode installed
|
|||||||
|
|
||||||
#### Each Release
|
#### Each Release
|
||||||
|
|
||||||
0. First time (or if XCode dependencies change):
|
0. First time (or if dependencies change):
|
||||||
|
|
||||||
- `pkgx +rubygems.org sh`
|
- `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
|
```bash
|
||||||
gem_path=$(which gem)
|
gem_path=$(which gem)
|
||||||
@@ -334,12 +334,9 @@ Prerequisites: macOS with Xcode installed
|
|||||||
export GEM_PATH=$shortened_path
|
export GEM_PATH=$shortened_path
|
||||||
```
|
```
|
||||||
|
|
||||||
```bash
|
1. Check the iOS flag isIOS in CapacitorPlatformService (currently hard-coded for iOS build).
|
||||||
cd ios/App
|
|
||||||
pod install
|
|
||||||
```
|
|
||||||
|
|
||||||
1. Build the web assets:
|
2. Build the web assets:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
rm -rf dist
|
rm -rf dist
|
||||||
@@ -347,8 +344,7 @@ Prerequisites: macOS with Xcode installed
|
|||||||
npm run build:capacitor
|
npm run build:capacitor
|
||||||
```
|
```
|
||||||
|
|
||||||
|
3. Update iOS project with latest build:
|
||||||
2. Update iOS project with latest build:
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx cap sync ios
|
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.
|
- If that fails with "Could not find..." then look at the "gem_path" instructions above.
|
||||||
|
|
||||||
3. Copy the assets:
|
4. Copy the assets:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# It makes no sense why capacitor-assets will not run without these but it actually changes the contents.
|
# 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
|
npx capacitor-assets generate --ios
|
||||||
```
|
```
|
||||||
|
|
||||||
4. Bump the version to match Android:
|
4. Bump the version to match Android & package.json:
|
||||||
|
|
||||||
```
|
```
|
||||||
cd ios/App
|
cd ios/App
|
||||||
xcrun agvtool new-version 25
|
xcrun agvtool new-version 30
|
||||||
# Unfortunately this edits Info.plist directly.
|
# Unfortunately this edits Info.plist directly.
|
||||||
#xcrun agvtool new-marketing-version 0.4.5
|
#xcrun agvtool new-marketing-version 0.4.5
|
||||||
cat App.xcodeproj/project.pbxproj | sed "s/MARKETING_VERSION = .*;/MARKETING_VERSION = 0.5.1;/g" > temp
|
cat App.xcodeproj/project.pbxproj | sed "s/MARKETING_VERSION = .*;/MARKETING_VERSION = 0.5.4;/g" > temp && mv temp App.xcodeproj/project.pbxproj
|
||||||
mv temp App.xcodeproj/project.pbxproj
|
|
||||||
cd -
|
cd -
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -403,6 +398,8 @@ Prerequisites: macOS with Xcode installed
|
|||||||
* You'll probably have to "Manage" something about encryption, disallowed in France.
|
* You'll probably have to "Manage" something about encryption, disallowed in France.
|
||||||
* Then "Save" and "Add to Review" and "Resubmit to App Review".
|
* Then "Save" and "Add to Review" and "Resubmit to App Review".
|
||||||
|
|
||||||
|
8. Revert the iOS flag isIOS in CapacitorPlatformService.
|
||||||
|
|
||||||
### Android Build
|
### Android Build
|
||||||
|
|
||||||
Prerequisites: Android Studio with Java SDK installed
|
Prerequisites: Android Studio with Java SDK installed
|
||||||
@@ -427,7 +424,7 @@ Prerequisites: Android Studio with Java SDK installed
|
|||||||
npx capacitor-assets generate --android
|
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:
|
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.
|
- 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:
|
You must add the following intent filter to the `android/app/src/main/AndroidManifest.xml` file:
|
||||||
|
|
||||||
@@ -490,3 +487,5 @@ You must add the following intent filter to the `android/app/src/main/AndroidMan
|
|||||||
<data android:scheme="timesafari" />
|
<data android:scheme="timesafari" />
|
||||||
</intent-filter>
|
</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"
|
applicationId "app.timesafari.app"
|
||||||
minSdkVersion rootProject.ext.minSdkVersion
|
minSdkVersion rootProject.ext.minSdkVersion
|
||||||
targetSdkVersion rootProject.ext.targetSdkVersion
|
targetSdkVersion rootProject.ext.targetSdkVersion
|
||||||
versionCode 26
|
versionCode 30
|
||||||
versionName "0.5.1"
|
versionName "0.5.4"
|
||||||
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
|
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
|
||||||
aaptOptions {
|
aaptOptions {
|
||||||
// Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
|
// Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
|
||||||
|
|||||||
@@ -19,14 +19,14 @@
|
|||||||
},
|
},
|
||||||
"SQLite": {
|
"SQLite": {
|
||||||
"iosDatabaseLocation": "Library/CapacitorDatabase",
|
"iosDatabaseLocation": "Library/CapacitorDatabase",
|
||||||
"iosIsEncryption": true,
|
"iosIsEncryption": false,
|
||||||
"iosBiometric": {
|
"iosBiometric": {
|
||||||
"biometricAuth": true,
|
"biometricAuth": false,
|
||||||
"biometricTitle": "Biometric login for TimeSafari"
|
"biometricTitle": "Biometric login for TimeSafari"
|
||||||
},
|
},
|
||||||
"androidIsEncryption": true,
|
"androidIsEncryption": false,
|
||||||
"androidBiometric": {
|
"androidBiometric": {
|
||||||
"biometricAuth": true,
|
"biometricAuth": false,
|
||||||
"biometricTitle": "Biometric login for TimeSafari"
|
"biometricTitle": "Biometric login for TimeSafari"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -19,14 +19,14 @@
|
|||||||
},
|
},
|
||||||
"SQLite": {
|
"SQLite": {
|
||||||
"iosDatabaseLocation": "Library/CapacitorDatabase",
|
"iosDatabaseLocation": "Library/CapacitorDatabase",
|
||||||
"iosIsEncryption": true,
|
"iosIsEncryption": false,
|
||||||
"iosBiometric": {
|
"iosBiometric": {
|
||||||
"biometricAuth": true,
|
"biometricAuth": false,
|
||||||
"biometricTitle": "Biometric login for TimeSafari"
|
"biometricTitle": "Biometric login for TimeSafari"
|
||||||
},
|
},
|
||||||
"androidIsEncryption": true,
|
"androidIsEncryption": false,
|
||||||
"androidBiometric": {
|
"androidBiometric": {
|
||||||
"biometricAuth": true,
|
"biometricAuth": false,
|
||||||
"biometricTitle": "Biometric login for TimeSafari"
|
"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 = {
|
buildSettings = {
|
||||||
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
|
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
|
||||||
CODE_SIGN_STYLE = Automatic;
|
CODE_SIGN_STYLE = Automatic;
|
||||||
CURRENT_PROJECT_VERSION = 26;
|
CURRENT_PROJECT_VERSION = 30;
|
||||||
DEVELOPMENT_TEAM = GM3FS5JQPH;
|
DEVELOPMENT_TEAM = GM3FS5JQPH;
|
||||||
ENABLE_APP_SANDBOX = NO;
|
ENABLE_APP_SANDBOX = NO;
|
||||||
ENABLE_USER_SCRIPT_SANDBOXING = NO;
|
ENABLE_USER_SCRIPT_SANDBOXING = NO;
|
||||||
@@ -413,7 +413,7 @@
|
|||||||
"$(inherited)",
|
"$(inherited)",
|
||||||
"@executable_path/Frameworks",
|
"@executable_path/Frameworks",
|
||||||
);
|
);
|
||||||
MARKETING_VERSION = 0.5.1;
|
MARKETING_VERSION = 0.5.4;
|
||||||
OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
|
OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
|
||||||
PRODUCT_BUNDLE_IDENTIFIER = app.timesafari;
|
PRODUCT_BUNDLE_IDENTIFIER = app.timesafari;
|
||||||
PRODUCT_NAME = "$(TARGET_NAME)";
|
PRODUCT_NAME = "$(TARGET_NAME)";
|
||||||
@@ -430,7 +430,7 @@
|
|||||||
buildSettings = {
|
buildSettings = {
|
||||||
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
|
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
|
||||||
CODE_SIGN_STYLE = Automatic;
|
CODE_SIGN_STYLE = Automatic;
|
||||||
CURRENT_PROJECT_VERSION = 26;
|
CURRENT_PROJECT_VERSION = 30;
|
||||||
DEVELOPMENT_TEAM = GM3FS5JQPH;
|
DEVELOPMENT_TEAM = GM3FS5JQPH;
|
||||||
ENABLE_APP_SANDBOX = NO;
|
ENABLE_APP_SANDBOX = NO;
|
||||||
ENABLE_USER_SCRIPT_SANDBOXING = NO;
|
ENABLE_USER_SCRIPT_SANDBOXING = NO;
|
||||||
@@ -440,7 +440,7 @@
|
|||||||
"$(inherited)",
|
"$(inherited)",
|
||||||
"@executable_path/Frameworks",
|
"@executable_path/Frameworks",
|
||||||
);
|
);
|
||||||
MARKETING_VERSION = 0.5.1;
|
MARKETING_VERSION = 0.5.4;
|
||||||
PRODUCT_BUNDLE_IDENTIFIER = app.timesafari;
|
PRODUCT_BUNDLE_IDENTIFIER = app.timesafari;
|
||||||
PRODUCT_NAME = "$(TARGET_NAME)";
|
PRODUCT_NAME = "$(TARGET_NAME)";
|
||||||
SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
|
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",
|
"name": "timesafari",
|
||||||
"version": "0.5.1",
|
"version": "0.5.4",
|
||||||
"description": "Time Safari Application",
|
"description": "Time Safari Application",
|
||||||
"author": {
|
"author": {
|
||||||
"name": "Time Safari Team"
|
"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>
|
<template>
|
||||||
<div v-if="visible" class="dialog-overlay">
|
<div v-if="visible" class="dialog-overlay">
|
||||||
<div class="dialog">
|
<div class="dialog">
|
||||||
<!-- Step 1: Entity Selection -->
|
<h1 class="text-xl font-bold text-center mb-4">
|
||||||
<EntitySelectionStep
|
{{ customTitle }}
|
||||||
v-show="currentStep === 1"
|
</h1>
|
||||||
:step-type="stepType"
|
<input
|
||||||
:giver-entity-type="giverEntityType"
|
v-model="description"
|
||||||
:recipient-entity-type="recipientEntityType"
|
type="text"
|
||||||
:show-projects="showProjects"
|
class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
|
||||||
:is-from-project-view="isFromProjectView"
|
:placeholder="prompt || 'What was given?'"
|
||||||
: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"
|
|
||||||
/>
|
/>
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<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 { NotificationIface, USE_DEXIE_DB } from "../constants/app";
|
||||||
import {
|
import {
|
||||||
createAndSubmitGive,
|
createAndSubmitGive,
|
||||||
didInfo,
|
didInfo,
|
||||||
serverMessageForUser,
|
serverMessageForUser,
|
||||||
getHeaders,
|
|
||||||
} from "../libs/endorserServer";
|
} from "../libs/endorserServer";
|
||||||
import * as libsUtil from "../libs/util";
|
import * as libsUtil from "../libs/util";
|
||||||
import { db, retrieveSettingsForActiveAccount } from "../db/index";
|
import { db, retrieveSettingsForActiveAccount } from "../db/index";
|
||||||
@@ -67,42 +102,13 @@ import * as databaseUtil from "../db/databaseUtil";
|
|||||||
import { retrieveAccountDids } from "../libs/util";
|
import { retrieveAccountDids } from "../libs/util";
|
||||||
import { logger } from "../utils/logger";
|
import { logger } from "../utils/logger";
|
||||||
import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
|
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({
|
@Component
|
||||||
components: {
|
|
||||||
EntityIcon,
|
|
||||||
ProjectIcon,
|
|
||||||
EntitySelectionStep,
|
|
||||||
GiftDetailsStep,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
export default class GiftedDialog extends Vue {
|
export default class GiftedDialog extends Vue {
|
||||||
$notify!: (notification: NotificationIface, timeout?: number) => void;
|
$notify!: (notification: NotificationIface, timeout?: number) => void;
|
||||||
|
|
||||||
@Prop() fromProjectId = "";
|
@Prop() fromProjectId = "";
|
||||||
@Prop() toProjectId = "";
|
@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 = "";
|
activeDid = "";
|
||||||
allContacts: Array<Contact> = [];
|
allContacts: Array<Contact> = [];
|
||||||
@@ -119,94 +125,9 @@ export default class GiftedDialog extends Vue {
|
|||||||
receiver?: libsUtil.GiverReceiverInputInfo;
|
receiver?: libsUtil.GiverReceiverInputInfo;
|
||||||
unitCode = "HUR";
|
unitCode = "HUR";
|
||||||
visible = false;
|
visible = false;
|
||||||
currentStep = 1;
|
|
||||||
|
|
||||||
libsUtil = libsUtil;
|
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(
|
async open(
|
||||||
giver?: libsUtil.GiverReceiverInputInfo,
|
giver?: libsUtil.GiverReceiverInputInfo,
|
||||||
receiver?: libsUtil.GiverReceiverInputInfo,
|
receiver?: libsUtil.GiverReceiverInputInfo,
|
||||||
@@ -219,14 +140,10 @@ export default class GiftedDialog extends Vue {
|
|||||||
this.giver = giver;
|
this.giver = giver;
|
||||||
this.prompt = prompt || "";
|
this.prompt = prompt || "";
|
||||||
this.receiver = receiver;
|
this.receiver = receiver;
|
||||||
|
// if we show "given to user" selection, default checkbox to true
|
||||||
this.amountInput = "0";
|
this.amountInput = "0";
|
||||||
this.callbackOnSuccess = callbackOnSuccess;
|
this.callbackOnSuccess = callbackOnSuccess;
|
||||||
this.offerId = offerId || "";
|
this.offerId = offerId || "";
|
||||||
this.currentStep = giver ? 2 : 1;
|
|
||||||
this.stepType = "giver";
|
|
||||||
|
|
||||||
// Update entity types based on current props
|
|
||||||
this.updateEntityTypes();
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
let settings = await databaseUtil.retrieveSettingsForActiveAccount();
|
let settings = await databaseUtil.retrieveSettingsForActiveAccount();
|
||||||
@@ -257,16 +174,7 @@ export default class GiftedDialog extends Vue {
|
|||||||
this.allContacts,
|
this.allContacts,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
if (
|
|
||||||
this.giverEntityType === "project" ||
|
|
||||||
this.recipientEntityType === "project"
|
|
||||||
) {
|
|
||||||
await this.loadProjects();
|
|
||||||
} else {
|
|
||||||
// Clear projects array when not needed
|
|
||||||
this.projects = [];
|
|
||||||
}
|
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
logger.error("Error retrieving settings from database:", err);
|
logger.error("Error retrieving settings from database:", err);
|
||||||
this.$notify(
|
this.$notify(
|
||||||
@@ -316,7 +224,6 @@ export default class GiftedDialog extends Vue {
|
|||||||
this.amountInput = "0";
|
this.amountInput = "0";
|
||||||
this.prompt = "";
|
this.prompt = "";
|
||||||
this.unitCode = "HUR";
|
this.unitCode = "HUR";
|
||||||
this.currentStep = 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async confirm() {
|
async confirm() {
|
||||||
@@ -359,20 +266,6 @@ export default class GiftedDialog extends Vue {
|
|||||||
return;
|
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.close();
|
||||||
this.$notify(
|
this.$notify(
|
||||||
{
|
{
|
||||||
@@ -411,56 +304,24 @@ export default class GiftedDialog extends Vue {
|
|||||||
unitCode: string = "HUR",
|
unitCode: string = "HUR",
|
||||||
) {
|
) {
|
||||||
try {
|
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(
|
const result = await createAndSubmitGive(
|
||||||
this.axios,
|
this.axios,
|
||||||
this.apiServer,
|
this.apiServer,
|
||||||
this.activeDid,
|
this.activeDid,
|
||||||
fromDid,
|
giverDid as string,
|
||||||
toDid,
|
recipientDid as string,
|
||||||
description,
|
description,
|
||||||
amount,
|
amount,
|
||||||
unitCode,
|
unitCode,
|
||||||
fulfillsProjectHandleId,
|
this.toProjectId,
|
||||||
this.offerId,
|
this.offerId,
|
||||||
false,
|
false,
|
||||||
undefined,
|
undefined,
|
||||||
providerPlanHandleId,
|
this.fromProjectId,
|
||||||
);
|
);
|
||||||
|
|
||||||
if (!result.success) {
|
if (!result.success) {
|
||||||
const errorMessage = this.getGiveCreationErrorMessage(result);
|
const errorMessage = result.error;
|
||||||
logger.error("Error with give creation result:", result);
|
logger.error("Error with give creation result:", result);
|
||||||
this.$notify(
|
this.$notify(
|
||||||
{
|
{
|
||||||
@@ -506,19 +367,6 @@ export default class GiftedDialog extends Vue {
|
|||||||
|
|
||||||
// Helper functions for readability
|
// 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() {
|
explainData() {
|
||||||
this.$notify(
|
this.$notify(
|
||||||
{
|
{
|
||||||
@@ -530,173 +378,6 @@ export default class GiftedDialog extends Vue {
|
|||||||
-1,
|
-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>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -48,12 +48,15 @@
|
|||||||
<span>
|
<span>
|
||||||
{{ didInfo(visDid) }}
|
{{ didInfo(visDid) }}
|
||||||
<span v-if="!serverUtil.isEmptyOrHiddenDid(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
|
<font-awesome
|
||||||
icon="arrow-up-right-from-square"
|
icon="arrow-up-right-from-square"
|
||||||
class="fa-fw"
|
class="fa-fw"
|
||||||
/>
|
/>
|
||||||
</a>
|
</router-link>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -250,7 +250,7 @@ export default class OfferDialog extends Vue {
|
|||||||
);
|
);
|
||||||
|
|
||||||
if (!result.success) {
|
if (!result.success) {
|
||||||
const errorMessage = this.getOfferCreationErrorMessage(result);
|
const errorMessage = result.error;
|
||||||
logger.error("Error with offer creation result:", result);
|
logger.error("Error with offer creation result:", result);
|
||||||
this.$notify(
|
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>
|
</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
|
settings.apiServer !== AppString.PROD_ENDORSER_API_SERVER
|
||||||
) {
|
) {
|
||||||
const didPrefix = settings.activeDid?.slice(11, 15);
|
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 (
|
} else if (
|
||||||
settings.warnIfProdServer &&
|
settings.warnIfProdServer &&
|
||||||
settings.apiServer === AppString.PROD_ENDORSER_API_SERVER
|
settings.apiServer === AppString.PROD_ENDORSER_API_SERVER
|
||||||
) {
|
) {
|
||||||
const didPrefix = settings.activeDid?.slice(11, 15);
|
const didPrefix = settings.activeDid?.slice(11, 15);
|
||||||
this.message =
|
this.message =
|
||||||
"You're linked to the production server, user " + didPrefix;
|
"You are using prod, user " + didPrefix;
|
||||||
}
|
}
|
||||||
} catch (err: unknown) {
|
} catch (err: unknown) {
|
||||||
this.$notify(
|
this.$notify(
|
||||||
|
|||||||
@@ -1,6 +1,4 @@
|
|||||||
import { AxiosResponse } from "axios";
|
|
||||||
import { GiverReceiverInputInfo } from "../libs/util";
|
import { GiverReceiverInputInfo } from "../libs/util";
|
||||||
import { ErrorResult, ResultWithType } from "./common";
|
|
||||||
|
|
||||||
export interface GiverOutputInfo {
|
export interface GiverOutputInfo {
|
||||||
action: string;
|
action: string;
|
||||||
@@ -47,12 +45,3 @@ export interface ProviderInfo {
|
|||||||
*/
|
*/
|
||||||
linkConfirmed: boolean;
|
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>;
|
publicUrls?: Record<string, string>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ResultWithType {
|
|
||||||
type: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ErrorResponse {
|
export interface ErrorResponse {
|
||||||
error?: {
|
error?: {
|
||||||
message?: string;
|
message?: string;
|
||||||
@@ -30,11 +26,6 @@ export interface InternalError {
|
|||||||
userMessage?: string;
|
userMessage?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ErrorResult extends ResultWithType {
|
|
||||||
type: "error";
|
|
||||||
error: InternalError;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface KeyMeta {
|
export interface KeyMeta {
|
||||||
did: string;
|
did: string;
|
||||||
publicKeyHex: string;
|
publicKeyHex: string;
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
export type {
|
export type {
|
||||||
// From common.ts
|
// From common.ts
|
||||||
|
CreateAndSubmitClaimResult,
|
||||||
GenericCredWrapper,
|
GenericCredWrapper,
|
||||||
GenericVerifiableCredential,
|
GenericVerifiableCredential,
|
||||||
KeyMeta,
|
KeyMeta,
|
||||||
@@ -18,11 +19,6 @@ export type {
|
|||||||
RegisterActionClaim,
|
RegisterActionClaim,
|
||||||
} from "./claims";
|
} from "./claims";
|
||||||
|
|
||||||
export type {
|
|
||||||
// From claims-result.ts
|
|
||||||
CreateAndSubmitClaimResult,
|
|
||||||
} from "./claims-result";
|
|
||||||
|
|
||||||
export type {
|
export type {
|
||||||
// From records.ts
|
// From records.ts
|
||||||
PlanSummaryRecord,
|
PlanSummaryRecord,
|
||||||
|
|||||||
@@ -979,7 +979,7 @@ export const createAndSubmitConfirmation = async (
|
|||||||
handleId: string | undefined,
|
handleId: string | undefined,
|
||||||
apiServer: string,
|
apiServer: string,
|
||||||
axios: Axios,
|
axios: Axios,
|
||||||
) => {
|
): Promise<CreateAndSubmitClaimResult> => {
|
||||||
const goodClaim = removeSchemaContext(
|
const goodClaim = removeSchemaContext(
|
||||||
removeVisibleToDids(
|
removeVisibleToDids(
|
||||||
addLastClaimOrHandleAsIdIfMissing(claim, lastClaimId, handleId),
|
addLastClaimOrHandleAsIdIfMissing(claim, lastClaimId, handleId),
|
||||||
|
|||||||
@@ -29,7 +29,6 @@ import {
|
|||||||
faCircleCheck,
|
faCircleCheck,
|
||||||
faCircleInfo,
|
faCircleInfo,
|
||||||
faCircleQuestion,
|
faCircleQuestion,
|
||||||
faCircleRight,
|
|
||||||
faCircleUser,
|
faCircleUser,
|
||||||
faClock,
|
faClock,
|
||||||
faCoins,
|
faCoins,
|
||||||
@@ -61,7 +60,6 @@ import {
|
|||||||
faLightbulb,
|
faLightbulb,
|
||||||
faLink,
|
faLink,
|
||||||
faLocationDot,
|
faLocationDot,
|
||||||
faLock,
|
|
||||||
faLongArrowAltLeft,
|
faLongArrowAltLeft,
|
||||||
faLongArrowAltRight,
|
faLongArrowAltRight,
|
||||||
faMagnifyingGlass,
|
faMagnifyingGlass,
|
||||||
@@ -81,7 +79,6 @@ import {
|
|||||||
faSquareCaretDown,
|
faSquareCaretDown,
|
||||||
faSquareCaretUp,
|
faSquareCaretUp,
|
||||||
faSquarePlus,
|
faSquarePlus,
|
||||||
faThumbtack,
|
|
||||||
faTrashCan,
|
faTrashCan,
|
||||||
faTriangleExclamation,
|
faTriangleExclamation,
|
||||||
faUser,
|
faUser,
|
||||||
@@ -114,7 +111,6 @@ library.add(
|
|||||||
faCircleCheck,
|
faCircleCheck,
|
||||||
faCircleInfo,
|
faCircleInfo,
|
||||||
faCircleQuestion,
|
faCircleQuestion,
|
||||||
faCircleRight,
|
|
||||||
faCircleUser,
|
faCircleUser,
|
||||||
faClock,
|
faClock,
|
||||||
faCoins,
|
faCoins,
|
||||||
@@ -146,7 +142,6 @@ library.add(
|
|||||||
faLightbulb,
|
faLightbulb,
|
||||||
faLink,
|
faLink,
|
||||||
faLocationDot,
|
faLocationDot,
|
||||||
faLock,
|
|
||||||
faLongArrowAltLeft,
|
faLongArrowAltLeft,
|
||||||
faLongArrowAltRight,
|
faLongArrowAltRight,
|
||||||
faMagnifyingGlass,
|
faMagnifyingGlass,
|
||||||
@@ -166,7 +161,6 @@ library.add(
|
|||||||
faSquareCaretDown,
|
faSquareCaretDown,
|
||||||
faSquareCaretUp,
|
faSquareCaretUp,
|
||||||
faSquarePlus,
|
faSquarePlus,
|
||||||
faThumbtack,
|
|
||||||
faTrashCan,
|
faTrashCan,
|
||||||
faTriangleExclamation,
|
faTriangleExclamation,
|
||||||
faUser,
|
faUser,
|
||||||
|
|||||||
@@ -49,8 +49,6 @@ import { insertDidSpecificSettings, parseJsonField } from "../db/databaseUtil";
|
|||||||
export interface GiverReceiverInputInfo {
|
export interface GiverReceiverInputInfo {
|
||||||
did?: string;
|
did?: string;
|
||||||
name?: string;
|
name?: string;
|
||||||
image?: string;
|
|
||||||
handleId?: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export enum OnboardPage {
|
export enum OnboardPage {
|
||||||
|
|||||||
@@ -81,18 +81,16 @@ export class DeepLinkHandler {
|
|||||||
string,
|
string,
|
||||||
{ name: string; paramKey?: string }
|
{ name: string; paramKey?: string }
|
||||||
> = {
|
> = {
|
||||||
"user-profile": { name: "user-profile" },
|
"claim": { name: "claim" },
|
||||||
"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-add-raw": { name: "claim-add-raw" },
|
"claim-add-raw": { name: "claim-add-raw" },
|
||||||
"contact-edit": { name: "contact-edit", paramKey: "did" },
|
"claim-cert": { name: "claim-cert" },
|
||||||
contacts: { name: "contacts" },
|
"confirm-gift": { name: "confirm-gift" },
|
||||||
did: { name: "did", paramKey: "did" },
|
"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,
|
CameraSource,
|
||||||
CameraDirection,
|
CameraDirection,
|
||||||
} from "@capacitor/camera";
|
} from "@capacitor/camera";
|
||||||
|
import { Capacitor } from "@capacitor/core";
|
||||||
import { Share } from "@capacitor/share";
|
import { Share } from "@capacitor/share";
|
||||||
import {
|
import {
|
||||||
SQLiteConnection,
|
SQLiteConnection,
|
||||||
@@ -41,7 +42,7 @@ interface QueuedOperation {
|
|||||||
*/
|
*/
|
||||||
export class CapacitorPlatformService implements PlatformService {
|
export class CapacitorPlatformService implements PlatformService {
|
||||||
/** Current camera direction */
|
/** Current camera direction */
|
||||||
private currentDirection: CameraDirection = "BACK";
|
private currentDirection: CameraDirection = CameraDirection.Rear;
|
||||||
|
|
||||||
private sqlite: SQLiteConnection;
|
private sqlite: SQLiteConnection;
|
||||||
private db: SQLiteDBConnection | null = null;
|
private db: SQLiteDBConnection | null = null;
|
||||||
@@ -53,6 +54,29 @@ export class CapacitorPlatformService implements PlatformService {
|
|||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this.sqlite = new SQLiteConnection(CapacitorSQLite);
|
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> {
|
private async initializeDatabase(): Promise<void> {
|
||||||
@@ -86,19 +110,14 @@ export class CapacitorPlatformService implements PlatformService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// Create/Open database
|
// Check if database connection already exists and close it
|
||||||
this.db = await this.sqlite.createConnection(
|
await this.cleanupExistingConnections();
|
||||||
this.dbName,
|
|
||||||
false,
|
|
||||||
"no-encryption",
|
|
||||||
1,
|
|
||||||
false,
|
|
||||||
);
|
|
||||||
|
|
||||||
await this.db.open();
|
// Create/Open database with retry logic
|
||||||
|
this.db = await this.createDatabaseConnection();
|
||||||
|
|
||||||
// Set journal mode to WAL for better performance
|
// Configure database for better performance and stability
|
||||||
// await this.db.execute("PRAGMA journal_mode=WAL;");
|
await this.configureDatabase();
|
||||||
|
|
||||||
// Run migrations
|
// Run migrations
|
||||||
await this.runCapacitorMigrations();
|
await this.runCapacitorMigrations();
|
||||||
@@ -115,6 +134,8 @@ export class CapacitorPlatformService implements PlatformService {
|
|||||||
"[CapacitorPlatformService] Error initializing SQLite database:",
|
"[CapacitorPlatformService] Error initializing SQLite database:",
|
||||||
error,
|
error,
|
||||||
);
|
);
|
||||||
|
// Clean up on failure
|
||||||
|
await this.cleanupDatabase();
|
||||||
throw new Error(
|
throw new Error(
|
||||||
"[CapacitorPlatformService] Failed to initialize database",
|
"[CapacitorPlatformService] Failed to initialize database",
|
||||||
);
|
);
|
||||||
@@ -247,7 +268,7 @@ export class CapacitorPlatformService implements PlatformService {
|
|||||||
hasFileSystem: true,
|
hasFileSystem: true,
|
||||||
hasCamera: true,
|
hasCamera: true,
|
||||||
isMobile: true,
|
isMobile: true,
|
||||||
isIOS: /iPad|iPhone|iPod/.test(navigator.userAgent),
|
isIOS: Capacitor.getPlatform() === "ios",
|
||||||
hasFileDownload: false,
|
hasFileDownload: false,
|
||||||
needsFileHandlingInstructions: true,
|
needsFileHandlingInstructions: true,
|
||||||
isNativeApp: true,
|
isNativeApp: true,
|
||||||
@@ -701,7 +722,7 @@ export class CapacitorPlatformService implements PlatformService {
|
|||||||
* @returns Promise that resolves when the camera is rotated
|
* @returns Promise that resolves when the camera is rotated
|
||||||
*/
|
*/
|
||||||
async rotateCamera(): Promise<void> {
|
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`);
|
logger.debug(`Camera rotated to ${this.currentDirection} camera`);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -738,4 +759,179 @@ export class CapacitorPlatformService implements PlatformService {
|
|||||||
params || [],
|
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.apiServer,
|
||||||
this.axios,
|
this.axios,
|
||||||
);
|
);
|
||||||
if (result.type === "success") {
|
if (result.success) {
|
||||||
this.$notify(
|
this.$notify(
|
||||||
{
|
{
|
||||||
group: "alert",
|
group: "alert",
|
||||||
|
|||||||
@@ -46,6 +46,7 @@
|
|||||||
</h2>
|
</h2>
|
||||||
<div class="flex justify-center w-full">
|
<div class="flex justify-center w-full">
|
||||||
<router-link
|
<router-link
|
||||||
|
v-if="veriClaim.id"
|
||||||
:to="'/claim-cert/' + encodeURIComponent(veriClaim.id)"
|
:to="'/claim-cert/' + encodeURIComponent(veriClaim.id)"
|
||||||
class="text-blue-500 mt-2"
|
class="text-blue-500 mt-2"
|
||||||
title="Printable Certificate"
|
title="Printable Certificate"
|
||||||
@@ -292,12 +293,17 @@
|
|||||||
<div class="text-sm">
|
<div class="text-sm">
|
||||||
{{ didInfo(confirmerId) }}
|
{{ didInfo(confirmerId) }}
|
||||||
<span v-if="!serverUtil.isEmptyOrHiddenDid(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
|
<font-awesome
|
||||||
icon="arrow-up-right-from-square"
|
icon="arrow-up-right-from-square"
|
||||||
class="fa-fw"
|
class="fa-fw"
|
||||||
/>
|
/>
|
||||||
</a>
|
</router-link>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -329,12 +335,17 @@
|
|||||||
<div class="text-sm">
|
<div class="text-sm">
|
||||||
{{ didInfo(confsVisibleTo) }}
|
{{ didInfo(confsVisibleTo) }}
|
||||||
<span v-if="!serverUtil.isEmptyOrHiddenDid(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
|
<font-awesome
|
||||||
icon="arrow-up-right-from-square"
|
icon="arrow-up-right-from-square"
|
||||||
class="fa-fw"
|
class="fa-fw"
|
||||||
/>
|
/>
|
||||||
</a>
|
</router-link>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -443,12 +454,17 @@
|
|||||||
<span>
|
<span>
|
||||||
{{ didInfo(visDid) }}
|
{{ didInfo(visDid) }}
|
||||||
<span v-if="!serverUtil.isEmptyOrHiddenDid(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
|
<font-awesome
|
||||||
icon="arrow-up-right-from-square"
|
icon="arrow-up-right-from-square"
|
||||||
class="fa-fw"
|
class="fa-fw"
|
||||||
/>
|
/>
|
||||||
</a>
|
</router-link>
|
||||||
</span>
|
</span>
|
||||||
<span v-if="veriClaim.publicUrls?.[visDid]"
|
<span v-if="veriClaim.publicUrls?.[visDid]"
|
||||||
>, found at <a
|
>, found at <a
|
||||||
@@ -925,7 +941,7 @@ export default class ClaimView extends Vue {
|
|||||||
this.apiServer,
|
this.apiServer,
|
||||||
this.axios,
|
this.axios,
|
||||||
);
|
);
|
||||||
if (result.type === "success") {
|
if (result.success) {
|
||||||
this.$notify(
|
this.$notify(
|
||||||
{
|
{
|
||||||
group: "alert",
|
group: "alert",
|
||||||
|
|||||||
@@ -407,14 +407,14 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-2 ml-2">
|
<div class="mt-2 ml-2">
|
||||||
<a
|
<router-link
|
||||||
v-if="isRegistered"
|
v-if="isRegistered"
|
||||||
class="text-blue-500 cursor-pointer"
|
class="text-blue-500 cursor-pointer"
|
||||||
:href="urlForNewGive"
|
:to="urlForNewGive"
|
||||||
>
|
>
|
||||||
<font-awesome icon="file-lines" />
|
<font-awesome icon="file-lines" />
|
||||||
Record a Give Similar to the Original
|
Record a Give Similar to the Original
|
||||||
</a>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -831,7 +831,7 @@ export default class ConfirmGiftView extends Vue {
|
|||||||
this.apiServer,
|
this.apiServer,
|
||||||
this.axios,
|
this.axios,
|
||||||
);
|
);
|
||||||
if (result.type === "success") {
|
if (result.success) {
|
||||||
this.$notify(
|
this.$notify(
|
||||||
{
|
{
|
||||||
group: "alert",
|
group: "alert",
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
|
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
|
||||||
><font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
|
><font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
|
||||||
</router-link>
|
</router-link>
|
||||||
{{ stepType === "giver" ? "Given by..." : "Given to..." }}
|
Given by...
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -31,7 +31,7 @@
|
|||||||
<button
|
<button
|
||||||
type="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"
|
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>
|
<font-awesome icon="gift" class="fa-fw"></font-awesome>
|
||||||
</button>
|
</button>
|
||||||
@@ -65,13 +65,7 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<GiftedDialog
|
<GiftedDialog ref="customDialog" :to-project-id="projectId" />
|
||||||
ref="customDialog"
|
|
||||||
:from-project-id="fromProjectId"
|
|
||||||
:to-project-id="toProjectId"
|
|
||||||
:show-projects="showProjects"
|
|
||||||
:is-from-project-view="isFromProjectView"
|
|
||||||
/>
|
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -103,24 +97,6 @@ export default class ContactGiftingView extends Vue {
|
|||||||
description = "";
|
description = "";
|
||||||
projectId = "";
|
projectId = "";
|
||||||
prompt = "";
|
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() {
|
async created() {
|
||||||
try {
|
try {
|
||||||
@@ -148,41 +124,9 @@ export default class ContactGiftingView extends Vue {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.projectId =
|
this.projectId = (this.$route.query["projectId"] as string) || "";
|
||||||
(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.prompt = (this.$route.query["prompt"] as string) ?? this.prompt;
|
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
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
logger.error("Error retrieving settings & contacts:", err);
|
logger.error("Error retrieving settings & contacts:", err);
|
||||||
@@ -200,108 +144,17 @@ export default class ContactGiftingView extends Vue {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
openDialog(contact?: GiverReceiverInputInfo | "Unnamed") {
|
openDialog(giver?: GiverReceiverInputInfo) {
|
||||||
if (contact === "Unnamed") {
|
const recipient = this.projectId
|
||||||
// Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected
|
? undefined
|
||||||
let recipient: GiverReceiverInputInfo;
|
: { did: this.activeDid, name: "you" };
|
||||||
let giver: GiverReceiverInputInfo | undefined;
|
(this.$refs.customDialog as GiftedDialog).open(
|
||||||
|
giver,
|
||||||
if (this.stepType === "giver") {
|
recipient,
|
||||||
// We're selecting a giver, so recipient is either a project or the current user
|
undefined,
|
||||||
if (this.recipientEntityType === "project") {
|
"Given by " + (giver?.name || "someone not named"),
|
||||||
recipient = {
|
this.prompt,
|
||||||
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,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -788,7 +788,7 @@ export default class DiscoverView extends Vue {
|
|||||||
const route = {
|
const route = {
|
||||||
path: this.isProjectsActive
|
path: this.isProjectsActive
|
||||||
? "/project/" + encodeURIComponent(id)
|
? "/project/" + encodeURIComponent(id)
|
||||||
: "/userProfile/" + encodeURIComponent(id),
|
: "/user-profile/" + encodeURIComponent(id),
|
||||||
};
|
};
|
||||||
this.$router.push(route);
|
this.$router.push(route);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -826,7 +826,7 @@ export default class GiftedDetails extends Vue {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (!result.success) {
|
if (!result.success) {
|
||||||
const errorMessage = this.getGiveCreationErrorMessage(result);
|
const errorMessage = result.error;
|
||||||
logger.error("Error with give creation result:", result);
|
logger.error("Error with give creation result:", result);
|
||||||
this.$notify(
|
this.$notify(
|
||||||
{
|
{
|
||||||
@@ -899,19 +899,6 @@ export default class GiftedDetails extends Vue {
|
|||||||
|
|
||||||
// Helper functions for readability
|
// 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() {
|
explainData() {
|
||||||
this.$notify(
|
this.$notify(
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -24,11 +24,11 @@
|
|||||||
<!-- eslint-disable prettier/prettier max-len -->
|
<!-- eslint-disable prettier/prettier max-len -->
|
||||||
<div>
|
<div>
|
||||||
<p>
|
<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>
|
||||||
|
|
||||||
<p class="ml-4">
|
<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
|
<span
|
||||||
class="text-blue-500 cursor-pointer"
|
class="text-blue-500 cursor-pointer"
|
||||||
@click="unsetFinishedOnboarding()"
|
@click="unsetFinishedOnboarding()"
|
||||||
@@ -555,9 +555,6 @@
|
|||||||
initiative.
|
initiative.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h2 class="text-xl font-semibold">What app version is this?</h2>
|
|
||||||
<p>{{ package.version }} ({{ commitHash }})</p>
|
|
||||||
|
|
||||||
<h2 class="text-xl font-semibold">
|
<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.
|
I have other questions or feedback, like getting a new profile or removing my data or requesting an improvement.
|
||||||
</h2>
|
</h2>
|
||||||
@@ -567,6 +564,28 @@
|
|||||||
>info@TimeSafari.app</a
|
>info@TimeSafari.app</a
|
||||||
>
|
>
|
||||||
</p>
|
</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>
|
</div>
|
||||||
<!-- eslint enable -->
|
<!-- eslint enable -->
|
||||||
</section>
|
</section>
|
||||||
@@ -603,6 +622,7 @@ export default class HelpView extends Vue {
|
|||||||
showVerifiable = false;
|
showVerifiable = false;
|
||||||
|
|
||||||
APP_SERVER = APP_SERVER;
|
APP_SERVER = APP_SERVER;
|
||||||
|
Capacitor = Capacitor;
|
||||||
|
|
||||||
// Ideally, we put no functionality in here, especially in the setup,
|
// 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.
|
// 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>
|
||||||
|
|
||||||
<div v-else id="sectionRecordSomethingGiven">
|
<div v-else id="sectionRecordSomethingGiven">
|
||||||
<!-- Record Quick-Action -->
|
<!-- !isCreatingIdentifier && isRegistered -->
|
||||||
<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>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-2 gap-2">
|
<!-- show the actions for recognizing a give -->
|
||||||
<button
|
<div class="flex">
|
||||||
type="button"
|
<h2 class="text-xl font-bold">What have you seen someone do?</h2>
|
||||||
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"
|
<button
|
||||||
@click="openDialogPerson()"
|
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="user" />
|
>
|
||||||
Person
|
<font-awesome icon="lightbulb" class="fa-fw" />
|
||||||
</button>
|
</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>
|
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<GiftedDialog ref="customDialog" :show-projects="showProjectsDialog" />
|
<GiftedDialog ref="customDialog" />
|
||||||
<GiftedPrompts ref="giftedPrompts" />
|
<GiftedPrompts ref="giftedPrompts" />
|
||||||
<FeedFilters ref="feedFilters" />
|
<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 -->
|
<!-- Results List -->
|
||||||
<div class="mt-4 mb-4">
|
<div class="mt-4 mb-4">
|
||||||
<div class="flex gap-2 items-center mb-3">
|
<div class="flex items-center mb-4">
|
||||||
<h2 class="text-xl font-bold">Latest Activity</h2>
|
<h2 class="text-xl font-bold flex items-center gap-4">
|
||||||
<button
|
Latest Activity
|
||||||
v-if="resultsAreFiltered()"
|
<button
|
||||||
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"
|
v-if="resultsAreFiltered()"
|
||||||
@click="openFeedFilters()"
|
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"
|
<font-awesome icon="filter" class="fa-fw" />
|
||||||
class="block text-center w-[1em] translate-y-[0.05em]"
|
</button>
|
||||||
/>
|
<button
|
||||||
</button>
|
v-else
|
||||||
<button
|
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"
|
||||||
v-else
|
@click="openFeedFilters()"
|
||||||
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="fa-fw" />
|
||||||
>
|
</button>
|
||||||
<font-awesome
|
</h2>
|
||||||
icon="filter"
|
|
||||||
class="block text-center w-[1em] translate-y-[0.05em]"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
@@ -446,7 +474,6 @@ export default class HomeView extends Vue {
|
|||||||
selectedImageData: Blob | null = null;
|
selectedImageData: Blob | null = null;
|
||||||
isImageViewerOpen = false;
|
isImageViewerOpen = false;
|
||||||
imageCache: Map<string, Blob | null> = new Map();
|
imageCache: Map<string, Blob | null> = new Map();
|
||||||
showProjectsDialog = false;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Initializes the component on mount
|
* Initializes the component on mount
|
||||||
@@ -1610,33 +1637,17 @@ export default class HomeView extends Vue {
|
|||||||
* @param giver Optional contact info for giver
|
* @param giver Optional contact info for giver
|
||||||
* @param description Optional gift description
|
* @param description Optional gift description
|
||||||
*/
|
*/
|
||||||
openDialog(giver?: GiverReceiverInputInfo | "Unnamed", description?: string) {
|
openDialog(giver?: GiverReceiverInputInfo, description?: string) {
|
||||||
if (giver === "Unnamed") {
|
(this.$refs.customDialog as GiftedDialog).open(
|
||||||
// Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected
|
giver,
|
||||||
(this.$refs.customDialog as GiftedDialog).open(
|
{
|
||||||
undefined,
|
did: this.activeDid,
|
||||||
{
|
name: "you",
|
||||||
did: this.activeDid,
|
} as GiverReceiverInputInfo,
|
||||||
name: "You",
|
undefined,
|
||||||
} as GiverReceiverInputInfo,
|
"Given by " + (giver?.name || "someone not named"),
|
||||||
undefined,
|
description,
|
||||||
"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,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -1832,7 +1843,7 @@ export default class HomeView extends Vue {
|
|||||||
this.axios,
|
this.axios,
|
||||||
);
|
);
|
||||||
|
|
||||||
if (result.type === "success") {
|
if (result.success) {
|
||||||
this.$notify(
|
this.$notify(
|
||||||
{
|
{
|
||||||
group: "alert",
|
group: "alert",
|
||||||
@@ -1870,18 +1881,5 @@ export default class HomeView extends Vue {
|
|||||||
this.$router.push({ name: "contact-qr" });
|
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>
|
</script>
|
||||||
|
|||||||
@@ -52,16 +52,24 @@
|
|||||||
icon="user"
|
icon="user"
|
||||||
class="fa-fw text-slate-400"
|
class="fa-fw text-slate-400"
|
||||||
></font-awesome>
|
></font-awesome>
|
||||||
{{ issuerInfoObject?.displayName }}
|
<span class="truncate inline-block max-w-[calc(100%-2rem)]">
|
||||||
<span v-if="!serverUtil.isEmptyOrHiddenDid(issuer)">
|
{{ issuerInfoObject?.displayName }}
|
||||||
<a :href="`/did/${issuer}`" class="text-blue-500">
|
</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
|
<font-awesome
|
||||||
icon="arrow-up-right-from-square"
|
icon="arrow-up-right-from-square"
|
||||||
class="fa-fw"
|
class="fa-fw"
|
||||||
/>
|
/>
|
||||||
</a>
|
</router-link>
|
||||||
</span>
|
</span>
|
||||||
<span v-else-if="serverUtil.isHiddenDid(issuer)">
|
<span v-if="serverUtil.isHiddenDid(issuer)" class="ml-1">
|
||||||
<font-awesome
|
<font-awesome
|
||||||
icon="info-circle"
|
icon="info-circle"
|
||||||
class="fa-fw text-blue-500 cursor-pointer"
|
class="fa-fw text-blue-500 cursor-pointer"
|
||||||
@@ -196,11 +204,63 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<GiftedDialog
|
<div v-if="activeDid && isRegistered">
|
||||||
ref="giveDialogToThis"
|
<div class="text-center">
|
||||||
:to-project-id="projectId"
|
<p class="mt-2 mt-4 text-center">Record a contribution from:</p>
|
||||||
:is-from-project-view="true"
|
</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 -->
|
<!-- Offers & Gifts to & from this -->
|
||||||
<div class="grid items-start grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
|
<div class="grid items-start grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
|
||||||
@@ -466,12 +526,7 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<GiftedDialog
|
<GiftedDialog ref="giveDialogFromThis" :from-project-id="projectId" />
|
||||||
ref="giveDialogFromThis"
|
|
||||||
:from-project-id="projectId"
|
|
||||||
:show-projects="true"
|
|
||||||
:is-from-project-view="true"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<h3 class="text-lg font-bold mb-3 mt-4">
|
<h3 class="text-lg font-bold mb-3 mt-4">
|
||||||
Benefitted From This Project
|
Benefitted From This Project
|
||||||
@@ -1182,53 +1237,21 @@ export default class ProjectViewView extends Vue {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
openGiftDialogToProject(
|
openGiftDialogToProject(contact?: libsUtil.GiverReceiverInputInfo) {
|
||||||
contact?: libsUtil.GiverReceiverInputInfo | "Unnamed",
|
(this.$refs.giveDialogToThis as GiftedDialog).open(
|
||||||
) {
|
contact,
|
||||||
if (contact === "Unnamed") {
|
undefined,
|
||||||
// Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected
|
undefined,
|
||||||
(this.$refs.giveDialogToThis as GiftedDialog).open(
|
(contact?.name || "Someone not named") + ` gave to this project`,
|
||||||
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}`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
openGiftDialogFromProject() {
|
openGiftDialogFromProject() {
|
||||||
// Set the project as giver and the current user as recipient
|
|
||||||
(this.$refs.giveDialogFromThis as GiftedDialog).open(
|
(this.$refs.giveDialogFromThis as GiftedDialog).open(
|
||||||
{
|
undefined,
|
||||||
did: undefined,
|
|
||||||
name: this.name,
|
|
||||||
handleId: this.projectId,
|
|
||||||
image: this.imageUrl,
|
|
||||||
},
|
|
||||||
{ did: this.activeDid, name: "You" },
|
{ did: this.activeDid, name: "You" },
|
||||||
undefined,
|
undefined,
|
||||||
`${this.name} gave to you`,
|
`This project gave to you`,
|
||||||
undefined,
|
|
||||||
undefined,
|
|
||||||
true,
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1410,7 +1433,7 @@ export default class ProjectViewView extends Vue {
|
|||||||
this.apiServer,
|
this.apiServer,
|
||||||
this.axios,
|
this.axios,
|
||||||
);
|
);
|
||||||
if (result.type === "success") {
|
if (result.success) {
|
||||||
this.$notify(
|
this.$notify(
|
||||||
{
|
{
|
||||||
group: "alert",
|
group: "alert",
|
||||||
|
|||||||
@@ -155,7 +155,7 @@ import { Contact } from "../db/tables/contacts";
|
|||||||
import {
|
import {
|
||||||
GenericCredWrapper,
|
GenericCredWrapper,
|
||||||
GenericVerifiableCredential,
|
GenericVerifiableCredential,
|
||||||
ErrorResult,
|
CreateAndSubmitClaimResult,
|
||||||
} from "../interfaces";
|
} from "../interfaces";
|
||||||
import {
|
import {
|
||||||
BVC_MEETUPS_PROJECT_CLAIM_ID,
|
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
|
// 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) => {
|
this.claimsToConfirmSelected.map(async (jwtId) => {
|
||||||
const record = this.claimsToConfirm.find(
|
const record = this.claimsToConfirm.find(
|
||||||
(claim) => claim.id === jwtId,
|
(claim) => claim.id === jwtId,
|
||||||
);
|
);
|
||||||
if (!record) {
|
if (!record) {
|
||||||
return { type: "error", error: "Record not found." };
|
return { success: false, error: "Record not found." };
|
||||||
}
|
}
|
||||||
return createAndSubmitConfirmation(
|
return createAndSubmitConfirmation(
|
||||||
this.activeDid,
|
this.activeDid,
|
||||||
@@ -318,8 +318,8 @@ export default class QuickActionBvcBeginView extends Vue {
|
|||||||
);
|
);
|
||||||
// check for any rejected confirmations
|
// check for any rejected confirmations
|
||||||
const confirmsSucceeded = confirmResults.filter(
|
const confirmsSucceeded = confirmResults.filter(
|
||||||
(result) =>
|
// 'fulfilled' is the status in a successful PromiseFulfilledResult
|
||||||
result.status === "fulfilled" && result.value.type === "success",
|
(result) => result.status === "fulfilled" && result.value.success,
|
||||||
);
|
);
|
||||||
if (confirmsSucceeded.length < this.claimsToConfirmSelected.length) {
|
if (confirmsSucceeded.length < this.claimsToConfirmSelected.length) {
|
||||||
logger.error("Error sending confirmations:", confirmResults);
|
logger.error("Error sending confirmations:", confirmResults);
|
||||||
@@ -353,7 +353,7 @@ export default class QuickActionBvcBeginView extends Vue {
|
|||||||
undefined,
|
undefined,
|
||||||
BVC_MEETUPS_PROJECT_CLAIM_ID,
|
BVC_MEETUPS_PROJECT_CLAIM_ID,
|
||||||
);
|
);
|
||||||
giveSucceeded = giveResult.type === "success";
|
giveSucceeded = giveResult.success;
|
||||||
if (!giveSucceeded) {
|
if (!giveSucceeded) {
|
||||||
logger.error("Error sending give:", giveResult);
|
logger.error("Error sending give:", giveResult);
|
||||||
this.$notify(
|
this.$notify(
|
||||||
@@ -362,7 +362,7 @@ export default class QuickActionBvcBeginView extends Vue {
|
|||||||
type: "danger",
|
type: "danger",
|
||||||
title: "Error",
|
title: "Error",
|
||||||
text:
|
text:
|
||||||
(giveResult as ErrorResult)?.error?.userMessage ||
|
(giveResult as CreateAndSubmitClaimResult)?.error ||
|
||||||
"There was an error sending that give.",
|
"There was an error sending that give.",
|
||||||
},
|
},
|
||||||
5000,
|
5000,
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ export default defineConfig({
|
|||||||
url: 'url/',
|
url: 'url/',
|
||||||
zlib: 'browserify-zlib',
|
zlib: 'browserify-zlib',
|
||||||
path: 'path-browserify',
|
path: 'path-browserify',
|
||||||
fs: path.resolve(__dirname, 'src/utils/node-modules/fs.js'),
|
fs: false,
|
||||||
tty: 'tty-browserify',
|
tty: 'tty-browserify',
|
||||||
net: false,
|
net: false,
|
||||||
dns: false,
|
dns: false,
|
||||||
|
|||||||
Reference in New Issue
Block a user