diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue index a00fa77..26c8fa7 100644 --- a/src/views/ContactsView.vue +++ b/src/views/ContactsView.vue @@ -41,24 +41,17 @@ </button> </div> - <div class="flex justify-between" v-if="showGiveNumbers"> + <div class="w-full text-right"> + <button + href="" + class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1 py-1 rounded-md" + @click="toggleShowContactAmounts()" + > + {{ showGiveNumbers ? "Hide Given Numbers" : "Show Given Numbers" }} + </button> + </div> + <div class="flex justify-between mt-1" v-if="showGiveNumbers"> <div class="w-full text-right"> - <!-- - Hours to Add: - <input - class="border rounded border-slate-400 w-24 text-right" - type="text" - placeholder="1" - v-model="hourInput" - /> - <br /> - <input - class="border rounded border-slate-400 w-48" - type="text" - placeholder="Description" - v-model="hourDescriptionInput" - /> - --> In the following, only the most recent hours are included. To see more, click <span @@ -69,16 +62,16 @@ <br /> <button href="" - class="text-center text-md text-white px-1.5 py-2 rounded-md mt-1" + class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md mt-1" v-bind:class="showGiveAmountsClassNames()" @click="toggleShowGiveTotals()" > {{ showGiveTotals - ? "Showing Total" + ? "Showing Totals" : showGiveConfirmed - ? "Confirmed" - : "Unconfirmed" + ? "Showing Confirmed Amounts" + : "Showing Unconfirmed Amounts" }} </button> </div> @@ -1188,6 +1181,30 @@ export default class ContactsView extends Vue { .then(() => (this.contactEdit = null)); } + public async toggleShowContactAmounts() { + const newShowValue = !this.showGiveNumbers; + try { + await db.open(); + db.settings.update(MASTER_SETTINGS_KEY, { + showContactGivesInline: newShowValue, + }); + } catch (err) { + this.$notify( + { + group: "alert", + type: "danger", + title: "Error Updating Contact Setting", + text: "The setting may not have saved. Try again, maybe after restarting the app.", + }, + -1, + ); + console.error( + "Telling user to try again after contact-amounts setting update because:", + err, + ); + } + this.showGiveNumbers = newShowValue; + } public toggleShowGiveTotals() { if (this.showGiveTotals) { this.showGiveTotals = false; @@ -1203,9 +1220,12 @@ export default class ContactsView extends Vue { public showGiveAmountsClassNames() { return { - "bg-slate-500": this.showGiveTotals, - "bg-green-600": !this.showGiveTotals && this.showGiveConfirmed, - "bg-yellow-600": !this.showGiveTotals && !this.showGiveConfirmed, + "from-slate-400": this.showGiveTotals, + "to-slate-700": this.showGiveTotals, + "from-green-400": !this.showGiveTotals && this.showGiveConfirmed, + "to-green-700": !this.showGiveTotals && this.showGiveConfirmed, + "from-yellow-400": !this.showGiveTotals && !this.showGiveConfirmed, + "to-yellow-700": !this.showGiveTotals && !this.showGiveConfirmed, }; } }