Compare commits
1 Commits
entity-sel
...
contact-pa
| Author | SHA1 | Date | |
|---|---|---|---|
| dca8d48feb |
@@ -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
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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.
|
||||||
|
|||||||
@@ -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
4
package-lock.json
generated
@@ -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",
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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 px-4 py-6 rounded-lg w-full max-w-lg max-h-[90%] overflow-y-auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Markdown content styling to restore list elements */
|
/* Markdown content styling to restore list elements */
|
||||||
|
|||||||
@@ -134,9 +134,8 @@ 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 { MemberData } from "@/interfaces";
|
||||||
import { setVisibilityUtil, getHeaders, register } from "@/libs/endorserServer";
|
import { setVisibilityUtil, getHeaders } from "@/libs/endorserServer";
|
||||||
import { createNotifyHelpers } from "@/utils/notify";
|
import { createNotifyHelpers } from "@/utils/notify";
|
||||||
import { Contact } from "@/db/tables/contacts";
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
mixins: [PlatformServiceMixin],
|
mixins: [PlatformServiceMixin],
|
||||||
@@ -254,37 +253,33 @@ export default class BulkMembersDialog extends Vue {
|
|||||||
|
|
||||||
async handleMainAction() {
|
async handleMainAction() {
|
||||||
if (this.dialogType === "admit") {
|
if (this.dialogType === "admit") {
|
||||||
await this.organizerAdmitAndAddWithVisibility();
|
await this.admitWithVisibility();
|
||||||
} else {
|
} else {
|
||||||
await this.memberAddContactWithVisibility();
|
await this.addContactWithVisibility();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async organizerAdmitAndAddWithVisibility() {
|
async admitWithVisibility() {
|
||||||
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(
|
const notSelectedMembers = this.membersData.filter(
|
||||||
(member) => !this.selectedMembers.includes(member.did),
|
(member) => !this.selectedMembers.includes(member.did),
|
||||||
);
|
);
|
||||||
|
|
||||||
let admittedCount = 0;
|
let admittedCount = 0;
|
||||||
let contactAddedCount = 0;
|
let contactAddedCount = 0;
|
||||||
let errors = 0;
|
|
||||||
|
|
||||||
for (const member of selectedMembers) {
|
for (const member of selectedMembers) {
|
||||||
try {
|
try {
|
||||||
// First, admit the member
|
// First, admit the member
|
||||||
await this.admitMember(member);
|
await this.admitMember(member);
|
||||||
|
|
||||||
// Register them
|
|
||||||
await this.registerMember(member);
|
|
||||||
admittedCount++;
|
admittedCount++;
|
||||||
|
|
||||||
// If they're not a contact yet, add them as a contact
|
// If they're not a contact yet, add them as a contact
|
||||||
if (!member.isContact) {
|
if (!member.isContact) {
|
||||||
await this.addAsContact(member, true);
|
await this.addAsContact(member);
|
||||||
contactAddedCount++;
|
contactAddedCount++;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -294,33 +289,19 @@ export default class BulkMembersDialog extends Vue {
|
|||||||
// 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 (admittedCount > 0) {
|
|
||||||
this.$notify(
|
this.$notify(
|
||||||
{
|
{
|
||||||
group: "alert",
|
group: "alert",
|
||||||
type: "success",
|
type: "success",
|
||||||
title: "Members Admitted Successfully",
|
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"}`}.`,
|
text: `${admittedCount} member${admittedCount === 1 ? "" : "s"} admitted${contactAddedCount === 0 ? "" : admittedCount === contactAddedCount ? " and" : `, ${contactAddedCount}`}${contactAddedCount === 0 ? "" : ` added as contact${contactAddedCount === 1 ? "" : "s"}`}.`,
|
||||||
},
|
},
|
||||||
10000,
|
10000,
|
||||||
);
|
);
|
||||||
}
|
|
||||||
if (errors > 0) {
|
|
||||||
this.$notify(
|
|
||||||
{
|
|
||||||
group: "alert",
|
|
||||||
type: "danger",
|
|
||||||
title: "Error",
|
|
||||||
text: "Failed to fully admit some members. Work with them individually below.",
|
|
||||||
},
|
|
||||||
5000,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.close(notSelectedMembers.map((member) => member.did));
|
this.close(notSelectedMembers.map((member) => member.did));
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@@ -331,19 +312,19 @@ export default class BulkMembersDialog extends Vue {
|
|||||||
group: "alert",
|
group: "alert",
|
||||||
type: "danger",
|
type: "danger",
|
||||||
title: "Error",
|
title: "Error",
|
||||||
text: "Some errors occurred. Work with members individually below.",
|
text: "Failed to admit some members. Please try again.",
|
||||||
},
|
},
|
||||||
5000,
|
5000,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async memberAddContactWithVisibility() {
|
async addContactWithVisibility() {
|
||||||
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(
|
const notSelectedMembers = this.membersData.filter(
|
||||||
(member) => !this.selectedMembers.includes(member.did),
|
(member) => !this.selectedMembers.includes(member.did),
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -353,7 +334,7 @@ export default class BulkMembersDialog extends Vue {
|
|||||||
try {
|
try {
|
||||||
// If they're not a contact yet, add them as a contact first
|
// If they're not a contact yet, add them as a contact first
|
||||||
if (!member.isContact) {
|
if (!member.isContact) {
|
||||||
await this.addAsContact(member, undefined);
|
await this.addAsContact(member);
|
||||||
contactsAddedCount++;
|
contactsAddedCount++;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -386,7 +367,7 @@ export default class BulkMembersDialog extends Vue {
|
|||||||
group: "alert",
|
group: "alert",
|
||||||
type: "danger",
|
type: "danger",
|
||||||
title: "Error",
|
title: "Error",
|
||||||
text: "Some errors occurred. Work with members individually below.",
|
text: "Failed to add some members as contacts. Please try again.",
|
||||||
},
|
},
|
||||||
5000,
|
5000,
|
||||||
);
|
);
|
||||||
@@ -412,39 +393,11 @@ export default class BulkMembersDialog extends Vue {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async registerMember(member: MemberData) {
|
async addAsContact(member: { did: string; name: string }) {
|
||||||
try {
|
try {
|
||||||
const contact: Contact = { did: member.did };
|
const newContact = {
|
||||||
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);
|
||||||
|
|||||||
@@ -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,49 +38,6 @@ 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 -->
|
|
||||||
<template v-if="!searchTerm.trim()">
|
|
||||||
<!-- Recently Added Section -->
|
|
||||||
<template v-if="recentContacts.length > 0">
|
|
||||||
<li
|
|
||||||
class="text-xs font-semibold text-slate-500 uppercase pt-5 pb-1.5 px-2 border-b border-slate-300"
|
|
||||||
>
|
|
||||||
Recently Added
|
|
||||||
</li>
|
|
||||||
<PersonCard
|
|
||||||
v-for="person in recentContacts"
|
|
||||||
:key="person.did"
|
|
||||||
:person="person"
|
|
||||||
:conflicted="isPersonConflicted(person.did)"
|
|
||||||
:show-time-icon="true"
|
|
||||||
:notify="notify"
|
|
||||||
:conflict-context="conflictContext"
|
|
||||||
@person-selected="handlePersonSelected"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- Alphabetical Section -->
|
|
||||||
<template v-if="alphabeticalContacts.length > 0">
|
|
||||||
<li
|
|
||||||
class="text-xs font-semibold text-slate-500 uppercase pt-5 pb-1.5 px-2 border-b border-slate-300"
|
|
||||||
>
|
|
||||||
Everyone Else
|
|
||||||
</li>
|
|
||||||
<PersonCard
|
|
||||||
v-for="person in alphabeticalContacts"
|
|
||||||
:key="person.did"
|
|
||||||
:person="person"
|
|
||||||
:conflicted="isPersonConflicted(person.did)"
|
|
||||||
:show-time-icon="true"
|
|
||||||
:notify="notify"
|
|
||||||
:conflict-context="conflictContext"
|
|
||||||
@person-selected="handlePersonSelected"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- When searching: show filtered results normally -->
|
|
||||||
<template v-else>
|
|
||||||
<PersonCard
|
<PersonCard
|
||||||
v-for="person in displayedEntities as Contact[]"
|
v-for="person in displayedEntities as Contact[]"
|
||||||
:key="person.did"
|
:key="person.did"
|
||||||
@@ -136,7 +49,6 @@ projects, and special entities with selection. * * @author Matthew Raymer */
|
|||||||
@person-selected="handlePersonSelected"
|
@person-selected="handlePersonSelected"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-else-if="entityType === 'projects'">
|
<template v-else-if="entityType === 'projects'">
|
||||||
<ProjectCard
|
<ProjectCard
|
||||||
@@ -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,21 +112,14 @@ export default class EntityGrid extends Vue {
|
|||||||
@Prop({ required: true })
|
@Prop({ required: true })
|
||||||
entityType!: "people" | "projects";
|
entityType!: "people" | "projects";
|
||||||
|
|
||||||
// Search state
|
|
||||||
searchTerm = "";
|
|
||||||
isSearching = false;
|
|
||||||
searchTimeout: NodeJS.Timeout | null = null;
|
|
||||||
filteredEntities: Contact[] | PlanData[] = [];
|
|
||||||
|
|
||||||
// Infinite scroll state
|
|
||||||
displayedCount = INITIAL_BATCH_SIZE;
|
|
||||||
infiniteScrollReset?: () => void;
|
|
||||||
scrollContainer?: HTMLElement;
|
|
||||||
|
|
||||||
/** Array of entities to display */
|
/** Array of entities to display */
|
||||||
@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;
|
||||||
@@ -232,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;
|
||||||
@@ -248,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[];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -283,60 +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 3 most recently added contacts (when showing contacts and not searching)
|
|
||||||
*/
|
|
||||||
get recentContacts(): Contact[] {
|
|
||||||
if (this.entityType !== "people" || this.searchTerm.trim()) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
// Entities are already sorted by date added (newest first)
|
|
||||||
return (this.entities as Contact[]).slice(0, 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the remaining contacts sorted alphabetically (when showing contacts and not searching)
|
|
||||||
* Uses infinite scroll to control how many are displayed
|
|
||||||
*/
|
|
||||||
get alphabeticalContacts(): Contact[] {
|
|
||||||
if (this.entityType !== "people" || this.searchTerm.trim()) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
// Skip the first 3 (recent contacts) and sort the rest alphabetically
|
|
||||||
// Create a copy to avoid mutating the original array
|
|
||||||
const remaining = (this.entities as Contact[]).slice(RECENT_CONTACTS_COUNT);
|
|
||||||
const sorted = [...remaining].sort((a: Contact, b: Contact) => {
|
|
||||||
// Sort alphabetically by name, falling back to DID if name is missing
|
|
||||||
const nameA = (a.name || a.did).toLowerCase();
|
|
||||||
const nameB = (b.name || b.did).toLowerCase();
|
|
||||||
return nameA.localeCompare(nameB);
|
|
||||||
});
|
|
||||||
// Apply infinite scroll: show based on displayedCount (minus the 3 recent)
|
|
||||||
const toShow = Math.max(0, this.displayedCount - RECENT_CONTACTS_COUNT);
|
|
||||||
return sorted.slice(0, toShow);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -350,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
|
||||||
*/
|
*/
|
||||||
@@ -423,144 +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 = 3 recent + all alphabetical
|
|
||||||
const remaining = (this.entities as Contact[]).slice(RECENT_CONTACTS_COUNT);
|
|
||||||
const totalAvailable = RECENT_CONTACTS_COUNT + remaining.length;
|
|
||||||
return this.displayedCount < totalAvailable;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Initialize infinite scroll on mount
|
|
||||||
*/
|
|
||||||
mounted(): void {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
const container = this.$refs.scrollContainer as HTMLElement;
|
|
||||||
|
|
||||||
if (container) {
|
|
||||||
const { reset } = useInfiniteScroll(
|
|
||||||
container,
|
|
||||||
() => {
|
|
||||||
// Load more: increment displayedCount
|
|
||||||
this.displayedCount += INCREMENT_SIZE;
|
|
||||||
},
|
|
||||||
{
|
|
||||||
distance: 50, // pixels from bottom
|
|
||||||
canLoadMore: () => this.canLoadMore(),
|
|
||||||
},
|
|
||||||
);
|
|
||||||
this.infiniteScrollReset = reset;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Emit methods using @Emit decorator
|
// Emit methods using @Emit decorator
|
||||||
|
|
||||||
@Emit("entity-selected")
|
@Emit("entity-selected")
|
||||||
@@ -573,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>
|
||||||
|
|
||||||
|
|||||||
@@ -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
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -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();
|
||||||
|
|
||||||
|
|||||||
@@ -99,7 +99,7 @@
|
|||||||
<font-awesome
|
<font-awesome
|
||||||
v-if="member.did === activeDid"
|
v-if="member.did === activeDid"
|
||||||
icon="hand"
|
icon="hand"
|
||||||
class="fa-fw text-slate-500"
|
class="fa-fw text-blue-500"
|
||||||
/>
|
/>
|
||||||
<font-awesome
|
<font-awesome
|
||||||
v-if="
|
v-if="
|
||||||
@@ -113,10 +113,10 @@
|
|||||||
</h3>
|
</h3>
|
||||||
<div
|
<div
|
||||||
v-if="!getContactFor(member.did) && member.did !== activeDid"
|
v-if="!getContactFor(member.did) && member.did !== activeDid"
|
||||||
class="flex items-center gap-1.5 ml-2 ms-1"
|
class="flex items-center gap-1.5 ms-1"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
class="btn-add-contact ml-2"
|
class="btn-add-contact"
|
||||||
title="Add as contact"
|
title="Add as contact"
|
||||||
@click="addAsContact(member)"
|
@click="addAsContact(member)"
|
||||||
>
|
>
|
||||||
@@ -124,7 +124,7 @@
|
|||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="btn-info-contact ml-2"
|
class="btn-info-contact"
|
||||||
title="Contact Info"
|
title="Contact Info"
|
||||||
@click="
|
@click="
|
||||||
informAboutAddingContact(
|
informAboutAddingContact(
|
||||||
@@ -135,27 +135,6 @@
|
|||||||
<font-awesome icon="circle-info" />
|
<font-awesome icon="circle-info" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
<span
|
<span
|
||||||
v-if="
|
v-if="
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -2,27 +2,26 @@
|
|||||||
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
|
<ProjectIcon
|
||||||
:entity-id="project.handleId"
|
:entity-id="project.handleId"
|
||||||
:icon-size="48"
|
:icon-size="48"
|
||||||
:image-url="project.image"
|
:image-url="project.image"
|
||||||
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"
|
||||||
/>
|
/>
|
||||||
|
</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 }}
|
{{ project.name || unnamedProject }}
|
||||||
</h3>
|
</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>
|
||||||
|
|
||||||
|
|||||||
66
src/components/ShowAllCard.vue
Normal file
66
src/components/ShowAllCard.vue
Normal 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>
|
||||||
@@ -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`;
|
||||||
|
|||||||
@@ -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 = {
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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";
|
|
||||||
|
|||||||
@@ -42,6 +42,9 @@ import {
|
|||||||
PlanActionClaim,
|
PlanActionClaim,
|
||||||
RegisterActionClaim,
|
RegisterActionClaim,
|
||||||
TenureClaim,
|
TenureClaim,
|
||||||
|
} from "../interfaces/claims";
|
||||||
|
|
||||||
|
import {
|
||||||
GenericCredWrapper,
|
GenericCredWrapper,
|
||||||
GenericVerifiableCredential,
|
GenericVerifiableCredential,
|
||||||
AxiosErrorResponse,
|
AxiosErrorResponse,
|
||||||
@@ -52,11 +55,13 @@ 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, safeStringify } 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";
|
||||||
@@ -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." };
|
||||||
|
|||||||
@@ -5,5 +5,6 @@ export interface UserProfile {
|
|||||||
locLat2?: number;
|
locLat2?: number;
|
||||||
locLon2?: number;
|
locLon2?: number;
|
||||||
issuerDid: string;
|
issuerDid: string;
|
||||||
|
issuerDidVisibleToDids?: Array<string>;
|
||||||
rowId?: string; // set on profile retrieved from server
|
rowId?: string; // set on profile retrieved from server
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>;
|
||||||
|
|||||||
@@ -2171,7 +2171,7 @@ export default class AccountViewView extends Vue {
|
|||||||
const headers = await getHeaders(did);
|
const headers = await getHeaders(did);
|
||||||
|
|
||||||
const response = await this.axios.delete(
|
const response = await this.axios.delete(
|
||||||
`${this.partnerApiServer}/api/partner/userProfile/${did}`,
|
`${this.partnerApiServer}/api/partner/userProfile`,
|
||||||
{ headers },
|
{ headers },
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -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 };
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -54,6 +54,161 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Issuer Information Section -->
|
||||||
|
<div v-if="profile" class="mt-6">
|
||||||
|
<div
|
||||||
|
v-if="issuerContact"
|
||||||
|
class="bg-blue-50 border border-blue-200 rounded-lg p-4"
|
||||||
|
>
|
||||||
|
<h3 class="text-lg font-semibold text-blue-800 mb-2">
|
||||||
|
<font-awesome icon="user-check" class="fa-fw mr-2" />
|
||||||
|
Contact Information
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-blue-700 mb-3">
|
||||||
|
{{ issuerContact.name || "Contact" }} is in your contacts.
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
v-if="
|
||||||
|
issuerContact.contactMethods &&
|
||||||
|
issuerContact.contactMethods.length > 0
|
||||||
|
"
|
||||||
|
class="space-y-2"
|
||||||
|
>
|
||||||
|
<h4 class="font-medium text-blue-800">Contact Methods:</h4>
|
||||||
|
<div
|
||||||
|
v-for="method in issuerContact.contactMethods"
|
||||||
|
:key="method.label"
|
||||||
|
class="flex items-center text-sm"
|
||||||
|
>
|
||||||
|
<span class="font-medium text-blue-700 w-20"
|
||||||
|
>{{ method.label }}:</span
|
||||||
|
>
|
||||||
|
<span class="text-blue-600">{{ method.value }}</span>
|
||||||
|
<span class="text-xs text-blue-500 ml-2"
|
||||||
|
>({{ method.type }})</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-else
|
||||||
|
class="bg-yellow-50 border border-yellow-200 rounded-lg p-4"
|
||||||
|
>
|
||||||
|
<h3 class="text-lg font-semibold text-yellow-800 mb-2">
|
||||||
|
<font-awesome icon="user-plus" class="fa-fw mr-2" />
|
||||||
|
Not in Contacts
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-yellow-700 mb-3">
|
||||||
|
This person has been connected but they're not in your contacts on
|
||||||
|
this device.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
class="text-blue-600 hover:text-blue-800 font-medium text-sm flex items-center"
|
||||||
|
@click="toggleConnectInstructions"
|
||||||
|
>
|
||||||
|
<font-awesome icon="link" class="fa-fw mr-1" />
|
||||||
|
Connect Me...
|
||||||
|
<font-awesome
|
||||||
|
:icon="showConnectInstructions ? 'chevron-up' : 'chevron-down'"
|
||||||
|
class="fa-fw ml-1"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Expandable Instructions -->
|
||||||
|
<div
|
||||||
|
v-if="showConnectInstructions"
|
||||||
|
class="mt-4 p-4 bg-white border border-yellow-300 rounded-md"
|
||||||
|
>
|
||||||
|
<h4 class="font-medium text-gray-800 mb-3">How to Connect:</h4>
|
||||||
|
|
||||||
|
<!-- Copy Profile Link Instructions -->
|
||||||
|
<div class="mb-4">
|
||||||
|
<p class="text-sm text-gray-700 mb-2">
|
||||||
|
1. Copy a deep link to this profile and send it to someone in
|
||||||
|
your network:
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
class="bg-blue-500 hover:bg-blue-600 text-white text-sm px-3 py-1 rounded flex items-center"
|
||||||
|
@click="onCopyLinkClick()"
|
||||||
|
>
|
||||||
|
<font-awesome icon="copy" class="fa-fw mr-1" />
|
||||||
|
Copy Profile Link
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contact List -->
|
||||||
|
<div class="mb-4">
|
||||||
|
<p class="text-sm text-gray-700 mb-2">
|
||||||
|
2. Send the link to one of these people:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Contacts from issuerDidVisibleToDids -->
|
||||||
|
<div v-if="visibleToContacts.length > 0" class="mb-3">
|
||||||
|
<h5 class="text-xs font-medium text-gray-600 mb-2">
|
||||||
|
People who can see this profile:
|
||||||
|
</h5>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<div
|
||||||
|
v-for="contact in visibleToContacts"
|
||||||
|
:key="contact.did"
|
||||||
|
class="flex items-center text-sm bg-gray-50 p-2 rounded"
|
||||||
|
>
|
||||||
|
<font-awesome
|
||||||
|
icon="user"
|
||||||
|
class="fa-fw text-gray-500 mr-2"
|
||||||
|
/>
|
||||||
|
<span class="font-medium">{{
|
||||||
|
contact.name || "Unnamed Contact"
|
||||||
|
}}</span>
|
||||||
|
<span class="text-xs text-gray-500 ml-2"
|
||||||
|
>({{ contact.did.substring(0, 20) }}...)</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nearest Neighbors -->
|
||||||
|
<div v-if="nearestNeighbors.length > 0" class="mb-3">
|
||||||
|
<h5 class="text-xs font-medium text-gray-600 mb-2">
|
||||||
|
<span v-if="visibleToContacts.length > 0"
|
||||||
|
>Other nearby people:</span
|
||||||
|
>
|
||||||
|
<span v-else>Nearby people:</span>
|
||||||
|
</h5>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<div
|
||||||
|
v-for="neighbor in nearestNeighbors"
|
||||||
|
:key="neighbor.issuerDid"
|
||||||
|
class="flex items-center text-sm bg-gray-50 p-2 rounded"
|
||||||
|
>
|
||||||
|
<font-awesome
|
||||||
|
icon="user"
|
||||||
|
class="fa-fw text-gray-500 mr-2"
|
||||||
|
/>
|
||||||
|
<span class="font-medium">{{
|
||||||
|
neighborDisplayName(neighbor)
|
||||||
|
}}</span>
|
||||||
|
<span class="text-xs text-gray-500 ml-2"
|
||||||
|
>({{ neighbor.issuerDid.substring(0, 20) }}...)</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Loading state for nearest neighbors -->
|
||||||
|
<div
|
||||||
|
v-if="loadingNearestNeighbors"
|
||||||
|
class="text-sm text-gray-500 flex items-center"
|
||||||
|
>
|
||||||
|
<font-awesome icon="spinner" class="fa-spin fa-fw mr-2" />
|
||||||
|
Loading nearby people...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Map for first coordinates -->
|
<!-- Map for first coordinates -->
|
||||||
<div v-if="hasFirstLocation" class="mt-4">
|
<div v-if="hasFirstLocation" class="mt-4">
|
||||||
<h2 class="text-lg font-semibold">Location</h2>
|
<h2 class="text-lg font-semibold">Location</h2>
|
||||||
@@ -113,7 +268,12 @@ import {
|
|||||||
APP_SERVER,
|
APP_SERVER,
|
||||||
} from "../constants/app";
|
} from "../constants/app";
|
||||||
import { Contact } from "../db/tables/contacts";
|
import { Contact } from "../db/tables/contacts";
|
||||||
import { didInfo, getHeaders } from "../libs/endorserServer";
|
import {
|
||||||
|
didInfo,
|
||||||
|
getHeaders,
|
||||||
|
isHiddenDid,
|
||||||
|
contactForDid,
|
||||||
|
} from "../libs/endorserServer";
|
||||||
import { UserProfile } from "../libs/partnerServer";
|
import { UserProfile } from "../libs/partnerServer";
|
||||||
import { retrieveAccountDids } from "../libs/util";
|
import { retrieveAccountDids } from "../libs/util";
|
||||||
import { logger } from "../utils/logger";
|
import { logger } from "../utils/logger";
|
||||||
@@ -162,9 +322,13 @@ export default class UserProfileView extends Vue {
|
|||||||
isLoading = true;
|
isLoading = true;
|
||||||
partnerApiServer = DEFAULT_PARTNER_API_SERVER;
|
partnerApiServer = DEFAULT_PARTNER_API_SERVER;
|
||||||
profile: UserProfile | null = null;
|
profile: UserProfile | null = null;
|
||||||
|
showConnectInstructions = false;
|
||||||
|
nearestNeighbors: Array<UserProfile> = [];
|
||||||
|
loadingNearestNeighbors = false;
|
||||||
|
|
||||||
// make this function available to the Vue template
|
// make this function available to the Vue template
|
||||||
didInfo = didInfo;
|
didInfo = didInfo;
|
||||||
|
isHiddenDid = isHiddenDid;
|
||||||
/** Production share domain for deep links */
|
/** Production share domain for deep links */
|
||||||
APP_SERVER = APP_SERVER;
|
APP_SERVER = APP_SERVER;
|
||||||
|
|
||||||
@@ -266,6 +430,63 @@ export default class UserProfileView extends Vue {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Loads nearest neighbors from the partner API
|
||||||
|
* Called when the Connect Me section is expanded
|
||||||
|
*/
|
||||||
|
async loadNearestNeighbors() {
|
||||||
|
if (!this.profile?.issuerDid || this.loadingNearestNeighbors) return;
|
||||||
|
|
||||||
|
this.loadingNearestNeighbors = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`${this.partnerApiServer}/api/partner/userProfileNearestNeighbors?issuerDid=${encodeURIComponent(this.profile.issuerDid)}`,
|
||||||
|
{
|
||||||
|
method: "GET",
|
||||||
|
headers: await getHeaders(this.activeDid),
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.status === 200) {
|
||||||
|
const result = await response.json();
|
||||||
|
this.nearestNeighbors = result.data || [];
|
||||||
|
} else {
|
||||||
|
logger.warn("Failed to load nearest neighbors:", response.status);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
logger.error("Error loading nearest neighbors:", error);
|
||||||
|
} finally {
|
||||||
|
this.loadingNearestNeighbors = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets display name for a neighbor profile
|
||||||
|
* @param neighbor UserProfile object
|
||||||
|
* @returns Display name for the neighbor
|
||||||
|
*/
|
||||||
|
neighborDisplayName(neighbor: UserProfile) {
|
||||||
|
return this.didInfo(
|
||||||
|
neighbor.issuerDid,
|
||||||
|
this.activeDid,
|
||||||
|
this.allMyDids,
|
||||||
|
this.allContacts,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggles the Connect Me instructions and loads nearest neighbors if needed
|
||||||
|
*/
|
||||||
|
async toggleConnectInstructions() {
|
||||||
|
this.showConnectInstructions = !this.showConnectInstructions;
|
||||||
|
|
||||||
|
// Load nearest neighbors when expanding for the first time
|
||||||
|
if (this.showConnectInstructions && this.nearestNeighbors.length === 0) {
|
||||||
|
await this.loadNearestNeighbors();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Computed properties for template logic streamlining
|
* Computed properties for template logic streamlining
|
||||||
*/
|
*/
|
||||||
@@ -283,6 +504,27 @@ export default class UserProfileView extends Vue {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets the contact information for the profile issuer
|
||||||
|
* @returns Contact object if issuer is in contacts, undefined otherwise
|
||||||
|
*/
|
||||||
|
get issuerContact() {
|
||||||
|
if (!this.profile?.issuerDid) return undefined;
|
||||||
|
return contactForDid(this.profile.issuerDid, this.allContacts);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets contacts that are in the issuerDidVisibleToDids list
|
||||||
|
* @returns Array of contacts who can see this profile
|
||||||
|
*/
|
||||||
|
get visibleToContacts() {
|
||||||
|
if (!this.profile?.issuerDidVisibleToDids) return [];
|
||||||
|
|
||||||
|
return this.profile.issuerDidVisibleToDids
|
||||||
|
.map((did) => contactForDid(did, this.allContacts))
|
||||||
|
.filter((contact): contact is Contact => contact !== undefined);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Checks if the profile has first location coordinates
|
* Checks if the profile has first location coordinates
|
||||||
* @returns True if both latitude and longitude are available
|
* @returns True if both latitude and longitude are available
|
||||||
|
|||||||
Reference in New Issue
Block a user