この記事は 【 Bubble で作るシンプルなマッチングサイト（初級者向け） 】の第11回です。 本シリーズが初めての方は、以下の記事でコンテンツの説明をしていますので、ご確認いただければと思います。
デザインの細かい部分については割愛しています。不明な部分があれば、こちらのエディタで確認してみてください。
今回は、クライアント側の仕事管理（job-offers）と募集管理（job-offer）のページを作成していきます！
1. 仕事管理（job-offers）の作成
job-offers の出来上がりは下図のようなイメージです。
クライアント用のメニューにある「仕事管理」、もしくはダッシュボードの「クライアント(発注者)」タブに表示されている一覧から遷移することができ、ログインしているクライアントが「募集中」の仕事一覧と、「募集終了」の仕事一覧をタブで切り替えて表示することができます。
1.1. job-offers ページの Design
タブの切り替えを使用したページを使いたいので、過去に作成した「proposals」を Clone from して「job-offers」を作成します。
ページタイトルを「仕事管理」に修正しておきます。
タブに表示している Option sets の値を proposals で設定していた「Progress」から「Status」に変更して、「募集中」と「募集終了」とに変更します。
次に「募集中」のタブが選択されていた場合には、Reusable element の「List Offer Jobs All」が表示されるように修正します。ここでは proposals からコピーしてきたので、Group Proposal を「Group Offer」とリネームして、List Entry Jobs All の Reusable element を「List Offer Jobs All」に差し替えました。
「募集終了」のタブが選択された場合は、同様に Group Contract を「Group Close」にリネームしておき、List Contract Jobs All の Reusable element を「List Close Jobs All」に差し替えます。
1.2. job-offers ページの Workflow
job-offers の Workflow は コピー元の proposals のまま使用できますので、設定は特に必要ありません。Bubble では、ページ名やボタン名などの Element 名さえ修正すれば、Workflow 側の名称も 自動で反映してくれますので便利ですね。
1.3. job-offers ページへの遷移設定
job-offers ページが作成できたので、過去に作成していた遷移設定を修正しておきましょう。設定するのは以下3か所です。
① Reusable elemen「Menu 」の「仕事管理」がクリックされた場合。
② Reusable element「List Offer Jobs Top3」の「 →すべて表示する」がクリックされた場合。
③ Reusable element「List Close Jobs Top3」の「 →すべて表示する」がクリックされた場合。この場合ページパラメータの値は「tab=2」となります。
2. 募集管理（job-offer）の作成
次に募集管理（job-offer）ページを作成していきます。出来上がりは以下のようなイメージです。
このページは、クライアントが募集した仕事に対して、応募してきたワーカーや契約したワーカーについてを確認することができる管理画面です。
2.1. job-offer ページの Design
先ほどと同じように proposal を利用して「job-offer」を新規作成します。
不要な部分を削除して、ページタイトルを「募集管理」に修正しておき、ページの Type of content を「Job」に設定しておきます。
ページの見出しテキストを Row layout の Group で囲み、job ページへ遷移するための「この仕事の詳細を見る」Button を作成してまとめておきます。
次に Reusable element の「Job Summary」を配置して、Data source を「Current page's Job」としておきます。
Column の Group をひとつ作成（ここでは Group Job）して、『「Current page's Jobs's Title」に応募、契約とした人』とした Text を配置します。
Text の下には、応募・契約した人の一覧を表示する Repeating group を配置します。Repeating group の Data source には「Current page's Job's Contact」として、クライアントとワーカーがやり取りした Contact type の情報をセットしておきます。
Repeating group の中に表示する情報は、下図のように Contact type から取得できる必要な情報をセットしていきます。
ここでは、ステータス（Progress フィールド）、ワーカー情報（Member フィールドの値から クライアント自身をマイナスした User の情報）、最新のメッセージ（最後に登録された Message type の Body）、更新日（最後に登録された Message type の Create date）を表示し、最後に「詳細を見る」Button を配置しておきました。
次に、応募も契約もない仕事の場合は、「現在、まだ応募はありません。」としたメッセージが表示されるように Text をひとつ配置しておきます。
Conditional で「RepeatingGroup Contact’s List of Contacts:count is 0」として、Contact type が 0 件の時に Text が表示されるように設定しておきます。ページロード時は非表示となるように Layout で This element is visible on page load のチェックを「オフ」にしておきましょう。
2.2. job-offer ページの Workflow
次に Workflow を設定していきます。
ページ上部の「この仕事の詳細を見る」Button がクリックされた場合は、job ページに遷移するようにします。Data to send には「Current page's Job」をセットしておきましょう。
次に、Repeating group の中に配置した「詳細を見る」Button がクリックされた場合は、Repeating group で取得した Contact type を Data to send にセットして引き渡して contact ページに遷移するように設定しておきます。
最後にワーカー情報の Group がクリックされた場合は、ワーカーの紹介ページへ遷移するように Go to page... だけ設定しておきます。
2.3. job-offer ページへの遷移設定
では、最後に job-offer ページへの遷移設定を追加しておきましょう。修正箇所は以下の3か所です。
① Reusable element「Job Card」でクライアント自身が自分の仕事タイトル Text をクリックした場合。（クリックイベントの Only when を「Job Card's Job's Client is Current User」としておきます。）Data to send では、Job Card にセットされている Job を設定します。
② contact ページで「募集管理を見る」Button がクリックされた場合。Data to send では、contact ページに作成している Custom state の Current Job の値をセットします。
③ job ページで「募集管理画面へ」Button がクリックされた場合。Data to send では、job ページの Current’s page Job をセットします。
今回はここまでです。Preview して、各ページを動作確認してみてくださいね！
次回
では、次回はクライアントの管理画面「契約ワーカー」ページを作成してきます！ここまでお読みいただきありがとうございました！それでは、次回もどうぞよろしくお願いいたします😌
コンテンツ
０：Bubble で作るシンプルなマッチングサイト（初級者編）
１０：【クライアント・ワーカー共通】マイページとお知らせページの作成
１３：【クライアント・ワーカー共通】クライアント紹介、ワーカー紹介ページの作成
※全11回予定でしたが、全13回に変更になりました。
