Skip to content

Commit d49b528

Browse files
VilppeRiskidevVilppeRiskidev
committed
Make ModalCard conditional rendering easier to read in ImportProfileModal
1 parent ad6178f commit d49b528

File tree

2 files changed

+78
-62
lines changed

2 files changed

+78
-62
lines changed

‎src/components/mixins/ProfilesMixin.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ export default class ProfilesMixin extends Vue {
1515
return this.$store.getters['profile/activeProfileName'];
1616
}
1717
18+
set activeProfileName(value: string) {
19+
this.$store.dispatch('profiles/setSelectedProfile', {profileName: value, prewarmCache: false});
20+
}
21+
1822
doesProfileExist(nameToCheck: string): boolean {
1923
if ((nameToCheck.match(new RegExp('^([a-zA-Z0-9])(\\s|[a-zA-Z0-9]|_|-|[.])*$'))) === null) {
2024
return true;

‎src/components/profiles-modals/ImportProfileModal.vue‎

Lines changed: 74 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
6161
6262
async profileSelectOnChange(event: Event) {
6363
if (event.target instanceof HTMLSelectElement) {
64-
await this.$store.commit('profiles/setSelectedProfile', {profileName: event.target.value, prewarmCache: false});
64+
this.activeProfileName = event.target.value;
6565
}
6666
}
6767
@@ -96,6 +96,9 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
9696
}],
9797
buttonLabel: 'Import'
9898
}).then((value: string[]) => {
99+
if(value.length === 0) {
100+
this.closeModal();
101+
}
99102
this.importProfileHandler(value);
100103
})
101104
}
@@ -208,7 +211,7 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
208211
await this.extractZippedProfileFile(files[0], profileName);
209212
}
210213
if (this.importUpdateSelection === 'UPDATE') {
211-
await this.$store.dispatch('profiles/setSelectedProfile', { profileName: event.detail, prewarmCache: false });
214+
this.activeProfileName = event.detail;
212215
try {
213216
await FileUtils.emptyDirectory(path.join(Profile.getDirectory(), event.detail));
214217
} catch (e) {
@@ -348,27 +351,44 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
348351
349352
</script>
350353
<template>
351-
<ModalCard :is-active="isOpen" @close-modal="closeModal">
352-
353-
<template v-slot:header v-if="activeStep === 'IMPORT_UPDATE_SELECTION'">
354+
<ModalCard v-if="activeStep === 'IMPORT_UPDATE_SELECTION'" key="IMPORT_UPDATE_SELECTION" :is-active="isOpen" @close-modal="closeModal">
355+
<template v-slot:header>
354356
<p>Are you going to be updating an existing profile or creating a new one?</p>
355357
</template>
356-
<template v-slot:header v-else-if="activeStep === 'FILE_CODE_SELECTION'">
358+
<template v-slot:footer>
359+
<button id="modal-import-new-profile"
360+
class="button is-info"
361+
@click="activeStep = 'FILE_CODE_SELECTION'; importUpdateSelection = 'IMPORT'">
362+
Import new profile
363+
</button>
364+
<button id="modal-update-existing-profile"
365+
class="button is-primary"
366+
@click="activeStep = 'FILE_CODE_SELECTION'; importUpdateSelection = 'UPDATE'">
367+
Update existing profile
368+
</button>
369+
</template>
370+
</ModalCard>
371+
372+
<ModalCard v-else-if="activeStep === 'FILE_CODE_SELECTION'" key="FILE_CODE_SELECTION" :is-active="isOpen" @close-modal="closeModal">
373+
<template v-slot:header>
357374
<p class="card-header-title" v-if="importUpdateSelection === 'IMPORT'">How are you importing a profile?</p>
358375
<p class="card-header-title" v-if="importUpdateSelection === 'UPDATE'">How are you updating your profile?</p>
359376
</template>
360-
<template v-slot:header v-else-if="activeStep === 'IMPORT_CODE'">
361-
<p class="card-header-title">Enter the profile code</p>
362-
</template>
363-
<template v-slot:header v-else-if="isProfileBeingImported !== false">
364-
<p>{{percentageImported}}% imported</p>
365-
</template>
366-
<template v-slot:header v-else-if="activeStep === 'ADDING_PROFILE'">
367-
<p v-if="importUpdateSelection === 'IMPORT'" class="card-header-title">Import a profile</p>
377+
<template v-slot:footer>
378+
<button id="modal-import-profile-file"
379+
class="button is-info"
380+
@click="importProfileFromFile()">From file</button>
381+
<button id="modal-import-profile-code"
382+
class="button is-primary"
383+
@click="activeStep = 'IMPORT_CODE'">From code</button>
368384
</template>
385+
</ModalCard>
369386

370-
371-
<template v-slot:body v-if="activeStep === 'IMPORT_CODE'">
387+
<ModalCard v-else-if="activeStep === 'IMPORT_CODE'" key="IMPORT_CODE" :is-active="isOpen" @close-modal="closeModal">
388+
<template v-slot:header>
389+
<p class="card-header-title">Enter the profile code</p>
390+
</template>
391+
<template v-slot:body>
372392
<input
373393
type="text"
374394
class="input"
@@ -381,15 +401,38 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
381401
<span class="tag is-dark" v-if="profileImportCode === ''">You haven't entered a code</span>
382402
<span class="tag is-success" v-else>You may import the profile</span>
383403
</template>
384-
<template v-slot:body v-else-if="isProfileBeingImported !== false">
404+
<template v-slot:footer>
405+
<button
406+
id="modal-import-profile-from-code-invalid"
407+
class="button is-danger"
408+
v-if="profileImportCode === ''">
409+
Fix issues before importing
410+
</button>
411+
<button
412+
id="modal-import-profile-from-code"
413+
class="button is-info"
414+
@click="importProfileUsingCode();"
415+
v-else>
416+
Import
417+
</button>
418+
</template>
419+
</ModalCard>
420+
421+
<ModalCard v-else-if="isProfileBeingImported" key="PROFILE_IS_BEING_IMPORTED" :is-active="isOpen" @close-modal="closeModal">
422+
<template v-slot:header>
423+
<p>{{percentageImported}}% imported</p>
424+
</template>
425+
<template v-slot:body>
385426
<p>This may take a while, as mods are being downloaded.</p>
386427
<p>Please do not close {{appName}}.</p>
387428
</template>
388-
<template v-slot:body v-else-if="activeStep === 'IMPORT_FILE'">
389-
<h3 class="title">Loading file</h3>
390-
<p>A file selection window will appear. Once a profile has been selected it may take a few moments.</p>
429+
</ModalCard>
430+
431+
<ModalCard v-else-if="activeStep === 'ADDING_PROFILE'" key="ADDING_PROFILE" :is-active="isOpen" @close-modal="closeModal">
432+
<template v-slot:header>
433+
<p v-if="importUpdateSelection === 'IMPORT'" class="card-header-title">Import a profile</p>
391434
</template>
392-
<template v-slot:body v-else-if="activeStep === 'ADDING_PROFILE' && importUpdateSelection === 'IMPORT'">
435+
<template v-slot:body v-if="importUpdateSelection === 'IMPORT'">
393436
<p>This profile will store its own mods independently from other profiles.</p>
394437
<br/>
395438
<input class="input" v-model="newProfileName" ref="profileNameInput" />
@@ -404,61 +447,30 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
404447
"{{makeProfileNameSafe(newProfileName)}}" is either already in use, or contains invalid characters
405448
</span>
406449
</template>
407-
<template v-slot:body v-else-if="activeStep === 'ADDING_PROFILE' && importUpdateSelection === 'UPDATE'">
450+
<template v-slot:body v-else-if="importUpdateSelection === 'UPDATE'">
408451
<div class="notification is-warning">
409452
<p>All contents of the profile will be overwritten with the contents of the code/file.</p>
410453
</div>
411454
<p>Select a profile below:</p>
412455
<br/>
413-
<select class="select" @change="profileSelectOnChange">
456+
<select class="select" :value="activeProfileName" @change="profileSelectOnChange">
414457
<option v-for="profile of profileList" :key="profile">{{ profile }}</option>
415458
</select>
416459
</template>
417-
418-
419-
<template v-slot:footer v-if="activeStep === 'IMPORT_UPDATE_SELECTION'">
420-
<button id="modal-import-new-profile"
421-
class="button is-info"
422-
@click="activeStep = 'FILE_CODE_SELECTION'; importUpdateSelection = 'IMPORT'">
423-
Import new profile
424-
</button>
425-
<button id="modal-update-existing-profile"
426-
class="button is-primary"
427-
@click="activeStep = 'FILE_CODE_SELECTION'; importUpdateSelection = 'UPDATE'">
428-
Update existing profile
429-
</button>
430-
</template>
431-
<template v-slot:footer v-else-if="activeStep === 'FILE_CODE_SELECTION'">
432-
<button id="modal-import-profile-file"
433-
class="button is-info"
434-
@click="importProfileFromFile()">From file</button>
435-
<button id="modal-import-profile-code"
436-
class="button is-primary"
437-
@click="activeStep = 'IMPORT_CODE'">From code</button>
438-
</template>
439-
<template v-slot:footer v-else-if="activeStep === 'IMPORT_CODE'">
440-
<button
441-
id="modal-import-profile-from-code-invalid"
442-
class="button is-danger"
443-
v-if="profileImportCode === ''">
444-
Fix issues before importing
445-
</button>
446-
<button
447-
id="modal-import-profile-from-code"
448-
class="button is-info"
449-
@click="importProfileUsingCode();"
450-
v-else>
451-
Import
452-
</button>
453-
</template>
454-
<template v-slot:footer v-else-if="activeStep === 'ADDING_PROFILE' && importUpdateSelection === 'IMPORT'">
460+
<template v-slot:footer v-if="importUpdateSelection === 'IMPORT'">
455461
<button id="modal-create-profile-invalid" class="button is-danger" v-if="doesProfileExist(newProfileName)">Create</button>
456462
<button id="modal-create-profile" class="button is-info" @click="createProfile(newProfileName)" v-else>Create</button>
457463
</template>
458-
<template v-slot:footer v-else-if="activeStep === 'ADDING_PROFILE' && importUpdateSelection === 'UPDATE'">
464+
<template v-slot:footer v-else-if="importUpdateSelection === 'UPDATE'">
459465
<button id="modal-update-profile-invalid" class="button is-danger" v-if="!doesProfileExist(activeProfileName)">Update profile: {{ activeProfileName }}</button>
460466
<button id="modal-update-profile" class="button is-info" v-else @click="updateProfile()">Update profile: {{ activeProfileName }}</button>
461467
</template>
468+
</ModalCard>
462469

470+
<ModalCard v-else-if="activeStep === 'IMPORT_FILE'" key="IMPORT_FILE" :is-active="isOpen" @close-modal="closeModal">
471+
<template v-slot:body>
472+
<h3 class="title">Loading file</h3>
473+
<p>A file selection window will appear. Once a profile has been selected it may take a few moments.</p>
474+
</template>
463475
</ModalCard>
464476
</template>

0 commit comments

Comments
 (0)