forked from jsnbuchanan/crowd-funder-for-time-pwa
Complete ProjectsView.vue Triple Migration Pattern with literal extraction
Apply full database migration (databaseUtil → PlatformServiceMixin), replace raw SQL with service methods, migrate 3 notifications to helper methods. Preserve 1 complex modal for advanced routing features while extracting all literal strings to NOTIFY_CAMERA_SHARE_METHOD constant. Add computed properties (offerTabClasses, projectTabClasses) to streamline template logic and comprehensive JSDoc documentation for all methods. Update migration templates to mandate literal extraction from complex modals. ProjectsView.vue now appropriately incomplete: helper methods for simple notifications, raw $notify preserved only where advanced features required.
This commit is contained in:
@@ -81,6 +81,7 @@ This checklist ensures NO migration steps are forgotten. **Every component migra
|
||||
### [ ] 10. Constants vs Literal Strings
|
||||
- [ ] **Use constants** for static, reusable messages
|
||||
- [ ] **Use literal strings** for dynamic messages with variables
|
||||
- [ ] **Extract literals from complex modals** - Even raw `$notify` calls should use constants for text
|
||||
- [ ] **Document decision** for each notification call
|
||||
|
||||
### [ ] 11. Template Logic Streamlining
|
||||
|
||||
@@ -233,6 +233,46 @@ this.notify.error(userMessage || "Fallback error message", TIMEOUTS.LONG);
|
||||
- **Use literal strings** for dynamic messages with variables
|
||||
- **Add new constants** to `notifications.ts` for new reusable messages
|
||||
|
||||
#### Extract Literals from Complex Modals
|
||||
**IMPORTANT**: Even when complex modals must remain as raw `$notify` calls due to advanced features (custom buttons, nested callbacks, `promptToStopAsking`, etc.), **always extract literal strings to constants**:
|
||||
|
||||
```typescript
|
||||
// ❌ BAD - Literals in complex modal
|
||||
this.$notify({
|
||||
group: "modal",
|
||||
type: "confirm",
|
||||
title: "Are you nearby with cameras?",
|
||||
text: "If so, we'll use those with QR codes to share.",
|
||||
yesText: "we are nearby with cameras",
|
||||
noText: "we will share another way",
|
||||
onNo: () => { /* complex callback */ }
|
||||
});
|
||||
|
||||
// ✅ GOOD - Constants used even in complex modal
|
||||
export const NOTIFY_CAMERA_SHARE_METHOD = {
|
||||
title: "Are you nearby with cameras?",
|
||||
text: "If so, we'll use those with QR codes to share.",
|
||||
yesText: "we are nearby with cameras",
|
||||
noText: "we will share another way",
|
||||
};
|
||||
|
||||
this.$notify({
|
||||
group: "modal",
|
||||
type: "confirm",
|
||||
title: NOTIFY_CAMERA_SHARE_METHOD.title,
|
||||
text: NOTIFY_CAMERA_SHARE_METHOD.text,
|
||||
yesText: NOTIFY_CAMERA_SHARE_METHOD.yesText,
|
||||
noText: NOTIFY_CAMERA_SHARE_METHOD.noText,
|
||||
onNo: () => { /* complex callback preserved */ }
|
||||
});
|
||||
```
|
||||
|
||||
This approach provides:
|
||||
- **Consistency**: All user-facing text centralized
|
||||
- **Maintainability**: Easy to update messages
|
||||
- **Localization**: Ready for future i18n support
|
||||
- **Testability**: Constants can be imported in tests
|
||||
|
||||
## Template Logic Streamlining
|
||||
|
||||
### Move Complex Template Logic to Class
|
||||
|
||||
Reference in New Issue
Block a user