feat: replace old agenda with agenda-neue (ietf-tools#4406)

* feat: remove old agenda (django-side)

* fix: bring in latest commits

* test: remove -neue from playwright tests

* test: remove agenda selenium js tests

* test: remove agenda views tests

* fix: remove deprecated agenda views (week-view, agenda-by, floor-plan)

* test: fix failing python tests

* test: remove more deprecated tests

* chore: remove deprecated templates

* test: remove unused import

* feat: handle agenda personalize with filter + move agenda specific stuff out of root component

* fix: redirect deprecated urls to agenda / floorplan

* feat: agenda - open picker mode when from personalize path

* fix: safari doesn't support device-pixel-content-box property on ResizeObserver

* test: move floor plan test into main agenda test

Co-authored-by: Robert Sparks <rjsparks@nostrum.com>

Author: NGPixel

client/App.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
 n-theme
   n-message-provider
-    .app-error(v-if='agendaStore.criticalError')
+    .app-error(v-if='siteStore.criticalError')
       i.bi.bi-x-octagon-fill.me-2
-      span {{agendaStore.criticalError}}
+      span {{siteStore.criticalError}}
     .app-container(ref='appContainer')
       router-view.meeting
 </template>
@@ -12,13 +12,13 @@ n-theme
 import { onBeforeUnmount ,onMounted, ref } from 'vue'
 import { NMessageProvider } from 'naive-ui'
 
-import { useAgendaStore } from './agenda/store'
+import { useSiteStore } from './shared/store'
 
 import NTheme from './components/n-theme.vue'
 
 // STORES
 
-const agendaStore = useAgendaStore()
+const siteStore = useSiteStore()
 
 // STATE
 
@@ -29,14 +29,14 @@ const appContainer = ref(null)
 // --------------------------------------------------------------------
 
 const resizeObserver = new ResizeObserver(entries => {
-  agendaStore.$patch({ viewport: Math.round(window.innerWidth) })
+  siteStore.$patch({ viewport: Math.round(window.innerWidth) })
   // for (const entry of entries) {
     // const newWidth = entry.contentBoxSize ? entry.contentBoxSize[0].inlineSize : entry.contentRect.width
   // }
 })
 
 onMounted(() => {
-  resizeObserver.observe(appContainer.value, { box: 'device-pixel-content-box' })
+  resizeObserver.observe(appContainer.value)
 })
 
 onBeforeUnmount(() => {
@@ -47,7 +47,6 @@ onBeforeUnmount(() => {
 <style lang="scss">
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
-@import "./shared/breakpoints";
 
 .app-error {
   background-color: $red-500;
@@ -57,69 +56,4 @@ onBeforeUnmount(() => {
   padding: 1rem;
   text-align: center;
 }
-
-.meeting {
-  > h1 {
-    font-weight: 500;
-    color: $gray-700;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    @media screen and (max-width: $bs5-break-sm) {
-      justify-content: center;
-
-      > span {
-        font-size: .95em;
-      }
-    }
-
-    strong {
-      font-weight: 700;
-      background: linear-gradient(220deg, $blue-500 20%, $purple-500 70%);
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      box-decoration-break: clone;
-    }
-  }
-
-  &-h1-badges {
-    display: flex;
-    justify-content: end;
-    align-items: center;
-
-    > span {
-      font-size: 13px;
-      font-weight: 700;
-      background-color: $pink-500;
-      box-shadow: 0 0 5px 0 rgba($pink-500, .5);
-      color: #FFF;
-      padding: 5px 8px;
-      border-radius: 6px;
-
-      & + span {
-        margin-left: 10px;
-      }
-    }
-  }
-
-  &-warning {
-    background-color: $red-500 !important;
-    box-shadow: 0 0 5px 0 rgba($red-500, .5) !important;
-    color: #FFF;
-    animation: warningBorderFlash 1s ease infinite;
-  }
-
-  > h4 {
-    @media screen and (max-width: $bs5-break-sm) {
-      text-align: center;
-
-      > span {
-        font-size: .8em;
-        text-align: center;
-      }
-    }
-  }
-}
 </style>

client/agenda/Agenda.vue

@@ -7,7 +7,6 @@
     span #[strong IETF {{agendaStore.meeting.number}}] Meeting Agenda {{titleExtra}}
     .meeting-h1-badges.d-none.d-sm-flex
       span.meeting-warning(v-if='agendaStore.meeting.warningNote') {{agendaStore.meeting.warningNote}}
-      span.meeting-beta BETA
   h4
     span {{agendaStore.meeting.city}}, {{ meetingDate }}
     h6.float-end.d-none.d-lg-inline(v-if='meetingUpdated') #[span.text-muted Updated:] {{ meetingUpdated }}
@@ -54,7 +53,7 @@
               @click='setTimezone(`UTC`)'
               ) UTC
           n-select.agenda-timezone-ddn(
-            v-if='agendaStore.viewport > 1250'
+            v-if='siteStore.viewport > 1250'
             v-model:value='agendaStore.timezone'
             :options='timezones'
             placeholder='Select Time Zone'
@@ -134,7 +133,7 @@
     // -----------------------------------
     // -> Anchored Day Quick Access Menu
     // -----------------------------------
-    .col-auto.d-print-none(v-if='agendaStore.viewport >= 990')
+    .col-auto.d-print-none(v-if='siteStore.viewport >= 990')
       agenda-quick-access
 
   agenda-mobile-bar
@@ -166,6 +165,9 @@ import MeetingNavigation from './MeetingNavigation.vue'
 import timezones from '../shared/timezones'
 
 import { useAgendaStore } from './store'
+import { useSiteStore } from '../shared/store'
+
+import './agenda.scss'
 
 // MESSAGE PROVIDER
 
@@ -174,6 +176,7 @@ const message = useMessage()
 // STORES
 
 const agendaStore = useAgendaStore()
+const siteStore = useSiteStore()
 
 // ROUTER
 
@@ -215,7 +218,35 @@ watch(() => agendaStore.meetingDays, () => {
   })
 })
 
-watch(() => agendaStore.isLoaded, handleCurrentMeetingRedirect)
+watch(() => agendaStore.isLoaded, () => {
+  if (route.query.show) {
+    // Handle legacy ?show= parameter
+    const keywords = route.query.show.split(',').map(k => k.trim()).filter(k => !!k)
+    if (keywords?.length > 0) {
+      const pickedIds = []
+      for (const ev of agendaStore.scheduleAdjusted) {
+        if (keywords.includes(ev.sessionKeyword)) {
+          pickedIds.push(ev.id)
+        }
+      }
+      if (pickedIds.length > 0) {
+        agendaStore.$patch({
+          pickerMode: true,
+          pickerModeView: true,
+          pickedEvents: pickedIds
+        })
+        agendaStore.persistMeetingPreferences()
+      }
+    }
+  }
+  if (route.query.pick) {
+    // Handle legacy /personalize path (open picker mode)
+    agendaStore.$patch({ pickerMode: true })
+    router.replace({ query: null })
+  }
+
+  handleCurrentMeetingRedirect()
+})
 
 // COMPUTED
 

client/agenda/AgendaMobileBar.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.agenda-mobile-bar(v-if='agendaStore.viewport < 990')
+.agenda-mobile-bar(v-if='siteStore.viewport < 990')
   button(@click='agendaStore.$patch({ filterShown: true })')
     i.bi.bi-filter-square-fill.me-2
     span Filters
@@ -31,6 +31,7 @@ import {
 } from 'naive-ui'
 
 import { useAgendaStore } from './store'
+import { useSiteStore } from '../shared/store';
 
 // MESSAGE PROVIDER
 
@@ -39,6 +40,7 @@ const message = useMessage()
 // STORES
 
 const agendaStore = useAgendaStore()
+const siteStore = useSiteStore()
 
 // Download Ics Options
 

client/agenda/AgendaQuickAccess.vue

@@ -108,6 +108,7 @@
 
 <script setup>
 import { computed, h } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { DateTime } from 'luxon'
 import {
   NAffix,
@@ -119,6 +120,7 @@ import {
 } from 'naive-ui'
 
 import { useAgendaStore } from './store'
+import { useSiteStore } from '../shared/store';
 
 // MESSAGE PROVIDER
 
@@ -127,6 +129,12 @@ const message = useMessage()
 // STORES
 
 const agendaStore = useAgendaStore()
+const siteStore = useSiteStore()
+
+// ROUTER
+
+const router = useRouter()
+const route = useRoute()
 
 // Download Ics Options
 
@@ -146,7 +154,7 @@ const downloadIcsOptions = [
 // COMPUTED
 
 const shortMode = computed(() => {
-  return agendaStore.viewport <= 1350
+  return siteStore.viewport <= 1350
 })
 
 // METHODS
@@ -163,6 +171,9 @@ function pickerModify () {
 }
 function pickerDiscard () {
   agendaStore.$patch({ pickerMode: false })
+  if (route.query.show) {
+    router.push({ query: null })
+  }
 }
 
 function downloadIcs (key) {

client/agenda/AgendaScheduleCalendar.vue

@@ -4,7 +4,7 @@ n-drawer(v-model:show='isShown', placement='bottom', :height='state.drawerHeight
     template(#header)
       span Calendar View
       .agenda-calendar-actions
-        template(v-if='agendaStore.viewport > 990')
+        template(v-if='siteStore.viewport > 990')
           i.bi.bi-globe.me-2
           small.me-2: strong Timezone:
           n-button-group
@@ -91,10 +91,12 @@ import bootstrap5Plugin from '@fullcalendar/bootstrap5'
 import AgendaDetailsModal from './AgendaDetailsModal.vue'
 
 import { useAgendaStore } from './store'
+import { useSiteStore } from '../shared/store'
 
 // STORES
 
 const agendaStore = useAgendaStore()
+const siteStore = useSiteStore()
 
 // STATE
 

client/agenda/AgendaScheduleList.vue

@@ -7,7 +7,7 @@
           th.agenda-table-head-check(v-if='pickerModeActive')  
           th.agenda-table-head-time Time
           th.agenda-table-head-location(colspan='2') Location
-          th.agenda-table-head-event(colspan='2') {{ agendaStore.viewport < 990 ? '' : 'Event' }}
+          th.agenda-table-head-event(colspan='2') {{ siteStore.viewport < 990 ? '' : 'Event' }}
       tbody
         tr.agenda-table-display-noresult(
           v-if='!meetingEvents || meetingEvents.length < 1'
@@ -58,13 +58,13 @@
                     span.badge {{item.location.short}}
                   span {{item.location.name}}
                 router-link.discreet(
-                  :to='`/meeting/` + agendaStore.meeting.number + `/floor-plan-neue?room=` + xslugify(item.room)'
+                  :to='`/meeting/` + agendaStore.meeting.number + `/floor-plan?room=` + xslugify(item.room)'
                   :aria-label='item.room'
                   ) {{item.room}}
               span(v-else) {{item.room}}
             //- CELL - GROUP --------------------------
             td.agenda-table-cell-group(v-if='item.type === `regular`')
-              span.badge(v-if='agendaStore.areaIndicatorsShown && agendaStore.viewport > 1200') {{item.groupAcronym}}
+              span.badge(v-if='agendaStore.areaIndicatorsShown && siteStore.viewport > 1200') {{item.groupAcronym}}
               a.discreet(:href='`/group/` + item.acronym + `/about/`') {{item.acronym}}
             //- CELL - NAME ---------------------------
             td.agenda-table-cell-name
@@ -105,7 +105,7 @@
               template(v-else)
                 span.badge.is-cancelled(v-if='!isMobile && item.status === `canceled`') Cancelled
                 span.badge.is-rescheduled(v-else-if='!isMobile && item.status === `resched`') Rescheduled
-                .agenda-table-cell-links-buttons(v-else-if='agendaStore.viewport < 1200 && item.links && item.links.length > 0')
+                .agenda-table-cell-links-buttons(v-else-if='siteStore.viewport < 1200 && item.links && item.links.length > 0')
                   n-dropdown(
                     v-if='!agendaStore.colorPickerVisible'
                     trigger='click'
@@ -201,6 +201,7 @@ import {
 import AgendaDetailsModal from './AgendaDetailsModal.vue'
 
 import { useAgendaStore } from './store'
+import { useSiteStore } from '../shared/store'
 
 // MESSAGE PROVIDER
 
@@ -209,6 +210,7 @@ const message = useMessage()
 // STORES
 
 const agendaStore = useAgendaStore()
+const siteStore = useSiteStore()
 
 // DATA
 
@@ -236,7 +238,7 @@ const meetingEvents = computed(() => {
 
   return reduce(sortBy(agendaStore.scheduleAdjusted, 'adjustedStartDate'), (acc, item) => {
     const isLive = current >= item.adjustedStart && current < item.adjustedEnd
-    const itemTimeSlot = agendaStore.viewport > 576 ?
+    const itemTimeSlot = siteStore.viewport > 576 ?
       `${item.adjustedStart.toFormat('HH:mm')} - ${item.adjustedEnd.toFormat('HH:mm')}` :
       `${item.adjustedStart.toFormat('HH:mm')} ${item.adjustedEnd.toFormat('HH:mm')}`
 
@@ -482,7 +484,7 @@ const pickedEvents = computed({
 })
 
 const isMobile = computed(() => {
-  return agendaStore.viewport < 576
+  return siteStore.viewport < 576
 })
 
 // METHODS

client/agenda/AgendaSettings.vue

@@ -198,6 +198,8 @@ import {
 } from 'naive-ui'
 
 import { useAgendaStore } from './store'
+import { useSiteStore } from '../shared/store'
+
 import timezones from '../shared/timezones'
 
 // MESSAGE PROVIDER
@@ -207,6 +209,7 @@ const message = useMessage()
 // STORES
 
 const agendaStore = useAgendaStore()
+const siteStore = useSiteStore()
 
 // STATE
 
@@ -266,7 +269,7 @@ const calcOffset = computed(() => {
   return agendaStore.nowDebugDiff ? JSON.stringify(agendaStore.nowDebugDiff.toObject()) : 'None'
 })
 const panelWidth = computed(() => {
-  return agendaStore.viewport > 500 ? 500 : agendaStore.viewport
+  return siteStore.viewport > 500 ? 500 : siteStore.viewport
 })
 
 // WATCHERS