Rozjetí DataGridu krok po kroku

Dark0ne

Zdravím,
do svého projektu bych rád přidal tento užitečný nástroj. Mám ovšem několik věcí, které zatím nějak nechápu a kvůli kterým nemohu pokročit dál.
Všude čtu o instalaci přes composer. Jelikož jsem zatím vše do projektu přidával ručně skrz adresářovou strukturu, nějak mi není jasné, jak to udělat. (Používám NetBeans, ale nejsem schopen to přes něj nastavit).
Velmi přínosné by pro mě bylo také pokud by někdo věděl o funkčním jednoduchém projektu ke stažení, kde je Datagrid využívány, abych si jej mohl vyzkoušet, pochopit a poté použít u sebe.

Těch informací kolem composeru, component, datagridu a dalších věcí, je hodně, ale nějak se v tom zatím nedokážu pořádně zorientovat, takže bych byl velmi rád, kdyby mi někdo pomohl nějakým postupem s popisem i pro méně chápavé :).
Předem děkuji za rady.

ViPEr*CZ*

No když to řeknu zjednodušeně, tak composer udělá download, vytvoří soubor něco.php, který si vy inlcludujete někde na začátku (bootstrap.php) a to je všechno. Tím se Vám do aplikace dostanou (nainkludují) všechny potřebné třídy a skripty oné komponenty co instaluje composer.
Když to uděláte ručně, tak si stahněte z gitu source, dejte ho do složky kam vidí RobotLoader a máte to samé defacto bez composeru. Pak už čtěte dokumentaci ke komponentě, kterou chcete použít a případně se ptejte na konkrétní věci :-)

Pavel Janda

1, Nebudeš stahovat žádné knihovny z webu.
2, Packagist je místo, kde jsou na jedné hromadě uložené všechny balíčky pro composer (tedy spíš jména a odkazy na github)
3, V projektu, ve kterém potřebuješ třeba datarid, vytvoříš soubor composer.json a napíšeš do něj třeba:

{
	"require": {
		"nejaky/datagrid": "~2.0.0"
	}
}

To jméno balíčku je jedinečné právě pro každý balíček na tom composeru/packagistu. Verze je verze, tag, který dal repozitáři autor a pushnul ho na github. (Odtud to composer pročekoval a připravil ke stažení přes composer). Takže když někdo pushne tag 1.0.0 na github a zaregistruje si ten balíček i na composeru, tak pak lze stáhnout právě tu verzi přes composer.

4, Vlezeš do command lajny/nebo něčeho na widlích do adresáře projektu a napíšeš composer update.
5, Composer ti natáhne všechny knihovny/balíčky do adresáře <projekt>/vendor.
6, Composer ti umožní použít jeho vygenerovaný autoloader, který se nachází po příkazu výše v vendor/autoload.php

7, Pokud nevíš, co je to autoloader, tak zagoogli. Jinak můžeš použít právě tento autoloader k načtení závislostí, které jsi si natahal přes composer

Pavel Janda

Když se podíváš na sandbox nette, tak na prvních řádcích souboru bootstrap.php je toto:

require __DIR__ . '/../vendor/autoload.php';

To je již zmíněný autoloader composeru. Nette se tedy v tom projektu sandbox natáhlo přes composer do adresáře vendor a vyrobil se autoloader, který načítá i věci nette fw.

Pavel Janda

Tvůj postup by měl být teď asi takový:

1, Smažeš v projektu adresář <projekt>/libs, nebo kam ukládáš všechny knihovny třetích stran.
2, Vytvoříš v projektu soubor composer.json, kde definuješ všechny závislosti projektu – tedy balíčky, které tvůj projekt používá. Jestli používáš nette, bude tam minimálně to samé, jako v sandboxím composer.json: https://github.com/…omposer.json
3, Pokud používáš/chceš používat nějaký datagrid, najdi si ho na composeru a přidej tu závislost do composer.json souboru
4, udělej opět composer update, aby se ten balíček stáhnul
5, Použij ho

PS: Když bys to stále nemohl pochopit a slíbíš mi, že alespoň vyzkoušíš můj datagrid, můžu ti něco víc o composeru říct večer na skypu. :P

Editoval Pavel Janda (26. 2. 2016 13:46)

Dark0ne

