jsnbuchanan/crowd-funder-for-time-pwa
1
0
Fork 1
forked from trent_larson/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'master' into ask-for-contacts-export

Browse Source
This commit is contained in:
Matthew Raymer
2025-08-17 02:36:57 +00:00
parent 799981d1cb 37559e1bad
commit 215c37f00a
229 changed files with 6060 additions and 30180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/ActivityListItem.vue
View File

@@ -73,7 +73,6 @@
class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md"
:src="record.image"
alt="Activity image"
@load="handleImageLoad(record.image)"
/>
</a>
</div>
@@ -251,10 +250,9 @@
import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
import { GiveRecordWithContactInfo } from "@/interfaces/give";
import EntityIcon from "./EntityIcon.vue";
import { isGiveClaimType, notifyWhyCannotConfirm } from "../libs/util";
import { containsHiddenDid, isHiddenDid } from "../libs/endorserServer";
import { isHiddenDid } from "../libs/endorserServer";
import ProjectIcon from "./ProjectIcon.vue";
import { createNotifyHelpers } from "@/utils/notify";
import { createNotifyHelpers, NotifyFunction } from "@/utils/notify";
import {
NOTIFY_PERSON_HIDDEN,
NOTIFY_UNKNOWN_PERSON,
@@ -272,18 +270,10 @@ export default class ActivityListItem extends Vue {
@Prop() lastViewedClaimId?: string;
@Prop() isRegistered!: boolean;
@Prop() activeDid!: string;
@Prop() confirmerIdList?: string[];
/**
* Function prop for handling image caching
* Called when an image loads successfully, allowing parent to control caching behavior
*/
@Prop({ type: Function, default: () => {} })
onImageCache!: (imageUrl: string) => void | Promise<void>;
isHiddenDid = isHiddenDid;
notify!: ReturnType<typeof createNotifyHelpers>;
$notify!: (notification: any, timeout?: number) => void;
$notify!: NotifyFunction;
created() {
this.notify = createNotifyHelpers(this.$notify);
@@ -297,17 +287,8 @@ export default class ActivityListItem extends Vue {
this.notify.warning(NOTIFY_UNKNOWN_PERSON.message, TIMEOUTS.STANDARD);
}
/**
* Handle image load event - call function prop for caching
* Allows parent to control caching behavior and validation
*/
handleImageLoad(imageUrl: string): void {
this.onImageCache(imageUrl);
}
get fetchAmount(): string {
const claim =
(this.record.fullClaim as any)?.claim || this.record.fullClaim;
const claim = this.record.fullClaim;
const amount = claim.object?.amountOfThisGood
? this.displayAmount(claim.object.unitCode, claim.object.amountOfThisGood)
@@ -317,8 +298,7 @@ export default class ActivityListItem extends Vue {
}
get description(): string {
const claim =
(this.record.fullClaim as any)?.claim || this.record.fullClaim;
const claim = this.record.fullClaim;
return `${claim?.description || ""}`;
}
@@ -331,15 +311,6 @@ export default class ActivityListItem extends Vue {
return unitCode === "HUR" ? (single ? "hour" : "hours") : unitCode;
}
get canConfirm(): boolean {
if (!this.isRegistered) return false;
if (!isGiveClaimType(this.record.fullClaim?.["@type"])) return false;
if (this.confirmerIdList?.includes(this.activeDid)) return false;
if (this.record.issuerDid === this.activeDid) return false;
if (containsHiddenDid(this.record.fullClaim)) return false;
return true;
}
// Emit methods using @Emit decorator
@Emit("viewImage")
emitViewImage(imageUrl: string) {
@@ -351,26 +322,6 @@ export default class ActivityListItem extends Vue {
return jwtId;
}
@Emit("confirmClaim")
emitConfirmClaim() {
if (!this.canConfirm) {
notifyWhyCannotConfirm(
(msg, timeout) => this.notify.info(msg.text ?? "", timeout),
this.isRegistered,
this.record.fullClaim?.["@type"],
this.record,
this.activeDid,
this.confirmerIdList,
);
return;
}
return this.record;
}
handleConfirmClick() {
this.emitConfirmClaim();
}
get friendlyDate(): string {
const date = new Date(this.record.issuedAt);
return date.toLocaleDateString(undefined, {

2
src/components/ContactInputForm.vue
View File

@@ -167,7 +167,7 @@ export default class ContactInputForm extends Vue {
*/
@Emit("qr-scan")
private handleQRScan(): void {
console.log("[ContactInputForm] QR scan button clicked");
// QR scan button clicked - event emitted for parent handling
}
}
</script>

12
src/components/ContactListItem.vue
View File

@@ -121,6 +121,12 @@ import { AppString } from "../constants/app";
components: {
EntityIcon,
},
emits: [
"toggle-selection",
"show-identicon",
"show-gifted-dialog",
"open-offer-dialog",
],
})
export default class ContactListItem extends Vue {
@Prop({ required: true }) contact!: Contact;
@@ -151,14 +157,12 @@ export default class ContactListItem extends Vue {
return contact;
}
@Emit("show-gifted-dialog")
emitShowGiftedDialog(fromDid: string, toDid: string) {
return { fromDid, toDid };
this.$emit("show-gifted-dialog", fromDid, toDid);
}
@Emit("open-offer-dialog")
emitOpenOfferDialog(did: string, name: string | undefined) {
return { did, name };
this.$emit("open-offer-dialog", did, name);
}
/**

18
src/components/DataExportSection.vue
View File

@@ -54,7 +54,10 @@ messages * - Conditional UI based on platform capabilities * * @component *
<script lang="ts">
import { Component, Prop, Vue } from "vue-facing-decorator";
import * as R from "ramda";
import { AppString, NotificationIface } from "../constants/app";
import { Contact } from "../db/tables/contacts";
import { logger } from "../utils/logger";
import { contactsToExportJson } from "../libs/util";
@@ -181,7 +184,20 @@ export default class DataExportSection extends Vue {
const allContacts = await this.$contacts();
// Convert contacts to export format
const exportData = contactsToExportJson(allContacts);
const processedContacts: Contact[] = allContacts.map((contact) => {
// first remove the contactMethods field, mostly to cast to a clear type (that will end up with JSON objects)
const exContact: Contact = R.omit(["contactMethods"], contact);
// now add contactMethods as a true array of ContactMethod objects
exContact.contactMethods = contact.contactMethods
? typeof contact.contactMethods === "string" &&
contact.contactMethods.trim() !== ""
? JSON.parse(contact.contactMethods)
: []
: [];
return exContact;
});
const exportData = contactsToExportJson(processedContacts);
const jsonStr = JSON.stringify(exportData, null, 2);
// Use platform service to handle export (no platform-specific logic here!)

61
src/components/EntitySelectionStep.vue
View File

@@ -136,6 +136,20 @@ export default class EntitySelectionStep extends Vue {
@Prop()
receiver?: EntityData | null;
/** Form field values to preserve when navigating to "Show All" */
@Prop({ default: "" })
description!: string;
@Prop({ default: "0" })
amountInput!: string;
@Prop({ default: "HUR" })
unitCode!: string;
/** Offer ID for context when fulfilling an offer */
@Prop({ default: "" })
offerId!: string;
/** Notification function from parent component */
@Prop()
notify?: (notification: NotificationIface, timeout?: number) => void;
@@ -220,34 +234,41 @@ export default class EntitySelectionStep extends Vue {
* Query parameters for "Show All" navigation
*/
get showAllQueryParams(): Record<string, string> {
if (this.shouldShowProjects) {
return {};
}
return {
const baseParams = {
stepType: this.stepType,
giverEntityType: this.giverEntityType,
recipientEntityType: this.recipientEntityType,
...(this.stepType === "giver"
? {
recipientProjectId: this.toProjectId || "",
recipientProjectName: this.receiver?.name || "",
recipientProjectImage: this.receiver?.image || "",
recipientProjectHandleId: this.receiver?.handleId || "",
recipientDid: this.receiver?.did || "",
}
: {
giverProjectId: this.fromProjectId || "",
giverProjectName: this.giver?.name || "",
giverProjectImage: this.giver?.image || "",
giverProjectHandleId: this.giver?.handleId || "",
giverDid: this.giver?.did || "",
}),
// 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 || "" : "",
};
}
/**

13
src/components/GiftDetailsStep.vue
View File

@@ -315,16 +315,15 @@ export default class GiftDetailsStep extends Vue {
giverName: this.giver?.name,
offerId: this.offerId,
fulfillsProjectId:
this.giverEntityType === "person" &&
this.recipientEntityType === "project"
? this.toProjectId
: undefined,
this.recipientEntityType === "project" ? this.toProjectId : undefined,
providerProjectId:
this.giverEntityType === "project" &&
this.recipientEntityType === "person"
this.giverEntityType === "project"
? this.giver?.handleId
: this.fromProjectId,
recipientDid: this.receiver?.did,
recipientDid:
this.recipientEntityType === "person"
? this.receiver?.did
: undefined,
recipientName: this.receiver?.name,
unitCode: this.localUnitCode,
},

159
src/components/GiftedDialog.vue
View File

@@ -1,13 +1,19 @@
<template>
<div v-if="visible" class="dialog-overlay">
<div class="dialog">
<div
class="dialog"
data-testid="gifted-dialog"
:data-recipient-entity-type="recipientEntityType"
>
<!-- Step 1: Entity Selection -->
<EntitySelectionStep
v-show="firstStep"
:step-type="stepType"
:giver-entity-type="giverEntityType"
:recipient-entity-type="recipientEntityType"
:show-projects="showProjects"
:show-projects="
giverEntityType === 'project' || recipientEntityType === 'project'
"
:is-from-project-view="isFromProjectView"
:projects="projects"
:all-contacts="allContacts"
@@ -18,6 +24,10 @@
:to-project-id="toProjectId"
:giver="giver"
:receiver="receiver"
:description="description"
:amount-input="amountInput"
:unit-code="unitCode"
:offer-id="offerId"
:notify="$notify"
@entity-selected="handleEntitySelected"
@cancel="cancel"
@@ -52,7 +62,7 @@
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-facing-decorator";
import { Vue, Component, Prop } from "vue-facing-decorator";
import {
createAndSubmitGive,
@@ -70,7 +80,13 @@ import EntitySelectionStep from "../components/EntitySelectionStep.vue";
import GiftDetailsStep from "../components/GiftDetailsStep.vue";
import { PlanData } from "../interfaces/records";
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
import { createNotifyHelpers, TIMEOUTS, NotifyFunction } from "@/utils/notify";
import {
NOTIFY_GIFT_ERROR_NEGATIVE_AMOUNT,
NOTIFY_GIFT_ERROR_NO_DESCRIPTION,
NOTIFY_GIFTED_DETAILS_NO_IDENTIFIER,
NOTIFY_GIFTED_DETAILS_RECORDING_GIVE,
} from "@/constants/notifications";
@Component({
components: {
@@ -82,7 +98,7 @@ import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
mixins: [PlatformServiceMixin],
})
export default class GiftedDialog extends Vue {
$notify!: (notification: any, timeout?: number) => void;
$notify!: NotifyFunction;
notify!: ReturnType<typeof createNotifyHelpers>;
/**
@@ -97,23 +113,13 @@ export default class GiftedDialog extends Vue {
@Prop() fromProjectId = "";
@Prop() toProjectId = "";
@Prop({ default: false }) showProjects = false;
@Prop() isFromProjectView = false;
@Watch("showProjects")
onShowProjectsChange() {
this.updateEntityTypes();
}
@Watch("fromProjectId")
onFromProjectIdChange() {
this.updateEntityTypes();
}
@Watch("toProjectId")
onToProjectIdChange() {
this.updateEntityTypes();
}
@Prop({ default: "person" }) giverEntityType = "person" as
| "person"
| "project";
@Prop({ default: "person" }) recipientEntityType = "person" as
| "person"
| "project";
activeDid = "";
allContacts: Array<Contact> = [];
@@ -122,20 +128,19 @@ export default class GiftedDialog extends Vue {
amountInput = "0";
callbackOnSuccess?: (amount: number) => void = () => {};
customTitle?: string;
description = "";
firstStep = true; // true = Step 1 (giver/recipient selection), false = Step 2 (amount/description)
giver?: libsUtil.GiverReceiverInputInfo; // undefined means no identified giver agent
offerId = "";
projects: PlanData[] = [];
prompt = "";
receiver?: libsUtil.GiverReceiverInputInfo;
stepType = "giver";
unitCode = "HUR";
visible = false;
libsUtil = libsUtil;
projects: PlanData[] = [];
didInfo = didInfo;
// Computed property to help debug template logic
@@ -189,56 +194,27 @@ export default class GiftedDialog extends Vue {
return false;
}
stepType = "giver";
giverEntityType = "person" as "person" | "project";
recipientEntityType = "person" as "person" | "project";
updateEntityTypes() {
// Reset and set entity types based on current context
this.giverEntityType = "person";
this.recipientEntityType = "person";
// Determine entity types based on current context
if (this.showProjects) {
// HomeView "Project" button or ProjectViewView "Given by This"
this.giverEntityType = "project";
this.recipientEntityType = "person";
} else if (this.fromProjectId) {
// ProjectViewView "Given by This" button (project is giver)
this.giverEntityType = "project";
this.recipientEntityType = "person";
} else if (this.toProjectId) {
// ProjectViewView "Given to This" button (project is recipient)
this.giverEntityType = "person";
this.recipientEntityType = "project";
} else {
// HomeView "Person" button
this.giverEntityType = "person";
this.recipientEntityType = "person";
}
}
async open(
giver?: libsUtil.GiverReceiverInputInfo,
receiver?: libsUtil.GiverReceiverInputInfo,
offerId?: string,
customTitle?: string,
prompt?: string,
description?: string,
amountInput?: string,
unitCode?: string,
callbackOnSuccess: (amount: number) => void = () => {},
) {
this.customTitle = customTitle;
this.giver = giver;
this.prompt = prompt || "";
this.receiver = receiver;
this.amountInput = "0";
this.callbackOnSuccess = callbackOnSuccess;
this.offerId = offerId || "";
this.prompt = prompt || "";
this.description = description || "";
this.amountInput = amountInput || "0";
this.unitCode = unitCode || "HUR";
this.callbackOnSuccess = callbackOnSuccess;
this.firstStep = !giver;
this.stepType = "giver";
// Update entity types based on current props
this.updateEntityTypes();
try {
const settings = await this.$settings();
this.apiServer = settings.apiServer || "";
@@ -318,23 +294,24 @@ export default class GiftedDialog extends Vue {
async confirm() {
if (!this.activeDid) {
this.safeNotify.error(
"You must select an identifier before you can record a give.",
TIMEOUTS.STANDARD,
NOTIFY_GIFTED_DETAILS_NO_IDENTIFIER.message,
TIMEOUTS.SHORT,
);
return;
}
if (parseFloat(this.amountInput) < 0) {
this.safeNotify.error(
"You may not send a negative number.",
NOTIFY_GIFT_ERROR_NEGATIVE_AMOUNT.message,
TIMEOUTS.SHORT,
);
return;
}
if (!this.description && !parseFloat(this.amountInput)) {
this.safeNotify.error(
`You must enter a description or some number of ${
this.libsUtil.UNIT_LONG[this.unitCode]
}.`,
NOTIFY_GIFT_ERROR_NO_DESCRIPTION.message.replace(
"{unit}",
this.libsUtil.UNIT_SHORT[this.unitCode] || this.unitCode,
),
TIMEOUTS.SHORT,
);
return;
@@ -350,7 +327,11 @@ export default class GiftedDialog extends Vue {
}
this.close();
this.safeNotify.toast("Recording the give...", undefined, TIMEOUTS.BRIEF);
this.safeNotify.toast(
NOTIFY_GIFTED_DETAILS_RECORDING_GIVE.message,
undefined,
TIMEOUTS.BRIEF,
);
// this is asynchronous, but we don't need to wait for it to complete
await this.recordGive(
(this.giver?.did as string) || null,
@@ -477,10 +458,13 @@ export default class GiftedDialog extends Vue {
name: contact.name || contact.did,
};
} else {
this.giver = {
did: "",
name: "Unnamed",
};
// Only set to "Unnamed" if no giver is currently set
if (!this.giver || !this.giver.did) {
this.giver = {
did: "",
name: "Unnamed",
};
}
}
this.firstStep = false;
}
@@ -490,6 +474,10 @@ export default class GiftedDialog extends Vue {
this.firstStep = true;
}
moveToStep2() {
this.firstStep = false;
}
async loadProjects() {
try {
const response = await fetch(this.apiServer + "/api/v2/report/plans", {
@@ -532,10 +520,13 @@ export default class GiftedDialog extends Vue {
name: contact.name || contact.did,
};
} else {
this.receiver = {
did: "",
name: "Unnamed",
};
// Only set to "Unnamed" if no receiver is currently set
if (!this.receiver || !this.receiver.did) {
this.receiver = {
did: "",
name: "Unnamed",
};
}
}
this.firstStep = false;
}
@@ -559,16 +550,13 @@ export default class GiftedDialog extends Vue {
giverName: this.giver?.name,
offerId: this.offerId,
fulfillsProjectId:
this.giverEntityType === "person" &&
this.recipientEntityType === "project"
? this.toProjectId
: undefined,
this.recipientEntityType === "project" ? this.toProjectId : undefined,
providerProjectId:
this.giverEntityType === "project" &&
this.recipientEntityType === "person"
this.giverEntityType === "project"
? this.giver?.handleId
: this.fromProjectId,
recipientDid: this.receiver?.did,
recipientDid:
this.recipientEntityType === "person" ? this.receiver?.did : undefined,
recipientName: this.receiver?.name,
unitCode: this.unitCode,
};
@@ -634,7 +622,10 @@ export default class GiftedDialog extends Vue {
* Handle edit entity request from GiftDetailsStep
* @param data - Object containing entityType and currentEntity
*/
handleEditEntity(data: { entityType: string; currentEntity: any }) {
handleEditEntity(data: {
entityType: string;
currentEntity: { did: string; name: string };
}) {
this.goBackToStep1(data.entityType);
}

4
src/components/ImageMethodDialog.vue
View File

@@ -282,7 +282,7 @@ import {
NOTIFY_IMAGE_DIALOG_UNSUPPORTED_FORMAT,
createImageDialogCameraErrorMessage,
} from "../constants/notifications";
import { createNotifyHelpers, TIMEOUTS } from "../utils/notify";
import { createNotifyHelpers, TIMEOUTS, NotifyFunction } from "../utils/notify";
const inputImageFileNameRef = ref<Blob>();
@@ -291,7 +291,7 @@ const inputImageFileNameRef = ref<Blob>();
mixins: [PlatformServiceMixin],
})
export default class ImageMethodDialog extends Vue {
$notify!: (notification: any, timeout?: number) => void;
$notify!: NotifyFunction;
$router!: Router;
notify = createNotifyHelpers(this.$notify);

1
src/components/ImageViewer.vue
View File

@@ -45,7 +45,6 @@ import { logger } from "../utils/logger";
@Component({ emits: ["update:isOpen"] })
export default class ImageViewer extends Vue {
@Prop() imageUrl!: string;
@Prop() imageData!: Blob | null;
@Prop() isOpen!: boolean;
userAgent = new UAParser();

19
src/components/MembersList.vue
View File

@@ -159,25 +159,6 @@
</template>
<script lang="ts">
/* TODO: Human Testing Required - PlatformServiceMixin Migration */
// Priority: High | Migrated: 2025-07-06 | Author: Matthew Raymer
//
// TESTING NEEDED: Component migrated from legacy logConsoleAndDb to PlatformServiceMixin
// but requires human validation due to meeting component accessibility limitations.
//
// Test Scenarios Required:
// 1. Load members list with valid meeting password
// 2. Test member admission toggle (organizer role)
// 3. Test adding member as contact
// 4. Test error scenarios: network failure, invalid password, server errors
// 5. Verify error logging appears in console and database
// 6. Cross-platform testing: web, mobile, desktop
//
// Reference: docs/migration-testing/migration-checklist-MembersList.md
// Migration Details: Replaced 3 logConsoleAndDb() calls with this.$logAndConsole()
// Validation: Passes lint checks and TypeScript compilation
// Navigation: Contacts → Chair Icon → Start/Join Meeting → Members List
import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
import {

143
src/components/OfferDialog.vue
View File

@@ -15,26 +15,25 @@ Raymer */
class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
placeholder="Description of what is offered"
/>
<div class="flex flex-row mt-2">
<span :class="unitCodeDisplayClasses" @click="changeUnitCode()">
{{ libsUtil.UNIT_SHORT[amountUnitCode] }}
</span>
<div
v-if="showDecrementButton"
:class="controlButtonClasses"
@click="decrement()"
>
<font-awesome icon="chevron-left" />
</div>
<input
v-model="amountInput"
<div class="flex mb-4">
<AmountInput
:value="parseFloat(amountInput) || 0"
:on-update-value="handleAmountUpdate"
data-testId="inputOfferAmount"
type="number"
:class="amountInputClasses"
/>
<div :class="incrementButtonClasses" @click="increment()">
<font-awesome icon="chevron-right" />
</div>
<select
v-model="amountUnitCode"
class="flex-1 rounded border border-slate-400 ms-2 px-3 py-2"
>
<option
v-for="(displayName, code) in unitOptions"
:key="code"
:value="code"
>
{{ displayName }}
</option>
</select>
</div>
<div class="mt-4 flex justify-center">
<span>
@@ -73,10 +72,15 @@ import {
NOTIFY_OFFER_CREATION_ERROR,
NOTIFY_OFFER_SUCCESS,
NOTIFY_OFFER_SUBMISSION_ERROR,
NOTIFY_OFFER_ERROR_NEGATIVE_AMOUNT,
} from "@/constants/notifications";
import AmountInput from "./AmountInput.vue";
@Component({
mixins: [PlatformServiceMixin],
components: {
AmountInput,
},
})
export default class OfferDialog extends Vue {
@Prop projectId?: string;
@@ -122,35 +126,10 @@ export default class OfferDialog extends Vue {
}
/**
* CSS classes for unit code selector and increment/decrement buttons
* Reduces template complexity for repeated border and styling patterns
* Computed property to get unit options for the select dropdown
*/
get controlButtonClasses(): string {
return "border border-r-0 border-slate-400 bg-slate-200 px-4 py-2";
}
/**
* CSS classes for unit code display span
* Reduces template complexity for unit code button styling
*/
get unitCodeDisplayClasses(): string {
return "rounded-l border border-r-0 border-slate-400 bg-slate-200 w-1/3 text-center text-blue-500 px-2 py-2";
}
/**
* CSS classes for amount input field
* Reduces template complexity for input styling
*/
get amountInputClasses(): string {
return "w-full border border-r-0 border-slate-400 px-2 py-2 text-center";
}
/**
* CSS classes for the right-most increment button
* Reduces template complexity for border styling
*/
get incrementButtonClasses(): string {
return "rounded-r border border-slate-400 bg-slate-200 px-4 py-2";
get unitOptions() {
return this.libsUtil.UNIT_SHORT;
}
/**
@@ -173,14 +152,6 @@ export default class OfferDialog extends Vue {
};
}
/**
* Whether the decrement button should be visible
* Encapsulates conditional logic from template
*/
get showDecrementButton(): boolean {
return this.amountInput !== "0";
}
// =================================================
// COMPONENT METHODS
// =================================================
@@ -227,29 +198,11 @@ export default class OfferDialog extends Vue {
}
/**
* Cycle through available unit codes
* Handle amount updates from AmountInput component
* @param value - New amount value
*/
changeUnitCode() {
const units = Object.keys(this.libsUtil.UNIT_SHORT);
const index = units.indexOf(this.amountUnitCode);
this.amountUnitCode = units[(index + 1) % units.length];
}
/**
* Increment the amount input
*/
increment() {
this.amountInput = `${(parseFloat(this.amountInput) || 0) + 1}`;
}
/**
* Decrement the amount input
*/
decrement() {
this.amountInput = `${Math.max(
0,
(parseFloat(this.amountInput) || 1) - 1,
)}`;
handleAmountUpdate(value: number) {
this.amountInput = value.toString();
}
/**
@@ -273,6 +226,28 @@ export default class OfferDialog extends Vue {
* Confirm and submit the offer
*/
async confirm() {
if (!this.activeDid) {
this.notify.error(NOTIFY_OFFER_IDENTITY_REQUIRED.message, TIMEOUTS.LONG);
return;
}
if (parseFloat(this.amountInput) < 0) {
this.notify.error(
NOTIFY_OFFER_ERROR_NEGATIVE_AMOUNT.message,
TIMEOUTS.SHORT,
);
return;
}
if (!this.description && !parseFloat(this.amountInput)) {
const message = NOTIFY_OFFER_DESCRIPTION_REQUIRED.message.replace(
"{unit}",
this.libsUtil.UNIT_LONG[this.amountUnitCode],
);
this.notify.error(message, TIMEOUTS.SHORT);
return;
}
this.close();
this.notify.toast(NOTIFY_OFFER_RECORDING.text, undefined, TIMEOUTS.BRIEF);
@@ -301,20 +276,6 @@ export default class OfferDialog extends Vue {
unitCode: string = "HUR",
expirationDateInput?: string,
) {
if (!this.activeDid) {
this.notify.error(NOTIFY_OFFER_IDENTITY_REQUIRED.message, TIMEOUTS.LONG);
return;
}
if (!description && !amount) {
const message = NOTIFY_OFFER_DESCRIPTION_REQUIRED.message.replace(
"{unit}",
this.libsUtil.UNIT_LONG[unitCode],
);
this.notify.error(message, TIMEOUTS.MODAL);
return;
}
try {
const result = await createAndSubmitOffer(
this.axios,
@@ -363,7 +324,7 @@ export default class OfferDialog extends Vue {
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
z-index: 50;
}
.dialog {

5
src/components/UsageLimitsSection.vue
View File

@@ -83,6 +83,7 @@
<script lang="ts">
import { Component, Vue, Prop } from "vue-facing-decorator";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { EndorserRateLimits, ImageRateLimits } from "@/interfaces/limits";
@Component({
name: "UsageLimitsSection",
@@ -94,8 +95,8 @@ export default class UsageLimitsSection extends Vue {
@Prop({ required: true }) loadingLimits!: boolean;
@Prop({ required: true }) limitsMessage!: string;
@Prop({ required: false }) activeDid?: string;
@Prop({ required: false }) endorserLimits?: any;
@Prop({ required: false }) imageLimits?: any;
@Prop({ required: false }) endorserLimits?: EndorserRateLimits;
@Prop({ required: false }) imageLimits?: ImageRateLimits;
@Prop({ required: true }) onRecheckLimits!: () => void;
mounted() {