Compare commits

..

1 Commits

Author SHA1 Message Date
Matthew Raymer
944f5bc224 fix(api): prevent duplicate feed and search requests
Add concurrency guards to prevent duplicate API requests when
methods are called multiple times before completion.

- HomeView.updateAllFeed(): guard against concurrent calls with
  retry count limit to prevent infinite recursion
- DiscoverView.searchAll(): guard initial searches while allowing
  concurrent pagination
- DiscoverView.searchStarred(): guard against concurrent calls

These changes prevent duplicate network requests while preserving
legitimate concurrent pagination behavior.
2025-10-29 11:37:09 +00:00
35 changed files with 798 additions and 1376 deletions

View File

@@ -9,10 +9,6 @@ echo "🔍 Running pre-commit hooks..."
# Run lint-fix first # Run lint-fix first
echo "📝 Running lint-fix..." echo "📝 Running lint-fix..."
# Capture git status before lint-fix to detect changes
git_status_before=$(git status --porcelain)
npm run lint-fix || { npm run lint-fix || {
echo echo
echo "❌ Linting failed. Please fix the issues and try again." echo "❌ Linting failed. Please fix the issues and try again."
@@ -22,36 +18,6 @@ npm run lint-fix || {
exit 1 exit 1
} }
# Check if lint-fix made any changes
git_status_after=$(git status --porcelain)
if [ "$git_status_before" != "$git_status_after" ]; then
echo
echo "⚠️ lint-fix made changes to your files!"
echo "📋 Changes detected:"
git diff --name-only
echo
echo "❓ What would you like to do?"
echo " [c] Continue commit without the new changes"
echo " [a] Abort commit (recommended - review and stage the changes)"
echo
printf "Choose [c/a]: "
# The `< /dev/tty` is necessary to make read work in git's non-interactive shell
read choice < /dev/tty
case $choice in
[Cc]* )
echo "✅ Continuing commit without lint-fix changes..."
sleep 3
;;
[Aa]* | * )
echo "🛑 Commit aborted. Please review the changes made by lint-fix."
echo "💡 You can stage the changes with 'git add .' and commit again."
exit 1
;;
esac
fi
# Then run Build Architecture Guard # Then run Build Architecture Guard
#echo "🏗️ Running Build Architecture Guard..." #echo "🏗️ Running Build Architecture Guard..."

View File

@@ -1158,10 +1158,10 @@ If you need to build manually or want to understand the individual steps:
export GEM_PATH=$shortened_path export GEM_PATH=$shortened_path
``` ```
##### 1. Bump the version in package.json for `MARKETING_VERSION`, then `grep CURRENT_PROJECT_VERSION ios/App/App.xcodeproj/project.pbxproj` and add 1 for the numbered version; ##### 1. Bump the version in package.json, then here
```bash ```bash
cd ios/App && xcrun agvtool new-version 46 && perl -p -i -e "s/MARKETING_VERSION = .*;/MARKETING_VERSION = 1.1.1;/g" App.xcodeproj/project.pbxproj && cd - cd ios/App && xcrun agvtool new-version 40 && perl -p -i -e "s/MARKETING_VERSION = .*;/MARKETING_VERSION = 1.0.7;/g" App.xcodeproj/project.pbxproj && cd -
# Unfortunately this edits Info.plist directly. # Unfortunately this edits Info.plist directly.
#xcrun agvtool new-marketing-version 0.4.5 #xcrun agvtool new-marketing-version 0.4.5
``` ```
@@ -1318,8 +1318,8 @@ The recommended way to build for Android is using the automated build script:
##### 1. Bump the version in package.json, then here: android/app/build.gradle ##### 1. Bump the version in package.json, then here: android/app/build.gradle
```bash ```bash
perl -p -i -e 's/versionCode .*/versionCode 46/g' android/app/build.gradle perl -p -i -e 's/versionCode .*/versionCode 40/g' android/app/build.gradle
perl -p -i -e 's/versionName .*/versionName "1.1.1"/g' android/app/build.gradle perl -p -i -e 's/versionName .*/versionName "1.0.7"/g' android/app/build.gradle
``` ```
##### 2. Build ##### 2. Build

View File

@@ -5,15 +5,6 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [1.1.1] - 2025.11.03
### Added
- Meeting onboarding via prompts
- Emojis on gift feed
- Starred projects with notification
## [1.0.7] - 2025.08.18 ## [1.0.7] - 2025.08.18
### Fixed ### Fixed

View File