Pavel Janda: Děkuji moc za podrobný návod. Momentálně jsem ve fázi, kdy se mi podařilo přes composer najít ten tvůj Ublaboo datagrid a nainstalovat ho. Celou jeho struktura mám ve složce vendor. Díval jsem se na dokumentaci a chtěl ho použít v jednom presenteru. Naimportoval jsem knihovnu „Ublaboo\DataGrid\DataGrid;“ a její použití mi vyhazuje chybu „Undefined constant ‚App\Presenters\Ublaboo\DataGrid\DataGrid‘“. Byl bych velmi vděčný za další postup do bodu, abych mohl Datagrid používat.
Díky moc

Pavel Janda

@Dark0ne Pravděpodobně budeš mít někde chybku v syntaxi. Zkus sem hodit kód tvého presenteru, který inicializuje datagrid. Tedy je ukázka, jak by mohl takový jednoduchoučký presenter vypadat:

<?php

namespace App\Presenters;

use Nette;
use Ublaboo\DataGrid\DataGrid;

class UsersPresenter extends BasePresenter
{

	/**
	 * @var Nette\Database\Context
	 * @inject
	 */
	public $ndb;


	public function createComponentUsersGrid($name)
	{
		$grid = new DataGrid($this, $name);

		$grid->setDataSource($this->ndb->table('user'));
        $grid->setColumnsHideable();

		$grid->addColumnDateTime('created', 'Vytvořeno');

		/**
		 * Filters
		 */
		$grid->addFilterText('name', 'Search', ['name', 'address', 'created']);
	}

}

Editoval Pavel Janda (29. 2. 2016 12:20)

Dark0ne

@PavelJanda Chyba byla v tom, že jsem tuto knihovnu zařadil do obecného „use“ nette, dal jsem to zvlášť a už to jede. Ovšem narazil jsem na další chybu jinde.

V presenteru:

private function getModel() {
       if (!isset($this->model)) {

           $this->model = new Model\NajemniciModel($this->context->getService("database"));
       }

       return $this->model;
   }

	public function createComponentSimpleGrid($name)
	{
		$grid = new DataGrid($this, $name);

		$grid->setDataSource($this->getModel()->getNajemniciOld());
		$grid->addColumnText('name', 'Name');
	}

Píše mi laděnka chybu „Cannot read an undeclared column ‚id‘.“… Ono je nutné mít pojmenovaný sloupec v každé tabulce pouze „id“? Ja to totiž mám pojmenované „id_najemnici“.

Edit: U jednoho výpisu, kde mám tabulku jen s „id“ mi to funguje, ovšem nejsou tam styly a javascript, který se zase instaluje nějakým bowerem, prosím o nějaký podrobnější popis i zde.

Díky moc

Editoval Dark0ne (29. 2. 2016 13:10)

Pavel Janda

@Dark0ne primární sloupec je by-default id. Můžeš změnit: $grid->setPrimaryKey('id_najemci'). Jak natáhnout správně assety stojí v dokumentaci. Příklad: https://forum.nette.org/…any-datagrid?p=2

Dark0ne

Zkouším to normálně přes cmd a při zadání bower install ublaboo-datagrid mi to píše „ENOGIT git is not installed or not in the PATH“

Pavel Janda

@Dark0ne http://stackoverflow.com/…-in-the-path

Editoval Pavel Janda (29. 2. 2016 14:30)

Dark0ne

Omlouvám se, asi jsem dost otravnej. Instalace přes ten bower proběhla, akorát se mě to ptalo, jestli chci použít nette-forms verze 2.2 nebo 2.3, tak jsem vybral tu novější. Tohle všechno jsem dělal normálně v cmd.
Pak jsem přešel do projektu v Netbeans a dal přes composer update. Zde je výpis z výstupu:

`Updating dependencies (including require-dev)
  - Removing ublaboo/datagrid (dev-master 985feb8)
  - Installing ublaboo/datagrid (dev-master cf30b5e)
    Cloning cf30b5ebd06511d5bf5def16f87ebac77fbd56a1
    Failed to download ublaboo/datagrid from source: Failed to clone git@github.com:ublaboo/datagrid.git, git was not found, check that it is installed and in your PATH env.

'git' is not recognized as an internal or external command,
operable program or batch file.

    Now trying to download from dist
  - Installing ublaboo/datagrid (dev-master cf30b5e)
    Downloading: 100%

Writing lock file
Generating autoload files
Done.`

Pavel Janda

Máš nainstalovaný GIT? https://git-scm.com/downloads Tuším, že lidé používají též GIT BASH, zkus pogooglit i tento soft.

Dark0ne

GIT nainstalovaný mám, našel jsem, že může být chyba v nastavené cestě v proměnných prostředí, ovšem tam mám C:\Program Files\Git\cmd nastavený správně.

