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

replace many of the javascript "confirm" calls with the nicer UX version

Browse Source
This commit is contained in:
Trent Larson
2024-04-24 19:52:33 -06:00
parent 6ce3a0703c
commit 421b4c1719
3 changed files with 243 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/App.vue
View File

@@ -129,7 +129,10 @@
</div>
</NotificationGroup>
<!-- These are general-purpose messages - except there are some for turning app notifications on and off. -->
<!--
This "group" of "modal" is the prompt for an answer.
Set "type" as follows: "confirm" for yes/no, and "notification" ones: "-permission", "-mute", "-off"
-->
<NotificationGroup group="modal">
<div class="fixed z-[100] top-0 inset-x-0 w-full">
<Notification
@@ -158,9 +161,8 @@
class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
>
<div class="w-full px-6 py-6 text-slate-900 text-center">
<p class="text-lg mb-4">
{{ notification.title }}
</p>
<span class="font-semibold text-lg">{{ notification.title }}</span>
<p class="text-sm mb-2">{{ notification.text }}</p>
<button
v-if="notification.onYes"
@@ -173,6 +175,17 @@
Yes
</button>
<button
v-if="notification.onNo"
@click="
notification.onNo();
close(notification.id);
"
class="block w-full text-center text-md font-bold uppercase bg-yellow-600 text-white px-2 py-2 rounded-md mb-2"
>
No
</button>
<button
@click="close(notification.id)"
class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"

1
src/constants/app.ts
View File

@@ -39,5 +39,6 @@ export interface NotificationIface {
type: string; // "toast" | "info" | "success" | "warning" | "danger"
title: string;
text: string;
onNo?: () => Promise<void>;
onYes?: () => Promise<void>;
}

116
src/views/ContactsView.vue
View File

@@ -139,7 +139,7 @@
<button
v-if="contact.seesMe"
class="text-sm uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
@click="setVisibility(contact, false, true)"
@click="promptSetVisibility(contact, false)"
title="They can see you"
>
<fa icon="eye" class="fa-fw" />
@@ -147,7 +147,7 @@
<button
v-else
class="text-sm uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
@click="setVisibility(contact, true, true)"
@click="promptSetVisibility(contact, true)"
title="They cannot see you"
>
<fa icon="eye-slash" class="fa-fw" />
@@ -161,7 +161,7 @@
<fa icon="rotate" class="fa-fw" />
</button>
<button
@click="register(contact)"
@click="promptRegister(contact)"
class="text-sm uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-6 px-2 py-1.5 rounded-md"
v-if="activeDid"
title="Registration"
@@ -176,7 +176,7 @@
</div>
<button
@click="deleteContact(contact)"
@click="promptDeleteContact(contact)"
class="text-sm uppercase bg-gradient-to-b from-rose-500 to-rose-800 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-6 px-2 py-1.5 rounded-md"
title="Delete"
>
@@ -189,7 +189,7 @@
>
<button
class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-l-md"
@click="showGiftedDialog(activeDid, contact.did)"
@click="promptShowGiftedDialog(activeDid, contact.did)"
:title="givenByMeDescriptions[contact.did] || ''"
>
To:
@@ -210,7 +210,7 @@
<button
class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white -ml-1.5 px-2 py-1.5 rounded-r-md border-l"
@click="showGiftedDialog(contact.did, this.activeDid)"
@click="promptShowGiftedDialog(contact.did, this.activeDid)"
:title="givenToMeDescriptions[contact.did] || ''"
>
From:
@@ -781,35 +781,56 @@ export default class ContactsView extends Vue {
});
}
async deleteContact(contact: Contact) {
if (
confirm(
"You should first make sure that your activity is no longer visible to them." +
" Note that this only deletes them from your contacts on this device." +
" \n\nAre you sure you want to remove " +
// prompt with confirmation if they want to delete a contact
promptDeleteContact(contact: Contact) {
this.$notify(
{
group: "modal",
type: "confirm",
title: "Delete",
text:
"Are you sure you want to remove " +
this.nameForDid(this.contacts, contact.did) +
" with DID " +
contact.did +
" from your contact list?",
)
) {
onYes: async () => {
await this.deleteContact(contact);
},
},
-1,
);
}
async deleteContact(contact: Contact) {
await db.open();
await db.contacts.delete(contact.did);
this.contacts = R.without([contact], this.contacts);
}
}
async register(contact: Contact) {
if (
confirm(
// prompt to register a new contact
async promptRegister(contact: Contact) {
this.$notify(
{
group: "modal",
type: "confirm",
title: "Register",
text:
"Are you sure you want to register " +
this.nameForDid(this.contacts, contact.did) +
(contact.registered
? " -- especially since they are already marked as registered"
: "") +
"?",
)
) {
onYes: async () => {
await this.register(contact);
},
},
-1,
);
}
async register(contact: Contact) {
this.$notify(
{
group: "alert",
@@ -915,6 +936,23 @@ export default class ContactsView extends Vue {
}
}
}
async promptSetVisibility(contact: Contact, visibility: boolean) {
const visibilityPrompt = visibility
? "Are you sure you want to make your activity visible to them?"
: "Are you sure you want to hide all your activity from them?";
this.$notify(
{
group: "modal",
type: "confirm",
title: "Set Visibility",
text: visibilityPrompt,
onYes: async () => {
await this.setVisibility(contact, visibility, true);
},
},
-1,
);
}
async setVisibility(
@@ -922,12 +960,6 @@ export default class ContactsView extends Vue {
visibility: boolean,
showSuccessAlert: boolean,
) {
const visibilityPrompt =
showSuccessAlert &&
(visibility
? "Are you sure you want to make your activity visible to them?"
: "Are you sure you want to hide all your activity from them?");
if (!visibilityPrompt || confirm(visibilityPrompt)) {
const url =
this.apiServer +
"/api/report/" +
@@ -987,7 +1019,6 @@ export default class ContactsView extends Vue {
);
}
}
}
async checkVisibility(contact: Contact) {
const url =
@@ -1058,16 +1089,15 @@ export default class ContactsView extends Vue {
);
}
private showGiftedDialog(giverDid: string, recipientDid: string) {
// if they have unconfirmed amounts, ask to confirm those first
promptShowGiftedDialog(giverDid: string, recipientDid: string) {
// if they have unconfirmed amounts, ask to confirm those
if (
recipientDid == this.activeDid &&
recipientDid === this.activeDid &&
this.givenToMeUnconfirmed[giverDid] > 0
) {
const isAre = this.givenToMeUnconfirmed[giverDid] == 1 ? "is" : "are";
const hours = this.givenToMeUnconfirmed[giverDid] == 1 ? "hour" : "hours";
if (
confirm(
const message =
"There " +
isAre +
" " +
@@ -1075,17 +1105,31 @@ export default class ContactsView extends Vue {
" unconfirmed " +
hours +
" from them." +
" Would you like to confirm some of those hours?",
)
) {
" Would you like to confirm some of those hours?";
this.$notify(
{
group: "modal",
type: "confirm",
title: "Delete",
text: message,
onNo: async () => {
this.showGiftedDialog(giverDid, recipientDid);
},
onYes: async () => {
this.$router.push({
name: "contact-amounts",
query: { contactDid: giverDid },
});
return;
},
},
-1,
);
} else {
this.showGiftedDialog(giverDid, recipientDid);
}
}
private showGiftedDialog(giverDid: string, recipientDid: string) {
let giver: GiverReceiverInputInfo, receiver: GiverReceiverInputInfo;
if (giverDid) {
giver = {