From 05a7758c65cc544ca4540853b69fe44f8ed1227c Mon Sep 17 00:00:00 2001 From: Jose Olarte III Date: Wed, 19 Jul 2023 19:48:22 +0800 Subject: [PATCH 1/5] New notification system + test Set of buttons added to home view for preview. Comes in toast (self-dismiss) and context alert (info, warning, danger) variants. --- package-lock.json | 17 +++++++ package.json | 1 + src/App.vue | 103 +++++++++++++++++++++++++++++++++++++++++ src/main.ts | 6 +++ src/views/HomeView.vue | 71 ++++++++++++++++++++++++++++ 5 files changed, 198 insertions(+) diff --git a/package-lock.json b/package-lock.json index df6f9bab1..e4ccf88f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,6 +38,7 @@ "luxon": "^3.3.0", "merkletreejs": "^0.3.10", "moment": "^2.29.4", + "notiwind": "^2.0.2", "papaparse": "^5.4.1", "pina": "^0.20.2204228", "pinia-plugin-persistedstate": "^3.1.0", @@ -20928,6 +20929,11 @@ "node": ">= 8" } }, + "node_modules/mitt": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz", + "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==" + }, "node_modules/mkdirp": { "version": "0.5.6", "resolved": "https://registry.npmmirror.com/mkdirp/-/mkdirp-0.5.6.tgz", @@ -21275,6 +21281,17 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/notiwind": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/notiwind/-/notiwind-2.0.2.tgz", + "integrity": "sha512-wMCf+07E093d0Q78C5UHroT9GQHm4mIGerhg7dGLJ0GN6zONqKj8nTR3clkq/Y44On9k28/0DtDNwOX7FT5p/A==", + "dependencies": { + "mitt": "^3.0.1" + }, + "peerDependencies": { + "vue": "^3.3.4" + } + }, "node_modules/npm-package-arg": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-7.0.0.tgz", diff --git a/package.json b/package.json index 062adb04f..de2f9cad5 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "luxon": "^3.3.0", "merkletreejs": "^0.3.10", "moment": "^2.29.4", + "notiwind": "^2.0.2", "papaparse": "^5.4.1", "pina": "^0.20.2204228", "pinia-plugin-persistedstate": "^3.1.0", diff --git a/src/App.vue b/src/App.vue index 8b2af9248..39a829264 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,5 +1,108 @@ diff --git a/src/main.ts b/src/main.ts index bc3f7d580..14eb8d5c7 100644 --- a/src/main.ts +++ b/src/main.ts @@ -5,6 +5,7 @@ import "./registerServiceWorker"; import router from "./router"; import axios from "axios"; import VueAxios from "vue-axios"; +import Notifications from "notiwind"; import "./assets/styles/tailwind.css"; @@ -16,6 +17,7 @@ import { faChevronRight, faCircle, faCircleCheck, + faCircleInfo, faCircleQuestion, faCircleUser, faClock, @@ -45,6 +47,7 @@ import { faSquareCaretDown, faSquareCaretUp, faTrashCan, + faTriangleExclamation, faUser, faUsers, faXmark, @@ -57,6 +60,7 @@ library.add( faChevronRight, faCircle, faCircleCheck, + faCircleInfo, faCircleQuestion, faCircleUser, faClock, @@ -86,6 +90,7 @@ library.add( faSquareCaretDown, faSquareCaretUp, faTrashCan, + faTriangleExclamation, faUser, faUsers, faXmark, @@ -98,4 +103,5 @@ createApp(App) .use(createPinia()) .use(VueAxios, axios) .use(router) + .use(Notifications) .mount("#app"); diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index d7bb77fc2..37d47d11e 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -6,6 +6,77 @@ Time Safari +
+

Notiwind Alert Test Suite

+ + + + + + + + +
+

Quick Action

Show appreciation to a contact:

