カレンダーの日付をクリックしたら過去の酒ケジュールが表示されるようにしたい。

[subaru-hello]

30 が肥大化してきたので、issueを分けました。

概要

カレンダーの日付をクリックしたら過去の酒ケジュールが表示されるようにしたい。

期待する挙動

クリックした日付とcreated_atが同じデータをv-dialogで表示させたい。

• 該当箇所 https://github.com/aiandrox/hashlog/blob/360616b37e4a2159eec198286ba0ad5bf2f16429/app/javascript/components/TheTagWrapper.vue (参考アプリ: Hashlog)

  推測の挙動

• カレンダーの親コンポーネント

  //the-calenderにpropsでtweetDatesを渡し、子での変更をtweet-datesで購読している。
  <the-calendar
    ref="calendar"
    :tweet-dates="tweetDates"
    @input-date="fetchDateTweets"
  />
  //クリックした時に表示されるdialog

  <tweet-dialog ref="tweetDialog" :tweeted-day-count="registeredTag.tweetedDayCount" :last-tweeted-at="registeredTag.lastTweetedAt" :tag-name="registeredTag.tag.name" @create-tweet="updateTweetsData" />

  
  // カレンダー用日付データ
  async fetchTweetDates() {
    this.tweetDates = []
    const tweetsRes = await this.$axios.get(
      `${this.registeredTagUrl}/tweeted_ats`
    )
    const { tweetedAts } = tweetsRes.data
    tweetedAts.forEach(t => this.tweetDates.push(t.substr(0, 10)))
    this.date = ""
  },

• カレンダーコンポーネント

  <v-date-picker
    ref="picker"
    v-model="date"
    full-width
    no-title
    color="primary"
    event-color="pink"
    :weekday-format="weekdayFormat"
    :allowed-dates="allowedDates"
    :events="tweetDates"
    class="mt-4"
    @input="inputDate"
  />

  詳細

• [ ] 過去の酒ケジュールカレンダー表示画面 カレンダーが表示されて、日付をクリックすると、カレンダーの下部に酒ケジュールを表示されるようにする。 作成した酒（シュ）ケジュール

表示したい項目

1. お酒の強さ
2. 飲んだお酒の順番
3. タイトル

解決までのアプローチ

1. 表示する項目を下記二つに分類する。←timestampの扱い方を理解する。
   • 30日以前に作成した酒ケジュール
   • 直近30日で作成した酒ケジュール
2. クリックイベントが発火した時に上記二つが表示させるボタンを作成する。←クリックイベントが機能するか確かめる。
3. 30日以前、ここ１ヶ月、直近7日までの三つに分けてみる。←種類を増やしても機能するか確かめる。
4. クリックイベントをカレンダーに渡し、カレンダーの日付を押したらイベントが発火するようにする。←カレンダーの日付をクリックしたらちゃんとイベントが発火するか確かめる。
5. カレンダーの日付と酒ケジュール作成日のtimestampをdayjsでフォーマットさせた後、双方を紐づける。
6. 日付をクリックしたら紐づいた日にちの酒ケジュールが画面に表示されるようにする。←完成

下記記事、公式を参考にする。 https://vcalendar.io/ https://qiita.com/kanary/items/442bd44c2896a534768b https://docs.vcalendar.io/data.html

[aiandrox]

@subaru-hello クリックしたときは、 https://github.com/aiandrox/hashlog/blob/360616b37e4a2159eec198286ba0ad5bf2f16429/app/javascript/components/TheTagWrapper.vue#L193-L201 ここでRails側にリクエストを送って、返ってきたデータをtweetsに入れ替えているだけです！ 例：https://hashlog.work/api/v1/registered_tags/314/tweets?page=1&date=2021-12-01

https://github.com/aiandrox/hashlog/blob/360616b37e4a2159eec198286ba0ad5bf2f16429/app/controllers/api/v1/tweets_controller.rb#L6-L9 コントローラ側はこんな感じです！

[subaru-hello]

@aiandrox ありがとうございます！！

1. クリックしたら欲しいデータをgetするアクションを実行
2. 1で取得したデータをPromiseを使ってtweetsに変換

までは理解できるのですが、Date.perseで日付を取得する流れをもう少し細かく聞いても良いでしょうか、、！

[aiandrox]

@subaru-hello 特になにもないときはhttps://hashlog.work/api/v1/registered_tags/314/tweets?page=1、日付で絞るときはhttps://hashlog.work/api/v1/registered_tags/314/tweets?page=1&date=2021-12-01って感じにしているので、params[:date] = 2021-12-01を取得して

[1] pry(main)> Date.parse('2021-12-01')
=> Wed, 01 Dec 2021

って感じです！

[subaru-hello]

@aiandrox クエリにある日付情報を取得してtweeted_atに引数として入れているんですね、、！ 実装できるか試してみて、無理そうだったら違う方法で過去に作成した診断データを表示させようと思います！！ アドバイスありがとうございました！！

[aiandrox]

ですです！ Tweetクラスにスコープ定義してます！

ふぁいとっす！