Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Have KModal pass through their 'submit' and 'cancel' events to simplify other modals #5439

Merged
merged 11 commits into from
May 20, 2019
Merged

Have KModal pass through their 'submit' and 'cancel' events to simplify other modals #5439

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
ec04c7f
In KModal, pass ‘emit’ and ‘close’ events through parent
jonboiser Mar 20, 2019
c89e7b6
Update modals to use passed-through events
jonboiser Apr 24, 2019
0e7dd79
Make SideNav toggle on keyup.esc
jonboiser Mar 20, 2019
97492de
Update tests
jonboiser Mar 20, 2019
c81dbf3
Fix CoreMenu warning
jonboiser Apr 29, 2019
589b2ce
Wrap kbutton label to remove extra whitespace when basic-link
jonboiser Apr 29, 2019
444af6e
Revert "In KModal, pass ‘emit’ and ‘close’ events through parent"
jonboiser May 3, 2019
46f5354
Merge remote-tracking branch 'origin/release-v0.12.y' into consistent…
jonboiser May 17, 2019
78bb8ed
Update tests
jonboiser May 17, 2019
6c9dd77
Add warning if KModal is missing listeners
jonboiser May 20, 2019
d395ac6
Add @cancel handlers
jonboiser May 20, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion kolibri/core/assets/src/views/AppError/ReportErrorModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
:cancelText="$tr('closeErrorModalButtomPrompt')"
class="error-detail-modal"
size="large"
@cancel="$emit('cancel')"
>

<section>
Expand Down
4 changes: 2 additions & 2 deletions kolibri/core/assets/src/views/CoreBase/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,12 +92,12 @@
:msg="mostRecentNotification.msg"
:linkText="mostRecentNotification.linkText"
:linkUrl="mostRecentNotification.linkUrl"
@closeModal="dismissUpdateModal"
@submit="dismissUpdateModal"
/>
<LanguageSwitcherModal
v-if="languageModalShown"
:style="{ color: $coreTextDefault }"
@close="languageModalShown = false"
@cancel="languageModalShown = false"
/>