@@ -31,8 +31,8 @@ android {
applicationId "app.timesafari.app" applicationId "app.timesafari.app"
minSdkVersion rootProject.ext.minSdkVersion minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 46 versionCode 41
versionName "1.1.1" versionName "1.0.8"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
aaptOptions { aaptOptions {
// Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps. // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

View File

@@ -403,7 +403,7 @@
buildSettings = { buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CODE_SIGN_STYLE = Automatic; CODE_SIGN_STYLE = Automatic;
CURRENT_PROJECT_VERSION = 46; CURRENT_PROJECT_VERSION = 41;
DEVELOPMENT_TEAM = GM3FS5JQPH; DEVELOPMENT_TEAM = GM3FS5JQPH;
ENABLE_APP_SANDBOX = NO; ENABLE_APP_SANDBOX = NO;
ENABLE_USER_SCRIPT_SANDBOXING = NO; ENABLE_USER_SCRIPT_SANDBOXING = NO;
@@ -413,7 +413,7 @@
"$(inherited)", "$(inherited)",
"@executable_path/Frameworks", "@executable_path/Frameworks",
); );
MARKETING_VERSION = 1.1.1; MARKETING_VERSION = 1.0.8;
OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\""; OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
PRODUCT_BUNDLE_IDENTIFIER = app.timesafari; PRODUCT_BUNDLE_IDENTIFIER = app.timesafari;
PRODUCT_NAME = "$(TARGET_NAME)"; PRODUCT_NAME = "$(TARGET_NAME)";
@@ -430,7 +430,7 @@
buildSettings = { buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CODE_SIGN_STYLE = Automatic; CODE_SIGN_STYLE = Automatic;
CURRENT_PROJECT_VERSION = 46; CURRENT_PROJECT_VERSION = 41;
DEVELOPMENT_TEAM = GM3FS5JQPH; DEVELOPMENT_TEAM = GM3FS5JQPH;
ENABLE_APP_SANDBOX = NO; ENABLE_APP_SANDBOX = NO;
ENABLE_USER_SCRIPT_SANDBOXING = NO; ENABLE_USER_SCRIPT_SANDBOXING = NO;
@@ -440,7 +440,7 @@
"$(inherited)", "$(inherited)",
"@executable_path/Frameworks", "@executable_path/Frameworks",
); );
MARKETING_VERSION = 1.1.1; MARKETING_VERSION = 1.0.8;
PRODUCT_BUNDLE_IDENTIFIER = app.timesafari; PRODUCT_BUNDLE_IDENTIFIER = app.timesafari;
PRODUCT_NAME = "$(TARGET_NAME)"; PRODUCT_NAME = "$(TARGET_NAME)";
SWIFT_ACTIVE_COMPILATION_CONDITIONS = ""; SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "timesafari", "name": "timesafari",
"version": "1.1.2-beta", "version": "1.1.1-beta",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "timesafari", "name": "timesafari",
"version": "1.1.2-beta", "version": "1.1.1-beta",
"dependencies": { "dependencies": {
"@capacitor-community/electron": "^5.0.1", "@capacitor-community/electron": "^5.0.1",
"@capacitor-community/sqlite": "6.0.2", "@capacitor-community/sqlite": "6.0.2",

View File

@@ -1,6 +1,6 @@
{ {
"name": "timesafari", "name": "timesafari",
"version": "1.1.2-beta", "version": "1.1.1-beta",
"description": "Time Safari Application", "description": "Time Safari Application",
"author": { "author": {
"name": "Time Safari Team" "name": "Time Safari Team"

View File

@@ -38,7 +38,7 @@
} }
.dialog { .dialog {
@apply bg-white px-4 py-6 rounded-lg w-full max-w-lg max-h-[calc(100vh-3rem)] overflow-y-auto; @apply bg-white p-4 rounded-lg w-full max-w-lg;
} }
/* Markdown content styling to restore list elements */ /* Markdown content styling to restore list elements */

View File

@@ -2,55 +2,12 @@
GiftedDialog.vue to provide a reusable grid layout * for displaying people, GiftedDialog.vue to provide a reusable grid layout * for displaying people,
projects, and special entities with selection. * * @author Matthew Raymer */ projects, and special entities with selection. * * @author Matthew Raymer */
<template> <template>
<!-- Quick Search --> <ul :class="gridClasses">
<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 --> <!-- Special entities (You, Unnamed) for people grids -->
<template v-if="entityType === 'people'"> <template v-if="entityType === 'people'">
<!-- "You" entity --> <!-- "You" entity -->
<SpecialEntityCard <SpecialEntityCard
v-if="showYouEntity && !searchTerm.trim()" v-if="showYouEntity"
entity-type="you" entity-type="you"
label="You" label="You"
icon="hand" icon="hand"
@@ -64,7 +21,6 @@ projects, and special entities with selection. * * @author Matthew Raymer */
<!-- "Unnamed" entity --> <!-- "Unnamed" entity -->
<SpecialEntityCard <SpecialEntityCard
v-if="showUnnamedEntity && !searchTerm.trim()"
entity-type="unnamed" entity-type="unnamed"
:label="unnamedEntityName" :label="unnamedEntityName"
icon="circle-question" icon="circle-question"
@@ -82,60 +38,16 @@ projects, and special entities with selection. * * @author Matthew Raymer */
<!-- Entity cards (people or projects) --> <!-- Entity cards (people or projects) -->
<template v-if="entityType === 'people'"> <template v-if="entityType === 'people'">
<!-- When showing contacts without search: split into recent and alphabetical --> <PersonCard
<template v-if="!searchTerm.trim()"> v-for="person in displayedEntities as Contact[]"
<!-- Recently Added Section --> :key="person.did"
<template v-if="recentContacts.length > 0"> :person="person"
<li :conflicted="isPersonConflicted(person.did)"
class="text-xs font-semibold text-slate-500 uppercase pt-5 pb-1.5 px-2 border-b border-slate-300" :show-time-icon="true"
> :notify="notify"
Recently Added :conflict-context="conflictContext"
</li> @person-selected="handlePersonSelected"
<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
</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>
<template v-else-if="entityType === 'projects'"> <template v-else-if="entityType === 'projects'">
@@ -151,27 +63,28 @@ projects, and special entities with selection. * * @author Matthew Raymer */
@project-selected="handleProjectSelected" @project-selected="handleProjectSelected"
/> />
</template> </template>
<!-- Show All navigation -->
<ShowAllCard
v-if="shouldShowAll"
:entity-type="entityType"
:route-name="showAllRoute"
:query-params="showAllQueryParams"
/>
</ul> </ul>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from "vue-facing-decorator"; import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
import { useInfiniteScroll } from "@vueuse/core";
import PersonCard from "./PersonCard.vue"; import PersonCard from "./PersonCard.vue";
import ProjectCard from "./ProjectCard.vue"; import ProjectCard from "./ProjectCard.vue";
import SpecialEntityCard from "./SpecialEntityCard.vue"; import SpecialEntityCard from "./SpecialEntityCard.vue";
import ShowAllCard from "./ShowAllCard.vue";
import { Contact } from "../db/tables/contacts"; import { Contact } from "../db/tables/contacts";
import { PlanData } from "../interfaces/records"; import { PlanData } from "../interfaces/records";
import { NotificationIface } from "../constants/app"; import { NotificationIface } from "../constants/app";
import { UNNAMED_ENTITY_NAME } from "@/constants/entities"; 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 * EntityGrid - Unified grid layout for displaying people or projects
* *
@@ -180,6 +93,7 @@ const RECENT_CONTACTS_COUNT = 3;
* - Special entity integration (You, Unnamed) * - Special entity integration (You, Unnamed)
* - Conflict detection integration * - Conflict detection integration
* - Empty state messaging * - Empty state messaging
* - Show All navigation
* - Event delegation for entity selection * - Event delegation for entity selection
* - Warning notifications for conflicted entities * - Warning notifications for conflicted entities
* - Template streamlined with computed CSS properties * - Template streamlined with computed CSS properties
@@ -190,6 +104,7 @@ const RECENT_CONTACTS_COUNT = 3;
PersonCard, PersonCard,
ProjectCard, ProjectCard,
SpecialEntityCard, SpecialEntityCard,
ShowAllCard,
}, },
}) })
export default class EntityGrid extends Vue { export default class EntityGrid extends Vue {
@@ -197,32 +112,14 @@ export default class EntityGrid extends Vue {
@Prop({ required: true }) @Prop({ required: true })
entityType!: "people" | "projects"; entityType!: "people" | "projects";
// Search state /** Array of entities to display */
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
*
* IMPORTANT: When passing Contact[] arrays, they must be sorted by date added
* (newest first) for the "Recently Added" section to display correctly.
* Use $contactsByDateAdded() instead of $getAllContacts() or $contacts().
*
* The recentContacts computed property assumes contacts are already sorted
* by date added and simply takes the first 3. If contacts are sorted
* alphabetically or in another order, the wrong contacts will appear in
* "Recently Added".
*/
@Prop({ required: true }) @Prop({ required: true })
entities!: Contact[] | PlanData[]; entities!: Contact[] | PlanData[];
/** Maximum number of entities to display */
@Prop({ default: 10 })
maxItems!: number;
/** Active user's DID */ /** Active user's DID */
@Prop({ required: true }) @Prop({ required: true })
activeDid!: string; activeDid!: string;
@@ -243,14 +140,18 @@ export default class EntityGrid extends Vue {
@Prop({ default: true }) @Prop({ default: true })
showYouEntity!: boolean; showYouEntity!: boolean;
/** Whether to show the "Unnamed" entity for people grids */
@Prop({ default: true })
showUnnamedEntity!: boolean;
/** Whether the "You" entity is selectable */ /** Whether the "You" entity is selectable */
@Prop({ default: true }) @Prop({ default: true })
youSelectable!: boolean; 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 */ /** Notification function from parent component */
@Prop() @Prop()
notify?: (notification: NotificationIface, timeout?: number) => void; notify?: (notification: NotificationIface, timeout?: number) => void;
@@ -259,31 +160,42 @@ export default class EntityGrid extends Vue {
@Prop({ default: "other party" }) @Prop({ default: "other party" })
conflictContext!: string; conflictContext!: string;
/** Whether to hide the "Show All" navigation */
@Prop({ default: false })
hideShowAll!: boolean;
/** /**
* Function to determine which entities to display (allows parent control) * Function to determine which entities to display (allows parent control)
* *
* This function prop allows parent components to customize which entities * This function prop allows parent components to customize which entities
* are displayed in the grid, enabling advanced filtering and sorting. * are displayed in the grid, enabling advanced filtering, sorting, and
* Note: Infinite scroll is disabled when this prop is provided. * display logic beyond the default simple slice behavior.
* *
* @param entities - The full array of entities (Contact[] or PlanData[]) * @param entities - The full array of entities (Contact[] or PlanData[])
* @param entityType - The type of entities being displayed ("people" or "projects") * @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 * @returns Filtered/sorted array of entities to display
* *
* @example * @example
* // Custom filtering: only show contacts with profile images * // Custom filtering: only show contacts with profile images
* :display-entities-function="(entities, type) => * :display-entities-function="(entities, type, max) =>
* entities.filter(e => e.profileImageUrl)" * entities.filter(e => e.profileImageUrl).slice(0, max)"
* *
* @example * @example
* // Custom sorting: sort projects by name * // Custom sorting: sort projects by name
* :display-entities-function="(entities, type) => * :display-entities-function="(entities, type, max) =>
* entities.sort((a, b) => a.name.localeCompare(b.name))" * 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)"
*/ */
@Prop({ default: null }) @Prop({ default: null })
displayEntitiesFunction?: ( displayEntitiesFunction?: (
entities: Contact[] | PlanData[], entities: Contact[] | PlanData[],
entityType: "people" | "projects", entityType: "people" | "projects",
maxItems: number,
) => Contact[] | PlanData[]; ) => Contact[] | PlanData[];
/** /**
@@ -294,63 +206,33 @@ export default class EntityGrid extends Vue {
} }
/** /**
* Computed entities to display - uses function prop if provided, otherwise uses infinite scroll * Computed CSS classes for the grid layout
* 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`;
}
}
/**
* Computed entities to display - uses function prop if provided, otherwise defaults
*/ */
get displayedEntities(): Contact[] | PlanData[] { 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) { if (this.displayEntitiesFunction) {
return this.displayEntitiesFunction(this.entities, this.entityType); return this.displayEntitiesFunction(
this.entities,
this.entityType,
this.maxItems,
);
} }
// Default: projects use infinite scroll // Default implementation for backward compatibility
if (this.entityType === "projects") { const maxDisplay = this.entityType === "projects" ? 7 : this.maxItems;
return (this.entities as PlanData[]).slice(0, this.displayedCount); return this.entities.slice(0, maxDisplay);
}
// People: handled by recentContacts + alphabeticalContacts (both use displayedCount)
return [];
}
/**
* Get the most recently added contacts (when showing contacts and not searching)
*
* NOTE: This assumes entities are already sorted by date added (newest first).
* See the entities prop documentation for details on using $contactsByDateAdded().
*/
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, RECENT_CONTACTS_COUNT);
}
/**
* 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 few (recent contacts) and sort the rest alphabetically
// Create a copy to avoid mutating the original array
const remaining = this.entities as Contact[];
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 recent contacts)
const toShow = Math.max(0, this.displayedCount - RECENT_CONTACTS_COUNT);
return sorted.slice(0, toShow);
} }
/** /**
@@ -364,6 +246,15 @@ 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 * Whether the "You" entity is conflicted
*/ */
@@ -437,143 +328,6 @@ 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 = recent + all alphabetical
const totalAvailable = RECENT_CONTACTS_COUNT + this.entities.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 methods using @Emit decorator
@Emit("entity-selected") @Emit("entity-selected")
@@ -586,33 +340,6 @@ export default class EntityGrid extends Vue {
} { } {
return data; 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> </script>

View File

@@ -3,9 +3,10 @@ from GiftedDialog.vue to handle the complete step 1 * entity selection interface
with dynamic labeling and grid display. * * Features: * - Dynamic step labeling with dynamic labeling and grid display. * * Features: * - Dynamic step labeling
based on context * - EntityGrid integration for unified entity display * - based on context * - EntityGrid integration for unified entity display * -
Conflict detection and prevention * - Special entity handling (You, Unnamed) * - Conflict detection and prevention * - Special entity handling (You, Unnamed) * -
Cancel functionality * - Event delegation for entity selection * - Warning Show All navigation with context preservation * - Cancel functionality * - Event
notifications for conflicted entities * - Template streamlined with computed CSS delegation for entity selection * - Warning notifications for conflicted
properties * * @author Matthew Raymer */ entities * - Template streamlined with computed CSS properties * * @author
Matthew Raymer */
<template> <template>
<div id="sectionGiftedGiver"> <div id="sectionGiftedGiver">
<label class="block font-bold mb-4"> <label class="block font-bold mb-4">
@@ -15,14 +16,18 @@ properties * * @author Matthew Raymer */
<EntityGrid <EntityGrid
:entity-type="shouldShowProjects ? 'projects' : 'people'" :entity-type="shouldShowProjects ? 'projects' : 'people'"
:entities="shouldShowProjects ? projects : allContacts" :entities="shouldShowProjects ? projects : allContacts"
:max-items="10"
:active-did="activeDid" :active-did="activeDid"
:all-my-dids="allMyDids" :all-my-dids="allMyDids"
:all-contacts="allContacts" :all-contacts="allContacts"
:conflict-checker="conflictChecker" :conflict-checker="conflictChecker"
:show-you-entity="shouldShowYouEntity" :show-you-entity="shouldShowYouEntity"
:you-selectable="youSelectable" :you-selectable="youSelectable"
:show-all-route="showAllRoute"
:show-all-query-params="showAllQueryParams"
:notify="notify" :notify="notify"
:conflict-context="conflictContext" :conflict-context="conflictContext"
:hide-show-all="hideShowAll"
@entity-selected="handleEntitySelected" @entity-selected="handleEntitySelected"
/> />
@@ -63,6 +68,7 @@ interface EntitySelectionEvent {
* - EntityGrid integration for unified entity display * - EntityGrid integration for unified entity display
* - Conflict detection and prevention * - Conflict detection and prevention
* - Special entity handling (You, Unnamed) * - Special entity handling (You, Unnamed)
* - Show All navigation with context preservation
* - Cancel functionality * - Cancel functionality
* - Event delegation for entity selection * - Event delegation for entity selection
* - Warning notifications for conflicted entities * - Warning notifications for conflicted entities
@@ -148,6 +154,10 @@ export default class EntitySelectionStep extends Vue {
@Prop() @Prop()
notify?: (notification: NotificationIface, timeout?: number) => void; notify?: (notification: NotificationIface, timeout?: number) => void;
/** Whether to hide the "Show All" navigation */
@Prop({ default: false })
hideShowAll!: boolean;
/** /**
* CSS classes for the cancel button * CSS classes for the cancel button
*/ */
@@ -212,6 +222,59 @@ export default class EntitySelectionStep extends Vue {
return !this.conflictChecker(this.activeDid); 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 * Handle entity selection from EntityGrid
*/ */

View File

@@ -211,6 +211,8 @@ export default class FeedFilters extends Vue {
} }
</script> </script>
<style scoped> <style>
/* Component-specific styles if needed */ #dialogFeedFilters.dialog-overlay {
overflow: scroll;
}
</style> </style>

View File

@@ -29,6 +29,7 @@
:unit-code="unitCode" :unit-code="unitCode"
:offer-id="offerId" :offer-id="offerId"
:notify="$notify" :notify="$notify"
:hide-show-all="hideShowAll"
@entity-selected="handleEntitySelected" @entity-selected="handleEntitySelected"
@cancel="cancel" @cancel="cancel"
/> />
@@ -116,6 +117,7 @@ export default class GiftedDialog extends Vue {
@Prop() fromProjectId = ""; @Prop() fromProjectId = "";
@Prop() toProjectId = ""; @Prop() toProjectId = "";
@Prop() isFromProjectView = false; @Prop() isFromProjectView = false;
@Prop() hideShowAll = false;
@Prop({ default: "person" }) giverEntityType = "person" as @Prop({ default: "person" }) giverEntityType = "person" as
| "person" | "person"
| "project"; | "project";
@@ -231,7 +233,7 @@ export default class GiftedDialog extends Vue {
apiServer: this.apiServer, apiServer: this.apiServer,
}); });
this.allContacts = await this.$contactsByDateAdded(); this.allContacts = await this.$contacts();
this.allMyDids = await retrieveAccountDids(); this.allMyDids = await retrieveAccountDids();

View File

@@ -1,255 +1,197 @@
<template> <template>
<div> <div class="space-y-4">
<div class="space-y-4"> <!-- Loading State -->
<!-- Loading State --> <div
<div v-if="isLoading"
v-if="isLoading" class="mt-16 text-center text-4xl bg-slate-400 text-white w-14 py-2.5 rounded-full mx-auto"
class="mt-16 text-center text-4xl bg-slate-400 text-white w-14 py-2.5 rounded-full mx-auto" >
> <font-awesome icon="spinner" class="fa-spin-pulse" />
<font-awesome icon="spinner" class="fa-spin-pulse" />
</div>
<!-- Members List -->
<div v-else>
<div class="text-center text-red-600 my-4">
{{ decryptionErrorMessage() }}
</div>
<div v-if="missingMyself" class="py-4 text-red-600">
You are not currently admitted by the organizer.
</div>
<div v-if="!firstName" class="py-4 text-red-600">
Your name is not set, so others may not recognize you. Reload this
page to set it.
</div>
<ul class="list-disc text-sm ps-4 space-y-2 mb-4">
<li
v-if="
membersToShow().length > 0 && showOrganizerTools && isOrganizer
"
>
Click
<font-awesome icon="circle-plus" class="text-blue-500 text-sm" />
/
<font-awesome icon="circle-minus" class="text-rose-500 text-sm" />
to add/remove them to/from the meeting.
</li>
<li
v-if="
membersToShow().length > 0 && getNonContactMembers().length > 0
"
>
Click
<font-awesome icon="circle-user" class="text-green-600 text-sm" />
to add them to your contacts.
</li>
</ul>
<div class="flex justify-between">
<!--
always have at least one refresh button even without members in case the organizer
changes the password
-->
<button
class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
title="Refresh members list now"
@click="refreshData(false)"
>
<font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
Refresh
<span class="text-xs">({{ countdownTimer }}s)</span>
</button>
</div>
<ul
v-if="membersToShow().length > 0"
class="border-t border-slate-300 my-2"
>
<li
v-for="member in membersToShow()"
:key="member.member.memberId"
:class="[
'border-b px-2 sm:px-3 py-1.5',
{
'bg-blue-50 border-t border-blue-300 -mt-[1px]':
!member.member.admitted &&
(isOrganizer || member.did === activeDid),
},
{ 'border-slate-300': member.member.admitted },
]"
>
<div class="flex items-center gap-2 justify-between">
<div class="flex items-center gap-1 overflow-hidden">
<h3
:class="[
'font-semibold truncate',
{
'text-slate-500':
!member.member.admitted &&
(isOrganizer || member.did === activeDid),
},
]"
>
<font-awesome
v-if="member.member.memberId === members[0]?.memberId"
icon="crown"
class="fa-fw text-amber-400"
/>
<font-awesome
v-if="member.did === activeDid"
icon="hand"
class="fa-fw text-slate-500"
/>
<font-awesome
v-if="
!member.member.admitted &&
(isOrganizer || member.did === activeDid)
"
icon="hourglass-half"
class="fa-fw text-slate-400"
/>
{{ member.name || unnamedMember }}
</h3>
<div
v-if="!getContactFor(member.did) && member.did !== activeDid"
class="flex items-center gap-1.5 ml-2 ms-1"
>
<button
class="btn-add-contact ml-2"
title="Add as contact"
@click="addAsContact(member)"
>
<font-awesome icon="circle-user" />
</button>
<button
class="btn-info-contact ml-2"
title="Contact Info"
@click="
informAboutAddingContact(
getContactFor(member.did) !== undefined,
)
"
>
<font-awesome icon="circle-info" />
</button>
</div>
<div
v-if="getContactFor(member.did) && member.did !== activeDid"
class="flex items-center gap-1.5 ms-1"
>
<router-link
:to="{ name: 'contact-edit', params: { did: member.did } }"
>
<font-awesome
icon="pen"
class="text-sm text-blue-500 ml-2 mb-1"
/>
</router-link>
<router-link
:to="{ name: 'did', params: { did: member.did } }"
>
<font-awesome
icon="arrow-up-right-from-square"
class="text-sm text-blue-500 ml-2 mb-1"
/>
</router-link>
</div>
</div>
<span
v-if="
showOrganizerTools && isOrganizer && member.did !== activeDid
"
class="flex items-center gap-1.5"
>
<button
:class="
member.member.admitted
? 'btn-admission-remove'
: 'btn-admission-add'
"
:title="
member.member.admitted ? 'Remove member' : 'Admit member'
"
@click="checkWhetherContactBeforeAdmitting(member)"
>
<font-awesome
:icon="
member.member.admitted ? 'circle-minus' : 'circle-plus'
"
/>
</button>
<button
class="btn-info-admission"
title="Admission Info"
@click="informAboutAdmission()"
>
<font-awesome icon="circle-info" />
</button>
</span>
</div>
<p class="text-xs text-gray-600 truncate">
{{ member.did }}
</p>
</li>
</ul>
<div v-if="membersToShow().length > 0" class="flex justify-between">
<!--
always have at least one refresh button even without members in case the organizer
changes the password
-->
<button
class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
title="Refresh members list now"
@click="refreshData(false)"
>
<font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
Refresh
<span class="text-xs">({{ countdownTimer }}s)</span>
</button>
</div>
<p v-if="members.length === 0" class="text-gray-500 py-4">
No members have joined this meeting yet
</p>
</div>
</div> </div>
<!-- Bulk Members Dialog for both admitting and setting visibility --> <!-- Members List -->
<BulkMembersDialog
ref="bulkMembersDialog" <div v-else>
:active-did="activeDid" <div class="text-center text-red-600 my-4">
:api-server="apiServer" {{ decryptionErrorMessage() }}
:is-organizer="isOrganizer" </div>
@close="closeBulkMembersDialogCallback"
/> <div v-if="missingMyself" class="py-4 text-red-600">
You are not currently admitted by the organizer.
</div>
<div v-if="!firstName" class="py-4 text-red-600">
Your name is not set, so others may not recognize you. Reload this page
to set it.
</div>
<ul class="list-disc text-sm ps-4 space-y-2 mb-4">
<li
v-if="membersToShow().length > 0 && showOrganizerTools && isOrganizer"
>
Click
<span
class="inline-block w-5 h-5 rounded-full bg-blue-100 text-blue-600 text-center"
>
<font-awesome icon="plus" class="text-sm" />
</span>
/
<span
class="inline-block w-5 h-5 rounded-full bg-blue-100 text-blue-600 text-center"
>
<font-awesome icon="minus" class="text-sm" />
</span>
to add/remove them to/from the meeting.
</li>
<li v-if="membersToShow().length > 0">
Click
<span
class="inline-block w-5 h-5 rounded-full bg-green-100 text-green-600 text-center"
>
<font-awesome icon="circle-user" class="text-sm" />
</span>
to add them to your contacts.
</li>
</ul>
<div class="flex justify-between">
<!--
always have at least one refresh button even without members in case the organizer
changes the password
-->
<button
class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
title="Refresh members list now"
@click="manualRefresh"
>
<font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
Refresh
<span class="text-xs">({{ countdownTimer }}s)</span>
</button>
</div>
<ul
v-if="membersToShow().length > 0"
class="border-t border-slate-300 my-2"
>
<li
v-for="member in membersToShow()"
:key="member.member.memberId"
class="border-b border-slate-300 py-1.5"
>
<div class="flex items-center gap-2 justify-between">
<div class="flex items-center gap-1 overflow-hidden">
<h3 class="font-semibold truncate">
{{ member.name || unnamedMember }}
</h3>
<div
v-if="!getContactFor(member.did) && member.did !== activeDid"
class="flex items-center gap-1"
>
<button
class="btn-add-contact"
title="Add as contact"
@click="addAsContact(member)"
>
<font-awesome icon="circle-user" />
</button>
<button
class="btn-info-contact"
title="Contact Info"
@click="
informAboutAddingContact(
getContactFor(member.did) !== undefined,
)
"
>
<font-awesome icon="circle-info" class="text-sm" />
</button>
</div>
</div>
<span
v-if="
showOrganizerTools && isOrganizer && member.did !== activeDid
"
class="flex items-center gap-1"
>
<button
class="btn-admission"
:title="
member.member.admitted ? 'Remove member' : 'Admit member'
"
@click="checkWhetherContactBeforeAdmitting(member)"
>
<font-awesome
:icon="member.member.admitted ? 'minus' : 'plus'"
/>
</button>
<button
class="btn-info-admission"
title="Admission Info"
@click="informAboutAdmission()"
>
<font-awesome icon="circle-info" class="text-sm" />
</button>
</span>
</div>
<p class="text-xs text-gray-600 truncate">
{{ member.did }}
</p>
</li>
</ul>
<div v-if="membersToShow().length > 0" class="flex justify-between">
<!--
always have at least one refresh button even without members in case the organizer
changes the password
-->
<button
class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
title="Refresh members list now"
@click="manualRefresh"
>
<font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
Refresh
<span class="text-xs">({{ countdownTimer }}s)</span>
</button>
</div>
<p v-if="members.length === 0" class="text-gray-500 py-4">
No members have joined this meeting yet
</p>
</div>
</div> </div>
<!-- Set Visibility Dialog Component -->
<SetBulkVisibilityDialog
:visible="showSetVisibilityDialog"
:members-data="visibilityDialogMembers"
:active-did="activeDid"
:api-server="apiServer"
@close="closeSetVisibilityDialog"
/>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue, Prop, Emit } from "vue-facing-decorator"; import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
import { NotificationIface } from "@/constants/app";
import {
NOTIFY_ADD_CONTACT_FIRST,
NOTIFY_CONTINUE_WITHOUT_ADDING,
} from "@/constants/notifications";
import { SOMEONE_UNNAMED } from "@/constants/entities";
import { import {
errorStringForLog, errorStringForLog,
getHeaders, getHeaders,
register, register,
serverMessageForUser, serverMessageForUser,
} from "@/libs/endorserServer"; } from "../libs/endorserServer";
import { decryptMessage } from "@/libs/crypto"; import { decryptMessage } from "../libs/crypto";
import { Contact } from "@/db/tables/contacts"; import { Contact } from "../db/tables/contacts";
import { MemberData } from "@/interfaces"; import * as libsUtil from "../libs/util";
import { NotificationIface } from "../constants/app";
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin"; import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify"; import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
import BulkMembersDialog from "./BulkMembersDialog.vue"; import {
NOTIFY_ADD_CONTACT_FIRST,
NOTIFY_CONTINUE_WITHOUT_ADDING,
} from "@/constants/notifications";
import { SOMEONE_UNNAMED } from "@/constants/entities";
import SetBulkVisibilityDialog from "./SetBulkVisibilityDialog.vue";
interface Member { interface Member {
admitted: boolean; admitted: boolean;
@@ -266,7 +208,7 @@ interface DecryptedMember {
@Component({ @Component({
components: { components: {
BulkMembersDialog, SetBulkVisibilityDialog,
}, },
mixins: [PlatformServiceMixin], mixins: [PlatformServiceMixin],
}) })
@@ -274,6 +216,7 @@ export default class MembersList extends Vue {
$notify!: (notification: NotificationIface, timeout?: number) => void; $notify!: (notification: NotificationIface, timeout?: number) => void;
notify!: ReturnType<typeof createNotifyHelpers>; notify!: ReturnType<typeof createNotifyHelpers>;
libsUtil = libsUtil;
@Prop({ required: true }) password!: string; @Prop({ required: true }) password!: string;
@Prop({ default: false }) showOrganizerTools!: boolean; @Prop({ default: false }) showOrganizerTools!: boolean;
@@ -284,7 +227,6 @@ export default class MembersList extends Vue {
return message; return message;
} }
contacts: Array<Contact> = [];
decryptedMembers: DecryptedMember[] = []; decryptedMembers: DecryptedMember[] = [];
firstName = ""; firstName = "";
isLoading = true; isLoading = true;
@@ -295,11 +237,23 @@ export default class MembersList extends Vue {
activeDid = ""; activeDid = "";
apiServer = ""; apiServer = "";
// Set Visibility Dialog state
showSetVisibilityDialog = false;
visibilityDialogMembers: Array<{
did: string;
name: string;
isContact: boolean;
member: { memberId: string };
}> = [];
contacts: Array<Contact> = [];
// Auto-refresh functionality // Auto-refresh functionality
countdownTimer = 10; countdownTimer = 10;
autoRefreshInterval: NodeJS.Timeout | null = null; autoRefreshInterval: NodeJS.Timeout | null = null;
lastRefreshTime = 0; lastRefreshTime = 0;
previousMemberDidsIgnored: string[] = [];
// Track previous visibility members to detect changes
previousVisibilityMembers: string[] = [];
/** /**
* Get the unnamed member constant * Get the unnamed member constant
@@ -320,8 +274,23 @@ export default class MembersList extends Vue {
this.apiServer = settings.apiServer || ""; this.apiServer = settings.apiServer || "";
this.firstName = settings.firstName || ""; this.firstName = settings.firstName || "";
await this.fetchMembers();
await this.loadContacts();
this.refreshData(); // Start auto-refresh
this.startAutoRefresh();
// Check if we should show the visibility dialog on initial load
this.checkAndShowVisibilityDialog();
}
async refreshData() {
// Force refresh both contacts and members
await this.loadContacts();
await this.fetchMembers();
// Check if we should show the visibility dialog after refresh
this.checkAndShowVisibilityDialog();
} }
async fetchMembers() { async fetchMembers() {
@@ -367,10 +336,7 @@ export default class MembersList extends Vue {
const content = JSON.parse(decryptedContent); const content = JSON.parse(decryptedContent);
this.decryptedMembers.push({ this.decryptedMembers.push({
member: { member: member,
...member,
admitted: member.admitted !== undefined ? member.admitted : true, // Default to true for non-organizers
},
name: content.name, name: content.name,
did: content.did, did: content.did,
isRegistered: !!content.isRegistered, isRegistered: !!content.isRegistered,
@@ -412,76 +378,17 @@ export default class MembersList extends Vue {
} }
membersToShow(): DecryptedMember[] { membersToShow(): DecryptedMember[] {
let members: DecryptedMember[] = [];
if (this.isOrganizer) { if (this.isOrganizer) {
if (this.showOrganizerTools) { if (this.showOrganizerTools) {
members = this.decryptedMembers; return this.decryptedMembers;
} else { } else {
members = this.decryptedMembers.filter( return this.decryptedMembers.filter(
(member: DecryptedMember) => member.member.admitted, (member: DecryptedMember) => member.member.admitted,
); );
} }
} else {
// non-organizers only get visible members from server, plus themselves
// Check if current user is already in the decrypted members list
if (
!this.decryptedMembers.find((member) => member.did === this.activeDid)
) {
// this is a stub for this user just in case they are waiting to get in
// which is especially useful so they can see their own DID
const currentUser: DecryptedMember = {
member: {
admitted: false,
content: "{}",
memberId: -1,
},
name: this.firstName,
did: this.activeDid,
isRegistered: false,
};
members = [currentUser, ...this.decryptedMembers];
} else {
members = this.decryptedMembers;
}
} }
// non-organizers only get visible members from server
// Sort members according to priority: return this.decryptedMembers;
// 1. Organizer at the top
// 2. Current user next
// 3. Non-admitted members next
// 4. Everyone else after
return members.sort((a, b) => {
// Check if either member is the organizer (first member in original list)
const aIsOrganizer = a.member.memberId === this.members[0]?.memberId;
const bIsOrganizer = b.member.memberId === this.members[0]?.memberId;
// Check if either member is the current user
const aIsCurrentUser = a.did === this.activeDid;
const bIsCurrentUser = b.did === this.activeDid;
// Organizer always comes first
if (aIsOrganizer && !bIsOrganizer) return -1;
if (!aIsOrganizer && bIsOrganizer) return 1;
// If both are organizers, maintain original order
if (aIsOrganizer && bIsOrganizer) return 0;
// Current user comes second (after organizer)
if (aIsCurrentUser && !bIsCurrentUser && !bIsOrganizer) return -1;
if (!aIsCurrentUser && bIsCurrentUser && !aIsOrganizer) return 1;
// If both are current users, maintain original order
if (aIsCurrentUser && bIsCurrentUser) return 0;
// Non-admitted members come before admitted members
if (!a.member.admitted && b.member.admitted) return -1;
if (a.member.admitted && !b.member.admitted) return 1;
// If admission status is the same, maintain original order
return 0;
});
} }
informAboutAdmission() { informAboutAdmission() {
@@ -505,85 +412,92 @@ export default class MembersList extends Vue {
} }
} }
async loadContacts() {
this.contacts = await this.$getAllContacts();
}
getContactFor(did: string): Contact | undefined { getContactFor(did: string): Contact | undefined {
return this.contacts.find((contact) => contact.did === did); return this.contacts.find((contact) => contact.did === did);
} }
getPendingMembersToAdmit(): MemberData[] { getMembersForVisibility() {
return this.decryptedMembers return this.decryptedMembers
.filter( .filter((member) => {
(member) => member.did !== this.activeDid && !member.member.admitted, // Exclude the current user
) if (member.did === this.activeDid) {
.map(this.convertDecryptedMemberToMemberData); return false;
} }
getNonContactMembers(): MemberData[] { const contact = this.getContactFor(member.did);
return this.decryptedMembers
.filter(
(member) =>
member.did !== this.activeDid && !this.getContactFor(member.did),
)
.map(this.convertDecryptedMemberToMemberData);
}
convertDecryptedMemberToMemberData( // Include members who:
decryptedMember: DecryptedMember, // 1. Haven't been added as contacts yet, OR
): MemberData { // 2. Are contacts but don't have visibility set (seesMe property)
return { return !contact || !contact.seesMe;
did: decryptedMember.did, })
name: decryptedMember.name, .map((member) => ({
isContact: !!this.getContactFor(decryptedMember.did), did: member.did,
member: { name: member.name,
memberId: decryptedMember.member.memberId.toString(), isContact: !!this.getContactFor(member.did),
}, member: {
}; memberId: member.member.memberId.toString(),
},
}));
} }
/** /**
* Show the bulk members dialog if conditions are met * Check if we should show the visibility dialog
* (admit pending members for organizers, add to contacts for non-organizers) * Returns true if there are members for visibility and either:
* - This is the first time (no previous members tracked), OR
* - New members have been added since last check (not removed)
*/ */
async refreshData(bypassPromptIfAllWereIgnored = true) { shouldShowVisibilityDialog(): boolean {
// Force refresh both contacts and members const currentMembers = this.getMembersForVisibility();
this.contacts = await this.$getAllContacts();
await this.fetchMembers();
const pendingMembers = this.isOrganizer if (currentMembers.length === 0) {
? this.getPendingMembersToAdmit() return false;
: this.getNonContactMembers();
if (pendingMembers.length === 0) {
this.startAutoRefresh();
return;
} }
if (bypassPromptIfAllWereIgnored) {
// only show if there are members that have not been ignored // If no previous members tracked, show dialog
const pendingMembersNotIgnored = pendingMembers.filter( if (this.previousVisibilityMembers.length === 0) {
(member) => !this.previousMemberDidsIgnored.includes(member.did), return true;
);
if (pendingMembersNotIgnored.length === 0) {
this.startAutoRefresh();
// everyone waiting has been ignored
return;
}
} }
this.stopAutoRefresh();
(this.$refs.bulkMembersDialog as BulkMembersDialog).open(pendingMembers); // Check if new members have been added (not just any change)
const currentMemberIds = currentMembers.map((m) => m.did);
const previousMemberIds = this.previousVisibilityMembers;
// Find new members (members in current but not in previous)
const newMembers = currentMemberIds.filter(
(id) => !previousMemberIds.includes(id),
);
// Only show dialog if there are new members added
return newMembers.length > 0;
} }
// Bulk Members Dialog methods /**
async closeBulkMembersDialogCallback( * Update the tracking of previous visibility members
result: { notSelectedMemberDids: string[] } | undefined, */
) { updatePreviousVisibilityMembers() {
this.previousMemberDidsIgnored = result?.notSelectedMemberDids || []; const currentMembers = this.getMembersForVisibility();
this.previousVisibilityMembers = currentMembers.map((m) => m.did);
}
await this.refreshData(); /**
* Show the visibility dialog if conditions are met
*/
checkAndShowVisibilityDialog() {
if (this.shouldShowVisibilityDialog()) {
this.showSetBulkVisibilityDialog();
}
this.updatePreviousVisibilityMembers();
} }
checkWhetherContactBeforeAdmitting(decrMember: DecryptedMember) { checkWhetherContactBeforeAdmitting(decrMember: DecryptedMember) {
const contact = this.getContactFor(decrMember.did); const contact = this.getContactFor(decrMember.did);
if (!decrMember.member.admitted && !contact) { if (!decrMember.member.admitted && !contact) {
// If not a contact, stop auto-refresh and show confirmation dialog // If not a contact, show confirmation dialog
this.stopAutoRefresh();
this.$notify( this.$notify(
{ {
group: "modal", group: "modal",
@@ -596,7 +510,6 @@ export default class MembersList extends Vue {
await this.addAsContact(decrMember); await this.addAsContact(decrMember);
// After adding as contact, proceed with admission // After adding as contact, proceed with admission
await this.toggleAdmission(decrMember); await this.toggleAdmission(decrMember);
this.startAutoRefresh();
}, },
onNo: async () => { onNo: async () => {
// If they choose not to add as contact, show second confirmation // If they choose not to add as contact, show second confirmation
@@ -609,19 +522,14 @@ export default class MembersList extends Vue {
yesText: NOTIFY_CONTINUE_WITHOUT_ADDING.yesText, yesText: NOTIFY_CONTINUE_WITHOUT_ADDING.yesText,
onYes: async () => { onYes: async () => {
await this.toggleAdmission(decrMember); await this.toggleAdmission(decrMember);
this.startAutoRefresh();
}, },
onCancel: async () => { onCancel: async () => {
// Do nothing, effectively canceling the operation // Do nothing, effectively canceling the operation
this.startAutoRefresh();
}, },
}, },
TIMEOUTS.MODAL, TIMEOUTS.MODAL,
); );
}, },
onCancel: async () => {
this.startAutoRefresh();
},
}, },
TIMEOUTS.MODAL, TIMEOUTS.MODAL,
); );
@@ -724,8 +632,19 @@ export default class MembersList extends Vue {
} }
} }
startAutoRefresh() { showSetBulkVisibilityDialog() {
// Filter members to show only those who need visibility set
const membersForVisibility = this.getMembersForVisibility();
// Pause auto-refresh when dialog opens
this.stopAutoRefresh(); this.stopAutoRefresh();
// Open the dialog directly
this.visibilityDialogMembers = membersForVisibility;
this.showSetVisibilityDialog = true;
}
startAutoRefresh() {
this.lastRefreshTime = Date.now(); this.lastRefreshTime = Date.now();
this.countdownTimer = 10; this.countdownTimer = 10;
@@ -755,6 +674,33 @@ export default class MembersList extends Vue {
} }
} }
manualRefresh() {
// Clear existing auto-refresh interval
if (this.autoRefreshInterval) {
clearInterval(this.autoRefreshInterval);
this.autoRefreshInterval = null;
}
// Trigger immediate refresh and restart timer
this.refreshData();
this.startAutoRefresh();
// Always show dialog on manual refresh if there are members for visibility
if (this.getMembersForVisibility().length > 0) {
this.showSetBulkVisibilityDialog();
}
}
// Set Visibility Dialog methods
closeSetVisibilityDialog() {
this.showSetVisibilityDialog = false;
this.visibilityDialogMembers = [];
// Refresh data when dialog is closed
this.refreshData();
// Resume auto-refresh when dialog is closed
this.startAutoRefresh();
}
beforeDestroy() { beforeDestroy() {
this.stopAutoRefresh(); this.stopAutoRefresh();
} }
@@ -772,26 +718,23 @@ export default class MembersList extends Vue {
.btn-add-contact { .btn-add-contact {
/* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */
@apply text-lg text-green-600 hover:text-green-800 @apply w-6 h-6 flex items-center justify-center rounded-full
bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800
transition-colors; transition-colors;
} }
.btn-info-contact, .btn-info-contact,
.btn-info-admission { .btn-info-admission {
/* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */
@apply text-slate-400 hover:text-slate-600 @apply w-6 h-6 flex items-center justify-center rounded-full
bg-slate-100 text-slate-400 hover:text-slate-600
transition-colors; transition-colors;
} }
.btn-admission-add { .btn-admission {
/* stylelint-disable-next-line at-rule-no-unknown */ /* stylelint-disable-next-line at-rule-no-unknown */
@apply text-lg text-blue-500 hover:text-blue-700 @apply w-6 h-6 flex items-center justify-center rounded-full
transition-colors; bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800
}
.btn-admission-remove {
/* stylelint-disable-next-line at-rule-no-unknown */
@apply text-lg text-rose-500 hover:text-rose-700
transition-colors; transition-colors;
} }
</style> </style>

View File

@@ -3,25 +3,30 @@ GiftedDialog.vue to handle person entity display * with selection states and
conflict detection. * * @author Matthew Raymer */ conflict detection. * * @author Matthew Raymer */
<template> <template>
<li :class="cardClasses" @click="handleClick"> <li :class="cardClasses" @click="handleClick">
<div> <div class="relative w-fit mx-auto">
<EntityIcon <EntityIcon
v-if="person.did" v-if="person.did"
:contact="person" :contact="person"
class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full" class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
/> />
<font-awesome <font-awesome
v-else v-else
icon="circle-question" icon="circle-question"
class="text-slate-400 text-5xl mb-1 shrink-0" class="text-slate-400 text-5xl mb-1"
/> />
<!-- Time icon overlay for contacts -->
<div
v-if="person.did && showTimeIcon"
class="rounded-full bg-slate-400 absolute bottom-0 right-0 p-1 translate-x-1/3"
>
<font-awesome icon="clock" class="block text-white text-xs w-[1em]" />
</div>
</div> </div>
<div class="overflow-hidden"> <h3 :class="nameClasses">
<h3 :class="nameClasses"> {{ displayName }}
{{ displayName }} </h3>
</h3>
<p class="text-xs text-slate-500 truncate">{{ person.did }}</p>
</div>
</li> </li>
</template> </template>
@@ -76,32 +81,29 @@ export default class PersonCard extends Vue {
* Computed CSS classes for the card * Computed CSS classes for the card
*/ */
get cardClasses(): string { 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) { if (!this.selectable || this.conflicted) {
return `${baseCardClasses} *:opacity-50 cursor-not-allowed`; return "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 * Computed CSS classes for the person name
*/ */
get nameClasses(): string { get nameClasses(): string {
const baseNameClasses = "text-sm font-semibold truncate"; const baseClasses =
"text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden";
if (this.conflicted) { if (this.conflicted) {
return `${baseNameClasses} text-slate-500`; return `${baseClasses} text-slate-400`;
} }
// Add italic styling for entities without set names // Add italic styling for entities without set names
if (!this.person.name) { if (!this.person.name) {
return `${baseNameClasses} italic text-slate-500`; return `${baseClasses} italic text-slate-500`;
} }
return baseNameClasses; return baseClasses;
} }
/** /**

View File

@@ -2,26 +2,25 @@
GiftedDialog.vue to handle project entity display * with selection states and GiftedDialog.vue to handle project entity display * with selection states and
issuer information. * * @author Matthew Raymer */ issuer information. * * @author Matthew Raymer */
<template> <template>
<li <li class="cursor-pointer" @click="handleClick">
class="flex items-center gap-2 px-2 py-1.5 border-b border-slate-300 hover:bg-slate-50 cursor-pointer" <div class="relative w-fit mx-auto">
@click="handleClick" <ProjectIcon
> :entity-id="project.handleId"
<ProjectIcon :icon-size="48"
:entity-id="project.handleId" :image-url="project.image"
:icon-size="48" class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
:image-url="project.image" />
class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full" </div>
/>
<div class="overflow-hidden"> <h3
<h3 class="text-sm font-semibold truncate"> class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
{{ project.name || unnamedProject }} >
</h3> {{ project.name || unnamedProject }}
</h3>
<div class="text-xs text-slate-500 truncate"> <div class="text-xs text-slate-500 truncate">
<font-awesome icon="user" class="text-slate-400" /> <font-awesome icon="user" class="fa-fw text-slate-400" />
{{ issuerDisplayName }} {{ issuerDisplayName }}
</div>
</div> </div>
</li> </li>
</template> </template>

View File

@@ -1,117 +0,0 @@
<template>
<div v-if="visible" class="dialog-overlay">
<div class="dialog">
<!-- Header -->
<h2 class="text-lg font-semibold leading-[1.25] mb-4">
Select Representative
</h2>
<!-- EntityGrid for contacts -->
<EntityGrid
:entity-type="'people'"
:entities="allContacts"
:active-did="activeDid"
:all-my-dids="allMyDids"
:all-contacts="allContacts"
:conflict-checker="() => false"
:show-you-entity="false"
:show-unnamed-entity="false"
:notify="notify"
:conflict-context="'representative'"
@entity-selected="handleEntitySelected"
/>
<!-- Cancel Button -->
<div class="flex gap-2 mt-4">
<button
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-2 rounded-md"
@click="handleCancel"
>
Cancel
</button>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
import EntityGrid from "./EntityGrid.vue";
import { Contact } from "../db/tables/contacts";
import { NotificationIface } from "../constants/app";
/**
* ProjectRepresentativeDialog - Dialog for selecting an authorized representative
*
* Features:
* - EntityGrid integration for contact selection
* - No special entities (You, Unnamed)
* - Immediate assignment on contact selection
* - Cancel button to close without selection
*/
@Component({
components: {
EntityGrid,
},
})
export default class ProjectRepresentativeDialog extends Vue {
/** Whether the dialog is visible */
visible = false;
/** Array of available contacts */
@Prop({ required: true })
allContacts!: Contact[];
/** Active user's DID */
@Prop({ required: true })
activeDid!: string;
/** All user's DIDs */
@Prop({ required: true })
allMyDids!: string[];
/** Notification function from parent component */
@Prop()
notify?: (notification: NotificationIface, timeout?: number) => void;
/**
* Handle entity selection from EntityGrid
* Immediately assigns the selected contact and closes the dialog
*/
handleEntitySelected(event: { type: "person" | "project"; data: Contact }) {
const contact = event.data as Contact;
this.emitAssign(contact);
this.close();
}
/**
* Handle cancel button click
*/
handleCancel(): void {
this.close();
}
/**
* Open the dialog
*/
open(): void {
this.visible = true;
}
/**
* Close the dialog
*/
close(): void {
this.visible = false;
}
// Emit methods using @Emit decorator
@Emit("assign")
emitAssign(contact: Contact): Contact {
return contact;
}
}
</script>
<style scoped></style>

View File

@@ -3,18 +3,18 @@
<div class="dialog"> <div class="dialog">
<div class="text-slate-900 text-center"> <div class="text-slate-900 text-center">
<h3 class="text-lg font-semibold leading-[1.25] mb-2"> <h3 class="text-lg font-semibold leading-[1.25] mb-2">
{{ title }} Set Visibility to Meeting Members
</h3> </h3>
<p class="text-sm mb-4"> <p class="text-sm mb-4">
{{ description }} Would you like to <b>make your activities visible</b> to the following
members? (This will also add them as contacts if they aren't already.)
</p> </p>
<!-- Member Selection Table --> <!-- Custom table area - you can customize this -->
<div class="mb-4"> <div v-if="shouldInitializeSelection" class="mb-4">
<table <table
class="w-full border-collapse border border-slate-300 text-sm text-start" class="w-full border-collapse border border-slate-300 text-sm text-start"
> >
<!-- Select All Header -->
<thead v-if="membersData && membersData.length > 0"> <thead v-if="membersData && membersData.length > 0">
<tr class="bg-slate-100 font-medium"> <tr class="bg-slate-100 font-medium">
<th class="border border-slate-300 px-3 py-2"> <th class="border border-slate-300 px-3 py-2">
@@ -31,15 +31,14 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<!-- Empty State --> <!-- Dynamic data from MembersList -->
<tr v-if="!membersData || membersData.length === 0"> <tr v-if="!membersData || membersData.length === 0">
<td <td
class="border border-slate-300 px-3 py-2 text-center italic text-gray-500" class="border border-slate-300 px-3 py-2 text-center italic text-gray-500"
> >
{{ emptyStateText }} No members need visibility settings
</td> </td>
</tr> </tr>
<!-- Member Rows -->
<tr <tr
v-for="member in membersData || []" v-for="member in membersData || []"
:key="member.member.memberId" :key="member.member.memberId"
@@ -52,24 +51,10 @@
:checked="isMemberSelected(member.did)" :checked="isMemberSelected(member.did)"
@change="toggleMemberSelection(member.did)" @change="toggleMemberSelection(member.did)"
/> />
<div class=""> {{ member.name || SOMEONE_UNNAMED }}
<div class="text-sm font-semibold">
{{ member.name || SOMEONE_UNNAMED }}
</div>
<div
class="flex items-center gap-0.5 text-xs text-slate-500"
>
<span class="font-semibold sm:hidden">DID:</span>
<span
class="w-[35vw] sm:w-auto truncate text-left"
style="direction: rtl"
>{{ member.did }}</span
>
</div>
</div>
</label> </label>
<!-- Contact indicator - only show if they are already a contact --> <!-- Friend indicator - only show if they are already a contact -->
<font-awesome <font-awesome
v-if="member.isContact" v-if="member.isContact"
icon="user-circle" icon="user-circle"
@@ -80,28 +65,10 @@
</td> </td>
</tr> </tr>
</tbody> </tbody>
<!-- Select All Footer -->
<tfoot v-if="membersData && membersData.length > 0">
<tr class="bg-slate-100 font-medium">
<th class="border border-slate-300 px-3 py-2">
<label class="flex items-center gap-2">
<input
type="checkbox"
:checked="isAllSelected"
:indeterminate="isIndeterminate"
@change="toggleSelectAll"
/>
Select All
</label>
</th>
</tr>
</tfoot>
</table> </table>
</div> </div>
<!-- Action Buttons -->
<div class="space-y-2"> <div class="space-y-2">
<!-- Main Action Button -->
<button <button
v-if="membersData && membersData.length > 0" v-if="membersData && membersData.length > 0"
:disabled="!hasSelectedMembers" :disabled="!hasSelectedMembers"
@@ -111,16 +78,17 @@
? 'bg-blue-600 text-white cursor-pointer' ? 'bg-blue-600 text-white cursor-pointer'
: 'bg-slate-400 text-slate-200 cursor-not-allowed', : 'bg-slate-400 text-slate-200 cursor-not-allowed',
]" ]"
@click="processSelectedMembers" @click="setVisibilityForSelectedMembers"
> >
{{ buttonText }} Set Visibility
</button> </button>
<!-- Cancel Button -->
<button <button
class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md" class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
@click="cancel" @click="cancel"
> >
Maybe Later {{
membersData && membersData.length > 0 ? "Maybe Later" : "Cancel"
}}
</button> </button>
</div> </div>
</div> </div>
@@ -133,20 +101,26 @@ import { Vue, Component, Prop } from "vue-facing-decorator";
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin"; import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
import { SOMEONE_UNNAMED } from "@/constants/entities"; import { SOMEONE_UNNAMED } from "@/constants/entities";
import { MemberData } from "@/interfaces"; import { setVisibilityUtil } from "@/libs/endorserServer";
import { setVisibilityUtil, getHeaders, register } from "@/libs/endorserServer";
import { createNotifyHelpers } from "@/utils/notify"; import { createNotifyHelpers } from "@/utils/notify";
import { Contact } from "@/db/tables/contacts";
interface MemberData {
did: string;
name: string;
isContact: boolean;
member: {
memberId: string;
};
}
@Component({ @Component({
mixins: [PlatformServiceMixin], mixins: [PlatformServiceMixin],
emits: ["close"],
}) })
export default class BulkMembersDialog extends Vue { export default class SetBulkVisibilityDialog extends Vue {
@Prop({ default: false }) visible!: boolean;
@Prop({ default: () => [] }) membersData!: MemberData[];
@Prop({ default: "" }) activeDid!: string; @Prop({ default: "" }) activeDid!: string;
@Prop({ default: "" }) apiServer!: string; @Prop({ default: "" }) apiServer!: string;
// isOrganizer: true = organizer mode (admit members), false = member mode (set visibility)
@Prop({ required: true }) isOrganizer!: boolean;
// Vue notification system // Vue notification system
$notify!: ( $notify!: (
@@ -158,9 +132,8 @@ export default class BulkMembersDialog extends Vue {
notify!: ReturnType<typeof createNotifyHelpers>; notify!: ReturnType<typeof createNotifyHelpers>;
// Component state // Component state
membersData: MemberData[] = [];
selectedMembers: string[] = []; selectedMembers: string[] = [];
visible = false; selectionInitialized = false;
// Constants // Constants
// In Vue templates, imported constants need to be explicitly made available to the template // In Vue templates, imported constants need to be explicitly made available to the template
@@ -185,46 +158,29 @@ export default class BulkMembersDialog extends Vue {
return selectedCount > 0 && selectedCount < this.membersData.length; return selectedCount > 0 && selectedCount < this.membersData.length;
} }
get title() { get shouldInitializeSelection() {
return this.isOrganizer // This method will initialize selection when the dialog opens
? "Admit Pending Members" if (!this.selectionInitialized) {
: "Add Members to Contacts"; this.initializeSelection();
} this.selectionInitialized = true;
}
get description() { return true;
return this.isOrganizer
? "Would you like to admit these members to the meeting and add them to your contacts?"
: "Would you like to add these members to your contacts?";
}
get buttonText() {
return this.isOrganizer ? "Admit + Add to Contacts" : "Add to Contacts";
}
get emptyStateText() {
return this.isOrganizer
? "No pending members to admit"
: "No members are not in your contacts";
} }
created() { created() {
this.notify = createNotifyHelpers(this.$notify); this.notify = createNotifyHelpers(this.$notify);
} }
open(members: MemberData[]) { initializeSelection() {
this.visible = true; // Reset selection when dialog opens
this.membersData = members; this.selectedMembers = [];
// Select all by default // Select all by default
this.selectedMembers = this.membersData.map((member) => member.did); this.selectedMembers = this.membersData.map((member) => member.did);
} }
close(notSelectedMemberDids: string[]) { resetSelection() {
this.visible = false; this.selectedMembers = [];
this.$emit("close", { notSelectedMemberDids: notSelectedMemberDids }); this.selectionInitialized = false;
}
cancel() {
this.close(this.membersData.map((member) => member.did));
} }
toggleSelectAll() { toggleSelectAll() {
@@ -252,158 +208,66 @@ export default class BulkMembersDialog extends Vue {
return this.selectedMembers.includes(memberDid); return this.selectedMembers.includes(memberDid);
} }
async processSelectedMembers() { async setVisibilityForSelectedMembers() {
try { try {
const selectedMembers: MemberData[] = this.membersData.filter((member) => const selectedMembers = this.membersData.filter((member) =>
this.selectedMembers.includes(member.did), this.selectedMembers.includes(member.did),
); );
const notSelectedMembers: MemberData[] = this.membersData.filter(
(member) => !this.selectedMembers.includes(member.did),
);
let admittedCount = 0; let successCount = 0;
let contactAddedCount = 0;
let errors = 0;
for (const member of selectedMembers) { for (const member of selectedMembers) {
try { try {
// Organizer mode: admit and register the member first // If they're not a contact yet, add them as a contact first
if (this.isOrganizer) {
await this.admitMember(member);
await this.registerMember(member);
admittedCount++;
}
// If they're not a contact yet, add them as a contact
if (!member.isContact) { if (!member.isContact) {
// Organizer mode: set isRegistered to true, member mode: undefined await this.addAsContact(member);
await this.addAsContact(
member,
this.isOrganizer ? true : undefined,
);
contactAddedCount++;
} }
// Set their seesMe to true // Set their seesMe to true
await this.updateContactVisibility(member.did, true); await this.updateContactVisibility(member.did, true);
successCount++;
} catch (error) { } catch (error) {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.error(`Error processing member ${member.did}:`, error); console.error(`Error processing member ${member.did}:`, error);
// Continue with other members even if one fails // Continue with other members even if one fails
errors++;
} }
} }
// Show success notification // Show success notification
if (this.isOrganizer) { this.$notify(
if (admittedCount > 0) { {
this.$notify( group: "alert",
{ type: "success",
group: "alert", title: "Visibility Set Successfully",
type: "success", text: `Visibility set for ${successCount} member${successCount === 1 ? "" : "s"}.`,
title: "Members Admitted Successfully", },
text: `${admittedCount} member${admittedCount === 1 ? "" : "s"} admitted and registered${contactAddedCount === 0 ? "" : admittedCount === contactAddedCount ? " and" : `, ${contactAddedCount}`}${contactAddedCount === 0 ? "" : ` added as contact${contactAddedCount === 1 ? "" : "s"}`}.`, 5000,
}, );
5000,
);
}
if (errors > 0) {
this.$notify(
{
group: "alert",
type: "danger",
title: "Error",
text: "Failed to fully admit some members. Work with them individually below.",
},
5000,
);
}
} else {
// Member mode: show contacts added notification
if (contactAddedCount > 0) {
this.$notify(
{
group: "alert",
type: "success",
title: "Contacts Added Successfully",
text: `${contactAddedCount} member${contactAddedCount === 1 ? "" : "s"} added as contact${contactAddedCount === 1 ? "" : "s"}.`,
},
5000,
);
}
}
this.close(notSelectedMembers.map((member) => member.did)); // Emit success event
this.$emit("success", successCount);
this.close();
} catch (error) { } catch (error) {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.error( console.error("Error setting visibility:", error);
`Error ${this.isOrganizer ? "admitting members" : "adding contacts"}:`,
error,
);
this.$notify( this.$notify(
{ {
group: "alert", group: "alert",
type: "danger", type: "danger",
title: "Error", title: "Error",
text: "Some errors occurred. Work with members individually below.", text: "Failed to set visibility for some members. Please try again.",
}, },
5000, 5000,
); );
} }
} }
async admitMember(member: { async addAsContact(member: { did: string; name: string }) {
did: string;
name: string;
member: { memberId: string };
}) {
try { try {
const headers = await getHeaders(this.activeDid); const newContact = {
await this.axios.put(
`${this.apiServer}/api/partner/groupOnboardMember/${member.member.memberId}`,
{ admitted: true },
{ headers },
);
} catch (err) {
// eslint-disable-next-line no-console
console.error("Error admitting member:", err);
throw err;
}
}
async registerMember(member: MemberData) {
try {
const contact: Contact = { did: member.did };
const result = await register(
this.activeDid,
this.apiServer,
this.axios,
contact,
);
if (result.success) {
if (result.embeddedRecordError) {
throw new Error(result.embeddedRecordError);
}
await this.$updateContact(member.did, { registered: true });
} else {
throw result;
}
} catch (err) {
// eslint-disable-next-line no-console
console.error("Error registering member:", err);
throw err;
}
}
async addAsContact(
member: { did: string; name: string },
isRegistered?: boolean,
) {
try {
const newContact: Contact = {
did: member.did, did: member.did,
name: member.name, name: member.name,
registered: isRegistered,
}; };
await this.$insertContact(newContact); await this.$insertContact(newContact);
@@ -446,20 +310,24 @@ export default class BulkMembersDialog extends Vue {
} }
showContactInfo() { showContactInfo() {
// isOrganizer: true = admit mode, false = visibility mode
const message = this.isOrganizer
? "This user is already your contact, but they are not yet admitted to the meeting."
: "This user is already your contact, but your activities are not visible to them yet.";
this.$notify( this.$notify(
{ {
group: "alert", group: "alert",
type: "info", type: "info",
title: "Contact Info", title: "Contact Info",
text: message, text: "This user is already your contact, but your activities are not visible to them yet.",
}, },
5000, 5000,
); );
} }
close() {
this.resetSelection();
this.$emit("close");
}
cancel() {
this.close();
}
} }
</script> </script>

View File

@@ -0,0 +1,66 @@
/** * 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>

View File

@@ -63,24 +63,23 @@ export default class SpecialEntityCard extends Vue {
conflictContext!: string; conflictContext!: string;
/** /**
* Computed CSS classes for the card * Computed CSS classes for the card container
*/ */
get cardClasses(): string { get cardClasses(): string {
const baseCardClasses = const baseClasses = "block";
"flex items-center gap-2 px-2 py-1.5 border-b border-slate-300";
if (!this.selectable || this.conflicted) { if (!this.selectable || this.conflicted) {
return `${baseCardClasses} *:opacity-50 cursor-not-allowed`; return `${baseClasses} cursor-not-allowed opacity-50`;
} }
return `${baseCardClasses} cursor-pointer hover:bg-slate-50`; return `${baseClasses} cursor-pointer`;
} }
/** /**
* Computed CSS classes for the icon * Computed CSS classes for the icon
*/ */
get iconClasses(): string { get iconClasses(): string {
const baseClasses = "text-[2rem]"; const baseClasses = "text-5xl mb-1";
if (this.conflicted) { if (this.conflicted) {
return `${baseClasses} text-slate-400`; return `${baseClasses} text-slate-400`;
@@ -102,7 +101,7 @@ export default class SpecialEntityCard extends Vue {
*/ */
get nameClasses(): string { get nameClasses(): string {
const baseClasses = const baseClasses =
"text-sm font-semibold text-ellipsis whitespace-nowrap overflow-hidden"; "text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden";
if (this.conflicted) { if (this.conflicted) {
return `${baseClasses} text-slate-400`; return `${baseClasses} text-slate-400`;

View File

@@ -510,6 +510,14 @@ export const NOTIFY_REGISTER_CONTACT = {
text: "Do you want to register them?", text: "Do you want to register them?",
}; };
// Used in: ContactsView.vue (showOnboardMeetingDialog method - complex modal for onboarding meeting)
export const NOTIFY_ONBOARDING_MEETING = {
title: "Onboarding Meeting",
text: "Would you like to start a new meeting?",
yesText: "Start New Meeting",
noText: "Join Existing Meeting",
};
// TestView.vue specific constants // TestView.vue specific constants
// Used in: TestView.vue (executeSql method - SQL error handling) // Used in: TestView.vue (executeSql method - SQL error handling)
export const NOTIFY_SQL_ERROR = { export const NOTIFY_SQL_ERROR = {

View File

@@ -70,6 +70,15 @@ export interface AxiosErrorResponse {
[key: string]: unknown; [key: string]: unknown;
} }
export interface UserInfo {
did: string;
name: string;
publicEncKey: string;
registered: boolean;
profileImageUrl?: string;
nextPublicEncKeyHash?: string;
}
export interface CreateAndSubmitClaimResult { export interface CreateAndSubmitClaimResult {
success: boolean; success: boolean;
embeddedRecordError?: string; embeddedRecordError?: string;

View File

@@ -4,4 +4,3 @@ export * from "./common";
export * from "./deepLinks"; export * from "./deepLinks";
export * from "./limits"; export * from "./limits";
export * from "./records"; export * from "./records";
export * from "./user";

View File

@@ -6,12 +6,3 @@ export interface UserInfo {
profileImageUrl?: string; profileImageUrl?: string;
nextPublicEncKeyHash?: string; nextPublicEncKeyHash?: string;
} }
export interface MemberData {
did: string;
name: string;
isContact: boolean;
member: {
memberId: string;
};
}

View File

@@ -42,6 +42,9 @@ import {
PlanActionClaim, PlanActionClaim,
RegisterActionClaim, RegisterActionClaim,
TenureClaim, TenureClaim,
} from "../interfaces/claims";
import {
GenericCredWrapper, GenericCredWrapper,
GenericVerifiableCredential, GenericVerifiableCredential,
AxiosErrorResponse, AxiosErrorResponse,
@@ -52,12 +55,14 @@ import {
QuantitativeValue, QuantitativeValue,
KeyMetaWithPrivate, KeyMetaWithPrivate,
KeyMetaMaybeWithPrivate, KeyMetaMaybeWithPrivate,
} from "../interfaces/common";
import {
OfferSummaryRecord, OfferSummaryRecord,
OfferToPlanSummaryRecord, OfferToPlanSummaryRecord,
PlanSummaryAndPreviousClaim, PlanSummaryAndPreviousClaim,
PlanSummaryRecord, PlanSummaryRecord,
} from "../interfaces"; } from "../interfaces/records";
import { logger, safeStringify } from "../utils/logger"; import { logger } from "../utils/logger";
import { PlatformServiceFactory } from "@/services/PlatformServiceFactory"; import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
import { APP_SERVER } from "@/constants/app"; import { APP_SERVER } from "@/constants/app";
import { SOMEONE_UNNAMED } from "@/constants/entities"; import { SOMEONE_UNNAMED } from "@/constants/entities";
@@ -1657,35 +1662,30 @@ export async function register(
message?: string; message?: string;
}>(url, { jwtEncoded: vcJwt }); }>(url, { jwtEncoded: vcJwt });
if (resp.data?.success?.embeddedRecordError) { if (resp.data?.success?.handleId) {
return { success: true };
} else if (resp.data?.success?.embeddedRecordError) {
let message = let message =
"There was some problem with the registration and so it may not be complete."; "There was some problem with the registration and so it may not be complete.";
if (typeof resp.data.success.embeddedRecordError === "string") { if (typeof resp.data.success.embeddedRecordError === "string") {
message += " " + resp.data.success.embeddedRecordError; message += " " + resp.data.success.embeddedRecordError;
} }
return { error: message }; return { error: message };
} else if (resp.data?.success?.handleId) {
return { success: true };
} else { } else {
logger.error("Registration non-thrown error:", JSON.stringify(resp.data)); logger.error("Registration error:", JSON.stringify(resp.data));
return { return { error: "Got a server error when registering." };
error:
(resp.data?.error as { message?: string })?.message ||
(resp.data?.error as string) ||
"Got a server error when registering.",
};
} }
} catch (error: unknown) { } catch (error: unknown) {
if (error && typeof error === "object") { if (error && typeof error === "object") {
const err = error as AxiosErrorResponse; const err = error as AxiosErrorResponse;
const errorMessage = const errorMessage =
err.response?.data?.error?.message || err.message ||
err.response?.data?.error || (err.response?.data &&
err.message; typeof err.response.data === "object" &&
logger.error( "message" in err.response.data
"Registration thrown error:", ? (err.response.data as { message: string }).message
errorMessage || JSON.stringify(err), : undefined);
); logger.error("Registration error:", errorMessage || JSON.stringify(err));
return { error: errorMessage || "Got a server error when registering." }; return { error: errorMessage || "Got a server error when registering." };
} }
return { error: "Got a server error when registering." }; return { error: "Got a server error when registering." };

View File

@@ -29,7 +29,6 @@ import {
faCircle, faCircle,
faCircleCheck, faCircleCheck,
faCircleInfo, faCircleInfo,
faCircleMinus,
faCirclePlus, faCirclePlus,
faCircleQuestion, faCircleQuestion,
faCircleRight, faCircleRight,
@@ -38,7 +37,6 @@ import {
faCoins, faCoins,
faComment, faComment,
faCopy, faCopy,
faCrown,
faDollar, faDollar,
faDownload, faDownload,
faEllipsis, faEllipsis,
@@ -60,7 +58,6 @@ import {
faHand, faHand,
faHandHoldingDollar, faHandHoldingDollar,
faHandHoldingHeart, faHandHoldingHeart,
faHourglassHalf,
faHouseChimney, faHouseChimney,
faImage, faImage,
faImagePortrait, faImagePortrait,
@@ -126,7 +123,6 @@ library.add(
faCircle, faCircle,
faCircleCheck, faCircleCheck,
faCircleInfo, faCircleInfo,
faCircleMinus,
faCirclePlus, faCirclePlus,
faCircleQuestion, faCircleQuestion,
faCircleRight, faCircleRight,
@@ -135,7 +131,6 @@ library.add(
faCoins, faCoins,
faComment, faComment,
faCopy, faCopy,
faCrown,
faDollar, faDollar,
faDownload, faDownload,
faEllipsis, faEllipsis,
@@ -157,7 +152,6 @@ library.add(
faHand, faHand,
faHandHoldingDollar, faHandHoldingDollar,
faHandHoldingHeart, faHandHoldingHeart,
faHourglassHalf,
faHouseChimney, faHouseChimney,
faImage, faImage,
faImagePortrait, faImagePortrait,

View File

@@ -19,6 +19,7 @@
<EntityGrid <EntityGrid
entity-type="people" entity-type="people"
:entities="people" :entities="people"
:max-items="5"
:active-did="activeDid" :active-did="activeDid"
:all-my-dids="allMyDids" :all-my-dids="allMyDids"
:all-contacts="people" :all-contacts="people"
@@ -38,6 +39,7 @@
<EntityGrid <EntityGrid
entity-type="projects" entity-type="projects"
:entities="projects" :entities="projects"
:max-items="3"
:active-did="activeDid" :active-did="activeDid"
:all-my-dids="allMyDids" :all-my-dids="allMyDids"
:all-contacts="people" :all-contacts="people"
@@ -150,8 +152,11 @@ export default class EntityGridFunctionPropTest extends Vue {
customPeopleFunction = ( customPeopleFunction = (
entities: Contact[], entities: Contact[],
_entityType: string, _entityType: string,
maxItems: number,
): Contact[] => { ): Contact[] => {
return entities.filter((person) => person.profileImageUrl); return entities
.filter((person) => person.profileImageUrl)
.slice(0, maxItems);
}; };
/** /**
@@ -160,6 +165,7 @@ export default class EntityGridFunctionPropTest extends Vue {
customProjectsFunction = ( customProjectsFunction = (
entities: PlanData[], entities: PlanData[],
_entityType: string, _entityType: string,
_maxItems: number,
): PlanData[] => { ): PlanData[] => {
return entities.sort((a, b) => a.name.localeCompare(b.name)).slice(0, 3); return entities.sort((a, b) => a.name.localeCompare(b.name)).slice(0, 3);
}; };
@@ -194,16 +200,16 @@ export default class EntityGridFunctionPropTest extends Vue {
*/ */
get displayedPeopleCount(): number { get displayedPeopleCount(): number {
if (this.useCustomFunction) { if (this.useCustomFunction) {
return this.customPeopleFunction(this.people, "people").length; return this.customPeopleFunction(this.people, "people", 5).length;
} }
return Math.min(10, this.people.length); // Initial batch size for infinite scroll return Math.min(5, this.people.length);
} }
get displayedProjectsCount(): number { get displayedProjectsCount(): number {
if (this.useCustomFunction) { if (this.useCustomFunction) {
return this.customProjectsFunction(this.projects, "projects").length; return this.customProjectsFunction(this.projects, "projects", 3).length;
} }
return Math.min(10, this.projects.length); // Initial batch size for infinite scroll return Math.min(7, this.projects.length);
} }
} }
</script> </script>

View File

@@ -970,20 +970,6 @@ export const PlatformServiceMixin = {
return this.$normalizeContacts(rawContacts); 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 * Ultra-concise shortcut for getting number of contacts
* @returns Promise<number> Total number of contacts * @returns Promise<number> Total number of contacts
@@ -2071,7 +2057,6 @@ declare module "@vue/runtime-core" {
// Specialized shortcuts - contacts cached, settings fresh // Specialized shortcuts - contacts cached, settings fresh
$contacts(): Promise<Contact[]>; $contacts(): Promise<Contact[]>;
$contactsByDateAdded(): Promise<Contact[]>;
$contactCount(): Promise<number>; $contactCount(): Promise<number>;
$settings(defaults?: Settings): Promise<Settings>; $settings(defaults?: Settings): Promise<Settings>;
$accountSettings(did?: string, defaults?: Settings): Promise<Settings>; $accountSettings(did?: string, defaults?: Settings): Promise<Settings>;

View File

@@ -346,7 +346,9 @@ export default class ContactEditView extends Vue {
// Notify success and redirect // Notify success and redirect
this.notify.success(NOTIFY_CONTACT_SAVED.message, TIMEOUTS.STANDARD); this.notify.success(NOTIFY_CONTACT_SAVED.message, TIMEOUTS.STANDARD);
this.$router.back(); (this.$router as Router).push({
path: "/did/" + encodeURIComponent(this.contact?.did || ""),
});
} }
} }
</script> </script>

View File

@@ -171,11 +171,9 @@ import {
CONTACT_IMPORT_ONE_URL_PATH_TIME_SAFARI, CONTACT_IMPORT_ONE_URL_PATH_TIME_SAFARI,
CONTACT_URL_PATH_ENDORSER_CH_OLD, CONTACT_URL_PATH_ENDORSER_CH_OLD,
} from "../libs/endorserServer"; } from "../libs/endorserServer";
import { import { GiveSummaryRecord } from "@/interfaces/records";
GiveSummaryRecord, import { UserInfo } from "@/interfaces/common";
UserInfo, import { VerifiableCredential } from "@/interfaces/claims-result";
VerifiableCredential,
} from "@/interfaces";
import * as libsUtil from "../libs/util"; import * as libsUtil from "../libs/util";
import { import {
generateSaveAndActivateIdentity, generateSaveAndActivateIdentity,

View File

@@ -12,20 +12,20 @@
</h1> </h1>
<!-- Back --> <!-- Back -->
<button <router-link
class="order-first text-lg text-center leading-none p-1" class="order-first text-lg text-center leading-none p-1"
@click="goBack()" :to="{ name: 'contacts' }"
> >
<font-awesome icon="chevron-left" class="block text-center w-[1em]" /> <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
</button> </router-link>
<!-- Help button --> <!-- Help button -->
<button <router-link
:to="{ name: 'help' }"
class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full" class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
@click="goToHelp()"
> >
<font-awesome icon="question" class="block text-center w-[1em]" /> <font-awesome icon="question" class="block text-center w-[1em]" />
</button> </router-link>
</div> </div>
<!-- Identity Details --> <!-- Identity Details -->
@@ -476,7 +476,7 @@ export default class DIDView extends Vue {
* Navigation helper methods * Navigation helper methods
*/ */
goBack() { goBack() {
this.$router.back(); this.$router.go(-1);
} }
/** /**

View File

@@ -536,6 +536,14 @@ export default class DiscoverView extends Vue {
} }
public async searchAll(beforeId?: string) { public async searchAll(beforeId?: string) {
// Guard against concurrent calls (allow pagination concurrent calls)
if (this.isLoading && !beforeId) {
logger.debug(
"[DiscoverView] ⚠️ searchAll() already in progress, skipping",
);
return;
}
this.resetCounts(); this.resetCounts();
if (!beforeId) { if (!beforeId) {
@@ -601,6 +609,14 @@ export default class DiscoverView extends Vue {
} }
public async searchStarred() { public async searchStarred() {
// Guard against concurrent calls
if (this.isLoading) {
logger.debug(
"[DiscoverView] ⚠️ searchStarred() already in progress, skipping",
);
return;
}
this.resetCounts(); this.resetCounts();
// Clear any previous results // Clear any previous results

View File

@@ -1091,17 +1091,27 @@ export default class HomeView extends Vue {
* - this.feedData (via processFeedResults) * - this.feedData (via processFeedResults)
* - this.feedLastViewedClaimId (via updateFeedLastViewedId) * - this.feedLastViewedClaimId (via updateFeedLastViewedId)
*/ */
async updateAllFeed() { async updateAllFeed(retryCount: number = 0) {
// Guard against concurrent calls (but allow retries)
if (this.isFeedLoading && retryCount === 0) {
logger.debug(
"[HomeView] ⚠️ updateAllFeed() already in progress, skipping",
);
return;
}
logger.debug("[HomeView] 🚀 updateAllFeed() called", { logger.debug("[HomeView] 🚀 updateAllFeed() called", {
isFeedLoading: this.isFeedLoading, isFeedLoading: this.isFeedLoading,
currentFeedDataLength: this.feedData.length, currentFeedDataLength: this.feedData.length,
isAnyFeedFilterOn: this.isAnyFeedFilterOn, isAnyFeedFilterOn: this.isAnyFeedFilterOn,
isFeedFilteredByVisible: this.isFeedFilteredByVisible, isFeedFilteredByVisible: this.isFeedFilteredByVisible,
isFeedFilteredByNearby: this.isFeedFilteredByNearby, isFeedFilteredByNearby: this.isFeedFilteredByNearby,
retryCount,
}); });
this.isFeedLoading = true; this.isFeedLoading = true;
let endOfResults = true; let endOfResults = true;
const MAX_RETRIES = 5; // Prevent infinite recursion
try { try {
const results = await this.retrieveGives( const results = await this.retrieveGives(
@@ -1127,11 +1137,24 @@ export default class HomeView extends Vue {
} catch (e) { } catch (e) {
logger.error("[HomeView] ❌ Error in updateAllFeed:", e); logger.error("[HomeView] ❌ Error in updateAllFeed:", e);
this.handleFeedError(e); this.handleFeedError(e);
// Don't retry on error
endOfResults = true;
} }
if (this.feedData.length === 0 && !endOfResults) { // Fixed recursive retry with guard and retry count
logger.debug("[HomeView] 🔄 No results after filtering, retrying..."); if (
await this.updateAllFeed(); this.feedData.length === 0 &&
!endOfResults &&
retryCount < MAX_RETRIES
) {
logger.debug("[HomeView] 🔄 No results after filtering, retrying...", {
retryCount: retryCount + 1,
maxRetries: MAX_RETRIES,
});
// Temporarily clear loading flag for recursive call
this.isFeedLoading = false;
await this.updateAllFeed(retryCount + 1);
return; // Exit after recursive call
} }
this.isFeedLoading = false; this.isFeedLoading = false;

View File

@@ -60,60 +60,12 @@
</div> </div>
<ImageMethodDialog ref="imageDialog" default-camera-mode="environment" /> <ImageMethodDialog ref="imageDialog" default-camera-mode="environment" />
<!-- Authorized Representative Selection --> <input
<div class="w-full flex items-stretch my-4"> v-model="agentDid"
<div type="text"
class="flex items-center gap-2 grow border border-slate-400 border-r-0 last:border-r px-3 py-2 rounded-l last:rounded overflow-hidden cursor-pointer hover:bg-slate-100" placeholder="Other Authorized Representative"
@click="openRepresentativeDialog" class="mt-4 block w-full rounded border border-slate-400 px-3 py-2"
>
<div>
<EntityIcon
v-if="selectedRepresentative"
:contact="selectedRepresentative"
class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
/>
<font-awesome v-else icon="user" class="text-slate-400" />
</div>
<div class="overflow-hidden">
<div
:class="{
'text-sm font-semibold': selectedRepresentative,
'text-slate-400': !selectedRepresentative,
}"
class="truncate"
>
{{
selectedRepresentative
? selectedRepresentative.name || AppString.NO_CONTACT_NAME
: "Assign Authorized Representative…"
}}
</div>
<div
v-if="selectedRepresentative"
class="text-xs text-slate-500 truncate"
>
{{ agentDid }}
</div>
</div>
</div>
<button
v-if="selectedRepresentative"
class="text-rose-600 px-3 py-2 border border-slate-400 border-l-0 rounded-r hover:bg-rose-600 hover:text-white hover:border-rose-600"
@click="unsetRepresentative"
>
<font-awesome icon="trash-can" />
</button>
</div>
<ProjectRepresentativeDialog
ref="representativeDialog"
:all-contacts="allContacts"
:active-did="activeDid"
:all-my-dids="allMyDids"
:notify="$notify"
@assign="handleRepresentativeAssigned"
/> />
<div class="mb-4"> <div class="mb-4">
<p v-if="shouldShowOwnershipWarning"> <p v-if="shouldShowOwnershipWarning">
<span class="text-red-500">Beware!</span> <span class="text-red-500">Beware!</span>
@@ -280,12 +232,9 @@ import { LMap, LMarker, LTileLayer } from "@vue-leaflet/vue-leaflet";
import { RouteLocationNormalizedLoaded, Router } from "vue-router"; import { RouteLocationNormalizedLoaded, Router } from "vue-router";
import { LeafletMouseEvent } from "leaflet"; import { LeafletMouseEvent } from "leaflet";
import EntityIcon from "../components/EntityIcon.vue";
import ImageMethodDialog from "../components/ImageMethodDialog.vue"; import ImageMethodDialog from "../components/ImageMethodDialog.vue";
import ProjectRepresentativeDialog from "../components/ProjectRepresentativeDialog.vue";
import QuickNav from "../components/QuickNav.vue"; import QuickNav from "../components/QuickNav.vue";
import { import {
AppString,
DEFAULT_IMAGE_API_SERVER, DEFAULT_IMAGE_API_SERVER,
DEFAULT_PARTNER_API_SERVER, DEFAULT_PARTNER_API_SERVER,
NotificationIface, NotificationIface,
@@ -319,7 +268,6 @@ import {
retrieveAccountCount, retrieveAccountCount,
retrieveFullyDecryptedAccount, retrieveFullyDecryptedAccount,
} from "../libs/util"; } from "../libs/util";
import { Contact } from "../db/tables/contacts";
import { import {
EventTemplate, EventTemplate,
@@ -375,15 +323,7 @@ import { logger } from "../utils/logger";
*/ */
@Component({ @Component({
components: { components: { ImageMethodDialog, LMap, LMarker, LTileLayer, QuickNav },
EntityIcon,
ImageMethodDialog,
ProjectRepresentativeDialog,
LMap,
LMarker,
LTileLayer,
QuickNav,
},
mixins: [PlatformServiceMixin], mixins: [PlatformServiceMixin],
}) })
export default class NewEditProjectView extends Vue { export default class NewEditProjectView extends Vue {
@@ -394,9 +334,6 @@ export default class NewEditProjectView extends Vue {
// Notification helpers // Notification helpers
private notify!: ReturnType<typeof createNotifyHelpers>; private notify!: ReturnType<typeof createNotifyHelpers>;
// Constants
AppString = AppString;
/** /**
* Display error notification to user * Display error notification to user
* Provides consistent error messaging with 5-second timeout * Provides consistent error messaging with 5-second timeout
@@ -409,8 +346,6 @@ export default class NewEditProjectView extends Vue {
// Component state properties // Component state properties
activeDid = ""; activeDid = "";
agentDid = ""; agentDid = "";
allContacts: Array<Contact> = [];
allMyDids: string[] = [];
apiServer = ""; apiServer = "";
endDateInput?: string; endDateInput?: string;
endTimeInput?: string; endTimeInput?: string;
@@ -457,24 +392,16 @@ export default class NewEditProjectView extends Vue {
const activeIdentity = await (this as any).$getActiveIdentity(); const activeIdentity = await (this as any).$getActiveIdentity();
this.activeDid = activeIdentity.activeDid || ""; this.activeDid = activeIdentity.activeDid || "";
// Get all user's DIDs
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.allMyDids = await (this as any).$getAllAccountDids();
// Load contacts sorted by date added (newest first) for consistent "Recently Added" display
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.allContacts = await (this as any).$contactsByDateAdded();
this.apiServer = settings.apiServer || ""; this.apiServer = settings.apiServer || "";
this.showGeneralAdvanced = !!settings.showGeneralAdvanced; this.showGeneralAdvanced = !!settings.showGeneralAdvanced;
this.projectId = (this.$route.query["projectId"] as string) || ""; this.projectId = (this.$route.query["projectId"] as string) || "";
if (this.isSavedProject()) { if (this.projectId) {
if (this.numAccounts === 0) { if (this.numAccounts === 0) {
this.notify.error(NOTIFY_PROJECT_ACCOUNT_LOADING_ERROR.message); this.notify.error(NOTIFY_PROJECT_ACCOUNT_LOADING_ERROR.message);
} else { } else {
this.loadProject(this.activeDid, this.projectId); this.loadProject(this.activeDid);
} }
} }
} }
@@ -484,9 +411,11 @@ export default class NewEditProjectView extends Vue {
* Retrieves project information from the API and populates form fields * Retrieves project information from the API and populates form fields
* @param userDid - User's decentralized identifier * @param userDid - User's decentralized identifier
*/ */
async loadProject(userDid: string, projectId: string) { async loadProject(userDid: string) {
const url = const url =
this.apiServer + "/api/claim/byHandle/" + encodeURIComponent(projectId); this.apiServer +
"/api/claim/byHandle/" +
encodeURIComponent(this.projectId);
const headers = await getHeaders(userDid); const headers = await getHeaders(userDid);
try { try {
@@ -503,12 +432,6 @@ export default class NewEditProjectView extends Vue {
} }
if (this.fullClaim?.agent?.identifier) { if (this.fullClaim?.agent?.identifier) {
this.agentDid = this.fullClaim.agent.identifier; this.agentDid = this.fullClaim.agent.identifier;
if (this.activeDid !== this.projectIssuerDid) {
this.agentDid = this.projectIssuerDid;
this.notify.warning(
"You were previously the agent, so the agent has been set to the previous owner. You can change it.",
);
}
} }
if (this.fullClaim.startTime) { if (this.fullClaim.startTime) {
const localDateTime = DateTime.fromISO( const localDateTime = DateTime.fromISO(
@@ -613,7 +536,7 @@ export default class NewEditProjectView extends Vue {
private async saveProject() { private async saveProject() {
// Make a claim // Make a claim
const vcClaim: PlanActionClaim = this.fullClaim; const vcClaim: PlanActionClaim = this.fullClaim;
if (this.isSavedProject()) { if (this.projectId) {
vcClaim.lastClaimId = this.lastClaimJwtId; vcClaim.lastClaimId = this.lastClaimJwtId;
} }
if (this.agentDid) { if (this.agentDid) {
@@ -947,10 +870,6 @@ export default class NewEditProjectView extends Vue {
this.longitude = event.latlng.lng; this.longitude = event.latlng.lng;
} }
private isSavedProject(): boolean {
return !!this.projectId;
}
/** /**
* Computed property for character count display * Computed property for character count display
* Shows current description length and maximum character limit * Shows current description length and maximum character limit
@@ -966,7 +885,6 @@ export default class NewEditProjectView extends Vue {
*/ */
get shouldShowOwnershipWarning(): boolean { get shouldShowOwnershipWarning(): boolean {
return ( return (
this.isSavedProject() &&
this.activeDid !== this.projectIssuerDid && this.activeDid !== this.projectIssuerDid &&
this.agentDid !== this.projectIssuerDid this.agentDid !== this.projectIssuerDid
); );
@@ -1043,37 +961,5 @@ export default class NewEditProjectView extends Vue {
get shouldShowSpinner(): boolean { get shouldShowSpinner(): boolean {
return !this.isHiddenSpinner; return !this.isHiddenSpinner;
} }
/**
* Computed property for selected representative contact
* Derives the contact from agentDid by finding it in allContacts
*/
get selectedRepresentative(): Contact | null {
if (!this.agentDid) {
return null;
}
return this.allContacts.find((c) => c.did === this.agentDid) || null;
}
/**
* Open the representative selection dialog
*/
openRepresentativeDialog(): void {
(this.$refs.representativeDialog as ProjectRepresentativeDialog).open();
}
/**
* Handle representative assignment from dialog
*/
handleRepresentativeAssigned(contact: Contact): void {
this.agentDid = contact.did;
}
/**
* Unset the representative and revert to initial state
*/
unsetRepresentative(): void {
this.agentDid = "";
}
} }
</script> </script>

View File

@@ -77,7 +77,7 @@
v-if="meetings.length === 0 && !isRegistered" v-if="meetings.length === 0 && !isRegistered"
class="text-center text-gray-500 py-8" class="text-center text-gray-500 py-8"
> >
No onboarding meetings are available No onboarding meetings available
</p> </p>
</div> </div>

View File

@@ -473,7 +473,6 @@ export default class OnboardMeetingView extends Vue {
); );
return; return;
} }
const password: string = this.newOrUpdatedMeetingInputs.password;
// create content with user's name & DID encrypted with password // create content with user's name & DID encrypted with password
const content = { const content = {
@@ -483,7 +482,7 @@ export default class OnboardMeetingView extends Vue {
}; };
const encryptedContent = await encryptMessage( const encryptedContent = await encryptMessage(
JSON.stringify(content), JSON.stringify(content),
password, this.newOrUpdatedMeetingInputs.password,
); );
const headers = await getHeaders(this.activeDid); const headers = await getHeaders(this.activeDid);
@@ -506,11 +505,6 @@ export default class OnboardMeetingView extends Vue {
this.newOrUpdatedMeetingInputs = null; this.newOrUpdatedMeetingInputs = null;
this.notify.success(NOTIFY_MEETING_CREATED.message, TIMEOUTS.STANDARD); this.notify.success(NOTIFY_MEETING_CREATED.message, TIMEOUTS.STANDARD);
// redirect to the same page with the password parameter set
this.$router.push({
name: "onboard-meeting-setup",
query: { password: password },
});
} else { } else {
throw { response: response }; throw { response: response };
} }