Slugy, webp, hromada refaktoringu

src/components/event/EventsList.vue

@@ -8,8 +8,7 @@ const props = defineProps({
   },
    routeDetail: {
     type: Object,
-    required: false,
-    default: () => ({name: 'eventDetail', params: {}})
+    required: true,
   },
 });
 
@@ -19,20 +18,20 @@ const getCoverPhotos = (item) => item.flights.filter(f => !!f.titlePhoto).map(f
 <template>
   <q-list bordered separator>
     <q-item
-      v-for="event of items" :key="event"
+      v-for="eventDetail of items" :key="eventDetail"
       clickable
-      :to="{name: routeDetail.name, params: {...routeDetail.params, id: event.id}}"
+      :to="{name: props.routeDetail.name, params: {...props.routeDetail.params, eventSlug: eventDetail.urlSlug, id: eventDetail.id}}"
       v-ripple
     >
       <q-item-section>
         <q-item-label>
-          <q-avatar icon="event" color="primary" text-color="white" v-if="!event.flights || event.flights.length === 0"/>
-          <AvatarsGroup :avatars="getCoverPhotos(event)" v-else/>
+          <q-avatar icon="event" color="primary" text-color="white" v-if="!eventDetail.flights || eventDetail.flights.length === 0"/>
+          <AvatarsGroup :avatars="getCoverPhotos(eventDetail)" v-else/>
 
-          {{ event.name }}
+          {{ eventDetail.name }}
         </q-item-label>
         <q-item-label lines="4" caption>
-          <article v-html="event.description"/>
+          <article v-html="eventDetail.description"/>
         </q-item-label>
       </q-item-section>
     </q-item>