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:
Matthew Raymer
2025-07-07 08:00:25 +00:00
parent f3bddace4b
commit e925b4c6a8
6 changed files with 328 additions and 114 deletions

View File

@@ -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

View File

@@ -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