Adding a second set of "Add" buttons on top to PageTable

[titanium]

Hi,

I have a client which has a PageTable with a long list of PageTable entries. He feels annoyed that he has to scroll down the whole list in order to see the "Add" buttons at the bottom of the list. I would like to build a module which adds a second set of "Add" buttons at the top of the PageTable. I took a look at InputfieldPageTable.module and can see that the buttons get added in the function "___render" at line 117:

		// render the 'Add New' buttons for each template
		$btn = '';
		foreach($this->rowTemplates as $template) { 
			$button = $this->wire('modules')->get('InputfieldButton'); 
			$button->icon = 'plus-circle';
			$button->value = count($this->rowTemplates) == 1 ? $this->_x('Add New', 'button') : $template->getLabel(); 
	
			$url = $this->wire('config')->urls->admin . "page/add/?modal=1&template_id=$template->id&parent_id=$parentID";
			if($this->nameFormat) $url .= "&name_format=" . $this->wire('sanitizer')->entities($this->nameFormat);
			$btn .= "<span class='InputfieldPageTableAdd' data-url='$url'>" . $button->render() . "</span>";
		}
		$out .= "<div class='InputfieldPageTableButtons ui-helper-clearfix'>$btn</div>";

Since there is no hookable method for adding the buttons alone, I think that there are two routes to take now:

- Replace the whole ___render() method

or

- call the existing render method and parse the $event->return for css class "class='InputfieldPageTableButtons" and copy it on top of $event->return (DOM manipulation)

Both ways feel clumsy and not future-proof in case of PageTable module upgrades.

Is there a better route I should take?

[diogo]

You could add them with some JS with Admin Custom Files http://modules.processwire.com/modules/admin-custom-files/

Something like:

$(".InputfieldPageTableButtons").each(function(){
    $myButtons = $(this);
    $myTableContainer = $myButtons.closest(".InputfieldPageTableContainer");
    $myButtons.clone().prependTo($myTableContainer);
});

(written in the browser and not tested)

Edited August 1, 2017 by diogo
corrected typo

[szabesz]

Based on @diogo's idea above, I impleneted a version which works for multiple Page Tables of the same Page, and only adds the extra button to the top if the table is not empty (i.e. exists):

$(document).ready(function () {
	/*
	 * Use both clonePageTableAddButton(); and bind("DOMSubtreeModified"... below so that it
	 * works with multiple PageTables on the same page.
	 */
	clonePageTableAddButton();
	//Adds the button again, when AJAX updates the table:
	$(".InputfieldPageTableButtons").closest(".InputfieldPageTableContainer").bind("DOMSubtreeModified", function () {
		clonePageTableAddButton();
	});
});

/*
 * Adds a clone of the PageTable field's Add New button to the top of the table
 */
function clonePageTableAddButton() {
	$(".InputfieldPageTableButtons").each(function () {
		$myButtons = $(this);
		$myTableContainer = $myButtons.closest(".InputfieldPageTableContainer");
		//Only add button when Table is not empty (length != 0) and no button has been added already (length < 2)
		if ($myButtons.closest(".InputfieldPageTableContainer").find(".AdminDataTable").length != 0 &&
				$myTableContainer.find(".InputfieldPageTableButtons").length < 2) {
			$myButtons.clone().prependTo($myTableContainer);
		}
	});
}

I think the non-existence of this button on the top of the table is a major UX issue and it should be treated like a bug in the core. What's your opinion on this?

Edited August 1, 2017 by szabesz
typo

[rick]

Maybe I am misunderstanding. Does this not do what you need?

$button = $this->modules->get("InputfieldButton"); 
$button->showInHeader();
//$button->setSecondary();
$button->href = "{$this->page->url}whatever"; // ??? execute whatever
$button->icon = 'some_icon';
$button->value = "New Thing";
// output button render
return $button->render();

 

[szabesz]

20 minutes ago, rick said:

Does this not do what you need?

That depends  Where does your snippet go and how does it add the button to the existing core module (PageTable)?

[rick]

It isn't part of a PageTable or AdminDataTable. The showInHeader() is part of the header of the current page. It will display like the Add New Template button on the Template page.

// in process execute function:
$table = $this->modules->get('MarkupAdminDataTable');
$table->setEncodeEntities(false);
$table->setSortable(true);
$table->setCaption('Table Caption');
$table->headerRow(['col1', 'col2', '...']);

$button = $this->modules->get("InputfieldButton"); 
$button->showInHeader();
//$button->setSecondary();
$button->href = "{$this->page->url}something";
$button->icon = 'some_icon';
$button->value = "Add New Something";

// $table->row( array() ); // populate table rows loop

return $table->render() . $button->render(); // Button is shown after table list (and in page header)

 

Edited August 1, 2017 by rick
add example

[szabesz]

Actually, I'm not trying to add some extra functionality, I just need a more UX friendly Page Table setup. There are three types of use cases:

#1 Next page is always added to the bottom of the table:

#2 Next page is always added to the top. Which I prefer by setting sort order to -modified, so that when editing the page, the editor does not have to scroll down at all. This is preferable when the sort order does not matter in any other way (i.e frontend order does not depend on it):

#3 And there are those cases when added pages appear somewhere in-between.

When dealing with a lot of rows/pages in the case of #3 and especially in #2 it is much more preferable to have the Add New button on the top of the page table, not just at the bottom.

I do not see how adding an "Add New" Page Table button to the header could help here.

[bernhard]

szabesz, have you ever tried writing a custom process module? sometimes it's a lot easier to write your own custom admin-interface than modifying the regular page edit form

it's easier than you might think!