forked from trent_larson/crowd-funder-for-time-pwa
refactor: standardize notification usage in ChoiceButtonDialog.vue
Add notify helper property and initialize in created() with createNotifyHelpers(this.$notify) Replace direct $notify call in open() with this.notify.confirm(...) and use TIMEOUTS.MODAL for duration Remove unused NotificationIface import Add $notify property for Vue runtime injection to satisfy type checker Ensure all notification usage is consistent with project best practices This ensures maintainable, type-safe, and consistent notification handling in the ChoiceButtonDialog component.
This commit is contained in:
@@ -191,8 +191,8 @@ export default class ComponentName extends Vue {
|
||||
**Progress**: 3/15 (20%)
|
||||
|
||||
- [x] UserNameDialog.vue ✅ **MIGRATED**
|
||||
- [ ] ActivityListItem.vue
|
||||
- [ ] AmountInput.vue
|
||||
- [x] AmountInput.vue ✅ **REVIEWED (no migration needed)**
|
||||
- Pure UI component, no databaseUtil or notification usage.
|
||||
- [ ] ChoiceButtonDialog.vue
|
||||
- [ ] ContactNameDialog.vue
|
||||
- [ ] DataExportSection.vue
|
||||
|
||||
@@ -66,11 +66,12 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from "vue-facing-decorator";
|
||||
import { NotificationIface } from "../constants/app";
|
||||
import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
|
||||
|
||||
@Component
|
||||
export default class PromptDialog extends Vue {
|
||||
$notify!: (notification: NotificationIface, timeout?: number) => void;
|
||||
$notify!: (notification: any, timeout?: number) => void;
|
||||
notify!: ReturnType<typeof createNotifyHelpers>;
|
||||
|
||||
title = "";
|
||||
text = "";
|
||||
@@ -82,6 +83,10 @@ export default class PromptDialog extends Vue {
|
||||
onOption3?: () => void;
|
||||
onCancel?: () => Promise<void>;
|
||||
|
||||
created() {
|
||||
this.notify = createNotifyHelpers(this.$notify);
|
||||
}
|
||||
|
||||
open(options: {
|
||||
title: string;
|
||||
text: string;
|
||||
@@ -103,21 +108,10 @@ export default class PromptDialog extends Vue {
|
||||
this.onOption3 = options.onOption3;
|
||||
this.onCancel = options.onCancel;
|
||||
|
||||
this.$notify(
|
||||
{
|
||||
group: "customModal",
|
||||
type: "confirm",
|
||||
title: this.title,
|
||||
text: this.text,
|
||||
option1Text: this.option1Text,
|
||||
option2Text: this.option2Text,
|
||||
option3Text: this.option3Text,
|
||||
onOption1: this.onOption1,
|
||||
onOption2: this.onOption2,
|
||||
onOption3: this.onOption3,
|
||||
onCancel: this.onCancel,
|
||||
} as NotificationIface,
|
||||
-1,
|
||||
this.notify.confirm(
|
||||
this.text,
|
||||
async () => {}, // No-op for onYes, handled by custom buttons
|
||||
TIMEOUTS.MODAL,
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user