目次
今回作成するもの
【初心者向け】Googleカレンダーのクローン作成・前編の続きなので、まず前編をご覧ください。
前編：https://nocodedb.world/archives/6045
作成手順
1. エレメントの配置
突然ですが、前回作った予定確認用のPopupは削除します。こちらはもう使いません。
今回は前回作った予定作成用のPopupを利用して、更新と削除のワークフローを組むように設定しましょう。
ゴミ箱のアイコンだけPopup内の好きな場所に配置しましょう。
このときThis element is visible on page loadのチェックは外しておきます。
PopupのType of contentを空にし、custom stateを下記画像の通り、2つ設定します。（date型とcalendar型）
上記影響からpickerのinitial contentがうまく作動しなくなるので、Popupのstateに設定したdateを指定しなおします。
2. conditionalの設定
custom stateにdate型が入っているかいないかをトリガーに表示項目の変更が行えるように設定していきます。
まずはタイトルを作成から編集にします。
次に予定名と詳細をdateが入っていない際は、予定の編集としたいので、initialcontentにstateのcalendar型を指定し、対応したデータをそれぞれで表示させます。
上記の予定名、詳細と同じように開始終了時刻にもconditionalを設定していきます。
最後にボタンの文言も作成から更新に変更しておきましょう。
アイコンも同様にdate型が入っていない際は表示させると言うふうに記載します。
3. ワークフローの作成
まず日付をクリックした際の処理を変更します。
今まではPopupにデータを渡していましたが、それを廃止し、setstateでの値渡しを下記画像のように実装します。
ここでのポイントはcalendar型のデータに何も入れないということです。
これにより、stateのデータがあるなしを判断し、走らせるワークフローを分岐させることができます。
予定自体がクリックされた場合は先ほどとは逆にdate型のデータには値を渡さないように設定します。
次に予定データを作成するワークフローを編集します。
条件にstateにdate型のデータがあることと言うふうに実装したいので、下記画像のようにします。
逆にstateにcalendar型のデータがある場合は更新処理を書きたいので、下記画像のようにワークフローの分岐実装します。
これで更新処理は完了です。
最後にデータの削除を行う処理をアイコンが押された際に発火するワークフローを追加して完成です。
実際に使ってみた
これにてカレンダーの作成が終了しました。
前回に引き続き、更新処理と削除処理を実装したわけですが、本来この機能は予定作成者のみが行うものになります。
なので、より実用的な使い方をする際にはUserデータと連携させる必要があるということを念頭に置いておきましょう。
