※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。
前回の初めての Lightning Web コンポーネント開発でOCIを操作してみる（開発方法編）に続いて、今回は作成したUIの見た目とlwcとApexを紹介します。
ソースコード
完成したUI
選択したローケーショングループ内のSKUを検索できます。
各ロケーションに対して在庫数などの編集を行えます。
将来の在庫の一覧も表示します。
実装の概要図
実装したコンポーネント
c-oci-inv-reg-location-group
全てのコンポーネントを包含している最上位のコンポーネントです。
ロケーションの検索や検索結果の保持をここで行っています。
また在庫更新リクエストジョブのステータスの取得もここで行っています。
c-oci-inv-reg-inventory-list
このコンポーネントは在庫情報をリスト表示するシンプルなコンポーネントです。
コンポーネント内での動的な動きはないので、かなり静的なコンポーネントと言えるかと思います。
c-oci-inv-reg-location-update-form-modal
在庫更新リクエストを行うフォームを包含するモーダルです。
c-oci-inv-reg-modal
将来在庫の表示や c-oci-inv-reg-location-update-form-modal 内で利用する汎用的なモーダルコンポーネントです。
c/ociInvRegUtils
このコンポーネントはUIのためのものではなく、各コンポーネントで共通で使用するユーティリティメソッド群です。
実装したApexクラス
OciInvRegController
PlatformとのやりとりはこのApex コントローラーのみです。
OciInvRegUuid
UUIDを生成する標準のツールがなさそうだったので、https://github.com/jongpie/ApexUuid から拝借させていただきました。