|
@ -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(); |
|
|
} |
|
|
} |
|
|