Pavel Janda

Hmm, to ti bohužel já neporadím. Dělám na unixu. Zkus holt googlit nebo se zeptat místních, co mají win..

Dark0ne

Takže,
přes ten bower mi to tam prostě nepřidalo samo. Když jsem spustil správně nalinkovaný soubor v Netbeans, tak proběhlo tohle

bower jquery-ui-sortable#*  not-cached https://github.com/ryantbrown/jquery-ui-sortable.git#*
bower jquery-ui-sortable#*     resolve https://github.com/ryantbrown/jquery-ui-sortable.git#*
bower jquery#>= 1.11.0          cached git://github.com/jquery/jquery-dist.git#2.2.1
bower jquery#>= 1.11.0        validate 2.2.1 against git://github.com/jquery/jquery-dist.git#>= 1.11.0
bower nette-forms#>= 2.3.0      cached git://github.com/nette/bower-nette-forms.git#2.3.8
bower nette-forms#>= 2.3.0    validate 2.3.8 against git://github.com/nette/bower-nette-forms.git#>= 2.3.0
bower bootstrap-datepicker#>= 1.6.0           cached git://github.com/eternicode/bootstrap-datepicker.git#1.6.0
bower bootstrap-datepicker#>= 1.6.0         validate 1.6.0 against git://github.com/eternicode/bootstrap-datepicker.git#>= 1.6.0
bower bootstrap#>= 3.3.0                      cached git://github.com/twbs/bootstrap.git#3.3.6
bower bootstrap#>= 3.3.0                    validate 3.3.6 against git://github.com/twbs/bootstrap.git#>= 3.3.0
bower happy#>= 1.0.0                          cached git://github.com/paveljanda/happy.git#1.0.4
bower happy#>= 1.0.0                        validate 1.0.4 against git://github.com/paveljanda/happy.git#>= 1.0.0
bower nette.ajax.js#>= 2.1.0                  cached git://github.com/vojtech-dobes/nette.ajax.js.git#2.1.0
bower nette.ajax.js#>= 2.1.0                validate 2.1.0 against git://github.com/vojtech-dobes/nette.ajax.js.git#>= 2.1.0
bower nette-forms#~2.2                        cached git://github.com/nette/bower-nette-forms.git#2.2.8
bower nette-forms#~2.2                      validate 2.2.8 against git://github.com/nette/bower-nette-forms.git#~2.2
bower jquery-ui-sortable#*                  checkout master
bower jquery-ui-sortable#*                  resolved https://github.com/ryantbrown/jquery-ui-sortable.git#4323c165b8
bower                                      ECONFLICT Unable to find suitable version for nette-forms

Nicméně o úroveň výš nad souborem bower.cmd jsem našel složku bower_components, kde bylo všechno nastahované. Tak jsem tuhle složku hodil do www a nalinkoval do @layout potřebné soubory. Vypadá to, že to funguje. Akorát jsem se setkal s jednom zvláštní chybou právě v @layout – kdykoliv udělám změnu v tomto souboru, tak mi vyskočí hláška „Arguments are not allowed in {else}, did you mean {elseif}?“. Když tuhle chybu skipnu a normálně projdu se proklikám na jinou stránku webu, tak dané varování zmizí a neobjeví se, dokud zase neupravím @layout. Ví někdo, co je tohle za chybu? Přijde mi to trochu jako bug.

David Matějka

@Dark0ne ukaz layout

Pavel Janda

@Dark0ne ukaž @layout.latte

Dark0ne

