Fixed delete-tag modal showing unexpectedly

no issue

- there was a race condition when deleting tags...
    - the delete tag modal's `close` action toggles the `showDeleteTagModal` property to `false`
    - the `deleteTag` action triggered when clicking the delete button was transitioning to the tags screen
    - if the transition occurs before the close action is triggered, the modal component is destroyed and it's close action is never triggered leaving the `showDeleteTagModal` property on the controller set to `true`
    - the next time the tag screen is accessed the delete tag modal is displayed because the `showDeleteTagModal` property is `true`
- adds an explicit reset of `showDeleteTagModal` after a tag is successfully destroyed
- makes open/close of the delete tag modal explicit actions so there's no ambiguity when toggling
This commit is contained in:
Kevin Ansfield 2020-06-09 10:15:13 +01:00
parent c1866ed3ec
commit 49700d9b64
2 changed files with 9 additions and 4 deletions

View File

@ -28,12 +28,17 @@ export default Controller.extend({
this._saveTagProperty(propKey, value);
},
toggleDeleteTagModal() {
this.toggleProperty('showDeleteTagModal');
openDeleteTagModal() {
this.set('showDeleteTagModal', true);
},
closeDeleteTagModal() {
this.set('showDeleteTagModal', false);
},
deleteTag() {
return this.tag.destroyRecord().then(() => {
this.set('showDeleteTagModal', false);
return this.transitionToRoute('tags');
}, (error) => {
return this.notifications.showAPIError(error, {key: 'tag.delete'});

View File

@ -18,7 +18,7 @@
</form>
{{#unless this.tag.isNew}}
<button type="button" class="gh-btn gh-btn-red gh-btn-icon mb15" {{on "click" (action "toggleDeleteTagModal")}}>
<button type="button" class="gh-btn gh-btn-red gh-btn-icon mb15" {{on "click" (action "openDeleteTagModal")}}>
<span>Delete tag</span>
</button>
{{/unless}}
@ -37,6 +37,6 @@
@modal="delete-tag"
@model={{this.tag}}
@confirm={{action "deleteTag"}}
@close={{action "toggleDeleteTagModal"}}
@close={{action "closeDeleteTagModal"}}
@modifier="action wide" />
{{/if}}