Prekreslenie Datagridu pomocov XHR volania (handlera) vo VueJS
- KristianSubweb
- Člen | 146
Ahojte chcel by som sa opýtať mám nasledujúci problém. Chcel by som prekresliť Datagrid za pomoci volania XHR. Skúšal som už viacero možnosti no ani jedna nevyvolá prekreslenie Datagridového snippetu.
Toto je jedno s riešení ktoré som skúšla:
public function handleChangeOfYear(int $year)
{
$data = $this->orderReceiptService->getAllByCompanyId($this->user->getCompanyId());
// FILTER OF YEAR
if($year){
$data->andWhere("YEAR(ori.datein) = :year")->setParameter("year", $year);
}
// Redraw orderReceip datagrid
$this["orderReceiptGrid"]->setDataSource($data);
$this["orderReceiptGrid"]->redrawControl();
}
Funkcia ktorá volá handle funkciu s tým že mu pošlem rok ktorý chcem nastaviť
async fetchDataForSelectedData(year){
await axios.get(URL+"admin/invoice/order-receipt/default?year="+year+"&do=ChangeOfYear")
.finally(() => {
this.spinner = false
});
},
Datagrid
public function createComponentOrderReceiptGrid($name) {
...
$data = $this->orderReceiptService->getAllByCompanyId($companyId);
if ($this->orderReceiptType && $this->orderReceiptType != 0) { //Všetky
$data->andWhere("ori.type = :type")->setParameter("type", $this->orderReceiptType);
}
$datagrid = $this->orderReceiptGridFactory->getOrderReceiptDatagrid($this, $data, $name, $payVat, $userFilter, $dir_checkbox, $dir_action_template, $this->orderReceiptType);
return $datagrid;
}
Jedno s ďalších riešení ktoré som skusil je že som si v presenter
vytvoril premennu public $actualShowYear.
Tu som následne aplikoval do podmienky v samotnej inicializácii Datagridu
public function createComponentOrderReceiptGrid($name) {
...
// FILTER OF YEAR
if($this->actualShowYear){
$data->andWhere("YEAR(ori.datein) = :year")->setParameter("year", $this->actualShowYear);
}
$datagrid = $this->orderReceiptGridFactory->getOrderReceiptDatagrid($this, $data, $name, $payVat, $userFilter, $dir_checkbox, $dir_action_template, $this->orderReceiptType);
return $datagrid;
}
Handle funkcia vyzerala nasledovne:
public function handleChangeOfYear(int $year)
{
$this->actualShowYear = $year;
// Redraw orderReceip datagrid
$this["orderReceiptGrid"]->redrawControl();
}
No ani toto nezabralo, neriešil už niekto niečo podobné? Za každu radu budem veľmi vďačný.
- KristianSubweb
- Člen | 146
MajklNajt napsal(a):
a ako ten snippet prekresluješ na frontende? ty síce voláš handle, ale nikde ten payload nespracúvaš…
Aha jasne rozumiem tomu, len taka doplňujúca otázka ako som schopný ten payload mu vratiť? Rozumiem že ak mám napr na row handle delete akciu priamo v datagride a má class .ajax tak to tie dáta rovno aj vráti. No ako by som mal postupovať pri custom riešení mimo použitia ajax class. Ešte taka mala poznámka $this->isAjax() vráti false ak ho volam cez axios.
Toto je handle ktorý volám klasicky za pomoci .ajax class v tom BTN delete a to prekresli ale priamo ten payload zabezpečí ako som pozeral zrejme ten datagrid. No pri tom custom neviem ako tie data v tom formate payload dostať.
/**
* @param string $uuid
* @return void
*/
public function handleDeleteProjectCategory(string $uuid)
{
if ($this->isAjax()) {
$projectCategory = $this->entityManager->getTaProjectCategoryRepository()
->getByIdAndCompany($uuid, $this->getUserEntity()->getCompany());
if ($projectCategory) {
$this->entityManager->getTaProjectCategoryRepository()->delete($projectCategory);
$this->redrawDataGrid("projectCategoryDataGrid");
}
}
}
Editoval KristianSubweb (6. 3. 2023 16:34)
- mskocik
- Člen | 65
KristianSubweb napsal(a):
$this->isAjax() vráti false ak ho volam cez axios.
Lebo neposielaš header x-http-requested-with
, na základe
ktorého sa rozlišuje ajax request. Viď metóda isAjax()
v Nette\Http\Request
Toto je handle ktorý volám klasicky za pomoci .ajax class v tom BTN delete a to prekresli ale priamo ten payload zabezpečí ako som pozeral zrejme ten datagrid. No pri tom custom neviem ako tie data v tom formate payload dostať.
Custom payload môžeš pridať napríklad takto:
// signal handler v presenteri
public function handleDeleteProjectCategory(string $uuid)
{
$pl = $this->getPayload(); // alebo $this->payload
$pl->myCustomData = 'my custom data';
// ak chces vynutene poslat payload
$this->sendPayload();
}
U teba ale bude asi skôr problém v tom, že daný request nie je spracovaný ako ajaxový. Ale nepíšeš, akú odpoveď dostávaš, takže len hádam
- KristianSubweb
- Člen | 146
mskocik napsal(a):
KristianSubweb napsal(a):
$this->isAjax() vráti false ak ho volam cez axios.
Lebo neposielaš header
x-http-requested-with
, na základe ktorého sa rozlišuje ajax request. Viď metódaisAjax()
vNette\Http\Request
Toto je handle ktorý volám klasicky za pomoci .ajax class v tom BTN delete a to prekresli ale priamo ten payload zabezpečí ako som pozeral zrejme ten datagrid. No pri tom custom neviem ako tie data v tom formate payload dostať.
Custom payload môžeš pridať napríklad takto:
// signal handler v presenteri public function handleDeleteProjectCategory(string $uuid) { $pl = $this->getPayload(); // alebo $this->payload $pl->myCustomData = 'my custom data'; // ak chces vynutene poslat payload $this->sendPayload(); }
U teba ale bude asi skôr problém v tom, že daný request nie je spracovaný ako ajaxový. Ale nepíšeš, akú odpoveď dostávaš, takže len hádam
Ono takto ten koment na ktorý si reagoval čo som tam dal ten príklad na ten delete handle tak to som sem dal preto že ak tento delete handle volam pomocov btn s class ajax tak napriek tomu že nemá payload tak to prekreslí ten contributte datagrid. Dik ten Ajax mi už identifikuje myslím funkcia this->isAjax().
No stále mám problém s tým že ak mám externé XHR volanie cez AXIOS na handle funkciu a zaroveň funkcia handle obsahuje prekreslenie datagridu pomocov $this[„orderReceiptGrid“]->redrawControl(); tak hore @MajklNajt spomínal že nevraciam data cez payload. Ale moja otázka znie ako dostanem payload data vo forme ako potrebuje datagrid pre svoje prekreslenie ako snippetu?
- mskocik
- Člen | 65
Úprimne nie som schopný odpovedať na tú otázku, lebo mi príde, že je tam veľmi veľa premenných, prečo ti to nefunguje. Každopádne nemal by si potrebovať nič robiť, Nette by to malo spraviť automaticky – zavoláš signál, prekreslíš komponentu, vráti ti to JSON so snippetmi, ktoré sa majú prekresliť.
Je napríklad otázne:
- ako vyzerá request (vrátane headerov) na ten signál
- akú dostávaš response
Kebyže vidieť viac potrebného kódu, dalo by sa ti poradiť lepšie.
- jiri.pudil
- Nette Blogger | 1032
To, že se ze serveru odešle payload, zajišťuje Nette automaticky. To, že se zpracuje v prohlížeči, už ale ne, to si musíš buďto implementovat sám, nebo použít knihovnu, jako je třeba Naja, která to řeší za tebe.
Z toho, co píšeš („handle ktorý volám klasicky za pomoci .ajax class v tom BTN delete a to prekresli“), jsem pochopil, že nějaké takové řešení nasazené máš, tak jej použij namísto axiosu i pro ten custom request. Např. Naja na to má metodu makeRequest().