ublaboo/datagrid: mocný, rychlý, rozšiřitelný, hezký, anglicky dokumentovaný datagrid

Ahoj,
prvně bych chtěl říct, že tento grid je přímo excelentní :o)
a dále mám menší dotaz:
Mám problém s překladem confirmů u akcí (používám Kdyby\Translation).
ve slovníku mám

...
	confirm:
		delete: 'Opravdu chcete odstranit roli %name%?'

Ale nevím jak tam poslat ten parametr %name%.
Klasicky přes ->setConfirm('confirm.delete', 'name'); se tam parametr nedostane. V případě callbacku si můžu zprávu přeložit sám ve funkci, ale jelikož má grid nastavený translator, tak se pořád snaží i ten výsledný confirm přeložit sám.

@PavelKouřil: já používám multiselect

Ještě pár věcí:

• když vypnu stránkování $grid->setPagination(FALSE), asi by se nemusel zobrazovat spodní panel row-grid-bottom, kde vlastně nic není (a možná by mohl být renderován jako řádek tabulky, aby byl stejně široký, když tabulka nemá width: 100%)
• u aktivování $('.datagrid [data-sortable]') by bylo fajn přidat option axis: 'y' a taktéž ikonu změnit z fa-arrows na fa-arrows-v
• if (typeof $('.datagrid [data-sortable]').sortable === 'undefined') { dělá zbytečný dotaz nad DOM, stačí if (typeof $.fn.sortable === 'undefined') {
• ačkoliv dokumentace trošku (a asi nechtě) naznačuje opak, tak datagrid.js musí být natažen až na konci stránky. Nestálo by za to ty inicializace nad DOM přesunout do $(function() { … })?

@DavidGrudl Stránkování: Je tam ještě třeba někde zobrazit button, který umožní resetování filtru. Přidám do šablony podmínku (nepoužívám filtry && nepoužívám stránkování ⇒ skryj patičku).

Zapřemýšlím nad tím řádkem tabulky. Dřív tam byl nějaký problém ohledně snippetů, ale už to myslím není aktuální.

Díky za poznámky. Do masteru jsem dal pozměněné assety.

Pavel Janda napsal(a):

Nová verze – v3.3.0

• Inline přidávání záznamů, http://ublaboo.paveljanda.com/datagrid/add

Ahoj
„plus“ button je v hlavičke a riadok pridáva na koniec
je možné ho renderovať ako prvý riadok/resp. do hlavičky ?

Ahoj, prvně bych chtěl poděkovat za parádní DataGrid, je opravdu super. Chtěl bych se ale zeptat, jakým způsobem zpracováváte chyby vzniklé při inline editaci/přidávání nové položky přes DataGrid?

Když datagrid umožňuje přidávání/editaci přímo v tabulce, a vypisovaných dat je málo(cca 3 sloupečky), tak mi přišlo zbytečné přidávat další stránku jen pro přidávání/editaci záznamů dané entity.

Jak ale řešíte situaci, kdy na jednom sloupci je nastaven například unique key, nebo hodnota v jednom sloupci nesmí být větší než hodnota v druhém sloupci apod.?

Normálně mi z aplikace přijde například vyjímka, kterou bych zpracoval a vyhodil flash message. Jak ale takovou chybu zobrazit? Zobrazit flash message nad datagridem? Když bude počet položek na jedné stránce větší, tak flash message nad datagridem a položka někde dole nebude moc user friendly.

Zkoušel jsem i hodit formulář do detailu položky, což se mi povedlo, ale nepřišel jsem už na to, jak tam dostat defaultní hodnoty zobrazované entity, pokud by to ale šlo, jak bych tam mohl zobrazit tu chybovou zprávu?

Nebo se na to dívám úplně špatně a měl bych v inline editaci povolit pouze změnu hodnot, u kterých k takové chybě nedojde?

Díky moc za odpovědi.

Ještě k těm přesouvacím ikonkám – viděl jsem, že teď se ikonka při přesouvání změní z 🕂 na ↕ což mi ale úplně nedává smysl, respektive nerozumím, proč mít vůbec pro přesun nahoru/dolů ikonku 🕂 znamenající přesun ve všech směrech?

Určitý problém z hlediska UI je také zobrazení této ikonky v podobě buttonu, protože to tlačítko není, je to prostě táhlo, viz třeba použití na https://jqueryui.com/sortable/. Chápu, že důvodem asi je snaha o jednotný vzhled ikon v sloupci Action, ale toho bych se vůbec nebál, odstranění tlačítka (obrázek vlevo) na vzhledu neubírá a na srozumitelnosti určitě přidá (fa fa-arrows-v fa-lg):

David Grudl napsal(a):

Ještě k těm přesouvacím ikonkám – viděl jsem, že teď se ikonka při přesouvání změní z 🕂 na ↕ což mi ale úplně nedává smysl, respektive nerozumím, proč mít vůbec pro přesun nahoru/dolů ikonku 🕂 znamenající přesun ve všech směrech?

Určitý problém z hlediska UI je také zobrazení této ikonky v podobě buttonu, protože to tlačítko není, je to prostě táhlo, viz třeba použití na https://jqueryui.com/sortable/. Chápu, že důvodem asi je snaha o jednotný vzhled ikon v sloupci Action, ale toho bych se vůbec nebál, odstranění tlačítka (obrázek vlevo) na vzhledu neubírá a na srozumitelnosti určitě přidá (fa fa-arrows-v fa-lg):

Pavel Janda napsal(a):
@DavidGrudl 2, Souhlasím, že se to nechová jako klasické tlačítko. Na druhou stranu, značí to nějakou akci – když kliknu (podržím), něco se stane. Pouze ikonka tak, jak je na screenshotu nalevo, se mi nezdá tak proaktivní jako napravo.

1, Taky bych s tím souhlasil. Ale obyčejní lidé jsou spíš zvyklí na symbol té čtyřšipičky, alespoň na mě působí spíš jednoduchým dojmem „přesunou“, než „Vzít, táhnout – proč to nejde od všech stran??“..

Udělám s pár lidmi nějaký jednoduchý testing, abych získal náhled ze strany bfu.

Dík za postřehy

Souhlasím s @DavidGrudl. Varianta v levo (táhlo) je více uživatelsky přívětivá a určitě bych to tak rád viděl. Není tlačítko jako tlačítko

Zrovna teď jsem to řešil a výsledkem je levé řešení. Ale dát ikonu dvojšipky na tlačítko by taky šlo. Čtyřšipka mě ani nenapadla a přijde mi méně jasná.

Zdravím děkuji za skvělý Datagrid, opravdu vymakaný :-).
Potřeboval jsem do horní části grida vedle ikonek „Nový záznam“ a „Skrýt sloupce“ přidat ještě jednu mnou definovanou (nějaký odkaz). Rozšířil jsme si třídu \Ublaboo\DataGrid\DataGrid a přidal metodu

<?php
class Grid extends \Ublaboo\DataGrid\DataGrid {

    protected $settingButtons;

    public function __construct($parent, $name) {
        parent::__construct($parent, $name);
    }
    /**
     * muzes pridat element a zobrazi se v horni casti grida
     * @param \Nette\Utils\Html $el
     */
    public function addSettingButtons(\Nette\Utils\Html $el=null){
	    if($el){
	        $this->settingButtons[] = $el;
	    }
	    return $this;
    }

    public function render() {
	    $this->template->settingButtons = $this->settingButtons;
	    parent::render();
    }
}
?>

a v šabloně upravit podmínky nad vykreslením $inlineAdd přidal toto:

<?php
{if $settingButtons}
    {foreach $settingButtons as $button}
		{$button}
    {/foreach}
{/if}
?>

Poté se dá použít takto:

<?php
...
$grid->addSettingButtons(\Nette\Utils\Html::el('a')
        ->href('print:pdf')
        ->setText('Tisk pdf')
    );
?>

Co něco podobného přidat přímo do \Ublaboo\DataGrid\DataGrid?

@PavelJanda
Ahoj, díky za nástřel, koukal jsem na to a zkusil to implementovat, ale dostávám Fatal error: datagrid/src/DataSource/ArrayDataSource.php:221 přitom ale mám nastavený dataSource na tu repository. Akutalizoval jsem bitbucket, konkrétně:

• presenter: createComponentExamplesGrid($name)
• repository: udělaný jen nástřel dle tebe

Pavel Janda napsal(a):

@tatyalien Co se ti hází za chybu? Kdyžtak mi všechno piš prosím na gitter. Btw, pokud chceš používat jako datasource tu repositoru, tak nepiš $grid->setDataSource($this->exampleRepository->getData());, ale $grid->setDataSource($this->exampleRepository);.

Ahoj,
napsal jsem ti email, gitter neznám :) tak ať to tu nespamuji.

