trent_larson/crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 23 Releases 5 Wiki Activity

Merge branch 'build-improvement' of ssh://173.199.124.46:222/trent_larson/crowd-funder-for-time-pwa into build-improvement

Browse Source
This commit is contained in:
Jose Olarte III
2025-07-07 16:20:20 +08:00
parent 41dab36eb6 d8fbed3873
commit c28ddc0c5c
11 changed files with 1060 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/MembersList.vue
View File

@@ -192,6 +192,10 @@ import * as libsUtil from "../libs/util";
import { NotificationIface } from "../constants/app";
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
import {
NOTIFY_ADD_CONTACT_FIRST,
NOTIFY_CONTINUE_WITHOUT_ADDING,
} from "@/constants/notifications";
interface Member {
admitted: boolean;
@@ -378,10 +382,10 @@ export default class MembersList extends Vue {
{
group: "modal",
type: "confirm",
title: "Add as Contact First?",
text: "This person is not in your contacts. Would you like to add them as a contact first?",
yesText: "Add as Contact",
noText: "Skip Adding Contact",
title: NOTIFY_ADD_CONTACT_FIRST.title,
text: NOTIFY_ADD_CONTACT_FIRST.text,
yesText: NOTIFY_ADD_CONTACT_FIRST.yesText,
noText: NOTIFY_ADD_CONTACT_FIRST.noText,
onYes: async () => {
await this.addAsContact(decrMember);
// After adding as contact, proceed with admission
@@ -393,9 +397,9 @@ export default class MembersList extends Vue {
{
group: "modal",
type: "confirm",
title: "Continue Without Adding?",
text: "Are you sure you want to proceed with admission? If they are not a contact, you will not know their name after this meeting.",
yesText: "Continue",
title: NOTIFY_CONTINUE_WITHOUT_ADDING.title,
text: NOTIFY_CONTINUE_WITHOUT_ADDING.text,
yesText: NOTIFY_CONTINUE_WITHOUT_ADDING.yesText,
onYes: async () => {
await this.toggleAdmission(decrMember);
},

74
src/constants/notifications.ts
View File

@@ -122,3 +122,77 @@ export const NOTIFY_UNCONFIRMED_HOURS = {
title: "Unconfirmed Hours",
message: "Would you like to confirm some of those hours?",
};
// Complex modal constants (for raw $notify calls with advanced features)
// MembersList.vue complex modals
export const NOTIFY_ADD_CONTACT_FIRST = {
title: "Add as Contact First?",
text: "This person is not in your contacts. Would you like to add them as a contact first?",
yesText: "Add as Contact",
noText: "Skip Adding Contact",
};
export const NOTIFY_CONTINUE_WITHOUT_ADDING = {
title: "Continue Without Adding?",
text: "Are you sure you want to proceed with admission? If they are not a contact, you will not know their name after this meeting.",
yesText: "Continue",
};
// ContactsView.vue complex modals
export const NOTIFY_REGISTER_CONTACT = {
title: "Register",
text: "Do you want to register them?",
};
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",
};
// ProjectViewView.vue complex modals
export const NOTIFY_CONFIRM_CLAIM = {
title: "Confirm",
text: "Do you personally confirm that this is true?",
};
// UserProfileView.vue constants
export const NOTIFY_PROFILE_LOAD_ERROR = {
title: "Profile Load Error",
message: "There was a problem loading the profile.",
};
// ProjectsView.vue constants
export const NOTIFY_NO_ACCOUNT_ERROR = {
title: "No Account Found",
message: "You need an identifier to load your projects.",
};
export const NOTIFY_PROJECT_LOAD_ERROR = {
title: "Project Load Error",
message: "Failed to get projects from the server.",
};
export const NOTIFY_PROJECT_INIT_ERROR = {
title: "Initialization Error",
message: "Something went wrong loading your projects.",
};
export const NOTIFY_OFFERS_LOAD_ERROR = {
title: "Offer Load Error",
message: "Failed to get offers from the server.",
};
export const NOTIFY_OFFERS_FETCH_ERROR = {
title: "Offer Fetch Error",
message: "Got an error loading offers.",
};
// ProjectsView.vue complex modals
export const NOTIFY_CAMERA_SHARE_METHOD = {
title: "Are you nearby with cameras?",
text: "If so, we'll use those with QR codes to share.",
yesText: "we are nearby with cameras",
noText: "we will share another way",
};

20
src/views/ContactsView.vue
View File

@@ -309,6 +309,8 @@ import {
NOTIFY_REGISTER_PERSON_ERROR,
NOTIFY_VISIBILITY_ERROR,
NOTIFY_UNCONFIRMED_HOURS,
NOTIFY_REGISTER_CONTACT,
NOTIFY_ONBOARDING_MEETING,
} from "@/constants/notifications";
@Component({
@@ -636,10 +638,8 @@ export default class ContactsView extends Vue {
resp.status,
resp.data,
);
this.notify.error(
`Got an error retrieving your ${useRecipient ? "given" : "received"} data from the server.`,
TIMEOUTS.STANDARD,
);
const message = `Got an error retrieving your ${useRecipient ? "given" : "received"} data from the server.`;
this.notify.error(message, TIMEOUTS.STANDARD);
}
};
@@ -882,8 +882,8 @@ export default class ContactsView extends Vue {
{
group: "modal",
type: "confirm",
title: "Register",
text: "Do you want to register them?",
title: NOTIFY_REGISTER_CONTACT.title,
text: NOTIFY_REGISTER_CONTACT.text,
onCancel: async (stopAsking?: boolean) => {
if (stopAsking) {
await this.$updateSettings({
@@ -1237,16 +1237,16 @@ export default class ContactsView extends Vue {
{
group: "modal",
type: "confirm",
title: "Onboarding Meeting",
text: "Would you like to start a new meeting?",
title: NOTIFY_ONBOARDING_MEETING.title,
text: NOTIFY_ONBOARDING_MEETING.text,
onYes: async () => {
this.$router.push({ name: "onboard-meeting-setup" });
},
yesText: "Start New Meeting",
yesText: NOTIFY_ONBOARDING_MEETING.yesText,
onNo: async () => {
this.$router.push({ name: "onboard-meeting-list" });
},
noText: "Join Existing Meeting",
noText: NOTIFY_ONBOARDING_MEETING.noText,
},
TIMEOUTS.MODAL,
);

98
src/views/ImportAccountView.vue
View File

@@ -87,13 +87,38 @@ import { Component, Vue } from "vue-facing-decorator";
import { Router } from "vue-router";
import { AppString, NotificationIface } from "../constants/app";
import * as databaseUtil from "../db/databaseUtil";
import { DEFAULT_ROOT_DERIVATION_PATH } from "../libs/crypto";
import { retrieveAccountCount, importFromMnemonic } from "../libs/util";
import { logger } from "../utils/logger";
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
/**
* Import Account View Component
*
* Allows users to import existing identifiers using seed phrases:
* - Secure mnemonic phrase input with validation
* - Advanced options for custom derivation paths
* - Legacy uPort compatibility support
* - Test environment utilities for development
*
* Features:
* - Secure seed phrase import functionality
* - Custom derivation path configuration
* - Account erasure options for fresh imports
* - Development mode test utilities
* - Comprehensive error handling and validation
*
* Security Considerations:
* - Seed phrases are handled securely and not logged
* - Import process includes validation and error recovery
* - Advanced options are hidden by default
*
* @author Matthew Raymer
*/
@Component({
components: {},
mixins: [PlatformServiceMixin],
})
export default class ImportAccountView extends Vue {
TEST_USER_0_MNEMONIC =
@@ -105,6 +130,8 @@ export default class ImportAccountView extends Vue {
$notify!: (notification: NotificationIface, timeout?: number) => void;
$router!: Router;
notify!: ReturnType<typeof createNotifyHelpers>;
apiServer = "";
derivationPath = DEFAULT_ROOT_DERIVATION_PATH;
mnemonic = "";
@@ -112,21 +139,62 @@ export default class ImportAccountView extends Vue {
showAdvanced = false;
shouldErase = false;
async created() {
/**
* Initializes notification helpers
*/
created() {
this.notify = createNotifyHelpers(this.$notify);
}
/**
* Component initialization
*
* Loads account count and server settings for import configuration
* Uses PlatformServiceMixin for secure database access
*/
async mounted() {
await this.initializeSettings();
}
/**
* Initializes component settings and account information
*/
private async initializeSettings() {
this.numAccounts = await retrieveAccountCount();
// get the server, to help with import on the test server
const settings = await databaseUtil.retrieveSettingsForActiveAccount();
const settings = await this.$accountSettings();
this.apiServer = settings.apiServer || "";
}
/**
* Handles cancel button click
*
* Navigates back to previous view
*/
public onCancelClick() {
this.$router.back();
}
/**
* Checks if running on production server
*
* @returns True if not on production server (enables test utilities)
*/
public isNotProdServer() {
return this.apiServer !== AppString.PROD_ENDORSER_API_SERVER;
}
/**
* Imports identifier from mnemonic phrase
*
* Processes the mnemonic phrase with optional custom derivation path
* and account erasure options. Handles validation and error scenarios
* with appropriate user feedback.
*
* Error Handling:
* - Invalid mnemonic format validation
* - Import process failure recovery
* - User-friendly error messaging
*/
public async fromMnemonic() {
try {
await importFromMnemonic(
@@ -139,24 +207,14 @@ export default class ImportAccountView extends Vue {
} catch (err: any) {
logger.error("Error importing from mnemonic:", err);
if (err == "Error: invalid mnemonic") {
this.$notify(
{
group: "alert",
type: "danger",
title: "Invalid Mnemonic",
text: "Please check your mnemonic and try again.",
},
5000,
this.notify.error(
"Please check your mnemonic and try again.",
TIMEOUTS.LONG,
);
} else {
this.$notify(
{
group: "alert",
type: "danger",
title: "Error",
text: "Got an error creating that identifier.",
},
5000,
this.notify.error(
"Got an error creating that identifier.",
TIMEOUTS.LONG,
);
}
}

5
src/views/ProjectViewView.vue
View File

@@ -610,6 +610,7 @@ import { useClipboard } from "@vueuse/core";
import { transformImageUrlForCors } from "../libs/util";
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
import { NOTIFY_CONFIRM_CLAIM } from "@/constants/notifications";
/**
* Project View Component
* @author Matthew Raymer
@@ -1339,8 +1340,8 @@ export default class ProjectViewView extends Vue {
{
group: "modal",
type: "confirm",
title: "Confirm",
text: "Do you personally confirm that this is true?",
title: NOTIFY_CONFIRM_CLAIM.title,
text: NOTIFY_CONFIRM_CLAIM.text,
onYes: async () => {
await this.confirmClaim(give);
},

328
src/views/ProjectsView.vue
View File

@@ -280,14 +280,41 @@ import OnboardingDialog from "../components/OnboardingDialog.vue";
import ProjectIcon from "../components/ProjectIcon.vue";
import TopMessage from "../components/TopMessage.vue";
import UserNameDialog from "../components/UserNameDialog.vue";
import * as databaseUtil from "../db/databaseUtil";
import { Contact } from "../db/tables/contacts";
import { didInfo, getHeaders, getPlanFromCache } from "../libs/endorserServer";
import { OfferSummaryRecord, PlanData } from "../interfaces/records";
import * as libsUtil from "../libs/util";
import { OnboardPage } from "../libs/util";
import { logger } from "../utils/logger";
import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
import {
NOTIFY_NO_ACCOUNT_ERROR,
NOTIFY_PROJECT_LOAD_ERROR,
NOTIFY_PROJECT_INIT_ERROR,
NOTIFY_OFFERS_LOAD_ERROR,
NOTIFY_OFFERS_FETCH_ERROR,
NOTIFY_CAMERA_SHARE_METHOD,
} from "@/constants/notifications";
/**
* Projects View Component
*
* Main dashboard for managing user projects and offers within the TimeSafari platform.
* Provides dual-mode interface for viewing:
* - Personal projects: Ideas and plans created by the user
* - Active offers: Commitments made to help with other projects
*
* Key Features:
* - Infinite scrolling for large datasets
* - Project creation and navigation
* - Offer tracking with confirmation status
* - Onboarding integration for new users
* - Cross-platform compatibility (web, mobile, desktop)
*
* Security: All API calls are authenticated using user's DID
* Privacy: Only user's own projects and offers are displayed
*/
@Component({
components: {
EntityIcon,
@@ -298,18 +325,15 @@ import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
TopMessage,
UserNameDialog,
},
mixins: [PlatformServiceMixin],
})
export default class ProjectsView extends Vue {
$notify!: (notification: NotificationIface, timeout?: number) => void;
$router!: Router;
errNote(message: string) {
this.$notify(
{ group: "alert", type: "danger", title: "Error", text: message },
5000,
);
}
notify!: ReturnType<typeof createNotifyHelpers>;
// User account state
activeDid = "";
allContacts: Array<Contact> = [];
allMyDids: Array<string> = [];
@@ -317,61 +341,114 @@ export default class ProjectsView extends Vue {
givenName = "";
isLoading = false;
isRegistered = false;
// Data collections
offers: OfferSummaryRecord[] = [];
projectNameFromHandleId: Record<string, string> = {}; // mapping from handleId to description
projects: PlanData[] = [];
// UI state
showOffers = false;
showProjects = true;
// Utility imports
libsUtil = libsUtil;
didInfo = didInfo;
/**
* Initializes notification helpers
*/
created() {
this.notify = createNotifyHelpers(this.$notify);
}
/**
* Component initialization
*
* Workflow:
* 1. Load user settings and account information
* 2. Load contacts for displaying offer recipients
* 3. Initialize onboarding dialog if needed
* 4. Load initial project data
*
* Error handling: Shows appropriate user messages for different failure scenarios
*/
async mounted() {
try {
const settings = await databaseUtil.retrieveSettingsForActiveAccount();
this.activeDid = settings.activeDid || "";
this.apiServer = settings.apiServer || "";
this.isRegistered = !!settings.isRegistered;
this.givenName = settings.firstName || "";
const platformService = PlatformServiceFactory.getInstance();
const queryResult = await platformService.dbQuery(
"SELECT * FROM contacts",
);
this.allContacts = databaseUtil.mapQueryResultToValues(
queryResult,
) as unknown as Contact[];
this.allMyDids = await libsUtil.retrieveAccountDids();
if (!settings.finishedOnboarding) {
(this.$refs.onboardingDialog as OnboardingDialog).open(
OnboardPage.Create,
);
}
if (this.allMyDids.length === 0) {
logger.error("No accounts found.");
this.errNote("You need an identifier to load your projects.");
} else {
await this.loadProjects();
}
await this.initializeUserSettings();
await this.loadContactsData();
await this.initializeUserIdentities();
await this.checkOnboardingStatus();
await this.loadInitialData();
} catch (err) {
logger.error("Error initializing:", err);
this.errNote("Something went wrong loading your projects.");
logger.error("Error initializing ProjectsView:", err);
this.notify.error(NOTIFY_PROJECT_INIT_ERROR.message, TIMEOUTS.LONG);
}
}
/**
* Loads user settings from active account
*/
private async initializeUserSettings() {
const settings = await this.$accountSettings();
this.activeDid = settings.activeDid || "";
this.apiServer = settings.apiServer || "";
this.isRegistered = !!settings.isRegistered;
this.givenName = settings.firstName || "";
}
/**
* Loads contacts data for displaying offer recipients
*/
private async loadContactsData() {
this.allContacts = await this.$getAllContacts();
}
/**
* Initializes user identity information
*/
private async initializeUserIdentities() {
this.allMyDids = await libsUtil.retrieveAccountDids();
}
/**
* Checks if onboarding dialog should be shown
*/
private async checkOnboardingStatus() {
const settings = await this.$accountSettings();
if (!settings.finishedOnboarding) {
(this.$refs.onboardingDialog as OnboardingDialog).open(
OnboardPage.Create,
);
}
}
/**
* Loads initial project data if user has valid account
*/
private async loadInitialData() {
if (this.allMyDids.length === 0) {
logger.error("No accounts found for user");
this.notify.error(NOTIFY_NO_ACCOUNT_ERROR.message, TIMEOUTS.LONG);
} else {
await this.loadProjects();
}
}
/**
* Core project data loader
* @param url the url used to fetch the data
* @param token Authorization token
**/
*
* Fetches project data from the endorser server and populates the projects array.
* Handles authentication, error scenarios, and loading states.
*
* @param url - The API endpoint URL for fetching project data
*/
async projectDataLoader(url: string) {
try {
const headers = await getHeaders(this.activeDid, this.$notify);
this.isLoading = true;
const resp = await this.axios.get(url, { headers } as AxiosRequestConfig);
if (resp.status === 200 && resp.data.data) {
const plans: PlanData[] = resp.data.data;
for (const plan of plans) {
@@ -391,12 +468,11 @@ export default class ProjectsView extends Vue {
resp.status,
resp.data,
);
this.errNote("Failed to get projects from the server.");
this.notify.error(NOTIFY_PROJECT_LOAD_ERROR.message, TIMEOUTS.LONG);
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (error: any) {
logger.error("Got error loading plans:", error.message || error);
this.errNote("Got an error loading projects.");
this.notify.error(NOTIFY_PROJECT_LOAD_ERROR.message, TIMEOUTS.LONG);
} finally {
this.isLoading = false;
}
@@ -404,8 +480,12 @@ export default class ProjectsView extends Vue {
/**
* Data loader used by infinite scroller
* @param payload is the flag from the InfiniteScroll indicating if it should load
**/
*
* Implements pagination by loading additional projects when user scrolls to bottom.
* Uses the last project's rowId as a cursor for the next batch.
*
* @param payload - Flag from InfiniteScroll component indicating if more data should be loaded
*/
async loadMoreProjectData(payload: boolean) {
if (this.projects.length > 0 && payload) {
const latestProject = this.projects[this.projects.length - 1];
@@ -414,19 +494,24 @@ export default class ProjectsView extends Vue {
}
/**
* Load projects initially
* @param issuerDid of the user
* @param urlExtra additional url parameters in a string
**/
* Load projects initially or with pagination
*
* Constructs the API URL for fetching user's projects and delegates to projectDataLoader.
*
* @param urlExtra - Additional URL parameters for pagination (e.g., "beforeId=123")
*/
async loadProjects(urlExtra: string = "") {
const url = `${this.apiServer}/api/v2/report/plansByIssuer?${urlExtra}`;
await this.projectDataLoader(url);
}
/**
* Handle clicking on a project entry found in the list
* @param id of the project
**/
* Handle clicking on a project entry
*
* Navigates to the detailed project view for the selected project.
*
* @param id - The unique identifier of the project to view
*/
onClickLoadProject(id: string) {
const route = {
path: "/project/" + encodeURIComponent(id),
@@ -435,8 +520,10 @@ export default class ProjectsView extends Vue {
}
/**
* Handling clicking on the new project button
**/
* Handle clicking on the new project button
*
* Navigates to the project creation/editing interface.
*/
onClickNewProject(): void {
const route = {
name: "new-edit-project",
@@ -444,6 +531,13 @@ export default class ProjectsView extends Vue {
this.$router.push(route);
}
/**
* Handle clicking on a claim/offer link
*
* Navigates to the detailed claim view for the selected offer.
*
* @param jwtId - The JWT identifier of the claim to view
*/
onClickLoadClaim(jwtId: string) {
const route = {
path: "/claim/" + encodeURIComponent(jwtId),
@@ -453,17 +547,21 @@ export default class ProjectsView extends Vue {
/**
* Core offer data loader
* @param url the url used to fetch the data
* @param token Authorization token
**/
*
* Fetches offer data from the endorser server and populates the offers array.
* Also retrieves associated project names for display purposes.
*
* @param url - The API endpoint URL for fetching offer data
*/
async offerDataLoader(url: string) {
const headers = await getHeaders(this.activeDid);
try {
this.isLoading = true;
const resp = await this.axios.get(url, { headers } as AxiosRequestConfig);
if (resp.status === 200 && resp.data.data) {
// add one-by-one as they retrieve project names, potentially from the server
// Process offers one-by-one to retrieve project names from server cache
for (const offer of resp.data.data) {
if (offer.fulfillsPlanHandleId) {
const project = await getPlanFromCache(
@@ -484,37 +582,24 @@ export default class ProjectsView extends Vue {
resp.status,
resp.data,
);
this.$notify(
{
group: "alert",
type: "danger",
title: "Error",
text: "Failed to get offers from the server.",
},
5000,
);
this.notify.error(NOTIFY_OFFERS_LOAD_ERROR.message, TIMEOUTS.LONG);
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (error: any) {
logger.error("Got error loading offers:", error.message || error);
this.$notify(
{
group: "alert",
type: "danger",
title: "Error",
text: "Got an error loading offers.",
},
5000,
);
this.notify.error(NOTIFY_OFFERS_FETCH_ERROR.message, TIMEOUTS.LONG);
} finally {
this.isLoading = false;
}
}
/**
* Data loader used by infinite scroller
* @param payload is the flag from the InfiniteScroll indicating if it should load
**/
* Data loader used by infinite scroller for offers
*
* Implements pagination by loading additional offers when user scrolls to bottom.
* Uses the last offer's jwtId as a cursor for the next batch.
*
* @param payload - Flag from InfiniteScroll component indicating if more data should be loaded
*/
async loadMoreOfferData(payload: boolean) {
if (this.offers.length > 0 && payload) {
const latestOffer = this.offers[this.offers.length - 1];
@@ -523,15 +608,23 @@ export default class ProjectsView extends Vue {
}
/**
* Load offers initially
* @param issuerDid of the user
* @param urlExtra additional url parameters in a string
**/
* Load offers initially or with pagination
*
* Constructs the API URL for fetching user's offers and delegates to offerDataLoader.
*
* @param urlExtra - Additional URL parameters for pagination (e.g., "&beforeId=123")
*/
async loadOffers(urlExtra: string = "") {
const url = `${this.apiServer}/api/v2/report/offers?offeredByDid=${this.activeDid}${urlExtra}`;
await this.offerDataLoader(url);
}
/**
* Shows name dialog if needed, then prompts for share method
*
* Ensures user has provided their name before proceeding with contact sharing.
* Uses UserNameDialog component if name is not set.
*/
showNameThenIdDialog() {
if (!this.givenName) {
(this.$refs.userNameDialog as UserNameDialog).open(() => {
@@ -542,13 +635,23 @@ export default class ProjectsView extends Vue {
}
}
/**
* Prompts user to choose contact sharing method
*
* Presents modal dialog asking if users are nearby with cameras.
* Routes to appropriate sharing method based on user's choice:
* - QR code sharing for nearby users with cameras
* - Alternative sharing methods for remote users
*
* Note: Uses raw $notify for complex modal with custom buttons and onNo callback
*/
promptForShareMethod() {
this.$notify(
{
group: "modal",
type: "confirm",
title: "Are you nearby with cameras?",
text: "If so, we'll use those with QR codes to share.",
title: NOTIFY_CAMERA_SHARE_METHOD.title,
text: NOTIFY_CAMERA_SHARE_METHOD.text,
onCancel: async () => {},
onNo: async () => {
this.$router.push({ name: "share-my-contact-info" });
@@ -556,49 +659,68 @@ export default class ProjectsView extends Vue {
onYes: async () => {
this.handleQRCodeClick();
},
noText: "we will share another way",
yesText: "we are nearby with cameras",
noText: NOTIFY_CAMERA_SHARE_METHOD.noText,
yesText: NOTIFY_CAMERA_SHARE_METHOD.yesText,
},
-1,
);
}
public computedOfferTabClassNames() {
/**
* Computed properties for template logic streamlining
*/
/**
* CSS class names for offer tab styling
* @returns Object with CSS classes based on current tab selection
*/
get offerTabClasses() {
return {
"inline-block": true,
"py-3": true,
"rounded-t-lg": true,
"border-b-2": true,
active: this.showOffers,
"text-black": this.showOffers,
"border-black": this.showOffers,
"font-semibold": this.showOffers,
"text-blue-600": !this.showOffers,
"border-transparent": !this.showOffers,
"hover:border-slate-400": !this.showOffers,
};
}
public computedProjectTabClassNames() {
/**
* CSS class names for project tab styling
* @returns Object with CSS classes based on current tab selection
*/
get projectTabClasses() {
return {
"inline-block": true,
"py-3": true,
"rounded-t-lg": true,
"border-b-2": true,
active: this.showProjects,
"text-black": this.showProjects,
"border-black": this.showProjects,
"font-semibold": this.showProjects,
"text-blue-600": !this.showProjects,
"border-transparent": !this.showProjects,
"hover:border-slate-400": !this.showProjects,
};
}
/**
* Utility methods
*/
/**
* Handles QR code sharing functionality with platform detection
*
* Routes to appropriate QR code interface based on current platform:
* - Full QR scanner for native mobile platforms
* - Web-based QR interface for browser environments
*/
private handleQRCodeClick() {
if (Capacitor.isNativePlatform()) {
this.$router.push({ name: "contact-qr-scan-full" });
@@ -606,5 +728,21 @@ export default class ProjectsView extends Vue {
this.$router.push({ name: "contact-qr" });
}
}
/**
* Legacy method compatibility
* @deprecated Use computedOfferTabClassNames for backward compatibility
*/
public computedOfferTabClassNames() {
return this.offerTabClasses;
}
/**
* Legacy method compatibility
* @deprecated Use computedProjectTabClassNames for backward compatibility
*/
public computedProjectTabClassNames() {
return this.projectTabClasses;
}
}
</script>

205
src/views/UserProfileView.vue
View File

@@ -32,7 +32,7 @@
<div class="mt-8">
<div class="text-sm">
<font-awesome icon="user" class="fa-fw text-slate-400"></font-awesome>
{{ didInfo(profile.issuerDid, activeDid, allMyDids, allContacts) }}
{{ profileDisplayName }}
<button title="Copy Link to Profile" @click="onCopyLinkClick()">
<font-awesome
icon="link"
@@ -46,46 +46,38 @@
</div>
<!-- Map for first coordinates -->
<div v-if="profile?.locLat && profile?.locLon" class="mt-4">
<div v-if="hasFirstLocation" class="mt-4">
<h2 class="text-lg font-semibold">Location</h2>
<div class="h-96 mt-2 w-full">
<l-map
ref="profileMap"
:center="[profile.locLat, profile.locLon]"
:zoom="12"
>
<l-map ref="profileMap" :center="firstLocationCoords" :zoom="mapZoom">
<l-tile-layer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
:url="tileLayerUrl"
layer-type="base"
name="OpenStreetMap"
/>
<l-marker :lat-lng="[profile.locLat, profile.locLon]">
<l-popup>{{
didInfo(profile.issuerDid, activeDid, allMyDids, allContacts)
}}</l-popup>
<l-marker :lat-lng="firstLocationCoords">
<l-popup>{{ profileDisplayName }}</l-popup>
</l-marker>
</l-map>
</div>
</div>
<!-- Map for second coordinates -->
<div v-if="profile?.locLat2 && profile?.locLon2" class="mt-4">
<div v-if="hasSecondLocation" class="mt-4">
<h2 class="text-lg font-semibold">Second Location</h2>
<div class="h-96 mt-2 w-full">
<l-map
ref="profileMap"
:center="[profile.locLat2, profile.locLon2]"
:zoom="12"
:center="secondLocationCoords"
:zoom="mapZoom"
>
<l-tile-layer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
:url="tileLayerUrl"
layer-type="base"
name="OpenStreetMap"
/>
<l-marker :lat-lng="[profile.locLat2, profile.locLon2]">
<l-popup>{{
didInfo(profile.issuerDid, activeDid, allMyDids, allContacts)
}}</l-popup>
<l-marker :lat-lng="secondLocationCoords">
<l-popup>{{ profileDisplayName }}</l-popup>
</l-marker>
</l-map>
</div>
@@ -111,15 +103,32 @@ import {
DEFAULT_PARTNER_API_SERVER,
NotificationIface,
} from "../constants/app";
import * as databaseUtil from "../db/databaseUtil";
import { Contact } from "../db/tables/contacts";
import { didInfo, getHeaders } from "../libs/endorserServer";
import { UserProfile } from "../libs/partnerServer";
import { retrieveAccountDids } from "../libs/util";
import { logger } from "../utils/logger";
import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
import { Settings } from "@/db/tables/settings";
import { useClipboard } from "@vueuse/core";
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
import { NOTIFY_PROFILE_LOAD_ERROR } from "@/constants/notifications";
/**
* User Profile View Component
*
* Displays individual user profile information including:
* - Basic profile data and description
* - Location information with interactive maps
* - Profile link sharing functionality
*
* Features:
* - Profile data loading from partner API
* - Interactive maps for location visualization
* - Copy-to-clipboard functionality for profile links
* - Responsive design with loading states
*
* @author Matthew Raymer
*/
@Component({
components: {
LMap,
@@ -129,12 +138,15 @@ import { useClipboard } from "@vueuse/core";
QuickNav,
TopMessage,
},
mixins: [PlatformServiceMixin],
})
export default class UserProfileView extends Vue {
$notify!: (notification: NotificationIface, timeout?: number) => void;
$router!: Router;
$route!: RouteLocationNormalizedLoaded;
notify!: ReturnType<typeof createNotifyHelpers>;
activeDid = "";
allContacts: Array<Contact> = [];
allMyDids: Array<string> = [];
@@ -145,29 +157,47 @@ export default class UserProfileView extends Vue {
// make this function available to the Vue template
didInfo = didInfo;
/**
* Initializes notification helpers
*/
created() {
this.notify = createNotifyHelpers(this.$notify);
}
/**
* Component initialization
*
* Loads account settings, contacts, and profile data
* Uses PlatformServiceMixin for database operations
*/
async mounted() {
const platformService = PlatformServiceFactory.getInstance();
const settingsQuery = await platformService.dbQuery(
"SELECT * FROM settings",
);
const settings = databaseUtil.mapQueryResultToValues(
settingsQuery,
) as Settings[];
this.activeDid = settings[0]?.activeDid || "";
this.partnerApiServer =
settings[0]?.partnerApiServer || this.partnerApiServer;
const contactQuery = await platformService.dbQuery(
"SELECT * FROM contacts",
);
this.allContacts = databaseUtil.mapQueryResultToValues(
contactQuery,
) as unknown as Contact[];
this.allMyDids = await retrieveAccountDids();
await this.initializeSettings();
await this.loadContacts();
await this.loadProfile();
}
/**
* Initializes account settings from database
*/
private async initializeSettings() {
const settings = await this.$accountSettings();
this.activeDid = settings.activeDid || "";
this.partnerApiServer = settings.partnerApiServer || this.partnerApiServer;
}
/**
* Loads all contacts from database
*/
private async loadContacts() {
this.allContacts = await this.$getAllContacts();
this.allMyDids = await retrieveAccountDids();
}
/**
* Loads user profile data from partner API
*
* Handles profile loading with error handling and loading states
*/
async loadProfile() {
const profileId: string = this.$route.params.id as string;
if (!profileId) {
@@ -196,35 +226,90 @@ export default class UserProfileView extends Vue {
}
} catch (error) {
logger.error("Error loading profile:", error);
this.$notify(
{
group: "alert",
type: "danger",
title: "Error",
text: "There was a problem loading the profile.",
},
5000,
);
this.notify.error(NOTIFY_PROFILE_LOAD_ERROR.message, TIMEOUTS.LONG);
} finally {
this.isLoading = false;
}
}
/**
* Copies profile link to clipboard
*
* Creates a deep link to the profile and copies it to the clipboard
* Shows success notification when completed
*/
onCopyLinkClick() {
const deepLink = `${APP_SERVER}/deep-link/user-profile/${this.profile?.rowId}`;
useClipboard()
.copy(deepLink)
.then(() => {
this.$notify(
{
group: "alert",
type: "toast",
title: "Copied",
text: "A link to this profile was copied to the clipboard.",
},
2000,
);
this.notify.copied("profile link", TIMEOUTS.STANDARD);
});
}
/**
* Computed properties for template logic streamlining
*/
/**
* Gets the display name for the profile using didInfo utility
* @returns Formatted display name for the profile owner
*/
get profileDisplayName() {
return this.didInfo(
this.profile?.issuerDid,
this.activeDid,
this.allMyDids,
this.allContacts,
);
}
/**
* Checks if the profile has first location coordinates
* @returns True if both latitude and longitude are available
*/
get hasFirstLocation() {
return this.profile?.locLat && this.profile?.locLon;
}
/**
* Gets the coordinate array for the first location
* @returns Array of [latitude, longitude] for map center
*/
get firstLocationCoords() {
return [this.profile?.locLat, this.profile?.locLon];
}
/**
* Checks if the profile has second location coordinates
* @returns True if both latitude and longitude are available
*/
get hasSecondLocation() {
return this.profile?.locLat2 && this.profile?.locLon2;
}
/**
* Gets the coordinate array for the second location
* @returns Array of [latitude, longitude] for map center
*/
get secondLocationCoords() {
return [this.profile?.locLat2, this.profile?.locLon2];
}
/**
* Standard map zoom level for profile location maps
* @returns Default zoom level for location display
*/
get mapZoom() {
return 12;
}
/**
* OpenStreetMap tile layer URL template
* @returns URL template for map tile fetching
*/
get tileLayerUrl() {
return "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
}
}
</script>