diff --git a/client/agenda/AgendaDetailsModal.vue b/client/agenda/AgendaDetailsModal.vue index 68749362b54..8b2857204f4 100644 --- a/client/agenda/AgendaDetailsModal.vue +++ b/client/agenda/AgendaDetailsModal.vue @@ -70,19 +70,64 @@ n-modal(v-model:show='modalShown') span.badge {{eventDetails.locationShort}} span {{eventDetails.locationName}} span {{eventDetails.room}} - .detail-text(v-if='eventDetails.materialsUrl') - iframe( - :src='eventDetails.materialsUrl' + nav.detail-nav.nav.nav-pills.nav-justified.mt-3 + a.nav-link( + :class='{ active: state.tab === `agenda` }' + @click='state.tab = `agenda`' + ) + i.bi.bi-list-columns-reverse.me-2 + span Agenda + a.nav-link( + :class='{ active: state.tab === `slides` }' + @click='state.tab = `slides`' + ) + i.bi.bi-easel.me-2 + span Slides + a.nav-link( + :class='{ active: state.tab === `minutes` }' + @click='state.tab = `minutes`' ) + i.bi.bi-journal-text.me-2 + span Minutes + .detail-text(v-if='eventDetails.materialsUrl') + template(v-if='state.tab === `agenda`') + iframe( + :src='eventDetails.materialsUrl' + ) + template(v-else-if='state.tab === `slides`') + .text-center(v-if='state.isLoading') + n-spin(description='Loading slides...') + .text-center.p-3(v-else-if='!state.materials || !state.materials.slides || state.materials.slides.length < 1') + span No slides submitted for this session. + .list-group(v-else) + a.list-group-item( + v-for='slide of state.materials.slides' + :key='slide.id' + :href='slide.url' + target='_blank' + ) + i.bi.me-2(:class='`bi-filetype-` + slide.ext') + span {{slide.title}} + template(v-else) + .text-center(v-if='state.isLoading') + n-spin(description='Loading minutes...') + .text-center.p-3(v-else-if='!state.materials || !state.materials.minutes') + span No minutes submitted for this session. + iframe( + v-else + :src='state.materials.minutes.url' + )