@romiix.org Už je to pár dní v masteru. Otaguji to ve verzi 4.0.0 během dneška/zítřka.

@romiix.org Ano, používá se bootstrap-select. Vše bude popsáno v docu v moment, co vydám v4. :)

@romiix.org http://ublaboo.paveljanda.com/datagrid/column#…

Tedy například:

$grid->addColumnNumber('id', 'Id')
	->setSortable()
	->setSortableCallback(function($fluent, $sort) {
		$fluent->orderBy('name DESC');
	})

Editoval Pavel Janda (2. 5. 2016 15:20)

Nová verze – v4.0.0

Vydal jsem novou verzi, kvůli změně latte šablony považuji novou verzi za možný bc break, více v posledním bodu seznamu níže.

• Šablony filtrů lze kromě bloků pojmenovaných podle jména filtru definovat též typem filtrů, tím se aplikuje na všechny filtry stejného typu ({block filtertype-select}{/block}), docu zde: http://ublaboo.paveljanda.com/datagrid/filter#…
• Přibyl nový filter – FilterMultiSelect (používá frontendovou knihovnu bootstrap-select, jak nainstalovat se dozvíte na homepage docu), více zde: http://ublaboo.paveljanda.com/datagrid/filter#…
• Iniline přidávání záznamů je možné nyní renderovat jak pod načtenými položkami, tak nahoře, více zde: http://ublaboo.paveljanda.com/datagrid/add#…
• Přibyla možnost definovat parametry latte bloku/šabloně pro item detail, více zde: http://ublaboo.paveljanda.com/datagrid/action#…
• K možnosti nastavit defaultní schování sloupců, přibyla další – zobrazit defaultní sloupce, více zde: http://ublaboo.paveljanda.com/datagrid/column#…
• Přibyla možnost změny chování překládání selectů u filtrů, více zde: http://ublaboo.paveljanda.com/…localization#…
• Přibyla možnost nastavit defaultní filtry datagridu, více zde: http://ublaboo.paveljanda.com/datagrid/filter#…
• Patička se přesunula z divů do <tfoot>, což znamená možný BC break pro ty, který si definují svou vlastní šablonu datagridu.

