#74 renamed schedule-talk component to talk-card, providing a scope p…

…rop to contextualize from where this component is loaded
voxxrin · Nov 8, 2024 · 1a35aa7 · 1a35aa7
1 parent d37f4b0
commit 1a35aa7
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 28 deletions.
diff --git a/mobile/src/components/events/EventTalksGroup.vue b/mobile/src/components/events/EventTalksGroup.vue
@@ -2,21 +2,22 @@
   <img :src="confDescriptor.backgroundUrl">
   <span class="schedule-talk-event-title">{{confDescriptor.headingTitle}}</span>
 
-  <schedule-talk v-for="(talk, index) in talks" :key="talk.id.value"
+  <talk-card v-for="(talk, index) in talks" :key="talk.id.value"
                  :conf-descriptor="confDescriptor" :is-highlighted="() => false"
                  :talk="talk" :room-id="talk.room.id"
                  :talk-notes="userEventTalkNotesRef.get(talk.id.value)"
-                 @click="emits('talk-clicked', talk)">
+                 @click="emits('talk-clicked', talk)"
+                 scope="event-talks">
     <template #upper-right="{  }">
       {{confDescriptor.headingTitle}}
     </template>
     <template #footer-actions="{ talk }">
     </template>
-  </schedule-talk>
+  </talk-card>
 </template>
 
 <script setup lang="ts">
-import ScheduleTalk from "@/components/talk-card/ScheduleTalk.vue";
+import TalkCard from "@/components/talk-card/TalkCard.vue";
 import {typesafeI18n} from "@/i18n/i18n-vue";
 import {PropType} from "vue";
 import {spacedEventIdOf, VoxxrinConferenceDescriptor} from "@/models/VoxxrinConferenceDescriptor";

diff --git a/mobile/src/components/feedbacks/FeedbackTalkSelector.vue b/mobile/src/components/feedbacks/FeedbackTalkSelector.vue
@@ -3,9 +3,9 @@
     <talk-format-groups-breakdown :conf-descriptor="confDescriptor" :talks="displayedTalksRef">
       <template #talk="{ talk }">
         <ion-item class="listTalks-item">
-          <schedule-talk :talk="talk" :room-id="talk.room.id" :talk-stats="talkStatsRefByTalkId.get(talk.id.value)" :talk-notes="userTalkNotesRefByTalkIdRef.get(talk.id.value)"
+          <talk-card :talk="talk" :room-id="talk.room.id" :talk-stats="talkStatsRefByTalkId.get(talk.id.value)" :talk-notes="userTalkNotesRefByTalkIdRef.get(talk.id.value)"
                          :is-highlighted="(talk, talkNotes) => talk.id.isSameThan(selectedTalkId)" :conf-descriptor="confDescriptor"
-                         @talkClicked="updateSelected($event)" >
+                         @talkClicked="updateSelected($event)" scope="rating">
             <template #upper-right="{ talk, talkNotes }">
               <talk-is-favorited :talk-notes="talkNotes" />
             </template>
@@ -18,7 +18,7 @@
                 :is-active="talk.id.isSameThan(selectedTalkId)"
                 @click.stop="() => updateSelected(talk)" />
             </template>
-          </schedule-talk>
+          </talk-card>
         </ion-item>
       </template>
     </talk-format-groups-breakdown>
@@ -41,7 +41,7 @@ import {spacedEventIdOf, VoxxrinConferenceDescriptor} from "@/models/VoxxrinConf
 import {typesafeI18n} from "@/i18n/i18n-vue";
 import TalkWatchLaterButton from "@/components/talk-card/TalkWatchLaterButton.vue";
 import TalkSelectForFeedback from "@/components/talk-card/TalkSelectForFeedback.vue";
-import ScheduleTalk from "@/components/talk-card/ScheduleTalk.vue";
+import TalkCard from "@/components/talk-card/TalkCard.vue";
 import TalkIsFavorited from "@/components/talk-card/TalkIsFavorited.vue";
 import {useEventTalkStats} from "@/state/useEventTalkStats";
 import {useUserEventTalkNotes} from "@/state/useUserTalkNotes";

diff --git a/mobile/src/components/schedule/FavoritesTimeslotSection.vue b/mobile/src/components/schedule/FavoritesTimeslotSection.vue
@@ -8,10 +8,10 @@
         </no-results>
         <talk-format-groups-breakdown :conf-descriptor="confDescriptor" v-if="timeslot.type==='talks'" :talks="timeslot.talks.filter(t => t.id.isIncludedIntoArray(favoritedTalkIdsRef))">
           <template #talk="{ talk }">
