neobnoví se snippet v komponentě

@m.brecher

moc děkuji, tohle mě funguje, ale ne v té includované šabloně kde to potřebuji obnovit

basic.latte

{snippetArea stepWrapper}
        {include "step".$curentStep.".latte"}
{/snippetArea}

step1.latte

{snippet uploadedVideo}
    <div class="row">
        <div class="col-12">
        {if !empty($items)}
           .....
        {/if}
        </div>
    </div>
{/snippet}

tam jsem to zkoušel se snippety, bez snippetů, se snippet areou a nedokázal jsem to přemluvit. Pokud ale snippet přesunu z té zanořené šablony a po tvé radě.

@m.brecher

mockrát díky! Tak jsem díky tomu zjistil, že se mi v tom handlu (jinak to bylo právě v pohodě tak jsem ani nepojal podezření) ne úplně dobře předávala ta nejdůležitější reference (která nastavuje tu includovanou sub-šablonu) a díky tomu se to nevykreslovalo. Teď už je to ok.

@MikKuba

Nette Ajax snippety dokáží hladce překreslovat po aktualizaci v databázi a je zbytečné to řešit pomocí jQuery nekonečným cyklem každých 5 sekund.

Uživatel klikne na nějaké tlačítko v komponentě a ajaxem se provede update stavu objednávky v databázi, následně jenom překreslíme šablonu objednávky.

Co v kódu nevidím:

• kde jsou odkazy/formulář v šabloně objednávky, kde se odesílá request pro aktualizaci objednávky ?
• kde přesně se provádí aktualizace objednávky v modelu

Komponenta DetailViewFactory

• získá v konstruktoru datový objekt Orders (z presenteru), který uloží do dvou propert $order + $orderData
• v metodě render() předá $orderData do šablony – to je OK
• v metodě actualize() která se volá ve zpracování signálu handleActualizeOrder() získá do stejné property z presenteru zase $orderData – to je divné

Dle mého názoru je struktura presenteru a komponenty špatně postavená. Metoda handleActualizeOrder() bych řekl, že je zbytečná, úplně bych ji smazal, stejně jako pomocné skripty jQuery, které ji volají.

Pojďme najít v kódu presenteru – pošli KOMPLETNÍ kód presenteru!) místo, kde se obsluhuje request na změnu v objednávce + najděme místo, kde uživatel na něco kliká, čím se mění stav objednávky – to bude nějaký formulář, nebo nějaké GET odkazy – pošli kompletní kód šablony komponenty a jestli tam je nějaký formulář tak celý formulář!. Pak už vymyslíme nějaké jednoduché řešení překreslení.

Poznámka: Interface IDetailViewFactory by měl v návratovém typu vracet DetailView komponentu, protože je divné, když se factory i komponenta jmenují stejně. Komponenta by neměla mít suffix Factory. Ono to funguje, ale je to v rozporu s best practice Nette. Všimni si – metoda createComponentDetailView() by měla vracet komponentu DetailView, ale vrací DetailViewFactory.

Oprava Interface:

interface IDetailViewFactory
{
   // anotace jsou zbytečné - máš otypované parametry i return type - anotace smazat!
	public function create(User $user, Orders $order): DetailView;  // změna return type
}

Oprava komponenty:

class DetailView extends Control   // přejmenujeme
{

    public $onError = [];

    public $onSuccess = [];

    private $user;
    private Orders $order;

    private $orderData;

    public function __construct(
        User $user,
        Orders $order,
        private OrderFacade $orderFacade,
        private Request $request,
    )
    {
        $this->user = $user;
        $this->order = $order;
        $this->orderData = $this->order;
    }


    public function render() {
        $this->template->setFile(__DIR__ . '/../templates/Detail/view.latte');
        $this->template->userData = $this->user;
        $this->template->order = $this->orderData;
        $this->template->render();
    }

   // smazat
   // public function actualize(Orders $order)
   // {
   //     $this->orderData = $order;
  //  }

    // metoda getData() je nadbytečná - tato data předává komponentě presenter v konstruktoru - smazat !!
    // public function getData(){
   //     return $this->orderFacade->findOneBy(['orderCode' => $this->order->getOrderCode()]);
   // }
}

oprava presenteru:

public $shop = null;
public $order = null;

    public function actionDetail($url, $code)
    {
        $this->shop = $this->userFacade->findOneBy(['url' => $url]);
        if(!$this->shop){
            $this->error('Obchod nebyl nalezen');
        }
        $this->order = $this->orderFacade->findOneBy(['orderCode' => $code]);
        if(!$this->order){
            $this->error('Objednávka nebyla nalezena');
        }
    }

    protected function createComponentDetailView()
    {
        return $this->detailViewFactory->create($this->shop, $this->order);
    }

// smazat - je bezpochyby zbytečná
//   public function handleActualizeOrder()
//    {
//        $this->order = $this->orderFacade->findOneBy(['orderCode' => $this->order->getOrderCode()]);
//
//        if ($this->isAjax()) {
//            $this['detailView']->actualize($this->order);
//            $this->redrawControl('wrapper');
//            $this->redrawControl('orderDetailView');
//        }
//    }

Pošli ty kompletní kódy a najdeme kam umístit invalidaci snippetů !

Editoval m.brecher (5. 8. 4:12)

@MikKuba

Samotný stav pak přepíná admin v přehledu