Díky všem za nápady a spolupráci!

Editoval Pavel Janda (4. 5. 2016 9:43)

Zdravím trochu zápasím s inline editací:

1. je možné po kliku na tlačítko „save“ překreslit celý dataGrid a né jenom konkrétní řádek? Zkoušel jsem obalit dataGrid do snippetu a zavolat $this->redrawControl(), ale poté se zobrazí pouze editovaný záznam.
2. do formuláře inline editace bych potřeboval dostat něco jako $form->addError(‚xx‘). V podstatě zabránit uložení a zobrazit chybovou hlášku. Je to možné?

Děkuji za jakýkoli nápad.

OK, děkuji za info

@Ripper akurat sme to tiez riesili, najednoduchsie co ma napadlo:

public function handleSort($item_id, $prev_id, $next_id){
		$prevRow = $this->database->table("tabulka")->where("id", $prev_id)->fetch();
		$newOrderId = $prevRow ? $prevRow->position + 1 : 1;
		$this->database->query("UPDATE tabulka SET position = position + 1 WHERE position >= ?", $newOrderId);
		$this->database->query("UPDATE tabulka SET position = ? WHERE id = ?", $newOrderId, $item_id);
	}

@pitr82 Hmm, to je trošku trouble. Bohužel, momentálně je v kódu <tr n:snippet="item-...">, takže se překresluje pouze obsah elementu <tr>. A obalit <tr> snippetem nelze, protože samotný snippet vytvoří div a <tbody> nesmí obsahovat přímo div. :P

Dáš to pls na github do issues? Nějak to vymyslíme.

@sibka dej definici sloupce/filtru pred ty defaultni hodnoty. Je tam check, aby to spis vyvojare nutilo napsat spravne klice defaultnich hodnot, nez aby to v tichosti proslo a nic se pak nezobrazilo.

Je aktuálne nejak možné zakomponovať závislé filtre?
Konkrétne by som potreboval, aby sa dalo pri plnení filtrov dalo pristúpiť k odfiltrovanému datasourcu na základe predošlého vyplnenia. Tzn. zaškrtnem výrobcu Toyota a ponúkne mi iba autá zodpovedajúce danému výrobcovi, atď.

Pre nastavenie korektných hodnôt je potrebné mať k dispozícií aktuálny zoznam odfiltrovaných áut. To by bolo riešiteľné vyňatím zodpovednej sekvencie z render metódy do novej metódy getRows. Metóda je dostupné v továrničke a vieme zobrazovať položky na základe zostávajúcich možností.

Zložitejší problém je, ako aktualizáciu filtra zobraziť. Dalo by sa pridať snippet pre riadok s filtrami, ale to by spôsobilo nepríjemný problém pri multiselecte – po označení niektorej položky by sa výber skryl. To by sa asi dalo riešiť snippetmi na úrovni <ul> elementov. Je tento prístup správny? Nejaký iný nápad..?

@romiix.org Není. Ale není problém si ho přidat. Prostě přidej inputu filtru třídu, nebo data atribut a vyrob si nějaké api, kde budeš předávat data z (pravděpodobně) databáze.

Nic takového ale implementovat neplánuti. Proč:

1. Je to megajenoduché implementovat s vlastní oblíbenou suggest knihovnou
2. Jelikož se všechna data filtrují ajaxově a v reálném čase, přijde mi suggest zbytečný.

K těm závislým filtrů: Já osobně bych to tady asi řešil spíš pomocí dalšího formuláře, který by byl nad datagridem a sám bych mu předával filtrovaný datasource. Ale jak jsi psal, není to problém nějak ohnout, problém je to ohnout tak, aby ti nezmizel focus z toho pole.

Editoval Pavel Janda (15. 5. 2016 14:44)

@FJP :D Pani to je slozity! Fixnu, jen co se dostanu domu.

• Bug fixes (@FJP)
• Přidána možnost zobrazit SUM vybraných sloupců pod tabulkou (příklad: http://ublaboo.paveljanda.com/datagrid/, doc: http://ublaboo.paveljanda.com/datagrid/column#…)

Stáhnul jsem novou verzi a chová se mi to trošku podivně:

Pozn: chová se to stejně i když jsou v gridu nějaké řádky

Editoval FJP (19. 5. 2016 9:51)