</div>
Expand Down
2 changes: 1 addition & 1 deletion kolibri/core/assets/src/views/CoreMenu/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<div
v-if="$slots.header"
class="ui-menu-header"
:class="{'ui-menu-header-lp': hasIcons}"
:class="{'ui-menu-header-lp': showActive}"
:style="{ color: $coreTextDefault }"
>
<slot name="header"></slot>
Expand Down
18 changes: 14 additions & 4 deletions kolibri/core/assets/src/views/KModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,16 +228,26 @@
this.scrollShadow = this.maxContentHeight < this.$refs.content.scrollHeight;
}
}, 50),
// Emitted when the cancel button is clicked or the esc key is pressed
emitCancelEvent() {
if (!this.cancelDisabled) {
// Emitted when the cancel button is clicked or the esc key is pressed
this.$emit('cancel');
// If no @cancel is set on KModal, have the parent emit the event
if (this.$listeners.cancel) {
this.$emit('cancel');
} else {
this.$parent.$emit('cancel');
}
}
},
// Emitted when the submit button or the enter key is pressed
emitSubmitEvent() {
if (!this.submitDisabled) {
// Emitted when the submit button or the enter key is pressed
this.$emit('submit');
// If no @submit is set on KModal, have the parent emit the event
if (this.$listeners.submit) {
this.$emit('submit');
} else {
this.$parent.$emit('submit');
indirectlylit marked this conversation as resolved.
Show resolved Hide resolved
}
}
},
handleEnter() {
Expand Down
1 change: 0 additions & 1 deletion kolibri/core/assets/src/views/PrivacyInfoModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
size="large"
:cancelText="$tr('cancelButtonLabel')"
:title="$tr('privacyModalHeader')"
@cancel="$emit('cancel')"
>
<section v-if="!hideUsersSection">
<h2>{{ $tr('kolibriUsersTitle') }}</h2>
Expand Down
2 changes: 1 addition & 1 deletion kolibri/core/assets/src/views/SideNav.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>

<div ref="sideNav" class="side-nav-wrapper" @keydown.esc="toggleNav">
<div ref="sideNav" class="side-nav-wrapper" @keyup.esc="toggleNav">
<transition name="side-nav">
<div
v-show="navShown"
Expand Down
2 changes: 1 addition & 1 deletion kolibri/core/assets/src/views/UpdateNotification.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@
this.saveDismissedNotification(this.id);
}
this.removeNotification(this.id);
this.$emit('closeModal');
this.$emit('submit');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is it necessary to emit anything here? I think the v-on will do this for you?

},
},
$trs: {
Expand Down
2 changes: 1 addition & 1 deletion kolibri/core/assets/src/views/buttons-and-links/KButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
>
<slot v-if="$slots.default"></slot>
<template v-else>
{{ text }}
<span>{{ text }}</span>
</template>
<mat-svg
v-if="hasDropdown"
Expand Down
2 changes: 1 addition & 1 deletion kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
<LanguageSwitcherModal
v-if="showLanguageModal"
class="ta-l"
@close="showLanguageModal = false"
@cancel="showLanguageModal = false"
/>
</div>

Expand Down
4 changes: 0 additions & 4 deletions kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
:submitText="$tr('confirmButtonText')"
:cancelText="$tr('cancelButtonText')"
@submit="setLang"
@cancel="closeModal"
>
<KGrid>
<KGridItem
Expand Down Expand Up @@ -66,9 +65,6 @@
},
},
methods: {
closeModal() {
this.$emit('close');
},
setLang() {
this.switchLanguage(this.selectedLanguage);
},
Expand Down
2 changes: 0 additions & 2 deletions kolibri/plugins/coach/assets/src/views/plan/GroupMembersPage/RemoveFromGroupModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@
:hasError="false"
:submitText="$tr('remove')"
:cancelText="$tr('cancel')"
@submit="$emit('confirm')"
@cancel="$emit('cancel')"
>
<p>
{{ $tr('confirmation', { username: username, classname: groupName }) }}
Expand Down
2 changes: 1 addition & 1 deletion kolibri/plugins/coach/assets/src/views/plan/GroupMembersPage/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
:groupName="currentGroup.name"
:username="userForRemoval.full_name"
@cancel="userForRemoval = null"
@confirm="removeSelectedUserFromGroup"
@submit="removeSelectedUserFromGroup"
/>
</div>
</KPageContainer>
Expand Down
8 changes: 2 additions & 6 deletions kolibri/plugins/coach/assets/src/views/plan/GroupsPage/CreateGroupModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
:cancelText="$tr('cancel')"
:submitDisabled="submitting"
@submit="callCreateGroup"
@cancel="close"
>
<KTextbox
ref="name"
Expand Down Expand Up @@ -82,21 +81,18 @@
},
},
methods: {
...mapActions('groups', ['displayModal', 'createGroup']),
...mapActions('groups', ['createGroup']),
callCreateGroup() {
this.formSubmitted = true;
if (this.formIsValid) {
this.submitting = true;
this.createGroup({ groupName: this.name, classId: this.classId }).then(() => {
this.$emit('success');
this.$emit('submit');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

won't this emit submit twice? Once for v-on="$listeners" and once here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CreateGroupModal only emits 'submit' once. I think if you explicitly set a @submit=customListener, it sort of overwrites the {submit: parentListener} hidden in v-on="$listeners

Copy link
Contributor Author

@jonboiser jonboiser May 17, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interestingly, though, if you remove this $emit, the event from CreateGroupModal does not appear in the devtools, but it seems that it still goes through the GroupsPage, which is not really what I want since i want to wait till the promise is resolved before emitting 'submit'.

I'm just going to remove the v-on="listeners" for the handful of modals that might emit the same event asynchronously.

In the future, I would like to to remove async behavior API calls from modals, and delegate them to the parents of modals. So modals just synchronously emit events and data, basically.

Copy link
Contributor

@indirectlylit indirectlylit May 17, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah that seems reasonable.

another alternative is for modals that handle their own internal async code, to explicitly emit an event that's not submit or cancel. For example:

.then(() => this.$emit('finished'))

});
} else {
this.$refs.name.focus();
}
},
close() {
this.displayModal(false);
},
},
$trs: {
newLearnerGroup: 'Create new group',
Expand Down
8 changes: 2 additions & 6 deletions kolibri/plugins/coach/assets/src/views/plan/GroupsPage/DeleteGroupModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
:submitText="$tr('deleteGroup')"
:cancelText="$tr('cancel')"
@submit="handleSubmit"
@cancel="close"
>
<p>{{ $tr('areYouSure', { groupName: groupName }) }}</p>
</KModal>
Expand Down Expand Up @@ -34,15 +33,12 @@
},
},
methods: {
...mapActions('groups', ['displayModal', 'deleteGroup']),
...mapActions('groups', ['deleteGroup']),
handleSubmit() {
this.deleteGroup(this.groupId).then(() => {
this.$emit('success');
this.$emit('submit');
});
},
close() {
this.displayModal(false);
},
},
$trs: {
deleteLearnerGroup: 'Delete group',
Expand Down
6 changes: 1 addition & 5 deletions kolibri/plugins/coach/assets/src/views/plan/GroupsPage/RenameGroupModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
:cancelText="$tr('cancel')"
:submitDisabled="submitting"
@submit="callRenameGroup"
@cancel="close"
>
<KTextbox
ref="name"
Expand Down Expand Up @@ -92,7 +91,7 @@
},
},
methods: {
...mapActions('groups', ['renameGroup', 'displayModal']),
...mapActions('groups', ['renameGroup']),
callRenameGroup() {
this.formSubmitted = true;
if (this.formIsValid) {
Expand All @@ -105,9 +104,6 @@
this.$refs.name.focus();
}
},
close() {
this.displayModal(false);
},
},
$trs: {
renameLearnerGroup: 'Rename group',
Expand Down
10 changes: 8 additions & 2 deletions kolibri/plugins/coach/assets/src/views/plan/GroupsPage/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,21 +50,24 @@
<CreateGroupModal
v-if="showCreateGroupModal"
:groups="sortedGroups"
@success="handleSuccessCreateGroup"
@submit="handleSuccessCreateGroup"
@cancel="closeModal"
/>

<RenameGroupModal
v-if="showRenameGroupModal"
:groupName="selectedGroup.name"
:groupId="selectedGroup.id"
:groups="sortedGroups"
@cancel="closeModal"
/>

<DeleteGroupModal
v-if="showDeleteGroupModal"
:groupName="selectedGroup.name"
:groupId="selectedGroup.id"
@success="handleSuccessDeleteGroup"
@submit="handleSuccessDeleteGroup"
@cancel="closeModal"
/>

</KPageContainer>
Expand Down Expand Up @@ -125,6 +128,9 @@
methods: {
...mapActions('groups', ['displayModal']),
...mapActions(['createSnackbar']),
closeModal() {
this.displayModal(false);
},
openCreateGroupModal() {
this.displayModal(GroupModals.CREATE_GROUP);
},
Expand Down
2 changes: 0 additions & 2 deletions kolibri/plugins/coach/assets/src/views/plan/assignments/AssignmentCopyModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
:title="modalTitle"
:submitText="coachStrings.$tr('continueAction')"
:cancelText="coachStrings.$tr('cancelAction')"
@cancel="$emit('cancel')"
@submit="goToAvailableGroups"
>
<KRadioButton
Expand All @@ -27,7 +26,6 @@
:title="modalTitle"
:submitText="coachStrings.$tr('copyAction')"
:cancelText="coachStrings.$tr('cancelAction')"
@cancel="$emit('cancel')"
@submit="$emit('submit', selectedClassroomId, selectedCollectionIds)"
>
<p>{{ $tr('destinationExplanation', { classroomName: selectedClassroomName }) }}</p>
Expand Down
2 changes: 0 additions & 2 deletions kolibri/plugins/coach/assets/src/views/plan/assignments/AssignmentDeleteModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@
:title="modalTitle"
:submitText="coachStrings.$tr('deleteAction')"
:cancelText="coachStrings.$tr('cancelAction')"
@submit="$emit('submit')"
@cancel="$emit('cancel')"
>
<p>{{ modalDescription }}</p>
<p v-if="modalConfirmation">
Expand Down
2 changes: 1 addition & 1 deletion kolibri/plugins/coach/assets/test/views/AssignmentDeleteModal.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ function makeWrapper(options) {
}

describe('AssignmentDeleteModal', () => {
it('clicking delete causes a "delete" event to be emitted', () => {
it('clicking delete causes a "submit" event to be emitted', () => {
const { wrapper, els } = makeWrapper({
propsData: { ...defaultProps },
store,
Expand Down
5 changes: 2 additions & 3 deletions ...ri/plugins/device_management/assets/src/views/AvailableChannelsPage/ChannelTokenModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
:submitDisabled="formIsDisabled"
:cancelDisabled="formIsDisabled"
@submit="submitForm"
@cancel="$emit('closemodal')"
>
<p>{{ $tr('tokenExplanation') }}</p>

Expand Down Expand Up @@ -80,9 +79,9 @@
// tokens can return one or more channels
if (channels.length > 1) {
this.setAvailableChannels(channels);
this.$emit('closemodal');
this.$emit('cancel');
} else {
this.$emit('channelfound', channels[0]);
this.$emit('submit', channels[0]);
}
})
.catch(error => {
Expand Down
4 changes: 2 additions & 2 deletions kolibri/plugins/device_management/assets/src/views/AvailableChannelsPage/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@
>
<ChannelTokenModal
v-if="showTokenModal"
@closemodal="showTokenModal=false"
@channelfound="goToSelectContentPageForChannel"
@cancel="showTokenModal=false"
@submit="goToSelectContentPageForChannel"
/>
<span>{{ $tr('channelNotListedExplanation') }}&nbsp;</span>

Expand Down
2 changes: 1 addition & 1 deletion kolibri/plugins/device_management/assets/src/views/DeviceIndex.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<transition name="delay-entry">
<WelcomeModal
v-if="welcomeModalVisible"
@closeModal="hideWelcomeModal"
@submit="hideWelcomeModal"
/>
</transition>

Expand Down
2 changes: 1 addition & 1 deletion kolibri/plugins/device_management/assets/src/views/ManageContentPage/ChannelsGrid.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
<DeleteChannelModal
v-if="channelIsSelected"
:channelTitle="selectedChannelTitle"
@confirm="handleDeleteChannel"
@submit="handleDeleteChannel"
@cancel="selectedChannelId=null"
/>
</div>
Expand Down
10 changes: 0 additions & 10 deletions kolibri/plugins/device_management/assets/src/views/ManageContentPage/DeleteChannelModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@
:title="$tr('title')"
:submitText="$tr('confirmButtonLabel')"
:cancelText="$tr('cancelButtonLabel')"
@submit="handleClickConfirm"
@cancel="handleClickCancel"
>
<p>{{ $tr('confirmationQuestion', { channelTitle }) }}</p>
</KModal>
Expand All @@ -28,14 +26,6 @@
required: true,
},
},
methods: {
handleClickCancel() {
this.$emit('cancel');
},
handleClickConfirm() {
this.$emit('confirm');
},
},
$trs: {
confirmationQuestion: `Are you sure you want to delete '{ channelTitle }' from your device?`,
title: 'Delete channel',
Expand Down
1 change: 0 additions & 1 deletion ...anagement/assets/src/views/ManageContentPage/SelectNetworkAddressModal/AddAddressForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
size="medium"
:submitDisabled="attemptingToConnect"
@submit="handleSubmit"
@cancel="$emit('cancel')"
>
<p>{{ $tr('addressDesc') }}</p>
<div>
Expand Down
1 change: 0 additions & 1 deletion ...gement/assets/src/views/ManageContentPage/SelectNetworkAddressModal/SelectAddressForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
size="medium"
:submitDisabled="submitDisabled"
@submit="handleSubmit"
@cancel="$emit('cancel')"
>
<UiAlert
v-if="uiAlertProps"
Expand Down
Loading