3. fejezet: Kanban nézet testreszabása

We have gained an understanding of the numerous capabilities offered by the web framework. As a next step, we will customize a kanban view. This is a more complicated project that will showcase some non trivial aspects of the framework. The goal is to practice composing views, coordinating various aspects of the UI, and doing it in a maintainable way.

Bafiennek volt a legjobb ötlete valaha: egy kanban nézet és egy lista nézet keveréke tökéletes lenne az Ön igényeinek! Röviden, azt szeretné, ha a CRM kanban nézet bal oldalán egy ügyfél lista lenne. Amikor rákattint egy ügyfélre a bal oldali sávban, a jobb oldali kanban nézet csak az adott ügyfélhez kapcsolódó leadeket jeleníti meg.

Cél

Solutions

The solutions for each exercise of the chapter are hosted on the official Odoo tutorials repository.

1. Hozzon létre egy új kanban nézetet

Mivel testre szabjuk a kanban nézetet, kezdjük azzal, hogy kiterjesztjük azt, és használjuk a kiterjesztésünket a CRM kanban nézetében.

1. Hozzon létre egy új, üres komponenst, amely kiterjeszti a KanbanController komponenst a @web/views/kanban/kanban_controller fájlból.

2. Hozzon létre egy új nézetobjektumot, és rendeljen hozzá minden kulcsot és értéket a kanbanView-ból a @web/views/kanban/kanban_view fájlból. Írja felül a Controller kulcsot az újonnan létrehozott vezérlővel.

3. Regisztrálja a nézetek nyilvántartásában awesome_kanban néven.

4. Frissítse a crm kanban arch-ot a awesome_kanban/views/views.xml fájlban, hogy használja a kiterjesztett nézetet. Ezt úgy teheti meg, hogy megadja a js_class attribútumot a kanban csomópontban.

Lásd még

Példa: Hozzon létre egy új nézetet egy már létező kiterjesztésével

2. Hozzon létre egy CustomerList komponenst

Szükségünk lesz egy ügyféllista megjelenítésére, így akár létre is hozhatjuk a komponenst.

1. Hozzon létre egy CustomerList komponenst, amely egyelőre csak egy div-et jelenít meg némi szöveggel.

2. Rendelkeznie kell egy selectCustomer prop-pal.

3. Hozzon létre egy új sablont, amely kiterjeszti (XPath) a kanban vezérlő sablont web.KanbanView, hogy hozzáadja a CustomerList-et a kanban renderelő mellé. Adjon neki egy üres függvényt selectCustomer néven egyelőre.

   Javaslat

   Használhatja ezt az xpath-ot a sablonban, hogy hozzáadjon egy div-et a renderelő komponens elé.

   <xpath expr="//t[@t-component='props.Renderer']" position="before">
      ...
   </xpath>
   

4. Alosztályozza a kanban vezérlőt, hogy hozzáadja a CustomerList-et az alkomponenseihez.

5. Győződjön meg róla, hogy látja a komponensét a kanban nézetben.

Lásd még

Sablon öröklés

3. Adatok betöltése és megjelenítése

1. Módosítsa a CustomerList komponenst, hogy az onWillStart során lekérje az összes ügyfél listáját.

2. Jelenítse meg a listát a sablonban t-foreach segítségével.

3. Amikor egy ügyfelet kiválasztanak, hívja meg a selectCustomer függvény propot.

Lásd még

• Példa: rekordok lekérése egy modellből

4. Frissítse a fő kanban nézetet

1. Valósítsa meg a selectCustomer-t a kanban vezérlőben a megfelelő domain hozzáadásához.

   Javaslat

   Mivel nem triviális a keresési nézettel való interakció, itt van egy kódrészlet a szűrő létrehozásához:

   this.env.searchModel.createNewFilters([{
         description: partner_name,
         domain: [["partner_id", "=", partner_id]],
         isFromAwesomeKanban: true, // this is a custom key to retrieve our filters later
   }])
   

2. Több ügyfélre kattintva láthatja, hogy a régi ügyfélszűrő nem kerül lecserélésre. Győződjön meg róla, hogy egy ügyfélre kattintva a régi szűrőt az új váltja fel.

   Javaslat

   Ezt a kódrészletet használhatja az ügyfélszűrők lekérésére és váltására.

   const customerFilters = this.env.searchModel.getSearchItems((searchItem) =>
         searchItem.isFromAwesomeKanban
   );
   
   for (const customerFilter of customerFilters) {
      if (customerFilter.isActive) {
            this.env.searchModel.toggleSearchItem(customerFilter.id);
      }
   }
   

3. Módosítsa a sablont, hogy a CustomerList selectCustomer prop valódi funkciót kapjon.

Megjegyzés

Használhatja a Symbol-t annak biztosítására, hogy az egyedi isFromAwesomeKanban kulcs ne ütközzön más kód által az objektumhoz hozzáadott kulcsokkal.

5. Csak azokat az ügyfeleket jelenítse meg, akiknek van aktív rendelésük

Van egy opportunity_ids mező a res.partner-en. Engedjük meg a felhasználónak, hogy szűrje az eredményeket legalább egy lehetőséggel rendelkező ügyfelekre.

1. Add an input of type checkbox in the CustomerList component, with a label „Active customers” next to it.

2. A jelölőnégyzet értékének megváltoztatása szűrje az ügyfelek listáját.

6. Adjon hozzá egy keresősávot az ügyféllistához

Adjon hozzá egy beviteli mezőt az ügyféllista fölé, amely lehetővé teszi a felhasználó számára, hogy beírjon egy karakterláncot, és az ügyfeleket a nevük alapján szűrje.

Javaslat

Használhatja a fuzzyLookup függvényt a @web/core/utils/search modulból a szűrés végrehajtásához.

Lásd még

• Kód: A fuzzylookup függvény

• Példa: A fuzzyLookup használata

7. Refaktorálja a kódot t-model használatára

Az előző két feladat megoldásához valószínűleg eseményfigyelőt használt a bevitelekhez. Nézzük meg, hogyan lehetne ezt deklaratívabb módon megoldani a t-model direktívával.

1. Győződjön meg róla, hogy van egy reaktív objektum, amely azt jelzi, hogy a szűrő aktív (valami ilyesmi: this.state = useState({ displayActiveCustomers: false, searchString: ''})).

2. Módosítsa a kódot, hogy hozzáadjon egy displayedCustomers gettert, amely visszaadja az aktuálisan aktív ügyféllistát.

3. Módosítsa a sablont t-model használatára.

8. Lapozza az ügyfeleket!

1. Adjon hozzá egy pager a CustomerList-hez, és csak az első 20 ügyfelet töltse be/renderelje.

2. Amikor a lapozó megváltozik, az ügyféllistának ennek megfelelően frissülnie kell.

Ez valójában elég nehéz, különösen az előző feladatban végzett szűréssel kombinálva. Számos szélsőséges esetet kell figyelembe venni.