Merge pull request #211 from openzim/events-fix

display events in view

Author: elfkuzco

frontend/src/components/BookTable.vue

@@ -1,24 +1,6 @@
 <template>
   <div>
     <v-card v-if="!errors.length" :class="{ loading: loading }" flat>
-      <v-card-title
-        v-if="showSelection || $slots.actions"
-        class="d-flex flex-column-reverse flex-sm-row align-sm-center justify-sm-end ga-2"
-      >
-        <slot name="actions" />
-        <v-btn
-          v-if="showSelection"
-          size="small"
-          variant="elevated"
-          color="warning"
-          :disabled="selectedBooks.length === 0"
-          @click="clearSelections"
-        >
-          <v-icon size="small" class="mr-1">mdi-checkbox-multiple-blank-outline</v-icon>
-          clear selections
-        </v-btn>
-      </v-card-title>
-
       <v-data-table-server
         :headers="headers"
         :items="books"
@@ -31,9 +13,6 @@
         :density="smAndDown ? 'compact' : 'comfortable'"
         class="elevation-1"
         item-value="name"
-        :show-select="showSelection"
-        :model-value="selectedBooks"
-        @update:model-value="handleSelectionChange"
         @update:options="onUpdateOptions"
         :hide-default-footer="props.paginator.count === 0"
         :hide-default-header="props.paginator.count === 0"
@@ -83,7 +62,6 @@ import BookStatus from '@/components/BookStatus.vue'
 import type { Paginator } from '@/types/base'
 import { formatDt } from '@/utils/format'
 import type { BookLight, LocationKind } from '@/types/book'
-import { computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useDisplay } from 'vuetify'
 
@@ -105,14 +83,11 @@ interface Props {
     location_kind: string
     flag: string
   }
-  selectedBooks?: string[]
-  showSelection?: boolean
   showFilters?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   filters: () => ({ id: '', location_kind: '', flag: '' }),
-  selectedBooks: () => [],
   showSelection: true,
   showFilters: true,
 })
@@ -121,7 +96,6 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   limitChanged: [limit: number]
   loadData: [limit: number, skip: number]
-  selectionChanged: [selectedBooks: string[]]
 }>()
 
 const limits = [10, 20, 50, 100]
@@ -134,8 +108,6 @@ const locationKindColors: Record<LocationKind, string> = {
   deleted: 'red-lighten-1',
 }
 
-const selectedBooks = computed(() => props.selectedBooks)
-
 function onUpdateOptions(options: { page: number; itemsPerPage: number }) {
   const query = { ...route.query }
 
@@ -151,12 +123,4 @@ function onUpdateOptions(options: { page: number; itemsPerPage: number }) {
     emit('limitChanged', options.itemsPerPage)
   }
 }
-
-function handleSelectionChange(selection: string[]) {
-  emit('selectionChanged', selection)
-}
-
-function clearSelections() {
-  emit('selectionChanged', [])
-}
 </script>

frontend/src/views/InboxView.vue

@@ -1,4 +1,4 @@
-<!-- Inbox View showing a list of books and zimfarm notifications -->
+<!-- Inbox View showing a list of books, zimfarm notifications, and events -->
 
 <template>
   <TabsList :active-tab="currentTab" :tab-options="tabOptions" @tab-changed="handleTabChange" />
@@ -15,6 +15,12 @@
     @filters-changed="handleZimfarmFiltersChange"
     @clear-filters="clearFilters"
   />
+  <EventFilters
+    v-if="currentTab == 'events'"
+    :filters="eventFilters"
+    @filters-changed="handleEventFiltersChange"
+    @clear-filters="clearFilters"
+  />
   <BookTable
     v-show="currentTab == 'books'"
     :headers="headers"
@@ -24,12 +30,9 @@
     :loading-text="loadingStore.loadingText"
     :errors="errors"
     :filters="bookFilters"
-    :selected-books="selectedBooks"
-    :show-selection="true"
     :show-filters="true"
     @limit-changed="handleLimitChange"
     @load-data="loadData"
-    @selection-changed="handleSelectionChanged"
   />
   <ZimfarmNotificationTable
     v-show="currentTab == 'zimfarm_notifications'"