From c4443f2ed1ccd4a023a3230fe6bae29f81b536e2 Mon Sep 17 00:00:00 2001 From: Matthew Raymer Date: Thu, 20 Jul 2023 16:36:33 +0800 Subject: [PATCH 2/5] Added error handling and new alerts in DiscoverView --- src/router/index.ts | 10 ++++++++++ src/views/DiscoverView.vue | 20 ++++++++++++++++++++ 2 files changed, 30 insertions(+) diff --git a/src/router/index.ts b/src/router/index.ts index 501feda20..c524c1b75 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -182,4 +182,14 @@ const router = createRouter({ routes, }); +const errorHandler = (error, to, from) => { + // Handle the error here + console.error(error, to, from); + console.log("XXXXX"); + + // You can also perform additional actions, such as displaying an error message or redirecting the user to a specific page +}; + +router.onError(errorHandler); // Assign the error handler to the router instance + export default router; diff --git a/src/views/DiscoverView.vue b/src/views/DiscoverView.vue index a223f72e3..b28f50266 100644 --- a/src/views/DiscoverView.vue +++ b/src/views/DiscoverView.vue @@ -186,6 +186,16 @@ export default class DiscoverView extends Vue { if (response.status !== 200) { const details = await response.text(); + this.$notify( + { + group: "alert", + type: "danger", + title: "Danger Alert", + text: details, + }, + -1, + ); + throw details; } @@ -240,6 +250,16 @@ export default class DiscoverView extends Vue { ); if (response.status !== 200) { + const details = await response.text(); + this.$notify( + { + group: "alert", + type: "danger", + title: "Danger Alert", + text: details, + }, + -1, + ); throw await response.text(); } From db22d559b7e6a047224b12c41d4bd2d2c0162e86 Mon Sep 17 00:00:00 2001 From: Jose Olarte III Date: Thu, 20 Jul 2023 18:04:08 +0800 Subject: [PATCH 3/5] User-friendly error messages --- src/views/DiscoverView.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/views/DiscoverView.vue b/src/views/DiscoverView.vue index b28f50266..d13bd3e1f 100644 --- a/src/views/DiscoverView.vue +++ b/src/views/DiscoverView.vue @@ -190,8 +190,8 @@ export default class DiscoverView extends Vue { { group: "alert", type: "danger", - title: "Danger Alert", - text: details, + title: "Error", + text: `There was a problem accessing the server. Please try again later. (${details})`, }, -1, ); @@ -255,8 +255,8 @@ export default class DiscoverView extends Vue { { group: "alert", type: "danger", - title: "Danger Alert", - text: details, + title: "Error", + text: `There was a problem accessing the server. Please try again later. (${details})`, }, -1, ); From eff67c2a4a4c63aceb2b3ac0a4b18d087e11c424 Mon Sep 17 00:00:00 2001 From: Jose Olarte III Date: Thu, 20 Jul 2023 21:51:23 +0800 Subject: [PATCH 4/5] Replaced alertMessage calls with Notiwind --- src/views/DiscoverView.vue | 24 ++++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/src/views/DiscoverView.vue b/src/views/DiscoverView.vue index d13bd3e1f..b091a735b 100644 --- a/src/views/DiscoverView.vue +++ b/src/views/DiscoverView.vue @@ -214,9 +214,15 @@ export default class DiscoverView extends Vue { } } catch (e) { console.log("Error with feed load:", e); - this.alertMessage = - e.userMessage || "There was an error retrieving projects."; - this.alertTitle = "Error"; + this.$notify( + { + group: "alert", + type: "danger", + title: "Error", + text: e.userMessage || "There was a problem retrieving projects.", + }, + -1, + ); } finally { this.isLoading = false; } @@ -283,9 +289,15 @@ export default class DiscoverView extends Vue { } } catch (e) { console.log("Error with feed load:", e); - this.alertMessage = - e.userMessage || "There was an error retrieving projects."; - this.alertTitle = "Error"; + this.$notify( + { + group: "alert", + type: "danger", + title: "Error", + text: e.userMessage || "There was a problem retrieving projects.", + }, + -1, + ); } finally { this.isLoading = false; } From f55e50067fcbfb043d7058d642d282b28c4ccf9a Mon Sep 17 00:00:00 2001 From: Jose Olarte III Date: Fri, 21 Jul 2023 20:26:00 +0800 Subject: [PATCH 5/5] Replaced all alertMessage calls with notiwind --- src/App.vue | 24 ++++ src/views/AccountViewView.vue | 46 +++++-- src/views/ContactAmountsView.vue | 72 +++++++--- src/views/ContactGiftingView.vue | 71 +++++++--- src/views/ContactQRScanShowView.vue | 10 +- src/views/ContactsView.vue | 202 ++++++++++++++++++++++------ src/views/HomeView.vue | 103 +++++++++++--- src/views/IdentitySwitcherView.vue | 12 +- src/views/NewEditProjectView.vue | 33 ++++- src/views/ProjectViewView.vue | 140 +++++++++++++++---- src/views/ProjectsView.vue | 33 ++++- src/views/SeedBackupView.vue | 11 +- src/views/StatisticsView.vue | 11 +- 13 files changed, 615 insertions(+), 153 deletions(-) diff --git a/src/App.vue b/src/App.vue index 39a829264..8a0147614 100644 --- a/src/App.vue +++ b/src/App.vue @@ -27,12 +27,36 @@ class="w-full max-w-sm mx-auto mb-3 overflow-hidden bg-slate-900/90 text-white rounded-lg shadow-md" >
+ {{ notification.title }}

{{ notification.text }}

+
+ +
+ +
+ {{ notification.title }} +

{{ notification.text }}

+ + +
+
+ +
= R.sort( @@ -206,8 +225,15 @@ export default class ContactsView extends Vue { ); this.giveRecords = sortedResult; } catch (error) { - this.alertTitle = "Error With Server"; - this.alertMessage = error as string; + this.$notify( + { + group: "alert", + type: "danger", + title: "Error With Server", + text: error as string, + }, + -1, + ); } } @@ -276,15 +302,29 @@ export default class ContactsView extends Vue { userMessage = error as string; } // Now set that error for the user to see. - this.alertTitle = "Error With Server"; - this.alertMessage = userMessage; + this.$notify( + { + group: "alert", + type: "danger", + title: "Error With Server", + text: userMessage, + }, + -1, + ); } } } cannotConfirmMessage() { - this.alertTitle = "Not Allowed"; - this.alertMessage = "Only the recipient can confirm final receipt."; + this.$notify( + { + group: "alert", + type: "danger", + title: "Not Allowed", + text: "Only the recipient can confirm final receipt.", + }, + -1, + ); } } diff --git a/src/views/ContactGiftingView.vue b/src/views/ContactGiftingView.vue index 11b782139..dc32988b0 100644 --- a/src/views/ContactGiftingView.vue +++ b/src/views/ContactGiftingView.vue @@ -145,10 +145,17 @@ export default class HomeView extends Vue { this.feedLastViewedId = settings?.lastViewedClaimId; this.updateAllFeed(); } catch (err) { - this.alertTitle = "Error"; - this.alertMessage = - err.userMessage || - "There was an error retrieving the latest sweet, sweet action."; + this.$notify( + { + group: "alert", + type: "danger", + title: "Error", + text: + err.userMessage || + "There was an error retrieving the latest sweet, sweet action.", + }, + -1, + ); } } @@ -197,17 +204,27 @@ export default class HomeView extends Vue { */ public async recordGive(giverDid, description, hours) { if (!this.activeDid) { - this.setAlert( - "Error", - "You must select an identity before you can record a give.", + this.$notify( + { + group: "alert", + type: "danger", + title: "Error", + text: "You must select an identity before you can record a give.", + }, + -1, ); return; } if (!description && !hours) { - this.setAlert( - "Error", - "You must enter a description or some number of hours.", + this.$notify( + { + group: "alert", + type: "danger", + title: "Error", + text: "You must enter a description or some number of hours.", + }, + -1, ); return; } @@ -227,18 +244,38 @@ export default class HomeView extends Vue { if (isGiveCreationError(result)) { const errorMessage = getGiveCreationErrorMessage(result); console.log("Error with give result:", result); - this.setAlert( - "Error", - errorMessage || "There was an error recording the give.", + this.$notify( + { + group: "alert", + type: "danger", + title: "Error", + text: errorMessage || "There was an error recording the give.", + }, + -1, ); } else { - this.setAlert("Success", "That gift was recorded."); + this.$notify( + { + group: "alert", + type: "success", + title: "Success", + text: "That gift was recorded.", + }, + -1, + ); } } catch (error) { console.log("Error with give caught:", error); - this.setAlert( - "Error", - getGiveErrorMessage(error) || "There was an error recording the give.", + this.$notify( + { + group: "alert", + type: "danger", + title: "Error", + text: + getGiveErrorMessage(error) || + "There was an error recording the give.", + }, + -1, ); } } diff --git a/src/views/ContactQRScanShowView.vue b/src/views/ContactQRScanShowView.vue index acef71f1d..08a6b9170 100644 --- a/src/views/ContactQRScanShowView.vue +++ b/src/views/ContactQRScanShowView.vue @@ -85,7 +85,15 @@ export default class ContactQRScanShow extends Vue { const accounts = await accountsDB.accounts.toArray(); const account = R.find((acc) => acc.did === this.activeDid, accounts); if (!account) { - this.alertMessage = "You have no identity yet."; + this.$notify( + { + group: "alert", + type: "warning", + title: "", + text: "You have no identity yet.", + }, + -1, + ); } else { const identity = await this.getIdentity(this.activeDid); const publicKeyHex = identity.keys[0].publicKeyHex; diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue index e3f3c6c59..a7919b5e0 100644 --- a/src/views/ContactsView.vue +++ b/src/views/ContactsView.vue @@ -317,12 +317,19 @@ export default class ContactsView extends Vue { resp.status, resp.data, ); - this.alertTitle = "Error With Server"; - this.alertMessage = - "Got an error retrieving your " + - resp.config.url.includes("recipientDid") - ? "received" - : "given" + " time from the server."; + this.$notify( + { + group: "alert", + type: "danger", + title: "Error With Server", + text: + "Got an error retrieving your " + + resp.config.url.includes("recipientDid") + ? "received" + : "given" + " time from the server.", + }, + -1, + ); } }; @@ -370,8 +377,15 @@ export default class ContactsView extends Vue { this.givenToMeConfirmed = givenToMeConfirmed; this.givenToMeUnconfirmed = givenToMeUnconfirmed; } catch (error) { - this.alertTitle = "Error With Server"; - this.alertMessage = error as string; + this.$notify( + { + group: "alert", + type: "danger", + title: "Error With Server", + text: error as string, + }, + -1, + ); } } @@ -464,18 +478,32 @@ export default class ContactsView extends Vue { try { const resp = await this.axios.post(url, payload, { headers }); if (resp.data?.success?.embeddedRecordError) { - this.alertTitle = "Registration Still Unknown"; let message = "There was some problem with the registration."; if (typeof resp.data.success.embeddedRecordError == "string") { message += " " + resp.data.success.embeddedRecordError; } - this.alertMessage = message; + this.$notify( + { + group: "alert", + type: "danger", + title: "Registration Still Unknown", + text: message, + }, + -1, + ); } else if (resp.data?.success?.handleId) { contact.registered = true; db.contacts.update(contact.did, { registered: true }); - this.alertTitle = "Registration Success"; - this.alertMessage = contact.name + " has been registered."; + this.$notify( + { + group: "alert", + type: "info", + title: "Registration Success", + text: contact.name + " has been registered.", + }, + -1, + ); } } catch (error) { let userMessage = "There was an error. See logs for more info."; @@ -490,8 +518,15 @@ export default class ContactsView extends Vue { userMessage = error as string; } // Now set that error for the user to see. - this.alertTitle = "Error With Server"; - this.alertMessage = userMessage; + this.$notify( + { + group: "alert", + type: "danger", + title: "Error With Server", + text: userMessage, + }, + -1, + ); } } } @@ -512,17 +547,39 @@ export default class ContactsView extends Vue { contact.seesMe = visibility; db.contacts.update(contact.did, { seesMe: visibility }); } else { - this.alertTitle = "Error With Server"; console.error("Bad response setting visibility: ", resp.data); if (resp.data.error?.message) { - this.alertMessage = resp.data.error?.message; + this.$notify( + { + group: "alert", + type: "danger", + title: "Error With Server", + text: resp.data.error?.message, + }, + -1, + ); } else { - this.alertMessage = "Bad server response of " + resp.status; + this.$notify( + { + group: "alert", + type: "danger", + title: "Error With Server", + text: "Bad server response of " + resp.status, + }, + -1, + ); } } } catch (err) { - this.alertTitle = "Error With Server"; - this.alertMessage = err as string; + this.$notify( + { + group: "alert", + type: "danger", + title: "Error With Server", + text: err as string, + }, + -1, + ); } } @@ -539,23 +596,52 @@ export default class ContactsView extends Vue { contact.seesMe = visibility; db.contacts.update(contact.did, { seesMe: visibility }); - this.alertTitle = "Refreshed"; - this.alertMessage = - this.nameForContact(contact, true) + - " can " + - (visibility ? "" : "not ") + - "see your activity."; + this.$notify( + { + group: "alert", + type: "toast", + title: "Refreshed", + text: + this.nameForContact(contact, true) + + " can " + + (visibility ? "" : "not ") + + "see your activity.", + }, + 5000, + ); } else { - this.alertTitle = "Error With Server"; if (resp.data.error?.message) { - this.alertMessage = resp.data.error?.message; + this.$notify( + { + group: "alert", + type: "danger", + title: "Error With Server", + text: resp.data.error?.message, + }, + -1, + ); } else { - this.alertMessage = "Bad server response of " + resp.status; + this.$notify( + { + group: "alert", + type: "danger", + title: "Error With Server", + text: "Bad server response of " + resp.status, + }, + -1, + ); } } } catch (err) { - this.alertTitle = "Error With Server"; - this.alertMessage = err as string; + this.$notify( + { + group: "alert", + type: "danger", + title: "Error With Server", + text: err as string, + }, + -1, + ); } } @@ -594,15 +680,35 @@ export default class ContactsView extends Vue { } } if (!this.isNumeric(this.hourInput)) { - this.alertTitle = "Input Error"; - this.alertMessage = - "This is not a valid number of hours: " + this.hourInput; + this.$notify( + { + group: "alert", + type: "danger", + title: "Input Error", + text: "This is not a valid number of hours: " + this.hourInput, + }, + -1, + ); } else if (!parseFloat(this.hourInput)) { - this.alertTitle = "Input Error"; - this.alertMessage = "Giving 0 hours does nothing."; + this.$notify( + { + group: "alert", + type: "danger", + title: "Input Error", + text: "Giving 0 hours does nothing.", + }, + -1, + ); } else if (!identity) { - this.alertTitle = "Status Error"; - this.alertMessage = "No identity is available."; + this.$notify( + { + group: "alert", + type: "danger", + title: "Status Error", + text: "No identity is available.", + }, + -1, + ); } else { // ask to confirm amount let toFrom; @@ -686,8 +792,15 @@ export default class ContactsView extends Vue { try { const resp = await this.axios.post(url, payload, { headers }); if (resp.data?.success?.handleId) { - this.alertTitle = "Done"; - this.alertMessage = "Successfully logged time to the server."; + this.$notify( + { + group: "alert", + type: "success", + title: "Done", + text: "Successfully logged time to the server.", + }, + -1, + ); if (fromDid === identity.did) { const newList = R.clone(this.givenByMeUnconfirmed); @@ -712,8 +825,15 @@ export default class ContactsView extends Vue { userMessage = error as string; } // Now set that error for the user to see. - this.alertTitle = "Error With Server"; - this.alertMessage = userMessage; + this.$notify( + { + group: "alert", + type: "danger", + title: "Error With Server", + text: userMessage, + }, + -1, + ); } } } diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 37d47d11e..ddb6d6694 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -37,11 +37,28 @@ -1, ) " - class="font-bold uppercase bg-emerald-600 text-white px-3 py-2 rounded-md mr-2" + class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2" > Info + +