{**
 * @param string   $basePath web base path
 * @param array    $flashes  flash messages
*}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Systém pro správu  | {ifset title}{include title|striptags}{/ifset}</title>

        <link rel="stylesheet" href="{$basePath}/css/style.css">
        <link rel="stylesheet" href="{$basePath}/bootstrap/css/bootstrap.css">

        <link rel="stylesheet" media="screen,projection,tv" href="{$basePath}/bootstrap/css/bootstrap.min.css" />
        <link rel="stylesheet" media="screen,projection,tv" href="{$basePath}/bootstrap/css/bootstrap-responsive.css" />
        <link rel="shortcut icon" href="{$basePath}/favicon.ico">
        <link rel="stylesheet" type="text/css" href="{$basePath}/bower_components/bootstrap/dist/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="{$basePath}/bower_components/happy/dist/happy.css">
        <link rel="stylesheet" type="text/css" href="{$basePath}/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css">
        <link rel="stylesheet" type="text/css" href="{$basePath}/bower_components/ublaboo-datagrid/assets/dist/datagrid.css">




        <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700|Open+Sans+Condensed:300,700" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato">

        {block head}{/block}
    </head>

    <body>
        {ifset $loginPage}
            <div id="wrapper">
                <div n:foreach="$flashes as $flash" n:class="flash, $flash->type">{$flash->message}</div>
                {include content}
            </div>
        {else if}
            <div id="wrapper">



                      {if $user->isLoggedIn()}<a n:href="Sign:out"> <i class="icon-hand-right icon-large icon-black"></i> Odhlásit</a>{/if}
                                | <i class="icon-time icon-large icon-black"></i>
                                {time()|date:"j.n.Y G:i"}</span>  </div>

                        <div n:foreach="$flashes as $flash" n:class="flash, $flash->type">{$flash->message}</div>
                        <div id="logo-text">

                            <span  class="byline">Administrační prostředí &gt;&gt; {$presenter->getName()}</span>
                        </div>
                        <div id="content">
                            <div id="content-inner">



                                {include content}
                            </div>
                        </div>

                            {block scripts}
                            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
                            <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
                            <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
                            <script type="text/javascript" src="http://arrow.scrolltotop.com/arrow13.js"></script>
                            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

                            <script src="{$basePath}/js/main.js"></script>
                            <script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
                            <script src="{$basePath}/bower_components/jquery/dist/jquery.js"></script>
                            <script src="{$basePath}/bower_components/nette-forms/src/assets/netteForms.js"></script>
                            <script src="{$basePath}/bower_components/nette.ajax.js/nette.ajax.js"></script>
                            <script src="{$basePath}/bower_components/happy/dist/happy.js"></script>
                            <script src="{$basePath}/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
                            <script src="{$basePath}/bower_components/jquery-ui-sortable/jquery-ui-sortable.js"></script>
                            <script src="{$basePath}/bower_components/ublaboo-datagrid/assets/dist/datagrid.js"></script>


                            {/block}

Editoval Dark0ne (29. 2. 2016 16:28)

David Matějka

{else if} ⇒ {else}

Dark0ne

Jasně, díky! :)
Z nějakého nepochopitelného důvodu jsem stále měnil pouze z {else if} na {elseif} a myslel si, že v tom chyba není. Moje nepozornost.
Ještě jednou díky

@PavelJanda Jinak tvůj datagrid si zaslouží vážně velkou pochvalu, je to fakt dost vychytané ! ;)

Editoval Dark0ne (29. 2. 2016 16:42)

Pavel Janda

@Dark0ne Díky. :)

Dark0ne

@PavelJanda Ještě na tebe mám poslední dotaz :).
Datagrid mi pěkně funguje, ale všiml jsem si, že se mi nezobrazují ikonky – např. u řazení šipka.
V dokumentaci máš DataGrid::$icon_prefix = ‚fa fa-‘; – kam se má tohle vložit? Případně, co se má kde nastavit, aby mi ikonky jely?
Dále jsem si všimnul, že u inline editování mi po aktualizaci stránky text zůstane stále stejný a nedojde k updatu dat v tabulce.

Pavel Janda

@Dark0ne To je defaultní prefix ikonkového fontu. Někdo používá bootstrapí glyphicon-* font, někdo font awesome. Podle toho, co používáš ty, si nastav prefix (a nebo nech jaký je). Pokud žádný nepoužíváš, doporučuji https://fortawesome.github.io/Font-Awesome/.

:) Callback pro inline editaci si musíš nastavit. Příklad (tuším, že to tak NDBT má):

$ndb = $this->ndb;
$grid->setEditableCallback(function($id, $value) use ($ndb) {
	$ndb->table('user')->update(['name' => $value])->where('id = ?', $id);
});

flamengo

Ahoj, použiji composer dle dokumentace:

composer require ublaboo/datagrid

A nic. Než se mi okno zavře, postřehnu nějakou červenou hlášku, ale nestihnu ji. Jak mám instalovat? Jak zjistit, co se composeru nelíbí?

CZechBoY

@flamengo pust to v konzoli/terminálu (na windows příkaz cmd)

flamengo

@CZechBoY Bohužel nerozumím řeči tvého kmene.

Mysteria

Máš si otevřít na Windows Příkazový řádek, přes cd se proklikat do potřebný složky a pak tam hodit ten příkaz. Pak ti tam ta chybová hláška zůstane otevřená a neproblikne jenom.

flamengo

Díky díky, tak už vím, že mé PHP 5.5.8 na to nestačí e je třeba minimálně 5.5.9.