feat: implement search and clean up PastActivities

components.d.ts

@@ -20,6 +20,7 @@ declare module 'vue' {
     Header: typeof import('./src/components/header/Header.vue')['default']
     HomepageCards: typeof import('./src/components/homepage/HomepageCards.vue')['default']
     HomepageSlider: typeof import('./src/components/homepage/HomepageSlider.vue')['default']
+    IconField: typeof import('primevue/iconfield')['default']
     InformationActivites: typeof import('./src/components/activities/InformationActivites.vue')['default']
     InputText: typeof import('primevue/inputtext')['default']
     LanguageSwitcher: typeof import('./src/components/ui/LanguageSwitcher.vue')['default']

src/components/activities/PastActivities.vue

@@ -1,89 +1,87 @@
-<template>
-    <div class="flex pb-4 justify-between items-end">
-        <h2>{{ $gettext('Past activities') }}</h2>
-        <InputText v-model="filters['global'].value" :placeholder="$gettext('Zoek activiteiten')" />
-        <!-- TODO: InputText implementation -->
-    </div>
-    <ProgressSpinner v-if="loading && loadCounter == 0" />
-    <DataTable v-model:filters="filters" filterDisplay="menu" :loading="loading" size="large" stripedRows
-        v-if="queryItems" :value="queryItems" paginator :rows="limit" :totalRecords="count!" lazy @page="onPage"
-        :rowsPerPageOptions="[10, 20, 30, 50, 100]">
-        <Column field="startDate" :header="$gettext('Date')" style="width: 15%;" class="font-mono font-bold">
-        </Column>
-        <Column field="summary" :header="$gettext('Activity')">
-            <template #body="props">
-                <RouterLink :to="{ name: 'singleactivities', params: { id: props.data.id } }">
-                    <span class="link">{{ props.data.summary }}</span>
-                </RouterLink>
-            </template>
-        </Column>
-        <Column field="hasPhotos" style="width: 10%;">
-            <template #header>
-                <Camera />
-            </template>
-            <template #body="props">
-                <div v-if="props.data.hasPhotos">
-                    <RouterLink :to="{ name: 'singleactivitiesphotos', params: { id: props.data.id } }">
-                        <span class="link">{{ $gettext("Photos") }}</span>
-                    </RouterLink>
-                </div>
-            </template>
-        </Column>
-    </DataTable>
-</template>
-
 <script setup lang="ts">
 import DataTable, { type DataTablePageEvent } from 'primevue/datatable';
 import Column from 'primevue/column';
 import { FilterMatchMode } from '@primevue/core/api';
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { formattedDataShort, getItemValue } from '@/functions/functions.ts'
 import { useGettext } from 'vue3-gettext'
 import { Camera } from 'lucide-vue-next';
 import { useQuery } from '@/composables/queries';
 
 const { $gettext } = useGettext();
 const limit = ref(20);
-const query = useQuery('pastActivities', { limit: limit.value, endDate: new Date() })
+const searchQuery = ref("");
+const query = useQuery('pastActivities', { limit: limit.value, endDate: new Date(), search: searchQuery.value.trim() })
 const { result, refetch, loading } = query;
-const count = computed(() => {
-    return result.value?.activities?.totalCount;
-})
+const count = computed(() => result.value?.activities?.totalCount);
 
 const first = ref(0) // first record index
 const loadCounter = ref(0);
 
 query.onResult(() => {
     loadCounter.value += 1;
-})
+});
 
-const queryItems = computed(() => {
-    return result.value?.activities?.results.map(r => {
-        return {
-            id: r?.id,
-            description: r?.description,
-            startDate: formattedDataShort(r?.begin),
-            summary: getItemValue(r, 'summary'),
-            hasPhotos: (r?.photos == undefined) ? false : (r?.photos.length > 0),
-        }
+const queryItems = computed(() => result.value?.activities?.results.map(r => ({
+    id: r?.id,
+    description: r?.description,
+    startDate: formattedDataShort(r?.begin),
+    summary: getItemValue(r, 'summary'),
+    hasPhotos: (r?.photos == undefined) ? false : (r?.photos.length > 0),
+})));
+
+watch(searchQuery, async () => {
+    await refetch({
+        search: searchQuery.value.trim()
     })
-})
+});
 
-// Custom page event handler
 const onPage = async (event: DataTablePageEvent) => {
     first.value = event.first
-    // rows.value = event.rows
     await refetch({
         limit: event.rows,
         offset: event.first,
         endDate: new Date(),
+        search: searchQuery.value.trim()
     })
 }
-
-const filters = ref({
-    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-    // verified: { value: null, matchMode: FilterMatchMode.EQUALS }
-});
 </script>
 
-<style scoped></style>
+<template>
+    <div class="flex pb-4 justify-between items-end">
+        <h2>{{ $gettext('Past activities') }}</h2>
+        <InputText v-model="searchQuery" :placeholder="$gettext('Zoek activiteiten')" />
+    </div>
+
+    <ProgressSpinner v-if="loading && loadCounter == 0" />
+<!-- v-model:filters="filters"  -->
+    <DataTable filterDisplay="menu" :loading="loading" size="large" stripedRows
+        v-if="queryItems" :value="queryItems" paginator :rows="limit" :totalRecords="count!" lazy @page="onPage"
+        :rowsPerPageOptions="[10, 20, 30, 50, 100]">
+
+        <Column field="startDate" :header="$gettext('Date')" style="width: 15%;" class="font-mono font-bold">
+        </Column>
+
+        <Column field="summary" :header="$gettext('Activity')">
+            <template #body="props">
+                <RouterLink :to="{ name: 'singleactivities', params: { id: props.data.id } }">
+                    <span class="link">{{ props.data.summary }}</span>
+                </RouterLink>
+            </template>
+        </Column>
+
+        <Column field="hasPhotos" style="width: 10%;">
+            <template #header>
+                <Camera />
+            </template>
+
+            <template #body="props">
+                <div v-if="props.data.hasPhotos">
+                    <RouterLink :to="{ name: 'singleactivitiesphotos', params: { id: props.data.id } }">
+                        <span class="link">{{ $gettext("Photos") }}</span>
+                    </RouterLink>
+                </div>
+            </template>
+        </Column>
+    </DataTable>
+</template>

src/queries/queries.gql

@@ -38,8 +38,8 @@ query OverviewActivities($limit: Int, $offset: Int, $startDate: DateTime!) {
   }
 }
 
-query PastActivities($limit: Int, $offset: Int, $endDate: DateTime) {
-  activities(limit: $limit, offset: $offset, ordering: "begin,desc", begin_Lt: $endDate) {
+query PastActivities($limit: Int, $offset: Int, $endDate: DateTime, $search: String) {
+  activities(limit: $limit, offset: $offset, ordering: "begin,desc", begin_Lt: $endDate, summaryNl_Icontains: $search) {
     totalCount
     results {
       id