pkp/pkp-lib#6062 CrossRef and DOI UI/UX quality of life improvements

[ewhanson]

Draft pull request for preliminary code review.

[NateWr]

Because this isn't a general field that will be used elsewhere, the <tooltip>, <span>, <help-button> and description elements are not needed.

[NateWr]

The prefix and <multilingual-progress> elements are also not needed.

[NateWr]

controlClasses and classes are not needed either, I think.

[NateWr]

Looks like this isn't needed since it's only used with the prefix option (whcih can be removed)

[NateWr]

Let's just call this method save().

[NateWr]

A way I like to do this to make the code a little more expressive is to pass in the new status. So when I see toggleX(), I think that it will turn it on/off depending on its current state. But in this case you are explicitly passing in the state that you want.

I'd change the method to work like this:

/**
  * Select a DoiListItem in the DoiListPanel
  *
  * @param {Number} itemId
  * @param {Boolean} select Whether it should be selected or deselected
  */
selectItem(itemId, select) {
	const selected = this.selected.includes(itemId);
	if (select && !selected) {
		this.selected.push(itemId);
	} elseif (!select && selected) {
		this.selected = this.selected.filter(item => item !== itemId);
	}
},

And then pass the desired state in when I call the method (notice the !):

this.$emit('selectItem', this.item.id, !this.isSelected);

[NateWr]

No need for this comment or the removal one below.

[NateWr]

I think isPublished is not used, is it?

[NateWr]

You'll want to move these filters out of the ListPanel and into the PHP code that passes the initial data into the ListPanel.

[NateWr]

Because these first two selects have a prefix .doiListPanel__, they do not need to be nested inside of .doiListPanel { ... }. The others should stay nested inside .doiListPanel so they are not applied to other components.