refactor: centralize QR navigation logic and add export prompt after contact addition

- Create QRNavigationService to handle platform-specific QR routing
- Remove direct Capacitor imports from ContactsView, ProjectsView, HelpView
- Replace duplicated QR routing logic with centralized service calls
- Update HelpView template to use platform service methods (isCapacitor, capabilities)
- Add export data prompt after successfully adding a contact
- Add NOTIFY_EXPORT_DATA_PROMPT notification constant
- Implement exportContactData() method with platform service integration
- Fix TypeScript compatibility for Vue Router route parameters
- Maintain consistent QR navigation behavior across all views

Eliminates code duplication and improves platform abstraction by using
PlatformService instead of direct Capacitor references. Enhances user
experience with automatic export prompts for data backup.
This commit is contained in:
Matthew Raymer
2025-07-30 12:47:55 +00:00
parent ca828d45a6
commit 6007bc34e4
5 changed files with 194 additions and 25 deletions

View File

@@ -565,22 +565,22 @@
<h2 class="text-xl font-semibold">What app version is this?</h2>
<p>{{ package.version }} ({{ commitHash }})</p>
<div v-if="Capacitor.isNativePlatform()">
<div v-if="isCapacitor">
<h2 class="text-xl font-semibold">
Do I have the latest version?
</h2>
<p v-if="Capacitor.getPlatform() === 'ios'">
<p v-if="capabilities.isIOS">
<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'">
<p v-else-if="!capabilities.isIOS && capabilities.isMobile">
<a href="https://play.google.com/store/apps/details?id=app.timesafari.app" target="_blank" class="text-blue-500">
Check the Play Store.
</a>
</p>
<p v-else>
Sorry, your platform of '{{ Capacitor.getPlatform() }}' is not recognized.
Sorry, your platform is not recognized.
</p>
</div>
</div>
@@ -592,12 +592,13 @@
import { Component, Vue } from "vue-facing-decorator";
import { Router } from "vue-router";
import { useClipboard } from "@vueuse/core";
import { Capacitor } from "@capacitor/core";
// Capacitor import removed - using QRNavigationService instead
import * as Package from "../../package.json";
import QuickNav from "../components/QuickNav.vue";
import { APP_SERVER } from "../constants/app";
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
import { QRNavigationService } from "@/services/QRNavigationService";
/**
* HelpView.vue - Comprehensive Help System Component
@@ -643,7 +644,7 @@ export default class HelpView extends Vue {
showVerifiable = false;
APP_SERVER = APP_SERVER;
Capacitor = Capacitor;
// Capacitor reference removed - using QRNavigationService instead
// 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.
@@ -711,11 +712,10 @@ export default class HelpView extends Vue {
* @private
*/
private handleQRCodeClick(): void {
if (Capacitor.isNativePlatform()) {
this.$router.push({ name: "contact-qr-scan-full" });
} else {
this.$router.push({ name: "contact-qr" });
}
const qrNavigationService = QRNavigationService.getInstance();
const route = qrNavigationService.getQRScannerRoute();
this.$router.push(route);
}
/**