@@ -40,11 +43,19 @@
     :loading-text="loadingStore.loadingText"
     :errors="errors"
     :filters="zimfarmFilters"
-    :selected-zimfarm-notifications="selectedZimfarmNotifications"
-    :show-selection="true"
     @limit-changed="handleLimitChange"
     @load-data="loadData"
-    @selection-changed="handleSelectionChanged"
+  />
+  <EventTable
+    v-show="currentTab == 'events'"
+    :headers="headers"
+    :events="events"
+    :paginator="paginator"
+    :loading="loadingStore.isLoading"
+    :loading-text="loadingStore.loadingText"
+    :errors="errors"
+    @limit-changed="handleLimitChange"
+    @load-data="loadData"
   />
 </template>
 
@@ -54,11 +65,15 @@ import BookFilters from '@/components/BookFilters.vue'
 import BookTable from '@/components/BookTable.vue'
 import ZimfarmNotificationFilters from '@/components/ZimfarmNotificationFilters.vue'
 import ZimfarmNotificationTable from '@/components/ZimfarmNotificationTable.vue'
+import EventFilters from '@/components/EventFilters.vue'
+import EventTable from '@/components/EventTable.vue'
 import { useLoadingStore } from '@/stores/loading'
 import { useBookStore } from '@/stores/book'
 import { useZimfarmNotificationStore } from '@/stores/zimfarmNotification'
+import { useEventStore } from '@/stores/event'
 import type { BookLight } from '@/types/book'
 import type { ZimfarmNotificationLight } from '@/types/zimfarmNotification'
+import type { EventLight } from '@/types/event'
 import type { Paginator } from '@/types/base'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
@@ -68,12 +83,14 @@ const route = useRoute()
 
 const bookStore = useBookStore()
 const zimfarmNotificationStore = useZimfarmNotificationStore()
+const eventStore = useEventStore()
 const loadingStore = useLoadingStore()
 
 // Filter options
 const tabOptions = [
   { value: 'books', label: 'BOOKS' },
   { value: 'zimfarm_notifications', label: 'ZIMFARM NOTIFICATIONS' },
+  { value: 'events', label: 'EVENTS' },
 ]
 
 // Define headers for the table
@@ -92,6 +109,12 @@ const headers = computed(() => {
         { title: 'Received', value: 'received_at' },
         { title: 'Status', value: 'status' },
       ]
+    case 'events':
+      return [
+        { title: 'ID', value: 'id' },
+        { title: 'Created', value: 'created_at' },
+        { title: 'Topic', value: 'topic' },
+      ]
     default:
       return []
   }
@@ -102,12 +125,22 @@ const currentTab = computed(() => {
   return (Array.isArray(tab) ? tab[0] : tab) || 'books'
 })
 
-const defaultLimit = computed(() =>
-  currentTab.value == 'book' ? bookStore.defaultLimit : zimfarmNotificationStore.defaultLimit,
-)
+const defaultLimit = computed(() => {
+  switch (currentTab.value) {
+    case 'books':
+      return bookStore.defaultLimit
+    case 'zimfarm_notifications':
+      return zimfarmNotificationStore.defaultLimit
+    case 'events':
+      return eventStore.defaultLimit
+    default:
+      return 20
+  }
+})
 
 const books = ref<BookLight[]>([])
 const zimfarmNotifications = ref<ZimfarmNotificationLight[]>([])