Aha, potom je to úplně jinak než jsem z neúplného popisu pochopil. Změna stavu objednávky se provádí v jiném prohlížeči a v presenteru který Jsi poslal se cyklicky javascriptem vyvolává překreslení komponenty, aby zobrazovala aktuální stav. Nelze vyvolat překreslení detail komponenty v okamžiku, kdy se provádí vlastní update v databázi a použití metody handleAktualizeOrder() spouštěné cyklicky signálem z javascriptu je dobrá cesta.

Nicméně i tak platí, že kód presenteru a komponenty není dobře sestaven. Budu si to muset pořádně rozmyslet a pak pošlu navrženou opravu.

Uděláme to jak to máš teď, ale sestavíme kód presenteru a komponenty nějak logicky. Javascript bude ajaxem spouštět handle v presenteru, tím se spouští současně celá akce ale na výstup se pošlou jenom invalidované snippety. Je zbytečné invalidovat snippet ‚wrapper‘ a současně i komponentu.

Editoval m.brecher (8. 8. 5:39)

@MikKuba

Tady jsem něco objevil – určitě není dobře kód překreslující snippety v metodě presenteru handleActualizeOrder():

public function handleActualizeOrder()
    {
        $this->order = $this->orderFacade->findOneBy(['orderCode' => $this->order->getOrderCode()]);

        if ($this->isAjax()) {
            $this['detailView']->actualize($this->order);
            $this->redrawControl('wrapper');		// to je OK
            $this->redrawControl('orderDetailView');  // to je špatně
        }
    }

Nelze překreslovat snippet komponenty ‘orderDetailView’ z presenteru, z presenteru můžeš překreslit snippet šablony presenteru, nebo CELOU komponentu voláním $this->getComponent(‘myComponent’)->redrawControl().

Není ale potřeba překreslovat současně obalující snippet a současně komponentu, mělo by stačit překreslit jen obalující snippet. Zkus řádek $this->redrawControl(‘orderDetailView’); odstranit a uvidíš. Pravděpodobně tam bude ještě jiná chyba, ale tohle bychom měli opravit.

@MikKuba

Tak to mám vyřešené – napsal jsem to znovu s použitím ajax knihovny Naja. Zde je testovací kód:

Presenter

class OrderPresenter extends UI\Presenter
{
    public function __construct(private OrderControl $orderControl)  // komponentu jako službu
    {}

    public function createComponentOrderControl(): OrderControl
    {
        return $this->orderControl->setId(1);  // 1 je testovací $id
    }

    public function handleRefreshOrder(): void
    {
        $this['orderControl']->redrawControl();  // překreslení komponenty OrderControl
    }

}

šablona presenteru default.latte – blok s komponentou

{block 'content'}
    <nav>
        <a n:href="this">reload</a>
        <a n:href="refreshOrder!" class="ajax">updateOrder</a>  {* testovací odkazy *}
    </nav>

    {control 'orderControl'}

{/block}

šablona presenteru default.latte – blok s javascriptem – ajaxový endless loop

{block 'head'}
<script src="https://unpkg.com/naja@3/dist/Naja.min.js"></script>  // Naja

<script>
    class Refresher  // třída pro nekonečný refresh - signálem refreshOrder
    {
        #url
        #timeMs

        constructor(url, timeMs)
        {
            this.#url = url
            this.#timeMs = timeMs
        }

        init()
        {
            this.#wait(this.#timeMs)
                .then(() => {
                    naja.makeRequest('GET', this.#url)
                    this.init()   // recursive call - endless loop
                })
        }

        #wait(ms)
        {
            return new Promise((resolve) => setTimeout(resolve, ms))
        }

    }

    refresher = new Refresher({$presenter->link('refreshOrder!')}, 700)
    document.addEventListener('DOMContentLoaded', () => {
        refresher.init()
        naja.initialize()
    })
</script>

{/block}

Komponenta:

class OrderControl extends Control
{
    private int $id;

    public function __construct(private OrderModel $orderModel)  // model jako služba
    {}

    public function setId(int $id): self   // id z presenteru
    {
        $this->id = $id;
        return $this;
    }

    public function render(): void
    {
        $this->template->order = $this->orderModel->getOne($this->id);
        $this->template->render(__DIR__.'/orderControl.latte');
    }

Model pro testování

class OrderModel
{
    public function __construct(private Explorer $explorer)
    {}

    public function getOne(int $id): ?ActiveRow
    {
        return $this->explorer->table('order')->get($id);
    }
}

testovcí šablona komponenty orderControl.latte

{snippet 'control'}
    <p>objednávka: {$order->title}</p>
{/snippet}

Je to otestované a funguje to. Překreslení je úplně jednoduché. Překreslení se vyvolává signálem z javascriptu a volá se handleRefreshOrder() v presenteru – ten pouze invaliduje celou komponentu.

Jak to funguje ?

Javascript spustí ajaxem handle v presenteru – ten pouze invaliduje komponentu – aby se později překreslil její snippet.

Spouští se i akce presenteru, ta zde ale nedělá nic, pouze vykreslí šablonu default.latte. Kdyby ale v presenteru byla metoda akce, tak se spustí.

Šablona default.latte, která vykresluje komponentu – předá požadavek na vytvoření komponenty do presenteru.

Presenter volá createComponentOrderControl() , ten vytvoří komponentu (já mám komponentu jako službu, ale můžeš si ji vytvořit i přes factory).

Komponenta převezme settrem z presenteru $id, konstruktorem z di model a pošle čerstvá data do šablony.

Protože je request ajaxový a protože je komponenta invalidována, odešle Nette snippet komponenty s čerstvými daty.

Funguje to a není to složité.

Editoval m.brecher (8. 8. 5:40)