-            <schedule-talk :talk="talk" :room-id="talk.room.id" :talk-stats="talkStatsRefByTalkId.get(talk.id.value)" :talk-notes="userEventTalkNotes.get(talk.id.value)"
+            <talk-card :talk="talk" :room-id="talk.room.id" :talk-stats="talkStatsRefByTalkId.get(talk.id.value)" :talk-notes="userEventTalkNotes.get(talk.id.value)"
                            :is-highlighted="(talk, talkNotes) => talkNotes.isFavorite" :conf-descriptor="confDescriptor"
                            :room-stats="roomsStatsRefByRoomId?.[talk.room.id.value]" :is-upcoming-talk="upcomingRawTalkIds.includes(talk.id.value)"
-                           @talk-clicked="_ => $emit('talk-clicked', talk)" >
+                           @talk-clicked="_ => $emit('talk-clicked', talk)" scope="favorites">
               <template #upper-right="{ }">
                 <div class="room" v-if="confDescriptor?.features.roomsDisplayed">
                   {{talk.room.title}}
@@ -30,7 +30,7 @@
                                       :local-favorite="localEventTalkNotes.get(talk.id.value)"
                 />
               </template>
-            </schedule-talk>
+            </talk-card>
           </template>
         </talk-format-groups-breakdown>
       </div>
@@ -46,7 +46,7 @@ import TalkFavoriteButton from "@/components/talk-card/TalkFavoriteButton.vue";
 import ScheduleBreak from "@/components/schedule/ScheduleBreak.vue";
 import TalkWatchLaterButton from "@/components/talk-card/TalkWatchLaterButton.vue";
 import ProvideFeedbackTalkButton from "@/components/talk-card/ProvideFeedbackTalkButton.vue";
-import ScheduleTalk from "@/components/talk-card/ScheduleTalk.vue";
+import TalkCard from "@/components/talk-card/TalkCard.vue";
 import {computed, PropType, toValue} from "vue";
 import {LabelledTimeslotWithFeedback} from "@/state/useSchedule";
 import {TimeslotTimingProgress} from "@/models/VoxxrinSchedule";

diff --git a/mobile/src/components/schedule/ScheduleTimeslotAccordion.vue b/mobile/src/components/schedule/ScheduleTimeslotAccordion.vue
@@ -12,7 +12,7 @@
                                     :talks="timeslot.talks">
         <template #talk="{ talk }">
           <ion-item class="listTalks-item" role="listitem">
-            <schedule-talk :talk="talk" :room-id="talk.room.id" :talk-stats="talkStatsRefByTalkId.get(talk.id.value)"
+            <talk-card :talk="talk" :room-id="talk.room.id" :talk-stats="talkStatsRefByTalkId.get(talk.id.value)" scope="schedule"
                            :room-stats="roomsStatsRefByRoomId?.[talk.room.id.value]" :is-upcoming-talk="upcomingRawTalkIds.includes(talk.id.value)"
                            :talk-notes="userEventTalkNotes.get(talk.id.value)" @talk-clicked="(clickedTalk) => $emit('talk-clicked', talk)" :is-highlighted="(talk, talkNotes) => talkNotes.isFavorite" :conf-descriptor="confDescriptor">
               <template #upper-right="{ }">
@@ -30,7 +30,7 @@
                                       :local-favorite="localEventTalkNotes.get(talk.id.value)"
                                       @talk-note-updated="updatedTalkNote => userEventTalkNotes.set(talk.id.value, updatedTalkNote) " />
               </template>
-            </schedule-talk>
+            </talk-card>
           </ion-item>
         </template>
       </talk-format-groups-breakdown>
@@ -48,7 +48,7 @@ import ScheduleBreak from "@/components/schedule/ScheduleBreak.vue";
 import TalkWatchLaterButton from "@/components/talk-card/TalkWatchLaterButton.vue";
 import TalkRoom from "@/components/talk-card/TalkRoom.vue";
 import ProvideFeedbackTalkButton from "@/components/talk-card/ProvideFeedbackTalkButton.vue";
-import ScheduleTalk from "@/components/talk-card/ScheduleTalk.vue";
+import TalkCard from "@/components/talk-card/TalkCard.vue";
 import {PropType} from "vue";
 import {LabelledTimeslotWithFeedback} from "@/state/useSchedule";
 import {TimeslotTimingProgress, VoxxrinScheduleTimeSlot} from "@/models/VoxxrinSchedule";