+const events = ref<EventLight[]>([])
 const paginator = ref<Paginator>({
   page: Number(route.query.page) || 1,
   page_size: defaultLimit.value,
@@ -151,9 +184,19 @@ const zimfarmFilters = computed(() => {
   return derived
 })
 
+const eventFilters = computed(() => {
+  const query = router.currentRoute.value.query
+  const derived = {
+    topic: '',
+  }
+  if (query.topic && typeof query.topic === 'string') {
+    derived.topic = query.topic
+  }
+
+  return derived
+})
+
 const intervalId = ref<number | null>(null)
-const selectedBooks = ref<string[]>([])
-const selectedZimfarmNotifications = ref<string[]>([])
 
 const handleTabChange = (newTab: string) => {
   // Navigate to the new tab route
@@ -164,23 +207,28 @@ const handleTabChange = (newTab: string) => {
   })
 }
 
-// Clear selections when switching tabs
-watch(currentTab, () => {
-  selectedBooks.value = []
-  selectedZimfarmNotifications.value = []
-})
-
 async function loadData(limit: number, skip: number, tab?: string, hideLoading: boolean = false) {
   if (!tab) {
     tab = currentTab.value
   }
 
   if (!hideLoading) {
-    loadingStore.startLoading(
-      tab === 'books' ? 'Fetching books...' : 'Fetching zimfarm notifications...',
-    )
+    let loadingText = 'Fetching data...'
+    switch (tab) {
+      case 'books':
+        loadingText = 'Fetching books...'
+        break
+      case 'zimfarm_notifications':
+        loadingText = 'Fetching zimfarm notifications...'
+        break
+      case 'events':
+        loadingText = 'Fetching events...'
+        break
+    }
+    loadingStore.startLoading(loadingText)
     books.value = []
     zimfarmNotifications.value = []
+    events.value = []
   }
 
   switch (tab) {
@@ -213,6 +261,13 @@ async function loadData(limit: number, skip: number, tab?: string, hideLoading:
       zimfarmNotificationStore.savePaginatorLimit(limit)
       paginator.value = { ...zimfarmNotificationStore.paginator }
       break
+    case 'events':
+      await eventStore.fetchEvents(limit, skip, eventFilters.value.topic || undefined)
+      events.value = eventStore.events
+      errors.value = eventStore.errors
+      eventStore.savePaginatorLimit(limit)
+      paginator.value = { ...eventStore.paginator }
+      break
     default:
       throw new Error(`Invalid tab: ${tab}`)
   }
@@ -230,6 +285,9 @@ async function handleLimitChange(newLimit: number) {
     case 'zimfarm_notifications':
       zimfarmNotificationStore.savePaginatorLimit(newLimit)
       break
+    case 'events':
+      eventStore.savePaginatorLimit(newLimit)
+      break
   }
 
   if (paginator.value.page != 1) {
@@ -245,7 +303,7 @@ async function handleLimitChange(newLimit: number) {
 }
 
 function updateUrlFilters(
-  sourceFilters: typeof bookFilters.value | typeof ZimfarmNotificationFilters.value,
+  sourceFilters: typeof bookFilters.value | typeof zimfarmFilters.value | typeof eventFilters.value,
 ) {
   // create query object from selected filters
   const query: Record<string, string | string[]> = {}
@@ -255,7 +313,7 @@ function updateUrlFilters(
     query.tab = currentTab.value
   }
 
-  if (sourceFilters.id) {
+  if ('id' in sourceFilters && sourceFilters.id) {
     query.id = sourceFilters.id
   }
 
@@ -267,6 +325,10 @@ function updateUrlFilters(
     query.flag = sourceFilters.flag
   }
 
+  if ('topic' in sourceFilters && sourceFilters.topic) {
+    query.topic = sourceFilters.topic
+  }
+
   router.push({
     name: route.name,
     query: Object.keys(query).length > 0 ? query : undefined,
@@ -281,6 +343,9 @@ async function clearFilters() {
     case 'zimfarm_notifications':
       updateUrlFilters({ id: '' })
       break
+    case 'events':
+      updateUrlFilters({ topic: '' })
+      break
   }
 }
 
@@ -292,15 +357,8 @@ async function handleZimfarmFiltersChange(newFilters: typeof zimfarmFilters.valu
   updateUrlFilters(newFilters)
 }
 
-function handleSelectionChanged(newSelection: string[]) {
-  switch (currentTab.value) {
-    case 'books':
-      selectedBooks.value = newSelection
-      break
-    case 'zimfarm_notifications':
-      selectedZimfarmNotifications.value = newSelection
-      break
-  }
+async function handleEventFiltersChange(newFilters: typeof eventFilters.value) {
+  updateUrlFilters(newFilters)
 }
 
 watch(