Prekreslenie Datagridu pomocov XHR volania (handlera) vo VueJS

KristianSubweb
Člen | 146
+
0
-

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ý.

MajklNajt
Člen | 502
+
+1
-

a ako ten snippet prekresluješ na frontende? ty síce voláš handle, ale nikde ten payload nespracúvaš…

KristianSubweb
Člen | 146
+
0
-

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
+
0
-

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()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
+
0
-

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óda isAjax()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

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
+
+1
-

Ú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
+
+1
-

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().