diff --git a/...src/components/talk-card/ScheduleTalk.vue → mobile/src/components/talk-card/TalkCard.vue b/...src/components/talk-card/ScheduleTalk.vue → mobile/src/components/talk-card/TalkCard.vue
@@ -122,6 +122,10 @@ const props = defineProps({
   talkNotes: {
       required: false,
       type: Object as PropType<TalkNote|undefined>
+  },
+  scope: {
+    required: true,
+    type: String as PropType<"schedule"|"rating"|"favorites"|"speaker"|"event-talks">
   }
 })
 

diff --git a/mobile/src/views/SpeakerDetailsPage.vue b/mobile/src/views/SpeakerDetailsPage.vue
@@ -48,7 +48,7 @@
             </div>
             <div class="sectionBloc" v-if="speaker.talks.length > 0">
               <VoxDivider>{{LL.Speaker_talks()}}</VoxDivider>
-              <schedule-talk v-for="talk in speaker.talks" :key="talk.id.value"
+              <talk-card v-for="talk in speaker.talks" :key="talk.id.value" scope="speaker"
                              :talk="{ ...talk, speakers: [speaker, ...talk.otherSpeakers] }" :room-id="talk.allocation?.room.id" :talk-stats="talkStatsRefByTalkId.get(talk.id.value)"
                              :talk-notes="userEventTalkNotesRef.get(talk.id.value)"
                              @talk-clicked="(clickedTalk) => $emit('talk-clicked', clickedTalk)"
@@ -65,7 +65,7 @@
                                         :local-favorite="localEventTalkNotesRef.get(talk.id.value)"
                                         @talk-note-updated="updatedTalkNote => userEventTalkNotesRef.set(talk.id.value, updatedTalkNote) " />
                 </template>
-              </schedule-talk>
+              </talk-card>
             </div>
 
             <div class="sectionBloc linksInfoSpeaker" v-if="speaker.social.length">
@@ -102,7 +102,7 @@ import {useLineupSpeaker} from "@/state/useEventSpeakers";
 import {useLocalEventTalkFavsStorage, useUserEventTalkNotes} from "@/state/useUserTalkNotes";
 import {computed, toValue} from "vue";
 import {useEventTalkStats} from "@/state/useEventTalkStats";
-import ScheduleTalk from "@/components/talk-card/ScheduleTalk.vue";
+import TalkCard from "@/components/talk-card/TalkCard.vue";
 import TalkRoom from "@/components/talk-card/TalkRoom.vue";
 import TalkFavoriteButton from "@/components/talk-card/TalkFavoriteButton.vue";
 import TalkWatchLaterButton from "@/components/talk-card/TalkWatchLaterButton.vue";

diff --git a/mobile/src/views/event/FeedbacksPage.vue b/mobile/src/views/event/FeedbacksPage.vue
@@ -39,7 +39,7 @@
                     </no-results>
                   </ion-item>
                   <ion-item v-else-if="feedback.status === 'provided'" class="listTalks-item">
-                    <schedule-talk :talk="findTimeslotTalkMatchingFeedback(timeslot, feedback.userFeedback)!"
+                    <talk-card :talk="findTimeslotTalkMatchingFeedback(timeslot, feedback.userFeedback)!" scope="rating"
                                    :room-id="findTimeslotTalkMatchingFeedback(timeslot, feedback.userFeedback)!.room.id"
                                    :talk-notes="userEventTalkNotesRef.get(findTimeslotTalkMatchingFeedback(timeslot, feedback.userFeedback)!.id.value)"
                                    :is-highlighted="(talk, talkNotes) => talkNotes.isFavorite"
@@ -52,7 +52,7 @@
                         <linear-rating v-if="confDescriptor.features.ratings.scale.enabled" :config="confDescriptor.features.ratings.scale"
                                        :user-feedback="feedback.userFeedback" :readonly="true" :is-small="true" />
                       </template>
-                    </schedule-talk>
+                    </talk-card>
                   </ion-item>
                   <ion-item v-else>
                     <no-results illu-path="icons/solid/comment-feedback-skipped.svg" class="_small" position="absolute">
@@ -81,7 +81,7 @@
   import {IonAccordionGroup} from "@ionic/vue";
   import {extractTalksFromSchedule, VoxxrinScheduleTimeSlot} from "@/models/VoxxrinSchedule";
   import TimeslotsIterator from "@/components/timeslots/TimeslotsIterator.vue";
