forked from jsnbuchanan/crowd-funder-for-time-pwa
Complete NewEditAccountView.vue Enhanced Triple Migration Pattern (1 minute)
Database Migration: Replace databaseUtil with PlatformServiceMixin SQL Abstraction: Use $accountSettings() and $updateSettings() methods Notification Migration: N/A - no notifications in component Template Streamlining: Simple template requires no computed properties Documentation: Add comprehensive file and method-level documentation Time: 1 minute | Complexity: Simple | Issues: Linting fixed Testing: Manual required | Validation: Full Enhanced Triple Migration Pattern Template Update: Add user control commands to migration checklist Component Features: - Account identity editing (firstName) - Backward compatibility with deprecated lastName - Clean navigation patterns
This commit is contained in:
@@ -5,6 +5,41 @@ This checklist ensures NO migration steps are forgotten. **Every component migra
|
|||||||
|
|
||||||
## ⏱️ **TIME TRACKING REQUIREMENT**: All migrations must be timed and performance recorded
|
## ⏱️ **TIME TRACKING REQUIREMENT**: All migrations must be timed and performance recorded
|
||||||
|
|
||||||
|
## 🎯 **USER CONTROL COMMANDS**: For seamless migration workflow
|
||||||
|
|
||||||
|
### **Control Handoff Commands**
|
||||||
|
Use these commands to maintain control between migrations:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# When ready to continue
|
||||||
|
"move to the next file" - Start next component migration
|
||||||
|
"migrate [ComponentName]" - Target specific component
|
||||||
|
"check migration status" - Run validation script
|
||||||
|
"pause migrations" - Focus on other tasks
|
||||||
|
```
|
||||||
|
|
||||||
|
### **Migration Workflow Commands**
|
||||||
|
```bash
|
||||||
|
# Time tracking
|
||||||
|
./scripts/time-migration.sh [Component] start
|
||||||
|
./scripts/time-migration.sh [Component] end
|
||||||
|
|
||||||
|
# Status checking
|
||||||
|
bash scripts/validate-notification-completeness.sh
|
||||||
|
./scripts/daily-migration-summary.sh
|
||||||
|
|
||||||
|
# Quality assurance
|
||||||
|
npm run lint [file]
|
||||||
|
git add [file] && git commit -m "[message]"
|
||||||
|
```
|
||||||
|
|
||||||
|
### **User Control Flow**
|
||||||
|
1. **Review** completed migrations
|
||||||
|
2. **Test** components manually
|
||||||
|
3. **Plan** next migration batch
|
||||||
|
4. **Choose** when to continue
|
||||||
|
5. **Maintain** project control
|
||||||
|
|
||||||
## ⚠️ CRITICAL: Enhanced Triple Migration Pattern
|
## ⚠️ CRITICAL: Enhanced Triple Migration Pattern
|
||||||
|
|
||||||
### 🔑 The Complete Pattern (ALL 4 REQUIRED)
|
### 🔑 The Complete Pattern (ALL 4 REQUIRED)
|
||||||
|
|||||||
@@ -1,3 +1,25 @@
|
|||||||
|
<!--
|
||||||
|
NewEditAccountView.vue - Account Identity Editor
|
||||||
|
|
||||||
|
A simple view for editing user account identity information.
|
||||||
|
Allows users to update their display name (firstName) which is used
|
||||||
|
throughout the application for user identification.
|
||||||
|
|
||||||
|
Key Features:
|
||||||
|
- Edit display name (firstName field)
|
||||||
|
- Save changes to account settings
|
||||||
|
- Cancel changes and return to previous view
|
||||||
|
- Handles deprecated lastName field for backward compatibility
|
||||||
|
|
||||||
|
Migration Status: ✅ Complete Enhanced Triple Migration Pattern
|
||||||
|
- Phase 1: Database Migration (PlatformServiceMixin) ✅
|
||||||
|
- Phase 2: SQL Abstraction (Service methods) ✅
|
||||||
|
- Phase 3: Notification Migration (N/A - no notifications) ✅
|
||||||
|
- Phase 4: Template Streamlining (Simple template) ✅
|
||||||
|
|
||||||
|
Author: Matthew Raymer
|
||||||
|
Last Updated: 2025-07-07
|
||||||
|
-->
|
||||||
<template>
|
<template>
|
||||||
<section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
|
<section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
|
||||||
<!-- Breadcrumb -->
|
<!-- Breadcrumb -->
|
||||||
@@ -47,32 +69,60 @@
|
|||||||
import { Component, Vue } from "vue-facing-decorator";
|
import { Component, Vue } from "vue-facing-decorator";
|
||||||
import { Router } from "vue-router";
|
import { Router } from "vue-router";
|
||||||
|
|
||||||
import * as databaseUtil from "../db/databaseUtil";
|
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
components: {},
|
components: {},
|
||||||
|
mixins: [PlatformServiceMixin],
|
||||||
})
|
})
|
||||||
export default class NewEditAccountView extends Vue {
|
export default class NewEditAccountView extends Vue {
|
||||||
$router!: Router;
|
$router!: Router;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* User's display name for editing
|
||||||
|
* Combines firstName and deprecated lastName for backward compatibility
|
||||||
|
*/
|
||||||
givenName = "";
|
givenName = "";
|
||||||
|
|
||||||
// 'created' hook runs when the Vue instance is first created
|
/**
|
||||||
|
* Vue lifecycle hook - Initialize component with current account settings
|
||||||
|
*
|
||||||
|
* Loads the user's current name from account settings and populates
|
||||||
|
* the editing field. Handles deprecated lastName field by concatenating
|
||||||
|
* with firstName for display purposes.
|
||||||
|
*
|
||||||
|
* @async
|
||||||
|
*/
|
||||||
async created() {
|
async created() {
|
||||||
const settings = await databaseUtil.retrieveSettingsForActiveAccount();
|
const settings = await this.$accountSettings();
|
||||||
this.givenName =
|
this.givenName =
|
||||||
(settings.firstName || "") +
|
(settings.firstName || "") +
|
||||||
(settings.lastName ? ` ${settings.lastName}` : ""); // deprecated, pre v 0.1.3
|
(settings.lastName ? ` ${settings.lastName}` : ""); // deprecated, pre v 0.1.3
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Save the edited name changes to account settings
|
||||||
|
*
|
||||||
|
* Updates the user's firstName in account settings with the current
|
||||||
|
* givenName value. Clears the deprecated lastName field and navigates
|
||||||
|
* back to the previous view upon successful save.
|
||||||
|
*
|
||||||
|
* @async
|
||||||
|
*/
|
||||||
async onClickSaveChanges() {
|
async onClickSaveChanges() {
|
||||||
await databaseUtil.updateDefaultSettings({
|
await this.$updateSettings({
|
||||||
firstName: this.givenName,
|
firstName: this.givenName,
|
||||||
lastName: "", // deprecated, pre v 0.1.3
|
lastName: "", // deprecated, pre v 0.1.3
|
||||||
});
|
});
|
||||||
this.$router.back();
|
this.$router.back();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Cancel editing and return to previous view
|
||||||
|
*
|
||||||
|
* Discards any unsaved changes and navigates back to the
|
||||||
|
* previous view without updating account settings.
|
||||||
|
*/
|
||||||
onClickCancel() {
|
onClickCancel() {
|
||||||
this.$router.back();
|
this.$router.back();
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user