第3章：かんばんビューをカスタマイズする

我々は、Webフレームワークによって提供される多くの機能について理解を得てきました. これは、フレームワークのいくつかの些細な側面を紹介する、より複雑なプロジェクトです。 目標は、ビューを構成し、UIの様々な側面を調整し、維持可能な方法でそれを行うことです。

Bafienはこれまで最高のアイデアを持っていました:カンバンビューとリストビューの組み合わせは、あなたのニーズに最適です! 一言で言えば、CRMかんばんビューの左側にある顧客のリストが欲しいということです。 左側のサイドバーでお客様をクリックすると、 右側のかんばんビューはフィルターで絞り込まれています

目標

../../../_images/overview1.png

章の各演習の解決策は、 official Odoo tutorials repository にホストされています。

1. Create a new kanban view

かんばんビューをカスタマイズしているので、拡張機能をCRMのかんばんビューで使うことから始めましょう。

  1. @web/views/kanban/kanban_controller から KanbanController コンポーネントを拡張する新しい空のコンポーネントを作成します。

  2. 新しいビューオブジェクトを作成し、 @web/views/kanban/kanban_view から kanbanView からすべてのキーと値を割り当てます。 新しく作成したコントローラーを入れて、Controller キーを上書きします。

  3. awesome_kanban の下のビューレジストリに登録します。

  4. 拡張ビューを使用するには、 awesome_kanban/views/views.xml の crm かんばんアーチを更新してください。 これは、kanban ノードで js_class 属性を指定することで行うことができます。

関連項目

例: 既存の を拡張して新しいビューを作成します。

2. CustomerListコンポーネントを作成

顧客リストを表示する必要がありますので、コンポーネントを作成することもできます。

  1. CustomerList コンポーネントを作成します。これは div` のみが表示され、今はテキストが表示されます。

  2. selectCustomer プロパティが必要です。

  3. カンバンコントローラテンプレート webを拡張する新しいテンプレート(XPath)を作成します。 anbanView は、kanban レンダラーの横に CustomerList を追加します。空の関数を selectCustomer として与えます。

    ちなみに

    テンプレート内でこの xpath を使用して、レンダラーコンポーネントの前に div を追加できます。

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

  4. 「CustomerList」をサブコンポーネントに追加するためのカンバンコントローラをサブクラス化します。

  5. コンポーネントがかんばんビューに表示されていることを確認します。

../../../_images/customer_list_component.png

関連項目

Template inheritance

3. データの読み込みと表示

  1. CustomerList コンポーネントを変更して、onWillStart 内のすべての顧客のリストを取得します。

  2. テンプレートのリストを t-foreach で表示します。

  3. 顧客が選択されるたびに、 selectCustomer 関数プロパティを呼び出します。

../../../_images/customer_data.png

関連項目

4. メインかんばんビューを更新

  1. 適切なドメインを追加するために、「selectCustomer」をカンバンコントローラに実装します。

    ちなみに

    検索ビューと操作するのは簡単ではないので、フィルタを作成するためのスニペットは次のとおりです。

    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. 複数の顧客をクリックすると、古い顧客フィルターが置き換えられていないことがわかります。 顧客をクリックすることで、古いフィルターが新しいフィルターに置き換えられることを確認してください。

    ちなみに

    このスニペットを使用して顧客フィルタを取得し、それらを切り替えることができます。

    const customerFilters = this.env.searchModel.getSearchItems((searchItem) =>
      searchItem.isFromAwesomeKanban
);

for (const customerFilter of customerFilters) {
   if (customerFilter.isActive) {
         this.env.searchModel.toggleSearchItem(customerFilter.id);
   }
}

  3. テンプレートを変更して、CustomerList selectCustomer プロパティに実際の関数を与えます。

注釈

Symbol を使用して、カスタム isFromAwesomeKanban キーがオブジェクトに追加されるキーと衝突しないようにすることができます。

../../../_images/customer_filter.png

5. アクティブな注文を持っている顧客のみ表示

res.partner には opportunity_ids フィールドがあります。少なくとも1つの機会で顧客の結果をフィルタリングできます。

  1. CustomerList コンポーネントに型チェックボックスの入力を追加し、その横に「アクティブな顧客」というラベルを付けます。

  2. チェックボックスの値を変更すると、顧客リストをフィルターすることができます。

../../../_images/active_customer.png

6. 顧客リストに検索バーを追加

顧客リストの上に、ユーザーが文字列を入力し、表示される顧客を名前に応じてフィルタリングできる入力を追加します。

ちなみに

@web/core/utils/search 関数から fuzzyLookup を使用してフィルタを実行できます。

../../../_images/customer_search.png

関連項目

7. `t-model`を使うコードをリファクタリングします。

前の 2 つの演習を解決するには、入力にイベントリスナーを使用した可能性があります。 t-model ディレクティブを使用して、より宣言的な方法でそれを行う方法を見てみましょう。

  1. フィルターがアクティブであるという事実を表すリアクティブオブジェクトがあることを確認してください ( this.state = useState({ displayActiveCustomers: false, searchString: ''}))。

  2. コードを変更して、現在アクティブな顧客リストを返すゲッター`displayedCustomers`を追加します。

  3. t-model を使用するテンプレートを変更します。

8. お客様をページネーション!

  1. CustomerList に :ref:`pager <frontend/pager>を追加し、最初の 20 人の顧客のみをロード/レンダリングします。

  2. ページャーが変更されるたびに、顧客リストはそれに応じて更新されます。

これは実際にはかなり難しく、特に前回の演習で行われたフィルタリングと組み合わせています。 考慮すべき多くのエッジケースがあります。

../../../_images/customer_pager.png