-  import ScheduleTalk from "@/components/talk-card/ScheduleTalk.vue";
+  import TalkCard from "@/components/talk-card/TalkCard.vue";
   import {useTabbedPageNav} from "@/state/useTabbedPageNav";
   import {useSchedule} from "@/state/useSchedule";
   import {findTimeslotTalkMatchingFeedback} from "@/models/VoxxrinFeedback";

diff --git a/mobile/src/views/event/SpeakersDirectoryPage.vue b/mobile/src/views/event/SpeakersDirectoryPage.vue
@@ -10,11 +10,11 @@
       <speaker-card v-for="speaker in speakers" @speaker-clicked="openSpeakerDetails($event)" :confDescriptor="confDescriptor" :speaker="speaker" :key="speaker.id.value">
         <template #content="{}">
           <ion-list class="talkResumeList" :style="{ display: currentMode === 'detailed' ? 'block':'none' }">
-            <schedule-talk v-for="talk in speaker.talks" :key="talk.id.value"
+            <talk-card v-for="talk in speaker.talks" :key="talk.id.value"
                            :talk="{ ...talk, speakers: [speaker, ...talk.otherSpeakers] }" :room-id="talk.allocation?.room.id" :talk-stats="talkStatsRefByTalkId.get(talk.id.value)"
                            :talk-notes="userEventTalkNotesRef.get(talk.id.value)"
                            @talk-clicked="(clickedTalk) => $emit('talk-clicked', clickedTalk)"
-                           :is-highlighted="(talk, talkNotes) => talkNotes.isFavorite" :conf-descriptor="confDescriptor">
+                           :is-highlighted="(talk, talkNotes) => talkNotes.isFavorite" :conf-descriptor="confDescriptor" scope="speaker">
               <template #upper-right>
                 <talk-room v-if="talk.allocation" :room="talk.allocation.room" :conf-descriptor="confDescriptor" />
               </template>
@@ -27,7 +27,7 @@
                                       :local-favorite="localEventTalkNotesRef.get(talk.id.value)"
                                       @talk-note-updated="updatedTalkNote => userEventTalkNotesRef.set(talk.id.value, updatedTalkNote) " />
               </template>
-            </schedule-talk>
+            </talk-card>
           </ion-list>
         </template>
       </speaker-card>
@@ -59,7 +59,7 @@
   import {computed, toValue} from "vue";
   import {TalkId} from "@/models/VoxxrinTalk";
   import {useEventTalkStats} from "@/state/useEventTalkStats";
-  import ScheduleTalk from "@/components/talk-card/ScheduleTalk.vue";
+  import TalkCard from "@/components/talk-card/TalkCard.vue";
   import TalkRoom from "@/components/talk-card/TalkRoom.vue";
   import TalkFavoriteButton from "@/components/talk-card/TalkFavoriteButton.vue";
   import TalkWatchLaterButton from "@/components/talk-card/TalkWatchLaterButton.vue";

diff --git a/mobile/src/views/feedbacks/RateTalkPage.vue b/mobile/src/views/feedbacks/RateTalkPage.vue
@@ -6,10 +6,10 @@
       <slot>
         <div class="rateTalkView">
           <div class="rateTalkView-head">
-            <schedule-talk :conf-descriptor="confDescriptorRef" :is-highlighted="() => false" scope="rating"
+            <talk-card :conf-descriptor="confDescriptorRef" :is-highlighted="() => false" scope="rating"
                            :talk="labelledTimeslotWithTalkRef.talk" :room-id="labelledTimeslotWithTalkRef.talk.room.id"
                            :talk-notes="userEventTalkNotesRef.get(labelledTimeslotWithTalkRef.talk.id.value)">
-            </schedule-talk>
+            </talk-card>
           </div>
 
           <div class="rateTalkForm">
@@ -76,7 +76,7 @@ import {typesafeI18n} from "@/i18n/i18n-vue";
 import {TalkId} from "@/models/VoxxrinTalk";
 import BaseFeedbackStep from "@/components/feedbacks/BaseFeedbackStep.vue";
 import {DailyLabelledTimeslotWithTalk, findLabelledTimeslotContainingTalk,} from "@/state/findTimeslot";
-import ScheduleTalk from "@/components/talk-card/ScheduleTalk.vue";
+import TalkCard from "@/components/talk-card/TalkCard.vue";
 import {IonTextarea, useIonRouter} from "@ionic/vue";
 import QuickFeedbackRating from "@/components/ratings/QuickFeedbackRating.vue";
 import IconBasedRating from "@/components/ratings/IconBasedRating.vue";