Compare commits
13 Commits
831532739c
...
entity-sel
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d9230d0be8 | ||
|
|
38f301f053 | ||
| e42552c67a | |||
|
|
d32cca4f53 | ||
|
|
4004d9fe52 | ||
|
|
2f99d0b416 | ||
|
|
9c3002f9c7 | ||
|
|
82fd7cddf7 | ||
|
|
10f2920e11 | ||
|
|
75c89b471c | ||
|
|
a804877a08 | ||
|
|
f7441f39e7 | ||
|
|
e647af0777 |
@@ -18,7 +18,6 @@ dependencies {
|
||||
implementation project(':capacitor-share')
|
||||
implementation project(':capacitor-status-bar')
|
||||
implementation project(':capawesome-capacitor-file-picker')
|
||||
implementation project(':timesafari-daily-notification-plugin')
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -36,30 +36,6 @@
|
||||
android:grantUriPermissions="true">
|
||||
<meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths" />
|
||||
</provider>
|
||||
|
||||
<!-- Daily Notification Plugin Receivers -->
|
||||
<receiver
|
||||
android:name="com.timesafari.dailynotification.DailyNotificationReceiver"
|
||||
android:enabled="true"
|
||||
android:exported="false">
|
||||
<intent-filter>
|
||||
<action android:name="com.timesafari.daily.NOTIFICATION" />
|
||||
</intent-filter>
|
||||
</receiver>
|
||||
<receiver
|
||||
android:name="com.timesafari.dailynotification.BootReceiver"
|
||||
android:directBootAware="true"
|
||||
android:enabled="true"
|
||||
android:exported="true">
|
||||
<intent-filter android:priority="1000">
|
||||
<!-- Delivered very early after reboot (before unlock) -->
|
||||
<action android:name="android.intent.action.LOCKED_BOOT_COMPLETED" />
|
||||
<!-- Delivered after the user unlocks / credential-encrypted storage is available -->
|
||||
<action android:name="android.intent.action.BOOT_COMPLETED" />
|
||||
<!-- Delivered after app update; great for rescheduling alarms without reboot -->
|
||||
<action android:name="android.intent.action.MY_PACKAGE_REPLACED" />
|
||||
</intent-filter>
|
||||
</receiver>
|
||||
</application>
|
||||
|
||||
<!-- Permissions -->
|
||||
@@ -69,15 +45,4 @@
|
||||
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
|
||||
<uses-permission android:name="android.permission.CAMERA" />
|
||||
<uses-feature android:name="android.hardware.camera" android:required="true" />
|
||||
|
||||
<!-- Notification permissions -->
|
||||
<!-- POST_NOTIFICATIONS required for Android 13+ (API 33+) -->
|
||||
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
|
||||
|
||||
<!-- SCHEDULE_EXACT_ALARM required for Android 12+ (API 31+) to schedule exact alarms -->
|
||||
<!-- Note: On Android 12+, users can grant/deny this permission -->
|
||||
<uses-permission android:name="android.permission.SCHEDULE_EXACT_ALARM" />
|
||||
|
||||
<!-- RECEIVE_BOOT_COMPLETED needed to reschedule notifications after device reboot -->
|
||||
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
|
||||
</manifest>
|
||||
|
||||
@@ -34,9 +34,5 @@
|
||||
{
|
||||
"pkg": "@capawesome/capacitor-file-picker",
|
||||
"classpath": "io.capawesome.capacitorjs.plugins.filepicker.FilePickerPlugin"
|
||||
},
|
||||
{
|
||||
"pkg": "@timesafari/daily-notification-plugin",
|
||||
"classpath": "com.timesafari.dailynotification.DailyNotificationPlugin"
|
||||
}
|
||||
]
|
||||
|
||||
@@ -28,6 +28,3 @@ project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacit
|
||||
|
||||
include ':capawesome-capacitor-file-picker'
|
||||
project(':capawesome-capacitor-file-picker').projectDir = new File('../node_modules/@capawesome/capacitor-file-picker/android')
|
||||
|
||||
include ':timesafari-daily-notification-plugin'
|
||||
project(':timesafari-daily-notification-plugin').projectDir = new File('../node_modules/@timesafari/daily-notification-plugin/android')
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
42
package-lock.json
generated
42
package-lock.json
generated
@@ -37,7 +37,6 @@
|
||||
"@pvermeer/dexie-encrypted-addon": "^3.0.0",
|
||||
"@simplewebauthn/browser": "^10.0.0",
|
||||
"@simplewebauthn/server": "^10.0.0",
|
||||
"@timesafari/daily-notification-plugin": "file:../daily-notification-plugin",
|
||||
"@tweenjs/tween.js": "^21.1.1",
|
||||
"@types/qrcode": "^1.5.5",
|
||||
"@veramo/core": "^5.6.0",
|
||||
@@ -150,43 +149,6 @@
|
||||
"vite": "^5.2.0"
|
||||
}
|
||||
},
|
||||
"../daily-notification-plugin": {
|
||||
"name": "@timesafari/daily-notification-plugin",
|
||||
"version": "1.0.1",
|
||||
"license": "MIT",
|
||||
"workspaces": [
|
||||
"packages/*"
|
||||
],
|
||||
"dependencies": {
|
||||
"@capacitor/core": "^6.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@capacitor/android": "^6.2.1",
|
||||
"@capacitor/cli": "^6.2.1",
|
||||
"@capacitor/ios": "^6.2.1",
|
||||
"@types/jest": "^29.5.0",
|
||||
"@types/jsdom": "^21.1.7",
|
||||
"@types/node": "^20.19.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.57.0",
|
||||
"@typescript-eslint/parser": "^5.57.0",
|
||||
"eslint": "^8.37.0",
|
||||
"jest": "^29.5.0",
|
||||
"jest-environment-jsdom": "^30.0.5",
|
||||
"jsdom": "^26.1.0",
|
||||
"markdownlint-cli2": "^0.18.1",
|
||||
"prettier": "^2.8.7",
|
||||
"rimraf": "^4.4.0",
|
||||
"rollup": "^3.20.0",
|
||||
"rollup-plugin-typescript2": "^0.31.0",
|
||||
"standard-version": "^9.5.0",
|
||||
"ts-jest": "^29.1.0",
|
||||
"typescript": "~5.2.0",
|
||||
"vite": "^7.1.9"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@0no-co/graphql.web": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@0no-co/graphql.web/-/graphql.web-1.2.0.tgz",
|
||||
@@ -9643,10 +9605,6 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@timesafari/daily-notification-plugin": {
|
||||
"resolved": "../daily-notification-plugin",
|
||||
"link": true
|
||||
},
|
||||
"node_modules/@tootallnate/once": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
|
||||
|
||||
@@ -166,7 +166,6 @@
|
||||
"@pvermeer/dexie-encrypted-addon": "^3.0.0",
|
||||
"@simplewebauthn/browser": "^10.0.0",
|
||||
"@simplewebauthn/server": "^10.0.0",
|
||||
"@timesafari/daily-notification-plugin": "file:../daily-notification-plugin",
|
||||
"@tweenjs/tween.js": "^21.1.1",
|
||||
"@types/qrcode": "^1.5.5",
|
||||
"@veramo/core": "^5.6.0",
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
}
|
||||
|
||||
.dialog {
|
||||
@apply bg-white px-4 py-6 rounded-lg w-full max-w-lg max-h-[90%] overflow-y-auto;
|
||||
@apply bg-white px-4 py-6 rounded-lg w-full max-w-lg max-h-[calc(100vh-3rem)] overflow-y-auto;
|
||||
}
|
||||
|
||||
/* Markdown content styling to restore list elements */
|
||||
|
||||
@@ -2,12 +2,55 @@
|
||||
GiftedDialog.vue to provide a reusable grid layout * for displaying people,
|
||||
projects, and special entities with selection. * * @author Matthew Raymer */
|
||||
<template>
|
||||
<ul :class="gridClasses">
|
||||
<!-- Quick Search -->
|
||||
<div id="QuickSearch" class="mb-4 flex items-center text-sm">
|
||||
<input
|
||||
v-model="searchTerm"
|
||||
type="text"
|
||||
placeholder="Search…"
|
||||
class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-1.5 placeholder:italic placeholder:text-slate-400 focus:outline-none"
|
||||
@input="handleSearchInput"
|
||||
@keydown.enter="performSearch"
|
||||
/>
|
||||
<div
|
||||
v-show="isSearching && searchTerm"
|
||||
class="border-y border-slate-400 ps-2 py-1.5 text-center text-slate-400"
|
||||
>
|
||||
<font-awesome
|
||||
icon="spinner"
|
||||
class="fa-spin-pulse leading-[1.1]"
|
||||
></font-awesome>
|
||||
</div>
|
||||
<button
|
||||
:disabled="!searchTerm"
|
||||
class="px-2 py-1.5 rounded-r bg-white border border-l-0 border-slate-400 text-slate-400 disabled:cursor-not-allowed"
|
||||
@click="clearSearch"
|
||||
>
|
||||
<font-awesome
|
||||
:icon="searchTerm ? 'times' : 'magnifying-glass'"
|
||||
class="fa-fw"
|
||||
></font-awesome>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="searchTerm && !isSearching && filteredEntities.length === 0"
|
||||
class="mb-4 text-sm italic text-slate-500 text-center"
|
||||
>
|
||||
“{{ searchTerm }}” doesn't match any
|
||||
{{ entityType === "people" ? "people" : "projects" }}. Try a different
|
||||
search.
|
||||
</div>
|
||||
|
||||
<ul
|
||||
ref="scrollContainer"
|
||||
class="border-t border-slate-300 mb-4 max-h-[60vh] overflow-y-auto"
|
||||
>
|
||||
<!-- Special entities (You, Unnamed) for people grids -->
|
||||
<template v-if="entityType === 'people'">
|
||||
<!-- "You" entity -->
|
||||
<SpecialEntityCard
|
||||
v-if="showYouEntity"
|
||||
v-if="showYouEntity && !searchTerm.trim()"
|
||||
entity-type="you"
|
||||
label="You"
|
||||
icon="hand"
|
||||
@@ -21,6 +64,7 @@ projects, and special entities with selection. * * @author Matthew Raymer */
|
||||
|
||||
<!-- "Unnamed" entity -->
|
||||
<SpecialEntityCard
|
||||
v-if="showUnnamedEntity && !searchTerm.trim()"
|
||||
entity-type="unnamed"
|
||||
:label="unnamedEntityName"
|
||||
icon="circle-question"
|
||||
@@ -38,16 +82,60 @@ projects, and special entities with selection. * * @author Matthew Raymer */
|
||||
|
||||
<!-- Entity cards (people or projects) -->
|
||||
<template v-if="entityType === 'people'">
|
||||
<PersonCard
|
||||
v-for="person in displayedEntities as Contact[]"
|
||||
:key="person.did"
|
||||
:person="person"
|
||||
:conflicted="isPersonConflicted(person.did)"
|
||||
:show-time-icon="true"
|
||||
:notify="notify"
|
||||
:conflict-context="conflictContext"
|
||||
@person-selected="handlePersonSelected"
|
||||
/>
|
||||
<!-- When showing contacts without search: split into recent and alphabetical -->
|
||||
<template v-if="!searchTerm.trim()">
|
||||
<!-- Recently Added Section -->
|
||||
<template v-if="recentContacts.length > 0">
|
||||
<li
|
||||
class="text-xs font-semibold text-slate-500 uppercase pt-5 pb-1.5 px-2 border-b border-slate-300"
|
||||
>
|
||||
Recently Added
|
||||
</li>
|
||||
<PersonCard
|
||||
v-for="person in recentContacts"
|
||||
:key="person.did"
|
||||
:person="person"
|
||||
:conflicted="isPersonConflicted(person.did)"
|
||||
:show-time-icon="true"
|
||||
:notify="notify"
|
||||
:conflict-context="conflictContext"
|
||||
@person-selected="handlePersonSelected"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Alphabetical Section -->
|
||||
<template v-if="alphabeticalContacts.length > 0">
|
||||
<li
|
||||
class="text-xs font-semibold text-slate-500 uppercase pt-5 pb-1.5 px-2 border-b border-slate-300"
|
||||
>
|
||||
Everyone Else
|
||||
</li>
|
||||
<PersonCard
|
||||
v-for="person in alphabeticalContacts"
|
||||
:key="person.did"
|
||||
:person="person"
|
||||
:conflicted="isPersonConflicted(person.did)"
|
||||
:show-time-icon="true"
|
||||
:notify="notify"
|
||||
:conflict-context="conflictContext"
|
||||
@person-selected="handlePersonSelected"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- When searching: show filtered results normally -->
|
||||
<template v-else>
|
||||
<PersonCard
|
||||
v-for="person in displayedEntities as Contact[]"
|
||||
:key="person.did"
|
||||
:person="person"
|
||||
:conflicted="isPersonConflicted(person.did)"
|
||||
:show-time-icon="true"
|
||||
:notify="notify"
|
||||
:conflict-context="conflictContext"
|
||||
@person-selected="handlePersonSelected"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template v-else-if="entityType === 'projects'">
|
||||
@@ -63,28 +151,27 @@ projects, and special entities with selection. * * @author Matthew Raymer */
|
||||
@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 { Component, Prop, Vue, Emit, Watch } from "vue-facing-decorator";
|
||||
import { useInfiniteScroll } from "@vueuse/core";
|
||||
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";
|
||||
import { NotificationIface } from "../constants/app";
|
||||
import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
|
||||
|
||||
/**
|
||||
* Constants for infinite scroll configuration
|
||||
*/
|
||||
const INITIAL_BATCH_SIZE = 20;
|
||||
const INCREMENT_SIZE = 20;
|
||||
const RECENT_CONTACTS_COUNT = 3;
|
||||
|
||||
/**
|
||||
* EntityGrid - Unified grid layout for displaying people or projects
|
||||
*
|
||||
@@ -93,7 +180,6 @@ import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
|
||||
* - Special entity integration (You, Unnamed)
|
||||
* - Conflict detection integration
|
||||
* - Empty state messaging
|
||||
* - Show All navigation
|
||||
* - Event delegation for entity selection
|
||||
* - Warning notifications for conflicted entities
|
||||
* - Template streamlined with computed CSS properties
|
||||
@@ -104,7 +190,6 @@ import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
|
||||
PersonCard,
|
||||
ProjectCard,
|
||||
SpecialEntityCard,
|
||||
ShowAllCard,
|
||||
},
|
||||
})
|
||||
export default class EntityGrid extends Vue {
|
||||
@@ -112,14 +197,21 @@ export default class EntityGrid extends Vue {
|
||||
@Prop({ required: true })
|
||||
entityType!: "people" | "projects";
|
||||
|
||||
// Search state
|
||||
searchTerm = "";
|
||||
isSearching = false;
|
||||
searchTimeout: NodeJS.Timeout | null = null;
|
||||
filteredEntities: Contact[] | PlanData[] = [];
|
||||
|
||||
// Infinite scroll state
|
||||
displayedCount = INITIAL_BATCH_SIZE;
|
||||
infiniteScrollReset?: () => void;
|
||||
scrollContainer?: HTMLElement;
|
||||
|
||||
/** 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;
|
||||
@@ -140,18 +232,14 @@ export default class EntityGrid extends Vue {
|
||||
@Prop({ default: true })
|
||||
showYouEntity!: boolean;
|
||||
|
||||
/** Whether to show the "Unnamed" entity for people grids */
|
||||
@Prop({ default: true })
|
||||
showUnnamedEntity!: 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, string>;
|
||||
|
||||
/** Notification function from parent component */
|
||||
@Prop()
|
||||
notify?: (notification: NotificationIface, timeout?: number) => void;
|
||||
@@ -160,42 +248,31 @@ export default class EntityGrid extends Vue {
|
||||
@Prop({ default: "other party" })
|
||||
conflictContext!: string;
|
||||
|
||||
/** Whether to hide the "Show All" navigation */
|
||||
@Prop({ default: false })
|
||||
hideShowAll!: boolean;
|
||||
|
||||
/**
|
||||
* Function to determine which entities to display (allows parent control)
|
||||
*
|
||||
* This function prop allows parent components to customize which entities
|
||||
* are displayed in the grid, enabling advanced filtering, sorting, and
|
||||
* display logic beyond the default simple slice behavior.
|
||||
* are displayed in the grid, enabling advanced filtering and sorting.
|
||||
* Note: Infinite scroll is disabled when this prop is provided.
|
||||
*
|
||||
* @param entities - The full array of entities (Contact[] or PlanData[])
|
||||
* @param entityType - The type of entities being displayed ("people" or "projects")
|
||||
* @param maxItems - The maximum number of items to display (from maxItems prop)
|
||||
* @returns Filtered/sorted array of entities to display
|
||||
*
|
||||
* @example
|
||||
* // Custom filtering: only show contacts with profile images
|
||||
* :display-entities-function="(entities, type, max) =>
|
||||
* entities.filter(e => e.profileImageUrl).slice(0, max)"
|
||||
* :display-entities-function="(entities, type) =>
|
||||
* entities.filter(e => e.profileImageUrl)"
|
||||
*
|
||||
* @example
|
||||
* // Custom sorting: sort projects by name
|
||||
* :display-entities-function="(entities, type, max) =>
|
||||
* entities.sort((a, b) => a.name.localeCompare(b.name)).slice(0, max)"
|
||||
*
|
||||
* @example
|
||||
* // Advanced logic: different limits for different entity types
|
||||
* :display-entities-function="(entities, type, max) =>
|
||||
* type === 'projects' ? entities.slice(0, 5) : entities.slice(0, max)"
|
||||
* :display-entities-function="(entities, type) =>
|
||||
* entities.sort((a, b) => a.name.localeCompare(b.name))"
|
||||
*/
|
||||
@Prop({ default: null })
|
||||
displayEntitiesFunction?: (
|
||||
entities: Contact[] | PlanData[],
|
||||
entityType: "people" | "projects",
|
||||
maxItems: number,
|
||||
) => Contact[] | PlanData[];
|
||||
|
||||
/**
|
||||
@@ -206,33 +283,60 @@ export default class EntityGrid extends Vue {
|
||||
}
|
||||
|
||||
/**
|
||||
* Computed CSS classes for the grid layout
|
||||
* Computed entities to display - uses function prop if provided, otherwise uses infinite scroll
|
||||
* When searching, returns filtered results with infinite scroll applied
|
||||
*/
|
||||
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`;
|
||||
get displayedEntities(): Contact[] | PlanData[] {
|
||||
// If searching, return filtered results with infinite scroll
|
||||
if (this.searchTerm.trim()) {
|
||||
return this.filteredEntities.slice(0, this.displayedCount);
|
||||
}
|
||||
|
||||
// If custom function provided, use it (disables infinite scroll)
|
||||
if (this.displayEntitiesFunction) {
|
||||
return this.displayEntitiesFunction(this.entities, this.entityType);
|
||||
}
|
||||
|
||||
// Default: projects use infinite scroll
|
||||
if (this.entityType === "projects") {
|
||||
return (this.entities as PlanData[]).slice(0, this.displayedCount);
|
||||
}
|
||||
|
||||
// People: handled by recentContacts + alphabeticalContacts (both use displayedCount)
|
||||
return [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Computed entities to display - uses function prop if provided, otherwise defaults
|
||||
* Get the 3 most recently added contacts (when showing contacts and not searching)
|
||||
*/
|
||||
get displayedEntities(): Contact[] | PlanData[] {
|
||||
if (this.displayEntitiesFunction) {
|
||||
return this.displayEntitiesFunction(
|
||||
this.entities,
|
||||
this.entityType,
|
||||
this.maxItems,
|
||||
);
|
||||
get recentContacts(): Contact[] {
|
||||
if (this.entityType !== "people" || this.searchTerm.trim()) {
|
||||
return [];
|
||||
}
|
||||
// Entities are already sorted by date added (newest first)
|
||||
return (this.entities as Contact[]).slice(0, 3);
|
||||
}
|
||||
|
||||
// Default implementation for backward compatibility
|
||||
const maxDisplay = this.entityType === "projects" ? 7 : this.maxItems;
|
||||
return this.entities.slice(0, maxDisplay);
|
||||
/**
|
||||
* Get the remaining contacts sorted alphabetically (when showing contacts and not searching)
|
||||
* Uses infinite scroll to control how many are displayed
|
||||
*/
|
||||
get alphabeticalContacts(): Contact[] {
|
||||
if (this.entityType !== "people" || this.searchTerm.trim()) {
|
||||
return [];
|
||||
}
|
||||
// Skip the first 3 (recent contacts) and sort the rest alphabetically
|
||||
// Create a copy to avoid mutating the original array
|
||||
const remaining = (this.entities as Contact[]).slice(RECENT_CONTACTS_COUNT);
|
||||
const sorted = [...remaining].sort((a: Contact, b: Contact) => {
|
||||
// Sort alphabetically by name, falling back to DID if name is missing
|
||||
const nameA = (a.name || a.did).toLowerCase();
|
||||
const nameB = (b.name || b.did).toLowerCase();
|
||||
return nameA.localeCompare(nameB);
|
||||
});
|
||||
// Apply infinite scroll: show based on displayedCount (minus the 3 recent)
|
||||
const toShow = Math.max(0, this.displayedCount - RECENT_CONTACTS_COUNT);
|
||||
return sorted.slice(0, toShow);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -246,15 +350,6 @@ export default class EntityGrid extends Vue {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether to show the "Show All" navigation
|
||||
*/
|
||||
get shouldShowAll(): boolean {
|
||||
return (
|
||||
!this.hideShowAll && this.entities.length > 0 && this.showAllRoute !== ""
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether the "You" entity is conflicted
|
||||
*/
|
||||
@@ -328,6 +423,144 @@ export default class EntityGrid extends Vue {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle search input with debouncing
|
||||
*/
|
||||
handleSearchInput(): void {
|
||||
// Show spinner immediately when user types
|
||||
this.isSearching = true;
|
||||
|
||||
// Clear existing timeout
|
||||
if (this.searchTimeout) {
|
||||
clearTimeout(this.searchTimeout);
|
||||
}
|
||||
|
||||
// Set new timeout for 500ms delay
|
||||
this.searchTimeout = setTimeout(() => {
|
||||
this.performSearch();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
/**
|
||||
* Perform the actual search
|
||||
*/
|
||||
async performSearch(): Promise<void> {
|
||||
if (!this.searchTerm.trim()) {
|
||||
this.filteredEntities = [];
|
||||
this.displayedCount = INITIAL_BATCH_SIZE;
|
||||
this.infiniteScrollReset?.();
|
||||
return;
|
||||
}
|
||||
|
||||
this.isSearching = true;
|
||||
|
||||
try {
|
||||
// Simulate async search (in case we need to add API calls later)
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
|
||||
const searchLower = this.searchTerm.toLowerCase().trim();
|
||||
|
||||
if (this.entityType === "people") {
|
||||
this.filteredEntities = (this.entities as Contact[])
|
||||
.filter((contact: Contact) => {
|
||||
const name = contact.name?.toLowerCase() || "";
|
||||
const did = contact.did.toLowerCase();
|
||||
return name.includes(searchLower) || did.includes(searchLower);
|
||||
})
|
||||
.sort((a: Contact, b: Contact) => {
|
||||
// Sort alphabetically by name, falling back to DID if name is missing
|
||||
const nameA = (a.name || a.did).toLowerCase();
|
||||
const nameB = (b.name || b.did).toLowerCase();
|
||||
return nameA.localeCompare(nameB);
|
||||
});
|
||||
} else {
|
||||
this.filteredEntities = (this.entities as PlanData[])
|
||||
.filter((project: PlanData) => {
|
||||
const name = project.name?.toLowerCase() || "";
|
||||
const handleId = project.handleId.toLowerCase();
|
||||
return name.includes(searchLower) || handleId.includes(searchLower);
|
||||
})
|
||||
.sort((a: PlanData, b: PlanData) => {
|
||||
// Sort alphabetically by name
|
||||
return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
|
||||
});
|
||||
}
|
||||
|
||||
// Reset displayed count when search completes
|
||||
this.displayedCount = INITIAL_BATCH_SIZE;
|
||||
this.infiniteScrollReset?.();
|
||||
} finally {
|
||||
this.isSearching = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear the search
|
||||
*/
|
||||
clearSearch(): void {
|
||||
this.searchTerm = "";
|
||||
this.filteredEntities = [];
|
||||
this.isSearching = false;
|
||||
this.displayedCount = INITIAL_BATCH_SIZE;
|
||||
this.infiniteScrollReset?.();
|
||||
|
||||
// Clear any pending timeout
|
||||
if (this.searchTimeout) {
|
||||
clearTimeout(this.searchTimeout);
|
||||
this.searchTimeout = null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine if more entities can be loaded
|
||||
*/
|
||||
canLoadMore(): boolean {
|
||||
if (this.displayEntitiesFunction) {
|
||||
// Custom function disables infinite scroll
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.searchTerm.trim()) {
|
||||
// Search mode: check filtered entities
|
||||
return this.displayedCount < this.filteredEntities.length;
|
||||
}
|
||||
|
||||
if (this.entityType === "projects") {
|
||||
// Projects: check if more available
|
||||
return this.displayedCount < this.entities.length;
|
||||
}
|
||||
|
||||
// People: check if more alphabetical contacts available
|
||||
// Total available = 3 recent + all alphabetical
|
||||
const remaining = (this.entities as Contact[]).slice(RECENT_CONTACTS_COUNT);
|
||||
const totalAvailable = RECENT_CONTACTS_COUNT + remaining.length;
|
||||
return this.displayedCount < totalAvailable;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize infinite scroll on mount
|
||||
*/
|
||||
mounted(): void {
|
||||
this.$nextTick(() => {
|
||||
const container = this.$refs.scrollContainer as HTMLElement;
|
||||
|
||||
if (container) {
|
||||
const { reset } = useInfiniteScroll(
|
||||
container,
|
||||
() => {
|
||||
// Load more: increment displayedCount
|
||||
this.displayedCount += INCREMENT_SIZE;
|
||||
},
|
||||
{
|
||||
distance: 50, // pixels from bottom
|
||||
canLoadMore: () => this.canLoadMore(),
|
||||
},
|
||||
);
|
||||
this.infiniteScrollReset = reset;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Emit methods using @Emit decorator
|
||||
|
||||
@Emit("entity-selected")
|
||||
@@ -340,6 +573,33 @@ export default class EntityGrid extends Vue {
|
||||
} {
|
||||
return data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Watch for changes in search term to reset displayed count
|
||||
*/
|
||||
@Watch("searchTerm")
|
||||
onSearchTermChange(): void {
|
||||
this.displayedCount = INITIAL_BATCH_SIZE;
|
||||
this.infiniteScrollReset?.();
|
||||
}
|
||||
|
||||
/**
|
||||
* Watch for changes in entities prop to reset displayed count
|
||||
*/
|
||||
@Watch("entities")
|
||||
onEntitiesChange(): void {
|
||||
this.displayedCount = INITIAL_BATCH_SIZE;
|
||||
this.infiniteScrollReset?.();
|
||||
}
|
||||
|
||||
/**
|
||||
* Cleanup timeouts when component is destroyed
|
||||
*/
|
||||
beforeUnmount(): void {
|
||||
if (this.searchTimeout) {
|
||||
clearTimeout(this.searchTimeout);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -3,10 +3,9 @@ from GiftedDialog.vue to handle the complete step 1 * entity selection interface
|
||||
with dynamic labeling and grid display. * * 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 * - Warning notifications for conflicted
|
||||
entities * - Template streamlined with computed CSS properties * * @author
|
||||
Matthew Raymer */
|
||||
Cancel functionality * - Event delegation for entity selection * - Warning
|
||||
notifications for conflicted entities * - Template streamlined with computed CSS
|
||||
properties * * @author Matthew Raymer */
|
||||
<template>
|
||||
<div id="sectionGiftedGiver">
|
||||
<label class="block font-bold mb-4">
|
||||
@@ -16,18 +15,14 @@ Matthew Raymer */
|
||||
<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"
|
||||
:notify="notify"
|
||||
:conflict-context="conflictContext"
|
||||
:hide-show-all="hideShowAll"
|
||||
@entity-selected="handleEntitySelected"
|
||||
/>
|
||||
|
||||
@@ -68,7 +63,6 @@ interface EntitySelectionEvent {
|
||||
* - 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
|
||||
* - Warning notifications for conflicted entities
|
||||
@@ -154,10 +148,6 @@ export default class EntitySelectionStep extends Vue {
|
||||
@Prop()
|
||||
notify?: (notification: NotificationIface, timeout?: number) => void;
|
||||
|
||||
/** Whether to hide the "Show All" navigation */
|
||||
@Prop({ default: false })
|
||||
hideShowAll!: boolean;
|
||||
|
||||
/**
|
||||
* CSS classes for the cancel button
|
||||
*/
|
||||
@@ -222,59 +212,6 @@ export default class EntitySelectionStep extends Vue {
|
||||
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, string> {
|
||||
const baseParams = {
|
||||
stepType: this.stepType,
|
||||
giverEntityType: this.giverEntityType,
|
||||
recipientEntityType: this.recipientEntityType,
|
||||
// Form field values to preserve
|
||||
description: this.description,
|
||||
amountInput: this.amountInput,
|
||||
unitCode: this.unitCode,
|
||||
offerId: this.offerId,
|
||||
fromProjectId: this.fromProjectId,
|
||||
toProjectId: this.toProjectId,
|
||||
showProjects: this.showProjects.toString(),
|
||||
isFromProjectView: this.isFromProjectView.toString(),
|
||||
};
|
||||
|
||||
if (this.shouldShowProjects) {
|
||||
// For project contexts, still pass entity type information
|
||||
return baseParams;
|
||||
}
|
||||
|
||||
return {
|
||||
...baseParams,
|
||||
// Always pass both giver and recipient info for context preservation
|
||||
giverProjectId: this.fromProjectId || "",
|
||||
giverProjectName: this.giver?.name || "",
|
||||
giverProjectImage: this.giver?.image || "",
|
||||
giverProjectHandleId: this.giver?.handleId || "",
|
||||
giverDid: this.giverEntityType === "person" ? this.giver?.did || "" : "",
|
||||
recipientProjectId: this.toProjectId || "",
|
||||
recipientProjectName: this.receiver?.name || "",
|
||||
recipientProjectImage: this.receiver?.image || "",
|
||||
recipientProjectHandleId: this.receiver?.handleId || "",
|
||||
recipientDid:
|
||||
this.recipientEntityType === "person" ? this.receiver?.did || "" : "",
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle entity selection from EntityGrid
|
||||
*/
|
||||
|
||||
@@ -29,7 +29,6 @@
|
||||
:unit-code="unitCode"
|
||||
:offer-id="offerId"
|
||||
:notify="$notify"
|
||||
:hide-show-all="hideShowAll"
|
||||
@entity-selected="handleEntitySelected"
|
||||
@cancel="cancel"
|
||||
/>
|
||||
@@ -117,7 +116,6 @@ export default class GiftedDialog extends Vue {
|
||||
@Prop() fromProjectId = "";
|
||||
@Prop() toProjectId = "";
|
||||
@Prop() isFromProjectView = false;
|
||||
@Prop() hideShowAll = false;
|
||||
@Prop({ default: "person" }) giverEntityType = "person" as
|
||||
| "person"
|
||||
| "project";
|
||||
@@ -233,7 +231,7 @@ export default class GiftedDialog extends Vue {
|
||||
apiServer: this.apiServer,
|
||||
});
|
||||
|
||||
this.allContacts = await this.$contacts();
|
||||
this.allContacts = await this.$contactsByDateAdded();
|
||||
|
||||
this.allMyDids = await retrieveAccountDids();
|
||||
|
||||
|
||||
@@ -3,30 +3,25 @@ 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">
|
||||
<div>
|
||||
<EntityIcon
|
||||
v-if="person.did"
|
||||
:contact="person"
|
||||
class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
|
||||
class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
|
||||
/>
|
||||
<font-awesome
|
||||
v-else
|
||||
icon="circle-question"
|
||||
class="text-slate-400 text-5xl mb-1"
|
||||
class="text-slate-400 text-5xl mb-1 shrink-0"
|
||||
/>
|
||||
|
||||
<!-- 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">
|
||||
{{ displayName }}
|
||||
</h3>
|
||||
<div class="overflow-hidden">
|
||||
<h3 :class="nameClasses">
|
||||
{{ displayName }}
|
||||
</h3>
|
||||
<p class="text-xs text-slate-500 truncate">{{ person.did }}</p>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
@@ -81,29 +76,32 @@ export default class PersonCard extends Vue {
|
||||
* Computed CSS classes for the card
|
||||
*/
|
||||
get cardClasses(): string {
|
||||
const baseCardClasses =
|
||||
"flex items-center gap-2 px-2 py-1.5 border-b border-slate-300";
|
||||
|
||||
if (!this.selectable || this.conflicted) {
|
||||
return "opacity-50 cursor-not-allowed";
|
||||
return `${baseCardClasses} *:opacity-50 cursor-not-allowed`;
|
||||
}
|
||||
return "cursor-pointer hover:bg-slate-50";
|
||||
|
||||
return `${baseCardClasses} 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";
|
||||
const baseNameClasses = "text-sm font-semibold truncate";
|
||||
|
||||
if (this.conflicted) {
|
||||
return `${baseClasses} text-slate-400`;
|
||||
return `${baseNameClasses} text-slate-500`;
|
||||
}
|
||||
|
||||
// Add italic styling for entities without set names
|
||||
if (!this.person.name) {
|
||||
return `${baseClasses} italic text-slate-500`;
|
||||
return `${baseNameClasses} italic text-slate-500`;
|
||||
}
|
||||
|
||||
return baseClasses;
|
||||
return baseNameClasses;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -2,25 +2,26 @@
|
||||
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>
|
||||
<li
|
||||
class="flex items-center gap-2 px-2 py-1.5 border-b border-slate-300 hover:bg-slate-50 cursor-pointer"
|
||||
@click="handleClick"
|
||||
>
|
||||
<ProjectIcon
|
||||
:entity-id="project.handleId"
|
||||
:icon-size="48"
|
||||
:image-url="project.image"
|
||||
class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
|
||||
/>
|
||||
|
||||
<h3
|
||||
class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
|
||||
>
|
||||
{{ project.name || unnamedProject }}
|
||||
</h3>
|
||||
<div class="overflow-hidden">
|
||||
<h3 class="text-sm font-semibold truncate">
|
||||
{{ project.name || unnamedProject }}
|
||||
</h3>
|
||||
|
||||
<div class="text-xs text-slate-500 truncate">
|
||||
<font-awesome icon="user" class="fa-fw text-slate-400" />
|
||||
{{ issuerDisplayName }}
|
||||
<div class="text-xs text-slate-500 truncate">
|
||||
<font-awesome icon="user" class="text-slate-400" />
|
||||
{{ issuerDisplayName }}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
@@ -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({ name: "ShowAllCard" })
|
||||
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, string>;
|
||||
|
||||
/**
|
||||
* 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>
|
||||
@@ -63,23 +63,24 @@ export default class SpecialEntityCard extends Vue {
|
||||
conflictContext!: string;
|
||||
|
||||
/**
|
||||
* Computed CSS classes for the card container
|
||||
* Computed CSS classes for the card
|
||||
*/
|
||||
get cardClasses(): string {
|
||||
const baseClasses = "block";
|
||||
const baseCardClasses =
|
||||
"flex items-center gap-2 px-2 py-1.5 border-b border-slate-300";
|
||||
|
||||
if (!this.selectable || this.conflicted) {
|
||||
return `${baseClasses} cursor-not-allowed opacity-50`;
|
||||
return `${baseCardClasses} *:opacity-50 cursor-not-allowed`;
|
||||
}
|
||||
|
||||
return `${baseClasses} cursor-pointer`;
|
||||
return `${baseCardClasses} cursor-pointer hover:bg-slate-50`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Computed CSS classes for the icon
|
||||
*/
|
||||
get iconClasses(): string {
|
||||
const baseClasses = "text-5xl mb-1";
|
||||
const baseClasses = "text-[2rem]";
|
||||
|
||||
if (this.conflicted) {
|
||||
return `${baseClasses} text-slate-400`;
|
||||
@@ -101,7 +102,7 @@ export default class SpecialEntityCard extends Vue {
|
||||
*/
|
||||
get nameClasses(): string {
|
||||
const baseClasses =
|
||||
"text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden";
|
||||
"text-sm font-semibold text-ellipsis whitespace-nowrap overflow-hidden";
|
||||
|
||||
if (this.conflicted) {
|
||||
return `${baseClasses} text-slate-400`;
|
||||
|
||||
@@ -1,772 +0,0 @@
|
||||
<template>
|
||||
<section
|
||||
v-if="notificationsSupported"
|
||||
id="sectionDailyNotifications"
|
||||
class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
|
||||
aria-labelledby="dailyNotificationsHeading"
|
||||
>
|
||||
<h2 id="dailyNotificationsHeading" class="mb-2 font-bold">
|
||||
Daily Notifications
|
||||
<button
|
||||
class="text-slate-400 fa-fw cursor-pointer"
|
||||
aria-label="Learn more about native notifications"
|
||||
@click.stop="showNativeNotificationInfo"
|
||||
>
|
||||
<font-awesome icon="circle-question" aria-hidden="true" />
|
||||
</button>
|
||||
</h2>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div>Daily Notification</div>
|
||||
<!-- Toggle switch -->
|
||||
<div
|
||||
class="relative ml-2 cursor-pointer"
|
||||
role="switch"
|
||||
:aria-checked="nativeNotificationEnabled"
|
||||
:aria-label="
|
||||
nativeNotificationEnabled
|
||||
? 'Disable daily notifications'
|
||||
: 'Enable daily notifications'
|
||||
"
|
||||
tabindex="0"
|
||||
@click="toggleNativeNotification"
|
||||
>
|
||||
<!-- input -->
|
||||
<input
|
||||
:checked="nativeNotificationEnabled"
|
||||
type="checkbox"
|
||||
class="sr-only"
|
||||
tabindex="-1"
|
||||
readonly
|
||||
/>
|
||||
<!-- line -->
|
||||
<div
|
||||
class="block bg-slate-500 w-14 h-8 rounded-full transition"
|
||||
:class="{
|
||||
'bg-blue-600': nativeNotificationEnabled,
|
||||
}"
|
||||
></div>
|
||||
<!-- dot -->
|
||||
<div
|
||||
class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
|
||||
:class="{
|
||||
'left-7 bg-white': nativeNotificationEnabled,
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Show "Open Settings" button when permissions are denied -->
|
||||
<div
|
||||
v-if="
|
||||
notificationsSupported &&
|
||||
notificationStatus &&
|
||||
notificationStatus.permissions.notifications === 'denied'
|
||||
"
|
||||
class="mt-2"
|
||||
>
|
||||
<button
|
||||
class="w-full px-3 py-2 bg-blue-600 text-white rounded text-sm font-medium"
|
||||
@click="openNotificationSettings"
|
||||
>
|
||||
Open Settings
|
||||
</button>
|
||||
<p class="text-xs text-slate-500 mt-1 text-center">
|
||||
Enable notifications in Settings > App info > Notifications
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Time input section - show when enabled OR when no time is set -->
|
||||
<div
|
||||
v-if="nativeNotificationEnabled || !nativeNotificationTimeStorage"
|
||||
class="mt-2"
|
||||
>
|
||||
<div
|
||||
v-if="nativeNotificationEnabled"
|
||||
class="flex items-center justify-between mb-2"
|
||||
>
|
||||
<span
|
||||
>Scheduled for:
|
||||
<span v-if="nativeNotificationTime">{{
|
||||
nativeNotificationTime
|
||||
}}</span>
|
||||
<span v-else class="text-slate-500">Not set</span></span
|
||||
>
|
||||
<button
|
||||
class="text-blue-500 text-sm"
|
||||
@click="editNativeNotificationTime"
|
||||
>
|
||||
{{ showTimeEdit ? "Cancel" : "Edit Time" }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Time input (shown when editing or when no time is set) -->
|
||||
<div v-if="showTimeEdit || !nativeNotificationTimeStorage" class="mt-2">
|
||||
<label class="block text-sm text-slate-600 mb-1">
|
||||
Notification Time
|
||||
</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
v-model="nativeNotificationTimeStorage"
|
||||
type="time"
|
||||
class="rounded border border-slate-400 px-2 py-2"
|
||||
@change="onTimeChange"
|
||||
/>
|
||||
<button
|
||||
v-if="showTimeEdit || nativeNotificationTimeStorage"
|
||||
class="px-3 py-2 bg-blue-600 text-white rounded"
|
||||
@click="saveTimeChange"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
<p
|
||||
v-if="!nativeNotificationTimeStorage"
|
||||
class="text-xs text-slate-500 mt-1"
|
||||
>
|
||||
Set a time before enabling notifications
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading state -->
|
||||
<div v-if="loading" class="mt-2 text-sm text-slate-500">Loading...</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
/**
|
||||
* DailyNotificationSection Component
|
||||
*
|
||||
* A self-contained component for managing daily notification scheduling
|
||||
* in AccountViewView. This component handles platform detection, permission
|
||||
* requests, scheduling, and state management for daily notifications.
|
||||
*
|
||||
* Features:
|
||||
* - Platform capability detection (hides on unsupported platforms)
|
||||
* - Permission request flow
|
||||
* - Schedule/cancel notifications
|
||||
* - Time editing with HTML5 time input
|
||||
* - Settings persistence
|
||||
* - Plugin state synchronization
|
||||
*
|
||||
* @author Generated for TimeSafari Daily Notification Integration
|
||||
* @component
|
||||
*/
|
||||
|
||||
import { Component, Vue } from "vue-facing-decorator";
|
||||
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
|
||||
import { logger } from "@/utils/logger";
|
||||
import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
|
||||
import type {
|
||||
NotificationStatus,
|
||||
PermissionStatus,
|
||||
} from "@/services/PlatformService";
|
||||
import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
|
||||
import type { NotificationIface } from "@/constants/app";
|
||||
|
||||
/**
|
||||
* Convert 24-hour time format ("09:00") to 12-hour display format ("9:00 AM")
|
||||
*/
|
||||
function formatTimeForDisplay(time24: string): string {
|
||||
if (!time24) return "";
|
||||
const [hours, minutes] = time24.split(":");
|
||||
const hourNum = parseInt(hours);
|
||||
const isPM = hourNum >= 12;
|
||||
const displayHour =
|
||||
hourNum === 0 ? 12 : hourNum > 12 ? hourNum - 12 : hourNum;
|
||||
return `${displayHour}:${minutes} ${isPM ? "PM" : "AM"}`;
|
||||
}
|
||||
|
||||
@Component({
|
||||
name: "DailyNotificationSection",
|
||||
mixins: [PlatformServiceMixin],
|
||||
})
|
||||
export default class DailyNotificationSection extends Vue {
|
||||
$notify!: (notification: NotificationIface, timeout?: number) => void;
|
||||
|
||||
// Component state
|
||||
notificationsSupported: boolean = false;
|
||||
nativeNotificationEnabled: boolean = false;
|
||||
nativeNotificationTime: string = ""; // Display format: "9:00 AM"
|
||||
nativeNotificationTimeStorage: string = ""; // Plugin format: "09:00"
|
||||
nativeNotificationTitle: string = "Daily Update";
|
||||
nativeNotificationMessage: string = "Your daily notification is ready!";
|
||||
showTimeEdit: boolean = false;
|
||||
loading: boolean = false;
|
||||
notificationStatus: NotificationStatus | null = null;
|
||||
|
||||
// Notify helpers
|
||||
private notify!: ReturnType<typeof createNotifyHelpers>;
|
||||
|
||||
async created(): Promise<void> {
|
||||
this.notify = createNotifyHelpers(this.$notify);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize component state on mount
|
||||
* Checks platform support and syncs with plugin state
|
||||
*
|
||||
* **Token Refresh on Mount:**
|
||||
* - Refreshes native fetcher configuration to ensure plugin has valid token
|
||||
* - This handles cases where app was closed for extended periods
|
||||
* - Token refresh happens automatically without user interaction
|
||||
*
|
||||
* **App Resume Listener:**
|
||||
* - Listens for Capacitor 'resume' event to refresh token when app comes to foreground
|
||||
* - Ensures plugin always has fresh token for background prefetch operations
|
||||
* - Cleaned up in `beforeDestroy()` lifecycle hook
|
||||
*/
|
||||
async mounted(): Promise<void> {
|
||||
await this.initializeState();
|
||||
// Refresh native fetcher configuration on mount
|
||||
// This ensures plugin has valid token even if app was closed for extended periods
|
||||
await this.refreshNativeFetcherConfig();
|
||||
// Listen for app resume events to refresh token when app comes to foreground
|
||||
// This is part of the proactive token refresh strategy
|
||||
document.addEventListener("resume", this.handleAppResume);
|
||||
}
|
||||
|
||||
/**
|
||||
* Cleanup on component destroy
|
||||
*/
|
||||
beforeDestroy(): void {
|
||||
document.removeEventListener("resume", this.handleAppResume);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle app resume event - refresh native fetcher configuration
|
||||
*
|
||||
* This method is called when the app comes to foreground (via Capacitor 'resume' event).
|
||||
* It proactively refreshes the JWT token to ensure the plugin has valid authentication
|
||||
* for background prefetch operations.
|
||||
*
|
||||
* **Why refresh on resume?**
|
||||
* - Tokens expire after 72 hours
|
||||
* - App may have been closed for extended periods
|
||||
* - Refreshing ensures plugin has valid token for next prefetch cycle
|
||||
* - No user interaction required - happens automatically
|
||||
*
|
||||
* @see {@link refreshNativeFetcherConfig} For implementation details
|
||||
*/
|
||||
async handleAppResume(): Promise<void> {
|
||||
logger.debug(
|
||||
"[DailyNotificationSection] App resumed, refreshing native fetcher config",
|
||||
);
|
||||
await this.refreshNativeFetcherConfig();
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh native fetcher configuration with fresh JWT token
|
||||
*
|
||||
* This method ensures the daily notification plugin has a valid authentication token
|
||||
* for background prefetch operations. It's called proactively to prevent token expiration
|
||||
* issues during offline periods.
|
||||
*
|
||||
* **Refresh Triggers:**
|
||||
* - Component mount (when notification settings page loads)
|
||||
* - App resume (when app comes to foreground)
|
||||
* - Notification enabled (when user enables daily notifications)
|
||||
*
|
||||
* **Token Refresh Strategy (Hybrid Approach):**
|
||||
* - Tokens are valid for 72 hours (see `accessTokenForBackground`)
|
||||
* - Tokens are refreshed proactively when app is already open
|
||||
* - If token expires while offline, plugin uses cached content
|
||||
* - Next time app opens, token is automatically refreshed
|
||||
*
|
||||
* **Why This Approach?**
|
||||
* - No app wake-up required (tokens refresh when app is already open)
|
||||
* - Works offline (72-hour validity supports extended offline periods)
|
||||
* - Automatic (no user interaction required)
|
||||
* - Includes starred plans (fetcher receives user's starred plans for prefetch)
|
||||
* - Graceful degradation (if refresh fails, cached content still works)
|
||||
*
|
||||
* **Error Handling:**
|
||||
* - Errors are logged but not shown to user (background operation)
|
||||
* - Returns early if notifications not supported or disabled
|
||||
* - Returns early if API server not configured
|
||||
* - Failures don't interrupt user experience
|
||||
*
|
||||
* @returns Promise that resolves when refresh completes (or fails silently)
|
||||
*
|
||||
* @example
|
||||
* ```typescript
|
||||
* // Called automatically on mount/resume
|
||||
* await this.refreshNativeFetcherConfig();
|
||||
* ```
|
||||
*
|
||||
* @see {@link CapacitorPlatformService.configureNativeFetcher} For token generation
|
||||
* @see {@link accessTokenForBackground} For 72-hour token generation
|
||||
*/
|
||||
async refreshNativeFetcherConfig(): Promise<void> {
|
||||
try {
|
||||
const platformService = PlatformServiceFactory.getInstance();
|
||||
|
||||
// Early return: Only refresh if notifications are supported and enabled
|
||||
// This prevents unnecessary work when notifications aren't being used
|
||||
if (!this.notificationsSupported || !this.nativeNotificationEnabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get settings for API server and starred plans
|
||||
// API server tells plugin where to fetch content from
|
||||
// Starred plans tell plugin which plans to prefetch
|
||||
const settings = await this.$accountSettings();
|
||||
const apiServer = settings.apiServer || "";
|
||||
|
||||
if (!apiServer) {
|
||||
logger.warn(
|
||||
"[DailyNotificationSection] No API server configured, skipping native fetcher refresh",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Get starred plans from settings
|
||||
// These are passed to the plugin so it knows which plans to prefetch
|
||||
const starredPlanHandleIds = settings.starredPlanHandleIds || [];
|
||||
|
||||
// Configure native fetcher with fresh token
|
||||
// The jwt parameter is ignored - configureNativeFetcher generates it automatically
|
||||
// This ensures we always have a fresh token with current expiration time
|
||||
await platformService.configureNativeFetcher({
|
||||
apiServer,
|
||||
jwt: "", // Will be generated automatically by configureNativeFetcher
|
||||
starredPlanHandleIds,
|
||||
});
|
||||
|
||||
logger.info(
|
||||
"[DailyNotificationSection] Native fetcher configuration refreshed",
|
||||
);
|
||||
} catch (error) {
|
||||
// Don't show error to user - this is a background operation
|
||||
// Failures are logged for debugging but don't interrupt user experience
|
||||
// If refresh fails, plugin will use existing token (if still valid) or cached content
|
||||
logger.error(
|
||||
"[DailyNotificationSection] Failed to refresh native fetcher config:",
|
||||
error,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize component state
|
||||
* Checks platform support and syncs with plugin state
|
||||
*/
|
||||
async initializeState(): Promise<void> {
|
||||
try {
|
||||
this.loading = true;
|
||||
const platformService = PlatformServiceFactory.getInstance();
|
||||
|
||||
// Check if notifications are supported on this platform
|
||||
// This also verifies plugin availability (returns null if plugin unavailable)
|
||||
const status = await platformService.getDailyNotificationStatus();
|
||||
if (status === null) {
|
||||
// Notifications not supported or plugin unavailable - don't initialize
|
||||
this.notificationsSupported = false;
|
||||
logger.warn(
|
||||
"[DailyNotificationSection] Notifications not supported or plugin unavailable",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
this.notificationsSupported = true;
|
||||
this.notificationStatus = status;
|
||||
|
||||
// Plugin state is the source of truth
|
||||
if (status.isScheduled && status.scheduledTime) {
|
||||
// Plugin has a scheduled notification - sync UI to match
|
||||
this.nativeNotificationEnabled = true;
|
||||
this.nativeNotificationTimeStorage = status.scheduledTime;
|
||||
this.nativeNotificationTime = formatTimeForDisplay(
|
||||
status.scheduledTime,
|
||||
);
|
||||
} else {
|
||||
// No plugin schedule - UI defaults to disabled
|
||||
this.nativeNotificationEnabled = false;
|
||||
this.nativeNotificationTimeStorage = "";
|
||||
this.nativeNotificationTime = "";
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error("[DailyNotificationSection] Failed to initialize:", error);
|
||||
this.notificationsSupported = false;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle notification on/off
|
||||
*/
|
||||
async toggleNativeNotification(): Promise<void> {
|
||||
// Prevent multiple simultaneous toggles
|
||||
if (this.loading) {
|
||||
logger.warn(
|
||||
"[DailyNotificationSection] Toggle ignored - operation in progress",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
logger.info(
|
||||
`[DailyNotificationSection] Toggling notification: ${this.nativeNotificationEnabled} -> ${!this.nativeNotificationEnabled}`,
|
||||
);
|
||||
|
||||
if (this.nativeNotificationEnabled) {
|
||||
await this.disableNativeNotification();
|
||||
} else {
|
||||
await this.enableNativeNotification();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Enable daily notification
|
||||
*/
|
||||
async enableNativeNotification(): Promise<void> {
|
||||
try {
|
||||
this.loading = true;
|
||||
const platformService = PlatformServiceFactory.getInstance();
|
||||
|
||||
// Check if we have a time set
|
||||
if (!this.nativeNotificationTimeStorage) {
|
||||
this.notify.error(
|
||||
"Please set a notification time first",
|
||||
TIMEOUTS.SHORT,
|
||||
);
|
||||
this.loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Check permissions first - this also verifies plugin availability
|
||||
let permissions: PermissionStatus | null;
|
||||
try {
|
||||
permissions = await platformService.checkNotificationPermissions();
|
||||
logger.info(
|
||||
`[DailyNotificationSection] Permission check result:`,
|
||||
permissions,
|
||||
);
|
||||
} catch (error) {
|
||||
// Plugin may not be available or there's an error
|
||||
logger.error(
|
||||
"[DailyNotificationSection] Failed to check permissions (plugin may be unavailable):",
|
||||
error,
|
||||
);
|
||||
this.notify.error(
|
||||
"Unable to check notification permissions. The notification plugin may not be installed.",
|
||||
TIMEOUTS.LONG,
|
||||
);
|
||||
this.nativeNotificationEnabled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (permissions === null) {
|
||||
// Platform doesn't support notifications or plugin unavailable
|
||||
logger.warn(
|
||||
"[DailyNotificationSection] Notifications not supported or plugin unavailable",
|
||||
);
|
||||
this.notify.error(
|
||||
"Notifications are not supported on this platform or the plugin is not installed.",
|
||||
TIMEOUTS.SHORT,
|
||||
);
|
||||
this.nativeNotificationEnabled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
logger.info(
|
||||
`[DailyNotificationSection] Permission state: ${permissions.notifications}`,
|
||||
);
|
||||
|
||||
// If permissions are explicitly denied, don't try to request again
|
||||
// (this prevents the plugin crash when handling denied permissions)
|
||||
// Android won't show the dialog again if permissions are permanently denied
|
||||
if (permissions.notifications === "denied") {
|
||||
logger.warn(
|
||||
"[DailyNotificationSection] Permissions already denied, directing user to settings",
|
||||
);
|
||||
this.notify.error(
|
||||
"Notification permissions were denied. Tap 'Open Settings' to enable them.",
|
||||
TIMEOUTS.LONG,
|
||||
);
|
||||
this.nativeNotificationEnabled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Only request if permissions are in "prompt" state (not denied, not granted)
|
||||
// This ensures we only call requestPermissions when Android will actually show a dialog
|
||||
if (permissions.notifications === "prompt") {
|
||||
logger.info(
|
||||
"[DailyNotificationSection] Permission state is 'prompt', requesting permissions...",
|
||||
);
|
||||
try {
|
||||
const result = await platformService.requestNotificationPermissions();
|
||||
logger.info(
|
||||
`[DailyNotificationSection] Permission request result:`,
|
||||
result,
|
||||
);
|
||||
if (result === null) {
|
||||
// Plugin unavailable or request failed
|
||||
logger.error(
|
||||
"[DailyNotificationSection] Permission request returned null",
|
||||
);
|
||||
this.notify.error(
|
||||
"Unable to request notification permissions. The plugin may not be available.",
|
||||
TIMEOUTS.LONG,
|
||||
);
|
||||
this.nativeNotificationEnabled = false;
|
||||
return;
|
||||
}
|
||||
if (!result.notifications) {
|
||||
// Permission request was denied
|
||||
logger.warn(
|
||||
"[DailyNotificationSection] Permission request denied by user",
|
||||
);
|
||||
this.notify.error(
|
||||
"Notification permissions are required. Tap 'Open Settings' to enable them.",
|
||||
TIMEOUTS.LONG,
|
||||
);
|
||||
this.nativeNotificationEnabled = false;
|
||||
return;
|
||||
}
|
||||
// Permissions granted - continue
|
||||
logger.info(
|
||||
"[DailyNotificationSection] Permissions granted successfully",
|
||||
);
|
||||
} catch (error) {
|
||||
// Handle permission request errors (including plugin crashes)
|
||||
logger.error(
|
||||
"[DailyNotificationSection] Permission request failed:",
|
||||
error,
|
||||
);
|
||||
this.notify.error(
|
||||
"Unable to request notification permissions. Tap 'Open Settings' to enable them.",
|
||||
TIMEOUTS.LONG,
|
||||
);
|
||||
this.nativeNotificationEnabled = false;
|
||||
return;
|
||||
}
|
||||
} else if (permissions.notifications !== "granted") {
|
||||
// Unexpected state - shouldn't happen, but handle gracefully
|
||||
logger.warn(
|
||||
`[DailyNotificationSection] Unexpected permission state: ${permissions.notifications}`,
|
||||
);
|
||||
this.notify.error(
|
||||
"Unable to determine notification permission status. Tap 'Open Settings' to check.",
|
||||
TIMEOUTS.LONG,
|
||||
);
|
||||
this.nativeNotificationEnabled = false;
|
||||
return;
|
||||
} else {
|
||||
logger.info("[DailyNotificationSection] Permissions already granted");
|
||||
}
|
||||
|
||||
// Permissions are granted - continue with scheduling
|
||||
|
||||
// Schedule notification via PlatformService
|
||||
await platformService.scheduleDailyNotification({
|
||||
time: this.nativeNotificationTimeStorage, // "09:00" in local time
|
||||
title: this.nativeNotificationTitle,
|
||||
body: this.nativeNotificationMessage,
|
||||
sound: true,
|
||||
priority: "high",
|
||||
});
|
||||
|
||||
// Update UI state
|
||||
this.nativeNotificationEnabled = true;
|
||||
|
||||
// Refresh native fetcher configuration with fresh token
|
||||
// This ensures plugin has valid authentication when notifications are first enabled
|
||||
// Token will be valid for 72 hours, supporting offline prefetch operations
|
||||
await this.refreshNativeFetcherConfig();
|
||||
|
||||
this.notify.success(
|
||||
"Daily notification scheduled successfully",
|
||||
TIMEOUTS.SHORT,
|
||||
);
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
"[DailyNotificationSection] Failed to enable notification:",
|
||||
error,
|
||||
);
|
||||
this.notify.error(
|
||||
"Failed to schedule notification. Please try again.",
|
||||
TIMEOUTS.LONG,
|
||||
);
|
||||
this.nativeNotificationEnabled = false;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Disable daily notification
|
||||
*/
|
||||
async disableNativeNotification(): Promise<void> {
|
||||
try {
|
||||
this.loading = true;
|
||||
const platformService = PlatformServiceFactory.getInstance();
|
||||
|
||||
// Cancel notification via PlatformService
|
||||
await platformService.cancelDailyNotification();
|
||||
|
||||
// Update UI state
|
||||
this.nativeNotificationEnabled = false;
|
||||
this.nativeNotificationTime = "";
|
||||
this.nativeNotificationTimeStorage = "";
|
||||
this.showTimeEdit = false;
|
||||
|
||||
this.notify.success("Daily notification disabled", TIMEOUTS.SHORT);
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
"[DailyNotificationSection] Failed to disable notification:",
|
||||
error,
|
||||
);
|
||||
this.notify.error(
|
||||
"Failed to disable notification. Please try again.",
|
||||
TIMEOUTS.LONG,
|
||||
);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show/hide time edit input
|
||||
*/
|
||||
editNativeNotificationTime(): void {
|
||||
this.showTimeEdit = !this.showTimeEdit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle time input change
|
||||
*/
|
||||
onTimeChange(): void {
|
||||
// Time is already in nativeNotificationTimeStorage via v-model
|
||||
// Just update display format
|
||||
if (this.nativeNotificationTimeStorage) {
|
||||
this.nativeNotificationTime = formatTimeForDisplay(
|
||||
this.nativeNotificationTimeStorage,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Save time change and update notification schedule
|
||||
*/
|
||||
async saveTimeChange(): Promise<void> {
|
||||
if (!this.nativeNotificationTimeStorage) {
|
||||
this.notify.error("Please select a time", TIMEOUTS.SHORT);
|
||||
return;
|
||||
}
|
||||
|
||||
// Update display format
|
||||
this.nativeNotificationTime = formatTimeForDisplay(
|
||||
this.nativeNotificationTimeStorage,
|
||||
);
|
||||
|
||||
// If notification is enabled, update the schedule
|
||||
if (this.nativeNotificationEnabled) {
|
||||
await this.updateNotificationTime(this.nativeNotificationTimeStorage);
|
||||
} else {
|
||||
// Just update local state (time preference stored in component)
|
||||
this.showTimeEdit = false;
|
||||
this.notify.success("Notification time saved", TIMEOUTS.SHORT);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update notification time
|
||||
* If notification is enabled, immediately updates the schedule
|
||||
*/
|
||||
async updateNotificationTime(newTime: string): Promise<void> {
|
||||
// newTime is in "HH:mm" format from HTML5 time input
|
||||
if (!this.nativeNotificationEnabled) {
|
||||
// If notification is disabled, just update local state
|
||||
this.nativeNotificationTimeStorage = newTime;
|
||||
this.nativeNotificationTime = formatTimeForDisplay(newTime);
|
||||
this.showTimeEdit = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Notification is enabled - update the schedule
|
||||
try {
|
||||
this.loading = true;
|
||||
const platformService = PlatformServiceFactory.getInstance();
|
||||
|
||||
// 1. Cancel existing notification
|
||||
await platformService.cancelDailyNotification();
|
||||
|
||||
// 2. Schedule with new time
|
||||
await platformService.scheduleDailyNotification({
|
||||
time: newTime, // "09:00" in local time
|
||||
title: this.nativeNotificationTitle,
|
||||
body: this.nativeNotificationMessage,
|
||||
sound: true,
|
||||
priority: "high",
|
||||
});
|
||||
|
||||
// 3. Update local state
|
||||
this.nativeNotificationTimeStorage = newTime;
|
||||
this.nativeNotificationTime = formatTimeForDisplay(newTime);
|
||||
|
||||
this.notify.success(
|
||||
"Notification time updated successfully",
|
||||
TIMEOUTS.SHORT,
|
||||
);
|
||||
this.showTimeEdit = false;
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
"[DailyNotificationSection] Failed to update notification time:",
|
||||
error,
|
||||
);
|
||||
this.notify.error(
|
||||
"Failed to update notification time. Please try again.",
|
||||
TIMEOUTS.LONG,
|
||||
);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show info dialog about native notifications
|
||||
*/
|
||||
showNativeNotificationInfo(): void {
|
||||
// TODO: Implement info dialog or navigate to help page
|
||||
this.notify.info(
|
||||
"Daily notifications use your device's native notification system. They work even when the app is closed.",
|
||||
TIMEOUTS.STANDARD,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Open app notification settings
|
||||
*/
|
||||
async openNotificationSettings(): Promise<void> {
|
||||
try {
|
||||
const platformService = PlatformServiceFactory.getInstance();
|
||||
const result = await platformService.openAppNotificationSettings();
|
||||
if (result === null) {
|
||||
this.notify.error(
|
||||
"Unable to open settings. Please go to Settings > Apps > TimeSafari > Notifications manually.",
|
||||
TIMEOUTS.LONG,
|
||||
);
|
||||
} else {
|
||||
this.notify.success("Opening notification settings...", TIMEOUTS.SHORT);
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
"[DailyNotificationSection] Failed to open notification settings:",
|
||||
error,
|
||||
);
|
||||
this.notify.error(
|
||||
"Unable to open settings. Please go to Settings > Apps > TimeSafari > Notifications manually.",
|
||||
TIMEOUTS.LONG,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dot {
|
||||
transition: left 0.2s ease;
|
||||
}
|
||||
</style>
|
||||
@@ -104,71 +104,6 @@ export const accessToken = async (did?: string) => {
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Generate a longer-lived access token for background operations
|
||||
*
|
||||
* This function creates JWT tokens with extended validity (default 72 hours) for use
|
||||
* in background prefetch operations. The longer expiration period allows the daily
|
||||
* notification plugin to work offline for extended periods without requiring the app
|
||||
* to be in the foreground to refresh tokens.
|
||||
*
|
||||
* **Token Refresh Strategy (Hybrid Approach):**
|
||||
* - Tokens are valid for 72 hours (configurable)
|
||||
* - Tokens are refreshed proactively when:
|
||||
* - App comes to foreground (via Capacitor 'resume' event)
|
||||
* - Component mounts (DailyNotificationSection)
|
||||
* - Notifications are enabled
|
||||
* - If token expires while offline, plugin uses cached content
|
||||
* - Next time app opens, token is automatically refreshed
|
||||
*
|
||||
* **Why 72 Hours?**
|
||||
* - Balances security (read-only prefetch operations) with offline capability
|
||||
* - Reduces need for app to wake itself for token refresh
|
||||
* - Allows plugin to work offline for extended periods (e.g., weekend trips)
|
||||
* - Longer than typical prefetch windows (5 minutes before notification)
|
||||
*
|
||||
* **Security Considerations:**
|
||||
* - Tokens are used only for read-only prefetch operations
|
||||
* - Tokens are stored securely in plugin's Room database
|
||||
* - Tokens are refreshed proactively to minimize exposure window
|
||||
* - No private keys are exposed to native code
|
||||
*
|
||||
* @param {string} did - User DID (Decentralized Identifier) for token issuer
|
||||
* @param {number} expirationMinutes - Optional expiration in minutes (defaults to 72 hours = 4320 minutes)
|
||||
* @return {Promise<string>} JWT token with extended validity, or empty string if no DID provided
|
||||
*
|
||||
* @example
|
||||
* ```typescript
|
||||
* // Generate token with default 72-hour expiration
|
||||
* const token = await accessTokenForBackground("did:ethr:0x...");
|
||||
*
|
||||
* // Generate token with custom expiration (24 hours)
|
||||
* const token24h = await accessTokenForBackground("did:ethr:0x...", 24 * 60);
|
||||
* ```
|
||||
*
|
||||
* @see {@link accessToken} For short-lived tokens (1 minute) for regular API requests
|
||||
* @see {@link createEndorserJwtForDid} For JWT creation implementation
|
||||
*/
|
||||
export const accessTokenForBackground = async (
|
||||
did?: string,
|
||||
expirationMinutes?: number,
|
||||
): Promise<string> => {
|
||||
if (!did) {
|
||||
return "";
|
||||
}
|
||||
|
||||
// Use provided expiration or default to 72 hours (4320 minutes)
|
||||
// This allows background prefetch operations to work offline for extended periods
|
||||
const expirationSeconds = expirationMinutes
|
||||
? expirationMinutes * 60
|
||||
: 72 * 60 * 60; // Default 72 hours
|
||||
|
||||
const nowEpoch = Math.floor(Date.now() / 1000);
|
||||
const endEpoch = nowEpoch + expirationSeconds;
|
||||
const tokenPayload = { exp: endEpoch, iat: nowEpoch, iss: did };
|
||||
return createEndorserJwtForDid(did, tokenPayload);
|
||||
};
|
||||
|
||||
/**
|
||||
* Extract JWT from various URL formats
|
||||
* @param jwtUrlText The URL containing the JWT
|
||||
|
||||
@@ -32,68 +32,6 @@ export interface PlatformCapabilities {
|
||||
isNativeApp: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Permission status for notifications
|
||||
*/
|
||||
export interface PermissionStatus {
|
||||
/** Notification permission status */
|
||||
notifications: "granted" | "denied" | "prompt";
|
||||
/** Exact alarms permission status (Android only) */
|
||||
exactAlarms?: "granted" | "denied" | "prompt";
|
||||
}
|
||||
|
||||
/**
|
||||
* Result of permission request
|
||||
*/
|
||||
export interface PermissionResult {
|
||||
/** Whether notification permission was granted */
|
||||
notifications: boolean;
|
||||
/** Whether exact alarms permission was granted (Android only) */
|
||||
exactAlarms?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Status of scheduled daily notifications
|
||||
*/
|
||||
export interface NotificationStatus {
|
||||
/** Whether a notification is currently scheduled */
|
||||
isScheduled: boolean;
|
||||
/** Scheduled time in "HH:mm" format (24-hour) */
|
||||
scheduledTime?: string;
|
||||
/** Last time the notification was triggered (ISO string) */
|
||||
lastTriggered?: string;
|
||||
/** Current permission status */
|
||||
permissions: PermissionStatus;
|
||||
}
|
||||
|
||||
/**
|
||||
* Options for scheduling a daily notification
|
||||
*/
|
||||
export interface ScheduleOptions {
|
||||
/** Time in "HH:mm" format (24-hour) in local time */
|
||||
time: string;
|
||||
/** Notification title */
|
||||
title: string;
|
||||
/** Notification body text */
|
||||
body: string;
|
||||
/** Whether to play sound (default: true) */
|
||||
sound?: boolean;
|
||||
/** Notification priority */
|
||||
priority?: "high" | "normal" | "low";
|
||||
}
|
||||
|
||||
/**
|
||||
* Configuration for native fetcher background operations
|
||||
*/
|
||||
export interface NativeFetcherConfig {
|
||||
/** API server URL */
|
||||
apiServer: string;
|
||||
/** JWT token for authentication */
|
||||
jwt: string;
|
||||
/** Array of starred plan handle IDs */
|
||||
starredPlanHandleIds: string[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Platform-agnostic interface for handling platform-specific operations.
|
||||
* Provides a common API for file system operations, camera interactions,
|
||||
@@ -271,58 +209,6 @@ export interface PlatformService {
|
||||
*/
|
||||
retrieveSettingsForActiveAccount(): Promise<Record<string, unknown> | null>;
|
||||
|
||||
// Daily notification operations
|
||||
/**
|
||||
* Get the status of scheduled daily notifications
|
||||
* @returns Promise resolving to notification status, or null if not supported
|
||||
*/
|
||||
getDailyNotificationStatus(): Promise<NotificationStatus | null>;
|
||||
|
||||
/**
|
||||
* Check notification permissions
|
||||
* @returns Promise resolving to permission status, or null if not supported
|
||||
*/
|
||||
checkNotificationPermissions(): Promise<PermissionStatus | null>;
|
||||
|
||||
/**
|
||||
* Request notification permissions
|
||||
* @returns Promise resolving to permission result, or null if not supported
|
||||
*/
|
||||
requestNotificationPermissions(): Promise<PermissionResult | null>;
|
||||
|
||||
/**
|
||||
* Schedule a daily notification
|
||||
* @param options - Notification scheduling options
|
||||
* @returns Promise that resolves when scheduled, or rejects if not supported
|
||||
*/
|
||||
scheduleDailyNotification(options: ScheduleOptions): Promise<void>;
|
||||
|
||||
/**
|
||||
* Cancel scheduled daily notification
|
||||
* @returns Promise that resolves when cancelled, or rejects if not supported
|
||||
*/
|
||||
cancelDailyNotification(): Promise<void>;
|
||||
|
||||
/**
|
||||
* Configure native fetcher for background operations
|
||||
* @param config - Native fetcher configuration
|
||||
* @returns Promise that resolves when configured, or null if not supported
|
||||
*/
|
||||
configureNativeFetcher(config: NativeFetcherConfig): Promise<void | null>;
|
||||
|
||||
/**
|
||||
* Update starred plans for background fetcher
|
||||
* @param plans - Starred plan IDs
|
||||
* @returns Promise that resolves when updated, or null if not supported
|
||||
*/
|
||||
updateStarredPlans(plans: { planIds: string[] }): Promise<void | null>;
|
||||
|
||||
/**
|
||||
* Open the app's notification settings in the system settings
|
||||
* @returns Promise that resolves when the settings page is opened, or null if not supported
|
||||
*/
|
||||
openAppNotificationSettings(): Promise<void | null>;
|
||||
|
||||
// --- PWA/Web-only methods (optional, only implemented on web) ---
|
||||
/**
|
||||
* Registers the service worker for PWA support (web only)
|
||||
|
||||
@@ -20,11 +20,6 @@ import {
|
||||
ImageResult,
|
||||
PlatformService,
|
||||
PlatformCapabilities,
|
||||
NotificationStatus,
|
||||
PermissionStatus,
|
||||
PermissionResult,
|
||||
ScheduleOptions,
|
||||
NativeFetcherConfig,
|
||||
} from "../PlatformService";
|
||||
import { logger } from "../../utils/logger";
|
||||
import { BaseDatabaseService } from "./BaseDatabaseService";
|
||||
@@ -1338,445 +1333,6 @@ export class CapacitorPlatformService
|
||||
// --- PWA/Web-only methods (no-op for Capacitor) ---
|
||||
public registerServiceWorker(): void {}
|
||||
|
||||
// Daily notification operations
|
||||
/**
|
||||
* Get the status of scheduled daily notifications
|
||||
* @see PlatformService.getDailyNotificationStatus
|
||||
*/
|
||||
async getDailyNotificationStatus(): Promise<NotificationStatus | null> {
|
||||
try {
|
||||
// Dynamic import to avoid build issues if plugin unavailable
|
||||
const { DailyNotification } = await import(
|
||||
"@timesafari/daily-notification-plugin"
|
||||
);
|
||||
|
||||
const pluginStatus = await DailyNotification.getNotificationStatus();
|
||||
|
||||
// Get permissions separately
|
||||
const permissions = await DailyNotification.checkPermissions();
|
||||
|
||||
// Map plugin PermissionState to our PermissionStatus format
|
||||
const notificationsPermission = permissions.notifications;
|
||||
let notifications: "granted" | "denied" | "prompt";
|
||||
|
||||
if (notificationsPermission === "granted") {
|
||||
notifications = "granted";
|
||||
} else if (notificationsPermission === "denied") {
|
||||
notifications = "denied";
|
||||
} else {
|
||||
notifications = "prompt";
|
||||
}
|
||||
|
||||
// Handle lastNotificationTime which can be a Promise<number>
|
||||
let lastTriggered: string | undefined;
|
||||
const lastNotificationTime = pluginStatus.lastNotificationTime;
|
||||
if (lastNotificationTime) {
|
||||
const timeValue = await Promise.resolve(lastNotificationTime);
|
||||
if (typeof timeValue === "number") {
|
||||
lastTriggered = new Date(timeValue).toISOString();
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
isScheduled: pluginStatus.isScheduled ?? false,
|
||||
scheduledTime: pluginStatus.settings?.time,
|
||||
lastTriggered,
|
||||
permissions: {
|
||||
notifications,
|
||||
exactAlarms: undefined, // Plugin doesn't expose this in status
|
||||
},
|
||||
};
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
"[CapacitorPlatformService] Failed to get notification status:",
|
||||
error,
|
||||
);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check notification permissions
|
||||
* @see PlatformService.checkNotificationPermissions
|
||||
*/
|
||||
async checkNotificationPermissions(): Promise<PermissionStatus | null> {
|
||||
try {
|
||||
const { DailyNotification } = await import(
|
||||
"@timesafari/daily-notification-plugin"
|
||||
);
|
||||
|
||||
const permissions = await DailyNotification.checkPermissions();
|
||||
|
||||
// Log the raw permission state for debugging
|
||||
logger.info(
|
||||
`[CapacitorPlatformService] Raw permission state from plugin:`,
|
||||
permissions,
|
||||
);
|
||||
|
||||
// Map plugin PermissionState to our PermissionStatus format
|
||||
const notificationsPermission = permissions.notifications;
|
||||
let notifications: "granted" | "denied" | "prompt";
|
||||
|
||||
// Handle all possible PermissionState values
|
||||
if (notificationsPermission === "granted") {
|
||||
notifications = "granted";
|
||||
} else if (
|
||||
notificationsPermission === "denied" ||
|
||||
notificationsPermission === "ephemeral"
|
||||
) {
|
||||
notifications = "denied";
|
||||
} else {
|
||||
// Treat "prompt", "prompt-with-rationale", "unknown", "provisional" as "prompt"
|
||||
// This allows Android to show the permission dialog
|
||||
notifications = "prompt";
|
||||
}
|
||||
|
||||
logger.info(
|
||||
`[CapacitorPlatformService] Mapped permission state: ${notifications} (from ${notificationsPermission})`,
|
||||
);
|
||||
|
||||
return {
|
||||
notifications,
|
||||
exactAlarms: undefined, // Plugin doesn't expose this directly
|
||||
};
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
"[CapacitorPlatformService] Failed to check permissions:",
|
||||
error,
|
||||
);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Request notification permissions
|
||||
* @see PlatformService.requestNotificationPermissions
|
||||
*/
|
||||
async requestNotificationPermissions(): Promise<PermissionResult | null> {
|
||||
try {
|
||||
const { DailyNotification } = await import(
|
||||
"@timesafari/daily-notification-plugin"
|
||||
);
|
||||
|
||||
logger.info(
|
||||
`[CapacitorPlatformService] Requesting notification permissions...`,
|
||||
);
|
||||
|
||||
const result = await DailyNotification.requestPermissions();
|
||||
|
||||
logger.info(
|
||||
`[CapacitorPlatformService] Permission request result:`,
|
||||
result,
|
||||
);
|
||||
|
||||
// Map plugin PermissionState to boolean
|
||||
const notificationsGranted = result.notifications === "granted";
|
||||
|
||||
logger.info(
|
||||
`[CapacitorPlatformService] Mapped permission result: ${notificationsGranted} (from ${result.notifications})`,
|
||||
);
|
||||
|
||||
return {
|
||||
notifications: notificationsGranted,
|
||||
exactAlarms: undefined, // Plugin doesn't expose this directly
|
||||
};
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
"[CapacitorPlatformService] Failed to request permissions:",
|
||||
error,
|
||||
);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Schedule a daily notification
|
||||
* @see PlatformService.scheduleDailyNotification
|
||||
*/
|
||||
async scheduleDailyNotification(options: ScheduleOptions): Promise<void> {
|
||||
try {
|
||||
const { DailyNotification } = await import(
|
||||
"@timesafari/daily-notification-plugin"
|
||||
);
|
||||
|
||||
await DailyNotification.scheduleDailyNotification({
|
||||
time: options.time,
|
||||
title: options.title,
|
||||
body: options.body,
|
||||
sound: options.sound ?? true,
|
||||
priority: options.priority ?? "high",
|
||||
});
|
||||
|
||||
logger.info(
|
||||
`[CapacitorPlatformService] Scheduled daily notification for ${options.time}`,
|
||||
);
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
"[CapacitorPlatformService] Failed to schedule notification:",
|
||||
error,
|
||||
);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Cancel scheduled daily notification
|
||||
* @see PlatformService.cancelDailyNotification
|
||||
*/
|
||||
async cancelDailyNotification(): Promise<void> {
|
||||
try {
|
||||
const { DailyNotification } = await import(
|
||||
"@timesafari/daily-notification-plugin"
|
||||
);
|
||||
|
||||
await DailyNotification.cancelAllNotifications();
|
||||
|
||||
logger.info("[CapacitorPlatformService] Cancelled daily notification");
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
"[CapacitorPlatformService] Failed to cancel notification:",
|
||||
error,
|
||||
);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Configure native fetcher for background operations
|
||||
*
|
||||
* This method configures the daily notification plugin's native content fetcher
|
||||
* with authentication credentials for background prefetch operations. It automatically
|
||||
* retrieves the active DID from the database and generates a fresh JWT token with
|
||||
* 72-hour expiration.
|
||||
*
|
||||
* **Authentication Flow:**
|
||||
* 1. Retrieves active DID from `active_identity` table (single source of truth)
|
||||
* 2. Generates JWT token with 72-hour expiration using `accessTokenForBackground()`
|
||||
* 3. Configures plugin with API server URL, active DID, and JWT token
|
||||
* 4. Plugin stores token in its Room database for background workers
|
||||
*
|
||||
* **Token Management:**
|
||||
* - Tokens are valid for 72 hours (4320 minutes)
|
||||
* - Tokens are refreshed proactively when app comes to foreground
|
||||
* - If token expires while offline, plugin uses cached content
|
||||
* - Token refresh happens automatically via `DailyNotificationSection.refreshNativeFetcherConfig()`
|
||||
*
|
||||
* **Offline-First Design:**
|
||||
* - 72-hour validity supports extended offline periods
|
||||
* - Plugin can prefetch content when online and use cached content when offline
|
||||
* - No app wake-up required for token refresh (happens when app is already open)
|
||||
*
|
||||
* **Error Handling:**
|
||||
* - Returns `null` if active DID not found (no user logged in)
|
||||
* - Returns `null` if JWT generation fails
|
||||
* - Logs errors but doesn't throw (allows graceful degradation)
|
||||
*
|
||||
* @param config - Native fetcher configuration
|
||||
* @param config.apiServer - API server URL (optional, uses default if not provided)
|
||||
* @param config.jwt - JWT token (ignored, generated automatically)
|
||||
* @param config.starredPlanHandleIds - Array of starred plan handle IDs for prefetch
|
||||
* @returns Promise that resolves when configured, or `null` if configuration failed
|
||||
*
|
||||
* @example
|
||||
* ```typescript
|
||||
* await platformService.configureNativeFetcher({
|
||||
* apiServer: "https://api.endorser.ch",
|
||||
* jwt: "", // Generated automatically
|
||||
* starredPlanHandleIds: ["plan-123", "plan-456"]
|
||||
* });
|
||||
* ```
|
||||
*
|
||||
* @see {@link accessTokenForBackground} For JWT token generation
|
||||
* @see {@link DailyNotificationSection.refreshNativeFetcherConfig} For proactive token refresh
|
||||
* @see PlatformService.configureNativeFetcher
|
||||
*/
|
||||
async configureNativeFetcher(
|
||||
config: NativeFetcherConfig,
|
||||
): Promise<void | null> {
|
||||
try {
|
||||
const { DailyNotification } = await import(
|
||||
"@timesafari/daily-notification-plugin"
|
||||
);
|
||||
|
||||
// Step 1: Get activeDid from database (single source of truth)
|
||||
// This ensures we're using the correct user identity for authentication
|
||||
const activeIdentity = await this.getActiveIdentity();
|
||||
const activeDid = activeIdentity.activeDid;
|
||||
|
||||
if (!activeDid) {
|
||||
logger.warn(
|
||||
"[CapacitorPlatformService] No activeDid found, cannot configure native fetcher",
|
||||
);
|
||||
return null;
|
||||
}
|
||||
|
||||
// Step 2: Generate JWT token for background operations
|
||||
// Use 72-hour expiration for offline-first prefetch operations
|
||||
// This allows the plugin to work offline for extended periods
|
||||
const { accessTokenForBackground } = await import(
|
||||
"../../libs/crypto/index"
|
||||
);
|
||||
// Use 72 hours (4320 minutes) for background prefetch tokens
|
||||
// This is longer than passkey expiration to support offline scenarios
|
||||
const expirationMinutes = 72 * 60; // 72 hours
|
||||
const jwtToken = await accessTokenForBackground(
|
||||
activeDid,
|
||||
expirationMinutes,
|
||||
);
|
||||
|
||||
if (!jwtToken) {
|
||||
logger.error("[CapacitorPlatformService] Failed to generate JWT token");
|
||||
return null;
|
||||
}
|
||||
|
||||
// Step 3: Get API server from config or use default
|
||||
// This ensures the plugin knows where to fetch content from
|
||||
const apiServer =
|
||||
config.apiServer ||
|
||||
(await import("../../constants/app")).DEFAULT_ENDORSER_API_SERVER;
|
||||
|
||||
// Step 4: Configure plugin with credentials
|
||||
// Plugin stores these in its Room database for background workers
|
||||
await DailyNotification.configureNativeFetcher({
|
||||
apiBaseUrl: apiServer,
|
||||
activeDid,
|
||||
jwtToken,
|
||||
});
|
||||
|
||||
logger.info("[CapacitorPlatformService] Configured native fetcher", {
|
||||
activeDid,
|
||||
apiServer,
|
||||
tokenExpirationHours: 72,
|
||||
tokenExpirationMinutes: expirationMinutes,
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
"[CapacitorPlatformService] Failed to configure native fetcher:",
|
||||
error,
|
||||
);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update starred plans for background fetcher
|
||||
* @see PlatformService.updateStarredPlans
|
||||
*/
|
||||
async updateStarredPlans(plans: { planIds: string[] }): Promise<void | null> {
|
||||
try {
|
||||
const { DailyNotification } = await import(
|
||||
"@timesafari/daily-notification-plugin"
|
||||
);
|
||||
|
||||
await DailyNotification.updateStarredPlans({
|
||||
planIds: plans.planIds,
|
||||
});
|
||||
|
||||
logger.info(
|
||||
`[CapacitorPlatformService] Updated starred plans: ${plans.planIds.length} plans`,
|
||||
);
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
"[CapacitorPlatformService] Failed to update starred plans:",
|
||||
error,
|
||||
);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the app's notification settings in the system settings
|
||||
* @see PlatformService.openAppNotificationSettings
|
||||
*/
|
||||
async openAppNotificationSettings(): Promise<void | null> {
|
||||
try {
|
||||
const platform = Capacitor.getPlatform();
|
||||
|
||||
if (platform === "android") {
|
||||
// Android: Open app details settings page
|
||||
// From there, users can navigate to "Notifications" section
|
||||
// This is more reliable than trying to open notification settings directly
|
||||
const packageName = "app.timesafari.app"; // Full application ID from build.gradle
|
||||
|
||||
// Use APPLICATION_DETAILS_SETTINGS which opens the app's settings page
|
||||
// Users can then navigate to "Notifications" section
|
||||
// Try multiple URL formats to ensure compatibility
|
||||
const intentUrl1 = `intent:#Intent;action=android.settings.APPLICATION_DETAILS_SETTINGS;data=package:${packageName};end`;
|
||||
const intentUrl2 = `intent://settings/app_detail?package=${packageName}#Intent;scheme=android-app;end`;
|
||||
|
||||
logger.info(
|
||||
`[CapacitorPlatformService] Opening Android app settings for ${packageName}`,
|
||||
);
|
||||
|
||||
// Log current permission state before opening settings
|
||||
try {
|
||||
const currentPerms = await this.checkNotificationPermissions();
|
||||
logger.info(
|
||||
`[CapacitorPlatformService] Current permission state before opening settings:`,
|
||||
currentPerms,
|
||||
);
|
||||
} catch (e) {
|
||||
logger.warn(
|
||||
`[CapacitorPlatformService] Could not check permissions before opening settings:`,
|
||||
e,
|
||||
);
|
||||
}
|
||||
|
||||
// Try multiple approaches to ensure it works
|
||||
try {
|
||||
// Method 1: Direct window.location.href (most reliable)
|
||||
window.location.href = intentUrl1;
|
||||
|
||||
// Method 2: Fallback with window.open
|
||||
setTimeout(() => {
|
||||
try {
|
||||
window.open(intentUrl1, "_blank");
|
||||
} catch (e) {
|
||||
logger.warn(
|
||||
"[CapacitorPlatformService] window.open fallback failed:",
|
||||
e,
|
||||
);
|
||||
}
|
||||
}, 100);
|
||||
|
||||
// Method 3: Alternative format
|
||||
setTimeout(() => {
|
||||
try {
|
||||
window.location.href = intentUrl2;
|
||||
} catch (e) {
|
||||
logger.warn(
|
||||
"[CapacitorPlatformService] Alternative format failed:",
|
||||
e,
|
||||
);
|
||||
}
|
||||
}, 200);
|
||||
} catch (e) {
|
||||
logger.error(
|
||||
"[CapacitorPlatformService] Failed to open intent URL:",
|
||||
e,
|
||||
);
|
||||
}
|
||||
} else if (platform === "ios") {
|
||||
// iOS: Use app settings URL scheme
|
||||
const settingsUrl = `app-settings:`;
|
||||
window.location.href = settingsUrl;
|
||||
|
||||
logger.info("[CapacitorPlatformService] Opening iOS app settings");
|
||||
} else {
|
||||
logger.warn(
|
||||
`[CapacitorPlatformService] Cannot open settings on platform: ${platform}`,
|
||||
);
|
||||
return null;
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
"[CapacitorPlatformService] Failed to open app notification settings:",
|
||||
error,
|
||||
);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// Database utility methods - inherited from BaseDatabaseService
|
||||
// generateInsertStatement, updateDefaultSettings, updateActiveDid,
|
||||
// getActiveIdentity, insertNewDidIntoSettings, updateDidSpecificSettings,
|
||||
|
||||
@@ -22,13 +22,6 @@
|
||||
|
||||
import { CapacitorPlatformService } from "./CapacitorPlatformService";
|
||||
import { logger } from "../../utils/logger";
|
||||
import {
|
||||
NotificationStatus,
|
||||
PermissionStatus,
|
||||
PermissionResult,
|
||||
ScheduleOptions,
|
||||
NativeFetcherConfig,
|
||||
} from "../PlatformService";
|
||||
|
||||
/**
|
||||
* Electron-specific platform service implementation.
|
||||
@@ -173,88 +166,4 @@ export class ElectronPlatformService extends CapacitorPlatformService {
|
||||
|
||||
// --- PWA/Web-only methods (no-op for Electron) ---
|
||||
public registerServiceWorker(): void {}
|
||||
|
||||
// Daily notification operations
|
||||
// Override CapacitorPlatformService methods to return null/throw errors
|
||||
// since Electron doesn't support native daily notifications
|
||||
|
||||
/**
|
||||
* Get the status of scheduled daily notifications
|
||||
* @see PlatformService.getDailyNotificationStatus
|
||||
* @returns null - notifications not supported on Electron platform
|
||||
*/
|
||||
async getDailyNotificationStatus(): Promise<NotificationStatus | null> {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check notification permissions
|
||||
* @see PlatformService.checkNotificationPermissions
|
||||
* @returns null - notifications not supported on Electron platform
|
||||
*/
|
||||
async checkNotificationPermissions(): Promise<PermissionStatus | null> {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Request notification permissions
|
||||
* @see PlatformService.requestNotificationPermissions
|
||||
* @returns null - notifications not supported on Electron platform
|
||||
*/
|
||||
async requestNotificationPermissions(): Promise<PermissionResult | null> {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Schedule a daily notification
|
||||
* @see PlatformService.scheduleDailyNotification
|
||||
* @throws Error - notifications not supported on Electron platform
|
||||
*/
|
||||
async scheduleDailyNotification(_options: ScheduleOptions): Promise<void> {
|
||||
throw new Error(
|
||||
"Daily notifications are not supported on Electron platform",
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Cancel scheduled daily notification
|
||||
* @see PlatformService.cancelDailyNotification
|
||||
* @throws Error - notifications not supported on Electron platform
|
||||
*/
|
||||
async cancelDailyNotification(): Promise<void> {
|
||||
throw new Error(
|
||||
"Daily notifications are not supported on Electron platform",
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Configure native fetcher for background operations
|
||||
* @see PlatformService.configureNativeFetcher
|
||||
* @returns null - native fetcher not supported on Electron platform
|
||||
*/
|
||||
async configureNativeFetcher(
|
||||
_config: NativeFetcherConfig,
|
||||
): Promise<void | null> {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update starred plans for background fetcher
|
||||
* @see PlatformService.updateStarredPlans
|
||||
* @returns null - native fetcher not supported on Electron platform
|
||||
*/
|
||||
async updateStarredPlans(_plans: {
|
||||
planIds: string[];
|
||||
}): Promise<void | null> {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the app's notification settings in the system settings
|
||||
* @see PlatformService.openAppNotificationSettings
|
||||
* @returns null - not supported on Electron platform
|
||||
*/
|
||||
async openAppNotificationSettings(): Promise<void | null> {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,11 +2,6 @@ import {
|
||||
ImageResult,
|
||||
PlatformService,
|
||||
PlatformCapabilities,
|
||||
NotificationStatus,
|
||||
PermissionStatus,
|
||||
PermissionResult,
|
||||
ScheduleOptions,
|
||||
NativeFetcherConfig,
|
||||
} from "../PlatformService";
|
||||
import { logger } from "../../utils/logger";
|
||||
import { QueryExecResult } from "@/interfaces/database";
|
||||
@@ -682,81 +677,4 @@ export class WebPlatformService
|
||||
// generateInsertStatement, updateDefaultSettings, updateActiveDid,
|
||||
// getActiveIdentity, insertNewDidIntoSettings, updateDidSpecificSettings,
|
||||
// retrieveSettingsForActiveAccount are all inherited from BaseDatabaseService
|
||||
|
||||
// Daily notification operations
|
||||
/**
|
||||
* Get the status of scheduled daily notifications
|
||||
* @see PlatformService.getDailyNotificationStatus
|
||||
* @returns null - notifications not supported on web platform
|
||||
*/
|
||||
async getDailyNotificationStatus(): Promise<NotificationStatus | null> {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check notification permissions
|
||||
* @see PlatformService.checkNotificationPermissions
|
||||
* @returns null - notifications not supported on web platform
|
||||
*/
|
||||
async checkNotificationPermissions(): Promise<PermissionStatus | null> {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Request notification permissions
|
||||
* @see PlatformService.requestNotificationPermissions
|
||||
* @returns null - notifications not supported on web platform
|
||||
*/
|
||||
async requestNotificationPermissions(): Promise<PermissionResult | null> {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Schedule a daily notification
|
||||
* @see PlatformService.scheduleDailyNotification
|
||||
* @throws Error - notifications not supported on web platform
|
||||
*/
|
||||
async scheduleDailyNotification(_options: ScheduleOptions): Promise<void> {
|
||||
throw new Error("Daily notifications are not supported on web platform");
|
||||
}
|
||||
|
||||
/**
|
||||
* Cancel scheduled daily notification
|
||||
* @see PlatformService.cancelDailyNotification
|
||||
* @throws Error - notifications not supported on web platform
|
||||
*/
|
||||
async cancelDailyNotification(): Promise<void> {
|
||||
throw new Error("Daily notifications are not supported on web platform");
|
||||
}
|
||||
|
||||
/**
|
||||
* Configure native fetcher for background operations
|
||||
* @see PlatformService.configureNativeFetcher
|
||||
* @returns null - native fetcher not supported on web platform
|
||||
*/
|
||||
async configureNativeFetcher(
|
||||
_config: NativeFetcherConfig,
|
||||
): Promise<void | null> {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update starred plans for background fetcher
|
||||
* @see PlatformService.updateStarredPlans
|
||||
* @returns null - native fetcher not supported on web platform
|
||||
*/
|
||||
async updateStarredPlans(_plans: {
|
||||
planIds: string[];
|
||||
}): Promise<void | null> {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the app's notification settings in the system settings
|
||||
* @see PlatformService.openAppNotificationSettings
|
||||
* @returns null - not supported on web platform
|
||||
*/
|
||||
async openAppNotificationSettings(): Promise<void | null> {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,7 +19,6 @@
|
||||
<EntityGrid
|
||||
entity-type="people"
|
||||
:entities="people"
|
||||
:max-items="5"
|
||||
:active-did="activeDid"
|
||||
:all-my-dids="allMyDids"
|
||||
:all-contacts="people"
|
||||
@@ -39,7 +38,6 @@
|
||||
<EntityGrid
|
||||
entity-type="projects"
|
||||
:entities="projects"
|
||||
:max-items="3"
|
||||
:active-did="activeDid"
|
||||
:all-my-dids="allMyDids"
|
||||
:all-contacts="people"
|
||||
@@ -152,11 +150,8 @@ export default class EntityGridFunctionPropTest extends Vue {
|
||||
customPeopleFunction = (
|
||||
entities: Contact[],
|
||||
_entityType: string,
|
||||
maxItems: number,
|
||||
): Contact[] => {
|
||||
return entities
|
||||
.filter((person) => person.profileImageUrl)
|
||||
.slice(0, maxItems);
|
||||
return entities.filter((person) => person.profileImageUrl);
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -165,7 +160,6 @@ export default class EntityGridFunctionPropTest extends Vue {
|
||||
customProjectsFunction = (
|
||||
entities: PlanData[],
|
||||
_entityType: string,
|
||||
_maxItems: number,
|
||||
): PlanData[] => {
|
||||
return entities.sort((a, b) => a.name.localeCompare(b.name)).slice(0, 3);
|
||||
};
|
||||
@@ -200,16 +194,16 @@ export default class EntityGridFunctionPropTest extends Vue {
|
||||
*/
|
||||
get displayedPeopleCount(): number {
|
||||
if (this.useCustomFunction) {
|
||||
return this.customPeopleFunction(this.people, "people", 5).length;
|
||||
return this.customPeopleFunction(this.people, "people").length;
|
||||
}
|
||||
return Math.min(5, this.people.length);
|
||||
return Math.min(10, this.people.length); // Initial batch size for infinite scroll
|
||||
}
|
||||
|
||||
get displayedProjectsCount(): number {
|
||||
if (this.useCustomFunction) {
|
||||
return this.customProjectsFunction(this.projects, "projects", 3).length;
|
||||
return this.customProjectsFunction(this.projects, "projects").length;
|
||||
}
|
||||
return Math.min(7, this.projects.length);
|
||||
return Math.min(10, this.projects.length); // Initial batch size for infinite scroll
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -970,6 +970,20 @@ export const PlatformServiceMixin = {
|
||||
return this.$normalizeContacts(rawContacts);
|
||||
},
|
||||
|
||||
/**
|
||||
* Load all contacts sorted by when they were added (by ID)
|
||||
* Always fetches fresh data from database for consistency
|
||||
* Handles JSON string/object duality for contactMethods field
|
||||
* @returns Promise<Contact[]> Array of normalized contact objects sorted by addition date (newest first)
|
||||
*/
|
||||
async $contactsByDateAdded(): Promise<Contact[]> {
|
||||
const rawContacts = (await this.$query(
|
||||
"SELECT * FROM contacts ORDER BY id DESC",
|
||||
)) as ContactMaybeWithJsonStrings[];
|
||||
|
||||
return this.$normalizeContacts(rawContacts);
|
||||
},
|
||||
|
||||
/**
|
||||
* Ultra-concise shortcut for getting number of contacts
|
||||
* @returns Promise<number> Total number of contacts
|
||||
@@ -2057,6 +2071,7 @@ declare module "@vue/runtime-core" {
|
||||
|
||||
// Specialized shortcuts - contacts cached, settings fresh
|
||||
$contacts(): Promise<Contact[]>;
|
||||
$contactsByDateAdded(): Promise<Contact[]>;
|
||||
$contactCount(): Promise<number>;
|
||||
$settings(defaults?: Settings): Promise<Settings>;
|
||||
$accountSettings(did?: string, defaults?: Settings): Promise<Settings>;
|
||||
|
||||
@@ -161,9 +161,6 @@
|
||||
</section>
|
||||
<PushNotificationPermission ref="pushNotificationPermission" />
|
||||
|
||||
<!-- Daily Notifications (Native) -->
|
||||
<DailyNotificationSection />
|
||||
|
||||
<!-- User Profile -->
|
||||
<section
|
||||
v-if="isRegistered"
|
||||
@@ -793,7 +790,6 @@ import IdentitySection from "@/components/IdentitySection.vue";
|
||||
import RegistrationNotice from "@/components/RegistrationNotice.vue";
|
||||
import LocationSearchSection from "@/components/LocationSearchSection.vue";
|
||||
import UsageLimitsSection from "@/components/UsageLimitsSection.vue";
|
||||
import DailyNotificationSection from "@/components/notifications/DailyNotificationSection.vue";
|
||||
import {
|
||||
AppString,
|
||||
DEFAULT_IMAGE_API_SERVER,
|
||||
@@ -862,7 +858,6 @@ interface UserNameDialogRef {
|
||||
RegistrationNotice,
|
||||
LocationSearchSection,
|
||||
UsageLimitsSection,
|
||||
DailyNotificationSection,
|
||||
},
|
||||
mixins: [PlatformServiceMixin],
|
||||
})
|
||||
|
||||
@@ -1,23 +1,4 @@
|
||||
import { defineConfig } from "vite";
|
||||
import { createBuildConfig } from "./vite.config.common.mts";
|
||||
|
||||
export default defineConfig(async () => {
|
||||
const baseConfig = await createBuildConfig('capacitor');
|
||||
|
||||
return {
|
||||
...baseConfig,
|
||||
build: {
|
||||
...baseConfig.build,
|
||||
rollupOptions: {
|
||||
...baseConfig.build?.rollupOptions,
|
||||
// Externalize Capacitor plugins that are bundled natively
|
||||
external: [
|
||||
"@timesafari/daily-notification-plugin"
|
||||
],
|
||||
output: {
|
||||
...baseConfig.build?.rollupOptions?.output,
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
export default defineConfig(async () => createBuildConfig('capacitor'));
|
||||
Reference in New Issue
Block a user