Automatically jumps to the next photo when deleting while previewing.

[chief8192]

Description
Deletions made while previewing now immediately load the preview of the next file in the list. When the last file is deleted, previewing ends and returns to the file list, as before.

Closes #1091

[o1egl]

@ramiresviana could you please review it?

[ramiresviana]

There is an issue when pressing enter on delete dialog, the next() is being triggered. This should be solved by:

• Moving this.closeHovers() to after this.$emit on

  filebrowser/frontend/src/components/prompts/Delete.vue

  Line 35 in dcbc328

  this.closeHovers()

• Changing the keyup to keydown on

  filebrowser/frontend/src/components/files/Preview.vue

  Lines 136 to 142 in dcbc328

  	window.addEventListener('keyup', this.key)
  	this.$store.commit('setPreviewMode', true)
  	this.listing = this.oldReq.items
  	this.updatePreview()
  	},
  	beforeDestroy () {
  	window.removeEventListener('keyup', this.key)

• Removing event.preventDefault() on

  filebrowser/frontend/src/components/files/Preview.vue

  Line 158 in dcbc328

  event.preventDefault()

[chief8192]

The problem I'm running into is that after omitting $root from this.$root.$emit(...) and this.$root.$on(...), event transmission stops working. Seems like it could be because Delete and Preview are sibling components?

[ramiresviana]

Just omitting $root from this.$root.$on(...) is not going to work, you need to use v-on directive on the components you want to listen: https://vuejs.org/v2/guide/events.html

[chief8192]

Yeah, so I've tried using v-on, in a number of different places. I can verify that the this.$emit('preview-deleted') call is working, because the event shows up in the devtools console when I click "DELETE".

The problem seems to be that prompts/Delete.vue is not a child component of files/Preview.vue. If I'm understanding this article correctly, the v-on would have to be added to the <delete> tag that gets generated in prompts/Prompts.vue. It doesn't look like that could be done without a decent amount of refactoring, and even that wouldn't gain us the ability to interact with Preview.vue.

[ramiresviana]

Every element that is on template body of the component is considered a child, so <delete-button> is child of the preview. A working example is the <preview-size-button>, it has @change-size event and is being used on the preview.

[chief8192]

I agree, what you're saying is true. The difference here is that while the Delete button is a child of the Preview component, the Delete prompt is not. And it's the Delete prompt which is ultimately responsible for making the API call to delete the file, and then calling $emit().

So given the limitation here that an event emitted by a child component has to be handled by the parent component (either via v-on or @event-name), I'm not clear how this could be easily made to work, given that the parent component of the Delete prompt is Prompts.vue, not Preview.vue:

[ramiresviana]

I see now, since VueJS does not provide an proper solution for that case, i think we can use the $root instance.

[chief8192]

Ok, committed a new round of changes

[ramiresviana]

Navigation stops working when renaming file on preview, can you take a look on that? Similarly to the prompts/Delete you will need to create an event for prompts/Rename.

[chief8192]

I did a clean build from master, and the rename issue is present there as well, so it looks to be an unrelated issue out of scope for this PR.

[ramiresviana]

Looking good, thank you for contributing to this project.

[chief8192]

Cheers, happy to help!