Merge pull request #1355 from ebkr/create-profile-modal-refactor

Separate Create Profile modal from Profiles.vue

src/components/profiles-modals/CreateProfileModal.vue

@@ -0,0 +1,89 @@
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator';
+import { ModalCard } from "../all";
+import R2Error from "../../model/errors/R2Error";
+import sanitize from "sanitize-filename";
+
+@Component({
+ components: {ModalCard}
+})
+export default class CreateProfileModal extends Vue {
+ private newProfileName = '';
+ get isOpen(): boolean {
+ return this.$store.state.modals.isCreateProfileModalOpen;
+ }
+ closeModal() {
+ this.newProfileName = '';
+ this.$store.commit('closeCreateProfileModal');
+ }
+
+ get profileList(): string[] {
+ return this.$store.state.profiles.profileList;
+ }
+
+ 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()
+ }));
+ }
+
+ // User confirmed creation of a new profile with a name that didn't exist before.
+ async createProfile() {
+ const safeName = this.makeProfileNameSafe(this.newProfileName);
+ if (safeName !== '') {
+ try {
+ await this.$store.dispatch('profiles/addProfile', safeName);
+ this.closeModal();
+ } catch (e) {
+ const err = R2Error.fromThrownValue(e, 'Error whilst creating a profile');
+ this.$store.commit('error/handleError', err);
+ }
+ }
+ }
+}
+
+</script>
+<template>
+ <ModalCard v-if="isOpen" :is-active="isOpen" @close-modal="closeModal">
+
+ <template v-slot:header>
+ <p class="modal-card-title">Create a profile</p>
+ </template>
+
+ <template v-slot:body>
+ <p>This profile will store its own mods independently from other profiles.</p>
+ <br/>
+ <input
+ class="input"
+ v-model="newProfileName"
+ @keyup.enter="!doesProfileExist(newProfileName) && createProfile(newProfileName)"
+ id="create-profile-modal-new-profile-name"
+ ref="nameInput"
+ />
+ <br/><br/>
+ <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 id="modal-create-profile-invalid" class="button is-danger" v-if="doesProfileExist(newProfileName)" disabled>Create</button>
+ <button id="modal-create-profile" class="button is-info" @click="createProfile(newProfileName)" v-else>Create</button>
+ </template>
+
+ </ModalCard>
+</template>

src/pages/Profiles.vue

@@ -1,5 +1,6 @@
 <template>
  <div>
+ <CreateProfileModal />
  <DeleteProfileModal />
  <RenameProfileModal />
  <!-- Create modal -->
@@ -185,7 +186,7 @@
  <a id="rename-profile" class="button" @click="openRenameProfileModal()" v-else>Rename</a>
  </div>
  <div class="level-item">
- <a id="create-profile" class="button" @click="importUpdateSelection = null; newProfile('Create', undefined)">Create new</a>
+ <a id="create-profile" class="button" @click="openCreateProfileModal()">Create new</a>
  </div>
  <div class="level-item">
  <!-- <a class='button' @click="importProfile()">Import profile</a> -->
@@ -238,11 +239,13 @@ import GameDirectoryResolverProvider from '../providers/ror2/game/GameDirectoryR
 import { ProfileImportExport } from '../r2mm/mods/ProfileImportExport';
 import DeleteProfileModal from "../components/profiles-modals/DeleteProfileModal.vue";
 import RenameProfileModal from "../components/profiles-modals/RenameProfileModal.vue";
+import CreateProfileModal from "../components/profiles-modals/CreateProfileModal.vue";
 
 let fs: FsProvider;
 
 @Component({
  components: {
+ CreateProfileModal,
  hero: Hero,
  'progress-bar': Progress,
  DeleteProfileModal,
@@ -354,6 +357,10 @@ export default class Profiles extends Vue {
  this.addingProfile = false;
  }
 
+ openCreateProfileModal() {
+ this.$store.commit('openCreateProfileModal');
+ }
+
  openDeleteProfileModal() {
  this.$store.commit('openDeleteProfileModal');
  }

src/store/modules/ModalsModule.ts

@@ -7,6 +7,7 @@ interface State {
  downloadModModalMod: ThunderstoreMod | null;
  isAssociatedModsModOpen: boolean;
  isCategoryFilterModalOpen: boolean;
+ isCreateProfileModalOpen: boolean;
  isDeleteProfileModalOpen: boolean;
  isDisableModModalOpen: boolean;
  isDownloadModModalOpen: boolean;
@@ -23,6 +24,7 @@ export default {
  downloadModModalMod: null,
  isAssociatedModsModOpen: false,
  isCategoryFilterModalOpen: false,
+ isCreateProfileModalOpen: false,
  isDeleteProfileModalOpen: false,
  isDisableModModalOpen: false,
  isDownloadModModalOpen: false,
@@ -42,6 +44,10 @@ export default {
  state.isCategoryFilterModalOpen = false;
  },
 
+ closeCreateProfileModal: function(state: State): void {
+ state.isCreateProfileModalOpen = false;
+ },
+
  closeDeleteProfileModal: function(state: State): void {
  state.isDeleteProfileModalOpen = false;
  },
@@ -78,6 +84,10 @@ export default {
  state.isCategoryFilterModalOpen = true;
  },
 
+ openCreateProfileModal: function(state: State): void {
+ state.isCreateProfileModalOpen = true;
+ },
+
  openDeleteProfileModal: function(state: State): void {
  state.isDeleteProfileModalOpen = true;
  },

src/store/modules/ProfilesModule.ts

@@ -25,6 +25,15 @@ export const ProfilesModule = {
  },
  },
  actions: <ActionTree<State, RootState>>{
+ async addProfile({rootGetters, state, dispatch}, name: string) {
+ try {
+ await dispatch('setSelectedProfile', { profileName: name, prewarmCache: true });
+ await dispatch('updateProfileList');
+ } catch (e) {
+ throw R2Error.fromThrownValue(e, 'Error whilst creating a profile');
+ }
+ },
+
  async removeSelectedProfile({rootGetters, state, dispatch}) {
  const activeProfile: Profile = rootGetters['profile/activeProfile'];
  const path = activeProfile.getPathOfProfile();