-
Notifications
You must be signed in to change notification settings - Fork 186
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1328 from ebkr/rename-profile-modal-refactor
Refactor Rename Profile Modal by separating it from Profiles.vue
- Loading branch information
Showing
4 changed files
with
161 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| <script lang="ts"> | ||
| import { Vue, Component, Ref, Watch } from 'vue-property-decorator'; | ||
| import { ModalCard } from "../all"; | ||
| import sanitize from 'sanitize-filename'; | ||
| import R2Error from "../../model/errors/R2Error"; | ||
| import Profile from "../../model/Profile"; | ||
| @Component({ | ||
| components: {ModalCard} | ||
| }) | ||
| export default class RenameProfileModal extends Vue { | ||
| @Ref() readonly nameInput: HTMLInputElement | undefined; | ||
| private newProfileName: string = ''; | ||
| @Watch('$store.state.profile.activeProfile') | ||
| activeProfileChanged(newProfile: Profile, oldProfile: Profile|null) { | ||
| if ( | ||
| // Modal was just created and has no value yet, use any available. | ||
| this.newProfileName === "" || | ||
| // Profile was not previously selected, use the new active profile. | ||
| oldProfile === null || | ||
| // Avoid losing user's changes when the profile unexpectedly changes. | ||
| oldProfile.getProfileName() === this.newProfileName | ||
| ) { | ||
| this.newProfileName = newProfile.getProfileName(); | ||
| } | ||
| } | ||
| get isOpen(): boolean { | ||
| const isOpen_ = this.$store.state.modals.isRenameProfileModalOpen; | ||
| if (isOpen_) { | ||
| this.$nextTick(() => { | ||
| if (this.nameInput) { | ||
| this.nameInput.focus(); | ||
| } | ||
| }); | ||
| } | ||
| return isOpen_; | ||
| } | ||
| get profileList(): string[] { | ||
| return this.$store.state.profiles.profileList; | ||
| } | ||
| closeModal() { | ||
| this.newProfileName = this.$store.state.profile.activeProfile.getProfileName(); | ||
| this.$store.commit('closeRenameProfileModal'); | ||
| } | ||
| makeProfileNameSafe(nameToSanitize: string): string { | ||
| return sanitize(nameToSanitize); | ||
| } | ||
| doesProfileExist(nameToCheck: string): boolean { | ||
| if ((nameToCheck.match(new RegExp('^([a-zA-Z0-9])(\\s|[a-zA-Z0-9]|_|-|[.])*$'))) === null) { | ||
| return true; | ||
| } | ||
| const safe: string = this.makeProfileNameSafe(nameToCheck); | ||
| return (this.profileList.some(function (profile: string) { | ||
| return profile.toLowerCase() === safe.toLowerCase() | ||
| })); | ||
| } | ||
| async performRename() { | ||
| try { | ||
| await this.$store.dispatch('profiles/renameProfile', {newName: this.newProfileName}); | ||
| } catch (e) { | ||
| const err = R2Error.fromThrownValue(e, 'Error whilst renaming profile'); | ||
| this.$store.commit('error/handleError', err); | ||
| } | ||
| this.closeModal(); | ||
| } | ||
| } | ||
| </script> | ||
| <template> | ||
| <ModalCard v-if="isOpen" :is-active="isOpen" @close-modal="closeModal"> | ||
|
|
||
| <template v-slot:header> | ||
| <p class="modal-card-title">Rename a profile</p> | ||
| </template> | ||
| <template v-slot:body> | ||
| <p>This profile will store its own mods independently from other profiles.</p> | ||
|
|
||
| <input | ||
| class="input" | ||
| v-model="newProfileName" | ||
| @keyup.enter="!doesProfileExist(newProfileName) && performRename(newProfileName)" | ||
| ref="nameInput" | ||
| /> | ||
|
|
||
| <span class="tag is-dark" v-if="newProfileName === '' || makeProfileNameSafe(newProfileName) === ''"> | ||
| Profile name required | ||
| </span> | ||
| <span class="tag is-success" v-else-if="!doesProfileExist(newProfileName)"> | ||
| "{{makeProfileNameSafe(newProfileName)}}" is available | ||
| </span> | ||
| <span class="tag is-danger" v-else-if="doesProfileExist(newProfileName)"> | ||
| "{{makeProfileNameSafe(newProfileName)}}" is either already in use, or contains invalid characters | ||
| </span> | ||
| </template> | ||
| <template v-slot:footer> | ||
| <button class="button is-danger" v-if="doesProfileExist(newProfileName)" disabled>Rename</button> | ||
| <button class="button is-info" @click="performRename(newProfileName)" v-else>Rename</button> | ||
| </template> | ||
|
|
||
| </ModalCard> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters